/* ═══════════════════════════════════════════════════════════════
   Concern Why Routine — product-specific editorial image+text block.
   Layout convention mirrors ImageWithText (1 column mobile → 2 equal
   columns ≥768px). The optional short note over the image reuses
   MediaLinkCard's existing overlay+absolute-caption technique — no
   new overlay pattern introduced into the theme.
   Content source: PRODUCT_ATTRIBUTE (per-product) → Studio fallback →
   empty, resolved in index.tsx.
   ═══════════════════════════════════════════════════════════════ */

.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine {
  padding: var(--space-xl) 0;
}

@media (max-width: 767px) {
  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine {
    padding: var(--space-md) 0;
  }
}

.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 80px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

/* Mobile only: visually reorder to eyebrow/heading/description first,
   image second — with ConcernHero's own image now text-free (separate
   component, fixed independently), the full-page mobile order should
   read Hero image -> this text -> this image -> the 5 reasons. DOM
   order itself is unchanged (.media is still the first child in
   index.tsx), so this is purely a visual reorder via grid `order`,
   scoped to <768px only. The >=768px rule above sets no `order`, so
   DOM order (media first) keeps the image in the left column at
   desktop/tablet exactly as before. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__media {
    order: 2;
    /* Intrinsic sizing instead of the forced 4:5 box used >=768px below:
       a landscape image shrunk by object-fit:contain into a tall
       fixed-ratio box left large empty bands above/below it. Letting
       height follow the image's own real aspect ratio removes that gap
       for any image shape, without switching to object-fit:cover (which
       would crop tall product shots — the exact regression this
       component already avoids, see .concern-why-routine__image's own
       comment below). aspect-ratio/height are now defined ONLY inside
       the >=768px block further down — not in any unscoped base rule —
       so nothing of equal specificity declared later in this file can
       silently cancel this pair out again (see that block's comment). */
    aspect-ratio: auto;
  }

  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__content {
    order: 1;
  }

  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__image {
    height: auto;
  }
}

/* min-width:0 on both direct grid items — without it, a 1fr column's
   implicit min-width is content-based (max-content), so any child with
   wide intrinsic content (e.g. unwrapped text) inflates the WHOLE
   column (and, at >=768px, steals width from the other 1fr column).
   Same bug class as .pdp-gallery-col elsewhere in this theme. */
/* background was var(--color-surface-alt) (#EDE7DC, a tan/beige) — a
   fixed color that does NOT match this section's own background (the
   backgroundColor prop, #FAF8F5 by default and Studio-editable). On
   mobile, where .concern-why-routine__image below uses object-fit:
   contain, a product photo whose own proportions don't exactly fill
   this 4:5 box lets this background show through as visible letterbox
   bars — a different-colored strip around the photo, disconnecting it
   from the text/reasons below (which carry no background of their own
   and simply show the section's real background). Not an image-file
   issue: these bars are this element's own CSS background, not pixels
   baked into the photo, confirmed by this being the only `background`
   declaration with a flat color anywhere in this file. Changed to
   transparent so the letterbox (when it occurs) is always exactly
   whatever is actually behind it — the section's own live background,
   not a second, independently-maintained color that can drift out of
   sync with it (e.g. if a merchant changes backgroundColor later).
   Desktop is unaffected either way: .concern-why-routine__image below
   switches to object-fit:cover at >=768px, which always fills this
   box completely, so no background color — old or new — ever shows
   there. */
.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__media {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: transparent;
}

/* Mobile: contain, not cover — a 4:3-ish crop on a tall bottle shot was
   cutting part of the product off. Showing the whole image inside the
   4:5 box (no longer letterboxed by a separate fixed color now that
   .concern-why-routine__media's own background above is transparent —
   see that rule's comment) guarantees nothing is lost, without
   guessing a crop focal point. Desktop keeps the existing cover
   treatment — no issue was reported there. */
.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__image {
  display: block;
  width: 100%;
  object-fit: contain;
}

/* aspect-ratio (media) and height:100% (image) moved here from the base
   rules above — this pair only makes sense together with object-fit:
   cover, which is itself >=768px-only. Previously both lived in the
   unscoped base rule with no media query at all; because they shared
   the exact same selector (and therefore the exact same specificity) as
   the <767px mobile override further up this file, and CSS breaks a
   specificity tie by source order, these later, unscoped declarations
   silently won at EVERY width, including mobile — cancelling out
   aspect-ratio:auto/height:auto there despite the mobile rule looking
   correct on its own. Defining them only inside this >=768px block
   removes that conflict entirely: at <768px neither declaration exists
   anywhere outside the mobile block, so its own aspect-ratio:auto/
   height:auto are the only rule in effect, unopposed. */
@media (min-width: 768px) {
  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__media {
    aspect-ratio: 4 / 5;
  }

  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__image {
    height: 100%;
    object-fit: cover;
  }
}

/* Same warm overlay tint MediaLinkCard already uses for legibility under
   overlaid text — kept to a bottom gradient here (a short note, not a
   full title) rather than the full-tile tint. */
.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 38, 28, 0.55) 0%, rgba(20, 38, 28, 0) 45%);
  pointer-events: none;
}

.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__media-note {
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-sm);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  color: #ffffff;
}

