/* Three honest browsing classes, inside Boutique Gardens' existing cream/olive world. */
.shop-heading{margin-bottom:0;padding-top:24px;border-color:var(--hair)}
.shop-browse{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:22px;border-bottom:1px solid var(--hair)}
.shop-browse button{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:80px;padding:12px 16px 18px;border:0;background:transparent;color:var(--olive);cursor:pointer;font:400 20px/1.3 var(--f-heb);transition:color .18s ease,background .18s ease}
.shop-browse button::after{content:"";position:absolute;inset-inline:20px;bottom:-1px;height:2px;background:currentColor;transform:scaleX(0);transition:transform .2s ease}
.shop-browse button[aria-pressed=true]::after{transform:scaleX(1)}
.shop-browse button[aria-pressed=true]{color:var(--ink)}
.shop-browse button:hover{background:var(--ivory-2);color:var(--ink)}
.shop-browse button:focus-visible{outline:2px solid var(--olive);outline-offset:4px;z-index:1}
.browse-icon{display:block;flex:0 0 34px;width:34px;height:34px;background:currentColor;mask:var(--browse-symbol) center/contain no-repeat;-webkit-mask:var(--browse-symbol) center/contain no-repeat}
.browse-icon-all,.browse-icon-geometry{background:transparent;mask:none;-webkit-mask:none}
.browse-icon-all svg,.browse-icon-geometry svg{display:block;width:100%;height:100%}
.browse-icon-sets{--browse-symbol:url(icons/shop-sets.png)}
.browse-icon-items{--browse-symbol:url(icons/shop-items.png)}
.browse-label{white-space:nowrap}
.browse-count{align-self:center;color:var(--muted);font:400 12px/1 var(--f-body);font-variant-numeric:tabular-nums;min-width:2ch}
.shop-browse-help{margin:14px 0 22px;color:var(--muted);font:400 15px/1.5 var(--f-body)}
.shop-toolbar{justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--hair);gap:24px}
.shop-search{max-width:440px;border:0}
.shop-search:focus-within{outline:2px solid var(--olive);outline-offset:4px}
.shop-filter-toggle{border:0;border-inline-start:1px solid var(--hair);padding-inline:24px 0;min-height:44px;font-size:15px}
.shop-filter-toggle[aria-expanded=true]{background:transparent;border-color:var(--hair);color:var(--ink)}
.shop-filter-toggle:hover{color:var(--ink)}
.shop-refine{margin-top:0}
.shop-refine-body{padding:16px 0 22px}
.shop-refine-selects{margin-top:0;gap:32px}
.shop-refine-footer{margin-top:18px}
.shop-refine-heading{display:none}
.shop-current{margin-top:8px}
.shop-motion{margin-top:0}
.shop-icon-credit{margin:18px 0 0;font:400 12px/1.5 var(--f-body);color:var(--muted)}
.shop-icon-credit a{text-decoration:underline;text-underline-offset:3px}
.shop-search input{caret-color:var(--olive)}
.shop-browse ::selection,.shop-toolbar ::selection{background:var(--olive);color:var(--ivory)}
@media(max-width:900px){.shop-browse button{gap:9px;padding-inline:10px;font-size:18px}.browse-icon{width:28px;height:28px;flex-basis:28px}.shop-browse button::after{inset-inline:10px}}
@media(max-width:640px){
  .shop-heading{padding-top:15px;gap:12px}
  .shop-heading h2{font-size:20px;letter-spacing:.035em}
  .shop-browse{margin-top:14px}
  .shop-browse button{flex-direction:column;justify-content:flex-start;gap:8px;min-height:100px;padding:10px 1px 14px;font-size:16px;line-height:1.25}
  .browse-icon{width:27px;height:27px;flex:0 0 27px}
  .browse-label{font:400 14px/1.3 var(--f-body)}
  .browse-count{font-size:11px;margin-top:auto}
  .shop-browse-help{font-size:13px;line-height:1.5;margin:12px 0 15px;min-height:2.9em;max-width:38ch}
  .shop-toolbar{gap:12px;padding-bottom:6px}
  .shop-filter-toggle{min-height:44px;padding-inline:12px 0;font-size:14px;gap:6px}
  .shop-filter-toggle>svg{width:17px;height:17px}
  .shop-search{min-height:44px}.shop-search input{min-height:44px;font-size:16px}
  .shop-refine-body{padding:18px 0}
  .shop-refine-heading{display:flex;margin-bottom:16px}
  .shop-refine-selects{margin:0;gap:14px}
  .shop-refine-footer{margin-top:16px}
  .shop-refine-footer>a{font-size:14px}
  .shop-current{font-size:13px;line-height:1.6}
}
@media(max-width:360px){.browse-label{font-size:12.5px}.shop-browse button{min-height:96px}.shop-filter-toggle{font-size:13px;padding-inline-start:9px}.shop-toolbar{gap:8px}.shop-heading h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.shop-browse button,.shop-browse button::after{transition:none}}
