/* ============================================================
   cc_seasonal — homepage seasonal showcase.
   Consumes cc_ui tokens.css (loaded site-wide). The product cards themselves are
   NOT styled here: they're the theme's miniature and get their look from
   cc_ui/catalog.css, so this block can never drift from the rest of the shop.
   ============================================================ */

/* ground, not surface: the product tile is white in direction B, so the section
   behind it must be the darker tone or the tiles vanish. */
.cc-seasonal {
  padding: 56px 0;
  background: var(--cc-ground);
}
/* --cc-maxw-wide, the SAME token the bestsellers grid and cc_buttonsgrid use, so the
   three grids are one width. This block used to sit at --cc-maxw (1080px) — a reading
   width, right for CMS prose, far too narrow for four product cards — which is why its
   cards came out visibly more compact than the ones above it. */
.cc-seasonal__inner {
  max-width: var(--cc-maxw-wide, 1560px);
  margin: 0 auto;
  padding: 0 22px;
}

/* Section header: the title, then the spectrum rule under it. The theme's own
   section heading ("MEJORES VENDIDOS") centres the title between two long grey
   lines; this replaces that with the brand's signature. */
.cc-seasonal__head {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-bottom: 30px; text-align: center;
}
.cc-seasonal__title {
  margin: 0;
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--cc-ink);
  text-wrap: balance;
}
.cc-seasonal__rule.cc-spectrum {
  width: 96px; height: 4px; border-radius: 3px;
}

/* The grid mirrors the theme's 4-up listing at desktop and collapses the same
   way, so a seasonal card and a category card are always the same size. */
.cc-seasonal__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1199px) { .cc-seasonal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .cc-seasonal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .cc-seasonal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* the miniature ships bootstrap column classes; inside our grid they'd fight it */
.cc-seasonal__grid .product-miniature {
  width: auto; max-width: none; flex: none; padding: 0; margin: 0;
}

.cc-seasonal__foot { display: flex; justify-content: center; margin-top: 34px; }
/* --cc-surface-deep, not --cc-navy: --cc-navy is a PALETTE value, so this button
   rendered navy on the red storefront. The semantic token follows the shop. */
.cc-seasonal__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  background: var(--cc-surface-deep); color: #fff;
  font-weight: 700; font-size: .92rem; text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.cc-seasonal__cta:hover { background: var(--cc-brand); color: #fff; transform: translateY(-1px); }
.cc-seasonal__cta:focus-visible { outline: 2px solid var(--cc-brand-bright); outline-offset: 2px; }
.cc-seasonal__cta svg { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .cc-seasonal__cta { transition: none; }
  .cc-seasonal__cta:hover { transform: none; }
}

/* ---------------------------------------------------------------- band ----
   Opt-in per shop (CC_SEASONAL_BAND). This block renders directly under the
   bestsellers — the same 4-up grid, the same cards, the same style of heading —
   so on a page with nothing between them the two read as one long wall rather
   than two sections. El Informal separates them with cc_fullbanner; a shop with
   no banner artwork gets the same job done with colour alone.

   The section is already full-bleed (only __inner is width-limited), so the band
   itself is just a background swap.

   THE TEXT, THOUGH. The cards are deliberately chrome-less (catalog.css,
   "DIRECTION B": no panel, no border — the photo sits on its own white tile and
   the text is quiet underneath, directly on the page). On a dark ground that
   text has nothing to sit on: #565d6b on #181312 is a 2.7:1 contrast ratio,
   which fails WCAG AA and is genuinely hard to read.

   The fix is NOT to give these cards a panel — that would make them the one
   different card in the shop, which catalog.css exists to prevent. Instead we
   redefine the TOKENS for this subtree. The cards already paint themselves from
   var(--cc-*), so they invert without this file knowing a single theme class
   name, and they stay correct if the card markup changes underneath us.

   It is not only the ink. Every token the card paints with has to be told it is
   on a dark ground, or it keeps a value chosen for a light one:
     --cc-ink*       the title, price, strike-through
     --cc-surface-2  the "Sin stock" pill's fill — a LIGHT grey (#eef1f5), which
                     left a white label on a near-white pill: invisible
     --cc-hairline   the quantity stepper's ring — rgba(20,33,61,.11), i.e. dark
                     translucent, which simply vanishes on dark
   --cc-pink (the discount flash) is deliberately left alone: it is an accent and
   reads fine here. */
.cc-seasonal--band {
  background: var(--cc-surface-deep, #0f2440);
  --cc-ink: #ffffff;
  --cc-ink-soft: rgba(255, 255, 255, .86);
  --cc-ink-faint: rgba(255, 255, 255, .62);
  --cc-surface-2: rgba(255, 255, 255, .13);
  --cc-hairline: rgba(255, 255, 255, .28);
}
.cc-seasonal--band .cc-seasonal__title {
  color: #fff;
}
/* The card title is <div.tvproduct-name><a><h6>. catalog.css colours the div and
   the a with --cc-ink-soft, but the THEME colours h6 directly (#333) — and a
   direct rule always beats an inherited value, so the token never reaches the
   text. On the light page that goes unnoticed (#333 reads fine); on the band it
   is #333 on #181312 — a 1.46:1 contrast ratio, effectively invisible.
   `inherit` hands the h6 back to the <a>, and so to the token. Scoped to the
   band on purpose: unscoping it would also change the title colour of every card
   on both storefronts, which is a separate call to make. */
.cc-seasonal--band .cc-seasonal__grid .tvproduct-name h6 {
  color: inherit;
}
/* The add button is a brand-red outline on transparent: 3.4:1 against the band,
   which fails AA for its label. On dark it becomes a solid fill instead — the
   same button, still brand, but legible. */
.cc-seasonal--band .cc-seasonal__grid .product-miniature button.add-to-cart:not(.cc-oos):not(:disabled) {
  background: var(--cc-brand);
  border-color: var(--cc-brand);
  color: #fff;
}
/* On the band the deep-coloured button would vanish into its own background. */
.cc-seasonal--band .cc-seasonal__cta {
  background: var(--cc-brand);
}
.cc-seasonal--band .cc-seasonal__cta:hover {
  background: #fff;
  color: var(--cc-brand);
}

@media (max-width: 767px) {
  .cc-seasonal { padding: 40px 0; }
  .cc-seasonal__title { font-size: 1.3rem; }
}