/* 2026-10-02 Frausto's shared header + menu + page transitions - every page. Moved out of Home's inline styles (unchanged) so all pages
   carry the same bar; then the shared tokens, the fuller menu and the cross-page transitions. */
:root{--header-bg:var(--ground);--row-h:140px;--ann-h:34px;--header-h:calc(var(--row-h) + var(--ann-h))} /* 10-03: --header-h = the logo row + the free-shipping bar on top, so every page offset still clears the whole header */ /* Quinten 2026-09-13: three times taller (was 72); 2026-09-14: 35 percent smaller again (216 -> 140), the brand scaled with it */
.ag-header{background:var(--ground);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0} /* no rule under the header: the faint tan line read as a white line on ink (Quinten 2026-09-13) */
.ag-header.is-transparent,.ag-header.is-scrolled{border-bottom:0}
/* Quinten 2026-09-13: the header hides on scroll-down and comes back on scroll-up (v2.7 native); the rule-15 defeat is lifted on his direction */
/* the header slides down once the curtain has left and the hero has settled (ag:intro-done); pages with no curtain show it at once */
.ag-header{transition:transform var(--t-7) var(--ease-satisfying),background-color var(--duration-medium,600ms) var(--ease-soft,ease)}
.ag-header.is-hidden{transition-duration:.45s;transition-timing-function:cubic-bezier(.4,0,.2,1)} /* 10-02 Quinten: smoother leave - ease-in-out 0.45s (was a sharp 0.3s ease-in) */ /* Quinten 2026-09-13: the bar leaves fast on scroll-down (0.3s, ease-in) so it never sits over the text; it still returns at 0.7s */ /* every token has a fallback: one undefined token makes the whole transition invalid and it snaps (found 2026-09-12) */
.ag-header:not(.is-in){transform:translateY(-100%)}
.ag-header.is-in:not(.is-hidden){transform:none}.ag-header.is-hidden{transform:translateY(-100%)} /* is-in used to beat v2.7's is-hidden (same specificity, later rule), so the bar never left and no transitionend could fire the flourish */
/* the scrollbar rail (ag-scrollbar v2.1, overlay, native bar hidden so nothing shifts) stays out of sight during the intro */
@media (prefers-reduced-motion:reduce){.ag-header{transition:none}}
/* Quinten 2026-09-13: the brand is the sombrero alone (the full logo clipped to its hat, the top 40.1% of the mark); the full logo
   comes down on hover, on keyboard focus, and while the visitor scrolls up (is-up); scrolling down retracts it to the hat */
/* Quinten 2026-09-13: the rest state is HIS hat cut (assets/Logo Just the Hat.png), laid exactly over the full logo's hat box (measured against the
   original: left 7.53%, top -0.43%, width 83.93% of the logo width; the hat is 34.42% of the logo width tall). The full logo underneath is clipped to the
   face + wordmark only, so nothing of its own hat can peek out; on hover / focus / scroll-up the face and wordmark slide down from under his hat */
/* the reveal keeps the whole logo INSIDE the bar: the inner wrapper scales from the hat's top so face + wordmark fit the row (--rs, --rt measured per size) */
.s02-brand{--lw:195px;--lt:calc((var(--row-h) - 28px - var(--lw) * .3442) / 2);--rs:.7;--rt:-25px;position:relative;display:block;width:var(--lw);height:calc(var(--row-h) - 28px);min-height:0;overflow:visible}
.s02-brand__inner{position:absolute;inset:0;transform-origin:50% var(--lt);transition:transform var(--t-3) cubic-bezier(0.65,0,0.35,1)} /* the base rule is the RETRACT speed (0.3s, Quinten: faster, not instant); the revealed state carries the 0.9s reveal */
.s02-brand:hover .s02-brand__inner,.s02-brand:focus-visible .s02-brand__inner,.ag-header.is-up .s02-brand__inner{transform:translateY(var(--rt)) scale(var(--rs));transition-duration:var(--t-9)} /* 44 = the row's content height (72 minus 14px padding each side); a taller brand grows the row and pushes the buttons down (measured: Buy Now bottom at 70 of 72) */
/* the reveal: a clipper from the brim line down; the full logo sits inside it shifted up by the hat, and SLIDES down as one transform (smooth, compositor only) */
.s02-reveal{position:absolute;left:0;top:calc(var(--lt) + var(--lw) * .3442);width:var(--lw);height:calc(var(--lw) * .5139);overflow:hidden;z-index:1}
.s02-logo{position:absolute;left:0;top:calc(var(--lw) * -.3442);width:var(--lw);height:auto;transform:translateY(calc(var(--lw) * -.5139));transition:transform var(--t-3) cubic-bezier(0.65,0,0.35,1);filter:drop-shadow(0 8px 16px rgb(var(--ink-rgb) / .35))}
.s02-hat{position:absolute;left:calc(var(--lw) * .0753);top:calc(var(--lt) - var(--lw) * .0043);width:calc(var(--lw) * .8393);height:auto;z-index:2;filter:drop-shadow(0 6px 12px rgb(var(--ink-rgb) / .35))}
.s02-brand:hover .s02-logo,.s02-brand:focus-visible .s02-logo,.ag-header.is-up .s02-logo{transform:none;transition-duration:var(--t-9)}
@media (prefers-reduced-motion:reduce){.s02-logo,.s02-brand__inner{transition:none}}
.ag-header__nav a:not(.ag-button){color:rgb(var(--paper-rgb) / .86)}
.ag-header__nav a:not(.ag-button)::after{background:var(--tan)}
.ag-hamburger{color:var(--tan)}
/* Quinten 2026-09-13: the page links carry the Buy Now hover (letters leave B-first, the second copy rises, the heavy arrow lands); the arrow slot opens to the
   RIGHT with a matching negative margin so the neighbors never move; ag-header's underline and arrow-drop are retired on these links */
