/* ==========================================================================
   What2Buy brand: "Happy Bag" (Concept 2). Ready-to-paste brand layer.
   Load AFTER the existing style.css for an instant swap:
     <link rel="stylesheet" href="/assets/css/style.css">
     <link rel="stylesheet" href="/assets/css/brand.css">
   or paste sections 1–3 over the :root block at the top of style.css and
   merge section 4. Fonts: /assets/fonts/*.woff2 (self-hosted; the site CSP is
   font-src 'self', so Google-hosted fonts would be blocked anyway).
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted, Latin subset, variable weight) ---------- */
@font-face {
  font-family: "Baloo 2";
  src: url("/assets/fonts/baloo2-latin-wght.woff2") format("woff2");
  font-weight: 600 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dmsans-latin-wght.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dmsans-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched local fallbacks (measured against Arial/Liberation Sans) so the
   swap from fallback to web font causes almost no layout shift. */
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 104.05%; ascent-override: 95.34%; descent-override: 29.79%; line-gap-override: 0%;
}
@font-face {
  font-family: "Baloo 2 Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold");
  font-weight: 600 800;
  size-adjust: 94.87%; ascent-override: 113.63%; descent-override: 55.23%; line-gap-override: 0%;
}

/* ---------- 2. Brand tokens ---------- */
:root {
  /* core palette */
  --w2b-coral: #FF6B5B;          /* Happy Coral: bag, the "2", rank badges (navy text on it). Not for text on light bg. */
  --w2b-teal: #14B8A6;           /* Lagoon Teal: handle, icons, illustrations, focus glow. Not for text on light bg. */
  --w2b-navy: #1C2541;           /* Deep Navy: headings, dark surfaces, footer */
  --w2b-cream: #FFF6EC;          /* Warm Cream: page background */
  --w2b-cta: #0B7A70;            /* Go Teal: "Check price on Amazon" (white text 5.21:1) */

  /* derived */
  --w2b-cta-hover: #08665E;      /* white text 6.83:1 */
  --w2b-cta-active: #06574F;
  --w2b-cta-ink: #FFFFFF;
  --w2b-coral-ink: #B93A2B;      /* coral for TEXT: 5.67:1 on white, 5.31:1 on cream */
  --w2b-coral-50: #FFEDEA;       /* badge bg (coral-ink text 5.01:1) */
  --w2b-coral-100: #FFDDD8;
  --w2b-teal-ink: #0A6F66;       /* links / teal TEXT: 6.04:1 on white, 5.65:1 on cream */
  --w2b-teal-50: #E6F7F5;        /* tint bg (teal-ink text 5.46:1) */
  --w2b-teal-100: #C6EFEA;
  --w2b-text: #2B3452;           /* body text: 12.24:1 on white, 11.45:1 on cream */
  --w2b-muted: #5A6178;          /* secondary text: 6.15:1 on white, 5.75:1 on cream */
  --w2b-surface: #FFFFFF;        /* cards, panels */
  --w2b-surface-2: #FFFBF6;      /* subtle alt rows / wells */
  --w2b-cream-200: #FBE9D3;      /* deeper cream for hero blobs / dividers */
  --w2b-border: #EFE3D3;         /* decorative card borders */
  --w2b-border-strong: #DCCBB5;  /* dividers, secondary-button outline */
  --w2b-input-border: #9C8A72;   /* form field outlines: 3.34:1 on white (WCAG 1.4.11) */
  --w2b-focus: #0B7A70;          /* focus ring: 4.87:1 on cream */
  --w2b-footer-text: #C9CFDF;    /* on navy 9.69:1 */
  --w2b-footer-muted: #A9B1C8;   /* on navy 7.06:1 */
  --w2b-footer-rule: #2C3657;
  --w2b-good: #047857; --w2b-bad: #B91C1C;                                  /* unchanged */
  --w2b-warn-bg: #FFF7E6; --w2b-warn-border: #F5C46B; --w2b-warn-ink: #6B4400; /* unchanged */

  /* type */
  --w2b-font-head: "Baloo 2", "Baloo 2 Fallback", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --w2b-font-body: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --w2b-fs-h1: clamp(2.125rem, 1.6rem + 2.4vw, 3.125rem);
  --w2b-fs-h2: clamp(1.625rem, 1.35rem + 1.3vw, 2.125rem);
  --w2b-fs-h3: 1.3125rem;
  --w2b-fs-h4: 1.125rem;

  /* shape */
  --w2b-radius-card: 20px;
  --w2b-radius: 14px;
  --w2b-radius-sm: 10px;
  --w2b-radius-pill: 999px;
  --w2b-shadow-sm: 0 1px 2px rgba(28,37,65,.06);
  --w2b-shadow: 0 1px 2px rgba(28,37,65,.05), 0 8px 24px rgba(28,37,65,.07);
  --w2b-shadow-lg: 0 2px 4px rgba(28,37,65,.06), 0 18px 44px rgba(28,37,65,.12);
  --w2b-shadow-cta: inset 0 -3px 0 rgba(0,0,0,.18);
}