/* Mobile only: hide the overlay note text over the image (e.g. "Saç
   derinizin ihtiyaçlarına kulak verin.") so the photo reads clean and
   unlabeled. Both are separate elements rendered only when imageNote
   resolves to a non-empty string (index.tsx) - this hides their
   display, it doesn't touch the image file, the imageNote content/
   attribute wiring, or the desktop rendering of either element. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__media-overlay, .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__media-note {
    display: none;
  }
}

.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

/* Desktop only — the tight 8px gap (kept as-is for mobile, which has its
   own compact rhythm) read as cramped once the column had three
   distinct pieces of copy stacked in it. .concern-why-routine__description
   below still adds its own extra margin-top on top of this gap, so
   eyebrow->heading stays the tightest step and heading->description the
   most open — hierarchy preserved, just with more room throughout. */
@media (min-width: 768px) {
  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__content {
    gap: var(--space-sm);
  }
}

/* Short-tag treatment without forcing a single unbreakable line: a
   long paragraph bound to this field wraps normally (overflow-wrap
   catches a single very long word) instead of either truncating real
   content or — as white-space:nowrap + overflow:hidden on this
   non-grid-item element did — inflating the grid column above and
   pushing the whole section off-screen. Content/attribute wiring is
   unchanged; only the display is constrained. */
.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__eyebrow {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  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);
}

.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* Site-wide typography pass: "marka bölümü başlığı" masaüstü hedefi
     28px — was var(--text-h2) (44px cap). Mobile value lives in the
     existing <767px override below (28px → 24px). */
  font-size: 28px;
  line-height: 1.15;
  color: var(--color-text-primary);
}

.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__description {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 48ch;
}

/* ─── Reason list — up to 5 product-specific "why this routine" points.
   Deliberately simple and static: numbered label + short title + short
   description, no scroll-reveal animation, no rail/hairline — a quieter
   supporting block beneath the image+intro pair above, not a second hero
   moment. A reason with neither resolved title nor description is
   skipped entirely in index.tsx, so 1–5 filled-in reasons all lay out
   the same way. */

.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reasons-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-md) clamp(16px, 5vw, 80px) 0;
}

@media (max-width: 767px) {
  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reasons-container {
    padding-top: 32px;
  }
}

/* Flexbox, not grid: with 5 reasons, grid's auto-fit leaves an orphaned
   5th item alone on its own row (whatever doesn't fit the first row's
   column count wraps left-aligned). A flex row that wraps, combined with
   justify-content:center and a percentage flex-basis sized for exactly
   3-per-row, lays out 3+2 and centers the shorter second row — the
   layout flexbox was built for and grid auto-placement doesn't do. */
.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reasons {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reasons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
  }
}

.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reason {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reason {
    /* Exactly 3 per row at any width: each item is one third of the row
       minus its share of the two gaps between 3 items. */
    flex: 0 1 calc(33.333% - (var(--space-lg) * 2 / 3));
  }
}

/* >=1024px only: all 5 reasons in one row instead of 3+2. A real grid
   (not more flex-basis math) because grid's `gap` divides the row into
   exactly 5 equal tracks with equal gutters in one declaration — no
   percentage arithmetic to keep in sync with the item count. Tablet
   (768-1023px) deliberately keeps the flex 3+2 layout above: 5 equal
   columns at that narrower width would cramp every column's text, and
   the existing flex approach is already proven not to overflow there. */
@media (min-width: 1024px) {
  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reasons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
    justify-content: normal;
  }

  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reason {
    /* min-width:0 — same reason as .concern-why-routine__media/__content
       elsewhere in this file: a grid column's implicit minimum is
       content-based unless reset, so a long unbroken word could still
       inflate a column and force horizontal overflow without this. */
    min-width: 0;
  }
}

.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reason-number {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reason-title {
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-primary);
}

.cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reason-description {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Mobile-only premium hierarchy pass. Font-family/weight are untouched —
   --font-label/--font-body already resolve to DM Sans (eyebrow: existing
   500/Medium; description: default 400/Regular) and --font-display to
   Cormorant Garamond (heading: existing 400/Regular) — only size,
   line-height and letter-spacing are overridden here, plus the spacing
   between the three text blocks and down to the image.
   .content's flex `gap` (var(--space-xs) at this width) is zeroed and
   replaced with explicit margin-top on the heading (12px) and the
   description (16px, replacing the 8px top margin from its own base
   rule) so the two gaps can differ — a single flex `gap` can't. The
   container's grid `gap` (var(--space-lg) at this width, i.e. the only
   gap between the two stacked grid items) is lowered to var(--space-md)
   so the gap from the description down to this section's own image
   (second on mobile, per the `order` swap above) is 24px. None of this
   touches the >=768px container/content gap rules above, which stay on
   var(--space-xl)/var(--space-sm) respectively. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__container {
    gap: var(--space-md);
  }

  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__content {
    gap: 0;
  }

  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__eyebrow {
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0.06em;
  }

  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__heading {
    margin-top: 12px;
    font-size: 24px;
    line-height: 1.2;
  }

  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__description {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.6;
  }

  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reason-title {
    font-size: 15px;
  }

  .cc_zRr7AL87AP_ca0J0Fno2p .concern-why-routine__reason-description {
    font-size: 14px;
    line-height: 1.55;
  }
}