/* site.css — one consistency layer loaded LAST on every page (26 Oct 2026, visual audit "Site-wide" A-001…A-021).
   site_footer.py links it from each page's head. Tokens first, then the shared fixes. Values that live in the older
   stylesheets were consolidated to these same hex values in place, so the tokens and the old rules agree. */

:root{
  /* colour (A-001/A-002); --surface stays #F5F5F5 because product images are shot on that grey */
  --black:#000000;--ink:#0F0F0F;--ink-2:#2B2B29;--text-2:#545454;--text-3:#6B6B66;--text-off:#AAA9A4;
  --line:#E3E3DE;--line-strong:#D5D5D0;--surface:#F5F5F5;--surface-2:#ECECE8;--white:#FFFFFF;
  --d-surface:#0F0F0F;--d-surface-2:#1C1C1C;--d-line:#262626;--d-text:#F5F5F5;--d-text-2:#AFAFAF;--d-text-3:#8E8E87;
  --orange:#FF5E00;--orange-text:#A3410A;--good:#05945B;--good-text:#0B7A3B;--bad:#DC2804;--acc-blue:#235AF3;--acc-blue-d:#96B4FF;--acc-green:#087A4B;
  /* type scale (A-004): desktop → phone */
  --fs-display:clamp(48px,5vw,72px);--fs-h1:clamp(40px,3.9vw,56px);--fs-h2:clamp(30px,3.1vw,44px);--fs-h3:clamp(20px,1.7vw,24px);
  --fs-h4:clamp(16px,1.2vw,17px);--fs-body-l:clamp(16px,1.25vw,18px);--fs-body:15px;--fs-small:13px;--fs-caption:12px;--fs-eyebrow:11px;
  /* layout: one container edge for header, content and footer (A-018/A-019) */
  --native-gutter:clamp(20px,5vw,80px);--native-max:1440px;
  /* corners (A-013, Ankur: sharp cards, square buttons) */
  --r-0:0;--r-pill:999px}

/* ---- containers: header, mega menu and footer share the content edge on every page, About and the category pages too */
.global-header__inner,.global-mega__inner,.site-footer__inner{width:calc(100% - 2 * var(--native-gutter));max-width:var(--native-max);margin-inline:auto}
.page-about-v2{--ab-gut:var(--native-gutter)}
.page-about-v2 .ab-wrap,.page-about-v2 .crumb.site-crumb{max-width:calc(var(--native-max) + 2 * var(--ab-gut))}
.page-category{--cat-gut:var(--native-gutter)}
.page-category .cat-wrap,.page-category .crumb.site-crumb{max-width:calc(var(--native-max) + 2 * var(--cat-gut))}

/* ---- header, mega menu, mobile menu and offer strip (28 Oct 2026, Ankur: "menu on About gets zoomed in"): these sizes lived only
   in refinement.css, which About and the two category pages don't load, so their menu fell back to the larger base sizes.
   Same values here, so the header is identical on every page */
