.shop-page { background:#f7f6f6; }
.shop-page .store-nav { padding-inline:30px; background:#f7f6f6; backdrop-filter:none; }
.shop-page .store-wordmark { font-size:27px; }
.shop-intro { display:flex; justify-content:space-between; gap:40px; align-items:end; padding:75px 30px 48px; }
.shop-intro h1 { margin:0; font-size:clamp(48px,6.6vw,106px); line-height:.97; letter-spacing:-.065em; }
.shop-intro .section-kicker { margin-bottom:18px; }
.shop-intro>p { margin:0; max-width:245px; font-family:"Hero Text",Arial,sans-serif; color:#75716d; font-size:13px; line-height:1.6; }
.shop-tools { position:sticky; top:66px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 30px; min-height:68px; border-block:1px solid #222; background:#f7f6f6; }
.shop-families { display:flex; gap:20px; }
.shop-families button { min-height:48px; padding:4px 0; color:#918b85; border:0; background:none; font:inherit; font-size:10px; letter-spacing:.025em; }
.shop-families button[aria-pressed=true] { color:#111; text-decoration:underline; text-underline-offset:8px; }
.shop-tool-actions { display:flex; align-items:center; gap:24px; }
.shop-tool-actions>button { display:flex; align-items:center; gap:8px; min-height:48px; padding:0; background:none; border:0; font:inherit; font-size:10px; }
.shop-tool-actions>button svg { width:16px; height:16px; }
.shop-tool-actions select { padding:14px 20px 14px 0; max-width:135px; border:0; background:transparent; color:#111; font:inherit; font-size:10px; }
.shop-results { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 30px; color:#77716b; font-size:10px; }
.shop-results label { display:flex; align-items:center; gap:12px; width:240px; }
.shop-results input { width:100%; padding:9px 0; border:0; border-bottom:1px solid #ccc6bf; border-radius:0; background:transparent; font:inherit; color:#111; }
.shop-density { display:flex; align-items:center; gap:8px; }
.shop-density button { width:36px; height:36px; border:1px solid transparent; background:transparent; color:#999; font:inherit; font-size:13px; }
.shop-density button[aria-pressed=true] { color:#111; border-color:#222; }
.shop-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #222; border-left:1px solid #222; }
.shop-product-grid[data-density=compact] { grid-template-columns:repeat(4,minmax(0,1fr)); }
.shop-piece { position:relative; min-width:0; border-right:1px solid #222; border-bottom:1px solid #222; background:#efedeb; }
.shop-piece[hidden] { display:none; }
.shop-piece-visual { position:relative; display:block; aspect-ratio:1/1.08; overflow:hidden; }
.shop-piece-image { display:block; width:100%; height:100%; object-fit:contain; transform:scale(.93); transition:transform .75s cubic-bezier(.22,1,.36,1); }
.shop-piece-marker { position:absolute; z-index:2; top:22px; left:24px; color:#857e77; font-size:8px; letter-spacing:.05em; pointer-events:none; }
.shop-piece .quick-add { right:18px; top:15px; bottom:auto; border:0; border-radius:0; background:transparent; backdrop-filter:none; }
.shop-piece .quick-add.is-added { background:#111; color:#fff; }
.shop-piece-info { display:flex; flex-direction:column; align-items:center; gap:7px; min-height:102px; padding:15px 16px 30px; text-align:center; }
.shop-piece-name { font-size:12px; line-height:1.3; letter-spacing:-.015em; }
.shop-piece-info>span { color:#827a72; font-family:"Hero Text",Arial,sans-serif; font-size:10px; }
.shop-piece-info>span:last-child { margin-top:4px; color:#a69b90; font-size:9px; }
.shop-empty { padding:100px 24px; text-align:center; }
.shop-empty[hidden] { display:none; }
.shop-closing { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:35px 30px; border-bottom:1px solid var(--rule); font-size:10px; }
.shop-closing a { display:inline-flex; gap:20px; align-items:center; min-height:44px; }
.shop-filter-dialog { position:fixed; inset:0 0 0 auto; width:min(440px,94vw); max-width:94vw; height:100dvh; max-height:100dvh; margin:0; padding:0; border:0; color:#111; background:#f7f6f6; }
.shop-filter-dialog::backdrop { background:#0005; backdrop-filter:blur(3px); }
.shop-filter-head { display:flex; justify-content:space-between; align-items:center; padding:24px; border-bottom:1px solid #222; }
.shop-filter-head h2 { margin:0; font-size:26px; letter-spacing:-.05em; }
.shop-filter-head button { width:44px; height:44px; border:0; background:none; font-size:25px; }
.shop-filter-content { padding:28px 24px; }
.shop-filter-content fieldset { display:grid; gap:6px; margin:0; padding:0; border:0; }
.shop-filter-content legend { margin-bottom:20px; font-size:10px; letter-spacing:.08em; }
.shop-filter-content label { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:48px; font-family:"Hero Text",Arial,sans-serif; font-size:14px; }
.shop-filter-content input { width:17px; height:17px; accent-color:#111; }
.shop-filter-bottom { position:sticky; bottom:0; display:grid; grid-template-columns:auto 1fr; gap:22px; margin-top:24px; padding:24px; border-top:1px solid #222; background:#f7f6f6; }
.shop-filter-bottom button { min-height:50px; padding:12px 18px; border:1px solid #111; background:#111; color:#fff; font:inherit; font-size:11px; }
.shop-filter-bottom button:first-child { border:0; padding-inline:0; color:#111; background:transparent; text-decoration:underline; text-underline-offset:4px; }
@media(hover:hover)and(pointer:fine){ .shop-piece-visual:hover .shop-piece-image { transform:rotate(0) scale(.98); } .shop-piece-name:hover { text-decoration:underline; text-underline-offset:4px; } }
@media(max-width:900px){ .shop-families { gap:14px; } .shop-tool-actions { gap:14px; } .shop-tools { padding-inline:20px; } }
@media(max-width:700px){ .shop-page .store-nav { padding-inline:18px; } .shop-page .store-wordmark { font-size:20px; } .shop-intro { display:block; padding:43px 18px 32px; } .shop-intro h1 { font-size:16vw; } .shop-intro>p { margin-top:22px; max-width:275px; font-size:12px; } .shop-tools { top:66px; flex-wrap:wrap; gap:0; padding:0 18px; } .shop-families { flex:1 1 100%; justify-content:space-between; } .shop-tool-actions { flex:1 1 100%; justify-content:space-between; min-height:46px; border-top:1px solid #ddd6ce; } .shop-tool-actions>button { min-height:44px; } .shop-results { flex-wrap:wrap; padding:12px 18px; gap:10px; } .shop-results label { order:3; width:100%; } .shop-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .shop-product-grid[data-density=compact] { grid-template-columns:repeat(2,minmax(0,1fr)); } .shop-product-grid[data-density=spacious] { grid-template-columns:1fr; } .shop-piece-visual { aspect-ratio:1/1.14; } .shop-piece-marker { top:17px; left:14px; font-size:7px; } .shop-piece .quick-add { top:4px; right:4px; } .shop-piece-info { min-height:112px; padding:12px 9px 24px; gap:6px; } .shop-piece-name { font-size:11px; } .shop-piece-info>span { font-size:9px; } .shop-closing { padding:24px 18px; flex-wrap:wrap; } }