.ag-header__nav a.s02-navswap{position:relative;display:inline-grid;grid-template-columns:auto;align-items:center;overflow:visible;padding:6px 0;margin-right:0;transition:padding-right .3s cubic-bezier(0.65,0,0.35,1),margin-right .3s cubic-bezier(0.65,0,0.35,1),color var(--duration-quick,300ms) var(--ease-satisfying,ease)}
.ag-header__nav a.s02-navswap::after{display:none}.ag-header__nav a.s02-navswap .s02-swap__arrow{right:0;width:1em;height:1em;color:var(--tan)}.ag-header__nav a.s02-navswap .s02-swap__arrow svg{width:1em;height:1em}
@media (hover:hover){.ag-header__nav a.s02-navswap:hover{padding-right:1.35em;margin-right:-1.35em;color:var(--paper)}}
/* the arrows pointing up-right never sit still: a small loop on the arrow only, nothing else moves */
.s02-swap__arrow svg{animation:s02point 1.4s ease-in-out infinite}
@keyframes s02point{0%,100%{translate:0 0}50%{translate:3px -3px}}
@media (prefers-reduced-motion:reduce){.s02-swap__arrow svg{animation:none}}
.ag-header .ag-button--primary{background:var(--tan);color:var(--ink);border-color:var(--tan)}
/* Quinten 2026-09-13: links left, logo center, cart + Buy Now right. Three zones on one grid row at every state (expanded,
   collapsed, phone), DOM order = visual order; ag-header v2.7's JS and drawer untouched */
/* Quinten 2026-09-13: logo left, links + cart + Buy Now right. A flex row; the nav pushes everything after it to the end */
.s02-centered .ag-header__row,.s02-centered.is-expanded .ag-header__row,.s02-centered.is-collapsed .ag-header__row{display:flex;align-items:center;gap:var(--space-md,21px)}
@media (max-width:1200px){.s02-brand{--lw:156px;--rs:.87;--rt:-32px}.s02-centered .ag-header__nav{gap:18px}.s02-centered .ag-header__nav a:not(.ag-button){font-size:.9375rem}.s02-cta.ag-button{padding:16px 24px}}
.s02-brand,.s02-cart{flex-shrink:0} /* the flex row must never squeeze the logo or the cart target (measured 226 and 57px at 1024 before this) */
@media (max-width:900px){.s02-brand{--lw:104px;--rs:.61;--rt:-9px}} /* after the 1200 block: the later rule wins at phone widths */
@media (max-width:1200px){.s02-centered .ag-header__nav,.s02-centered.is-expanded .ag-header__nav{display:none}.s02-centered .ag-header__toggle,.s02-centered.is-expanded .ag-header__toggle{display:inline-flex}.s02-centered .s02-actions,.s02-centered.is-expanded .s02-actions{margin-left:auto}} /* Quinten 2026-09-14: from 1200 down the links live in the menu icon (the drawer); the cart and Buy Now stay in the bar until 900. CSS-only: v2.7's measured auto-collapse is untouched */
.s02-centered .ag-header__nav{margin-left:auto}
.s02-centered .ag-header__toggle,.s02-centered.is-collapsed .ag-header__toggle{order:9;margin-left:0} /* phone: brand left, cart then the hamburger at the right end */
.s02-centered .ag-header__brand{order:-1}
.s02-centered .s02-actions{display:flex;align-items:center;gap:var(--space-md,21px);margin-left:clamp(20px,2.5vw,40px)}
.s02-centered.is-collapsed .s02-actions{margin-left:auto}
/* Quinten 2026-09-13: the cart in a container like Buy Now; on hover it wheels off to the right and a second one rolls in from the left */
.s02-cart{position:relative;display:inline-grid;place-items:center;width:63px;height:63px;border-radius:var(--radius-md,12px);background:var(--tan);color:var(--ink);overflow:hidden;transition:transform var(--duration-quick,300ms) var(--ease-satisfying,ease)}
/* Quinten 2026-09-13: in sequence. Cart A wheels off to the right in 0.45s with the speed lines trailing it from its first move and gone by the time
   it is out; only then does cart B roll in from the left (0.45s more). Leaving hover reverses without the delay. */
