/* The shop page's product browser: family tiles, a filter sidebar with live counts, a toolbar, applied-filter chips,
   a card grid and a pager. The layout follows the Fragrifiscents catalogue; the per-page selector and pager follow
   PowderedPurple's product lists, so a visitor to any of the three sites finds the same controls in the same places. */
.sb{--sb-ink:#211631;--sb-paper:#fffdf9;--sb-line:#d4c4e8;--sb-muted:#655b6f;--sb-gold:#b87825;color:var(--sb-ink)}
.sb [hidden]{display:none!important}
.sb-wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.sb-intro{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:22px}
.sb-intro h2{font:clamp(2rem,3.6vw,3rem)/1 Georgia,serif;letter-spacing:-.04em;margin:0}
.sb-intro p{max-width:46ch;margin:0;color:var(--sb-muted);font-size:.95rem}
.sb-country{margin:0 0 14px}.sb-country select{max-width:70%}
.sb #sb-recent .pdp-container{width:auto}.sb #sb-recent .pdp-related{padding:0 0 22px}
.sb-top-note{background:#fff8e8;border:1px solid rgba(184,120,37,.45);padding:12px 16px;color:var(--sb-muted);font-size:.86rem;margin:0 0 22px}

.sb-fam-row{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin;margin-bottom:10px}
.sb-fam{flex:0 0 140px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 10px 14px;border:2px solid transparent;border-radius:16px;background:var(--sb-paper);color:inherit;text-decoration:none;font:inherit;text-align:center;cursor:pointer;scroll-snap-align:start;transition:transform .2s ease,border-color .2s ease}
.sb-fam:hover{transform:translateY(-2px);border-color:var(--sb-line)}
.sb-fam[aria-pressed=true]{border-color:var(--sb-ink)}
.sb-fam-img{display:block;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--tone);margin-bottom:8px}
.sb-fam-img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.sb-fam strong{font:400 1rem/1.15 Georgia,serif}
.sb-fam small{font-size:.68rem;letter-spacing:.05em;color:var(--sb-muted)}

.sb-layout{display:grid;grid-template-columns:260px 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.sb-filters{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;background:var(--sb-paper);border:1px solid var(--sb-line);border-radius:16px;padding:20px}
.sb-filters-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.sb-filters-head strong{font:400 1.25rem Georgia,serif}
.sb-link{border:0;background:none;padding:0;font:inherit;font-size:.82rem;color:var(--sb-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sb-search{width:100%;padding:.7rem 1rem;border:1px solid var(--sb-line);border-radius:999px;background:#fff;font:inherit;font-size:.92rem;margin-bottom:8px;color:var(--sb-ink)}
.sb-group{border:0;border-top:1px solid var(--sb-line);margin:0;padding:0;min-width:0}
.sb-group summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;cursor:pointer;list-style:none;font:400 1.02rem Georgia,serif}
.sb-group summary::-webkit-details-marker{display:none}
.sb-group summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--sb-muted);border-bottom:2px solid var(--sb-muted);transform:rotate(45deg);transition:transform .2s ease;margin-right:4px}
.sb-group details[open] summary::after{transform:rotate(-135deg)}
.sb-opts{display:grid;gap:2px;padding-bottom:14px}
.sb-group.long .sb-opts{max-height:260px;overflow-y:auto}
.sb-opt{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:.92rem;position:relative}
.sb-opt input{position:absolute;opacity:0;pointer-events:none}
.sb-check{flex:0 0 18px;height:18px;border:1.5px solid var(--sb-muted);border-radius:5px;display:grid;place-items:center;transition:background .15s ease}
.sb-opt input:checked+.sb-check{background:var(--sb-ink);border-color:var(--sb-ink)}
.sb-opt input:checked+.sb-check::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.sb-opt input:focus-visible+.sb-check{outline:2px solid var(--sb-gold);outline-offset:2px}
.sb-dot{flex:0 0 12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(33,22,49,.2)}
.sb-opt-l{flex:1}
.sb-opt .count{font-style:normal;font-size:.7rem;color:var(--sb-muted);background:#f5efe8;border-radius:999px;padding:1px 8px}
.sb-opt.dim{opacity:.4;cursor:default}
.sb-hint{margin:0 0 12px;font-size:.76rem;color:var(--sb-muted)}

.sb-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.sb-count{margin:0;font-size:.82rem;letter-spacing:.04em;color:var(--sb-muted)}
.sb-toggle{display:none;border:1px solid var(--sb-line);background:var(--sb-paper);padding:9px 16px;border-radius:999px;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;color:var(--sb-ink)}
.sb-density{display:flex;gap:4px;margin-left:auto}
.sb-density button{width:34px;height:34px;border:1px solid var(--sb-line);border-radius:8px;background:var(--sb-paper);font:inherit;font-size:.85rem;cursor:pointer;color:var(--sb-ink)}
.sb-density button[aria-pressed=true]{background:var(--sb-ink);border-color:var(--sb-ink);color:#fff}
.sb-select{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--sb-muted)}
.sb-select select{padding:.5rem 1.6rem .5rem .9rem;border:1px solid var(--sb-line);border-radius:999px;background:var(--sb-paper);font:inherit;font-size:.86rem;color:var(--sb-ink)}
.sb-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.sb-chip{border:0;border-radius:999px;background:var(--sb-ink);color:#fff;padding:.4rem .9rem;font:inherit;font-size:.82rem;cursor:pointer}

.sb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px}
.sb-grid[data-cols="4"]{grid-template-columns:repeat(4,1fr);gap:24px 14px}
.sb-card{display:block;text-decoration:none;color:inherit}
.sb-plate{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--tone);display:flex;align-items:center;justify-content:center;padding:18px;text-align:center}
.sb-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.sb-plate.photo{background:#fff;border:1px solid var(--sb-line)}.sb-plate.photo img{object-fit:contain;padding:10px}.sb-plate-label{font:400 1.35rem/1.15 Georgia,serif;color:rgba(33,22,49,.62);letter-spacing:-.02em}
.sb-pill{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.88);border-radius:999px;padding:.25rem .75rem;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--sb-ink)}
.sb-pill.state{left:auto;right:12px;background:var(--sb-ink);color:#fff}
.sb-view{position:absolute;left:12px;right:12px;bottom:12px;background:var(--sb-ink);color:#fff;border-radius:999px;padding:.6rem 1rem;text-align:center;font-size:.82rem;font-weight:700;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.sb-card:hover .sb-view,.sb-card:focus-visible .sb-view{opacity:1;transform:none}
@media(hover:hover){.sb-card:hover .sb-plate img{transform:scale(1.03)}}
@media(hover:none){.sb-view{opacity:1;transform:none;left:auto;right:12px;bottom:12px;padding:.4rem .9rem}}
.sb-body{padding:14px 4px 0}
.sb-body h3{font:400 1.02rem/1.25 Georgia,serif;margin:0 0 2px}
.sb-sub{margin:0;color:var(--sb-muted);font-size:.88rem}
.sb-sum{margin:8px 0 0;font-size:.88rem;color:var(--sb-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-meta{margin:6px 0 0;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--sb-muted)}
.sb-card:hover h3{text-decoration:underline;text-underline-offset:4px}
.sb-card:focus-visible{outline:2px solid var(--sb-gold);outline-offset:6px;border-radius:16px}

.sb-pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:30px 0 0}
.sb-pager button{min-width:38px;height:38px;padding:0 12px;border:1px solid var(--sb-line);background:var(--sb-paper);font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;color:var(--sb-ink);border-radius:8px}
.sb-pager button[aria-current=page]{background:var(--sb-ink);border-color:var(--sb-ink);color:#fff}
.sb-pager button:disabled{opacity:.4;cursor:default}
.sb-empty{text-align:center;padding:60px 0}
.sb-empty h3{font:400 1.5rem Georgia,serif;margin:0 0 6px}
.sb-empty p{color:var(--sb-muted);margin:0 0 16px}
.sb-empty button{border:2px solid var(--sb-ink);background:var(--sb-ink);color:#fff;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer}
.sb-disclosure{margin-top:30px;font-size:.84rem;color:var(--sb-muted);border-top:1px solid var(--sb-line);padding-top:16px}

@media(max-width:1100px){.sb-grid,.sb-grid[data-cols="4"]{grid-template-columns:repeat(2,1fr)}.sb-density{display:none}.sb-per{margin-left:auto}}
@media(max-width:860px){.sb-layout{grid-template-columns:1fr}.sb-toggle{display:inline-flex}.sb-filters{display:none;position:static;max-height:none}.sb-filters.open{display:block}.sb-intro{display:block}.sb-intro p{margin-top:10px}}
@media(max-width:520px){.sb-wrap{width:min(100% - 28px,1180px)}.sb-grid,.sb-grid[data-cols="4"]{gap:22px 12px}.sb-body h3{font-size:.95rem}.sb-toolbar{gap:10px}.sb-count{order:5;flex-basis:100%}.sb-select{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.sb-fam,.sb-plate img,.sb-view{transition:none}}

.sb-cell{display:flex;flex-direction:column;gap:10px}.sb-cell .sb-card{flex:1}.sb-buy{min-height:42px;padding:8px 14px;font-size:.84rem;text-align:center}

.sb-plate.photo img{background:#fff}