/* Wuffa critical above-the-fold — mirrors key Tailwind utilities until CDN loads */
@font-face{
  font-family:'HG Fallback';
  src:local('Arial');
  size-adjust:97.3%;
  ascent-override:100%;
  descent-override:30.3%;
  line-gap-override:0%;
}
@font-face{
  font-family:'SG Fallback';
  src:local('Arial');
  size-adjust:98.16%;
  ascent-override:97.66%;
  descent-override:25.78%;
  line-gap-override:0%;
}
:root{--ink:#1e4d45;--inkdk:#16382f;--cream:#fbf3e7;--orange:#d9542f;--lemon:#f1e24a;--sage:#7fa079}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"HG Fallback","Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video{max-width:100%;height:auto;display:block}
img[width][height]:not(.w-14):not(.h-14):not(.w-11):not(.h-11):not(.hero__img){height:auto}
.aspect-square{aspect-ratio:1/1}
.w-11{width:2.75rem}
.w-14{width:3.5rem}
.h-full{height:100%}
.h-auto{height:auto}
.h-11{height:2.75rem}
.h-14{height:3.5rem}
img.w-11.h-11,img.w-14.h-14{max-width:none}
.object-cover{object-fit:cover}
.object-contain{object-fit:contain}
.inset-0{inset:0}
button,input,select{font:inherit}
a{color:inherit;text-decoration:none}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.font-display{font-family:"SG Fallback","Schibsted Grotesk",system-ui,sans-serif;letter-spacing:-.02em}
.font-black,.font-extrabold,h1.font-display{font-weight:800}
.bg-cream{background-color:var(--cream)}
.bg-white{background:#fff}
.bg-ink{background-color:var(--ink)}
.bg-orange{background-color:var(--orange)}
.bg-lemon{background-color:var(--lemon)}
.bg-\[\#2c544c\]{background-color:#2c544c}
.text-white{color:#fff}
.text-ink{color:var(--ink)}
.text-orange{color:var(--orange)}
.text-center{text-align:center}
.hidden{display:none}
.block{display:block}
.inline-flex{display:inline-flex}
.flex{display:flex}
.grid{display:grid}
.flex-col{flex-direction:column}
.flex-1{flex:1 1 0%}
.flex-none{flex:none}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-self-start{justify-self:start}
.justify-self-center{justify-self:center}
.justify-self-end{justify-self:end}
.gap-1\.5{gap:.375rem}
.gap-2{gap:.5rem}
.gap-2\.5{gap:.625rem}
.gap-4{gap:1rem}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-3xl{max-width:48rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.p-1{padding:.25rem}
.p-2{padding:.5rem}
.-ml-2{margin-left:-.5rem}
.sticky{position:sticky}
.top-0{top:0}
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.z-40{z-index:40}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-black\/5{border-color:rgba(0,0,0,.05)}
.h-\[64px\]{height:64px}
.h-\[68px\]{height:68px}
.min-h-screen{min-height:100vh}
.w-5{width:1.25rem}
.h-5{height:1.25rem}
.w-full{width:100%}
.rounded-full{border-radius:9999px}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.text-\[11px\]{font-size:11px}
.text-\[12\.5px\]{font-size:12.5px}
.text-\[13px\]{font-size:13px}
.text-\[14px\]{font-size:14px}
.text-\[15px\]{font-size:15px}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.tracking-wide{letter-spacing:.025em}
.tracking-tight{letter-spacing:-.025em}
.leading-none{line-height:1}
.lowercase{text-transform:lowercase}
.select-none{user-select:none}
.opacity-80{opacity:.8}
.opacity-95{opacity:.95}
.place-items-center{place-items:center}
.-top-1\.5{top:-.375rem}
.-right-1\.5{right:-.375rem}
@media (min-width:768px){.md\:block{display:block}.md\:hidden{display:none}}
@media (max-width:767px){.hidden.md\:block{display:none}}

/* Promo bar — fixed height prevents CLS */
.promo-bar{min-height:2.75rem}
.promo-bar>.max-w-7xl{min-height:2.75rem}
#view-home .sub-label{display:none!important}

/* Header — reserve nav + promo bar height */
header{min-height:64px}
@media (min-width:768px){header{min-height:calc(68px + 2.75rem + 1px)}}

/* Hero — fixed geometry before async CSS / font swap */
.hero{min-height:34rem}
.hero__frame{position:relative;width:100%;min-height:34rem;height:34rem;aspect-ratio:1400/600;overflow:hidden}
.hero__img,.hero__scrim{position:absolute;inset:0;width:100%;height:100%;min-height:100%}
.hero__img{object-fit:cover;object-position:22% center;opacity:1;animation:none;transition:none;content-visibility:visible}
.hero__scrim{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.5) 100%)}
.hero__content{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.25rem;box-sizing:border-box;width:100%;max-width:100%}
.hero__badge{color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);text-shadow:0 1px 6px rgba(0,0,0,.35);min-height:1.75rem;font-size:11px;max-width:100%;text-align:center}
.hero__title{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45);font-size:clamp(1.375rem,5.5vw + .5rem,3.25rem);line-height:1.12;min-height:0;overflow-wrap:break-word;word-wrap:break-word;hyphens:auto;max-width:100%}
.hero__sub{color:rgba(255,255,255,.94);text-shadow:0 1px 8px rgba(0,0,0,.4);font-size:clamp(13px,3.2vw + .25rem,18px);min-height:0;max-width:100%}
.hero__trust{color:rgba(255,255,255,.88);text-shadow:0 1px 6px rgba(0,0,0,.35);min-height:2.5rem;max-width:100%}
.hero__btn,.hero-cta{min-height:3rem;color:#fff;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);width:100%;max-width:28rem}
@keyframes heroPop{0%{opacity:0}100%{opacity:1}}
.hero-cta{animation:heroPop .8s .25s both cubic-bezier(.2,.8,.2,1);will-change:opacity}
@media (min-width:640px){
  .hero__sub{font-size:15px}
}
@media (min-width:768px){
  .hero{min-height:26rem}
  .hero__img{object-position:center center}
  .hero__frame{height:auto;min-height:26rem;aspect-ratio:2000/857}
  .hero__content{align-items:flex-start;text-align:left;padding:0 3rem 0 5rem}
  .hero__scrim{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.5) 100%),linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 45%,transparent 70%)}
  .hero__badge{font-size:13px}
  .hero__title{font-size:clamp(2rem,4vw + .5rem,3.25rem)}
  .hero__sub{font-size:18px}
  .hero__btn,.hero-cta{width:auto;max-width:none}
}
@media (min-width:1024px){
  .hero__title{font-size:3.25rem}
}

