@font-face{font-family:'Signika';src:url('/fonts/signika-latin.woff2') format('woff2');font-weight:400 700;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:'Signika';src:url('/fonts/signika-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';src:url('/fonts/nunito-latin.woff2') format('woff2');font-weight:400 700;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:'Nunito';src:url('/fonts/nunito-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --sage:#AFCAC0; --sage-100:#EDF4F1; --sage-200:#D7E6DF; --sage-600:#6E8D80; --sage-700:#4F6A5F;
  --olive:#877C5C; --olive-700:#6A6146; --olive-900:#3E3A2A;
  --ink:#22261F; --ink-800:#2C3129; --body:#454C43; --muted:#63695F;
  --cream:#FCFBF7; --sand:#F4F1E8; --line:#E4E0D4; --line-soft:#EEEBE1; --white:#fff;
  --wrap:1440px; --gut:clamp(20px,4vw,56px);
  --r:14px; --r-lg:22px; --r-xl:30px;
  --sp:clamp(64px,7.5vw,104px);
  --sp-h:clamp(32px,4vw,52px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(34,38,31,.04),0 10px 28px -14px rgba(34,38,31,.16);
  --shadow-lg:0 2px 6px rgba(34,38,31,.05),0 26px 56px -22px rgba(34,38,31,.26);
  --hdr-h:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 20px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--body);
  font-family:'Nunito',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:'Signika','Nunito',ui-sans-serif,system-ui,sans-serif;color:var(--ink);
  margin:0 0 .5em;line-height:1.14;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.15rem,5.4vw,3.7rem)}
h2{font-size:clamp(1.72rem,3.7vw,2.6rem)}
h3{font-size:clamp(1.22rem,2.1vw,1.55rem)}
h4{font-size:1.1rem}
p{margin:0 0 1.05em}
a{color:var(--sage-700);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .25s var(--ease)}
a:hover{color:var(--olive-700)}
img{max-width:100%;height:auto;display:block}
ul,ol{padding-left:1.15em}
li{margin:.3em 0}
:focus-visible{outline:3px solid var(--sage-600);outline-offset:3px;border-radius:6px}
::selection{background:var(--sage-200);color:var(--ink)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap.narrow{max-width:calc(768px + var(--gut) * 2)}
.sec{padding-block:var(--sp)}
.sec-t{padding-top:var(--sp)}
.sec-b{padding-bottom:var(--sp)}
.sec>.wrap>*:last-child,.sec>*:last-child{margin-bottom:0}
.tint{background:var(--sand)}
.mint{background:var(--sage-100)}
.dark{background:var(--ink);color:#C6D0C8}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.center{text-align:center}
.eyebrow{font-family:'Signika',sans-serif;font-size:.775rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--olive-700);margin:0 0 .8rem;display:flex;align-items:center;gap:10px}
.center .eyebrow{justify-content:center}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55;flex:none}
.center .eyebrow::after{content:"";width:22px;height:1px;background:currentColor;opacity:.55;flex:none}
.dark .eyebrow{color:var(--sage)}
.lede{font-size:clamp(1.03rem,1.5vw,1.16rem);color:var(--body);max-width:62ch;margin-bottom:0}
.dark .lede{color:#B7C3B9}
.center .lede{margin-inline:auto}
.sec-head{max-width:660px;margin-bottom:var(--sp-h)}
.sec-head>*:last-child{margin-bottom:0}
.center .sec-head{margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:120;background:rgba(252,251,247,.88);
  backdrop-filter:saturate(1.7) blur(16px);-webkit-backdrop-filter:saturate(1.7) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.hdr.stuck{border-bottom-color:var(--line);box-shadow:0 8px 26px -22px rgba(34,38,31,.7)}
.bar{display:flex;align-items:center;gap:clamp(8px,1.6vw,20px);min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;text-decoration:none}
.brand img{width:56px;height:53px;transition:transform .5s var(--ease-out)}
.brand:hover img{transform:rotate(-6deg) scale(1.05)}
.brand span{font-family:'Signika',sans-serif;font-size:1.28rem;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav>a,.nav-link,.nav-toggle{font-family:'Nunito',sans-serif;font-size:.95rem;font-weight:600;color:var(--ink);
  text-decoration:none;padding:9px 13px;border-radius:10px;position:relative;background:none;border:0;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background-color .25s var(--ease),color .25s var(--ease)}
.nav>a::after,.nav-link::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  background:var(--sage-600);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out)}
.nav>a:hover,.nav-link:hover,.nav-toggle:hover{background:var(--sage-100)}
.nav>a:hover::after,.nav>a[aria-current="page"]::after,.nav-link:hover::after,
.has-mega:hover .nav-link::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav>a[aria-current="page"],.nav-link[aria-current="page"]{color:var(--sage-700)}
.nav-pair{display:flex;align-items:center;gap:0}
.nav-link{padding-right:6px}
.nav-toggle{padding:9px 8px 9px 4px;border-radius:10px}
.nav-toggle svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.nav-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

.has-mega{position:relative}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,-8px);width:min(620px,92vw);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:22px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease) .28s,transform .3s var(--ease-out) .28s,visibility .3s .28s}
.mega.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
.mega.snap{transition-delay:0s!important;transition-duration:.12s!important}
@media(min-width:1081px){.has-mega:hover .mega.snap:not(.open){opacity:0;visibility:hidden;pointer-events:none}}
@media(min-width:1081px){.has-mega:not(.dismissed):hover .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}}
.mega-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px}
.mega-h{font-family:'Signika',sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--olive-700);font-weight:600;margin:0 0 .85em;padding-left:11px}
.mega-list{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.mega-list li{margin:0}
.mega-list a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;
  text-decoration:none;color:var(--ink);font-size:.93rem;font-weight:600;
  transition:background-color .22s var(--ease),transform .22s var(--ease)}
.mega-list a:hover{background:var(--sage-100);transform:translateX(3px)}
.mega-list a svg{width:18px;height:18px;color:var(--sage-700);flex:none}
.mega-sub a{font-weight:500;color:var(--body)}
.mega-sub a:hover{color:var(--ink)}
.mega-sm{width:min(260px,92vw)}
.mega-sm .mega-list a{font-weight:600}
.mega-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;
  justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mega-foot .btn{padding:11px 20px;font-size:.9rem}
.mega-note{font-size:.84rem;color:var(--muted);margin:0}

.util{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.util a{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--ink);
  position:relative;text-decoration:none;
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease-out)}
.util a:hover{background:var(--sage-100);color:var(--sage-700);transform:translateY(-2px)}
.util svg{width:21px;height:21px}
.util .count{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--ink);color:#fff;font-size:.65rem;font-weight:700;line-height:17px;text-align:center}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:12px;
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}

