/* ==========================================================================
   SonosSpeaker Child — mobile-first
   Basis = telefoon. Uitbreidingen vanaf 600px en 900px.
   ========================================================================== */

/* Lettertypes lokaal (SIL Open Font License, zie assets/fonts). Geen Google Fonts nodig. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('../fonts/inter-latin.woff2') format('woff2-variations'), url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--ss-ink: #171514;
	--ss-ink2: #3A3A3A;
	--ss-muted: #666666;
	--ss-line: #E5E5E5;
	--ss-stone: #F5F5F5;
	--ss-stone2: #E8E8E8;
	--ss-tilebg: #F5F5F5;
	--ss-sig: #FF5F0F;
	--ss-price: #D83523;
	--ss-sigink: #B23A0B;
	--ss-good: #17724A;
	--ss-goodbg: #E6F2EA;
	--ss-wait: #875500;
	--ss-waitbg: #FBF0D9;
	--ss-dark: #0F0D0C;
	--ss-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ss-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ss-gutter: 16px;
	--ss-hdr: 60px;
}

/* ---------- Basis ---------- */
body.ss-site {
	font-family: var(--ss-body);
	color: var(--ss-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
body.ss-site h1, body.ss-site h2, body.ss-site h3, body.ss-site h4 {
	font-family: var(--ss-display);
	color: var(--ss-ink);
	letter-spacing: -0.025em;
	line-height: 1.14;
	/* Ruimte voor de staarten van g, j, p, q en y: zo vallen ze nooit buiten het kopblok,
	   ook niet als een plugin of het moederthema daar iets afknipt. */
	padding-bottom: .08em;
	overflow: visible !important;
	text-overflow: clip;
}
.ss-scope { font-size: 16px; line-height: 1.55; color: var(--ss-ink); }
.ss-scope *, .ss-hdr *, .ss-foot *, .ss-mbar *, .ss-drawer * { box-sizing: border-box; }
.ss-scope p { margin: 0; }
.ss-scope h1, .ss-scope h2, .ss-scope h3 { margin: 0; font-weight: 700; }
.ss-scope img { max-width: 100%; height: auto; }

/* Astra-container laten wijken op onze templates */
.ss-layout .site-content > .ast-container { max-width: none; padding: 0; display: block; }
.ss-layout #primary, .ss-layout .site-main { margin: 0; padding: 0; width: 100%; }
.ss-layout .site-content { padding: 0; }

/* ---------- Hulpklassen ---------- */
.ss-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: var(--ss-gutter); padding-right: var(--ss-gutter); }
.ss-muted { color: var(--ss-muted); }
.ss-small { font-size: 14px; }
.ss-xs { font-size: 12px; }
.ss-center { text-align: center; align-self: center; }
.ss-lead { font-size: 17px; }
.ss-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ss-num { font-family: var(--ss-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
/* Prijzen in rood (zoals in de winkel); in donkere knoppen blijven ze wit. */
.ss-price-xl, .ss-offer-price, .ss-dcard-price .ss-num, .ss-mini-price .ss-num, .ss-mbar-price, .ss-pcard-foot .ss-num, .ss-rank-end .ss-num { color: var(--ss-price); }
.ss-num.is-noprice { color: var(--ss-ink); }
/* Centen klein en hoog: 34,⁹⁹ */
.ss-pr { white-space: nowrap; }
.ss-pr-c { display: inline-block; font-size: .55em; line-height: 1; vertical-align: top; margin-left: .04em; transform: translateY(.08em); letter-spacing: 0; }
.ss-pr-d { position: relative; width: .34em; height: .1em; margin: .44em 0 0 .06em; background: currentColor; border-radius: 1px; font-size: 1em; transform: none; }
.ss-h2 { font-size: clamp(26px, 7vw, 40px); }
.ss-h3 { font-size: clamp(20px, 5vw, 26px); }
.ss-fine { margin-top: 12px !important; font-size: 12px; color: var(--ss-muted); }
.ss-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-muted); }
.ss-eyebrow--light { color: #FF9A5C; }
.ss-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.ss-eq i { display: block; width: 3px; background: var(--ss-sig); border-radius: 1px; }
.ss-eq i:nth-child(1) { height: 6px; } .ss-eq i:nth-child(2) { height: 12px; } .ss-eq i:nth-child(3) { height: 8px; }
.ss-ico { flex: none; }
@media (max-width: 899px) { .ss-only-d { display: none !important; } }

/* ---------- Strip + header ---------- */
.ss-strip { background: var(--ss-ink); color: #D6D6D6; font-size: 12px; }
.ss-strip-in { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; }
.ss-strip a, .ss-strip a:hover, .ss-strip a:focus { color: #FF9A5C; font-weight: 700; text-decoration: none; white-space: nowrap; }

.ss-hdr { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--ss-line); }
.admin-bar .ss-hdr { top: 46px; }
@media (min-width: 783px) { .admin-bar .ss-hdr { top: 32px; } }
.ss-hdr-in { display: flex; align-items: center; gap: 4px; height: var(--ss-hdr); }
.ss-logo, .ss-logo:hover, .ss-logo:focus { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ss-ink); margin-right: auto; }
.ss-wordmark { font-family: var(--ss-display); font-size: 19px; letter-spacing: -0.02em; font-weight: 700; }
.ss-wordmark span { color: var(--ss-muted); font-weight: 500; }
.ss-logo--light, .ss-logo--light .ss-wordmark { color: #fff; }
.ss-mark-img { display: block; flex: none; object-fit: contain; }
.ss-mark-img.is-light { filter: invert(1); } /* zwart rondje met witte S wordt wit met zwarte S op de donkere footer */
.ss-logo--light .ss-wordmark span { color: #BDBDBD; }

button.ss-ibtn, button.ss-ibtn:focus { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 6px; color: var(--ss-ink); cursor: pointer; padding: 0; box-shadow: none; }
button.ss-ibtn:hover { background: var(--ss-stone); color: var(--ss-ink); }
button.ss-ibtn--dark, button.ss-ibtn--dark:focus, button.ss-ibtn--dark:hover { width: 52px; height: 52px; background: var(--ss-ink); color: #fff; border-radius: 8px; flex: none; }

.ss-nav { display: none; }
.ss-nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.ss-nav-list > li { position: relative; }
.ss-nav-list > li > a { display: flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 12px; color: var(--ss-ink2); border-radius: 6px; cursor: pointer; }
.ss-nav-list > li > a .ss-ico { opacity: .55; transition: transform .15s; }
.ss-nav-list > li:hover > a .ss-ico, .ss-nav-list > li:focus-within > a .ss-ico { transform: rotate(180deg); }
.ss-nav-list > li > a:hover, .ss-nav-list > li > a:focus-visible, .ss-nav-list > li:focus-within > a { background: var(--ss-stone); color: var(--ss-ink); }
.ss-nav-list > li.is-current > a, .ss-nav-list > li > a[aria-current] { color: var(--ss-ink); box-shadow: inset 0 -2px 0 var(--ss-ink); border-radius: 6px 6px 0 0; }
.ss-nav-list .ss-bf > a, .ss-nav-list .ss-bf > a:hover { color: var(--ss-sigink); }
.ss-nav-list .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; list-style: none; margin: 0; padding: 8px; background: #fff; border: 1px solid var(--ss-line); border-radius: 12px; box-shadow: 0 24px 48px -24px rgba(23,21,20,.35); z-index: 50; }
.ss-nav-list > li::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.ss-nav-list li:hover > .sub-menu, .ss-nav-list li:focus-within > .sub-menu { display: block; }
.ss-nav-list .sub-menu a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ss-ink); font-size: 15px; }
.ss-nav-list .sub-menu a:hover, .ss-nav-list .sub-menu a:focus-visible, .ss-nav-list .sub-menu a[aria-current] { background: var(--ss-stone); color: var(--ss-ink); }

.ss-searchrow { display: flex; gap: 8px; margin: 0; }
input.ss-field, input.ss-field[type="search"], input.ss-field[type="email"], input.ss-field[type="text"] { min-height: 52px; height: auto; border: 1.5px solid var(--ss-line); border-radius: 8px; padding: 0 14px; font: inherit; font-size: 16px; width: 100%; background: #fff; color: var(--ss-ink); box-sizing: border-box; box-shadow: none; }
input.ss-field:focus { outline: 2px solid var(--ss-ink); outline-offset: 1px; border-color: var(--ss-ink); }

/* Pop-ups (menu en zoeken): native popover, met .is-open als terugval voor oude browsers. */
.ss-pop { display: none; position: fixed; z-index: 1000; margin: 0; border: 0; padding: 0; background: #fff; color: var(--ss-ink); max-width: none; max-height: none; overflow: auto; box-sizing: border-box; }
.ss-pop.is-open { display: block; }
.ss-pop::backdrop { background: rgba(15,13,12,.5); }
.ss-pop-bg { position: fixed; inset: 0; z-index: 999; background: rgba(15,13,12,.5); }
@supports selector(:popover-open) {
	.ss-pop:popover-open { display: block; }
}
:root:has(.ss-drawer:popover-open), :root:has(.ss-drawer.is-open) { overflow: hidden; }
.ss-drawer { inset: 0 0 0 auto; width: min(90vw, 400px); height: 100%; height: 100dvh; padding: 0 20px calc(28px + env(safe-area-inset-bottom)); box-shadow: -24px 0 48px -24px rgba(0,0,0,.35); overscroll-behavior: contain; }
.ss-drawer:popover-open, .ss-drawer.is-open { animation: ss-slide-in .22s cubic-bezier(.2,.8,.2,1); }
@keyframes ss-slide-in { from { transform: translateX(100%); } to { transform: none; } }
.ss-drawer-top { position: sticky; top: 0; z-index: 2; background: #fff; display: flex; align-items: center; justify-content: space-between; height: 64px; margin: 0 -20px 12px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--ss-line); }
.ss-drawer-top .ss-logo { margin: 0; }
.ss-drawer .ss-searchrow { margin-bottom: 8px; }
.ss-drawer .ss-searchrow .ss-field { min-height: 48px; }
.ss-drawer .ss-searchrow .ss-ibtn--dark { width: 48px; height: 48px; }
.ss-dlist, .ss-dsub { list-style: none; margin: 0; padding: 0; }
.ss-dlist > li { border-bottom: 1px solid var(--ss-line); }
.ss-dlink, .ss-dlink:visited { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; font-family: var(--ss-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; text-decoration: none; color: var(--ss-ink); cursor: pointer; list-style: none; }
.ss-dlink::-webkit-details-marker { display: none; }
.ss-dlink .ss-ico { color: var(--ss-muted); transition: transform .2s; flex: none; }
details[open] > .ss-dlink .ss-ico { transform: rotate(180deg); }
.ss-dlist .ss-bf .ss-dlink { color: var(--ss-sigink); }
.ss-dsub { padding: 0 0 12px; display: grid; gap: 2px; }
.ss-dsub a, .ss-dsub a:visited { display: flex; align-items: center; min-height: 46px; padding: 0 12px; border-radius: 8px; text-decoration: none; color: var(--ss-ink2); font-size: 16px; background: var(--ss-stone); }
.ss-dsub a[aria-current] { color: var(--ss-ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--ss-ink); }
.ss-dsub a.ss-dall { background: transparent; color: var(--ss-ink); font-weight: 700; gap: 6px; }
.ss-drawer-cta { margin-top: 20px; }
.ss-drawer-note { margin: 14px 0 0; text-align: center; }
.ss-search { inset: 0 0 auto 0; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--ss-line); box-shadow: 0 24px 48px -24px rgba(0,0,0,.35); }
.ss-search-in { display: flex; gap: 8px; align-items: center; }
.ss-search-in .ss-searchrow { flex: 1; }
.admin-bar .ss-search, .admin-bar .ss-drawer { top: 46px; }
.admin-bar .ss-drawer { height: calc(100dvh - 46px); }
@media (min-width: 783px) { .admin-bar .ss-search, .admin-bar .ss-drawer { top: 32px; } .admin-bar .ss-drawer { height: calc(100dvh - 32px); } }

/* Astra-titelbanner op gewone pagina's en berichten in de huisstijl (lichtgrijs, donkere titel). */
body.ss-site .ast-single-entry-banner, body.ss-site .ast-single-entry-banner[data-post-type], body.ss-site .ast-archive-entry-banner { background: var(--ss-stone) !important; background-image: none !important; border-bottom: 1px solid var(--ss-line); padding-top: 40px !important; padding-bottom: 40px !important; }
body.ss-site .ast-single-entry-banner .entry-title, body.ss-site .ast-single-entry-banner h1, body.ss-site .ast-archive-entry-banner h1 { color: var(--ss-ink) !important; font-family: var(--ss-display) !important; font-weight: 700 !important; letter-spacing: -0.02em; font-size: clamp(28px, 6vw, 44px) !important; line-height: 1.12 !important; padding-bottom: .08em; overflow: visible !important; }
body.ss-site .ast-single-entry-banner, body.ss-site .ast-single-entry-banner * { color: var(--ss-ink2); }
body.ss-site .ast-single-entry-banner a { color: var(--ss-ink) !important; }

/* ---------- Kruimelpad ---------- */
.ss-crumbs { display: flex; gap: 6px; font-size: 13px; color: var(--ss-muted); white-space: nowrap; overflow-x: auto; padding: 12px 0; }
.ss-crumbs a, .ss-crumbs a:hover { color: var(--ss-muted); text-decoration: none; }
.ss-crumbs .separator, .ss-crumbs .ss-sep { color: #B0B0B0; }
.ss-crumbs .rank-math-breadcrumb p { margin: 0; }
.ss-crumbs .rank-math-breadcrumb .separator { margin: 0 4px; }

/* ---------- Knoppen ---------- */
.ss-cta, .ss-cta:hover, .ss-cta:focus, .ss-cta:visited { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 0 10px 0 20px; border-radius: 8px; background: var(--ss-ink); color: #fff; text-decoration: none; font-family: var(--ss-body); font-weight: 700; font-size: 16px; line-height: 1.2; border: 0; cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s; box-shadow: none; }
.ss-cta:hover, .ss-cta:focus { background: #2E2A27; color: #fff; box-shadow: 0 10px 22px -14px rgba(23,21,20,.6); }
.ss-cta-arr { transition: transform .18s ease; }
.ss-cta:hover .ss-cta-arr, .ss-cta:focus-visible .ss-cta-arr { transform: translateX(3px); }
.ss-cta:active { transform: scale(.99); }
.ss-cta:focus-visible { outline: 3px solid var(--ss-sig); outline-offset: 2px; }
.ss-cta-lab { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-cta-pr { font-family: var(--ss-display); font-variant-numeric: tabular-nums; font-size: 17px; white-space: nowrap; }
.ss-cta-arr { width: 38px; height: 38px; border-radius: 6px; background: var(--ss-sig); color: var(--ss-ink); display: grid; place-items: center; flex: none; transition: transform .18s ease; }
.ss-cta--orange, .ss-cta--orange:hover, .ss-cta--orange:focus, .ss-cta--orange:visited { background: var(--ss-sig); color: var(--ss-ink); }
.ss-cta--orange:hover, .ss-cta--orange:focus { background: #FF7A33; }
.ss-cta--orange .ss-cta-arr { background: var(--ss-ink); color: #fff; }
.ss-cta--sm, .ss-cta--sm:hover, .ss-cta--sm:focus { min-height: 48px; font-size: 14px; padding: 0 6px 0 14px; border-radius: 6px; gap: 8px; }
.ss-cta--sm .ss-cta-arr { width: 34px; height: 34px; }
.ss-cta--auto, .ss-cta--auto:hover, .ss-cta--auto:focus { width: auto; min-width: 160px; }
.ss-cta--light, .ss-cta--light:visited { background: #fff; color: var(--ss-ink); }
.ss-cta--light:hover, .ss-cta--light:focus { background: #EDEDED; color: var(--ss-ink); }
.ss-cta--light.ss-cta--orange, .ss-cta--light.ss-cta--orange:hover { background: var(--ss-sig); color: var(--ss-ink); }

.ss-btn2, .ss-btn2:visited { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border-radius: 8px; border: 1.5px solid var(--ss-ink); background: #fff; color: var(--ss-ink); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; font-family: var(--ss-body); }
.ss-btn2:hover, .ss-btn2:focus { background: var(--ss-ink); color: #fff; }
.ss-btn2--dark, .ss-btn2--dark:visited { background: transparent; border-color: #5A5A5A; color: #fff; }
.ss-btn2--dark:hover, .ss-btn2--dark:focus { background: #fff; color: var(--ss-ink); border-color: #fff; }
.ss-tlink, .ss-tlink:visited { font-weight: 700; color: var(--ss-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.ss-tlink:hover, .ss-tlink:focus { color: var(--ss-sigink); }

/* ---------- Labels ---------- */
.ss-verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--ss-goodbg); color: var(--ss-good); white-space: nowrap; }
.ss-verdict--wait { background: var(--ss-waitbg); color: var(--ss-wait); }
.ss-verdict--mid { background: var(--ss-stone); color: var(--ss-ink2); padding-left: 10px; }
.ss-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: var(--ss-stone); color: var(--ss-ink2); white-space: nowrap; line-height: 1.4; }
.ss-tag--sig { background: var(--ss-sigink); color: #fff; }
.ss-tag--ink { background: var(--ss-ink); color: #fff; }

/* ---------- Vlakken ---------- */
.ss-tile { background: var(--ss-tilebg); border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ss-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8%; }
.ss-card { background: #fff; border: 1px solid var(--ss-line); border-radius: 10px; }
.ss-band { background: var(--ss-stone); }
.ss-grid2 { display: grid; gap: 16px; }
.ss-grid2--wide { gap: 40px; }

/* ---------- Prijsmeter + koopblok ---------- */
.ss-pricebox { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--ss-stone); }
.ss-pricebox-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ss-price-xl { font-size: 40px; }
.ss-meter { position: relative; height: 8px; border-radius: 999px; background: var(--ss-stone2); }
.ss-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--ss-good); }
.ss-meter-fill--mid { background: #8A8A8A; }
.ss-meter-fill--wait { background: #C08A2E; }
.ss-meter-dot { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; border: 3px solid var(--ss-ink); }
.ss-meter-l { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ss-muted); margin-top: 8px; }
.ss-trust { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--ss-line); }
.ss-trust li { display: flex; gap: 12px; align-items: center; min-height: 46px; padding: 10px 0; border-bottom: 1px solid var(--ss-line); font-size: 14px; line-height: 1.35; margin: 0; }
.ss-trust li > .ss-ico, .ss-trust-link > .ss-ico { flex: none; color: var(--ss-ink2); }
.ss-trust strong { color: var(--ss-ink); font-weight: 700; }
.ss-trust .ss-muted::before { content: '· '; }

/* ---------- Producthero ---------- */
.ss-pd-hero { display: grid; gap: 16px; grid-template-areas: "head" "media" "buy" "lead"; padding-bottom: 8px; }
.ss-pd-lead { grid-area: lead; margin: 0; }
.ss-pd-head { grid-area: head; display: flex; flex-direction: column; gap: 10px; }
.ss-pd-media { grid-area: media; min-width: 0; }
.ss-pd-buy { grid-area: buy; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ss-pd-title { font-size: clamp(29px, 8vw, 54px); }
.ss-pd-img { aspect-ratio: 4 / 3; width: 100%; max-height: 300px; border-radius: 16px; }
.ss-pd-img img { padding: 10%; }
.ss-pd-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
[data-ss-variant][hidden] { display: none !important; }
html:has(.ss-swatches) .ss-offer .ss-color { display: none; }
.ss-gal-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; }
.ss-gal-track::-webkit-scrollbar { display: none; }
.ss-gal-slide { scroll-snap-align: start; }
.ss-gal-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.ss-gal-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--ss-stone2); transition: width .2s; }
.ss-gal-dots i.is-on { background: var(--ss-ink); width: 18px; }
.ss-gal-thumb { position: relative; cursor: pointer; aspect-ratio: 1 / 1; margin: 0; }
.ss-gal-thumb input, .ss-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ss-gal-thumb:hover { outline: 1px solid var(--ss-stone2); outline-offset: -1px; }
.ss-gal-thumb:has(input:checked), .ss-gal-thumb.is-on { outline: 2px solid var(--ss-ink); outline-offset: -2px; }
.ss-gal-thumb:has(input:focus-visible) { outline: 2px solid var(--ss-sig); outline-offset: 2px; }
.ss-swatches { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ss-sw { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--sw); border: 1px solid #CFCFCF; cursor: pointer; flex: none; }
.ss-sw::before { content: ''; position: absolute; inset: -6px; }
.ss-sw:has(input:checked), .ss-sw.is-on { outline: 2px solid var(--ss-ink); outline-offset: 3px; }
.ss-sw:has(input:focus-visible) { outline: 2px solid var(--ss-sig); outline-offset: 3px; }
.ss-pd-var { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ss-pd-thumbs .ss-tile { aspect-ratio: 1 / 1; }
.ss-art-head { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; max-width: 860px; }
.ss-pd-body { display: grid; gap: 0; }
.ss-pd-main { min-width: 0; }
.ss-pd-aside { display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; }

/* ---------- Secties ---------- */
.ss-sec { padding-top: 40px; padding-bottom: 40px; }
.ss-sec .ss-sec, .ss-col .ss-sec { padding-top: 0; padding-bottom: 0; }
.ss-sec + .ss-sec { padding-top: 0; }
.ss-col { min-width: 0; }
.ss-col > * + * { margin-top: 14px; }
.ss-col > .ss-h2 + p { margin-top: 10px; }
.ss-sec-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.ss-sec-head--link { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 12px; }
.ss-sec-head-in { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ss-sec-head .ss-tlink { white-space: nowrap; }

/* ---------- Prijsrijen ---------- */
.ss-offers { display: grid; gap: 8px; }
.ss-offer, .ss-offer:visited, .ss-offer:hover, .ss-offer:focus { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--ss-line); border-radius: 12px; text-decoration: none; color: var(--ss-ink); background: #fff; min-height: 84px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ss-offer:hover, .ss-offer:focus-visible { border-color: var(--ss-ink); box-shadow: 0 12px 28px -20px rgba(23,21,20,.55); transform: translateY(-1px); }
.ss-offer:focus-visible { outline: 3px solid var(--ss-sig); outline-offset: 2px; }
.ss-offer.is-best { border: 2px solid var(--ss-sig); padding: 15px 17px; }
.ss-offer.is-best:hover, .ss-offer.is-best:focus-visible { border-color: var(--ss-sig); box-shadow: 0 12px 28px -20px rgba(255,95,15,.55); }
.ss-offer.is-best .ss-go { color: var(--ss-sigink); }
.ss-go .ss-ico { transition: transform .18s ease; }
.ss-offer:hover .ss-go .ss-ico, .ss-offer:focus-visible .ss-go .ss-ico { transform: translateX(3px); }
.ss-offer:hover .ss-go, .ss-offer:focus-visible .ss-go { text-decoration: underline; text-underline-offset: 3px; }
.ss-offer.is-out { opacity: .65; }
.ss-shop { width: 52px; height: 52px; border-radius: 10px; background: #fff; border: 1px solid var(--ss-line); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--ss-ink2); flex: none; overflow: hidden; }
.ss-shop img { width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; }
.ss-offer-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ss-offer-name { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 16px; line-height: 1.2; }
.ss-offer-title { font-size: 12px; color: var(--ss-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-offer-end { display: flex; align-items: center; gap: 18px; }
.ss-offer-pr { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; min-width: 84px; }
.ss-offer-was { font-size: 12px; color: var(--ss-muted); white-space: nowrap; }
.ss-offer-was s { text-decoration-thickness: 1px; }
.ss-offer-cta, .ss-offer-cta:hover { width: auto; min-width: 168px; }
.ss-offer:hover .ss-offer-cta, .ss-offer:focus-visible .ss-offer-cta { background: #2E2A27; box-shadow: 0 10px 22px -14px rgba(23,21,20,.6); }
.ss-offer:hover .ss-offer-cta .ss-cta-arr, .ss-offer:focus-visible .ss-offer-cta .ss-cta-arr { transform: translateX(3px); }
.ss-tag--off { background: var(--ss-price); color: #fff; }
.ss-offer { position: relative; }
.ss-offer.is-best { margin-top: 26px; border-top-left-radius: 0; }
.ss-offer-flag { position: absolute; left: -2px; bottom: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 4px; border-radius: 8px 8px 0 0; background: var(--ss-sig); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.ss-offer-flag .ss-ico { color: #fff; }
.ss-offer-info.is-fast { color: var(--ss-good); font-weight: 600; }
.ss-offer-info.is-slow { color: #B45309; }
.ss-offer-usp { flex-basis: 100%; display: inline-flex; align-items: flex-start; line-height: 1.4; gap: 6px; font-size: 13px; color: var(--ss-ink2); }
.ss-offer-usp .ss-ico { color: var(--ss-good); flex: none; margin-top: 2px; }
.ss-offer-price { font-size: 24px; white-space: nowrap; line-height: 1; }
.ss-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ss-good); font-weight: 600; }
.ss-stock i { width: 7px; height: 7px; border-radius: 50%; background: var(--ss-good); }
.ss-stock.is-out { color: var(--ss-muted); font-weight: 400; }
.ss-stock.is-out i { background: var(--ss-muted); }
.ss-color { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 6px; border-radius: 99px; background: var(--ss-stone); font-size: 12px; font-weight: 600; color: var(--ss-ink2); }
.ss-color i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); flex: none; }
.ss-offer-sub { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; }
.ss-offer-info { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ss-muted); }
.ss-offer-info .is-good { color: var(--ss-good); font-weight: 600; }
.ss-offer-info .ss-ico { flex: none; }
.ss-offer-info { align-items: flex-start; line-height: 1.35; }
.ss-offer-info .ss-ico { margin-top: 1px; }
@media (max-width: 599px) {
	.ss-offer-info .ss-sep { display: none; }
	.ss-offer-info .is-good { display: block; }
}
.ss-score { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ss-ink2); }
.ss-score .ss-ico { color: #E5A000; }
.ss-drop { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; background: var(--ss-goodbg); color: var(--ss-good); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ss-trust-link, .ss-trust-link:visited { display: flex; gap: 12px; align-items: center; width: 100%; color: var(--ss-ink); text-decoration: none; }
.ss-trust-link::after { content: '→'; margin-left: auto; padding-left: 8px; font-weight: 700; color: var(--ss-ink); }
.ss-trust-link:hover strong, .ss-trust-link:focus-visible strong { color: var(--ss-sigink); text-decoration: underline; text-underline-offset: 3px; }
.ss-mbar-all, .ss-mbar-all:visited { color: var(--ss-ink); text-decoration: underline; text-underline-offset: 2px; }
.ss-spec-h { font-size: 15px !important; letter-spacing: 0 !important; margin: 22px 0 6px !important; font-family: var(--ss-body) !important; text-transform: uppercase; letter-spacing: .08em !important; color: var(--ss-muted); font-weight: 700; }
.ss-shop.is-noimg::after { content: attr(data-ini); }
/* Prijzen met gewone (proportionele) cijfers: mooiere 1 zonder voetje. */
.ss-pr, .ss-price-xl, .ss-offer-price, .ss-mbar-price { font-variant-numeric: proportional-nums lining-nums; }
.ss-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; white-space: nowrap; }

/* ---------- Beoordelingen (bol) ---------- */
.ss-rating, .ss-rating:visited { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--ss-ink); text-decoration: none; }
a.ss-rating:hover .ss-muted { text-decoration: underline; }
.ss-stars { position: relative; display: inline-block; width: 80px; height: 15px; background: linear-gradient(90deg, #D9D9D9 0 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15'%3E%3Cpath d='M8 0l2.35 4.76 5.25.77-3.8 3.7.9 5.23L8 11.99 3.3 14.46l.9-5.23L.4 5.53l5.25-.77z'/%3E%3C/svg%3E") 0 0 / 16px 15px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15'%3E%3Cpath d='M8 0l2.35 4.76 5.25.77-3.8 3.7.9 5.23L8 11.99 3.3 14.46l.9-5.23L.4 5.53l5.25-.77z'/%3E%3C/svg%3E") 0 0 / 16px 15px repeat-x; flex: none; }
.ss-stars-on { position: absolute; inset: 0 auto 0 0; background: #F5A300; }
.ss-rating--sm { gap: 4px; font-size: 12px; font-weight: 700; }
.ss-rating--sm .ss-stars { width: 64px; height: 12px; -webkit-mask-size: 12.8px 12px; mask-size: 12.8px 12px; }

/* ---------- Specificaties, vragen, combineren ---------- */
.ss-specs { margin: 0; padding: 0; }
.ss-spec { display: grid; grid-template-columns: minmax(110px, 1fr) 1.4fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--ss-line); font-size: 15px; margin: 0; }
.ss-spec:last-child { border-bottom: 1px solid var(--ss-line); }
.ss-spec dt { color: var(--ss-muted); font-weight: 400; margin: 0; }
.ss-spec dd { font-weight: 700; margin: 0; }
.ss-faq p { margin: 0 0 16px; color: var(--ss-muted); }
.ss-pgrid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 76%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--ss-gutter)); padding: 0 var(--ss-gutter) 6px; scroll-padding-left: var(--ss-gutter); }
.ss-pgrid::-webkit-scrollbar { display: none; }
.ss-pcard, .ss-pcard:visited, .ss-pcard:hover { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ss-ink); scroll-snap-align: start; min-width: 0; }
.ss-pcard .ss-tile { aspect-ratio: 4 / 3; }
.ss-pcard .ss-eyebrow { margin-top: 6px; }
.ss-pcard-title { font-family: var(--ss-display); font-size: 19px; line-height: 1.2; }
.ss-pcard-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 2px; }
.ss-pcard-foot .ss-num { font-size: 20px; }
.ss-pcard:hover .ss-go, .ss-pcard:focus .ss-go { color: var(--ss-sigink); }

/* ---------- Tip, voors/tegens, koopmoment ---------- */
.ss-tip { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 10px; background: var(--ss-stone); margin: 8px 0; }
.ss-tip-in { display: flex; flex-direction: column; gap: 6px; }
.ss-tip-q { font-family: var(--ss-display); font-size: 20px; font-weight: 500; line-height: 1.35; }
.ss-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--ss-ink); color: #fff; display: grid; place-items: center; font-family: var(--ss-display); font-weight: 700; font-size: 22px; flex: none; }
.ss-pc { list-style: none; margin: 6px 0 0; padding: 0; }
.ss-pc li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ss-line); margin: 0; }
.ss-pc-ico { margin-top: 2px; }
.ss-pc-ico.is-pro { color: var(--ss-good); }
.ss-pc-ico.is-con { color: var(--ss-sigink); }
.ss-midcta { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 10px; background: var(--ss-ink); color: #fff; margin: 8px 0; }
.ss-midcta-line { font-family: var(--ss-display); font-size: 24px; font-weight: 700; line-height: 1.15; }

/* ---------- Lopende tekst (eigen inhoud) ---------- */
.ss-content { padding: 8px 0 40px; font-size: 17px; }
.ss-content > * + * { margin-top: 16px; }
.ss-content > h2 { font-size: clamp(26px, 7vw, 36px); margin: 40px 0 12px; }
.ss-content > h3 { font-size: clamp(20px, 5vw, 24px); margin: 28px 0 8px; }
.ss-content > :first-child { margin-top: 0; }
.ss-content p { margin: 0 0 14px; }
.ss-content ul, .ss-content ol { margin: 0 0 16px 1.2em; padding: 0; }
.ss-content li { margin: 4px 0; }
.ss-content a:not([class]) { color: var(--ss-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.ss-content a:not([class]):hover { color: var(--ss-sigink); }
.ss-content img { border-radius: 10px; }
.ss-content table, .ss-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; border: 0; margin: 0; }
.ss-content .wp-block-table { margin-left: 0; margin-right: 0; }
.ss-content tr:first-child th, .ss-content tr:first-child td { border-top: 1px solid var(--ss-line); }
.ss-content th, .ss-content td { text-align: left; padding: 12px 8px 12px 0; border: 0; border-bottom: 1px solid var(--ss-line); vertical-align: top; }
.ss-content th { color: var(--ss-muted); font-weight: 600; }
.ss-content .wp-block-table { overflow-x: auto; }
.ss-content blockquote { margin: 16px 0; padding: 16px 20px; background: var(--ss-stone); border: 0; border-radius: 10px; font-style: normal; }
.ss-content details, .ss-landing details { border-top: 1px solid var(--ss-line); margin: 0; }
.ss-content details:last-of-type, .ss-landing details:last-of-type { border-bottom: 1px solid var(--ss-line); }
.ss-content summary, .ss-landing summary { font-weight: 700; cursor: pointer; font-size: 16px; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ss-content summary::-webkit-details-marker, .ss-landing summary::-webkit-details-marker { display: none; }
.ss-content summary::after, .ss-landing summary::after { content: '+'; font-size: 24px; font-weight: 400; line-height: 1; color: var(--ss-muted); }
.ss-content details[open] > summary::after, .ss-landing details[open] > summary::after { content: '–'; }
.ss-content details > :not(summary), .ss-landing details > :not(summary) { margin: 0 0 16px; color: var(--ss-muted); }
.ss-content--article { max-width: 860px; }
.ss-article { padding-bottom: 48px; }
.ss-content--article .ss-sec, .ss-content--article .ss-compare, .ss-content--article .ss-grid2 { max-width: none; }

/* ---------- Dealkaarten ---------- */
.ss-dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ss-cols-1 .ss-dgrid { grid-template-columns: 1fr; }
.ss-dcard { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--ss-line); border-radius: 10px; background: #fff; min-width: 0; }
.ss-dcard-img { position: relative; display: block; }
.ss-dcard-img .ss-tile { aspect-ratio: 1 / 1; }
.ss-dcard-tag { position: absolute; top: 8px; left: 8px; background: #fff; }
.ss-dcard.is-pick { border: 2px solid var(--ss-ink); padding: 9px; }
.ss-dcard-pick { position: absolute; left: 8px; bottom: 8px; }
.ss-dcard-title { font-size: 16px !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; margin: 0; }
.ss-scope .ss-dcard-title a, .ss-scope .ss-dcard-title a:hover, .ss-scope .ss-dcard-title a:focus { color: var(--ss-ink); text-decoration: none; }
.ss-dcard-buy { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.ss-dcard-was { min-height: 16px; line-height: 16px; }
.ss-dcard-was s { text-decoration-thickness: 1px; }
.ss-dcard-price { display: block; line-height: 1; }
.ss-dcard-buy .ss-dcard-meta { margin: 4px 0 10px; }
.ss-dcard-off { position: absolute; top: 8px; right: 8px; padding: 4px 8px; border-radius: 6px; background: var(--ss-price); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; font-variant-numeric: proportional-nums; }
.ss-dcard-price .ss-num { font-size: 26px; }
.ss-dcard .ss-cta { margin-top: 0; }
.ss-cards-scroll .ss-dgrid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(220px, 72%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--ss-gutter); scroll-padding-right: var(--ss-gutter); margin: 0 calc(var(--ss-gutter) * -1); padding: 0 var(--ss-gutter) 6px; }
.ss-cards-scroll .ss-dcard { scroll-snap-align: start; }

/* ---------- Ranglijst ---------- */
.ss-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ss-rank-list li { margin: 0; }
.ss-rank, .ss-rank:visited, .ss-rank:hover, .ss-rank:focus { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--ss-line); border-radius: 10px; text-decoration: none; color: var(--ss-ink); background: #fff; }
.ss-rank:hover, .ss-rank:focus { border-color: var(--ss-ink); }
.ss-rank-n { font-family: var(--ss-display); font-weight: 700; font-size: 26px; width: 22px; text-align: center; color: var(--ss-sigink); flex: none; }
.ss-rank-img { width: 68px; height: 68px; flex: none; }
.ss-rank-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ss-rank-main strong { font-family: var(--ss-display); font-size: 18px; line-height: 1.15; }
.ss-rank-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ss-rank-end .ss-num { font-size: 22px; }

/* ---------- Mini-koopblok ---------- */
.ss-mini { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ss-mini-top { display: flex; gap: 12px; align-items: center; }
.ss-mini-img { width: 56px; height: 56px; flex: none; }
.ss-mini-price { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ss-mini-price .ss-num { font-size: 30px; }

/* ---------- Vaste koopbalk (mobiel) ---------- */
.ss-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; gap: 12px; padding: 10px var(--ss-gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--ss-line); box-shadow: 0 -10px 24px -18px rgba(23,21,20,.45); }
.ss-mbar-img { width: 44px; height: 44px; flex: none; }
/* Astra 'naar boven'-knop: huisstijl en boven de koopbalk */
body.ss-site #ast-scroll-top { background-color: var(--ss-ink); color: #fff; border-radius: 8px; }
body.ss-site #ast-scroll-top:hover { background-color: var(--ss-ink2); }
body.ss-has-mbar #ast-scroll-top, body:has(.ss-mbar) #ast-scroll-top { bottom: 96px; }
.ss-mbar-main { flex: 1; min-width: 0; }
.ss-mbar-price { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ss-has-mbar, body:has(.ss-mbar) { padding-bottom: 76px; }
/* Met JavaScript: balk pas tonen als de hoofdknop uit beeld is. */
.ss-js .ss-mbar { transform: translateY(110%); transition: transform .25s ease; }
.ss-js .ss-mbar.is-on { transform: none; }

/* ---------- Prijsalert ---------- */
.ss-alert { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--ss-line); border-radius: 10px; background: #fff; }
.ss-alert-text { display: flex; flex-direction: column; gap: 8px; }
.ss-alert--dark { background: var(--ss-dark); color: #fff; border-color: var(--ss-dark); border-radius: 12px; padding: 24px; margin: 40px 0; }
.ss-alert--dark h2, .ss-alert--dark .ss-h3 { color: #fff; }
.ss-alert--dark p { color: #D6D6D6; }
.ss-alert-form input[type="email"], .ss-alert-form input[type="text"], .ss-alert-form input[type="number"] { min-height: 50px; border: 1.5px solid var(--ss-line); border-radius: 8px; padding: 0 14px; font: inherit; width: 100%; box-sizing: border-box; background: #fff; color: var(--ss-ink); }
.ss-alert-form label { display: block; margin: 10px 0 6px; font-size: 14px; font-weight: 600; }
.ss-alert-form small { display: block; margin-top: 8px; font-size: 12px; }
.ss-alert-form button, .ss-alert-form input[type="submit"], .ss-alert-form .btn { margin-top: 12px; width: 100%; font-size: 15px; cursor: pointer; }
.ss-alert-form button, .ss-alert-form input[type="submit"], .ss-alert-form .btn { min-height: 50px; border-radius: 8px; background: var(--ss-ink); color: #fff; border: 0; font-weight: 700; padding: 0 18px; }
.ss-alert--dark .ss-alert-form button, .ss-alert--dark .ss-alert-form input[type="submit"], .ss-alert--dark .ss-alert-form .btn { background: var(--ss-sig); color: var(--ss-ink); }
.ss-alert--dark .ss-alert-form, .ss-alert--dark .ss-alert-form label, .ss-alert--dark .ss-alert-form small { color: #D6D6D6; }

/* ---------- Vergelijking ---------- */
.ss-answer { padding: 20px; border-radius: 10px; background: var(--ss-ink); color: #fff; display: flex; flex-direction: column; gap: 10px; margin: 8px 0 20px; }
.ss-answer p { font-family: var(--ss-display); font-size: clamp(20px, 5vw, 26px); font-weight: 600; line-height: 1.25; color: #fff; margin: 0; }
.ss-compare { margin: 8px 0 0; }
.ss-cmp-head { position: sticky; top: var(--ss-hdr); z-index: 5; background: rgba(255,255,255,.97); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 0; border-bottom: 2px solid var(--ss-ink); font-family: var(--ss-display); font-weight: 700; font-size: 17px; }
.ss-cmp-head .ss-cmp-k { display: none; }
.ss-cmp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--ss-line); font-size: 15px; }
.ss-cmp-k { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-muted); }
.ss-win { font-weight: 700; display: flex; gap: 8px; align-items: flex-start; }
.ss-win::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ss-good); margin-top: 7px; flex: none; }
.ss-pick { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--ss-line); border-radius: 10px; background: #fff; }
.ss-pick.is-featured { border: 2px solid var(--ss-ink); padding: 19px; }
.ss-pick ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Black Friday ---------- */
.ss-bf-hero { background: var(--ss-dark); color: #fff; }
.ss-bf-hero-in { padding-top: 32px; padding-bottom: 36px; align-items: end; gap: 28px; }
.ss-bf-hero .ss-eyebrow { color: #FF9A5C; }
.ss-bf-title { font-size: clamp(38px, 10vw, 68px) !important; letter-spacing: -0.04em !important; line-height: 1.04 !important; padding-bottom: .1em; color: #fff !important; }
.ss-bf-hero .ss-lead { color: #D6D6D6; }
.ss-on-dark-muted { color: #BDBDBD; }
.ss-cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ss-cd > div { background: #1E1B19; border: 1px solid #34302D; border-radius: 8px; padding: 12px 4px; text-align: center; }
.ss-cd .ss-num { font-size: 32px; color: var(--ss-sig); display: block; }
.ss-cd small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #BDBDBD; margin-top: 6px; }
.ss-chips { background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ss-line); }
.ss-chips.is-sticky { position: sticky; top: var(--ss-hdr); z-index: 20; }
.admin-bar .ss-chips.is-sticky { top: calc(var(--ss-hdr) + 46px); }
@media (min-width: 783px) { .admin-bar .ss-chips.is-sticky { top: calc(var(--ss-hdr) + 32px); } }
.ss-chips-in { position: relative; display: flex; gap: 8px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; scrollbar-width: none; }
.ss-chips-in::-webkit-scrollbar { display: none; }
.ss-chip, .ss-chip:visited { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ss-line); background: #fff; font-weight: 600; font-size: 14px; color: var(--ss-ink); text-decoration: none; }
.ss-chip:hover, .ss-chip:focus { border-color: var(--ss-ink); color: var(--ss-ink); }
.ss-chip.is-on, .ss-chip.is-on:hover { background: var(--ss-ink); border-color: var(--ss-ink); color: #fff; }

/* ---------- Home ---------- */
.ss-home-hero { padding-top: 28px; padding-bottom: 8px; gap: 28px; align-items: center; }
.ss-home-title { font-size: clamp(36px, 10vw, 68px) !important; letter-spacing: -0.035em !important; line-height: 1.05 !important; padding-bottom: .1em; }
.ss-qchips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
.ss-qchip, .ss-qchip:visited { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--ss-stone); text-decoration: none; font-weight: 600; font-size: 14px; color: var(--ss-ink); }
.ss-qchip:hover, .ss-qchip:focus { background: var(--ss-stone2); color: var(--ss-ink); }
.ss-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 28px; font-size: 13px; }
.ss-stats > span { display: flex; flex-direction: column; gap: 4px; }
.ss-stats .ss-num { font-size: 22px; }
.ss-bfcard, .ss-bfcard:visited, .ss-bfcard:hover, .ss-bfcard:focus { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 12px; background: var(--ss-dark); color: #fff; text-decoration: none; }
.ss-bfcard .ss-eyebrow { color: #FF9A5C; }
.ss-bfcard-title { font-family: var(--ss-display); font-weight: 700; font-size: clamp(30px, 8vw, 44px); line-height: 1.1; padding-bottom: .06em; letter-spacing: -0.03em; }
.ss-bfcard-days { display: flex; align-items: baseline; gap: 10px; color: #D6D6D6; }
.ss-bfcard-days .ss-num { font-size: 56px; color: var(--ss-sig); }
.ss-cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ss-ccard, .ss-ccard:visited { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 128px; padding: 16px; border-radius: 10px; background: var(--ss-stone); text-decoration: none; color: var(--ss-ink); }
.ss-ccard:hover, .ss-ccard:focus { background: var(--ss-stone2); color: var(--ss-ink); }
.ss-ccard strong { display: block; font-family: var(--ss-display); font-size: 19px; }
.ss-ccard-ico { width: 44px; height: 44px; border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--ss-ink); }
.ss-ccard:hover .ss-ccard-ico { color: var(--ss-sigink); }
.ss-steps { display: grid; gap: 12px; }
.ss-step { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--ss-line); border-radius: 10px; background: #fff; }
.ss-step-n { width: 32px; height: 32px; border-radius: 50%; background: var(--ss-ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.ss-rowlink, .ss-rowlink:visited { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-top: 1px solid var(--ss-line); text-decoration: none; font-weight: 700; min-height: 56px; color: var(--ss-ink); }
.ss-rowlink:last-child { border-bottom: 1px solid var(--ss-line); }
.ss-rowlink:hover, .ss-rowlink:focus { color: var(--ss-sigink); }

/* ---------- Landingspagina: inhoud zonder eigen wrapper krijgt de paginabreedte ---------- */
.ss-landing > :not(.ss-full) { margin-left: max(var(--ss-gutter), calc((100% - 1176px) / 2)); margin-right: max(var(--ss-gutter), calc((100% - 1176px) / 2)); }
.ss-landing > p:empty { display: none; }

/* ---------- Footer ---------- */
.ss-foot { background: var(--ss-ink); color: #BDBDBD; font-size: 14px; }
.ss-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 44px; padding-bottom: 28px; }
.ss-fabout { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.ss-fabout p { margin: 0; }
.ss-fhead { color: #fff !important; font-family: var(--ss-body) !important; font-size: 12px !important; letter-spacing: .12em !important; text-transform: uppercase; margin: 0 0 8px; }
.ss-flist { list-style: none; margin: 0; padding: 0; }
.ss-flist a, .ss-flist a:visited { color: #fff; text-decoration: none; display: block; padding: 7px 0; }
.ss-flist a:hover, .ss-flist a:focus { color: #FF9A5C; }
.ss-fbot { border-top: 1px solid #34302D; padding-top: 16px; padding-bottom: 28px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* ==========================================================================
   ≥ 600px
   ========================================================================== */
/* ---------- Homepage: kaarten, categorieën, Black Friday, bestaande tekst ---------- */
.ss-dcard-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }
.ss-dots { display: inline-flex; gap: 4px; }
.ss-dots i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); }
.ss-dcard-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 599px) {
	.ss-hide-xs { display: none; }
	.ss-offer, .ss-offer:visited, .ss-offer:hover, .ss-offer:focus { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; min-height: 76px; }
	.ss-offer.is-best { padding: 11px 13px; }
	.ss-shop { width: 44px; height: 44px; }
	.ss-offer-name { font-size: 15px; }
	.ss-offer-price { font-size: 21px; }
	.ss-offer .ss-go { font-size: 13px; }
	.ss-offer, .ss-offer:visited, .ss-offer:hover, .ss-offer:focus { grid-template-areas: "logo main pr" "cta cta cta"; row-gap: 12px; }
	.ss-offer > .ss-shop { grid-area: logo; align-self: start; }
	.ss-offer-main { grid-area: main; }
	.ss-offer-end { display: contents; }
	.ss-offer-pr { grid-area: pr; min-width: 0; align-self: start; }
	.ss-offer-cta, .ss-offer-cta:hover, .ss-offer-cta:focus { grid-area: cta; width: 100%; min-width: 0; min-height: 44px; font-size: 14px; }
	.ss-offer-cta .ss-cta-arr { width: 32px; height: 32px; }
	.ss-dgrid { gap: 8px; }
	.ss-dcard { padding: 8px; gap: 6px; }
	.ss-dcard.is-pick { padding: 7px; }
	.ss-dcard-title { font-size: 14px !important; }
	.ss-dcard-price .ss-num { font-size: 19px; }
	.ss-dcard .ss-cta--sm { min-height: 42px; padding-left: 12px; }
	.ss-dcard .ss-cta--sm .ss-cta-arr { width: 30px; height: 30px; }
	.ss-dcard .ss-cta-lab { white-space: nowrap; }
	.ss-dcard-tag { top: 6px; left: 6px; font-size: 11px; }
	.ss-dcard-off { top: 6px; right: 6px; font-size: 12px; padding: 3px 6px; }
	.ss-cgrid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--ss-gutter) * -1); padding: 0 var(--ss-gutter) 6px; scroll-padding-left: var(--ss-gutter); }
	.ss-cgrid::-webkit-scrollbar { display: none; }
	.ss-ccard { scroll-snap-align: start; min-height: 116px; }
}
@media (max-width: 380px) {
	.ss-dcard .ss-cta--sm { font-size: 13px; gap: 4px; padding-left: 10px; padding-right: 5px; }
	.ss-dcard .ss-cta--sm .ss-cta-arr { width: 28px; height: 28px; }
}
@media (max-width: 899px) {
	.ss-home-hero .ss-bfcard { padding: 16px 16px 14px; gap: 10px; }
	.ss-home-hero .ss-bfcard-title { font-size: 25px; }
	.ss-home-hero .ss-bfcard-days .ss-num { font-size: 40px; }
	.ss-home-hero .ss-bfcard .ss-on-dark-muted { display: none; }
	.ss-home-hero .ss-bfcard .ss-cta { min-height: 50px; }
}
.ss-more-title { margin: 6px 0 20px; }
.ss-more-toggle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.ss-legacy { position: relative; max-width: 820px; max-height: 560px; overflow: hidden; }
.ss-legacy::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(rgba(245,245,245,0), var(--ss-stone) 85%); pointer-events: none; }
.ss-more-toggle:checked ~ .ss-legacy, .ss-legacy.is-short { max-height: none; }
.ss-more-toggle:checked ~ .ss-legacy::after, .ss-legacy.is-short::after { display: none; }
.ss-legacy.is-short ~ .ss-more-btn { display: none; }
.ss-more-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 46px; padding: 0 20px; border-radius: 999px; background: #fff; border: 1px solid var(--ss-line); font-weight: 700; font-size: 15px; color: var(--ss-ink); cursor: pointer; }
.ss-more-btn:hover { border-color: var(--ss-ink); }
.ss-more-close { display: none; }
.ss-more-toggle:checked ~ .ss-more-btn .ss-more-open { display: none; }
.ss-more-toggle:checked ~ .ss-more-btn .ss-more-close { display: inline; }
.ss-more-toggle:checked ~ .ss-more-btn .ss-ico { transform: rotate(180deg); }
.ss-more-toggle:focus-visible ~ .ss-more-btn { outline: 2px solid var(--ss-sig); outline-offset: 2px; }
.ss-legacy img { max-width: 100%; height: auto; }
.ss-legacy img { max-height: 300px; width: auto; object-fit: contain; }
.ss-legacy figure { margin: 0 0 16px; }
.ss-legacy iframe, .ss-legacy video, .ss-legacy embed { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }
.ss-legacy table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.ss-legacy th, .ss-legacy td { padding: 10px 12px; border-bottom: 1px solid var(--ss-line); text-align: left; vertical-align: top; }
.ss-legacy .wp-block-buttons a, .ss-legacy .wp-block-button__link { border-radius: 8px; }

@media (min-width: 600px) {
	.ss-pgrid { grid-auto-flow: row; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; }
	.ss-dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ss-cols-2 .ss-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   ≥ 900px (desktop)
   ========================================================================== */
@media (min-width: 900px) {
	:root { --ss-gutter: 32px; --ss-hdr: 72px; }
	.ss-only-m { display: none !important; }
	.ss-hdr-in { gap: 24px; }
	.ss-logo { margin-right: 0; }
	.ss-nav { display: block; flex: 1; }
	.ss-sec { padding-top: 64px; padding-bottom: 64px; }
	.ss-sec .ss-sec, .ss-col .ss-sec { padding-top: 0; padding-bottom: 0; }
	.ss-grid2--wide { gap: 48px; }

	.ss-pd-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "media head" "media lead" "media buy"; grid-template-rows: auto auto 1fr; column-gap: 56px; row-gap: 20px; padding-top: 8px; padding-bottom: 40px; }
	.ss-pd-img { aspect-ratio: 1 / 1; max-height: none; }
	.ss-gal-track { overflow: hidden; }
	.ss-gal:has(.ss-gal-thumb:nth-child(1) input:checked) .ss-gal-slide:not(:nth-child(1)),
	.ss-gal:has(.ss-gal-thumb:nth-child(2) input:checked) .ss-gal-slide:not(:nth-child(2)),
	.ss-gal:has(.ss-gal-thumb:nth-child(3) input:checked) .ss-gal-slide:not(:nth-child(3)),
	.ss-gal:has(.ss-gal-thumb:nth-child(4) input:checked) .ss-gal-slide:not(:nth-child(4)) { display: none; }
	.ss-price-xl { font-size: 46px; }
	.ss-pricebox { padding: 16px; }
	.ss-pd-lead { margin-top: -6px; }
	.ss-pd-buy { align-self: start; position: sticky; top: calc(var(--ss-hdr) + 24px); }
	.ss-pd-body { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
	.ss-pd-aside { position: sticky; top: calc(var(--ss-hdr) + 24px); padding: 40px 0; }
	.ss-art-body { grid-template-columns: minmax(0, 860px) 300px; justify-content: space-between; }
	.ss-art-body .ss-pd-aside { padding-top: 140px; }

	.ss-dgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.ss-cols-2 .ss-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-cols-3 .ss-dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ss-cols-5 .ss-dgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.ss-dcard { padding: 14px; }
	.ss-dcard.is-pick { padding: 13px; }
	.ss-cards-scroll .ss-dgrid { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; }
	.ss-cards-scroll.ss-cols-4 .ss-dgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ss-cards-scroll.ss-cols-3 .ss-dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ss-rank-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.ss-cmp-head { grid-template-columns: 220px repeat(2, minmax(0, 1fr)); }
	.ss-cmp-head .ss-cmp-k { display: block; }
	.ss-cmp-row { grid-template-columns: 220px repeat(2, minmax(0, 1fr)); font-size: 16px; }
	.ss-cmp-k { grid-column: auto; align-self: center; }

	.ss-alert--dark { flex-direction: row; align-items: center; padding: 36px; gap: 32px; }
	.ss-alert--dark > * { flex: 1 1 0; min-width: 0; }
	.ss-cgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.ss-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ss-col .ss-steps { grid-template-columns: 1fr; }
	.ss-cols-2 .ss-dcard-img .ss-tile { aspect-ratio: 4 / 3; }
	.ss-fgrid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 36px; }
	.ss-fabout { grid-column: auto; }

	.ss-mbar { display: none; }
	body.ss-has-mbar #ast-scroll-top, body:has(.ss-mbar) #ast-scroll-top { bottom: 30px; }
	body.ss-has-mbar, body:has(.ss-mbar) { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ss-cta, .ss-offer, .ss-js .ss-mbar { transition: none; }
}

/* ---------- Shop per categorie: producttegels ---------- */
.ss-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ss-cat, .ss-cat:visited { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ss-line); border-radius: 14px; overflow: hidden; background: #fff; color: var(--ss-ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.ss-cat:hover, .ss-cat:focus-visible { border-color: #CFCFCF; box-shadow: 0 14px 30px -22px rgba(0,0,0,.45); color: var(--ss-ink); }
.ss-cat-ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--ss-tilebg); overflow: hidden; }
.ss-cat-img { display: block; width: auto; height: auto; max-width: 66%; max-height: 72%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
.ss-cat-img.is-own { max-width: 72%; max-height: 78%; } /* eigen foto strak uitgesneden: het thema zorgt voor de ruimte eromheen */
.ss-cat:hover .ss-cat-img, .ss-cat:focus-visible .ss-cat-img { transform: scale(1.05); }
.ss-cat-ico { color: var(--ss-ink2); }
.ss-cat-ico svg { width: 44px; height: 44px; stroke-width: 1.4; }
.ss-cat-tx { display: flex; flex-direction: column; gap: 3px; flex: 1; padding: 12px 12px 14px; }
.ss-cat-name { font-family: var(--ss-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.ss-cat-sub { font-size: 12px; color: var(--ss-muted); line-height: 1.4; }
.ss-cat-ft { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.ss-cat-from { display: flex; flex-direction: column; font-size: 12px; color: var(--ss-muted); line-height: 1.2; }
.ss-cat-from .ss-num { font-size: 19px; color: var(--ss-price); margin-top: 2px; }
.ss-cat-go { display: none; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ss-ink); color: #fff; place-items: center; transition: background .2s, transform .2s; }
.ss-cat:hover .ss-cat-go, .ss-cat:focus-visible .ss-cat-go { background: #2E2A27; transform: translateX(2px); }
/* Oneven aantal op mobiel: de laatste tegel over de volle breedte, foto links. */
@media (max-width: 899px) {
	.ss-cat:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
	.ss-cat:last-child:nth-child(odd) .ss-cat-ph { width: 46%; flex: none; }
	.ss-cat:last-child:nth-child(odd) .ss-cat-tx { justify-content: center; padding: 14px 16px; }
	.ss-cat:last-child:nth-child(odd) .ss-cat-ft { margin-top: 8px; }
}
@media (min-width: 600px) {
	.ss-cats { gap: 14px; }
	.ss-cat-go { display: grid; }
}
@media (min-width: 900px) {
	.ss-cats { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 16px; }
	.ss-cat { border-radius: 16px; }
	.ss-cat-tx { padding: 16px 18px 18px; gap: 4px; }
	.ss-cat-name { font-size: 19px; }
	.ss-cat-sub { font-size: 13px; }
	.ss-cat-ft { padding-top: 14px; }
	.ss-cat-from { font-size: 13px; }
	.ss-cat-from .ss-num { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .ss-cat-img, .ss-cat-go { transition: none; } }

/* ---------- Prijsblok in de producthero ---------- */
.ss-pricebox { gap: 0; padding: 16px 18px 18px; border-radius: 14px; }
.ss-pb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; margin-bottom: 8px; }
.ss-pb-label { font-size: 13px; font-weight: 600; color: var(--ss-ink2); }
.ss-pb-was { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ss-muted); line-height: 1; margin-bottom: 6px; }
.ss-pb-was s { text-decoration-thickness: 1px; }
.ss-pb-was .ss-tag { padding: 3px 7px; }
.ss-pricebox .ss-price-xl { display: block; line-height: 1; padding-bottom: .04em; }
.ss-pb-shop { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ss-stone2); }
.ss-pb-shop .ss-shop { width: 40px; height: 40px; border-radius: 9px; font-size: 11px; }
.ss-pb-shop .ss-shop img { padding: 5px; }
.ss-pb-shop-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ss-pb-shop-tx strong { font-size: 15px; font-weight: 700; }
.ss-pb-shop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ss-pb-shop-meta .ss-stock, .ss-pb-shop-meta .ss-offer-info { font-size: 13px; }
.ss-pricebox .ss-meter-wrap { margin-top: 14px; }
@media (min-width: 900px) {
	.ss-pricebox { padding: 18px 20px 20px; }
	.ss-pb-was { font-size: 14px; }
}

/* Prijsblok klikbaar: prijs en winkel linken naar de winkel (de prijsmeter niet). */
.ss-pricebox { padding: 0; overflow: hidden; transition: background .2s; }
.ss-pb-link, .ss-pb-link:visited { display: block; padding: 16px 18px 18px; color: inherit; text-decoration: none; border-radius: inherit; }
.ss-pb-link:hover, .ss-pb-link:focus { color: inherit; }
.ss-pricebox:has(.ss-pb-link:hover) { background: var(--ss-stone2); }
.ss-pb-link:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: -2px; }
.ss-pricebox:has(.ss-pb-link:hover) .ss-pb-shop { border-top-color: #DADADA; }
.ss-pb-shop-name { display: inline-flex; align-items: center; gap: 2px; }
.ss-pb-shop-name svg { flex: none; color: var(--ss-muted); transition: transform .2s, color .2s; }
.ss-pb-link:hover .ss-pb-shop-name svg, .ss-pb-link:focus-visible .ss-pb-shop-name svg { transform: translateX(3px); color: var(--ss-ink); }
.ss-pb-link:hover .ss-pb-shop-name, .ss-pb-link:focus-visible .ss-pb-shop-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ss-pricebox .ss-meter-wrap { margin: -4px 18px 18px; }
@media (min-width: 900px) {
	.ss-pricebox { padding: 0; }
	.ss-pb-link { padding: 18px 20px 20px; }
	.ss-pricebox .ss-meter-wrap { margin: -4px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) { .ss-pricebox, .ss-pb-shop-name svg { transition: none; } }

/* ---------- Prijsverloop [ss_prijshistorie] ---------- */
.ss-ph { border: 1px solid var(--ss-line); border-radius: 14px; padding: 14px 14px 12px; background: #fff; }
.ss-ph-r { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ss-ph-tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px; border-radius: 999px; background: var(--ss-stone); }
.ss-ph-tabs label { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ss-muted); cursor: pointer; user-select: none; transition: background .15s, color .15s; }
.ss-ph-tabs label:hover { color: var(--ss-ink); }
.ss-ph-p { display: none; }
.ss-ph-r:nth-of-type(1):checked ~ .ss-ph-ps .ss-ph-p:nth-child(1),
.ss-ph-r:nth-of-type(2):checked ~ .ss-ph-ps .ss-ph-p:nth-child(2),
.ss-ph-r:nth-of-type(3):checked ~ .ss-ph-ps .ss-ph-p:nth-child(3),
.ss-ph-r:nth-of-type(4):checked ~ .ss-ph-ps .ss-ph-p:nth-child(4) { display: block; }
.ss-ph-r:nth-of-type(1):checked ~ .ss-ph-tabs label:nth-child(1),
.ss-ph-r:nth-of-type(2):checked ~ .ss-ph-tabs label:nth-child(2),
.ss-ph-r:nth-of-type(3):checked ~ .ss-ph-tabs label:nth-child(3),
.ss-ph-r:nth-of-type(4):checked ~ .ss-ph-tabs label:nth-child(4) { background: #fff; color: var(--ss-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ss-ph-r:nth-of-type(1):focus-visible ~ .ss-ph-tabs label:nth-child(1),
.ss-ph-r:nth-of-type(2):focus-visible ~ .ss-ph-tabs label:nth-child(2),
.ss-ph-r:nth-of-type(3):focus-visible ~ .ss-ph-tabs label:nth-child(3),
.ss-ph-r:nth-of-type(4):focus-visible ~ .ss-ph-tabs label:nth-child(4) { outline: 2px solid var(--ss-ink); outline-offset: 1px; }
.ss-ph-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ss-ph-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--ss-stone); min-width: 0; }
.ss-ph-stats .ss-ph-k { font-size: 12px; color: var(--ss-muted); }
.ss-ph-stats strong { display: block; font-size: 19px; line-height: 1.1; padding-bottom: .04em; }
.ss-ph-stats strong.is-low { color: var(--ss-good); }
.ss-ph-stats .ss-ph-d { font-style: normal; font-size: 12px; color: var(--ss-muted); }
.ss-ph-chart { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 170px auto; column-gap: 8px; }
.ss-ph-y { position: relative; grid-row: 1; }
.ss-ph-y span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--ss-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-ph-plot { position: relative; grid-row: 1; grid-column: 2; }
.ss-ph-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ss-ph-grid line { stroke: var(--ss-line); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.ss-ph-area { fill: rgba(216, 53, 35, .07); }
.ss-ph-line { fill: none; stroke: var(--ss-price); stroke-width: 2.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ss-ph-dot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ss-price); }
.ss-ph-dot.is-low { border-color: var(--ss-good); }
.ss-ph-dot.is-now { background: var(--ss-price); box-shadow: 0 0 0 4px rgba(216, 53, 35, .18); }
.ss-ph-tip { position: absolute; transform: translate(-50%, 10px); padding: 2px 7px; border-radius: 6px; background: var(--ss-good); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ss-ph-tip.is-left { transform: translate(-6px, 10px); }
.ss-ph-tip.is-right { transform: translate(calc(-100% + 6px), 10px); }
.ss-ph-x { position: relative; grid-column: 2; height: 22px; margin-top: 6px; }
.ss-ph-x span { position: absolute; top: 0; font-size: 11px; color: var(--ss-muted); white-space: nowrap; }
.ss-ph-x .is-mid { transform: translateX(-50%); }
.ss-ph-x .is-end { transform: translateX(-100%); }
.ss-ph-note { margin: 8px 0 0 !important; font-size: 14px; color: var(--ss-ink2); }
@media (min-width: 600px) {
	.ss-ph { padding: 18px 20px 16px; }
	.ss-ph-chart { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: 220px auto; column-gap: 12px; }
	.ss-ph-y span, .ss-ph-x span { font-size: 12px; }
	.ss-ph-stats strong { font-size: 22px; }
}