/* Gegenereerd uit de huisstijl van deze winkel. */
:root {
  --shop-ink: #1f2a1c;
  --shop-surface: #fdfcf7;
  --shop-accent: #3f6b2a;
  --shop-accent-ink: #ffffff;
  --shop-muted: #5b6655;
  --shop-line: #dfe5d3;
  --shop-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root {
--sf-radius: .75rem;
--sf-radius-lg: 1.25rem;
--sf-radius-pill: 999px;
--sf-s1: .25rem; --sf-s2: .5rem;  --sf-s3: .75rem; --sf-s4: 1rem;
--sf-s5: 1.5rem; --sf-s6: 2.25rem; --sf-s7: 3.5rem; --sf-s8: 5rem;
--sf-gap: 1.5rem;
--sf-wrap: 76rem;
--sf-display: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
--sf-h1: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);
--sf-h2: clamp(1.3125rem, 1.1rem + .8vw, 1.75rem);
--sf-h3: 1.125rem;
--sf-small: .8125rem;
--sf-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px -6px rgba(0,0,0,.10);
--sf-shadow-lift: 0 18px 40px -18px rgba(0,0,0,.28), 0 4px 10px -4px rgba(0,0,0,.08);
}
:root {
--sf-tint: #f7f7f6;
--sf-tint: color-mix(in srgb, var(--shop-accent) 5%, var(--shop-surface));
--sf-tint-strong: #eeeeec;
--sf-tint-strong: color-mix(in srgb, var(--shop-accent) 12%, var(--shop-surface));
--sf-edge: var(--shop-line);
--sf-edge: color-mix(in srgb, var(--shop-line) 70%, var(--shop-surface));
--sf-accent-soft: #f2f2f1;
--sf-accent-soft: color-mix(in srgb, var(--shop-accent) 10%, var(--shop-surface));
--sf-foot-ink: var(--shop-surface);
--sf-foot-muted: #cfcfcf;
--sf-foot-muted: color-mix(in srgb, var(--shop-surface) 72%, var(--shop-ink));
--sf-foot-line: #444;
--sf-foot-line: color-mix(in srgb, var(--shop-surface) 18%, var(--shop-ink));
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--shop-surface);
color: var(--shop-ink);
font-family: var(--shop-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
font-size: 16px;
line-height: 1.6;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1 0 auto; width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
img { max-width: 100%; height: auto; }
:focus-visible {
outline: 3px solid var(--shop-accent);
outline-offset: 2px;
border-radius: 4px;
}
.sf-skip {
position: absolute; left: -9999px; top: 0; z-index: 40;
background: var(--shop-accent); color: var(--shop-accent-ink);
padding: .75rem 1rem; border-radius: 0 0 var(--sf-radius) 0;
}
.sf-skip:focus { left: 0; }
.sf-wrap { max-width: var(--sf-wrap); margin: 0 auto; padding: 0 var(--sf-s5); }
.sf-head {
position: sticky; top: 0; z-index: 30;
background: var(--shop-surface);
border-top: 4px solid var(--shop-accent);
box-shadow: 0 1px 0 var(--sf-edge);
}
.sf-head-in {
display: grid; align-items: center; gap: var(--sf-s4);
grid-template-columns: minmax(0, 1fr) auto;
padding: var(--sf-s3) var(--sf-s5);
max-width: var(--sf-wrap); margin: 0 auto; min-height: 76px;
}
.sf-brand {
display: flex; align-items: center; gap: var(--sf-s3); text-decoration: none;
font-weight: 800; font-size: 1.375rem; letter-spacing: -.025em; line-height: 1.1;
min-height: 44px;
}
.sf-brand img { display: block; height: 44px; width: auto; max-width: 14rem; object-fit: contain; }
.sf-search { display: flex; gap: var(--sf-s2); min-width: 0; width: 100%; position: relative; }
.sf-search-icon {
position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
width: 1.05rem; height: 1.05rem; color: var(--shop-muted); pointer-events: none;
}
.sf-search input {
font: inherit; min-height: 46px; min-width: 0; flex: 1 1 auto;
padding: 0 var(--sf-s4) 0 2.6rem;
border: 1px solid transparent; border-radius: var(--sf-radius-pill);
background: var(--sf-tint-strong);
color: var(--shop-ink);
transition: background-color .15s ease, border-color .15s ease;
}
.sf-search input:focus { background-color: var(--shop-surface); border-color: var(--shop-accent); outline: none; box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.sf-search input::placeholder { color: var(--shop-muted); }
.sf-head-actions { display: flex; gap: var(--sf-s2); align-items: center; }
.sf-ico { flex: 0 0 auto; }
.sf-btn-label { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-s2);
min-height: 46px; min-width: 44px; padding: 0 var(--sf-s5); border: 1px solid transparent;
cursor: pointer; border-radius: var(--sf-radius-pill); font: inherit; font-weight: 700;
text-decoration: none; text-align: center; line-height: 1.2;
background: var(--shop-accent); color: var(--shop-accent-ink);
box-shadow: 0 1px 2px rgba(0,0,0,.08);
transition: filter .15s ease, background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.sf-btn:hover { filter: brightness(1.1); }
.sf-btn:active { transform: translateY(1px); }
.sf-btn.sf-quiet {
background: var(--shop-surface); color: var(--shop-ink);
border-color: var(--sf-edge); font-weight: 600; box-shadow: none;
}
.sf-btn.sf-quiet:hover { background: var(--sf-tint); border-color: var(--shop-line); filter: none; }
.sf-btn.sf-big { min-height: 56px; font-size: 1.0625rem; padding: 0 var(--sf-s6); }
.sf-btn.sf-block { width: 100%; }
.sf-btn[disabled], .sf-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.sf-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: var(--sf-radius-pill);
background: var(--shop-accent); color: var(--shop-accent-ink);
font-size: .75rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.sf-quiet .sf-count { background: var(--shop-accent); color: var(--shop-accent-ink); }
.sf-side-list a {
display: flex; align-items: center; justify-content: space-between; gap: var(--sf-s2);
min-height: 44px; padding: 0 var(--sf-s3); border-radius: var(--sf-radius);
text-decoration: none; font-weight: 600;
}
.sf-side-list a:hover { background: var(--sf-tint); }
.sf-side-list a[aria-current="page"] { background: var(--sf-accent-soft); color: var(--shop-ink); }
.sf-side-list small {
color: var(--shop-muted); font-weight: 600; font-size: .75rem;
min-width: 1.75rem; text-align: center; padding: .1rem .45rem;
border-radius: var(--sf-radius-pill); background: var(--sf-tint);
}
.sf-side-list a[aria-current="page"] small { background: var(--shop-surface); }
.sf-side-sub { list-style: none; margin: 0 0 var(--sf-s1); padding: 0 0 0 var(--sf-s3); }
.sf-side-sub a { font-weight: 500; }
.sf-find { display: flex; gap: var(--sf-s2); position: relative; margin: 0 0 var(--sf-s5); }
.sf-find input {
font: inherit; min-height: 50px; min-width: 0; flex: 1 1 auto;
padding: 0 var(--sf-s4) 0 2.75rem;
border: 1px solid var(--shop-line); border-radius: var(--sf-radius-pill);
background: var(--shop-surface); color: var(--shop-ink);
transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-find input:focus { border-color: var(--shop-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.sf-find input::placeholder { color: var(--shop-muted); }
.sf-find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.sf-find .sf-search-icon { left: 1.05rem; }
.sf-browse { display: grid; gap: var(--sf-s5); align-items: start; }
#winkel { scroll-margin-top: 6.5rem; }
.sf-browse-main { min-width: 0; }
.sf-browse-head {
display: flex; align-items: center; justify-content: space-between; gap: var(--sf-s3);
flex-wrap: wrap; margin-bottom: var(--sf-s1);
}
.sf-browse-title { margin: 0; font-size: var(--sf-h1); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; }
.sf-browse-title-hidden, .sf-side > .sf-side-title {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sf-side { display: flex; flex-direction: column; gap: var(--sf-s5); min-width: 0; }
.sf-side-title {
font-size: .8125rem; font-weight: 700; color: var(--shop-muted);
margin: 0 0 var(--sf-s2); letter-spacing: .02em;
}
.sf-side > .sf-side-title { padding: 0 var(--sf-s3); }
.sf-side-list { list-style: none; margin: 0; padding: 0; }
.sf-filter { margin: 0; }
.sf-chips { display: flex; flex-wrap: wrap; gap: var(--sf-s2); }
.sf-fchip {
font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
min-height: 36px; padding: 0 var(--sf-s3);
border-radius: var(--sf-radius-pill);
border: 1px solid var(--shop-line); background: var(--shop-surface); color: var(--shop-ink);
transition: background-color .15s ease, border-color .15s ease;
}
.sf-fchip:hover { border-color: var(--shop-accent); background: var(--sf-tint); }
.sf-fchip[aria-pressed="true"] {
background: var(--shop-accent); color: var(--shop-accent-ink); border-color: var(--shop-accent);
}
.sf-filter-clear { margin: var(--sf-s3) 0 0; }
.sf-filter-clear .sf-btn { min-height: 38px; font-size: .875rem; }
.sf-filter-note { margin: var(--sf-s3) 0 0; }
.sf-side-filter { border-top: 1px solid var(--sf-edge); padding: var(--sf-s3) var(--sf-s3) 0; }
.sf-side-filter > summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--sf-s2);
min-height: 44px; cursor: pointer; list-style: none; font-weight: 700; font-size: .9375rem;
}
.sf-side-filter > summary::-webkit-details-marker { display: none; }
.sf-side-filter > summary::after { content: "+"; font-weight: 700; color: var(--shop-muted); }
.sf-side-filter[open] > summary::after { content: "\2212"; }
.sf-side-filter .sf-filter > .sf-side-title { display: none; }
.sf-filter .sf-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-s1) var(--sf-s2); }
.sf-filter .sf-fchip { text-align: left; border-radius: var(--sf-radius); padding: .45rem var(--sf-s2); line-height: 1.25; min-height: 40px; }
.sf-count-line { color: var(--shop-muted); font-size: .875rem; margin: 0 0 var(--sf-s4); }
.sf-browse-title-sub { font-size: var(--sf-h2); }
.sf-filter-fold > summary { list-style: none; cursor: pointer; min-height: 42px; }
.sf-filter-fold > summary::-webkit-details-marker { display: none; }
.sf-filter-fold .sf-count { margin-left: var(--sf-s1); }
.sf-filter-fold-body {
margin-top: var(--sf-s3); padding: var(--sf-s4);
border-radius: var(--sf-radius-lg); background: var(--sf-tint);
}
.sf-side-filter { display: none; }
@media (min-width: 60rem) {
.sf-browse { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--sf-s7); }
.sf-side { position: sticky; top: 7rem; max-height: calc(100vh - 8.5rem); overflow-y: auto; padding-right: var(--sf-s2); }
.sf-side-filter { display: block; }
.sf-side-list { max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; margin-top: 3px; }
.sf-filter-fold { display: none; }
.sf-browse .sf-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
}
@media (max-width: 59.99rem) {
.sf-side { gap: 0; }
.sf-side-list {
display: flex; gap: var(--sf-s2); overflow-x: auto; scrollbar-width: none;
margin: 0 calc(-1 * var(--sf-s4)); padding: 0 var(--sf-s4) var(--sf-s1);
}
.sf-side-list li { flex: 0 0 auto; }
.sf-side-list li:has(> .sf-side-sub), .sf-side-sub { display: contents; }
.sf-side-list a {
min-height: 40px; border-radius: var(--sf-radius-pill); white-space: nowrap;
box-shadow: inset 0 0 0 1px var(--shop-line);
}
.sf-side-list a[aria-current="page"] {
background: var(--shop-ink); color: var(--shop-surface); box-shadow: none;
}
.sf-side-list a[aria-current="page"] small { background: rgba(255,255,255,.18); color: var(--shop-surface); }
}
main, main.sf-wrap { padding-top: var(--sf-s6); padding-bottom: var(--sf-s8); }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: var(--sf-h1); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; margin: 0 0 var(--sf-s2); }
h2 { font-size: var(--sf-h2); line-height: 1.2; letter-spacing: -.02em; font-weight: 800; margin: var(--sf-s7) 0 var(--sf-s4); }
h3 { font-size: var(--sf-h3); font-weight: 700; margin: var(--sf-s4) 0 var(--sf-s2); }
.sf-lede { color: var(--shop-muted); margin: 0 0 var(--sf-s5); max-width: 62ch; font-size: 1.0625rem; }
.sf-section-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--sf-s4); margin: var(--sf-s7) 0 var(--sf-s4); flex-wrap: wrap;
}
.sf-section-head h2 { margin: 0; }
.sf-section-head a, .sf-section-head p { font-size: .9375rem; color: var(--shop-muted); margin: 0; }
.sf-section-head a { font-weight: 600; }
.sf-grid {
display: grid; gap: var(--sf-gap); list-style: none; margin: 0; padding: 0;
grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}
@media (max-width: 40rem) {
.sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-s3); }
}
.sf-card {
border-radius: var(--sf-radius-lg); overflow: hidden;
display: flex; flex-direction: column; background: var(--shop-surface);
box-shadow: 0 0 0 1px var(--sf-edge), var(--sf-shadow);
transition: box-shadow .2s ease, transform .2s ease;
}
.sf-card:hover { box-shadow: 0 0 0 1px var(--shop-line), var(--sf-shadow-lift); transform: translateY(-3px); }
.sf-card a.sf-card-link { text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.sf-card .sf-shot { transition: transform .4s ease; }
.sf-card:hover .sf-shot { transform: scale(1.04); }
.sf-shot { aspect-ratio: 4 / 3; background: var(--sf-tint); display: block; width: 100%; object-fit: cover; }
.sf-shot-empty {
aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
background: var(--sf-tint);
}
.sf-shot-empty { flex-direction: column; gap: var(--sf-s2); color: var(--shop-muted); }
.sf-noimg { width: 22%; min-width: 2.25rem; max-width: 4rem; height: auto; opacity: .7; }
.sf-noimg-text { font-size: .75rem; font-weight: 600; letter-spacing: .02em; opacity: .85; }
.sf-shot-empty.sf-t1 { background: color-mix(in srgb, var(--shop-accent) 5%, var(--shop-surface)); }
.sf-shot-empty.sf-t2 { background: color-mix(in srgb, var(--shop-accent) 9%, var(--shop-surface)); }
.sf-shot-empty.sf-t3 { background: color-mix(in srgb, var(--shop-accent) 13%, var(--shop-surface)); }
.sf-shot-empty.sf-t4 { background: color-mix(in srgb, var(--shop-accent) 17%, var(--shop-surface)); }
.sf-shot-empty.sf-t5 { background: color-mix(in srgb, var(--shop-accent) 21%, var(--shop-surface)); }
.sf-shot-empty.sf-t6 { background: color-mix(in srgb, var(--shop-accent) 25%, var(--shop-surface)); }
.sf-card-body { padding: var(--sf-s4) var(--sf-s4) var(--sf-s4); display: flex; flex-direction: column; gap: var(--sf-s2); flex: 1; position: relative; z-index: 1; background: var(--shop-surface); }
.sf-card-name { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.01em; }
.sf-card-chips { display: flex; flex-wrap: wrap; gap: var(--sf-s1); margin: 0; }
.sf-card-foot { margin-top: auto; padding-top: var(--sf-s2); display: flex; align-items: baseline; gap: var(--sf-s2); flex-wrap: wrap; }
.sf-card-foot .sf-price { font-size: 1.1875rem; }
.sf-price { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--shop-accent); letter-spacing: -.01em; }
.sf-price-basis { font-weight: 500; color: var(--shop-muted); font-size: var(--sf-small); }
.sf-note { color: var(--shop-muted); font-size: var(--sf-small); }
.sf-chip {
display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem;
border-radius: var(--sf-radius-pill); font-size: .75rem; line-height: 1.3; font-weight: 500;
background: transparent; color: var(--shop-muted); border: 1px solid var(--sf-edge);
}
.sf-chip-on { background: var(--sf-accent-soft); color: var(--shop-ink); border-color: transparent; font-weight: 600; }
.sf-chip-on::before {
content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--shop-accent); flex: 0 0 auto;
}
.sf-chip-off { background: transparent; }
.sf-tag {
display: inline-block; padding: .15rem .55rem; border-radius: var(--sf-radius-pill);
font-size: .75rem; border: 1px solid var(--sf-edge); color: var(--shop-muted);
}
.sf-panel {
border: 0;
border-radius: var(--sf-radius); padding: var(--sf-s4) var(--sf-s5); margin: 0 0 var(--sf-s5);
background: var(--sf-tint); box-shadow: none;
}
.sf-panel h2 { margin: 0 0 var(--sf-s1); font-size: 1.0625rem; }
.sf-panel p { margin: var(--sf-s1) 0 0; }
.sf-empty {
text-align: center; padding: var(--sf-s8) var(--sf-s5);
border-radius: var(--sf-radius-lg); background: var(--sf-tint);
}
.sf-empty h2 { margin: 0 0 var(--sf-s2); }
.sf-empty p { margin: 0 auto var(--sf-s5); max-width: 44ch; color: var(--shop-muted); }
.sf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sf-list .sf-card {
border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--sf-edge);
background: transparent; transform: none;
}
.sf-list .sf-card:first-child { border-top: 1px solid var(--sf-edge); }
.sf-list .sf-card:hover { transform: none; box-shadow: none; background: var(--sf-tint); }
.sf-list .sf-card-link { flex-direction: row; align-items: center; gap: var(--sf-s4); padding: 0; }
.sf-list .sf-card-body {
flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sf-s2) var(--sf-s4);
padding: var(--sf-s4) var(--sf-s3); width: 100%; background: transparent;
}
.sf-list .sf-card-name { flex: 1 1 14rem; font-size: 1.0625rem; }
.sf-list .sf-card-chips { order: 2; }
.sf-list .sf-card-foot { order: 3; margin: 0; padding: 0; justify-content: flex-end; min-width: 8rem; }
.sf-product { display: grid; gap: var(--sf-s6); align-items: start; }
@media (min-width: 60rem) {
.sf-product { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--sf-s7); }
}
.sf-hero-shot {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
border-radius: var(--sf-radius-lg); background: var(--sf-tint);
box-shadow: var(--sf-shadow);
}
.sf-gallery { display: grid; gap: var(--sf-s2); grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); margin-top: var(--sf-s3); }
.sf-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--sf-radius); display: block; }
.sf-buy {
border: 0; border-radius: var(--sf-radius-lg);
padding: var(--sf-s6); background: var(--shop-surface);
box-shadow: 0 0 0 1px var(--sf-edge), var(--sf-shadow-lift);
}
.sf-buy-price { display: flex; align-items: baseline; gap: var(--sf-s2); flex-wrap: wrap; margin: 0 0 var(--sf-s3); padding-bottom: var(--sf-s4); border-bottom: 1px solid var(--sf-edge); }
.sf-buy-price .sf-price { font-size: 2.25rem; letter-spacing: -.03em; line-height: 1; }
.sf-field { display: block; margin: 0 0 var(--sf-s4); }
.sf-field > label, .sf-label { display: block; font-weight: 700; margin: 0 0 var(--sf-s2); }
.sf-input, .sf-select, .sf-textarea {
font: inherit; min-height: 50px; width: 100%; padding: 0 var(--sf-s4);
border: 1px solid var(--shop-line); border-radius: var(--sf-radius);
background: var(--shop-surface); color: var(--shop-ink);
transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-input:focus, .sf-select:focus, .sf-textarea:focus {
outline: none; border-color: var(--shop-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft);
}
.sf-textarea { padding: var(--sf-s3) var(--sf-s4); min-height: 6rem; line-height: 1.5; }
.sf-input-short { width: 8rem; }
.sf-choice {
display: flex; gap: var(--sf-s3); align-items: flex-start;
padding: var(--sf-s3) var(--sf-s4); margin: 0 0 var(--sf-s2);
border: 1px solid var(--shop-line); border-radius: var(--sf-radius);
background: var(--shop-surface); cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.sf-choice:hover { background: var(--sf-tint); }
.sf-choice input, .ac-check input {
width: 1.35rem; height: 1.35rem; margin: .1rem 0 0; flex: 0 0 auto; accent-color: var(--shop-accent);
}
.sf-choice-text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1; }
.sf-choice-name { font-weight: 600; }
.sf-choice:has(input:checked) { border-color: var(--shop-accent); background: var(--sf-accent-soft); box-shadow: inset 0 0 0 1px var(--shop-accent); }
.sf-choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.sf-choice:has(input:focus-visible) { outline: 3px solid var(--shop-accent); outline-offset: 2px; }
.sf-fieldset { border: 0; margin: 0 0 var(--sf-s5); padding: 0; }
.sf-fieldset legend { font-weight: 700; padding: 0; margin: 0 0 var(--sf-s2); font-size: 1.0625rem; }
.sf-fold { border-top: 1px solid var(--sf-edge); }
.sf-fold > summary {
list-style: none; cursor: pointer; padding: var(--sf-s4) 0; font-weight: 700; font-size: 1.0625rem;
display: flex; align-items: center; justify-content: space-between; gap: var(--sf-s3);
min-height: 52px;
}
.sf-fold > summary::-webkit-details-marker { display: none; }
.sf-fold > summary::after {
content: "+"; display: inline-flex; align-items: center; justify-content: center;
width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--sf-tint);
color: var(--shop-ink); font-weight: 500; font-size: 1.125rem;
}
.sf-fold[open] > summary::after { content: "\2212"; }
.sf-fold-body { padding: 0 0 var(--sf-s5); }
.sf-fold-head { margin: 0; padding: var(--sf-s4) 0; font-size: 1.0625rem; font-weight: 700; }
.sf-facts { border-collapse: collapse; width: 100%; }
.sf-facts th, .sf-facts td { text-align: left; padding: var(--sf-s3) 0; border-bottom: 1px solid var(--sf-edge); vertical-align: top; }
.sf-facts th { font-weight: 600; width: 42%; color: var(--shop-muted); }
.sf-facts tr:last-child th, .sf-facts tr:last-child td { border-bottom: 0; }
.sf-opts { list-style: none; margin: 0; padding: 0; }
.sf-opts li { padding: var(--sf-s2) 0; border-bottom: 1px solid var(--sf-edge); }
.sf-choices { margin: var(--sf-s1) 0 0; padding-left: 1.1rem; color: var(--shop-muted); font-size: .875rem; }
.sf-doc h3 { margin: var(--sf-s5) 0 var(--sf-s1); font-size: 1.125rem; }
.sf-doc p { margin: var(--sf-s2) 0; max-width: 68ch; }
.sf-doc ul, .sf-doc ol { margin: var(--sf-s2) 0; padding-left: 1.25rem; }
.sf-pager { display: flex; gap: var(--sf-s3); align-items: center; margin-top: var(--sf-s6); flex-wrap: wrap; justify-content: center; color: var(--shop-muted); }
.sf-foot {
margin-top: var(--sf-s7);
background: var(--shop-ink); color: var(--sf-foot-ink);
padding: var(--sf-s7) 0 var(--sf-s5);
}
.sf-foot a { color: var(--sf-foot-ink); text-decoration: none; }
.sf-foot a:hover { text-decoration: underline; }
.sf-foot-cols { display: grid; gap: var(--sf-s6); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.sf-foot h2 { font-size: 1rem; letter-spacing: -.01em; color: var(--sf-foot-ink); margin: 0 0 var(--sf-s3); }
.sf-foot p { color: var(--sf-foot-muted); }
.sf-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sf-foot li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--sf-foot-muted); }
.sf-foot li a:hover { color: var(--sf-foot-ink); }
.sf-foot-contact {
display: flex; flex-direction: column; gap: var(--sf-s1);
font-style: normal; color: var(--sf-foot-muted); font-size: .9375rem;
}
.sf-foot-contact a { display: inline-flex; align-items: center; min-height: 36px; color: var(--sf-foot-muted); }
.sf-foot :focus-visible { outline-color: var(--sf-foot-ink); }
.sf-crumbs a, .sf-standalone-link {
display: inline-flex; align-items: center; min-height: 24px;
}
.sf-crumbs { color: var(--shop-muted); font-size: .875rem; margin-bottom: var(--sf-s4); }
.sf-crumbs a { text-decoration: none; }
.sf-crumbs a:hover { color: var(--shop-ink); text-decoration: underline; }
.sf-foot-end {
margin-top: var(--sf-s6); padding-top: var(--sf-s4); border-top: 1px solid var(--sf-foot-line);
display: flex; flex-wrap: wrap; gap: var(--sf-s2) var(--sf-s4); justify-content: space-between;
color: var(--sf-foot-muted); font-size: var(--sf-small);
}
.sf-foot-end a { color: var(--sf-foot-muted); }
.sf-scroll { overflow-x: auto; }
.sf-staff { background: #1f2937; color: #f9fafb; padding: var(--sf-s2) 0; font-size: .875rem; }
.sf-staff a { color: #f9fafb; }
.sf-announcement {
background: var(--sf-accent-soft); color: var(--shop-ink);
padding: var(--sf-s3) 0; font-size: .9375rem; font-weight: 500; text-align: center;
}
@media (max-width: 48rem) {
.sf-wrap { padding: 0 var(--sf-s4); }
.sf-head-in { padding: var(--sf-s2) var(--sf-s4); min-height: 0; }
.sf-brand { min-width: 0; overflow: hidden; }
.sf-head-actions .sf-btn { padding: 0; width: 46px; position: relative; }
.sf-head-actions .sf-btn-label { position: absolute; left: -9999px; }
.sf-head-actions .sf-count { position: absolute; top: -4px; right: -4px; }
.sf-brand { font-size: 1.125rem; min-width: 0; }
.sf-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-btn { padding: 0 var(--sf-s4); }
main, main.sf-wrap { padding-top: var(--sf-s5); padding-bottom: var(--sf-s7); }
.sf-buy { padding: var(--sf-s5); }
.sf-card-body { padding: var(--sf-s3); }
.sf-card-name { font-size: .9375rem; }
.sf-card-foot .sf-price { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
.sf-card:hover, .sf-card:hover .sf-shot { transform: none; }
}
.sf-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sf-check {
display: flex; align-items: center; gap: .5rem;
min-height: 28px; padding: .1rem var(--sf-s2);
border-radius: var(--sf-radius); cursor: pointer;
font-size: .875rem; font-weight: 500; color: var(--shop-ink); line-height: 1.2;
}
.sf-check:hover { background: var(--sf-tint); }
.sf-check input {
flex: 0 0 auto; width: .9rem; height: .9rem; margin: 0;
accent-color: var(--shop-accent); cursor: pointer;
}
[aria-busy="true"] .sf-browse-main { opacity: .6; transition: opacity .15s ease; }