/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UNIT 365 — Typography Consistency  v1
   Scope: normalise computed typography between homepage
   and all 6 PDPs. Loaded last on every page — cascade wins.

   Tokens sourced from typography-premium.css (already loaded
   before this file on every page).

   Cascade note: all PDP pages load their inline <style> block
   BEFORE the external <link> tags. At equal specificity, later
   document order wins — so these rules beat every inline value
   without needing !important.

   Issues this file fixes:
   ① PDP .nav-right button (Size Guide, Cart) — no external
     CSS has ever targeted <button> here; they stay at the
     inline 0.73rem / 0.13em while nav <a> links are 0.63rem.
   ② PDP .drawer-menu — a completely different class from the
     homepage .drawer. typography-premium.css covers .drawer a
     but has no .drawer-menu selector. Net inline: 0.78rem /
     0.12em base, 0.82rem / 0.1em at ≤860px.
   ③ Announce bar — computed values already match on both pages
     via typography-premium.css, but the PDP inline style has
     divergent mobile values (0.58rem / 0.1em at ≤700px) that
     would win if the external anchor is ever removed. Explicit
     rule prevents drift.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* ═══════════════════════════════════════════════════════════
   1. ANNOUNCE BAR
   Explicit anchor — confirms intent, prevents inline drift.
   Net computed on both pages: 0.59rem / 0.26em / Barlow / 700.
   ═══════════════════════════════════════════════════════════ */

.announce {
  font-family: var(--tf-sans);
  font-size:       var(--ts-kicker);  /* 0.59rem */
  font-weight:     var(--tw-bold);    /* 700 */
  letter-spacing:  var(--tk-wide);    /* 0.26em  */
  text-transform:  uppercase;
  line-height:     var(--tl-tight);   /* 1.04 */
}


/* ═══════════════════════════════════════════════════════════
   2. DESKTOP NAV — PDP .nav-right BUTTONS
   The PDP inline style defines .nav-left a, .nav-right a,
   .nav-right button in one rule. premium-redesign.css and
   typography-premium.css only target <a> elements, so Size
   Guide and Cart buttons survive at 0.73rem / 0.13em.
   This rule brings them in line with the nav <a> links.
   ═══════════════════════════════════════════════════════════ */

.nav-right button {
  font-family:     var(--tf-sans);
  font-size:       var(--ts-nav);     /* 0.63rem — matches nav <a> */
  font-weight:     var(--tw-bold);    /* 700 */
  letter-spacing:  var(--tk-nav);     /* 0.16em */
  text-transform:  uppercase;
  line-height:     1;
}


/* ═══════════════════════════════════════════════════════════
   3. PDP MOBILE DRAWER — .drawer-menu
   PDPs use <aside class="drawer-menu"> while the homepage
   uses <aside class="drawer">. These are completely separate
   CSS classes; no external file has ever targeted .drawer-menu
   typography. The inline default (0.78rem / 0.12em) and mobile
   override (0.82rem / 0.1em at ≤860px) both lose to this rule.
   Target: 0.84rem / 0.16em — matches homepage .drawer a.
   ═══════════════════════════════════════════════════════════ */

.drawer-menu a,
.drawer-menu button {
  font-family:     var(--tf-sans);
  font-size:       var(--ts-base);    /* 0.84rem — matches .drawer a */
  font-weight:     var(--tw-bold);    /* 700 */
  letter-spacing:  var(--tk-nav);     /* 0.16em */
  text-transform:  uppercase;
  line-height:     var(--tl-ui);      /* 1.36 */
}


/* ═══════════════════════════════════════════════════════════
   4. REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .drawer-menu a,
  .drawer-menu button {
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   5. PRODUCT CARD PRICE — homepage grid
   typography-premium.css sets 1rem !important — too dominant
   vs product name at 0.84rem. Equalize: price supports name.
   typography-consistency.css loads last → wins !important race.
   ═══════════════════════════════════════════════════════════ */

.product-price {
  font-size: 0.87rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}


/* ═══════════════════════════════════════════════════════════
   6. HOMEPAGE HERO CTA
   Below the full-width hero image, before #collection.
   Editorial underline link — no pill, no fill.
   ═══════════════════════════════════════════════════════════ */

.hero-cta {
  text-align: center;
  padding: 20px 0 0;
}

.hero-cta__link {
  display: inline-block;
  font-family: var(--tf-sans);
  font-size: var(--ts-kicker);     /* 0.59rem */
  font-weight: var(--tw-bold);     /* 700 */
  letter-spacing: var(--tk-wide);  /* 0.26em */
  text-transform: uppercase;
  color: var(--pr-ink, #111);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity 0.15s ease;
  line-height: 1;
}

.hero-cta__link:hover,
.hero-cta__link:focus-visible {
  opacity: 0.5;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta__link { transition: none; }
}


/* ═══════════════════════════════════════════════════════════
   7. GLOBAL ANNOUNCE BAR LOCK
   Home + all PDPs currently define .announce in multiple files
   and inline blocks. This lock keeps one premium, identical
   typographic output across every page and breakpoint.
   ═══════════════════════════════════════════════════════════ */

.announce,
#announceBar {
  font-family: var(--tf-sans, Barlow, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-size: clamp(0.6rem, 0.56rem + 0.16vw, 0.66rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  font-feature-settings: "kern" 1, "liga" 1 !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

@media (max-width: 700px) {
  .announce,
  #announceBar {
    font-size: 0.57rem !important;
    letter-spacing: 0.18em !important;
    line-height: 1.1 !important;
  }
}