.s02-cart__ico{grid-area:1/1;position:relative;z-index:1;transition:transform .45s cubic-bezier(0.5,0,0.75,0),opacity .3s var(--ease-satisfying,ease)}
.s02-cart__ico--b{transition:transform .45s cubic-bezier(0.25,0.1,0.25,1),opacity .3s var(--ease-satisfying,ease)}
.s02-cart__lines{grid-area:1/1;position:relative;z-index:0;opacity:0;transform:translateX(-45%)}
@media (hover:hover){.s02-cart:hover .s02-cart__ico--a{transition-timing-function:cubic-bezier(0.5,0,0.75,0)}.s02-cart:hover .s02-cart__ico--b{transition-delay:.45s,.45s}.s02-cart:hover .s02-cart__lines{animation:s02lines .45s cubic-bezier(0.4,0,1,1) forwards}}
@keyframes s02lines{0%{opacity:0;transform:translateX(-45%)}12%{opacity:1}100%{opacity:0;transform:translateX(70%)}}
.s02-cart__ico--b{transform:translateX(-160%) rotate(-10deg);opacity:0}
@media (hover:hover){.s02-cart:hover{transform:translateY(-1px)}.s02-cart:hover .s02-cart__ico--a{transform:translateX(160%) rotate(10deg);opacity:0}.s02-cart:hover .s02-cart__ico--b{transform:none;opacity:1}}
/* Buy Now: no arrow at rest; on hover the letters leave upward one after another (B first), a second copy rises into the center with the same
   stagger, then a heavy up-right arrow (stroke drawn to Bungee's weight) lands. The arrow slot is always reserved so nothing shifts. */