/* Cookie consent modal — visible before async UI CSS */
body.cookie-modal-open{overflow:hidden;touch-action:none}
.cookie-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.cookie-modal.closed{display:none}
@media (min-width:768px){.cookie-modal{align-items:center}}
.cookie-modal__backdrop{position:absolute;inset:0;background:rgba(20,30,25,.55)}
.cookie-modal__card{position:relative;z-index:1;width:100%;max-width:340px;background:#fbf7ef;border-radius:20px;padding:28px 22px 22px;text-align:center}
.cookie-modal__icon-wrap{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:#e7efe2;display:flex;align-items:center;justify-content:center}
.cookie-modal__icon{font-size:30px;line-height:1;color:#1f4d3a}
.cookie-modal__heading{margin:0 0 12px;font-family:inherit;font-size:19px;font-weight:500;line-height:1.3;color:#1f4d3a}
.cookie-modal__body{margin:0 0 20px;font-size:14px;line-height:1.6;color:#4a5a4f}
.cookie-modal__body--settings{margin-bottom:16px;font-size:13px}
.cookie-modal__link{color:#1f4d3a;text-decoration:underline;text-underline-offset:2px}
.cookie-modal__actions{display:flex;flex-direction:row;gap:10px;margin-bottom:14px}
.cookie-modal__btn{flex:1;min-height:48px;height:48px;padding:0 12px;font-family:inherit;font-size:15px;font-weight:500;line-height:1.2;border-radius:12px;cursor:pointer}
.cookie-modal__btn--reject{background:transparent;border:1.5px solid #1f4d3a;color:#1f4d3a}
.cookie-modal__btn--accept{background:#1f4d3a;border:1.5px solid #1f4d3a;color:#fbf7ef}
.cookie-modal__settings-btn{display:block;margin:0 auto;padding:4px 8px;font-family:inherit;font-size:13px;color:#7a8a7f;text-decoration:underline;text-underline-offset:2px;background:none;border:none;cursor:pointer}
.cookie-modal__toggles{list-style:none;margin:0 0 20px;padding:0;text-align:left}
.cookie-modal__toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(31,77,58,.1)}
.cookie-modal__toggle-row:last-child{border-bottom:none}
.cookie-modal__toggle-label{display:block;font-size:14px;font-weight:600;color:#1f4d3a;margin-bottom:2px}
.cookie-modal__toggle-desc{display:block;font-size:12px;line-height:1.4;color:#7a8a7f}
.cookie-modal__toggle-badge{flex-shrink:0;font-size:12px;font-weight:600;color:#7a8a7f;padding:4px 10px;border-radius:9999px;background:rgba(31,77,58,.08)}
.cookie-modal__toggle-input{flex-shrink:0;width:44px;height:26px;margin:0;appearance:none;-webkit-appearance:none;background:rgba(31,77,58,.2);border-radius:9999px;cursor:pointer;position:relative}
.cookie-modal__toggle-input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
.cookie-modal__toggle-input:checked{background:#1f4d3a}
.cookie-modal__toggle-input:checked::after{transform:translateX(18px)}

/* PDP line switcher — visible before async UI CSS */
a.pop-pill, button.pop-pill, .pop-pill {
  display: inline-block;
  border: 2px solid rgba(30,77,69,.25);
  border-radius: 9999px;
  padding: .5rem 1rem;
  font-weight: 700;
  font-size: 13px;
  color: #1e4d45;
  background: #fff;
  cursor: pointer;
  text-decoration: none;
}
.pop-pill.is-sel { background: #1e4d45; color: #fff; border-color: #1e4d45; }
#pdpThumbs.is-hidden, #galPrev.is-hidden, #galNext.is-hidden { display: none !important; }

/* Overlays/modals — hidden before async UI CSS (zero-frame flash) */
#soldOutModal,#cartOverlay,#menuOverlay{position:fixed;inset:0}
#soldOutModal{z-index:70}
#cartOverlay,#menuOverlay{z-index:60}
#globalStickyBar{position:fixed;bottom:0;left:0;right:0;z-index:55}
#soldOutModal.closed,
#cartOverlay.closed,
#menuOverlay.closed{display:none}
#globalStickyBar.translate-y-full{display:none}
#checkoutSuccessPanel.hidden{display:none}
#cookieBanner.closed{display:none!important}

/* Cart & menu drawer animations (must load immediately) */
#cartOverlay, #menuOverlay { transition: opacity 0.3s ease; }
#cartOverlay.closed, #menuOverlay.closed {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
#cartPanel, #menuPanel {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#cartOverlay:not(.closed) #cartPanel,
#menuOverlay:not(.closed) #menuPanel {
  will-change: transform;
}
#cartOverlay:not(.closed) #cartPanel { transform: translateX(0); }
#cartOverlay.closed #cartPanel { transform: translateX(100%); }
#menuOverlay:not(.closed) #menuPanel { transform: translateX(0); }
#menuOverlay.closed #menuPanel { transform: translateX(-100%); }

/* Free-shipping progress bar (Tailwind loads later) */
.ship-track {
  background-image: repeating-linear-gradient(45deg, #e3e3e3 0 7px, #f1f1f1 7px 14px);
}
#shipBar {
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  background-color: #7fa079;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#globalStickyBar {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#globalStickyBar:not(.translate-y-full) {
  will-change: transform, opacity;
}