/* Shared bits for the unified header/footer (page styles live in each page's own css). */
.brand-mark.brand-logo{background:none!important;padding:0;overflow:hidden}
.brand-mark.brand-logo img{width:100%;height:100%;object-fit:contain;display:block}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-basket{
  position:relative;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  background:var(--ink,#1E1610);color:var(--paper,#F6EFE1);border:0;border-radius:999px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:transform .2s ease,background .2s ease;box-shadow:0 6px 0 -2px rgba(30,22,16,.25);
}
.nav-basket:hover{background:var(--paprika,#A63723);transform:translateY(-1px)}
.nav-basket svg{width:15px;height:15px}
.nav-basket .count{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding-inline:5px;
  background:var(--amber-2,#E8A33D);color:var(--ink,#1E1610);border-radius:999px;
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;
  transition:transform .4s cubic-bezier(.2,.9,.2,1.5);
}
.nav-basket .count.bump{transform:scale(1.35)}
@media (max-width:520px){.nav-basket .label{display:none}.nav-basket{padding:9px 12px}}
.maze-hidden{display:none!important}
.card-photo{width:100%;height:100%;object-fit:cover;display:block}

/* Solid header once scrolled: the templates' 88% translucent bar let page text show through
   ("doubled" text while scrolling). */
.nav.is-solid{background:rgba(241,232,211,.98)!important}

/* Skip link: visually hidden until keyboard focus (home template had no style for it). */
.skip{position:fixed!important;top:8px;inset-inline-start:8px;z-index:1000;padding:10px 16px;border-radius:6px;
  background:var(--ink,#1E1610);color:var(--paper,#F6EFE1);font-size:13px;font-weight:600;
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto;overflow:visible}

/* Shop grid: "1fr" tracks let long real product names/weight ladders force cards wider than the
   phone screen (page scrolled sideways). minmax(0,1fr) keeps columns inside the viewport. */
.products-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.product,.product-tag,.product-foot{min-width:0}
html,body{overflow-x:clip}
@media (max-width:760px){
  .weight-ruler{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:14px}
  .weight-ruler button{white-space:nowrap;min-width:0}
}