@media(max-width:1080px){
  .mega::before{display:none}
  .nav{position:fixed;inset:var(--hdr-h) 0 auto;background:var(--cream);flex-direction:column;align-items:stretch;
    scroll-behavior:auto;
    gap:0;padding:14px var(--gut) 30px;border-bottom:1px solid var(--line);transform:translateY(-10px);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .35s var(--ease-out),visibility .3s;
    max-height:calc(100dvh - var(--hdr-h));overflow:auto;box-shadow:var(--shadow-lg)}
  .nav.open{transform:none;opacity:1;visibility:visible}
  .nav>a,.nav-link{padding:13px 6px;font-size:1.02rem;justify-content:flex-start;width:100%}
  .nav-pair{width:100%;justify-content:space-between}
  .nav-toggle{padding:13px 10px;width:auto;flex:none}
  .nav>a::after,.nav-link::after{display:none}
  .has-mega{width:100%}
  .mega{position:static;transform:none;width:100%;box-shadow:none;border:0;border-radius:0;
    padding:0 0 10px 6px;display:none;opacity:1;visibility:visible;pointer-events:auto;background:none}
  .mega.open{display:block;transform:none}
  .mega-cols{grid-template-columns:1fr;gap:2px}
  .mega-h{margin:14px 0 .5em}
  .mega-sm{width:100%}
  .mega-list a{font-weight:500;font-size:.94rem}
  .mega-foot{border-top:0;padding-top:6px;margin-top:6px}
  .burger{display:flex}
}
@media(max-width:560px){.brand span{display:none}.util a{width:40px}}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Nunito',sans-serif;
  font-weight:700;font-size:.95rem;padding:14px 28px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:transform .3s var(--ease-out),background-color .3s var(--ease),border-color .3s var(--ease),
  color .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-p{background:var(--ink);color:#fff;box-shadow:0 10px 26px -16px rgba(34,38,31,.9)}
.btn-p:hover{background:var(--sage-700);color:#fff;box-shadow:0 16px 32px -16px rgba(79,106,95,.8)}
.btn-s{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-s:hover{background:var(--white);border-color:var(--sage-600);color:var(--sage-700);box-shadow:var(--shadow)}
.dark .btn-s{color:#fff;border-color:rgba(255,255,255,.28)}
.dark .btn-s:hover{background:rgba(255,255,255,.08);color:#fff;border-color:var(--sage)}
.btn svg{width:17px;height:17px;flex:none;transition:transform .3s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1000px 560px at 86% -12%,var(--sage-200) 0%,transparent 60%),
  radial-gradient(760px 500px at -10% 112%,#F1EEE1 0%,transparent 58%),var(--cream)}
.hero-mark{position:absolute;right:-90px;top:-70px;width:min(46vw,540px);color:var(--sage);opacity:.16;
  pointer-events:none;animation:spin 100s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-in{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,4.5vw,68px);align-items:center;
  padding-block:clamp(52px,7.5vw,96px);position:relative}
.hero h1{margin-bottom:.4em}
.hero .lede{font-size:clamp(1.05rem,1.6vw,1.2rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.82);border:1px solid var(--line);
  color:var(--olive-900);font-size:.8rem;font-weight:700;padding:7px 14px;border-radius:999px;
  transition:transform .3s var(--ease-out),border-color .3s var(--ease)}
.pill:hover{transform:translateY(-2px);border-color:var(--sage)}
.pill svg{width:15px;height:15px;color:var(--sage-700)}
a.pill{text-decoration:none}
@media(max-width:880px){.hero-in{grid-template-columns:1fr;gap:36px}
  .hero-mark{display:none}}

/* ---------------------------------------------------------------- strip */
.strip{background:var(--ink);color:#DCE5DE;font-size:.82rem;letter-spacing:.06em;text-align:center;
  padding:11px var(--gut);font-weight:600}

/* ---------------------------------------------------------------- grids */
.grid{display:grid;gap:clamp(18px,2.4vw,26px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g3,.g2{grid-template-columns:1fr}}
@media(max-width:600px){
  .g4{grid-template-columns:repeat(2,1fr);gap:14px}
  .g4 .card-body{padding:16px 16px 20px;gap:7px}
  .g4 .card-body h2,.g4 .card-body h3{font-size:.95rem}
  .g4 .card-note{font-size:.78rem}
  .g4 .price{font-size:.92rem}
  .g4 .card-foot{flex-direction:column;align-items:flex-start;gap:6px}
  .g4 .link-arrow{font-size:.82rem}}
@media(max-width:390px){.g4{grid-template-columns:1fr}}
.gauto{display:grid;gap:clamp(18px,2.4vw,26px);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.gauto.cap2{max-width:632px}
.gauto.cap3{max-width:952px}

/* ---------------------------------------------------------------- range tiles */
.ranges{display:grid;grid-template-columns:1.26fr 1fr;gap:clamp(16px,2.2vw,24px);align-items:stretch}
.ranges-col{display:grid;gap:clamp(16px,2.2vw,24px)}
@media(max-width:820px){.ranges{grid-template-columns:1fr}}
.tile{position:relative;display:flex;border-radius:var(--r-xl);overflow:hidden;text-decoration:none;
  background:var(--sage-100);isolation:isolate;height:100%;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .9s var(--ease-out)}
.tile:hover img{transform:scale(1.055)}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,24,18,0) 22%,rgba(20,24,18,.3) 52%,rgba(20,24,18,.78) 100%)}
.tile-body{position:relative;display:flex;flex-direction:column;justify-content:flex-end;flex:1;
  padding:clamp(20px,2.6vw,30px);gap:8px;min-height:240px}
.tile.tall .tile-body{min-height:min(46vw,430px)}
@media(max-width:820px){.tile-body,.tile.tall .tile-body{min-height:260px}}
.tile .ico{background:rgba(255,255,255,.18);color:#fff;margin:0 0 auto}
.tile h2,.tile h3{color:#fff;margin:0;font-size:clamp(1.2rem,2vw,1.6rem)}
.tile .go{display:inline-flex;align-items:center;gap:8px;color:#E7F0E9;font-weight:700;font-size:.88rem}
.tile .go svg{width:15px;height:15px;transition:transform .35s var(--ease-out)}
.tile:hover .go svg{transform:translateX(5px)}

/* ---------------------------------------------------------------- cards */
.card{position:relative;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;align-self:stretch;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--sage-200)}
.card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--sage-100);display:block}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.055)}
.card-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;gap:9px}
.card-body h2,.card-body h3,.card-body h4{margin:0;font-size:1.06rem;line-height:1.34}
.g4 .card-body h2{min-height:2.68em}
.card-body h2 a,.card-body h3 a,.card-body h4 a{color:var(--ink);text-decoration:none}
.card-body h2 a::after{content:"";position:absolute;inset:0}
.card-body h2 a:hover,.card-body h3 a:hover{color:var(--sage-700)}
.card-note{font-size:.86rem;color:var(--muted);margin:0;line-height:1.5}
.card-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.price{font-family:'Signika',sans-serif;font-weight:600;color:var(--ink);font-size:1.05rem;white-space:nowrap}
.price del{color:var(--muted);font-weight:400;margin-right:7px;font-size:.9em}
.price ins{text-decoration:none;color:var(--olive-700)}
.tag{position:absolute;top:12px;left:12px;z-index:2;background:var(--ink);color:#fff;font-size:.68rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
/* Sold out and running low. Added by the page once it knows what is in, so
   the built HTML is never wrong about it for long. Sits opposite the Sale
   badge so the two never cover each other. */
.stocktag{position:absolute;top:12px;right:12px;z-index:2;background:var(--white);
  color:var(--ink);border:1px solid var(--line);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.stocktag.low{background:#FBF0DC;border-color:#EBD7AE;color:#7A5510}
.card.is-out .card-media img{filter:saturate(.45);opacity:.72}
.card.is-out .price{color:var(--muted)}

/* A size that has sold out is still readable and still selectable, so you can
   see what it costs and why you cannot have it. It is not hidden. */
.chip.is-out{color:var(--muted);border-style:dashed}
.chip.is-out::after{content:' sold out';font-size:.78em;letter-spacing:.02em}

.stocknote{margin:10px 0 0;font-size:.9rem;color:var(--muted);line-height:1.6}
.stocknote.warn{color:#7A5510;font-weight:600}
.add-cart[disabled]{opacity:.55;cursor:not-allowed}
.was{color:var(--muted);font-weight:400;margin-right:7px;font-size:.9em}

.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.88rem;
  text-decoration:none;color:var(--sage-700)}
.link-arrow svg{width:15px;height:15px;transition:transform .35s var(--ease-out)}
.card:hover .link-arrow svg,.link-arrow:hover svg{transform:translateX(4px)}

/* ---------------------------------------------------------------- dark feature band */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.band .item{padding:clamp(22px,2.6vw,34px) clamp(18px,2.2vw,30px);
  border-left:1px solid rgba(255,255,255,.13);transition:background-color .4s var(--ease)}
.band .item:first-child{border-left:0;padding-left:0}
.band .item:last-child{padding-right:0}
.band .item:hover{background:rgba(255,255,255,.045)}
.band h3{font-size:1.05rem;margin-bottom:.4em}
.band p{margin:0;font-size:.93rem;color:#AFBBB2}
.band .ico{background:rgba(175,202,192,.16);color:var(--sage);margin-bottom:16px}
.band .item:hover .ico{background:var(--sage);color:var(--ink)}
@media(max-width:900px){.band{grid-template-columns:repeat(2,1fr)}
  .band .item{border-left:0;padding:24px 0}
  .band .item:nth-child(even){padding-left:clamp(18px,3vw,28px);border-left:1px solid rgba(255,255,255,.13)}
  .band .item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13)}}
@media(max-width:560px){.band{grid-template-columns:1fr}
  .band .item{border-left:0!important;padding:24px 0!important}
  .band .item+.item{border-top:1px solid rgba(255,255,255,.13)}}

.pillars{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.8vw,32px);align-items:start}
.pillars-col{display:grid;gap:clamp(20px,2.8vw,32px);align-content:start}
.pillars-wide{margin-top:clamp(20px,2.8vw,32px)}
.pillars-wide .feat p{max-width:88ch}
@media(max-width:860px){.pillars{grid-template-columns:1fr}}
.defer-paint{content-visibility:auto;contain-intrinsic-size:auto 640px}
.feat{align-self:start;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,34px) clamp(24px,2.6vw,32px);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--sage-200)}
.feat h3{font-size:1.12rem;margin-bottom:.5em}
.feat p{margin:0;font-size:.95rem;color:var(--body)}
.feat>*:last-child{margin-bottom:0}
.ico{width:46px;height:46px;border-radius:14px;background:var(--sage-100);color:var(--sage-700);
  display:grid;place-items:center;margin-bottom:16px;flex:none;
  transition:background-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease-out)}
