/* Home shop only — kargo banner + Yeni / Çok Satan / Günün rails */

.home-shop-kargo.kargo-banner {
  position: relative;
  margin: var(--space-lg, 1.5rem) 0 var(--space-2xl, 3rem);
  padding: 0.95rem var(--space-lg, 1.5rem);
  background:
    linear-gradient(
      105deg,
      var(--color-brand-deep, #b33a33) 0%,
      var(--color-brand, #d0473e) 45%,
      var(--color-brand-soft, #e86b63) 100%
    );
  color: #fff;
  text-align: center;
  font-family: var(--font-body, "Gantari", sans-serif);
  font-weight: var(--font-weight-medium, 500);
  font-size: var(--text-xs, 0.75rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.home-shop-kargo.kargo-banner::before,
.home-shop-kargo.kargo-banner::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3.75rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

.home-shop-kargo.kargo-banner::before {
  left: max(1rem, calc(50% - 13.5rem));
  transform: translateY(-50%);
}

.home-shop-kargo.kargo-banner::after {
  right: max(1rem, calc(50% - 13.5rem));
  transform: translateY(-50%);
}

@media (max-width: 640px) {
  .home-shop-kargo.kargo-banner {
    letter-spacing: 0.1em;
    padding: 0.85rem var(--space-md, 1rem);
  }

  .home-shop-kargo.kargo-banner::before,
  .home-shop-kargo.kargo-banner::after {
    display: none;
  }
}

/* Product rails — arrow + autoplay carousel */
.home-shop-rail.homeProductArea {
  margin: var(--space-2xl, 3rem) 0 calc(var(--space-2xl, 3rem) + 0.5rem);
  padding: 0;
}

.home-shop-rail .home-shop-title {
  font-family: var(--font-display, "Gantari", system-ui, sans-serif);
  font-weight: var(--font-weight-medium, 500);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-optical-sizing: auto;
  letter-spacing: var(--tracking-display, -0.015em);
  line-height: var(--leading-tight, 1.15);
  color: var(--color-ink, #1c1412);
  margin: 0 0 var(--space-lg, 1.5rem);
  padding: 0 0.1rem;
  display: inline-block;
}

.home-shop-rail .home-shop-title::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-top: var(--space-xs, 0.5rem);
  background: var(--color-brand, #d0473e);
  opacity: 0.9;
}

.home-shop-track {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}

.home-shop-rail .home-shop-owl.productOwl {
  display: flex;
  gap: var(--space-lg, 1.5rem);
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 0.25rem;
  padding: 0.4rem 2.75rem 1.2rem;
  margin: 0;
  -webkit-overflow-scrolling: auto;
  scrollbar-width: none;
  touch-action: pan-y;
  contain: layout style;
}

.home-shop-rail .home-shop-owl.productOwl::-webkit-scrollbar {
  display: none;
  height: 0;
}

.home-shop-rail .home-shop-owl .product-card,
.home-shop-rail .home-shop-owl .productitem {
  /* Match listing sf-card cell scale (minmax ~200–300px) */
  flex: 0 0 clamp(220px, 24vw, 300px);
  scroll-snap-align: start;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  contain: layout paint style;
}

.home-shop-rail .home-shop-owl .thumb[data-bg] {
  background-image: none;
}

.home-shop-rail .home-shop-owl .product-card:hover,
.home-shop-rail .home-shop-owl .productitem:hover {
  transform: none;
  box-shadow: none;
}

.home-shop-rail .home-shop-owl .thumb {
  border: none;
  overflow: hidden;
}

.home-shop-rail .home-shop-owl .empty-inline {
  flex: 1 1 100%;
  margin: 0;
  padding: var(--space-md, 1rem) 0.25rem;
  font-family: var(--font-body, "Gantari", sans-serif);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-ink-muted, #5c534f);
}

.home-shop-nav {
  position: absolute;
  top: 38%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(28, 20, 18, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink, #1c1412);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
  box-shadow: 0 1px 0 rgba(28, 20, 18, 0.04);
}

.home-shop-nav:hover,
.home-shop-nav:focus-visible {
  border-color: var(--color-brand, #d0473e);
  color: var(--color-brand, #d0473e);
  background: #fff;
  outline: none;
  box-shadow: 0 2px 10px rgba(208, 71, 62, 0.12);
}

.home-shop-nav:active {
  transform: translateY(-50%) scale(0.96);
}

.home-shop-nav--prev {
  left: 0.15rem;
}

.home-shop-nav--next {
  right: 0.15rem;
}

.home-shop-nav[hidden],
.home-shop-track.is-static .home-shop-nav {
  display: none;
}

@media (max-width: 640px) {
  .home-shop-rail .home-shop-owl.productOwl {
    padding-inline: 1.85rem;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    /* pan-x alone trapped vertical page scroll over the rail on mobile */
    touch-action: pan-x pan-y;
  }

  /* ~1.75 cards visible — listing-scale rail with next-card peek; swipeable */
  .home-shop-rail .home-shop-owl .product-card,
  .home-shop-rail .home-shop-owl .productitem {
    flex: 0 0 calc((100% - 0.75rem) / 1.75);
    min-width: 0;
  }

  .home-shop-nav {
    width: 2rem;
    height: 2rem;
  }

  .home-shop-nav svg {
    width: 14px;
    height: 14px;
  }
}

@media (min-width: 900px) {
  .home-shop-rail .home-shop-owl.productOwl {
    gap: var(--space-xl, 2rem) var(--space-lg, 1.5rem);
    padding: 0.35rem 3rem 1rem;
  }

  .home-shop-rail .home-shop-owl .product-card,
  .home-shop-rail .home-shop-owl .productitem {
    flex: 0 0 clamp(240px, 20vw, 300px);
  }

  .home-shop-nav {
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-shop-rail .home-shop-owl.productOwl {
    scroll-behavior: auto;
  }
}

.home-shop-rail + .home-shop-rail {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-line, #e8ddd8) 14%,
    var(--color-line, #e8ddd8) 86%,
    transparent 100%
  );
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: var(--space-2xl, 3rem);
  margin-top: var(--space-md, 1rem);
}

.home-shop-rail[data-showcase="yeni"] .home-shop-title::after {
  background: var(--color-brand-deep, #b33a33);
}

.home-shop-rail[data-showcase="coksatan"] .home-shop-title::after {
  width: 3rem;
  background: linear-gradient(
    90deg,
    var(--color-brand, #d0473e),
    var(--color-brand-soft, #e86b63)
  );
}

.home-shop-rail[data-showcase="gunun"] .home-shop-title::after {
  width: 2.75rem;
  background: #9a4a42;
}