/* GardenBlocks — header refresh + mobile polish. Loaded after the site's own CSS on every page. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html body{-webkit-tap-highlight-color:transparent}
a,button,label,summary,input,select,textarea{touch-action:manipulation}

/* Header shell. The blur lives on a pseudo-layer: a backdrop-filter on the header itself
   turned it into the containing block of the fixed mobile menu, which then opened only 64px tall. */
html body .site-header.site-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid transparent;isolation:isolate;transition:border-color .2s ease,box-shadow .2s ease}
html body .site-header.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgb(245 238 223/88%);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px)}
html body .site-header.site-header.scrolled{border-bottom-color:#e2d2b6;box-shadow:0 12px 32px -24px rgb(59 36 20/50%)}
html body .site-header .bar.bar{height:64px;min-height:0;gap:4px}
html body .site-header .logo.logo{flex:none;margin-right:18px;display:flex;align-items:center}
html body .site-header .logo.logo img{width:82px;height:auto}

/* Primary navigation */
html body .site-header .nav-desktop ul{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
html body .site-header .nav-desktop li{position:relative}
html body .site-header .nav-desktop.nav-desktop a[href],html body .site-header .gb-more>button{position:relative;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:0;border-radius:999px;background:transparent;box-shadow:none;font:560 .94rem/1 "Figtree Variable","Figtree",ui-sans-serif,system-ui,sans-serif;color:#574634;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease}
html body .site-header .nav-desktop.nav-desktop a[href]::after,html body .site-header .nav-desktop.nav-desktop a[href]::before{content:none}
html body .site-header .nav-desktop.nav-desktop a[href][aria-current=page],html body .site-header .gb-more>button.is-current{color:#2a1c10;background:#ecdfc6;box-shadow:none}
html body .site-header .nav-desktop.nav-desktop{margin:0 auto 0 0;flex:0 1 auto}
html body .site-header .gb-more>button svg{transition:transform .18s cubic-bezier(.23,1,.32,1)}
html body .site-header .gb-more[data-open]>button svg{transform:rotate(180deg)}
.gb-more-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:5;display:grid;min-width:210px;padding:6px;border:1px solid #e2d2b6;border-radius:10px;background:#fffaf1;box-shadow:0 22px 44px -22px rgb(59 36 20/50%),0 2px 0 rgb(59 36 20/6%);transform-origin:top left;opacity:0;transform:scale(.96) translateY(-4px);visibility:hidden;transition:opacity .14s ease,transform .14s cubic-bezier(.23,1,.32,1),visibility 0s linear .14s}
.gb-more[data-open] .gb-more-panel{opacity:1;transform:none;visibility:visible;transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1),visibility 0s}
html body .site-header .nav-desktop.nav-desktop .gb-more-panel a[href]{display:flex;width:100%;height:42px;border-radius:7px}
@media (hover:hover) and (pointer:fine){
  html body .site-header .nav-desktop.nav-desktop a[href]:hover,html body .site-header .gb-more>button:hover{color:#2a1c10;background:rgb(59 36 20/6%)}
  html body .site-header .nav-desktop.nav-desktop a[href][aria-current=page]:hover{background:#ecdfc6}
  html body .site-header .actions .lang:hover{border-color:#a96b34;color:#2a1c10}
}

/* Actions */
html body .site-header .actions.actions{margin-left:auto!important;display:flex;align-items:center;gap:6px}
html body .site-header .actions .lang.lang{order:-1}
html body .site-header .actions .lang.lang{display:inline-grid;place-items:center;height:34px;min-width:40px;padding:0 9px;border:1px solid #cbb38e;border-radius:999px;background:transparent;font:800 .74rem/1 "Figtree Variable","Figtree",sans-serif;letter-spacing:.05em;color:#574634;text-decoration:none;transition:border-color .15s ease,color .15s ease}
html body .site-header .actions .quote.quote{height:40px;min-height:40px;padding:0 16px;font-size:.88rem;box-shadow:3px 3px 0 #3b2414}
html body .site-header .actions .quote.quote:active{box-shadow:1px 1px 0 #3b2414}
html body .site-header .icon-btn.icon-btn{width:44px;height:44px;border-radius:12px}

@media (min-width:1140px){
  html body .site-header .nav-desktop.nav-desktop{display:block}
  html body .site-header .menu-btn.menu-btn{display:none}
}
@media (max-width:1139.98px){
  html body .site-header .nav-desktop.nav-desktop{display:none}
  html body .site-header .menu-btn.menu-btn{display:inline-grid;place-items:center}
}
@media (max-width:719.98px){
  html body .site-header .bar.bar{height:58px}
  html body .site-header .logo.logo img{width:76px}
  html body .site-header .actions .quote.quote,html body .site-header .actions .lang.lang{display:none}
  html body .site-header .actions.actions{gap:2px;margin-right:-6px}
}

/* Mobile menu: full height, scrollable, no scroll chaining */
html body .menu-root .menu{height:100dvh;overflow-y:auto;overscroll-behavior:contain}
html body .menu-root .menu li a{min-height:52px}

/* Product page: the thumbnail strip stretched the grid column past the screen (428px on a 375px phone) */
html body .gallery,html body .info{min-width:0}
html body .gallery .thumbs{max-width:100%}

/* Drawers and sticky bars respect the home indicator / notch */
html body .cart{overscroll-behavior:contain}
html body .cart-foot{padding-bottom:max(16px,env(safe-area-inset-bottom))}
html body .sticky-cta{padding-bottom:max(12px,env(safe-area-inset-bottom))}

@media (prefers-reduced-motion:reduce){.gb-more-panel{transition:none}}

/* Shop: designs chosen in the order panel (gb-shop.js) */
.gb-designs .gb-dhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin-bottom:16px}
.gb-designs .gb-dhead h2{margin:0}
.gb-designs .gb-dhead p{margin:6px 0 0;max-width:62ch}
.gb-designs .gb-dfilter{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}
.gb-designs .gb-dchip{border:1.5px solid var(--line-2);background:var(--card);color:var(--ink-2);padding:8px 14px;border-radius:99px;font:700 .88rem/1 var(--font-body,inherit);cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .12s var(--ease-out)}
.gb-designs .gb-dchip:active{transform:scale(.96)}
.gb-designs .gb-dchip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.gb-designs .gb-dchip:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.gb-designs .grid.g-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.gb-designs [hidden],.pcard[data-design][hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.gb-designs .gb-dchip{transition:none}}
.pcard .gb-howto{position:relative;z-index:1;align-self:flex-start;margin:-2px 0 10px;font-size:.86rem;font-weight:700;color:var(--green);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.pcard .gb-howto:hover{color:var(--green-2,var(--green))}}