.feat:hover .ico{background:var(--sage);color:var(--olive-900);transform:rotate(-5deg)}
.ico svg{width:24px;height:24px}

/* ---------------------------------------------------------------- split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.5vw,72px);align-items:center}
.split.rev>*:first-child{order:2}
.split>div>*:last-child{margin-bottom:0}
.split-fig{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:4/3;background:var(--sand)}
.split-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.split-fig:hover img{transform:scale(1.045)}
.framed{position:relative}
.framed{position:relative}
.framed::before{content:"";position:absolute;inset:22px -22px -22px 22px;border-radius:var(--r-xl);
  border:1.5px solid var(--sage-600);opacity:.45;pointer-events:none;z-index:0}
.framed>*{position:relative;z-index:1}

@media(max-width:880px){.split{grid-template-columns:1fr;gap:34px}.split.rev>*:first-child{order:0}
  .framed::before{inset:14px -14px -14px 14px}}
.ticks{list-style:none;padding:0;margin:0 0 24px}
.ticks li{display:flex;gap:11px;align-items:flex-start;margin:.55em 0;font-size:.98rem}
.ticks svg{width:19px;height:19px;color:var(--sage-600);flex:none;margin-top:3px}
.hilite{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:16px}
.hilite li{display:flex;gap:14px;align-items:flex-start}
.hilite .ico{margin:0;width:44px;height:44px;border-radius:13px}
.hilite b{display:block;font-family:'Signika',sans-serif;color:var(--ink);font-size:1.02rem;
  font-weight:600;line-height:1.35}
.hilite .t{font-size:.94rem;color:var(--muted)}

/* ---------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stats .stat{text-align:center;padding:clamp(8px,1.6vw,18px) 12px;border-left:1px solid var(--line)}
.stats .stat:first-child{border-left:0}
.dark .stats .stat{border-left-color:rgba(255,255,255,.14)}
.stat b{display:block;font-family:'Signika',sans-serif;font-size:clamp(2rem,4.2vw,3rem);color:var(--ink);
  font-weight:600;line-height:1.02;letter-spacing:-.02em}
.dark .stat b{color:#fff}
.stat span{font-size:.8rem;color:var(--muted);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.dark .stat span{color:#AFBBB2}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .stats .stat:nth-child(odd){border-left:0}}

/* ---------------------------------------------------------------- quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.quote{align-self:stretch;display:flex;flex-direction:column;gap:14px;
  padding:clamp(4px,1.2vw,12px) clamp(20px,2.6vw,38px);border-left:1px solid var(--line)}
.quote:first-child{border-left:0;padding-left:0}
.quote:last-child{padding-right:0}
.quote blockquote{margin:0;padding:0;border:0}
.quote blockquote p{margin:0;font-size:1.02rem;color:var(--ink);line-height:1.62}
.qmark{font-family:'Signika',sans-serif;font-size:2.7rem;line-height:.62;color:var(--sage);
  margin:0;height:24px}
.stars{display:flex;gap:3px;color:var(--olive)}
.stars svg{width:15px;height:15px}
.quote figcaption{margin-top:auto;padding-top:8px}
.quote cite{font-style:normal;font-size:.86rem;color:var(--muted)}
.quote cite b{display:block;color:var(--ink);font-size:.96rem;font-weight:700;font-style:normal}
@media(max-width:880px){.quotes{grid-template-columns:1fr}
  .quote{border-left:0;padding:26px 0}
  .quote+.quote{border-top:1px solid var(--line)}
  .quote:first-child{padding-top:0}}

/* ---------------------------------------------------------------- page head */
.phead{background:linear-gradient(180deg,var(--sage-100) 0%,var(--cream) 100%);
  padding-block:clamp(38px,5.5vw,64px) clamp(30px,4vw,48px);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden}
.phead>.wrap>*:last-child{margin-bottom:0}
.phead h1{margin-bottom:.28em}
.crumbs{font-size:.83rem;color:var(--muted);margin:0 0 14px;display:flex;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--sage-700);text-decoration:underline}
.crumbs .sep{margin:0 7px;color:#9AA096}
.crumbs .cur{color:var(--body)}

/* ---------------------------------------------------------------- chips + rail */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0;padding:0;list-style:none}
.chips li{margin:0}
.chip{border:1.5px solid var(--line);background:var(--white);border-radius:999px;padding:9px 18px;
  font-weight:700;font-size:.88rem;cursor:pointer;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;font-family:'Nunito',sans-serif;
  transition:background-color .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease),
  transform .28s var(--ease-out)}
.chip:hover{border-color:var(--sage-600);background:var(--sage-100);color:var(--sage-700);transform:translateY(-2px)}
.chip.on,.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.on .n{color:rgba(255,255,255,.75)}
.chip:hover .n{color:var(--sage-700)}
.chip.on:hover,.chip[aria-pressed="true"]:hover{background:var(--ink-800);color:#fff;border-color:var(--ink-800)}
.chip svg{width:15px;height:15px;flex:none}
.chip .n{font-weight:600;color:var(--muted);font-size:.84em}

.shop-lay{display:grid;grid-template-columns:238px 1fr;gap:clamp(26px,3.4vw,48px);align-items:stretch}
@media(max-width:940px){.shop-lay{grid-template-columns:1fr}}
.rail-desk{position:relative}
.rail{position:sticky;top:calc(var(--hdr-h) + 24px);max-height:calc(100dvh - var(--hdr-h) - 48px);
  overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin}
@media(max-width:940px){.rail{position:static;max-height:none;overflow:visible}}
.rail h2{font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;color:var(--olive-700);
  font-weight:600;margin-bottom:1.1em}
.rail ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.rail li{margin:0}
.rail a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;text-decoration:none;
  color:var(--ink);font-size:.93rem;font-weight:600;
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease-out)}
.rail a svg{width:17px;height:17px;color:var(--sage-700);flex:none;transition:color .25s var(--ease)}
.rail a:hover{background:var(--sage-100);transform:translateX(3px)}
.rail a.on{background:var(--ink);color:#fff}
.rail a.on svg{color:var(--sage)}
.rail .n{margin-left:auto;font-size:.8rem;color:var(--muted);font-weight:600}
.rail a.on .n{color:rgba(255,255,255,.72)}
.rail-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.rail-note>*:last-child{margin-bottom:0}
@media(max-width:940px){.rail-desk{display:none}}
.rail-mob{display:none}
@media(max-width:940px){.rail-mob{display:block}}
.count-line{font-size:.88rem;color:var(--muted);margin:0 0 18px}

/* ---------------------------------------------------------------- product page */
.pdp{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:880px){.pdp{grid-template-columns:1fr}}
.gal{position:sticky;top:calc(var(--hdr-h) + 24px)}
@media(max-width:880px){.gal{position:static}}
.gal-main{border-radius:var(--r-xl);overflow:hidden;background:var(--sage-100);aspect-ratio:1/1;box-shadow:var(--shadow)}
.gal-main img{width:100%;height:100%;object-fit:cover;animation:fadein .4s var(--ease-out)}
@keyframes fadein{from{opacity:.35}to{opacity:1}}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.thumbs button{padding:0;border:2px solid transparent;border-radius:13px;overflow:hidden;background:var(--sage-100);
  cursor:pointer;aspect-ratio:1/1;opacity:.72;
  transition:border-color .3s var(--ease),opacity .3s var(--ease),transform .3s var(--ease-out)}
.thumbs button:hover{transform:translateY(-2px)}
.thumbs button:hover,.thumbs button[aria-current="true"]{border-color:var(--sage-600);opacity:1}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pdp .price{font-size:1.55rem;white-space:normal}
.pdp-meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}
.pblock{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.pblock>*:last-child{margin-bottom:0}
.pblock h2{font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;color:var(--olive-700);
  font-weight:600;margin-bottom:.75em}
.specs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px;padding:0;list-style:none}
.specs li{background:var(--sage-100);border-radius:13px;padding:10px 16px;font-size:.86rem;color:var(--olive-900)}
.specs b{display:block;font-family:'Signika',sans-serif;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--olive-700);font-weight:600;margin-bottom:2px}

