/* ═══════════════════════════════════════════════════════════════
   Homepage Product Discovery — premium/editorial product intro,
   immediately after the homepage Hero. Reuses StarterProductCard
   as-is (no changes to it): image → line → type → benefit → price.
   A sibling "İncele" link (plain PDP navigation, low-commitment —
   see index.tsx) sits below each card. No badges, no marketplace
   styling, no discount/compare-at price on this homepage layer (see
   the price-original override below) — that base visual language
   lives entirely in StarterProductCard/styles.css and is untouched
   here. This file only owns section chrome, the 3-card layout, and
   these two homepage-only overrides.
   ═══════════════════════════════════════════════════════════════ */

/* padding-top is pinned to a single constant (--space-sm, 16px) at every
   breakpoint, split out of the former single `padding` shorthand value
   (64px base, 96px desktop) that also controlled padding-bottom —
   this section sits directly below BrandCredentials, whose own
   padding-bottom (40px mobile/tablet, 48px desktop) already supplies real
   breathing room above this section's heading. Before this change the two
   stacked to 104px (mobile/tablet) / 144px (desktop) versus BrandCredentials'
   own symmetric 40px/48px above its credential content — 2.6x/3x the gap
   below vs. above, the actual source of the imbalance reported against the
   real "Ürünleri Keşfet" section (this component, not MediaLinkGrid or
   MultiTabProductSlider, which were tried and reverted first). Constant
   16px top brings the combined gap to 56px/64px, ~1.33-1.4x the gap above,
   consistent across breakpoints. padding-bottom (the space before whatever
   comes after THIS section) is untouched at every breakpoint.
   BrandCredentials' own padding was NOT touched — see its own styles.css. */
.cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery {
  width: 100%;
  padding-top: var(--space-sm, 16px);
  padding-bottom: var(--space-xl);
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery {
    padding-bottom: var(--space-2xl);
  }
}

.cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 80px);
}

@media (max-width: 767px) {
  .cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery-inner {
    padding: 0 20px;
  }
}

.cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery__header {
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery__header {
    margin-bottom: var(--space-xl);
  }
}

.cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery__title {
  font-family: var(--font-display);
  /* Site-wide typography pass: "alışveriş bölümü başlığı" masaüstü
     hedefi 26px — was the --text-section-heading clamp (28-38px).
     Deliberately scoped to this component only, not a global token
     change. */
  font-size: 26px;
  font-weight: var(--font-weight-section-display);
  line-height: 1.15;
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
}

@media (max-width: 767px) {
  /* "Alışveriş bölümü başlığı" mobil hedefi 20px. */
  .cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery__title {
    font-size: 20px;
  }
}

.cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* ─── Mobile (<=767px): controlled peek carousel ─────────────────
   Explicitly scoped (not relying on mobile-first cascade order) so
   there is no ambiguity about desktop ever inheriting these values.
   Unlike the earlier attempt, item width is a PERCENTAGE OF THE
   TRACK'S OWN BOX (88%) rather than a viewport-relative unit with a
   bled/re-padded track — the track sits fully inside the already-
   padded .homepage-product-discovery-inner (20px each side, see
   above), so its own overflow-x:auto boundary can never extend past
   the viewport: the page itself cannot gain horizontal overflow no
   matter how wide the scrollable content inside the track gets. Card
   1 starts flush with the section's left padding (no bleed/negative
   margin needed this time); Card 2 peeks by construction (88% + gap
   leaves ~12% of the track's width still showing the next card). */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery__track::-webkit-scrollbar {
    display: none;
  }

  .cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery__item {
    flex: 0 0 88%;
    scroll-snap-align: start;
  }
}

/* The "İncele" CTA lives OUTSIDE StarterProductCard's own <a> (see
   index.tsx) — a real sibling <a>, never nested inside the link, so
   it needed its own small vertical gap here that the reused
   .starter-product-card__cta class doesn't provide on its own (that
   class was originally designed to sit inline with the price row inside
   the card; here it's its own row below the whole card). Everything
   else about its look (color/size/icon) comes unchanged from
   StarterProductCard/styles.css, already bundled into this section's
   CSS since StarterProductCard is still imported. */
.cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery__cta {
  margin-top: var(--space-xs);
}

/* Homepage-only price simplification: this discovery layer is
   consideration, not checkout, so no crossed-out compare-at/discount
   presentation — only the current selling price. Scoped to this
   component's own compiled CSS (the build auto-prefixes every selector
   here with this component's own scope class), so StarterProducts and
   every other StarterProductCard placement keep showing the original
   price + strikethrough exactly as before — this hides the rendered
   element here only, it doesn't touch StarterProductCard, product
   pricing/discount data, or checkout in any way. */
.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__price-original {
  display: none;
}

/* ─── Desktop/tablet (>=768px): 3 equal columns, no slider ───────── */
@media (min-width: 768px) {
  .cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    overflow-x: visible;
    scroll-snap-type: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .cc_zRr7AL87AP_P6Dd5JOr3r .homepage-product-discovery__item {
    flex: none;
    scroll-snap-align: none;
  }
}