/* ===========================================================================
   NEW HOMEPAGE sections (features: newlook). GENERATED from server/adminmockup.html
   by build_real.py: every class is prefixed nx- and every rule scoped to
   "body.next .nx", so nothing here can touch, or be touched by, the shop's own CSS.
   Edit the mockup and rebuild rather than editing this by hand.
   =========================================================================== */
/* The old hero and category tiles give way to the new sections. */
body.next.nx-home #hero{display:none!important}
/* The stock category boxes (and the sub-category boxes a menu pick opens) belong to the
   shop grid: hidden while the new sections are showing, back as soon as the shopper
   picks from the menu, searches, or opens the grid. */
body.next.nx-bare:not(.nx-shopping):not(:has(#hero[hidden])) #categories{display:none}
/* A search or a filter hides the old hero (app.js sets [hidden] on it); the new
   sections follow it, so results sit at the top of the page as they do today. */
body.next .nx:has(~ #hero[hidden]){display:none}
/* The bare homepage shows the new sections and not the product grid; the grid takes
   over (and the sections step aside) once the shopper picks a menu category or searches. */
body.next.nx-bare:not(.nx-shopping):not(:has(#hero[hidden])) #shop{display:none}
body.next.nx-shopping .nx{display:none}
/* The new sections carry their own trust strip (under the hero), reviews and promises,
   so the page's stock copies step aside while the new sections are showing. */
body.next.nx-bare:not(.nx-shopping):not(:has(#hero[hidden])) > .trust,
body.next.nx-bare:not(.nx-shopping):not(:has(#hero[hidden])) #shop + section.sec,
body.next.nx-bare:not(.nx-shopping):not(:has(#hero[hidden])) .home-reviews{display:none}
/* Start from a clean slate inside the block: the shop's heading and paragraph rules
   (body.ama h2, body.ama p ...) would otherwise leak in. */
body.next .nx h1,body.next .nx h2,body.next .nx h3,body.next .nx p,body.next .nx figure,body.next .nx blockquote{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:normal;line-height:inherit;color:inherit}
body.next .nx{--ink:#252B36;--black:#141414;--line:#DBDFE6;--soft:#F6F6F6;--mute:#6E6E6E;--slate:#4A566D;--accent:#9C3B22;--gold:#b88f5e;--white:#fff;
--jost:Jost,'Helvetica Neue',Arial,sans-serif;--body:'Nunito Sans',system-ui,sans-serif;color-scheme:light}
body.next .nx *{box-sizing:border-box}
body.next .nx{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.next .nx a{color:inherit;text-decoration:none}
body.next .nx img{display:block;width:100%;height:100%;object-fit:cover}
body.next .nx .nx-wrap{max-width:1360px;margin:0 auto;padding-inline:24px}
body.next .nx .nx-eyebrow{font-family:var(--jost);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
body.next .nx h1,body.next .nx h2,body.next .nx h3{font-family:var(--jost);text-transform:uppercase;margin:0;text-wrap:balance}
body.next .nx h2{font-weight:400;letter-spacing:.06em;font-size:clamp(26px,3.2vw,44px);line-height:1.12}
body.next .nx .nx-head-row{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:flex-end;justify-content:space-between;margin-bottom:28px}
body.next .nx .nx-head-row>div{display:flex;flex-direction:column;gap:10px}
body.next .nx .nx-link{font-family:var(--jost);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px}
body.next .nx .nx-btn{display:inline-flex;align-items:center;min-height:50px;padding:0 38px;border-radius:2px;font-family:var(--jost);font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,color .2s}
body.next .nx .nx-btn:hover{transform:translateY(-2px)}
body.next .nx .nx-btn.nx-white{background:#fff;color:var(--ink);border-color:#fff}
body.next .nx .nx-btn.nx-ghost{color:#fff;border-color:#8A8A8A;padding:0 30px}
body.next .nx .nx-btn.nx-accent{background:var(--accent);color:#fff}
body.next .nx .nx-btn.nx-dark{background:var(--ink);color:#fff;width:100%;justify-content:center;min-height:46px;font-size:12px;letter-spacing:.14em}
body.next .nx a:focus-visible,body.next .nx button:focus-visible,body.next .nx input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.next .nx .nx-sec{padding-top:72px}
body.next .nx .nx-hero{background:var(--black);color:#fff;display:flex;flex-wrap:wrap;align-items:stretch;overflow:hidden}
body.next .nx .nx-hero .nx-tx{flex:1 1 340px;min-width:0;padding:72px clamp(24px,6vw,96px);display:flex;flex-direction:column;justify-content:center;gap:22px}
body.next .nx .nx-hero .nx-eb{font-family:var(--jost);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:#C9C9C9;display:flex;align-items:center;gap:12px}
body.next .nx .nx-hero .nx-eb::before{content:"";width:34px;height:1px;background:var(--accent)}
body.next .nx .nx-hero h1{font-weight:300;letter-spacing:.09em;font-size:clamp(30px,4.4vw,60px);line-height:1.1}
body.next .nx .nx-hero h1 em{font-style:normal;font-weight:500;color:#fff;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:.16em}
body.next .nx .nx-hero p{margin:0;font-weight:300;font-size:17px;color:#DADADA;max-width:34em}
body.next .nx .nx-hero .nx-cta{display:flex;flex-wrap:wrap;gap:12px;padding-top:6px}
body.next .nx .nx-hero .nx-ph{flex:1.25 1 380px;min-width:0;min-height:520px;position:relative;overflow:hidden}
body.next .nx .nx-hero .nx-ph img{position:absolute;inset:0;object-position:35% 10%;animation:nx-drift 18s ease-in-out infinite alternate}
@keyframes nx-drift{from{transform:scale(1)}to{transform:scale(1.07) translateX(-1.5%)}}
body.next .nx .nx-seal{position:absolute;right:22px;bottom:22px;width:118px;height:118px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-content:center;text-align:center;font-family:var(--jost);text-transform:uppercase;letter-spacing:.12em;font-size:10px;line-height:1.3;box-shadow:0 10px 30px rgba(0,0,0,.35)}
body.next .nx .nx-seal b{display:block;font-size:34px;font-weight:500;letter-spacing:0;line-height:1}
body.next .nx .nx-trust{border-bottom:1px solid var(--line);background:var(--soft)}
body.next .nx .nx-trust .nx-wrap{padding-block:14px;display:flex;flex-wrap:wrap;gap:8px 36px;justify-content:center;align-items:center;font-size:13px;color:var(--slate)}
body.next .nx .nx-trust strong{color:var(--ink)}
body.next .nx .nx-stars{color:var(--gold);letter-spacing:.12em}
body.next .nx .nx-ticker{overflow:hidden;border-bottom:1px solid var(--line);padding-block:16px}
body.next .nx .nx-ticker div{display:flex;gap:56px;width:max-content;animation:nx-tick 38s linear infinite;font-family:var(--jost);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
body.next .nx .nx-ticker span::before{content:"◆";color:var(--accent);font-size:8px;margin-right:56px;vertical-align:middle}
@keyframes nx-tick{to{transform:translateX(-50%)}}
body.next .nx .nx-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
body.next .nx .nx-cat{display:flex;align-items:center;gap:14px;padding:18px 16px;background:#fff;border:1px solid var(--line);border-radius:2px;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s,color .2s}
body.next .nx .nx-cat svg{flex:none;transition:transform .25s}
body.next .nx .nx-cat span{display:flex;flex-direction:column;gap:1px;min-width:0}
body.next .nx .nx-cat b{font-family:var(--jost);font-size:13px;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
body.next .nx .nx-cat small{font-size:11.5px;font-weight:300;color:var(--mute)}
body.next .nx .nx-cat:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 10px 24px rgba(37,43,54,.10)}
body.next .nx .nx-cat:hover svg{transform:scale(1.12);color:var(--accent)}
body.next .nx .nx-cat.nx-hot{border-color:var(--accent);color:var(--accent)}
body.next .nx .nx-cat.nx-hot small{color:var(--accent)}
body.next .nx .nx-cat.nx-hot:hover{background:var(--accent);color:#fff}
body.next .nx .nx-cat.nx-hot:hover small,body.next .nx .nx-cat.nx-hot:hover svg{color:#fff}
body.next .nx .nx-band{background:var(--soft);margin-top:72px}
body.next .nx .nx-band .nx-wrap{padding-block:72px}
body.next .nx .nx-wts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
body.next .nx .nx-wt{display:flex;flex-direction:column;gap:36px;padding:26px 24px;background:#fff;border:1px solid var(--line);border-radius:2px;transition:transform .2s,box-shadow .2s}
body.next .nx .nx-wt:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(37,43,54,.10)}
body.next .nx .nx-bars{display:flex;gap:5px}
body.next .nx .nx-bars i{width:34px;height:4px;background:var(--line);transition:background .3s}
body.next .nx .nx-bars i.nx-on{background:var(--ink)}
body.next .nx .nx-wt:hover .nx-bars i.nx-on{background:var(--accent)}
body.next .nx .nx-wt b{font-family:var(--jost);font-size:17px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;display:block}
body.next .nx .nx-wt .nx-r{font-weight:300;color:var(--slate)}
body.next .nx .nx-wt small{display:block;font-size:11.5px;font-weight:300;color:var(--mute);padding-top:10px}
body.next .nx .nx-prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
body.next .nx .nx-prod{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:2px;background:#fff;min-width:0;transition:box-shadow .25s,transform .25s}
body.next .nx .nx-prod:hover{box-shadow:0 14px 34px rgba(37,43,54,.13);transform:translateY(-3px)}
body.next .nx .nx-prod .nx-ph{position:relative;aspect-ratio:1/1;background:var(--soft);overflow:hidden}
body.next .nx .nx-prod .nx-ph img{transition:transform .6s}
body.next .nx .nx-prod:hover .nx-ph img{transform:scale(1.05)}
body.next .nx .nx-off{position:absolute;top:12px;left:12px;z-index:1;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:5px 9px;border-radius:2px}
body.next .nx .nx-prod .nx-bd{display:flex;flex-direction:column;gap:6px;padding:16px;flex:1}
body.next .nx .nx-prod .nx-br{font-family:var(--jost);font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--slate)}
body.next .nx .nx-prod .nx-nm{font-size:15px;line-height:1.35}
body.next .nx .nx-prod .nx-pr{display:flex;gap:10px;align-items:baseline;margin-top:auto;padding-top:14px}
body.next .nx .nx-prod .nx-pr b{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
body.next .nx .nx-prod .nx-pr s{font-size:13.5px;color:var(--mute)}
body.next .nx .nx-prod .nx-sv{font-size:12.5px;font-weight:300;color:var(--mute)}
body.next .nx .nx-outlet{border:1px solid var(--accent);border-radius:2px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;padding:40px clamp(24px,4vw,56px);transition:box-shadow .25s}
body.next .nx .nx-outlet:hover{box-shadow:0 12px 30px rgba(156,59,34,.14)}
body.next .nx .nx-outlet .nx-t{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:10px}
body.next .nx .nx-outlet h2{font-size:clamp(24px,2.8vw,38px)}
body.next .nx .nx-outlet p{margin:0;font-weight:300;color:var(--slate)}
body.next .nx .nx-story{display:flex;flex-wrap:wrap;background:var(--black);color:#fff;margin-top:72px}
body.next .nx .nx-story .nx-ph{flex:1 1 380px;min-height:380px;max-height:520px;overflow:hidden}
body.next .nx .nx-story .nx-tx{flex:1 1 340px;min-width:0;padding:64px clamp(24px,6vw,96px);display:flex;flex-direction:column;justify-content:center;gap:18px;align-items:flex-start}
body.next .nx .nx-story h2{font-weight:300}
body.next .nx .nx-story p{margin:0;font-weight:300;font-size:17px;color:#DADADA;max-width:32em}
body.next .nx .nx-story .nx-eyebrow{color:#C9C9C9}
body.next .nx .nx-revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
body.next .nx .nx-rev{margin:0;padding:28px;border:1px solid var(--line);border-radius:2px;display:flex;flex-direction:column;gap:16px;transition:border-color .2s}
body.next .nx .nx-rev:hover{border-color:var(--ink)}
body.next .nx .nx-rev blockquote{margin:0;font-size:17px;font-weight:300;line-height:1.6}
body.next .nx .nx-rev figcaption{font-size:12.5px;color:var(--mute);margin-top:auto}
body.next .nx .nx-rev .nx-eb{font-family:var(--jost);font-size:11px;font-weight:500;letter-spacing:.2em;color:#3F5D43}
body.next .nx .nx-proms{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px;border-top:1px solid var(--line);padding-top:40px}
body.next .nx .nx-proms h3{font-size:15px;font-weight:600;letter-spacing:.04em;margin-bottom:8px}
body.next .nx .nx-proms p{margin:0;font-weight:300;color:var(--slate)}
@media (max-width:760px){
body.next .nx .nx-hero .nx-tx{padding-block:44px}
body.next .nx .nx-hero .nx-ph{min-height:320px}
body.next .nx .nx-cats{grid-template-columns:repeat(2,1fr)}
body.next .nx .nx-cat{padding:14px 12px;gap:10px}
body.next .nx .nx-prods{grid-template-columns:repeat(2,1fr);gap:12px}
body.next .nx .nx-prod .nx-bd{padding:12px}
body.next .nx .nx-btn.nx-dark{font-size:11px;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
body.next .nx .nx-hero .nx-ph img,body.next .nx .nx-ticker div{animation:nx-none}
body.next .nx *{transition:none!important}
}