/* ---------------------------------------------------------------- doc layout */
.doc{display:grid;grid-template-columns:272px 1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:940px){.doc{grid-template-columns:1fr;gap:28px}}
.doc-aside{position:sticky;top:calc(var(--hdr-h) + 24px)}
@media(max-width:940px){.doc-aside{position:static}}
.doc-aside h2{font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;color:var(--olive-700);
  font-weight:600;margin-bottom:1.1em}
.toc{list-style:none;padding:0 6px 0 0;margin:0;display:grid;gap:1px;max-height:min(58vh,520px);overflow:auto}
.toc li{margin:0}
@media(max-width:940px){.toc{max-height:none;overflow:visible;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.toc a{display:block;padding:7px 12px;border-radius:9px;text-decoration:none;color:var(--body);
  font-size:.89rem;line-height:1.42;border-left:2px solid transparent;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.toc a:hover{background:var(--sage-100);color:var(--sage-700)}
.toc a.on{border-left-color:var(--sage-600);color:var(--ink);font-weight:700;background:var(--sage-100)}
.doc-note{margin-top:22px;background:var(--sage-100);border:1px solid var(--sage-200);border-radius:var(--r);
  padding:16px 18px;font-size:.88rem;color:var(--olive-900)}
.doc-note>*:last-child{margin-bottom:0}
.doc-body h2{scroll-margin-top:calc(var(--hdr-h) + 24px)}
.doc-body .prose{max-width:78ch}

/* accordion */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hdr-h) + 24px)}
.acc summary{cursor:pointer;list-style:none;padding:20px 46px 20px 0;position:relative;
  font-family:'Signika',sans-serif;font-weight:600;color:var(--ink);font-size:1.03rem;
  transition:color .25s var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--sage-700)}
.acc summary::after{content:"";position:absolute;right:10px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--sage-600);border-bottom:2px solid var(--sage-600);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease-out)}
.acc details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.acc .acc-body{padding:0 0 22px;color:var(--body);animation:slidein .35s var(--ease-out)}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acc .acc-body>*:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- prose */
.prose{max-width:74ch}
.prose>*:first-child{margin-top:0}
.prose>*:last-child{margin-bottom:0}
.prose h2{margin-top:2em;font-size:clamp(1.3rem,2.3vw,1.7rem)}
.prose h3{margin-top:1.6em;font-size:1.16rem}
.prose img{border-radius:var(--r);margin:1.8em 0;box-shadow:var(--shadow)}
/* a captioned photograph inside an article */
.prose-fig{margin:2em 0;max-width:360px}
.prose-fig img{margin:0;display:block;width:100%;height:auto}
.prose-fig figcaption{margin-top:.7em;font-size:.87rem;color:var(--muted);line-height:1.5}
.prose blockquote{margin:1.8em 0;padding:4px 0 4px 22px;border-left:3px solid var(--sage);
  color:var(--ink);font-size:1.05rem}

/* ---------------------------------------------------------------- forms */
.form{display:grid;gap:16px}
.field label{display:block;font-weight:700;font-size:.88rem;color:var(--ink);margin-bottom:6px}
.field input,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:13px;background:var(--white);
  padding:13px 15px;font:inherit;font-size:.97rem;color:var(--ink);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--sage-600);box-shadow:0 0 0 4px var(--sage-100)}
.field textarea{min-height:150px;resize:vertical}
.g2f{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.g2f{grid-template-columns:1fr}}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.contact-list li{display:flex;gap:14px;align-items:flex-start;margin:0}
.contact-list .ico{margin:0;width:44px;height:44px}
.contact-list b{display:block;font-family:'Signika',sans-serif;color:var(--ink);font-size:.95rem;font-weight:600}
.contact-list a{color:var(--body);text-decoration:none}
.contact-list a:hover{color:var(--sage-700);text-decoration:underline}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--ink);color:#C6D0C8;padding-block:clamp(52px,6vw,76px) 28px}
.ftr-h{color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1.25em;
  font-weight:600;font-family:'Signika',sans-serif}
.ftr a{color:#C6D0C8;text-decoration:none;transition:color .25s var(--ease)}
.ftr a:hover{color:var(--sage)}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,52px)}
@media(max-width:880px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.ftr-grid{grid-template-columns:1fr}}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.93rem}
.ftr li{margin:0}
.ftr p{font-size:.93rem;color:#A9B5AD}
.ftr-mark{width:58px;height:58px;color:var(--sage);margin-bottom:14px}
.ftr-name{font-family:'Signika',sans-serif;font-size:1.26rem;color:#fff;font-weight:600;margin:0 0 10px}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:13px;display:grid;
  place-items:center;transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease-out)}
.social a:hover{background:var(--sage-700);border-color:var(--sage-700);transform:translateY(-3px)}
.social svg{width:19px;height:19px}
.ftr-bot{margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;
  flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:.85rem;color:#98A49B}
.ftr-bot p{margin:0;font-size:.85rem}
.ftr-bot ul{display:flex;gap:20px;flex-wrap:wrap;font-size:.85rem}

/* ---------------------------------------------------------------- motion */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){
  .rv,.rv-d1,.rv-d2,.rv-d3{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .btn:hover,.card:hover,.feat:hover,.tile:hover,.pill:hover,.chip:hover{transform:none}
}
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .2s var(--ease) both}
  ::view-transition-new(root){animation:vtIn .3s var(--ease-out) both}
  @keyframes vtOut{to{opacity:0}}
  @keyframes vtIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ---------------------------------------------------------------- misc */
.e404{min-height:56vh;display:grid;place-items:center;text-align:center;padding-block:var(--sp)}
.notice{background:var(--sage-100);border:1px solid var(--sage-200);border-radius:var(--r);
  padding:18px 22px;font-size:.94rem;color:var(--olive-900)}
.notice>*:last-child{margin-bottom:0}
.empty{grid-column:1/-1;padding:46px 0;text-align:center;color:var(--muted)}
[hidden]{display:none!important}

/* blog post */
.post-meta{font-size:.86rem;color:var(--muted);margin:10px 0 0;font-weight:600;letter-spacing:.04em}


/* ---------------------------------------------------------------- cart + checkout */
.cart-lay{display:grid;grid-template-columns:1fr 380px;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:940px){.cart-lay{grid-template-columns:1fr}}
.cart-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.cart-list li{display:grid;grid-template-columns:88px 1fr auto;gap:18px;align-items:center;margin:0;
  padding:20px 0;border-bottom:1px solid var(--line)}
.cart-list .thumb{width:88px;height:88px;border-radius:14px;overflow:hidden;background:var(--sage-100)}
.cart-list .thumb img{width:100%;height:100%;object-fit:cover}
.cart-list h3{font-size:1.02rem;margin:0 0 3px}
.cart-list h3 a{color:var(--ink);text-decoration:none}
.cart-list h3 a:hover{color:var(--sage-700)}
.cart-list .variant{font-size:.85rem;color:var(--muted);margin:0}
.cart-list .line-price{font-family:'Signika',sans-serif;font-weight:600;color:var(--ink);white-space:nowrap}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;
  overflow:hidden;margin-top:10px;background:var(--white)}
.qty button{width:34px;height:34px;border:0;background:none;cursor:pointer;color:var(--ink);
  display:grid;place-items:center;transition:background-color .22s var(--ease)}
