/* KitchenHut shared chrome (top bar, header/nav, footer, buttons, wa-fab, tab bar)
   + responsive rules. Authoritative source linked on every page. */

/* minimal reset the chrome relies on (lists in nav/footer).
   Keep this at element-level specificity so intended margins (.social, etc.) still win. */
ul{margin:0;padding:0;list-style:none}

@font-face{
      font-family:"Open Sans";
      font-style:normal;
      font-weight:400 800;
      font-display:swap;
      src:url(../fonts/open-sans-latin.woff2) format("woff2");
      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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
    }
*,*::before,*::after{box-sizing:border-box}
:root{
      --green-900:#2f7d32;--green-700:#2f7d32;--green-600:#2f9e44;
      --gold:#e0a82e;--gold-700:#b9831a;--red:#cb2f24;--red-700:#a3221a;
      --cream:#f7f3ea;--cream-200:#efe7d6;--ink:#1c2419;--muted:#5b6657;
      --line:#e3dccb;--white:#fff;
      --shadow-sm:0 1px 2px rgba(20,36,20,.06);
      --shadow:0 6px 24px rgba(20,36,20,.10);
      --radius:6px;--radius-sm:6px;
      --wrap:1440px;--gap:clamp(1rem,2vw,1.75rem);
      --font:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      --font-head:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    }
h1,h2,h3,h4,p,ul,figure{margin:0}
img,svg{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.wrap{width:min(100% - 3rem,var(--wrap));margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:0;z-index:1000;background:var(--green-900);
      color:#fff;padding:.75rem 1rem;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;line-height:1;
      padding:.85rem 1.4rem;border-radius:6px;transition:background-color .2s,transform .2s;
      white-space:nowrap}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-700)}
.btn--green{background:#2f7d32;color:#fff}
.btn--green:hover{background:#26682a}
.btn--login{background:#2f7d32;color:#fff}
.btn--login:hover{background:#26682a}
.btn--ghost{border:2px solid currentColor;padding:.7rem 1.25rem}
.btn--lg{padding:1rem 1.7rem;font-size:1.0625rem}
.btn--sm{padding:.62rem 1.05rem;font-size:.9375rem}
.topbar{background:var(--green-900);color:#eaf3ea;font-size:.8125rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;
      justify-content:space-between;padding-block:.5rem}
.topbar ul{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}
.topbar li{display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.topbar a{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.topbar svg{width:1em;height:1em;color:var(--gold);flex:none}
.topbar a:hover{color:#fff;text-decoration:underline}
/* Tablets get the same top bar as phones: just phone + email. The three selling-point
   badges plus WhatsApp/Login wrapped onto a second line and made the bar look cluttered
   on iPad/Surface, and every one of them is still reachable (WhatsApp via the floating
   button, Login via the header button and the bottom bar). Matches the compact-header
   breakpoint; ≥1200px keeps the full bar. */
@media (max-width:1199px){
  .topbar ul:first-child{display:none}
  .topbar ul:last-child li:nth-child(2),
  .topbar ul:last-child li:nth-child(4){display:none}
  /* the two survivors sit on opposite edges: phone hard left, email hard right */
  .topbar .wrap{justify-content:space-between}
  .topbar ul:last-child{display:flex;flex-wrap:nowrap;justify-content:space-between;
    align-items:center;width:100%;gap:.75rem}
  .topbar ul:last-child li{justify-content:flex-start;min-width:0}
  /* let the email shrink rather than push the bar wider on the narrowest phones */
  .topbar ul:last-child li:last-child{justify-content:flex-end;overflow:hidden}
  .topbar ul:last-child li:last-child a{overflow:hidden;text-overflow:ellipsis}
}
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
      box-shadow:0 2px 12px rgba(20,36,20,.06)}
.site-header .wrap{display:flex;align-items:center;gap:1rem;padding-block:.9rem}
.brand{flex:none;display:flex}
.brand img{width:150px;height:68px;object-fit:contain}
.primary-nav{margin-left:1.75rem}
.primary-nav>ul{display:flex;align-items:center;gap:.6rem}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1rem;
      border-radius:6px;font-weight:600;color:var(--ink)}
/* drawer-only bits are hidden on desktop */
.nav-drawer-head,.nav-drawer-foot{display:none}
.nav-link .nav-ico,.nav-link .nav-caret{display:none}
.nav-link::after{content:"";position:absolute;left:50%;bottom:.26rem;height:3px;width:0;
      border-radius:3px;background:var(--green-600);transform:translateX(-50%);
      transition:width .3s ease}
.has-menu>.nav-link::after{width:18px}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--green-700)}
.nav-link:hover::after,.nav-link[aria-expanded="true"]::after{width:calc(100% - 1.3rem)}
.has-menu{position:relative}
.submenu{position:absolute;top:calc(100% + .7rem);left:0;min-width:236px;background:#fff;
      border:1px solid var(--line);border-radius:6px;box-shadow:0 14px 34px rgba(20,36,20,.16);
      padding:.45rem;opacity:0;visibility:hidden;transform:translateY(10px);
      transition:opacity .22s ease,transform .22s ease,visibility .22s}
.submenu::before{content:"";position:absolute;top:-6px;left:1.5rem;width:12px;height:12px;
      background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);
      transform:rotate(45deg)}
.submenu a{position:relative;display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;
      border-radius:6px;color:var(--ink);white-space:nowrap;transition:background .15s,color .15s,padding-left .15s}
.submenu a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-600);
      opacity:0;transform:scale(.4);transition:opacity .15s,transform .15s}
