.sn-button{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:var(--space-3) var(--space-6);border:var(--rule-thin) solid transparent;border-radius:var(--radius-pill);font-weight:800;line-height:1;text-decoration:none;white-space:nowrap;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}.sn-button:hover{transform:translateY(-2px);text-decoration:none}.sn-button:active{transform:translateY(0)}.sn-button--primary{background:var(--color-accent);color:var(--color-ink)}.sn-button--primary:hover{background:var(--color-accent-strong)}.sn-button--secondary{background:var(--color-surface);border-color:var(--color-ink)}.sn-button[aria-disabled=true],.sn-button:disabled{opacity:.45;pointer-events:none}.sn-hero{padding-block:var(--space-16);border-bottom:var(--rule-thin) solid var(--color-rule)}.sn-hero__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(18rem,.7fr);gap:var(--space-12);align-items:center}.sn-hero h1{max-width:11ch;margin:0 0 var(--space-6)}.sn-hero__copy{font-size:var(--text-lg);max-width:36rem;color:var(--color-ink-soft)}.sn-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}.sn-hero__art{position:relative;aspect-ratio:1;border-radius:50%;background:var(--color-accent-soft);display:grid;place-items:center}.sn-hero__can{width:32%;height:68%;border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-md);display:grid;place-items:center;font-weight:900;writing-mode:vertical-rl}.sn-hero__slice{position:absolute;width:28%;aspect-ratio:1;border:var(--space-3) solid var(--color-surface);border-radius:50%;background:conic-gradient(var(--color-accent) 0 12%,var(--color-surface) 12% 14%,var(--color-accent) 14% 26%,var(--color-surface) 26% 28%,var(--color-accent) 28% 40%,var(--color-surface) 40% 42%,var(--color-accent) 42% 54%,var(--color-surface) 54% 56%,var(--color-accent) 56% 68%,var(--color-surface) 68% 70%,var(--color-accent) 70% 82%,var(--color-surface) 82% 84%,var(--color-accent) 84% 100%);right:6%;bottom:8%;transform:rotate(-12deg)}.sn-finder{margin-top:calc(var(--space-8) * -1);position:relative}.sn-finder__inner{padding:var(--space-8);background:var(--color-ink);color:var(--color-paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.sn-finder h2{font-size:var(--text-2xl);margin-top:0}.sn-chip-list{display:flex;flex-wrap:wrap;gap:var(--space-3)}.sn-chip{display:inline-flex;min-height:2.75rem;align-items:center;padding:var(--space-2) var(--space-5);border:var(--rule-thin) solid var(--color-ink-soft);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-ink);font-weight:700;text-decoration:none;white-space:nowrap}.sn-chip:hover{background:var(--color-accent);text-decoration:none}.sn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}.sn-grid--products{grid-template-columns:repeat(3,minmax(0,1fr))}.sn-card{min-width:0}.sn-card__media{aspect-ratio:16/9;overflow:hidden;background:var(--color-accent-soft);border-radius:var(--radius-md)}.sn-card__media img{width:100%;height:100%;object-fit:cover}.sn-card__type{display:inline-block;margin-top:var(--space-4);font-size:var(--text-xs);font-weight:800;color:var(--color-ink-soft)}.sn-card h3{margin:var(--space-2) 0}.sn-card h3 a{text-decoration:none}.sn-card__meta{font-size:var(--text-sm);color:var(--color-ink-soft)}.sn-product-card{display:grid;grid-template-rows:auto 1fr;padding:var(--space-5);background:var(--color-surface);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-lg)}.sn-product-card__image{aspect-ratio:1;display:grid;place-items:center;background:var(--color-paper);border-radius:var(--radius-md)}.sn-product-card__image img{width:100%;height:100%;object-fit:contain}.sn-product-card__placeholder{font-weight:900;color:var(--color-ink-soft)}.sn-product-card__facts{display:flex;gap:var(--space-2);flex-wrap:wrap;font-size:var(--text-sm)}.sn-product-card__facts span{padding:var(--space-1) var(--space-3);background:var(--color-accent-soft);border-radius:var(--radius-pill)}.sn-product-card__score{font-size:var(--text-xl);font-weight:900}.sn-product-card__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}.sn-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}.sn-category-card{padding:var(--space-6);border-top:4px solid var(--color-accent);background:var(--color-surface);text-decoration:none}.sn-category-card:hover{box-shadow:var(--shadow-sm);text-decoration:none}.sn-pagination{margin-block:var(--space-12)}.sn-pagination .nav-links{display:flex;gap:var(--space-2);flex-wrap:wrap}.sn-pagination a,.sn-pagination span{padding:var(--space-2) var(--space-4);background:var(--color-surface);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-sm)}.sn-breadcrumb{font-size:var(--text-sm);color:var(--color-ink-soft);padding-block:var(--space-5)}.sn-breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}.sn-breadcrumb li+li::before{content:"/";margin-right:var(--space-2)}

/* Keep media height inside the card so the following section cannot overlap it. */
.sn-card{display:flex;flex-direction:column}
.sn-card__media{display:block;flex:0 0 auto}

.sn-hero__types{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-block:var(--space-6);border-block:var(--rule-thin) solid var(--color-rule)}
.sn-hero__types-label{margin:0 0 var(--space-4);font-size:var(--text-sm);font-weight:800;color:var(--color-ink-soft)}
.sn-hero__types ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-6);list-style:none;margin:0;padding:0}
.sn-hero__types a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:3.5rem;border-bottom:var(--rule-thin) solid var(--color-rule);font-weight:800;text-decoration:none;white-space:nowrap}
.sn-hero__types a span{color:var(--color-ink-soft);transition:transform var(--dur-fast) var(--ease-out)}
.sn-hero__types a:hover span{transform:translateX(var(--space-1))}
.sn-hero__types a:active span{transform:none}