.s02-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.s02-swap.ag-button{position:relative;display:inline-grid;grid-template-columns:auto;align-items:center;overflow:hidden;transition:padding-right .45s cubic-bezier(0.65,0,0.35,1),margin-right .45s cubic-bezier(0.65,0,0.35,1),background-color var(--duration-quick,300ms) var(--ease-satisfying,ease),box-shadow var(--duration-quick,300ms) var(--ease-satisfying,ease),transform var(--duration-quick,300ms) var(--ease-satisfying,ease)}
/* on hover the container grows 34px to the RIGHT (padding), a matching negative margin keeps its footprint so nothing else in the bar moves */
@media (hover:hover){.s02-swap.ag-button:hover{padding-right:calc(34px + 34px);margin-right:-34px}.s02-cta.ag-button:hover{padding-right:calc(34px + 34px)}}
@media (max-width:1200px) and (hover:hover){.s02-cta.ag-button:hover{padding-right:calc(24px + 34px)}}
.s02-swap__box{grid-area:1/1;display:grid;overflow:hidden;line-height:1.1}
.s02-swap__txt{grid-area:1/1;display:inline-flex;white-space:nowrap}
/* in sequence: the top text leaves first (B first, 0.04s apart), the second copy rises only once it is gone; on leave the order reverses */
.s02-swap__l{display:inline-block;transition:transform .3s cubic-bezier(0.65,0,0.35,1)}
.s02-swap__txt--out .s02-swap__l{transition-delay:calc(.24s + var(--i) * .03s)}
.s02-swap__txt--in .s02-swap__l{transform:translateY(115%);transition-delay:calc(var(--i) * .03s)}
.s02-swap__arrow{position:absolute;right:20px;top:50%;translate:0 -50%;display:grid;place-items:center;width:22px;height:22px;opacity:0;transform:translate(-10px,10px);transition:opacity var(--duration-quick,300ms) var(--ease-satisfying,ease),transform var(--duration-medium,600ms) cubic-bezier(0.65,0,0.35,1)}
@media (hover:hover){.s02-swap:hover .s02-swap__txt--out .s02-swap__l{transform:translateY(-115%);transition-delay:calc(var(--i) * .03s)}.s02-swap:hover .s02-swap__txt--in .s02-swap__l{transform:none;transition-delay:calc(.3s + var(--i) * .03s)}.s02-swap:hover .s02-swap__arrow{opacity:1;transform:none;transition-delay:.48s}}
.s02-swap:focus-visible .s02-swap__arrow{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.s02-swap__l,.s02-swap__arrow,.s02-cart__ico,.s02-swap.ag-button{transition:none}.s02-cart:hover .s02-cart__lines{animation:none}.s02-swap:hover .s02-swap__txt--out .s02-swap__l{transform:none}.s02-swap:hover .s02-swap__txt--in .s02-swap__l{transform:translateY(115%)}}
.s02-centered.is-collapsed .s02-actions .ag-button{display:none}
.s02-centered .brand-small{left:50%;transform:translate(-50%,-50%) scale(.86)}
.s02-centered.is-scrolled .brand-small{transform:translate(-50%,-50%) scale(1)}
@media (max-width:900px){.s02-centered .s02-actions .ag-button,.s02-centered.is-expanded .s02-actions .ag-button{display:none}.s02-centered .s02-actions{margin-left:auto}}
/* everything in the bar scales with it: links, cart, Buy Now. Quinten 2026-09-13: the bar's type is the hero's face (Bungee, the logo's family) */
.s02-centered .ag-header__nav{gap:clamp(28px,3vw,48px)}.s02-centered .ag-header__nav a:not(.ag-button){font:600 1rem/1 var(--font-body);text-transform:uppercase;letter-spacing:.02em;min-height:63px}
.s02-cta.ag-button{font:600 1rem/1 var(--font-body);text-transform:uppercase;letter-spacing:.02em;padding:20px 34px;min-height:63px}
.ag-drawer__label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em}.ag-drawer__cta.ag-button{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.02em}
@media (max-width:900px){.s02-cart{width:49px;height:49px}}
@media (max-width:900px){:root{--row-h:77px;--ann-h:30px}}
.ag-header.is-transparent{background:var(--ground)}