.submenu a:hover{background:var(--cream);color:var(--green-700);padding-left:1rem}
.submenu a:hover::before{opacity:1;transform:scale(1)}
.has-menu.open .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu--mega{display:grid;grid-template-columns:repeat(2,minmax(max-content,1fr));gap:0 .4rem;width:max-content;max-width:min(92vw,640px)}
.u-hide{display:none}
.account-menu{position:relative}
.account-trigger{display:inline-flex;align-items:center;gap:.45rem;background:var(--cream);
      border:1px solid var(--line);border-radius:6px;padding:.38rem .55rem;color:var(--ink);
      font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s}
.account-trigger:hover{background:#fff;border-color:var(--green-700)}
.account-avatar{display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:50%;
      background:var(--green-700);color:#fff;flex:none}
.account-avatar svg{width:1rem;height:1rem}
.account-name{max-width:8.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-trigger .caret{width:.8rem;height:.8rem;color:var(--muted);transition:transform .2s}
.account-menu.open .account-trigger .caret{transform:rotate(180deg)}
.account-submenu{left:auto;right:0;min-width:214px}
.account-submenu::before{left:auto;right:1.25rem}
.account-menu.open .account-submenu{opacity:1;visibility:visible;transform:translateY(0)}
.account-submenu .sep{height:1px;background:var(--line);margin:.35rem .25rem}
.account-submenu .logout-btn{display:flex;align-items:center;gap:.5rem;width:100%;background:none;
      border:0;font:inherit;font-size:.92rem;padding:.6rem .8rem;border-radius:6px;color:var(--red);
      cursor:pointer;text-align:left;transition:background .15s}
.account-submenu .logout-btn svg{width:1.05rem;height:1.05rem}
.account-submenu .logout-btn:hover{background:#fdeceb}
/* The account dropdown reuses .submenu, but the nav-style hover treatments don't
   belong on account actions: the bullet dot doubled up with Logout's own icon,
   the indent made every row jump right on hover, and `.submenu a:hover` outranked
   .logout-btn's red, turning "Logout" green. Neutralise all three here. */
.account-submenu a::before{content:none}
.account-submenu a:hover{padding-left:.8rem}
/* Row icons — keeps the items consistent with Logout (which always had one). */
.account-submenu a>svg{width:1.05rem;height:1.05rem;flex:none;color:var(--green-700)}
.account-submenu .logout-btn,
.account-submenu .logout-btn:hover{color:var(--red)}
.header-actions{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.icon-btn{width:2.5rem;height:2.5rem;border-radius:6px;display:grid;place-items:center;
      color:var(--green-700)}
.icon-btn:hover{background:var(--cream)}
.icon-btn svg{width:1.3rem;height:1.3rem}
.cart-count{position:absolute;top:-.3rem;right:-.3rem;background:var(--red);color:#fff;
      font-size:.7rem;font-weight:700;min-width:1.15rem;height:1.15rem;border-radius:6px;
      display:grid;place-items:center;padding:0 .2rem}
.cart-btn{position:relative}
.nav-toggle{display:none}
.search-form{display:flex;align-items:center;background:var(--cream);border:1px solid var(--line);
      border-radius:6px;padding:.1rem .35rem .1rem .85rem}
.search-form input{border:0;background:none;font:inherit;font-size:.9rem;padding:.5rem .25rem;
      min-width:10.5rem;color:var(--ink)}
.search-form input::placeholder{color:var(--muted)}
.search-form input:focus{outline:none}
.search-form button{background:transparent;color:var(--muted);width:2rem;height:2rem;
      border-radius:6px;display:grid;place-items:center}
.search-form button:hover{color:var(--green-700);background:#fff}
.search-form button svg{width:1.15rem;height:1.15rem}
/* The inline search field costs ~200px the header simply doesn't have below 1300px —
   it pushed the whole page into horizontal scroll on tablets and 1280px laptops.
   Hide it there; the search icon opens the full-width search sheet instead. */
@media (max-width:1299px){
  .search-form{display:none}
}
.pcard .btn{margin-top:auto;justify-content:center;width:100%;padding:.6rem 1rem;font-size:.875rem}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(3rem,5vw,4.5rem);
      padding-bottom:clamp(5rem,8vw,7rem)}
.stats .wrap{width:min(100% - 3rem,60rem);background:#fff;border:1px solid var(--line);
      border-radius:6px;box-shadow:0 14px 34px rgba(20,36,20,.13);display:grid;
      grid-template-columns:repeat(5,1fr);padding:1.35rem .75rem;gap:.4rem}
.why .wrap{position:relative;z-index:2;padding-block:clamp(2rem,4vw,3.25rem)}
.sizes input:focus-visible+label{outline:3px solid var(--gold);outline-offset:2px}
.product-actions .btn{flex:1;justify-content:center;padding:.7rem 1rem;font-size:.9rem}
.band .btn--ghost{color:#fff}
.band .btn--ghost:hover{background:rgba(255,255,255,.12)}
.blog-head .btn{flex:none}
.contact-form .btn{align-self:center;margin-top:.25rem}
.site-footer{background:#1f5b2a;color:#e6f1e6}
.site-footer h3{color:#fff;font-size:1.05rem;margin-bottom:1.1rem}
.site-footer a:hover{color:#fff}
.footer-main{position:relative;overflow:hidden;padding-block:clamp(2.5rem,5vw,3.75rem)}
.footer-deco{position:absolute;right:0;bottom:0;width:clamp(340px,36vw,480px);height:auto;
      z-index:0;pointer-events:none;
      -webkit-mask-image:linear-gradient(to right,transparent,#000 26%),linear-gradient(to top,#000 78%,transparent);
      -webkit-mask-composite:source-in;
      mask-image:linear-gradient(to right,transparent,#000 26%),linear-gradient(to top,#000 78%,transparent);
      mask-composite:intersect}
.footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.5fr;gap:clamp(1.5rem,3vw,2.5rem)}
.footer-brand img{width:200px;height:auto}
.footer-brand p{margin-top:1rem;font-size:.9rem;line-height:1.6;max-width:22rem}
.footer-contact{margin-top:1.1rem}
.footer-contact li{display:flex;gap:.6rem;align-items:flex-start;margin-top:.65rem;font-size:.9rem}
.footer-contact svg{width:1.05rem;height:1.05rem;color:var(--gold);flex:none;margin-top:.15rem}
.footer-wa{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;background:#2f7d32;color:#fff;
      font-weight:600;font-size:.9rem;padding:.6rem 1.1rem;border-radius:6px;transition:background .2s}
.footer-wa:hover{background:#256528;color:#fff}
.footer-wa svg{width:1.15rem;height:1.15rem}
.footer-links li{margin-bottom:.7rem;font-size:.9rem}
.footer-links a{display:inline-flex;align-items:center;gap:.5rem}
.footer-links a::before{content:"";width:.8rem;height:.8rem;flex:none;background:currentColor;
      -webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;opacity:.85}
.footer-links--chev a::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");color:var(--gold)}
.footer-links--leaf a::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M5 21c0-8 6-14 16-15-1 10-7 16-15 16 0-4 2-7 6-9-3 1-5 4-7 8Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M5 21c0-8 6-14 16-15-1 10-7 16-15 16 0-4 2-7 6-9-3 1-5 4-7 8Z'/%3E%3C/svg%3E");color:var(--green-600)}
.newsletter p{font-size:.9rem;margin-bottom:1rem;line-height:1.6}
.newsletter-form{display:flex;gap:.5rem;max-width:21rem}
.newsletter-form input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);
      color:#fff;border-radius:6px;padding:.7rem .9rem;font:inherit}
.newsletter-form input::placeholder{color:#9db89d}
.social{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.social a{width:2.4rem;height:2.4rem;border-radius:6px;background:rgba(255,255,255,.08);display:grid;place-items:center}
.social a:hover{background:var(--green-600)}
.social svg{width:1.2rem;height:1.2rem;color:#fff}
.footer-features{border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.footer-features .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;padding-block:1.5rem}
.ftr-feat{display:flex;align-items:center;gap:.75rem;padding-right:1rem;border-right:1px solid rgba(255,255,255,.12)}
.ftr-feat:last-child{border-right:0}
.ftr-feat .ico{width:2.9rem;height:2.9rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);
      display:grid;place-items:center;color:#fff;flex:none}
.ftr-feat .ico svg{width:1.4rem;height:1.4rem}
.ftr-feat b{display:block;color:#fff;font-size:.86rem;line-height:1.25}
.ftr-feat span{font-size:.76rem;color:#9db89d}
.footer-pay-bar{background:var(--cream);color:var(--ink)}
.footer-pay-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;padding-block:1.1rem}
.pay-left{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.pay-left .lbl{font-size:.88rem;font-weight:600;color:var(--ink)}
.pay-left .lbl b{color:var(--red)}
.pay-list{display:flex;flex-wrap:wrap;gap:.5rem}
.pay{height:34px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:0 .65rem;
      display:inline-flex;align-items:center;justify-content:center;gap:.35rem;font-weight:800;font-size:.78rem;
      color:#1c2419;white-space:nowrap}
.pay svg{height:18px;width:auto;display:block}
.pay--visa{color:#1a1f71;font-style:italic;letter-spacing:.5px}
.pay--mc{font-weight:700;font-size:.72rem;color:#222}
.pay--eft{color:#0a7d34}
.pay--zapper{color:#16a7a0}
.pay--scan{color:#e30613}
.pay--snap{color:#1d4ed8}
.proudly{display:flex;align-items:center;gap:.7rem}
.proudly img{width:2.4rem;height:2.4rem;border-radius:50%;flex:none}
.proudly b{display:block;color:var(--green-900);font-size:.92rem}
.proudly span{font-size:.8rem;color:var(--muted)}
.footer-bottom-bar{background:#174521}
.footer-bottom-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
      gap:.6rem 1.5rem;padding-block:1.15rem;font-size:.84rem}
.footer-bottom-bar ul{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.footer-bottom-bar .credit{color:#9db89d}
.footer-bottom-bar .credit a{color:#cfe98a;font-weight:600}
.footer-bottom-bar .credit a:hover{text-decoration:underline}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
      overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wa-fab{position:fixed;right:clamp(1rem,3vw,1.6rem);bottom:clamp(1rem,3vw,1.6rem);z-index:90;
      width:3.5rem;height:3.5rem;border-radius:50%;background:#25d366;color:#fff;display:grid;
      place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .2s,box-shadow .2s}
.wa-fab:hover{transform:scale(1.07);box-shadow:0 12px 30px rgba(0,0,0,.32)}
.wa-fab svg{width:1.95rem;height:1.95rem}
.wa-fab::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;
      z-index:-1;animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.75);opacity:0}100%{opacity:0}}
.tabbar{display:none}
.tabbar-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28rem;
      padding:.45rem .15rem;font-size:.68rem;font-weight:700;letter-spacing:.01em;color:var(--muted);
      background:none;border:0;cursor:pointer;text-align:center;line-height:1;
      transition:color .2s ease;-webkit-tap-highlight-color:transparent}
.tabbar-item svg{width:1.35rem;height:1.35rem;transition:transform .2s ease}
.tabbar-item .tb-ico{display:grid;place-items:center;width:3.2rem;height:1.95rem;border-radius:999px;
      transition:background .22s ease,color .22s ease,box-shadow .22s ease}
.tabbar-item:hover{color:var(--green-700)}
.tabbar-item:hover .tb-ico{background:#e9f4e9;color:var(--green-700)}
.tabbar-item:hover svg{transform:translateY(-1px)}
.tabbar-item:active svg{transform:scale(.88)}
.tabbar-item.is-active{color:var(--green-900)}
.tabbar-item.is-active .tb-ico{background:linear-gradient(135deg,#2f7d32,#23702a);color:#fff;
      box-shadow:0 6px 14px rgba(47,125,50,.32)}
.tabbar-item.is-active:hover svg{transform:none}
@media (max-width:1024px){
  .stats .wrap{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1199px){
  .primary-nav{position:fixed;inset:0 0 0 auto;width:min(360px,90vw);background:#fff;
        transform:translateX(100%);transition:transform .28s ease;box-shadow:-16px 0 50px rgba(20,36,20,.28);
        padding:0;overflow:auto;z-index:60;margin:0;display:flex;flex-direction:column}
  .primary-nav.open{transform:translateX(0)}
  /* drawer header (green) */
  .nav-drawer-head{display:flex;align-items:center;justify-content:space-between;
        background:linear-gradient(135deg,#2f7d32,#1f5b2a);color:#fff;padding:1.05rem 1.15rem}
  .ndh-brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.1rem;letter-spacing:.01em}
  .ndh-brand svg{width:1.25rem;height:1.25rem;color:#bfe9c4}
  .nav-drawer-close{width:2.1rem;height:2.1rem;border-radius:50%;background:rgba(255,255,255,.16);
        color:#fff;display:grid;place-items:center;border:0;cursor:pointer}
  .nav-drawer-close:hover{background:rgba(255,255,255,.3)}
  .nav-drawer-close svg{width:1.15rem;height:1.15rem}
  /* nav list */
  .primary-nav>ul{flex-direction:column;align-items:stretch;gap:.15rem;padding:.8rem .8rem .2rem;margin:0}
  .primary-nav>ul>li{border-radius:10px}
  .nav-link{padding:.85rem .9rem;border-radius:10px;font-size:1rem;color:var(--ink);width:100%}
  .nav-link::after{display:none}
  .nav-link .nav-ico{display:inline-flex;width:1.35rem;height:1.35rem;color:var(--green-700);flex:none}
  .nav-link .nav-txt{flex:1;text-align:left}
  .nav-link .nav-caret{display:inline-flex;width:1rem;height:1rem;color:var(--muted);flex:none;transition:transform .2s}
  .has-menu.open>.nav-link .nav-caret{transform:rotate(180deg)}
  .has-menu.open>.nav-link,.nav-link:hover,.nav-link.is-active{background:var(--cream);color:var(--green-900)}
  .has-menu.open>.nav-link .nav-ico,.nav-link:hover .nav-ico,.nav-link.is-active .nav-ico{color:var(--green-700)}
  .submenu{position:static;display:none;box-shadow:none;border:0;padding:.1rem 0 .35rem 2.6rem;
        margin:0;opacity:1;visibility:visible;transform:none;min-width:0;background:none}
  .submenu::before{display:none}
  .submenu a{padding:.5rem .6rem;font-size:.92rem;color:var(--muted)}
  .submenu a:hover{background:var(--cream)}
  .submenu--mega{grid-template-columns:1fr;width:auto;max-width:none}
  .has-menu.open .submenu{display:block}
  .nav-toggle{display:grid}
  /* .search-form is hidden below 1300px by its own rule (see near its definition) */
  .header-actions .btn--login,.header-actions .account-menu{display:none}
  /* drawer footer: CTA, quick contact, social */
  .nav-drawer-foot{display:block;margin-top:auto;padding:1rem 1.1rem 1.4rem;border-top:1px solid var(--line);background:#fafaf7}
  .nav-contact{display:flex;flex-direction:column;gap:.55rem;margin:0;padding:0;list-style:none}
  .nav-contact li{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--muted)}
  .nav-contact svg{width:1.05rem;height:1.05rem;color:var(--green-700);flex:none}
  .nav-contact a{color:var(--ink);font-weight:600}
  .nav-contact a:hover{color:var(--green-700)}
  .nav-social{display:flex;gap:.5rem;margin-top:1.1rem}
  .nav-social a{width:2.3rem;height:2.3rem;border-radius:9px;background:#eef4e8;color:var(--green-700);
        display:grid;place-items:center;transition:background .15s,color .15s}
  .nav-social a:hover{background:var(--green-700);color:#fff}
  .nav-social svg{width:1.15rem;height:1.15rem}
  /* the bottom tab bar belongs to the compact header (it holds Login) */
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:85;
        background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(20,36,20,.10);
        padding-bottom:env(safe-area-inset-bottom)}
  .wa-fab{bottom:5.2rem}
}

/* Content layout — stays on the original 860px breakpoint. These are NOT part of the
   header system and must not follow it, or the hero loses its bottom padding while the
   photo is still overlapping and the stats card lands on top of the hero buttons. */
@media (max-width:860px){
  .blog-head .btn{flex:none;white-space:nowrap;padding:.55rem .95rem;font-size:.85rem}
  .hero .wrap{padding-bottom:0}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-deco{display:none}
  .footer-features .wrap{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .ftr-feat{border-right:0}
  .footer-pay-bar .wrap,.footer-bottom-bar .wrap{justify-content:center;text-align:center}
  .pay-left{justify-content:center;width:100%}
  .pay-list{justify-content:center;width:100%}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  /* stack the newsletter input over a full-width button so social never crowds it */
  .newsletter-form{flex-wrap:wrap;max-width:none}
  .newsletter-form input{flex:1 1 100%}
  .newsletter-form .btn{flex:1 1 100%;width:100%}
  /* equal breathing room: Subscribe -> social == social -> divider */
  .social{margin-top:1.4rem;clear:both}
  .footer-main{padding-bottom:1.4rem}
  .footer-features .wrap{grid-template-columns:1fr 1fr;gap:1.2rem .9rem}
  .footer-features .ftr-feat{align-items:flex-start;padding-right:0}
  .footer-features .ftr-feat .ico{width:2.5rem;height:2.5rem}
  .footer-features .ftr-feat .ico svg{width:1.25rem;height:1.25rem}
  .footer-features .ftr-feat:last-child{grid-column:1 / -1;justify-content:center}
  /* layout (phone left / email right) is set at the tablet breakpoint above —
     phones only need the tighter type */
  .topbar .wrap{padding-block:.5rem}
  .topbar ul:last-child{font-size:.8rem}
  .why .wrap{padding-block:1.75rem}
  .footer-links ul{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1rem}
  .footer-links li{margin-bottom:0}
}
@media (max-width:480px){
  .brand img{width:132px;height:auto}
  .hero-cta .btn{justify-content:center}
  .stats .wrap{grid-template-columns:1fr;gap:.2rem;padding:1.1rem 1rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---- Product listing grid: responsive & overflow-safe on every product page ----
   `1fr` won't shrink below a card's content width, so repeat(2,1fr) overflowed the
   viewport on phones. minmax(0,1fr) lets the columns shrink to fit; min(190px,100%)
   keeps the auto-fill grid from overflowing when the container is narrower than 190px. */
.prod-grid{grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))}
/* Phones: keep the original vertical product cards (2-up grid), just made
   overflow-safe with minmax(0,1fr). Does not touch the home page's card scroller. */
@media (max-width:560px){
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
  .pack-sizes{flex-wrap:wrap}
}

/* ---- Category page CTA band: keep "Request a Quote" + "Visit Wholesale" side by side on phones ---- */
@media (max-width:600px){
  .band-actions{flex-wrap:nowrap;width:100%;gap:.6rem}
  .band-actions .btn{flex:1 1 0;min-width:0;justify-content:center;padding:.8rem .55rem;font-size:.875rem}
}

/* ---- Industry pages: product chips → 2 per row, equal width on phones ---- */
@media (max-width:560px){
  .chips{display:grid;grid-template-columns:1fr 1fr}
  .chips li{text-align:center}
}

/* ---- Product detail (mobile): center thumbnails, keep the 3 tagline badges on one row ---- */
@media (max-width:560px){
  .gallery-thumbs{justify-content:center}
  .pdp-tagline{flex-wrap:nowrap;gap:.4rem;justify-content:center}
  .pdp-tagline span{font-size:.68rem;padding:.3rem .5rem;white-space:nowrap}
}

/* ---- Product detail: small "image may differ" disclaimer under the gallery ---- */
.img-note{grid-column:1 / -1;display:flex;align-items:flex-start;justify-content:center;gap:.4rem;
  margin-top:.85rem;font-size:.78rem;line-height:1.4;color:var(--muted);text-align:center}
.img-note svg{width:.95rem;height:.95rem;flex:none;margin-top:.1rem;color:var(--green-700)}
@media (max-width:560px){
  .img-note{order:3}
}

/* ---- Professional header actions: equal icon sizing + even spacing ---- */
.site-header .header-actions{gap:.3rem}
.site-header .header-actions .search-form{margin-right:.6rem}
.site-header .header-actions .icon-btn,
.site-header .header-actions .kh-cart-btn,
.site-header .header-actions .account-trigger{
    width:2.6rem;height:2.6rem;min-height:2.6rem;padding:0;border:0;border-radius:10px;
    background:transparent;color:var(--green-900,#1c2419);display:grid;place-items:center;
    cursor:pointer;transition:background .15s,color .15s}
.site-header .header-actions .icon-btn:hover,
.site-header .header-actions .kh-cart-btn:hover,
.site-header .header-actions .account-trigger:hover{background:var(--cream,#f7f3ea);color:var(--green-700,#2f7d32)}
.site-header .header-actions .icon-btn svg,
.site-header .header-actions .kh-cart-btn svg{width:1.45rem;height:1.45rem}
/* signed-in avatar (green fill = clearly logged in) */
.site-header .header-actions .account-trigger .account-avatar{
    width:2rem;height:2rem;border-radius:50%;background:var(--green-700,#2f7d32);color:#fff;
    display:grid;place-items:center}
.site-header .header-actions .account-trigger .account-avatar svg{width:1.15rem;height:1.15rem}
.site-header .header-actions .account-trigger:hover .account-avatar{background:var(--green-900,#26682a)}
/* "signed in as …" dropdown header */
.account-submenu .account-hd{padding:.6rem .95rem;font-size:.78rem;font-weight:700;
    color:var(--muted,#5b6657);border-bottom:1px solid var(--line,#e3dccb);white-space:nowrap}
/* Login — labeled icon button (icon + text) */
.site-header .header-actions .login-btn{display:inline-flex;align-items:center;gap:.45rem;height:2.6rem;
    padding:0 1rem;border-radius:10px;border:1.5px solid var(--line,#e3dccb);background:#fff;
    color:var(--green-900,#2f7d32);font-weight:700;font-size:.92rem;line-height:1;
    transition:background .15s,border-color .15s,color .15s}
.site-header .header-actions .login-btn:hover{background:var(--cream,#f7f3ea);border-color:var(--green-700,#2f7d32)}
.site-header .header-actions .login-btn svg{width:1.2rem;height:1.2rem;flex:none}
/* the hamburger stays desktop-hidden (our .icon-btn rule would otherwise show it) */
.site-header .header-actions .nav-toggle{display:none}
/* Same for the mobile search icon. The plain `.search-toggle{display:none}` further down
   loses to the `.site-header .header-actions .icon-btn{display:grid}` rule above on
   specificity (0,1,0 vs 0,3,0), so the icon was showing on desktop alongside the inline
   search field. Re-hide it at matching specificity, and bring it back at exactly the
   width where .search-form hides (1299px) so one of the two is always available. */
.site-header .header-actions .search-toggle{display:none}
@media (max-width:1299px){
    .site-header .header-actions .search-toggle{display:grid}
}
/* On mobile the hamburger appears; the signed-in avatar does NOT — the account moved
   to the bottom tab bar, so the header keeps a single clean icon row (search, cart,
   menu). Guests still get the labelled Login button here. The generic
   ".header-actions .account-menu{display:none}" mobile rule above does the hiding. */
@media (max-width:1199px){
    .site-header .header-actions .nav-toggle{display:grid}
}
/* very small screens: collapse the login label to just its icon */
@media (max-width:479px){
    .site-header .header-actions .login-btn{padding:0;width:2.6rem;justify-content:center}
    .site-header .header-actions .login-btn span{display:none}
}

/* ---------- Product card: quick add-to-cart (top-right, mirrors .wish-btn) ---------- */
.pcard-cart{position:absolute;top:.55rem;right:.55rem;z-index:3;width:2.15rem;height:2.15rem;
    border:0;cursor:pointer;border-radius:50%;background:rgba(255,255,255,.92);
    box-shadow:0 2px 8px rgba(20,36,20,.18);display:grid;place-items:center;color:#2f6b3a;
    transition:transform .18s,color .18s,background .18s}
.pcard-cart svg{width:1.22rem;height:1.22rem;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
.pcard-cart:hover{transform:scale(1.12);color:#fff;background:var(--green-700)}
.pcard-cart:active{transform:scale(.96)}
.pcard-cart.is-loading{opacity:.55;pointer-events:none}
.pcard-cart.is-added{color:#fff;background:var(--green-700)}

/* ── Chrome rules promoted from the page stylesheets ────────────────────
   These are global (header/nav/buttons) but previously only existed inside
   the per-page CSS copies, so they were missing on any page that didn't load
   one (e.g. home). They belong here, with the rest of the chrome. */
.btn--light{background:#fff;color:var(--green-900)}
.btn--light:hover{background:var(--cream)}
.nav-link.is-active{color:var(--green-700)}
.nav-link.is-active::after{width:calc(100% - 1.3rem)}
.submenu a[aria-current]{background:var(--cream);color:var(--green-700);font-weight:700}
.submenu a[aria-current]::before{opacity:1;transform:scale(1)}

/* ── Mobile search bar ──────────────────────────────────────────────────
   There is no room for the search box next to the logo/cart/menu on a phone,
   so ≤860px it becomes its own full-width row under the header (always
   visible — no menu tap required). The scoped rules below outrank the generic
   ".search-form{display:none}" mobile hide. */
/* ── Account bottom sheet (mobile) ──────────────────────────────────────
   The account used to be a header dropdown: a 216px panel right-aligned to an avatar
   sitting in the MIDDLE of the icon row, so it hung off to the far left under the
   logo — detached from the button that opened it. On a phone the account now lives in
   the bottom tab bar and opens this sheet: full width, thumb-reachable, real tap
   targets. Its own component (not a re-skinned .submenu) so the nav drawer's submenu
   resets can't fight it, and it lives outside .site-header so the header's stacking
   context can't trap it. Desktop is untouched — it keeps the plain dropdown. */
.acct-sheet[hidden]{display:none}
.acct-sheet{position:fixed;inset:0;z-index:110}
.acct-sheet .as-backdrop{position:absolute;inset:0;background:rgba(20,36,20,.5);
  opacity:0;transition:opacity .26s ease}
.acct-sheet.open .as-backdrop{opacity:1}
.acct-sheet .as-panel{position:absolute;left:0;right:0;bottom:0;background:#fff;
  border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(20,36,20,.28);
  padding:1.15rem .6rem calc(.6rem + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.acct-sheet.open .as-panel{transform:none}
/* grab handle — signals "drag/tap away to dismiss" */
.acct-sheet .as-grip{position:absolute;top:.55rem;left:50%;transform:translateX(-50%);
  width:2.5rem;height:.25rem;border-radius:999px;background:var(--line)}
.acct-list{list-style:none;margin:0;padding:0}
.acct-list .account-hd{padding:.35rem .9rem .8rem;font-size:.85rem;font-weight:700;
  color:var(--muted);border-bottom:1px solid var(--line)}
.acct-list a{display:flex;align-items:center;gap:.75rem;padding:.95rem .9rem;
  font-size:1rem;font-weight:600;color:var(--ink);border-radius:10px;
  transition:background .15s}
.acct-list a:active{background:var(--cream)}
.acct-list a>svg{width:1.25rem;height:1.25rem;flex:none;color:var(--green-700)}
.acct-list .sep{height:1px;background:var(--line);margin:.4rem .9rem}
.acct-list .logout-btn{color:var(--red)}
.acct-list .logout-btn>svg{color:var(--red)}
/* Desktop never shows the sheet (the header dropdown covers it) — but keep it in the
   DOM so a resize back down to mobile still has it.
   This must track the compact-header breakpoint: below it the header's account dropdown
   is hidden and the tab bar is the only way in, so hiding the sheet too left tablets
   (861-1199px) with an Account tab that opened nothing. */
@media (min-width:1200px){
  .acct-sheet{display:none}
}

/* ── Mobile drawer: stacking, backdrop, inert-when-closed ───────────────
   The drawer lives inside .site-header, which sets z-index:50 and therefore
   creates a stacking context — so the drawer's z-index:60 was *local* and the
   bottom tab bar (85) and WhatsApp FAB (90) rendered on top of it, clipping the
   menu. Lifting the header's context above both fixes it in one move. */
.nav-backdrop{display:none}
@media (max-width:1199px){
  .site-header{z-index:100}
  /* When closed the drawer is only translated off-screen: it still swallowed taps
     on the hamburger underneath and stayed keyboard-focusable. Make it inert. */
  .primary-nav{visibility:hidden;pointer-events:none}
  .primary-nav.open{visibility:visible;pointer-events:auto}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:55;
    background:rgba(20,36,20,.5);opacity:0;visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease}
  .nav-backdrop.open{opacity:1;visibility:visible}
  /* The floating WhatsApp button must not hover over the open menu. */
  body.nav-open .wa-fab{opacity:0;pointer-events:none}

  /* The FAB was 56px and sat right on top of the full-width hero CTAs ("Browse
     Products" / "Get Quote"), covering their right edge. Smaller, and tucked
     just above the tab bar so it obscures as little as possible. */
  .wa-fab{width:2.9rem;height:2.9rem;right:.75rem;bottom:calc(62px + .6rem)}
  .wa-fab svg{width:1.5rem;height:1.5rem}
  .wa-fab::before{animation:none}   /* drop the pulsing halo — it widened the dead zone */

  /* The header ate 125px (19%) of a 664px screen. Trim the logo and the row. */
  .site-header .wrap{padding-block:.55rem}
  .brand img{width:112px;height:51px}
}

/* ── Mobile search sheet ────────────────────────────────────────────────
   Full-screen sheet opened by the header's search icon. It takes no header
   height at all (the old inline strip did), gives the field a comfortable
   tap target, and adds quick category jumps. Desktop keeps its inline field,
   so both the icon and the sheet are desktop-hidden. */
.search-sheet{display:none}
.search-toggle{display:none}
@media (max-width:1299px){
  .search-toggle{display:grid}
  /* :not([hidden]) so the `hidden` attribute JS toggles keeps winning */
  .search-sheet:not([hidden]){position:fixed;inset:0;z-index:120;display:block;
    background:rgba(20,36,20,.45);animation:ssFade .18s ease}
  .ss-panel{background:#fff;padding:.8rem 1rem;
    box-shadow:0 16px 40px rgba(20,36,20,.22);animation:ssDrop .22s cubic-bezier(.2,.8,.3,1)}
  .ss-top{display:flex;align-items:center;gap:.6rem}
  .ss-form{flex:1;min-width:0;display:flex;align-items:center;gap:.55rem;
    background:var(--cream);border:1.5px solid var(--line);border-radius:10px;
    padding:.1rem .8rem;transition:border-color .15s,background .15s}
  .ss-form:focus-within{border-color:var(--green-700);background:#fff}
  .ss-ico{width:1.15rem;height:1.15rem;color:var(--muted);flex:none}
  .ss-form input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:.95rem;
    color:var(--ink);padding:.7rem 0;line-height:1.2}
  .ss-form input:focus{outline:none}
  .ss-form input::placeholder{color:var(--muted)}
  .ss-cancel{flex:none;background:none;border:0;font:inherit;font-size:.9rem;font-weight:600;
    color:var(--green-700);padding:.5rem .15rem;cursor:pointer}
}
@keyframes ssFade{from{opacity:0}to{opacity:1}}
@keyframes ssDrop{from{transform:translateY(-10px);opacity:.6}to{transform:none;opacity:1}}

/* ── "Notify Me" modal (out-of-stock enquiry) ───────────────────────────
   Lives in the global chrome because the trigger appears on every page that
   renders a product card (home, catalog, search) as well as the detail page.
   `[hidden]` is guarded explicitly: the .nm-overlay display below is an author
   rule and would otherwise beat the browser's [hidden]{display:none}. */
.nm-overlay{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:1rem;
  background:rgba(20,36,20,.5);animation:nmFade .18s ease;overflow-y:auto}
.nm-overlay[hidden]{display:none}
.nm-panel{width:min(100%,32rem);background:#fff;border-radius:14px;padding:1.25rem;
  box-shadow:0 24px 60px rgba(20,36,20,.3);animation:nmPop .2s cubic-bezier(.2,.8,.3,1);
  max-height:calc(100vh - 2rem);overflow-y:auto}
.nm-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nm-head h2{margin:0;font-size:1.15rem;font-weight:800;color:var(--green-900,#14532d)}
.nm-close{flex:none;width:2rem;height:2rem;display:grid;place-items:center;border:0;border-radius:50%;
  background:var(--cream,#f7f3ea);color:var(--ink,#1c2419);cursor:pointer}
.nm-close:hover{background:var(--line,#e3dccb)}
.nm-close svg{width:1rem;height:1rem}
.nm-sub{margin:.5rem 0 1rem;font-size:.88rem;line-height:1.45;color:var(--muted,#5b6657)}
.nm-sub b{color:var(--green-900,#14532d)}
.nm-form{display:flex;flex-direction:column;gap:.85rem}
.nm-status{margin:0;font-size:.88rem;min-height:1.1em}
.nm-status.is-error{color:#c0392b;font-weight:600}
.nm-status.is-success{color:#1f6b3a;font-weight:600}
.nm-submit{justify-content:center}
.nm-submit[disabled]{opacity:.6;cursor:not-allowed}
/* card + detail triggers */
.pcard-notify svg,.btn--notify svg{width:1.15rem;height:1.15rem}
.btn--notify{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
@keyframes nmFade{from{opacity:0}to{opacity:1}}
@keyframes nmPop{from{transform:translateY(-8px) scale(.98);opacity:.6}to{transform:none;opacity:1}}

/* ── Toasts ─────────────────────────────────────────────────────────────
   Replaces window.alert() for cart/checkout feedback, and gives the server's
   flash() messages somewhere to appear — this theme rendered them nowhere, so a
   failed "Place Order" bounced the customer back with no reason shown.
   Bottom-right on desktop, full-width along the bottom on phones. */
.kh-toasts{position:fixed;right:1rem;bottom:1rem;z-index:200;display:flex;flex-direction:column;
  gap:.55rem;width:min(22rem,calc(100vw - 2rem));pointer-events:none}
.kh-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;padding:.8rem .9rem;
  border-radius:10px;background:#fff;border:1px solid var(--line,#e3dccb);
  box-shadow:0 12px 30px rgba(20,36,20,.18);font-size:.88rem;line-height:1.4;color:var(--ink,#1c2419);
  border-left:4px solid var(--muted,#5b6657);animation:khToastIn .22s cubic-bezier(.2,.8,.3,1)}
.kh-toast.is-success{border-left-color:var(--green-600,#2f9e44)}
.kh-toast.is-error{border-left-color:var(--red,#cb2f24)}
.kh-toast.is-info{border-left-color:var(--gold,#e0a82e)}
.kh-toast__ico{flex:none;width:1.15rem;height:1.15rem;margin-top:.05rem}
.kh-toast.is-success .kh-toast__ico{color:var(--green-600,#2f9e44)}
.kh-toast.is-error .kh-toast__ico{color:var(--red,#cb2f24)}
.kh-toast.is-info .kh-toast__ico{color:var(--gold-700,#b9831a)}
.kh-toast__msg{flex:1;min-width:0;overflow-wrap:anywhere}
.kh-toast__x{flex:none;width:1.3rem;height:1.3rem;display:grid;place-items:center;border:0;border-radius:50%;
  background:none;color:var(--muted,#5b6657);cursor:pointer;font-size:1rem;line-height:1}
.kh-toast__x:hover{background:var(--cream,#f7f3ea);color:var(--ink,#1c2419)}
.kh-toast.is-leaving{animation:khToastOut .18s ease forwards}
@keyframes khToastIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes khToastOut{to{opacity:0;transform:translateY(6px) scale(.98)}}
@media (max-width:520px){
  .kh-toasts{left:.75rem;right:.75rem;bottom:.75rem;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .kh-toast,.kh-toast.is-leaving{animation:none}
}