.qty button:hover{background:var(--sage-100);color:var(--sage-700)}
.qty svg{width:14px;height:14px}
.qty input{width:38px;height:34px;border:0;text-align:center;font:inherit;font-weight:700;
  font-size:.92rem;color:var(--ink);background:none;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.remove{background:none;border:0;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;
  gap:6px;font:inherit;font-size:.83rem;padding:6px 0;margin-top:6px;
  transition:color .25s var(--ease)}
.remove:hover{color:#8C3B3B}
.remove svg{width:15px;height:15px}
.mini li{grid-template-columns:56px 1fr auto;gap:12px;padding:14px 0}
.mini .thumb{width:56px;height:56px;border-radius:11px}
.mini h3{font-size:.92rem}
.mini .qty,.mini .remove{display:none}
.summary{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,30px);position:sticky;top:calc(var(--hdr-h) + 22px)}
@media(max-width:940px){.summary{position:static}}
.summary h2{font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;color:var(--olive-700);
  font-weight:600;margin-bottom:1.1em}
.sum-rows{margin:0;padding:16px 0 0;border-top:1px solid var(--line-soft)}
.sum-rows div{display:flex;justify-content:space-between;gap:14px;margin:0 0 9px}
.sum-rows dt{color:var(--muted);font-size:.93rem}
.sum-rows dd{margin:0;font-weight:700;color:var(--ink);font-size:.95rem}
.sum-total{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  margin:14px 0 6px;padding-top:14px;border-top:1px solid var(--line);
  font-family:'Signika',sans-serif;font-weight:600;color:var(--ink);font-size:1.28rem}
.ship-note{font-size:.85rem;color:var(--sage-700);margin:0 0 18px;min-height:1.2em}
.trust{list-style:none;padding:16px 0 0;margin:18px 0 0;border-top:1px solid var(--line-soft);
  display:grid;gap:10px;font-size:.86rem;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:9px;margin:0}
.trust svg{width:17px;height:17px;color:var(--sage-600);flex:none}
.cart-empty{text-align:center;max-width:520px;margin-inline:auto;padding-block:clamp(20px,4vw,48px)}
.cart-empty .ico{width:64px;height:64px;border-radius:20px;margin:0 auto 22px}
.cart-empty .ico svg{width:30px;height:30px}
.pay-notice{margin:6px 0 22px}
.checkout-form fieldset{border:0;padding:0;margin:0 0 8px}
.checkout-form legend{font-family:'Signika',sans-serif;font-weight:600;color:var(--ink);font-size:1.14rem;
  padding:0;margin:0 0 16px}
.checkout-form fieldset+fieldset{margin-top:30px;padding-top:30px;border-top:1px solid var(--line)}
.g3f{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:16px}
@media(max-width:640px){.g3f{grid-template-columns:1fr}}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:200;
  background:var(--ink);color:#fff;border-radius:999px;padding:13px 24px;font-size:.92rem;font-weight:700;
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;display:flex;align-items:center;gap:10px;
  transition:opacity .3s var(--ease),transform .35s var(--ease-out),visibility .3s;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast svg{width:17px;height:17px;color:var(--sage)}
.toast a{color:var(--sage);text-decoration:underline;font-weight:700}

/* ---------------------------------------------------------------- auth */
.auth{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);align-items:start}
@media(max-width:860px){.auth{grid-template-columns:1fr}}
.auth-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,38px)}
.auth-card h2{font-size:1.4rem;margin-bottom:.9em}
.pw{position:relative;display:flex}
.pw input{padding-right:48px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border:0;background:none;cursor:pointer;color:var(--muted);display:grid;place-items:center;
  border-radius:10px;transition:color .25s var(--ease),background-color .25s var(--ease)}
.pw-toggle:hover{color:var(--sage-700);background:var(--sage-100)}
.pw-toggle svg{width:19px;height:19px}
.meter{height:4px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:9px}
.meter span{display:block;height:100%;width:0;background:var(--sage-600);border-radius:3px;
  transition:width .35s var(--ease),background-color .35s var(--ease)}
.meter.w1 span{width:33%;background:#B4794F}
.meter.w2 span{width:66%;background:var(--olive)}
.meter.w3 span{width:100%;background:var(--sage-600)}

/* ---------------------------------------------------------------- form validation */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none}
.req{color:#8C3B3B;font-weight:700}
.hint{font-size:.82rem;color:var(--muted);margin:7px 0 0}
.err{font-size:.83rem;color:#8C3B3B;margin:7px 0 0;min-height:0;font-weight:600}
.err:empty{margin:0}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{
  border-color:#B45B5B;box-shadow:0 0 0 4px rgba(180,91,91,.1)}
.field select{width:100%;border:1.5px solid var(--line);border-radius:13px;background:var(--white);
  padding:13px 15px;font:inherit;font-size:.97rem;color:var(--ink);appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6A5F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6.4 9.4 5.6 5.4 5.6-5.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field select:focus{outline:none;border-color:var(--sage-600);box-shadow:0 0 0 4px var(--sage-100)}
.form-status{margin:16px 0 0;font-size:.92rem;font-weight:600;min-height:1.2em}
.form-status.ok{color:var(--sage-700)}
.form-status.bad{color:#8C3B3B}
.form-note{font-size:.84rem;color:var(--muted);margin:14px 0 0;display:flex;align-items:flex-start;gap:8px}
.form-note svg{width:15px;height:15px;color:var(--sage-600);flex:none;margin-top:3px}

/* ---------------------------------------------------------------- instagram */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.2vw,14px)}
@media(max-width:900px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
.ig-grid a,.ig-grid .ig-cell{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--r);
  overflow:hidden;background:var(--sage-100);text-decoration:none}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.ig-grid a:hover img{transform:scale(1.06)}
.ig-grid a::after{content:"";position:absolute;inset:0;background:rgba(20,24,18,.28);opacity:0;
  transition:opacity .3s var(--ease)}
.ig-grid a:hover::after{opacity:1}
.ig-badge{position:absolute;right:9px;bottom:9px;z-index:2;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--ink);opacity:0;
  transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease-out)}
.ig-grid a:hover .ig-badge{opacity:1;transform:none}
.ig-badge svg{width:15px;height:15px}
.ig-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;
  margin-bottom:var(--sp-h)}
.ig-head>div>*:last-child{margin-bottom:0}

/* the marks add height of their own, so the hero no longer needs the extra foot */
.hero-in{padding-bottom:clamp(52px,6vw,80px)}

/* account: one panel at a time, with a plain switch beneath */
.auth-single{max-width:560px;margin-inline:auto}
.auth-switch{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:.94rem;color:var(--muted);text-align:center}
.linkish{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--sage-700);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  transition:color .25s var(--ease)}
.linkish:hover{color:var(--olive-700)}
.auth-card{animation:authin .4s var(--ease-out)}
@keyframes authin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.auth-card{animation:none}}

/* instagram: two rows of six */
.ig-grid{grid-template-rows:repeat(2,1fr)}
@media(max-width:900px){.ig-grid{grid-template-rows:repeat(4,1fr)}}
@media(max-width:520px){.ig-grid{grid-template-rows:repeat(6,1fr)}}
.ig-note{font-size:.84rem;color:var(--muted);margin:18px 0 0;text-align:center}

/* ---------------------------------------------------------------- round four */

/* hero: one photograph, one frame, exactly the treatment used across the site.
   Side by side the photograph fills the column, so the two halves finish level
   and no empty band is left under either one. */
.hero-figwrap{position:relative}
.hero-fig{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:3/2;background:var(--sand)}
.hero-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.hero-fig:hover img{transform:scale(1.045)}
@media(min-width:881px){
  .hero-in{align-items:stretch}
  .hero-figwrap{display:flex;align-self:stretch}
  .hero-fig{flex:1;aspect-ratio:auto;min-height:440px}
}
@media(max-width:880px){.hero-fig{aspect-ratio:4/3}}

/* her four marks, under the hero copy */
/* her four marks, sitting under the hero copy */
.badges{list-style:none;padding:26px 0 0;margin:30px 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,38px);align-items:center}
.badges li{margin:0;display:grid;place-items:center}
.badges img{width:auto;max-width:100%;max-height:64px;object-fit:contain;opacity:.82;
  transition:transform .45s var(--ease-out),opacity .45s var(--ease)}
.badges li:hover img{transform:translateY(-3px);opacity:1}
@media(max-width:560px){.badges{gap:20px;padding-top:22px;margin-top:24px}
  .badges img{max-height:50px}}

/* the community note above the feed */
.ig-invite{display:flex;align-items:center;gap:16px;margin-top:18px}
.ig-invite img{width:72px;height:auto;flex:none}
.ig-invite p{margin:0;font-size:clamp(1rem,1.4vw,1.1rem);color:var(--body);max-width:48ch}
@media(max-width:520px){.ig-invite{gap:13px}.ig-invite img{width:60px}}

/* shop: three across beside the rail */
.shop-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.shop-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:390px){.shop-grid{grid-template-columns:1fr}}
.shop-grid .card-body h2{min-height:0}



/* ---------------------------------------------------------------- round six */

/* product page: give the buying controls room to breathe */
.pdp .price{display:block;margin-bottom:4px}
.pdp-meta{margin:18px 0 24px}
.buy{margin-top:clamp(26px,3vw,34px)}
.buy .chips{margin:0 0 18px}
.buy .btn{margin:0}
.buy-note{font-size:.86rem;color:var(--muted);margin:16px 0 0;line-height:1.6}
.pdp .pblock{margin-top:clamp(30px,3.4vw,38px);padding-top:clamp(26px,3vw,32px)}
.pdp .specs{margin:0 0 24px}
.pdp p{margin-bottom:1.15em}
.pdp .ticks li{margin:.7em 0}




/* full product copy carried over from the original pages */
.pcopy>*:last-child{margin-bottom:0}
.pcopy p{margin:0 0 1em}
.pcopy ul{margin:0 0 1em;padding-left:1.15em}
.pcopy li{margin:.35em 0}
.pcopy strong{color:var(--ink)}