/* ---------- 2026-10-02 shared on every page: tokens the header and menu need (pages outside Home don't define them) ---------- */
.ag-header,.ag-drawer,.ag-backdrop{--ground:#000;--tan:#C9BCAC;--ink:#000;--paper:#fff;--paper-rgb:255 255 255;--ink-rgb:0 0 0;--font-display:"Rye",Georgia,serif;--font-body:"Libre Franklin",system-ui,sans-serif;--t-3:.3s;--t-7:.7s;--t-9:.9s;--accent:var(--tan);--on-ink:#fff}
.ag-header~main{padding-top:var(--header-h)}
html.ag-from-site:not(.ag-ready) .ag-header{transition:none} /* arriving from another page: the bar starts in place; from the next frame it slides normally (10-02: it used to stay transition-less, so it snapped and the logo never came down) */

/* ---------- 2026-10-02 Quinten: the menu, fuller - the product, every section with an icon, the shipping fact, call/text and Instagram, the policies ---------- */
.sd>*{flex-shrink:0} /* the menu scrolls when it is taller than the screen; nothing in it may squash */
.ag-header a,.ag-drawer a{text-decoration:none} /* policy pages underline links */
.ag-drawer.sd{background-color:#0b0908;background-image:radial-gradient(120% 60% at 100% 0,rgb(201 188 172 / .14),transparent 60%),radial-gradient(90% 50% at 0 100%,rgb(122 46 18 / .22),transparent 70%)}
.sd .ag-drawer__head{padding:calc(16px + env(safe-area-inset-top)) 22px 14px}
.sd-in{opacity:0;transform:translateX(var(--dist-lg,42px));transition:opacity var(--duration-quick,300ms) var(--ease-satisfying,ease),transform var(--duration-medium,600ms) var(--ease-satisfying,ease);transition-delay:calc(.14s + var(--i,0) * .05s)}
.ag-drawer.is-open .sd-in{opacity:1;transform:none}
/* the product */
.sd-prod{position:relative;display:grid;grid-template-columns:86px 1fr;align-items:center;gap:14px;margin:18px 20px 4px;padding:12px 16px 12px 10px;border-radius:16px;background:var(--tan);color:var(--ink);text-decoration:none;overflow:hidden;box-shadow:0 10px 24px rgb(0 0 0 / .35)}
.sd-prod::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgb(255 255 255 / .22)}
.sd-prod img{width:86px;height:96px;object-fit:contain;filter:drop-shadow(0 8px 10px rgb(0 0 0 / .35));transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.sd-prod small{display:block;font:600 .66rem/1.2 var(--font-body);letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.sd-prod b{display:block;margin:4px 0 6px;font:400 1.5rem/1 var(--font-display)}
.sd-prod__go{display:inline-flex;align-items:center;gap:6px;font:600 .82rem/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em}
.sd-prod__go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-satisfying,ease)}
@media (hover:hover){.sd-prod:hover img{transform:rotate(-6deg) scale(1.06)}.sd-prod:hover .sd-prod__go svg{transform:translate(2px,-2px)}}
.sd-prod[aria-current="page"]{box-shadow:0 0 0 2px #fff,0 10px 24px rgb(0 0 0 / .35)}
/* every section, with an icon */
.sd .ag-drawer__list{padding:12px 14px 4px;gap:0}.sd .ag-drawer__list li{margin:0}.sd p{margin-bottom:0}
.sd .ag-drawer__list a{align-items:center;min-height:46px;padding:6px 14px}
.sd .ag-drawer__label{font-size:clamp(1.15rem,4.6vw,1.4rem)}
.sd-ico{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:rgb(255 255 255 / .06);color:var(--tan);transition:background-color .3s,color .3s}
.sd-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sd .ag-drawer__list a[aria-current="location"]{background:rgb(255 255 255 / .08)}
.sd .ag-drawer__list a[aria-current="location"]::before{transform:translateY(-50%) scaleY(1)}
.sd .ag-drawer__list a[aria-current="location"] .sd-ico,.sd .ag-drawer__list a:hover .sd-ico{background:var(--tan);color:var(--ink)}
.sd .ag-drawer__list a[aria-current="location"] .ag-drawer__chev{opacity:1;transform:none}
/* the shipping fact */
.sd-ship{display:flex;align-items:center;gap:10px;margin:6px 20px 0;padding:11px 14px;border:1px dashed rgb(201 188 172 / .45);border-radius:12px;font:600 .8rem/1.3 var(--font-body);color:rgb(255 255 255 / .86)}
.sd-ship svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--tan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* call / text and Instagram */
.sd-reach{display:grid;grid-template-columns:1fr;gap:8px;margin:10px 20px 4px}
.sd-btn{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 12px;border-radius:12px;background:rgb(255 255 255 / .06);border:1px solid rgb(255 255 255 / .1);color:#fff;text-decoration:none;transition:background-color .3s,border-color .3s}
.sd-btn svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--tan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sd-btn>span{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex:1}
.sd-btn b{display:block;font:600 .88rem/1.2 var(--font-body)}
.sd-btn small{display:block;white-space:nowrap;font:500 .7rem/1.3 var(--font-body);color:rgb(255 255 255 / .6);overflow-wrap:anywhere}
@media (hover:hover){.sd-btn:hover{background:rgb(201 188 172 / .14);border-color:var(--tan)}}
.ag-drawer .ag-button--primary{background:var(--tan);color:var(--ink);border-color:var(--tan);--brand-primary:var(--tan)} /* tan on every page, as on Home */
.sd .ag-drawer__foot{margin-top:auto;padding-top:16px}
.sd-legal{display:flex;justify-content:center;gap:18px;margin:2px 0 0}
.sd-legal a{font:500 .74rem/1 var(--font-body);color:rgb(255 255 255 / .55);text-decoration:none}
.sd-legal a:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.sd-in{transition:none;opacity:1;transform:none}.sd-prod img{transition:none}}

/* ---------- 2026-10-02 page transitions (browser-native, cross-page; the kit's timings): the header holds still, the page slides
   out left 420ms ease-soft and the next one in from the right 420ms ease-satisfying 105ms later, 63px (42px on phones); going Home mirrors it.
   Browsers without it load normally; reduced motion = no slide. ---------- */
@view-transition{navigation:auto}
.ag-header{view-transition-name:sd-header}
main{view-transition-name:sd-page}
::view-transition-group(sd-header){animation:none}
::view-transition-old(sd-header){display:none}::view-transition-new(sd-header){animation:none}
::view-transition-old(sd-page){animation:sd-out 420ms cubic-bezier(.4,0,.2,1) both}
::view-transition-new(sd-page){animation:sd-in 420ms cubic-bezier(.16,1,.3,1) 105ms both}
::view-transition-group(sd-page){animation-duration:525ms}
html:active-view-transition-type(to-home)::view-transition-old(sd-page){animation-name:sd-out-r}
html:active-view-transition-type(to-home)::view-transition-new(sd-page){animation-name:sd-in-r}
::view-transition-old(root),::view-transition-new(root){animation-duration:300ms}
:root{--sd-d:63px}
@media (max-width:900px){:root{--sd-d:42px}}
@keyframes sd-out{to{opacity:0;transform:translateX(calc(var(--sd-d) * -1))}}
@keyframes sd-in{from{opacity:0;transform:translateX(var(--sd-d))}}
@keyframes sd-out-r{to{opacity:0;transform:translateX(var(--sd-d))}}
@keyframes sd-in-r{from{opacity:0;transform:translateX(calc(var(--sd-d) * -1))}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- 2026-10-02 Quinten: English / Spanish switch beside the cart (same height, outlined so the cart stays the hero) ---------- */
.sd-lang{flex-shrink:0;display:inline-grid;place-items:center;min-width:56px;height:63px;padding:0 10px;box-sizing:border-box;border:2px solid var(--tan);border-radius:var(--radius-md,12px);color:var(--tan);font:700 1rem/1 var(--font-body);letter-spacing:.08em;text-decoration:none;transition:background-color .3s ease,color .3s ease}
.sd-lang:hover,.sd-lang:focus-visible{background:var(--tan);color:var(--ink)}
@media (max-width:900px){.sd-lang{min-width:44px;height:49px;font-size:.88rem}}

/* 10-02 Quinten: product pictures open the product page (site-shell.js) - show it with the pointer */
[data-prodlink],.fc-panel img[src*="pouch"]{cursor:pointer}
.fx-why__photo[data-prodlink]{pointer-events:auto}
html.sd-prodhover,html.sd-prodhover *{cursor:pointer}

/* ---------- 2026-10-03 Quinten: free-shipping announcement bar - top of every page, inside the header so it hides and returns with it ---------- */
.ag-header .ag-header__row{height:var(--row-h)}
.sd-ann{height:var(--ann-h);display:flex;align-items:center;justify-content:center;background:#B3261E;color:#fff;padding:0 16px;overflow:hidden}
.sd-ann p{margin:0;display:flex;align-items:center;gap:10px;font:700 .8125rem/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.sd-ann svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
@media (max-width:520px){.sd-ann p{font-size:.6875rem;letter-spacing:.04em;gap:8px}.sd-ann__dot,.sd-ann__more{display:none}}
.fxp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 10-03 Quinten: free shipping pops in chile red #B3261E (white text 6.5:1) - the one place red is used */
/* 10-03 Quinten: free shipping pops more - a slow shine across the bar, the truck rolls, the tags are tilted stickers with the brand's hard shadow + their own shine; all still with Reduce Motion */
.sd-ann{position:relative}
.sd-ann::after,.fxp-free::after,.pp-free b::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgb(255 255 255 / .38) 50%,transparent 65%);transform:translateX(-120%);animation:fs-shine 5s ease-in-out 1 both /* plays once: endless motion needs a pause control (WCAG 2.2.2, build check 29) */;pointer-events:none}
.sd-ann svg{animation:fs-roll 2.4s ease-in-out 2}
.fxp-free,.pp-free b{position:relative;overflow:hidden;transform:rotate(-2.5deg);box-shadow:2px 3px 0 #000;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.fxp-free::after,.pp-free b::after{animation-delay:1.2s}
@media (hover:hover){.fxp-card:hover .fxp-free,.pp-free:hover b{transform:rotate(0) scale(1.08)}}
@keyframes fs-shine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
@keyframes fs-roll{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.sd-ann::after,.fxp-free::after,.pp-free b::after{animation:none;display:none}.sd-ann svg{animation:none}.fxp-free,.pp-free b{transition:none}}