/* =============================================================================
   SECOND WIND - LAYOUT (header, footer, hero, ribbon)
   ============================================================================= */

/* ---------- HEADER ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line-2); }
.header-inner { display: flex; align-items: center; gap: var(--s4); height: 64px; }
.brand-logo { display: flex; align-items: center; flex: 0 0 auto; }
.brand-logo img { height: 30px; width: auto; background: transparent; }
.brand-logo .brand-word { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }

.primary-nav { display: flex; align-items: center; gap: 0.15rem; margin-inline: auto; }
.primary-nav a { position: relative; padding: 0.55rem 0.7rem; font-size: 0.925rem; font-weight: 600; color: var(--ink-2); border-radius: var(--r-sm); transition: color var(--dur-1) var(--ease); }
.primary-nav a::after { content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.35rem; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease); }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--ink); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 0.25rem; flex: 0 0 auto; }
.icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--ink); transition: background var(--dur-1) var(--ease); }
.icon-btn:hover { background: var(--paper-2); }
.icon-btn svg { width: 21px; height: 21px; }
.cart-count { position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--brand); color: #fff; font-size: 0.68rem; font-weight: 700; border-radius: var(--r-pill); display: grid; place-items: center; line-height: 1; }
.cart-count[data-count="0"] { display: none; }
.nav-toggle { display: none; }

/* ---------- WIND RIBBON (running message marquee) ---------- */
.ribbon { background: var(--ink); color: var(--paper); overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ribbon__track { display: inline-flex; gap: 2.5rem; padding: 0.55rem 0; white-space: nowrap; will-change: transform; animation: marquee 34s linear infinite; }
.ribbon__track span { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; display: inline-flex; align-items: center; gap: 2.5rem; }
.ribbon__track span::after { content: "\2726"; color: var(--teal); }

/* ---------- HERO ----------
   The hero used to sit on flat white with two blurred colour blobs behind it.
   The blur is gone at the client's request, and the weight it was faking now
   comes from structure instead of glow:
     1. a tinted band that starts deeper under the ribbon and settles into the page
     2. .hero__plate - a hard-edged panel carrying the logo gradient, bleeding
        off the right edge behind the product image
     3. a crisp brand rule closing the band
   No filters, no glow, no floating shapes. */
.hero { position: relative; padding-block: clamp(2rem, 4vw, 3.75rem) clamp(2.75rem, 5vw, 4.5rem); overflow: clip; background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 92%); }
.hero > .container { position: relative; z-index: 1; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand-grad); }

/* Hard-edged brand panel. Replaces the old blurred blobs. */
.hero__plate { position: absolute; z-index: 0; top: 0; bottom: 3px; right: 0; width: min(32vw, 400px); background: var(--brand-grad); pointer-events: none; }

.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.hero__frag { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: 0.9; letter-spacing: -0.035em; text-transform: uppercase; }
.hero__frag .line { display: block; overflow: hidden; }
.hero__frag .line span { display: inline-block; }
/* Second line carries the wordmark's own navy-to-teal run. Solid brand colour
   is the declared fallback for engines without background-clip: text. */
.hero__frag .line:nth-child(2) { color: var(--brand); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero__frag .line:nth-child(2) span { background: var(--brand-grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.hero__sub { margin-top: var(--s5); max-width: 42ch; font-size: var(--fs-lead); color: var(--ink-2); }
.hero__cta { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__paths { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.hero__paths .lbl { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-right: 0.25rem; }
/* Chips sit on the tinted band, so they need a solid surface to stay legible. */
.hero__paths .chip--line { background: var(--surface); border-color: var(--line-2); color: var(--ink-2); }
.hero__paths .chip--line:hover { border-color: var(--brand); color: var(--brand-deep); }

.hero__media { position: relative; z-index: 1; aspect-ratio: 4 / 5; max-height: min(680px, 72vh); border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); box-shadow: var(--shadow-pop); }
.hero__media > a { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(9, 17, 36, 0.34)); }
.hero__tag { pointer-events: none; position: absolute; left: 1rem; bottom: 1rem; z-index: 2; color: #fff; font-weight: 600; font-size: var(--fs-sm); display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 6px rgba(0,0,0,0.55); padding: 0.35rem 0.7rem; border-radius: var(--r-sm); background: rgba(9, 17, 36, 0.42); }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--ink); color: #dbe6f2; padding-block: var(--s7) var(--s5); border-top: 3px solid transparent; border-image: var(--brand-grad) 1; }
.site-footer a { color: #dbe6f2; }
.site-footer a:hover { color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--gutter); padding-bottom: var(--s7); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand .brand-word { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: #fff; letter-spacing: -0.02em; }
.footer-brand p { color: #a8b8d0; margin-top: var(--s3); max-width: 34ch; font-size: var(--fs-sm); }
.footer-col h3, .footer-col h4 { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: #8ea4c2; margin-bottom: var(--s3); font-weight: 700; }
.footer-col li { margin-bottom: 0.6rem; font-size: var(--fs-sm); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding-top: var(--s5); flex-wrap: wrap; font-size: var(--fs-xs); color: #8ea4c2; }
.footer-credit { flex-basis: 100%; letter-spacing: 0.02em; }
.footer-credit a { font-weight: 600; letter-spacing: 0.08em; }
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-pill); transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.footer-social a:hover { background: rgba(255,255,255,0.08); border-color: var(--teal); }
.footer-social svg { width: 18px; height: 18px; }

/* ---------- Page hero (interior) ---------- */
.page-hero { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: var(--s4); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs .sep { opacity: 0.5; }