/* ---------- 3. Legacy aliases: existing style.css variable names -> brand ---------- */
:root {
  --bg: var(--w2b-cream);
  --surface: var(--w2b-surface);
  --surface-2: var(--w2b-surface-2);
  --ink: var(--w2b-navy);
  --text: var(--w2b-text);
  --muted: var(--w2b-muted);
  --border: var(--w2b-border);
  --border-strong: var(--w2b-border-strong);
  --brand: var(--w2b-teal-ink);
  --brand-hover: var(--w2b-cta-hover);
  --brand-50: var(--w2b-teal-50);
  --brand-100: var(--w2b-teal-100);
  --cta: var(--w2b-cta);
  --cta-hover: var(--w2b-cta-hover);
  --cta-ink: var(--w2b-cta-ink);
  --good: var(--w2b-good);
  --bad: var(--w2b-bad);
  --radius: var(--w2b-radius-card);
  --radius-sm: 12px;
  --font: var(--w2b-font-body);
  --shadow-sm: var(--w2b-shadow-sm);
  --shadow: var(--w2b-shadow);
  --shadow-lg: var(--w2b-shadow-lg);
  --fs-2xl: var(--w2b-fs-h2);
  --fs-3xl: var(--w2b-fs-h1);
}

/* ---------- 4. Base + component styles ---------- */
body { font-family: var(--w2b-font-body); background: var(--w2b-cream); color: var(--w2b-text); }

h1, h2, h3, h4 { font-family: var(--w2b-font-head); color: var(--w2b-navy); letter-spacing: 0; }
h1 { font-size: var(--w2b-fs-h1); font-weight: 800; line-height: 1.12; }
h2 { font-size: var(--w2b-fs-h2); font-weight: 800; line-height: 1.18; }
h3 { font-size: var(--w2b-fs-h3); font-weight: 700; line-height: 1.25; }
h4 { font-size: var(--w2b-fs-h4); font-weight: 700; line-height: 1.3; }
.section-head h2 { font-size: var(--w2b-fs-h2); }

a { color: var(--w2b-teal-ink); }
a:hover { color: var(--w2b-cta-hover); }
:focus-visible { outline: 3px solid var(--w2b-focus); outline-offset: 2px; }
::selection { background: var(--w2b-coral-100); color: var(--w2b-navy); }

/* Logo (image-based; see BRAND.md for the markup) */
.logo { gap: 0; }
.logo img { display: block; height: 34px; width: auto; }
@media (max-width: 599px) { .logo img { height: 30px; } }
.footer-brand img { display: block; height: 32px; width: auto; }

/* Header / nav */
.site-header { background: rgba(255,246,236,.92); }           /* cream glass */
.cat-nav { background: var(--w2b-surface); }
.cat-nav a[aria-current="page"] { color: var(--w2b-teal-ink); border-bottom-color: var(--w2b-coral); }

/* Buttons */
.btn { font-family: var(--w2b-font-body); font-weight: 700; border-radius: var(--w2b-radius-pill); padding: .8rem 1.35rem; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; }
.btn-sm { padding: .55rem .95rem; }
/* Primary affiliate CTA: "Check price on Amazon" */
.btn-amazon { background: var(--w2b-cta); color: var(--w2b-cta-ink); box-shadow: var(--w2b-shadow-cta); }
.btn-amazon:hover { background: var(--w2b-cta-hover); color: var(--w2b-cta-ink); transform: translateY(-1px); }
.btn-amazon:active { background: var(--w2b-cta-active); transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.18); }
/* Site action (non-Amazon): navy */
.btn-primary { background: var(--w2b-navy); color: #fff; }
.btn-primary:hover { background: #2A365C; color: #fff; }
/* Secondary */
.btn-ghost { background: var(--w2b-surface); color: var(--w2b-navy); border: 2px solid var(--w2b-border-strong); }
.btn-ghost:hover { border-color: var(--w2b-teal); color: var(--w2b-teal-ink); }
.search-lg button { background: var(--w2b-navy); }
.search-lg button:hover { background: #2A365C; }
.search input::placeholder { color: var(--w2b-muted); }
.search-field:focus-within, .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--w2b-cta); box-shadow: 0 0 0 4px var(--w2b-teal-100); }

/* Cards */
.card, .tile, .latest-item, .product, .gift-card { border-radius: var(--w2b-radius-card); }

/* Rank numbers & badges: coral with navy text (5.40:1) */
.product-rank, .card-top .rank-dot, .gift-num, .jumpnav a b { background: var(--w2b-coral); color: var(--w2b-navy); }
.product-rank { box-shadow: 0 4px 12px rgba(255,107,91,.35); border-radius: 14px; }
.badge-coral { display: inline-flex; align-items: center; gap: .3rem; background: var(--w2b-coral-50); color: var(--w2b-coral-ink); font-weight: 700; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--w2b-radius-pill); padding: .2rem .65rem; }
.badge-teal { display: inline-flex; align-items: center; gap: .3rem; background: var(--w2b-teal-50); color: var(--w2b-teal-ink); font-weight: 700; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--w2b-radius-pill); padding: .2rem .65rem; }
.ribbon-brand { background: var(--w2b-teal-50); color: var(--w2b-teal-ink); box-shadow: inset 0 0 0 1px var(--w2b-teal-100); }
.compare tbody tr:hover td { background: var(--w2b-surface-2); }

/* Hero */
.hero { background: radial-gradient(800px 360px at 85% -20%, var(--w2b-coral-100), transparent 70%), radial-gradient(700px 300px at 0% 120%, var(--w2b-teal-100), transparent 70%), var(--w2b-cream); }
.hero h1 .accent { color: var(--w2b-coral-ink); }

/* Draft bar */
.draft-bar { background: var(--w2b-navy); color: var(--w2b-footer-text); }
.draft-bar strong { color: #FF8A7D; }

/* Footer */
.site-footer { background: var(--w2b-navy); color: var(--w2b-footer-text); }
.site-footer p, .footer-heading { color: var(--w2b-footer-muted) !important; }
.site-footer a { color: #E8EBF3; }
.site-footer ul a:hover { color: #fff; }
.footer-legal { border-top-color: var(--w2b-footer-rule); }