/* product card: the second photograph on hover, as the original did */
.card-back{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .55s var(--ease)}
.card-back picture,.card-back img{width:100%;height:100%;object-fit:cover;display:block}
.card.has-swap:hover .card-back,.card.has-swap:focus-within .card-back{opacity:1}
.card.has-swap:hover .card-media>picture img{transform:scale(1.055)}
.card-back img{transition:transform .8s var(--ease-out)}
.card.has-swap:hover .card-back img{transform:scale(1.055)}
@media(prefers-reduced-motion:reduce){
  .card-back{transition:none}
  .card.has-swap:hover .card-back img,.card.has-swap:hover .card-media>picture img{transform:none}
}
@media(hover:none){.card-back{display:none}}

/* the frame must never be clipped: it wraps the image, it is not the image */
.post-hero-wrap{margin:0 0 var(--sp-h);position:relative}
.post-hero{display:block;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:16/9;background:var(--sand);margin:0}
.post-hero img{width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.post-hero{aspect-ratio:4/3}}
.attrs{margin:0;display:grid;gap:10px}
.attrs div{display:flex;gap:14px;justify-content:space-between;padding-bottom:9px;
  border-bottom:1px solid var(--line-soft)}
.attrs div:last-child{border-bottom:0;padding-bottom:0}
.attrs dt{color:var(--muted);font-size:.93rem}
.attrs dd{margin:0;color:var(--ink);font-weight:600;font-size:.93rem;text-align:right}


/* visible to a screen reader, not on the page */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* ---------------------------------------------------------------- search */
.srch-btn{display:grid;place-items:center;width:38px;height:38px;border:0;background:none;
  color:var(--ink);cursor:pointer;border-radius:50%;transition:background .25s var(--ease)}
.srch-btn:hover{background:var(--sage-100)}
.srch-btn svg{width:20px;height:20px}
.srch-panel{border-top:1px solid var(--line-soft);background:var(--white);
  box-shadow:0 18px 40px -28px rgba(34,38,31,.4)}
.srch-wrap{position:relative;padding:14px 0 16px}
.srch-form{display:flex;align-items:center;gap:10px;background:var(--sand);
  border:1px solid var(--line);border-radius:999px;padding:8px 10px 8px 16px}
