/* ═══════════════════════════════════════════════════════════════
   Starter Products — "Bakımına Buradan Başla"
   Two equal-status care routes — Saç Derisi Bakımı / Yüz & Vücut
   Bakımı — side by side, tied together by a single hairline
   divider (an editorial spread, not two unrelated product cards).
   Both routes use the identical card treatment at identical size;
   any hierarchy the section has is between "the two main routes"
   and "the quiet single-product text alternative", never between
   the two routes themselves.
   ═══════════════════════════════════════════════════════════════ */

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products {
  padding: var(--space-lg) 0;
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 80px);
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__header {
  margin-bottom: var(--space-md);
  max-width: 640px;
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__heading {
  font-family: var(--font-display);
  font-weight: 400;
  /* Mobile/tablet: "ürün listeleme bölüm başlığı" target 18-20px (was
     --text-h2=28px floor). Restored to --text-h2 at desktop below. */
  font-size: 20px;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs);
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__heading {
  color: var(--color-bg);
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__subtext {
  font-family: var(--font-body);
  /* Mobile/tablet: "ürün açıklaması" target 13-14px (was --text-body=16px).
     Restored to --text-body at desktop below. */
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__heading {
    font-size: var(--text-h2);
  }

  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__subtext {
    font-size: var(--text-body);
  }
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__subtext {
  color: var(--color-accent-light);
}

/* ─── Two-route layout: equal 1fr/1fr columns, no size hierarchy
   between them. On mobile the routes stack, separated by a thin
   horizontal rule; on desktop the same rule becomes a vertical
   divider between the columns — the same editorial device in both
   orientations, doubling as the connective tissue between routes. */

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__layout {
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    align-items: start;
  }
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__route-label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route-label {
  color: var(--color-accent-light);
}

/* Face & body route carries the divider — a hairline rule shared
   by both orientations, never a boxed module or white card. The
   inward padding is applied symmetrically on BOTH routes (not just
   as padding-left on facebody) so the divider doesn't silently
   steal width from only one side and break the equal image size. */

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__route--facebody {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__route--hair {
    padding-right: var(--space-xl);
  }

  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__route--facebody {
    border-top: none;
    padding-top: 0;
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-xl);
  }
}

/* No face&body route to share the section with — the hair route (in
   whichever internal layout it uses, including the 3-up grid below)
   should take the full container width instead of sitting in a 2-column
   grid with an empty, unused second column. isSingleProduct already
   covers its own narrower/centered case via .starter-products--single
   above; this is the general form that also applies to the new 3-up
   grid and to "hero+secondary, no facebody" — neither of which was
   previously collapsed to full width. */
@media (min-width: 1024px) {
  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products--single-route .starter-products__layout {
    grid-template-columns: 1fr;
  }

  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products--single-route .starter-products__route--hair {
    padding-right: 0;
  }
}

/* ─── Dark background contrast — applies to both routes ──────── */

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route .starter-product-card__title, .cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route .starter-product-card__price, .cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route .starter-product-card__cta, .cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route .starter-product-card__text-link-title, .cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route .starter-product-card__text-link-price {
  color: var(--color-bg);
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route .starter-product-card__supporting, .cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route .starter-product-card__price-original, .cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route .starter-product-card__text-link-microcopy, .cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route--hair .starter-product-card--text-link {
  color: var(--color-accent-light);
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route--facebody, .cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route--hair .starter-product-card--text-link {
  border-color: var(--color-accent);
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__route .starter-product-card__price-group + .starter-product-card__cta::before {
  color: var(--color-accent-light);
}

/* ─── Hair-zone 3-up editorial grid ──────────────────────────────
   Only used when cleanseProduct is set (see index.tsx's useHairGrid) —
   every placement without it keeps rendering the original hero-primary
   + secondary-text-link markup untouched, so nothing below can affect
   them. DOM order is fixed: cleanse (Şampuan) → secondary (Serum) →
   hero (Set). Mobile: cleanse/secondary as two compact cards side by
   side; set spans the full row below, compact via a row (image+text
   side-by-side) layout instead of the default stacked square image.
   Desktop (>=768px — deliberately NOT the outer route split's 1024px,
   this inner grid switches earlier): all three equal columns, images
   sized to their own ~1/3 column instead of the old single-mode's
   34rem centered giant image. */

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-md);
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--set {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }

  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--set {
    grid-column: auto;
  }
}

/* Subtle desktop-premium emphasis for the Set — a soft background panel
   with rounded corners, NOT a "most popular" badge/label, no ribbon, no
   marketplace card shadow. Applied at every breakpoint the grid is
   active (mobile's compact row layout below composes with this). */
.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--set .starter-product-card {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__hair-item--set .starter-product-card {
  background: rgba(255, 255, 255, 0.06);
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--set .starter-product-card__media {
  border-radius: var(--radius-sm);
}

/* Mobile hierarchy: Şampuan/Serum are entry options, the Set is the
   section's hero purchase card — their image sizes should say so at a
   glance. Cleanse/secondary keep their existing compact stacked layout
   (image inset to a fraction of the card width) — deliberately left
   as-is, per spec, since only the Set needed fixing. The Set previously
   used a row (image+text side-by-side) layout with an 84-132px
   thumbnail, which read as a small horizontal banner instead of a hero
   card — removed. It now uses the SAME stacked layout as every other
   StarterProductCard usage (full-width image on top), so its image is
   the section's full content width — clearly the largest of the three —
   with a shorter 4/3 aspect ratio (instead of the shared 1/1) to stay
   large without an oversized square. */
@media (max-width: 767px) {
  /* 62% -> 70% wasn't a strong enough visual jump in real Studio at
     380px (measured ~111px, still read close to the old thumbnail
     size). Bumped to 80% (~127px at a real 159px mobile column width)
     to make the size increase actually legible, while still leaving a
     visible inset margin so cleanse/secondary stay a clear fraction of
     the card width, not full-bleed — still smaller than the Set below,
     preserving the hierarchy. Two columns + this max-width keep both
     cards equal width and never overflow their 159px column. */
  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--cleanse .starter-product-card__media, .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--secondary .starter-product-card__media {
    max-width: 80%;
  }

  /* Specificity note: StarterProductCard's own base rule
     (.starter-product-card--primary .starter-product-card__media) is 2
     classes and — since its CSS chunk is bundled AFTER this file's in
     the compiled output — wins any equal-specificity tie regardless of
     media-query nesting. Including --primary here makes this 3 classes,
     so it reliably overrides the shared 1/1 default instead of silently
     losing to it. */
  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--set .starter-product-card--primary .starter-product-card__media {
    aspect-ratio: 4 / 3;
  }

  /* Tighten the Set card's OWN vertical rhythm below the image (mobile
     only — desktop's existing padding/gap is untouched). None of this
     touches the image itself (still 4/3 at full card width above) —
     critically, card padding is now VERTICAL-ONLY (padding-block), so
     the horizontal padding stays at var(--space-sm) exactly as before
     and the media (width:100% of the card's content box) keeps its
     exact original width. An earlier version of this rule used a
     uniform `padding: 8px` shorthand, which also halved the horizontal
     padding and silently grew the image ~16px wider — caught via real
     Playwright measurement (310px -> 326px) and reverted to
     vertical-only here.
     Each remaining override targets a value that was either simply
     generous (content's own top gap) or a genuine redundancy: the
     card's shared .starter-product-card__meta already sits inside a
     flex column with a gap from .starter-product-card__content, so its
     own extra margin-top was stacking ON TOP of that gap rather than
     replacing it. */
  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--set .starter-product-card {
    padding-top: 8px; /* was var(--space-sm), 16px */
    padding-bottom: 8px; /* was var(--space-sm), 16px */
    /* padding-left / padding-right intentionally left at var(--space-sm) */
  }

  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--set .starter-product-card__content {
    padding-top: 6px; /* was var(--space-sm), 16px — gap below the image */
    gap: 2px; /* was 4px */
  }

  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--set .starter-product-card__eyebrow {
    margin-bottom: 2px; /* was 4px */
  }

  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--set .starter-product-card__meta {
    margin-top: 0; /* was 6px, redundant on top of the 2px content gap above */
  }
}

/* Compact mobile CTA for the two entry-option cards — no longer hidden,
   but visibly smaller/quieter than the Set's CTA below, matching their
   secondary role in the purchase hierarchy. Desktop (>=768px) uses the
   shared default size (unchanged from before this task). */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--cleanse .starter-product-card__cta, .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--secondary .starter-product-card__cta {
    font-size: 12px;
  }
}

/* Set's CTA is the section's main purchase action — a filled pill
   instead of the shared quiet text+icon style, at every breakpoint the
   grid is active. Still just button styling, not a merchandising badge. */
.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--set .starter-product-card__cta--button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-text-primary);
  color: var(--color-bg);
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 500;
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--set .starter-product-card__cta--button:disabled {
  opacity: 0.6;
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__hair-item--set .starter-product-card__price-group + .starter-product-card__cta--button::before {
  content: none;
}

/* ─── Footer CTA ──────────────────────────────────────────────── */

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__footer {
  margin-top: var(--space-md);
  text-align: center;
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__all-link {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
  transition: border-color 200ms ease, color 200ms ease;
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__all-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--dark .starter-products__all-link {
  color: var(--color-bg);
  border-color: var(--color-accent-light);
}

@media (prefers-reduced-motion: reduce) {
  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__all-link {
    transition: none;
  }
}

/* ─── Single-product mode ──────────────────────────────────────
   Only heroProduct is set (no secondary, no face&body route) — a
   single centered, contained "featured product" showcase instead of
   the two-route split. Image/title/price/CTA still come from the
   same shared StarterProductCard; only the outer layout changes.
   Any combination that also fills a second route is untouched by
   these rules (they only apply under .starter-products--single). */

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--single .starter-products__header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--single .starter-products__route--hair {
  max-width: 34rem;
  margin: 0 auto;
}

.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--single .starter-products__route-label {
  text-align: center;
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products--single .starter-products__layout {
    grid-template-columns: 1fr;
  }

  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products--single .starter-products__route--hair {
    padding-right: 0;
  }
}

/* ─── Contained hair route (legacy, non-grid layout only) ────────
   Additive — does NOT replace or modify .starter-products--single
   above. .starter-products--single only covers "hero only"; this
   covers the broader "legacy hair route with no cleanseProduct and
   no facebody route" case, which also includes "hero + secondary"
   (secondary renders as a quiet text-link here, no image of its own —
   see StarterProductCard). Without this, adding secondaryProduct
   dropped --single (isSingleProduct requires !hasSecondary) while
   --single-route still applied, stretching the hero card's image to
   the section's full container width instead of staying at the same
   contained size a hero-only placement gets. Deliberately scoped to
   never fire when useHairGrid is active (the 3-up Şampuan/Serum/Set
   grid legitimately wants the full width for 3 columns) or when
   hasFaceBody is set (the two-route split already has its own column
   width) — both those paths are completely untouched. */
.cc_zRr7AL87AP_OiA8vKCPUE .starter-products--contained-hair .starter-products__route--hair {
  max-width: 34rem;
  margin: 0 auto;
}

/* ─── Dual-product route (isDualProductRoute) ─────────────────────
   Exactly "hero + secondary, no cleanse, no facebody" — e.g. a Yüz &
   Vücut placement with a single main product and a real second
   product (not the quiet text-link upsell the legacy branch uses).
   Both cards render as variant="primary" (own image, same treatment)
   in a dedicated 2-up grid, completely separate from
   .starter-products__hair-grid (which stays untouched for the 3-up
   Şampuan/Serum/Set case) and from .starter-products--contained-hair
   (excluded via isContainedHairRoute so the two width rules never
   compete on the same element). Mobile-first: stacks to one column;
   ≥1024px becomes 2 equal, balanced columns. max-width keeps the pair
   centered at a premium/editorial width instead of stretching across
   the full section, without introducing any new arbitrary container
   value elsewhere in the file. */
.cc_zRr7AL87AP_OiA8vKCPUE .starter-products__dual-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 56rem;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_OiA8vKCPUE .starter-products__dual-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
}