:root{--gh-nav:72px}
.global-header{background:#fff;letter-spacing:-.02em}
.global-header__inner{gap:32px}
.global-header__logo{width:144px;height:auto}
.global-header__nav{font-size:13px;gap:24px}
.global-header__link{font-size:13px;padding:12px 0;border-radius:0}
.global-header__link:hover{background:transparent;color:#6B6B66}
.global-header__link::after{left:0;right:0;bottom:7px}
.global-header__burger{width:44px;height:44px;padding:10px;flex-shrink:0}
.global-promo{min-height:40px;padding:9px var(--native-gutter);font-size:11px;line-height:1.5;letter-spacing:0;background:var(--surface);color:#545454;gap:8px;
  animation:native-promo-settle 1.4s ease-out forwards}
.global-promo a{color:inherit;text-underline-offset:4px}
@keyframes native-promo-settle{0%,71.4%{background:var(--gh-orange,#FF5E00);color:#fff}100%{background:var(--surface);color:#545454}}
@media(prefers-reduced-motion:reduce){.global-promo{animation:none}}
.global-mega{box-shadow:0 18px 24px #00000008;transform:translateY(-4px)}
.global-mega__products{padding-block:32px;gap:20px}
.global-mega__name{font-size:14px}
.global-mega__utility{padding-block:36px;gap:18px}
.global-mega__utility a,.global-mega__utility a:first-child{font-size:13px}
.global-mobile__inner{width:calc(100% - 40px)}
.global-mobile__link,.global-mobile__heading{font-size:15px;padding-block:18px}
.global-mobile__product span{font-size:13px}
@media(max-width:1100px){.global-header__nav{gap:20px}.global-header__logo{width:128px}}
@media(max-width:680px){:root{--gh-nav:64px}.global-header__logo{width:122px}.global-promo{font-size:10px;line-height:1.65;min-height:48px;gap:0 6px;padding:8px 20px}}

/* ---- carousel arrows (A-015): one 44px square button with a line chevron */
.rail-arrow,.stories__arrow,.arrows button{width:44px!important;height:44px!important;border-radius:0!important;box-shadow:none!important;
  display:inline-grid!important;place-items:center;padding:0!important}
.rail-arrow svg,.stories__arrow svg,.arrows button svg{width:20px;height:20px;stroke-width:1.5}

/* ---- links (A-016): in-text links are ink and underlined; no stray purple */
.page-sku{--sku-link:var(--ink)}
.sku-link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rv__ainote svg{color:var(--ink)}

/* ---- eyebrows (A-006): one style — 11px, uppercase, +0.09em; neutral grey or the accent the class already carries */
.hero__eyebrow,.stories__eyebrow,.post__cat,.sku-eyebrow,.ab-tag{font-size:var(--fs-eyebrow)!important;line-height:1.4!important;letter-spacing:.09em!important;text-transform:uppercase!important;font-weight:500}
.stories__eyebrow,.post__cat{color:var(--text-3)}
.page-index .hero__card .badge{font-size:var(--fs-eyebrow)!important}

/* ---- type scale (A-004): headings on the shared steps */
.sku-hero__h{font-size:clamp(34px,3.9vw,56px)!important;line-height:1.06!important;letter-spacing:-.045em!important}
.sku-lead,.fullbleed h2,.sku-dim{font-size:var(--fs-h2)!important;line-height:1.12!important;letter-spacing:-.04em!important}
.page-index .hero h1,.page-index .hero .hero__h{font-size:var(--fs-h1)!important;line-height:1.04!important}
.page-index .intel h2{font-size:var(--fs-h2)!important;line-height:1.12!important}
.page-blog h1{font-size:var(--fs-display)!important;line-height:1.04!important}

/* ---- line breaks (A-012) */
.sku-hero__h,.sku-lead,.sku-dim,.fullbleed h2,.cat-head h1,.cat-cell h2{text-wrap:balance}
p{text-wrap:pretty}

/* ---- phone: nothing people read below 12px, eyebrows and badges not below 11px (A-005) */
@media(max-width:760px){
  .page-index .hero__card .badge,.card__tag,.post__cat,.card__badge{font-size:11px!important}
  .crumb,.site-crumb,.card-category,.page-compare .product__tagline,.page-compare .product__full,.page-compare .spec-cell__note,.page-compare .included,
  .matrix small,.mx-cell small,.specs-updated{font-size:12px!important}}

/* ---- tap targets (A-020): at least 24px tall on touch screens */
.site-footer__cell li a,.site-footer__legal a{display:inline-block;padding-block:2px}
.crumb a,.site-crumb a{display:inline-block;padding-block:4px}
.card__rating{min-height:28px}
.compare-link,.rail-head a:not(.btn){display:inline-block;padding-block:3px}   /* not the buttons: it was squashing "Check your area’s water" (27 Oct 2026) */

/* ---- section heads inside the add-ons / specifications grid use the H2 step too (A-057) */
.page-sku .sku-endgrid h2{font-size:var(--fs-h2)!important;line-height:1.12!important;letter-spacing:-.04em!important;font-weight:500}
/* "stack" cards (copy above the photo): copy colours come from the dark card, not from the photo tone */
.page-sku .sku-grid--stack>.sku-card .sku-card__txt h4{color:#fff!important}
.page-sku .sku-grid--stack>.sku-card .sku-card__txt p{color:var(--d-text-2)!important}

/* ---- product galleries (26 Oct 2026, Ankur): the same square arrows as the section carousels, on the left and right edges, centred */
.gallery .gallery__stage{position:relative}
.gallery .gnav{position:absolute!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;z-index:3;
  width:44px!important;height:44px!important;display:inline-grid!important;place-items:center;padding:0;border:1px solid var(--line)!important;border-radius:0!important;
  background:#fff!important;color:var(--ink)!important;opacity:1!important;box-shadow:none!important;cursor:pointer;transition:background .2s,border-color .2s}
.gallery .gnav:hover{background:var(--surface)!important;border-color:var(--line-strong)!important}
.gallery .gnav--prev{left:16px!important;right:auto!important}
.gallery .gnav--next{right:16px!important;left:auto!important}
.gallery .gnav svg{width:20px;height:20px;stroke-width:1.5}
.gallery .gnav[disabled]{opacity:.4!important;cursor:default}

/* badges are sharp too (26 Oct 2026, Ankur): the NATIVE / OTHER LOCKS badges on product-page cards */
.page-sku .sku-chip{border-radius:0!important}

/* product-name badge in the hero eyebrow, "Native [M1]" (27 Oct 2026, Ankur: fix on all pages): the 11px eyebrow rule had shrunk the
   box to 8px text inside a 1.5px border, sitting off the baseline. Now: one row, centred, hairline box, same cap height as "NATIVE" */
.page-sku .sku-eyebrow--hero{display:inline-flex!important;align-items:center;gap:.55em;font-size:clamp(13px,1.05vw,15px)!important;line-height:1!important}
.page-sku .sku-eyebrow--hero .sku-tagname{display:inline-block;margin:0;padding:.32em .55em .28em;border:1px solid currentColor;border-radius:0;
  font-size:.9em;line-height:1;letter-spacing:.06em;vertical-align:baseline}

/* home hero films (27 Oct 2026, M3 Pro and Lock Ultra): the product reveals in the middle of the frame, under the headline. On wider
   screens the film is cropped from its left edge, so the product sits right of the copy; phones keep the centre crop */
@media(min-width:761px){.page-index .hero__video>video.hero__media{object-position:0% 50%}}

/* "New" pill (27 Oct 2026, Ankur: orange and red moving gradient, from his reference): replaces the holographic foil in
   global-header.css. Same flowing strip (6x the pill, the colour run twice, slides left by one run), now amber-orange through
   to deep red. White semibold text; the lightest stop is kept at #FF8A2A so "New" stays readable. Holds still for reduced motion. */
.nv-new.nv-new,.page-index .card--v3 .card__badge.nv-new,.global-mega__tag.nv-new,.global-mobile__product span.nv-new{
  color:#fff!important;font-weight:600;background:#E5300B!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.nv-new.nv-new::after{
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(90deg,#FF8A2A 0%,#FF5C12 12.5%,#E5300B 25%,#C0150A 37.5%,#FF8A2A 50%,#FF5C12 62.5%,#E5300B 75%,#C0150A 87.5%,#FF8A2A 100%);
  animation-duration:8s}

/* mega-menu "New" tag (27 Oct 2026, Ankur): beside the product picture, top right of it, instead of under the name. The
   picture is 125px wide and centred, so the tag starts 8px past its right edge */
.global-mega__product{position:relative}
.global-mega__product .global-mega__tag.nv-new{position:absolute;top:.75rem;left:calc(50% + 62.5px + 8px);margin:0}
/* the product type always sits on its own line under the name; pages that don't load the home stylesheet ran them together */
.global-mega__name .card-category{display:block;margin-top:4px;font-size:12px;letter-spacing:0;line-height:1.5;color:var(--text-3)}

/* footer help row (27 Oct 2026, Ankur removed "Helpline"): three cells, so three columns instead of four */
@media(min-width:561px){.site-footer__row--help{grid-template-columns:repeat(3,minmax(0,1fr))}}