.srch-form:focus-within{border-color:var(--sage-600);background:var(--white)}
.srch-ico{display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
.srch-ico svg{width:18px;height:18px}
.srch-form input{flex:1;border:0;background:none;font:inherit;font-size:1rem;color:var(--ink);
  padding:6px 0;min-width:0}
.srch-form input:focus{outline:none}
.srch-form input::placeholder{color:var(--muted)}
.srch-close{display:grid;place-items:center;width:34px;height:34px;border:0;background:none;
  color:var(--muted);cursor:pointer;border-radius:50%;flex:0 0 auto}
.srch-close:hover{background:var(--sage-100);color:var(--ink)}
.srch-close svg{width:17px;height:17px}
.srch-pop{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:60;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:8px;max-height:min(60vh,460px);overflow:auto}
.srch-row{display:flex;align-items:center;gap:13px;padding:9px 11px;border-radius:12px;
  color:var(--ink);text-decoration:none;transition:background .18s var(--ease)}
.srch-row:hover,.srch-row.on{background:var(--sage-100)}
.srch-row img{width:44px;height:44px;border-radius:9px;object-fit:cover;flex:0 0 auto;background:var(--sand)}
.srch-dot{width:44px;height:44px;border-radius:9px;background:var(--sand);flex:0 0 auto;display:block}
.srch-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.srch-n{font-weight:600;font-size:.95rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-k{font-size:.79rem;color:var(--muted)}
.srch-none{margin:0;padding:16px 12px;color:var(--muted);font-size:.93rem}
.srch-all{display:block;margin-top:4px;padding:11px;text-align:center;font-weight:700;
  font-size:.88rem;color:var(--sage-700);border-top:1px solid var(--line-soft);text-decoration:none}
.srch-all:hover{color:var(--olive-700)}
@media(max-width:600px){.srch-pop{max-height:64vh}}

/* the full search page */
.srch-form#srchform{max-width:none;margin-bottom:18px}
#srchform{display:flex;gap:10px;align-items:center;background:var(--sand);
  border:1px solid var(--line);border-radius:999px;padding:7px 7px 7px 18px}
#srchform input{flex:1;border:0;background:none;font:inherit;font-size:1.02rem;padding:8px 0;min-width:0}
#srchform input:focus{outline:none}
#srchform .btn{flex:0 0 auto}
.srch-count{margin:0 0 18px;color:var(--muted);font-size:.94rem}
.srch-list{display:grid;gap:4px}
.srch-list .srch-row{padding:12px;border:1px solid transparent}
.srch-list .srch-row:hover{background:var(--sage-100);border-color:var(--line)}
.srch-list .srch-row img,.srch-list .srch-dot{width:54px;height:54px}

/* ---------------------------------------------------------------- coupons */
.coupon{margin:16px 0 18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.coupon-toggle{background:none;border:0;padding:0;font:inherit;font-size:.9rem;font-weight:600;
  color:var(--sage-700);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.coupon-toggle:hover{color:var(--olive-700)}
.coupon-box{margin-top:12px}
.coupon-row{display:flex;gap:8px}
.coupon-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;
  background:var(--white);padding:10px 12px;font:inherit;font-size:.94rem;color:var(--ink);
  text-transform:uppercase;letter-spacing:.04em}
.coupon-row input:focus{outline:2px solid var(--sage-600);outline-offset:1px;border-color:var(--sage-600)}
.coupon-row .btn{flex:0 0 auto;padding-inline:18px}
.coupon-msg{margin:9px 0 0;font-size:.86rem;color:var(--muted);min-height:1.2em}
.coupon-msg.good{color:var(--sage-700);font-weight:600}
.coupon-msg.bad{color:#8C3A2B}
#sumdiscrow dd,#ck_discrow dd{color:var(--sage-700);font-weight:600}
#sumcode,#ck_code{font-weight:600;color:var(--muted);font-size:.85em}
#sumgstrow dt,#ck_gstrow dt,#sumgstrow dd,#ck_gstrow dd{color:var(--muted);font-size:.9rem}

/* ================================================================ dashboard
   A separate application with its own shell. None of this loads on the shop. */
.ad-body{background:var(--sand);margin:0}
.ad-shell{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}

.ad-side{background:var(--ink);color:#DCE3D9;display:flex;flex-direction:column;
  padding:22px 16px;position:sticky;top:0;height:100vh}
.ad-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  padding:4px 10px 20px;font-family:'Signika',sans-serif;font-weight:600;font-size:1.1rem}
.ad-brand svg{width:26px;height:26px;color:var(--sage);flex:0 0 auto}
.ad-navs{display:flex;flex-direction:column;gap:2px;flex:1}
.ad-nav{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;
  font:inherit;font-size:.93rem;font-weight:600;color:#B9C4B4;text-align:left;
  padding:10px 12px;border-radius:10px;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease)}
.ad-nav svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.ad-nav:hover{background:rgba(255,255,255,.07);color:#fff}
.ad-nav.on{background:var(--sage-700);color:#fff}
.ad-nav.on svg{opacity:1}
.ad-foot{border-top:1px solid rgba(255,255,255,.12);padding-top:14px;margin-top:14px}
.ad-who{margin:0 0 10px;font-size:.78rem;color:#98A493;line-height:1.45;word-break:break-word}
.ad-out{display:block;font-size:.82rem;color:#B9C4B4;text-decoration:none;padding:4px 0}
.ad-out:hover{color:#fff;text-decoration:underline}

.ad-main{padding:34px clamp(20px,3vw,48px) 80px;max-width:1560px;width:100%;min-width:0}
.ad-h{margin:0}
.ad-h h1{margin:0;font-size:clamp(1.5rem,2.6vw,2rem)}
.ad-h p{margin:6px 0 0;color:var(--muted);font-size:.95rem}

.ad-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ad-stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.ad-stat span{display:block;font-size:.78rem;color:var(--muted)}
.ad-stat b{display:block;margin-top:6px;font-family:'Signika',sans-serif;font-size:1.5rem;color:var(--ink)}
@media(max-width:900px){.ad-stats{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------------- the sales chart
   One series, so no legend: the heading names it. The grid is recessive,
   the line carries the colour, and the figures are available as a table
   for anyone who cannot hover. */
.ad-chartcard{padding-bottom:20px}
.ad-charthead{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:14px}
.ad-charthead h2{margin:0 0 4px;font-size:1.05rem}
.ad-charthead .ad-hint{margin:0}
.ad-chart{position:relative}
.ad-chart svg{display:block;width:100%;height:auto;overflow:visible}
.ad-chart text{font-family:'Karla',system-ui,sans-serif}
.ad-cross,.ad-dot{pointer-events:none;transition:opacity .12s ease}
.ad-tip{position:absolute;top:0;transform:translateX(-50%);pointer-events:none;
  background:var(--ink);color:#fff;border-radius:9px;padding:8px 11px;
  font-size:.8rem;line-height:1.45;white-space:nowrap;
  box-shadow:0 6px 18px rgba(34,38,31,.22)}
.ad-tip.flip{transform:translateX(-100%)}
.ad-tip b{display:block;font-weight:600;opacity:.72;font-size:.74rem;letter-spacing:.02em}
.ad-tip span{display:block;opacity:.72;font-size:.74rem}
#ch_table .ad-tablewrap{margin-top:18px}
#ch_table .ad-note{margin:18px 0 0}
@media(max-width:700px){
  .ad-charthead{flex-direction:column;gap:10px}
}

.ad-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px}
.ad-card h2{margin:0 0 16px;font-size:1.05rem}
.ad-card h2+.ad-grid{margin-top:0}
.ad-card h2:not(:first-child){margin-top:26px}
.ad-explain p{margin:0 0 10px;color:var(--body);font-size:.93rem;line-height:1.6}
.ad-explain p:last-child{margin:0}

.ad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ad-grid>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.ad-wide{grid-column:1/-1}
.ad-grid label{font-size:.8rem;font-weight:700;color:var(--muted)}
.ad-grid input,.ad-grid select,.ad-grid textarea,.ad-bar input,.ad-bar select{
  font:inherit;font-size:.94rem;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--white);color:var(--ink);width:100%}
.ad-grid textarea{resize:vertical;line-height:1.6;font-size:.92rem}
.ad-grid input:focus,.ad-grid select:focus,.ad-grid textarea:focus,
.ad-bar input:focus,.ad-bar select:focus{outline:2px solid var(--sage-600);outline-offset:1px}
.ad-check label{display:flex;align-items:center;gap:9px;font-size:.95rem;font-weight:600;color:var(--ink)}
.ad-check input{width:17px;height:17px;accent-color:var(--sage-700)}
/* A checkbox and its words, whether the class sits on the label or around it. */
label.ad-check{display:flex;align-items:center;gap:9px;font-size:.95rem;
  font-weight:600;color:var(--ink);cursor:pointer}
label.ad-check input{width:17px;height:17px;accent-color:var(--sage-700);flex:none}
.ad-hint{margin:4px 0 0;font-size:.83rem;color:var(--muted);line-height:1.55}
.ad-hint code{background:var(--sand);border-radius:5px;padding:1px 5px;font-size:.86em}
@media(max-width:980px){.ad-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ad-grid{grid-template-columns:1fr}}

.ad-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.ad-btn{border:0;background:var(--ink);color:#fff;font:inherit;font-weight:700;font-size:.92rem;
  padding:11px 20px;border-radius:999px;cursor:pointer;transition:background .2s var(--ease)}
.ad-btn:hover{background:var(--sage-700)}
.ad-btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.ad-btn.ghost:hover{background:var(--sand);color:var(--ink)}
.ad-msg{margin:0;font-size:.88rem;color:var(--muted)}
.ad-msg.good{color:var(--sage-700)}
.ad-msg.bad{color:#9B3B26}
/* The reply to a row action belongs beside the row, not up at the form. */
#i_rowmsg{margin:12px 0 0}
#i_rowmsg:empty{display:none}

.ad-bar{display:flex;flex-wrap:wrap;gap:10px}
.ad-bar select{width:auto;min-width:170px}
.ad-bar input{flex:1;min-width:200px}

.ad-tablewrap{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow-x:auto}
.ad-table{width:100%;border-collapse:collapse;font-size:.93rem}
.ad-table th{text-align:left;font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:14px 16px;border-bottom:1px solid var(--line);
  white-space:nowrap}
.ad-table td{padding:14px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.ad-table tr:last-child td{border-bottom:0}
.ad-table tbody tr:hover td{background:var(--sage-100)}
.ad-table .num{text-align:right;white-space:nowrap}
.ad-sub{display:block;font-size:.8rem;color:var(--muted);margin-top:3px}
.ad-link{border:0;background:none;font:inherit;font-size:.86rem;font-weight:700;
  color:var(--sage-700);cursor:pointer;padding:2px 4px;border-radius:6px}
.ad-link:hover{text-decoration:underline}
.ad-link.danger{color:#9B3B26}
.ad-pill{display:inline-block;font-size:.73rem;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--sand);color:var(--olive-900);border:1px solid var(--line);white-space:nowrap}
.ad-pill.s-paid{background:#E7F1EA;border-color:#BFD9CB;color:#2E5341}
.ad-pill.s-shipped,.ad-pill.s-collected{background:var(--sage-100);border-color:var(--sage-200)}
.ad-pill.s-cancelled,.ad-pill.s-refunded{background:#F5EDE9;border-color:#E3D2C9;color:#6B4636}
.ad-empty{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:38px 30px;text-align:center;color:var(--muted)}
.ad-empty b{display:block;color:var(--ink);margin-bottom:6px}
.ad-empty p{margin:0}
.ad-note{color:var(--muted);font-size:.93rem;padding:18px 0}
.ad-todo{margin:0;padding-left:1.15em;color:var(--body);font-size:.94rem;line-height:1.7}
.ad-good{margin:0;color:var(--sage-700);font-weight:600}
.ad-gw{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ad-gw .ad-card{margin:0}
.ad-gwcard h2{margin-bottom:10px}
.ad-gwcard .ad-sub{margin-top:10px;line-height:1.55}
@media(max-width:900px){.ad-gw{grid-template-columns:1fr}}

.ad-drawer{position:fixed;inset:0;background:rgba(34,38,31,.42);z-index:200;display:flex;
  justify-content:flex-end;animation:adfade .2s var(--ease-out)}
@keyframes adfade{from{opacity:0}to{opacity:1}}
.ad-drawer-in{background:var(--cream);width:min(560px,100%);height:100%;overflow:auto;
  padding:28px;box-shadow:var(--shadow-lg);animation:adslide .3s var(--ease-out)}
@keyframes adslide{from{transform:translateX(24px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.ad-drawer,.ad-drawer-in{animation:none}}
.ad-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ad-drawer-head h2{margin:0;font-size:1.3rem}
.ad-x{border:0;background:none;font-size:1.7rem;line-height:1;color:var(--muted);cursor:pointer;
  padding:0 6px;border-radius:8px}
.ad-x:hover{color:var(--ink)}
.ad-drawer-in h3{margin:26px 0 10px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ad-items{list-style:none;margin:0;padding:0}
.ad-items li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line-soft);font-size:.93rem}
.ad-tot{margin:16px 0 0;display:grid;gap:8px}
.ad-tot div{display:flex;justify-content:space-between;gap:14px;font-size:.93rem}
.ad-tot dt{color:var(--muted)}
.ad-tot dd{margin:0;font-weight:600}
.ad-tot .tot{border-top:1px solid var(--line);padding-top:10px;font-size:1.05rem}
.ad-addr{background:var(--sand);border-radius:10px;padding:12px 14px;font-size:.92rem;margin:10px 0 0}

@media(max-width:820px){
  .ad-shell{grid-template-columns:1fr}
  .ad-side{position:static;height:auto;padding:16px}
  .ad-navs{flex-direction:row;flex-wrap:wrap;gap:6px}
  .ad-nav{width:auto;padding:9px 13px}
  .ad-nav span{font-size:.88rem}
  .ad-brand{padding-bottom:14px}
  .ad-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
  .ad-who{margin:0}
  .ad-main{padding:26px 20px 60px}
}

/* email editor: form on one side, live preview on the other */
/* The form takes what it needs and no more. The preview takes the rest, because
   an email is 600px wide and it should be readable without scrolling it. */
.ad-split{display:grid;grid-template-columns:minmax(400px,1fr) minmax(430px,700px);gap:26px;align-items:start}
.ad-two{grid-template-columns:repeat(2,1fr)}
.ad-preview{position:sticky;top:26px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px}
.ad-prevhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.ad-prevhead h2{margin:0;font-size:1.05rem}
.ad-preview #e_subjline{margin:0 0 12px}
.ad-prevtools{display:flex;gap:8px;flex-shrink:0}
/* The email is drawn at its real width and then scaled down to fit the panel,
   so the whole of it is in view without scrolling inside the frame. */
.ad-prevbox{position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:12px;background:var(--sand);height:calc(100vh - 214px);min-height:560px}
.ad-prevbox iframe{position:absolute;top:0;left:0;border:0;display:block;
  transform-origin:top left;background:var(--sand)}
.ad-prevbox.actual{overflow:auto}
.ad-prevbox.actual iframe{position:relative;width:100%;height:1040px;transform:none}
@media(max-width:1240px){
  .ad-split{grid-template-columns:1fr}
  .ad-preview{position:static}
  .ad-prevbox{height:640px;min-height:0}
}
.ad-steps{margin:0;padding-left:1.25em;color:var(--body);font-size:.94rem;line-height:1.75}
.ad-steps li{margin:0 0 8px}
.ad-steps code{background:var(--sand);border-radius:5px;padding:2px 6px;font-size:.88em}
.ad-steps a{color:var(--sage-700);font-weight:600}
.ad-samples{border-style:dashed}
.cur-note{margin:10px 0 0;font-size:.82rem;color:var(--muted)}

/* the example-orders card is a tool, not part of the list: give it room */
.ad-pill.s-sample{background:#EFEAF6;border-color:#D9CFE8;color:#4B3B63}

/* ------------------------------------------------------------- products
   One card per product, so a price and a count are saved together and it is
   always clear which product a field belongs to. */
/* A card is shut by default and opens to one column of blocks spaced by the
   card itself, so every gap inside it is the same 20px and nothing depends on
   a field happening to carry a hint under it. */
.ad-product{padding:0;overflow:hidden}
.ad-prod{border-radius:var(--r-lg)}
.ad-prodhead{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto 16px;
  align-items:center;gap:16px;padding:18px 24px;cursor:pointer;list-style:none;
  border-radius:var(--r-lg)}
.ad-prodhead::-webkit-details-marker{display:none}
.ad-prodhead:focus-visible{outline:2px solid var(--sage-600);outline-offset:-2px}
/* Hovering lifts the card rather than filling it. Painting the row with the
   page colour made it read as a hole cut in the card, which is the opposite
   of what a hover should say. */
/* Colour and shadow only. Nudging the card up on hover moved it a pixel, which
   made the gaps between rows uneven exactly while you were looking at them. */
.ad-product{transition:box-shadow .2s var(--ease-out),border-color .2s var(--ease-out)}
.ad-product:has(.ad-prodhead:hover){border-color:var(--sage-200);box-shadow:var(--shadow)}
.ad-prodhead:hover .ad-prodname b{color:var(--sage-700)}
.ad-prodhead:hover .ad-chev{border-color:var(--sage-700)}
.ad-prodhead:hover .ad-prodnum{color:var(--sage-700)}
/* An open card keeps its own colour and is marked by a sage edge instead, so
   the one you are working in is obvious without a second background. */
.ad-product:has(.ad-prod[open]){border-color:var(--sage-200);box-shadow:var(--shadow)}
.ad-prod[open]{position:relative}
.ad-prod[open]::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--sage-600)}
.ad-prod[open] .ad-prodname b{color:var(--ink)}
.ad-prodnum{font-family:'Signika',sans-serif;font-weight:600;font-size:.9rem;
  color:var(--muted);text-align:right;transition:color .2s var(--ease-out)}
.ad-prodname b{transition:color .2s var(--ease-out)}
@media(prefers-reduced-motion:reduce){
  .ad-product,.ad-prodnum,.ad-prodname b{transition:none}
}
.ad-prodname{display:flex;flex-direction:column;gap:2px;min-width:0}
.ad-prodname b{font-family:'Signika',sans-serif;font-size:1.02rem;color:var(--ink)}
.ad-prodname .ad-quiet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-prodsum{font-family:'Signika',sans-serif;font-weight:600;color:var(--ink);
  font-size:.95rem;white-space:nowrap}
.ad-prodhead .ad-pill{flex:none}
/* the chevron turns rather than swapping character, so nothing jumps */
.ad-chev{width:10px;height:10px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);
  transition:transform .18s var(--ease-out);justify-self:center;margin-top:-4px}
.ad-prod[open] .ad-chev{transform:rotate(225deg);margin-top:2px}
.ad-prod[open] .ad-prodhead{border-bottom:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0}
.ad-prodbody{display:flex;flex-direction:column;gap:20px;padding:22px 24px 24px}
.ad-prodbody>*{margin:0}
@media(prefers-reduced-motion:reduce){.ad-chev{transition:none}}
@media(max-width:820px){
  .ad-prodhead{grid-template-columns:26px minmax(0,1fr) 16px;row-gap:8px}
  .ad-prodsum,.ad-prodhead .ad-pill{grid-column:2}
}
.ad-grid.ad-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ad-grid.ad-four{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Running low is a warning, so it wears a warning colour rather than
   borrowing the one that means "this is an example order". */
.ad-pill.s-low{background:#FBF0DC;border-color:#EBD7AE;color:#7A5510}
.ad-switches{display:flex;flex-direction:column;gap:10px;justify-content:flex-end;
  padding-bottom:4px}
/* A number is read by its last digit, so line them up on the right. */
.ad-sizes input.ad-num{width:100%;max-width:132px;font:inherit;font-size:.94rem;
  padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--white);color:var(--ink);text-align:right}
.ad-sizes input.ad-num:focus{outline:2px solid var(--sage-600);outline-offset:1px}
.ad-sizes td{vertical-align:middle}
.ad-sizes label.ad-check{font-weight:500;font-size:.88rem;white-space:nowrap}
.ad-was{color:var(--muted);text-decoration-thickness:1px;margin-right:5px}
/* Rows in a list sit closer together than the sections of a screen do. Each
   level has one spacing and keeps to it. */
#pr_list{display:flex;flex-direction:column;gap:14px}
#pr_rowmsg{margin:0}
#pr_rowmsg:empty{display:none}
@media(max-width:1180px){.ad-grid.ad-four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.ad-grid.ad-three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ad-grid.ad-three,.ad-grid.ad-four{grid-template-columns:1fr}}
.ad-quiet{color:var(--muted);font-size:.86rem}

/* ------------------------------------------------- consistent panel rhythm
   Every block inside a section is spaced by the section, not by its own
   margins, so nothing depends on two elements happening to be siblings. */
.ad-panel{display:flex;flex-direction:column;gap:26px}
.ad-panel>*{margin:0}
.ad-panel .ad-h{margin-bottom:0}
.ad-split{margin:0}
.ad-split>div{display:flex;flex-direction:column;gap:26px}
.ad-samples{border-style:dashed}

/* ------------------------------------------------------------ colour picker */
.ad-colour{display:flex;flex-direction:column;gap:8px}
.ad-swatchrow{display:flex;align-items:center;gap:9px}
/* more specific than the generic .ad-grid input rule, which would otherwise
   stretch the picker to full width and give it text padding */
.ad-grid input.ad-swatch{width:48px;min-width:48px;height:42px;padding:3px;
  border:1px solid var(--line);border-radius:10px;background:var(--white);
  cursor:pointer;flex:0 0 auto;overflow:hidden}
.ad-grid input.ad-hex{flex:1 1 auto;width:auto;min-width:0}
.ad-swatch::-webkit-color-swatch-wrapper{padding:3px}
.ad-swatch::-webkit-color-swatch{border:0;border-radius:7px}
.ad-swatch::-moz-color-swatch{border:0;border-radius:7px}
.ad-hex{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9rem;text-transform:uppercase}
.ad-presets{display:flex;flex-wrap:wrap;gap:6px}
.ad-preset{width:24px;height:24px;border-radius:7px;border:1px solid rgba(34,38,31,.18);
  cursor:pointer;padding:0;transition:transform .15s var(--ease)}
.ad-preset:hover{transform:scale(1.14)}
.ad-preset.on{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--sage-700)}
.ad-brandbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.ad-brandbar p{margin:0;font-size:.86rem;color:var(--muted)}

/* ------------------------------------------------------- the thank you page */
.orderbox{max-width:640px;margin-inline:auto;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 34px;text-align:center}
.or_ref{margin:0 0 14px;font-size:.92rem;color:var(--muted);letter-spacing:.02em}
.or_ref b{display:block;margin-top:6px;font-family:'Signika',sans-serif;
  font-size:1.6rem;color:var(--ink);letter-spacing:0}
.orderbox p{margin:0;color:var(--body);line-height:1.75}
.or_acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
@media(max-width:560px){.orderbox{padding:26px 22px}.or_acts .btn{width:100%}}

/* A draft is labelled as a draft, plainly, at the top of the page. */
.draft-note{border-color:#EBD7AE;background:#FBF0DC;margin-bottom:30px}
.draft-note p{color:#5F430C}
.doc-date{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--muted)}