.sp-products { width: min(calc(100% - 2rem), 1200px); margin-inline: auto; }
.sp-entry-content > .sp-products { max-width: var(--sp-content-width, 1200px); }
.sp-products__filters { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(200px, 1fr) max-content; align-items: end; gap: 1rem; margin-bottom: 2rem; padding: 1.25rem; background: var(--sp-color-surface, #f4f1ec); border-radius: var(--sp-radius, 4px); }
.sp-products__filters label { display: grid; min-width: 0; gap: .5rem; font-weight: 700; }
.sp-products__filters input[type="search"], .sp-products__filters select { width: 100%; height: 52px; min-height: 52px; box-sizing: border-box; margin: 0; padding: 0 .85rem; border: 1px solid var(--sp-color-border, #d7dadd); border-radius: var(--sp-radius, 4px); background: #fff; color: var(--sp-color-text, #1f2428); font: inherit; line-height: normal; }
.sp-products__reset { grid-column: 1 / -1; justify-self: end; }
.sp-products__filters .sp-button { display: inline-flex; align-items: center; justify-content: center; height: 52px; min-height: 52px; box-sizing: border-box; margin: 0; padding: 0 1.4rem; white-space: nowrap; }
.sp-products__results { scroll-margin-top: clamp(5rem, 10vw, 8rem); }
.sp-products__grid { display: grid; grid-template-columns: repeat(var(--sp-product-columns, 3), minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.sp-product-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--sp-color-border, #d7dadd); border-radius: var(--sp-radius, 4px); background: var(--sp-color-background, #fff); box-shadow: var(--sp-shadow, none); }
.sp-product-card__image { display: block; aspect-ratio: 1; overflow: hidden; background: var(--sp-color-surface, #f4f1ec); }
.sp-product-card__image .sp-product-focused-image { display: block; width: 100%; height: 100%; }
.sp-product-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sp-focus-x, 50%) var(--sp-focus-y, 50%); transition: transform .25s ease; }
.sp-product-card:hover .sp-product-card__image img { transform: scale(1.025); }
.single-sp_product .sp-entry-content > figure { width: min(100%, 720px); margin-inline: auto; }
.single-sp_product .sp-entry-content > figure .sp-product-focused-image { display: block; aspect-ratio: 1; overflow: hidden; }
.single-sp_product .sp-entry-content > figure img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sp-focus-x, 50%) var(--sp-focus-y, 50%); }
.sp-product-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1.25rem; }
.sp-product-card__body h2 { margin: .5rem 0; font-size: clamp(1.25rem, 2vw, 1.65rem); }
.sp-product-card__body h2 a { color: inherit; text-decoration: none; }
.sp-product-card__meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .82rem; }
.sp-product-card__meta span { padding: .2rem .55rem; border-radius: 999px; background: var(--sp-color-surface, #f4f1ec); }
.sp-product-card__price { margin-top: auto; }
.sp-product-card__more { font-weight: 700; }
.sp-product-detail { margin-bottom: 2rem; padding: 1.25rem; border-left: 4px solid var(--sp-color-primary, #b63b32); background: var(--sp-color-surface, #f4f1ec); }
.sp-main--product { overflow: hidden; background: color-mix(in srgb, var(--sp-color-surface, #f4f1ec) 42%, var(--sp-color-background, #fff)); }
.sp-product-single { position: relative; padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(4rem, 8vw, 8rem); }
.sp-product-single::before { position: absolute; z-index: 0; top: -12rem; right: -12rem; width: 34rem; height: 34rem; border-radius: 50%; background: color-mix(in srgb, var(--sp-color-primary, #b63b32) 9%, transparent); content: ''; pointer-events: none; }
.sp-product-single__shell { position: relative; z-index: 1; width: min(calc(100% - 2rem), 1280px); margin-inline: auto; }
.sp-product-single__back { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: clamp(1.5rem, 3vw, 2.75rem); color: inherit; font-size: .92rem; font-weight: 700; text-decoration: none; }
.sp-product-single__back span { transition: transform .2s ease; }
.sp-product-single__back:hover span { transform: translateX(-.25rem); }
.sp-product-single__hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); align-items: center; gap: clamp(2rem, 6vw, 6.5rem); }
.sp-product-single__visual { position: relative; overflow: hidden; aspect-ratio: 1 / .92; border-radius: clamp(1rem, 2vw, 2rem); background: var(--sp-color-surface, #f4f1ec); box-shadow: 0 28px 80px rgb(20 24 28 / 14%); }
.sp-product-single__visual .sp-product-focused-image { display: block; width: 100%; height: 100%; }
.sp-product-single__visual img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sp-focus-x, 50%) var(--sp-focus-y, 50%); }
.sp-product-single__placeholder { display: grid; width: 100%; height: 100%; place-items: center; background: linear-gradient(145deg, var(--sp-color-surface, #f4f1ec), color-mix(in srgb, var(--sp-color-primary, #b63b32) 10%, #fff)); }
.sp-product-single__placeholder span { width: 22%; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; opacity: .18; }
.sp-product-single__featured { position: absolute; top: 1rem; left: 1rem; padding: .48rem .8rem; border-radius: 999px; background: var(--sp-color-primary, #b63b32); color: var(--sp-color-on-primary, #fff); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sp-product-single__intro { padding-block: 1rem; }
.sp-product-single__categories { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.sp-product-single__categories span { padding: .35rem .7rem; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 999px; font-size: .78rem; font-weight: 700; }
.sp-product-single__eyebrow, .sp-product-single__section-label { margin: 0 0 .65rem; color: var(--sp-color-primary, #b63b32); font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sp-product-single__intro h1 { max-width: 12ch; margin: 0; font-size: clamp(2.8rem, 6vw, 6.4rem); line-height: .94; letter-spacing: -.055em; text-wrap: balance; }
.sp-product-single__summary { max-width: 55ch; margin: 1.5rem 0 0; font-size: clamp(1.08rem, 1.6vw, 1.35rem); line-height: 1.6; opacity: .82; }
.sp-product-single__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; border-block: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.sp-product-single__facts > div { display: grid; align-content: center; gap: .3rem; min-height: 96px; padding: 1rem 1.25rem 1rem 0; }
.sp-product-single__facts > div + div { padding-left: 1.25rem; border-left: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.sp-product-single__facts span { font-size: .76rem; font-weight: 700; letter-spacing: .06em; opacity: .62; text-transform: uppercase; }
.sp-product-single__facts strong { font-size: 1.08rem; }
.sp-product-single__status { display: flex; align-items: center; gap: .55rem; }
.sp-product-single__status::before { width: .58rem; height: .58rem; flex: 0 0 auto; border-radius: 50%; background: #2f8f54; box-shadow: 0 0 0 .28rem rgb(47 143 84 / 12%); content: ''; }
.sp-product-single__status--unavailable::before { background: #aa3b35; box-shadow: 0 0 0 .28rem rgb(170 59 53 / 12%); }
.sp-product-single__status--on_request::before, .sp-product-single__status--seasonal::before { background: #c38224; box-shadow: 0 0 0 .28rem rgb(195 130 36 / 12%); }
.sp-product-single__season { margin-top: 1.5rem; padding: 1.25rem; border-radius: 1rem; background: color-mix(in srgb, var(--sp-color-surface, #f4f1ec) 78%, transparent); }
.sp-product-single__season p { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; font-size: .9rem; }
.sp-product-single__season p span { opacity: .65; }
.sp-product-single__months { display: grid; grid-template-columns: repeat(12, 1fr); gap: .3rem; }
.sp-product-single__months > span { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: 50%; font-size: .7rem; font-weight: 800; opacity: .38; }
.sp-product-single__months > .is-active { border-color: var(--sp-color-primary, #b63b32); background: var(--sp-color-primary, #b63b32); color: var(--sp-color-on-primary, #fff); opacity: 1; }
.sp-product-single__action { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 1.5rem; }
.sp-product-single__action .sp-button { margin: 0; }
.sp-product-single__action small { max-width: 28ch; opacity: .62; }
.sp-product-single__action--subtle .sp-button { border-color: currentColor; background: transparent; color: inherit; }
.sp-product-single__action--subtle .sp-button:hover, .sp-product-single__action--subtle .sp-button:focus-visible { border-color: var(--sp-color-primary, #b63b32); background: var(--sp-color-primary, #b63b32); color: var(--sp-color-on-primary, #fff); }
.sp-product-single__description { display: grid; grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr); gap: clamp(1.5rem, 6vw, 7rem); margin-top: clamp(4rem, 9vw, 9rem); padding: clamp(2rem, 5vw, 5rem); border-radius: clamp(1rem, 2vw, 2rem); background: var(--sp-color-background, #fff); box-shadow: 0 22px 70px rgb(20 24 28 / 7%); }
.sp-product-single__description h2 { grid-column: 1; max-width: 10ch; margin: .25rem 0 0; font-size: clamp(1.8rem, 3vw, 3.3rem); line-height: 1.05; letter-spacing: -.035em; }
.sp-product-single__description .sp-product-single__section-label { grid-column: 1; margin-bottom: -1.25rem; }
.sp-product-single__prose { grid-column: 2; grid-row: 1 / span 2; max-width: 68ch; font-size: 1.06rem; line-height: 1.75; }
.sp-product-single__prose > :first-child { margin-top: 0; }
.sp-product-single__prose > :last-child { margin-bottom: 0; }
.sp-product-single__related { margin-top: clamp(4rem, 8vw, 8rem); }
.sp-product-single__related-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 1.5rem; }
.sp-product-single__related h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.045em; }
.sp-product-single--image-right .sp-product-single__visual { order: 2; }
.sp-product-single--editorial .sp-product-single__hero { grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 4rem); }
.sp-product-single--editorial .sp-product-single__visual { aspect-ratio: 16 / 7; }
.sp-product-single--editorial.sp-product-single--image-right .sp-product-single__visual { order: initial; }
.sp-product-single--editorial .sp-product-single__intro { width: min(100%, 920px); margin-inline: auto; text-align: center; }
.sp-product-single--editorial .sp-product-single__intro h1, .sp-product-single--editorial .sp-product-single__summary { margin-inline: auto; }
.sp-product-single--editorial .sp-product-single__categories, .sp-product-single--editorial .sp-product-single__action { justify-content: center; }
.sp-product-single--editorial .sp-product-single__facts { width: min(100%, 680px); margin-inline: auto; margin-top: 2rem; }
.sp-product-single--editorial .sp-product-single__season { width: min(100%, 760px); margin-inline: auto; margin-top: 1.5rem; text-align: left; }
.sp-product-single--compact .sp-product-single__hero { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(1.5rem, 4vw, 4rem); }
.sp-product-single--compact .sp-product-single__visual { aspect-ratio: 1; border-radius: .75rem; box-shadow: 0 18px 45px rgb(20 24 28 / 10%); }
.sp-product-single--compact .sp-product-single__intro h1 { font-size: clamp(2.5rem, 4.6vw, 4.8rem); }
.sp-product-single--compact .sp-product-single__summary { margin-top: 1rem; font-size: 1.05rem; }
.sp-product-single--compact .sp-product-single__facts { margin-top: 1.25rem; }
.sp-product-single--compact .sp-product-single__season { margin-top: 1rem; }
.sp-product-single--compact .sp-product-single__description { margin-top: clamp(3rem, 6vw, 6rem); }
.sp-product-single--tone-contrast .sp-product-single__hero { padding: clamp(1.25rem, 4vw, 4rem); border-radius: clamp(1rem, 2vw, 2rem); background: var(--sp-color-secondary, #1f2428); color: var(--sp-color-on-dark, #fff); }
.sp-product-single--tone-contrast .sp-product-single__categories span { border-color: color-mix(in srgb, currentColor 35%, transparent); }
.sp-product-single--tone-contrast .sp-product-single__season { background: rgb(255 255 255 / 8%); }
.sp-product-single--tone-contrast .sp-product-single__action--subtle .sp-button { border-color: currentColor; color: inherit; }
.sp-product-single--tone-contrast .sp-product-single__action--prominent .sp-button:hover, .sp-product-single--tone-contrast .sp-product-single__action--prominent .sp-button:focus-visible { border-color: var(--sp-color-on-dark, #fff); background: transparent; color: var(--sp-color-on-dark, #fff); }
.sp-core-product-featured { display: block; margin: 22px 0; }
.sp-core-product-months { margin-top: 20px; padding: 16px; border: 1px solid #c3c4c7; }
.sp-core-product-months > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.sp-core-product-intro { padding: 12px 16px; border-left: 4px solid #3858e9; background: #f0f6fc; }
.sp-core-product-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 24px; margin: 20px 0; }
.sp-core-product-main textarea { width: 100%; margin-top: 8px; }
.sp-core-product-main small { display: block; margin-top: 6px; color: #646970; }
.sp-core-product-image { padding: 16px; border: 1px solid #c3c4c7; background: #fff; }
.sp-core-product-image__preview { width: min(100%, 320px); aspect-ratio: 1; margin: 10px 0; overflow: hidden; background: #f0f0f1; }
.sp-core-product-image__preview:empty::after { display: grid; height: 100%; place-items: center; content: 'Nog geen foto gekozen'; color: #646970; }
.sp-core-product-image__preview img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sp-focus-x, 50%) var(--sp-focus-y, 50%); }
.sp-core-product-focus { display: grid; gap: 10px; margin-top: 14px; }
.sp-core-product-focus label { display: grid; gap: 4px; }
.sp-core-product-description { margin: 22px 0; }
.sp-core-product-description > label { display: block; margin-bottom: 8px; }
.sp-product-section > .sp-container > .sp-products { width: 100%; }
.sp-season-calendar__legend { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin-bottom: .75rem; font-size: .9rem; }
.sp-season-calendar__legend span { width: 1rem; height: 1rem; border-radius: 50%; background: var(--sp-color-primary, #b63b32); }
.sp-season-calendar__scroll { overflow-x: auto; border: 1px solid var(--sp-color-border, #d7dadd); }
.sp-season-calendar table { width: 100%; min-width: 780px; border-collapse: collapse; background: var(--sp-color-background, #fff); }
.sp-season-calendar th, .sp-season-calendar td { padding: .8rem .45rem; border-bottom: 1px solid var(--sp-color-border, #d7dadd); text-align: center; }
.sp-season-calendar thead th { background: var(--sp-color-surface, #f4f1ec); font-size: .85rem; }
.sp-season-calendar tbody th { min-width: 190px; padding-left: 1rem; text-align: left; }
.sp-season-calendar tbody th a { color: inherit; }
.sp-season-calendar tbody th small { display: block; margin-top: .2rem; font-weight: 400; opacity: .72; }
.sp-season-calendar td::after { display: block; width: .85rem; height: .85rem; margin: auto; border: 1px solid var(--sp-color-border, #d7dadd); border-radius: 50%; content: ''; }
.sp-season-calendar td.is-available::after { border-color: var(--sp-color-primary, #b63b32); background: var(--sp-color-primary, #b63b32); }
.sp-season-calendar__mobile { display: none; }
.sp-season-calendar__card { padding: 1rem; border: 1px solid var(--sp-color-border, #d7dadd); border-radius: var(--sp-radius, 4px); background: var(--sp-color-background, #fff); }
.sp-season-calendar__card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.sp-season-calendar__card-heading h3 { margin: 0; font-size: 1.08rem; }
.sp-season-calendar__card-heading h3 a { color: inherit; }
.sp-season-calendar__card-heading > span { flex: 0 0 auto; color: var(--sp-color-primary, #b63b32); font-size: .76rem; font-weight: 700; }
.sp-season-calendar__months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.sp-season-calendar__months > span { display: grid; min-height: 2.25rem; place-items: center; border: 1px solid var(--sp-color-border, #d7dadd); border-radius: 999px; font-size: .72rem; font-weight: 700; opacity: .42; }
.sp-season-calendar__months > .is-available { border-color: var(--sp-color-primary, #b63b32); background: var(--sp-color-primary, #b63b32); color: var(--sp-color-on-primary, #fff); opacity: 1; }
@media (max-width: 900px) { .sp-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-product-single__hero, .sp-product-single--compact .sp-product-single__hero { grid-template-columns: 1fr; } .sp-product-single__visual, .sp-product-single--editorial .sp-product-single__visual { aspect-ratio: 4 / 3; } .sp-product-single--image-right .sp-product-single__visual { order: initial; } .sp-product-single__intro h1 { max-width: 16ch; } .sp-product-single--editorial .sp-product-single__intro h1 { margin-inline: auto; } }
@media (max-width: 782px) { .sp-core-product-main { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .sp-products__grid { grid-template-columns: 1fr; } .sp-core-product-months > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-product-single__visual { aspect-ratio: 1; border-radius: 1rem; } .sp-product-single__intro h1 { font-size: clamp(2.6rem, 14vw, 4.4rem); } .sp-product-single__facts { grid-template-columns: 1fr; } .sp-product-single__facts > div + div { padding-left: 0; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-left: 0; } .sp-product-single__season p { display: grid; } .sp-product-single__months { grid-template-columns: repeat(6, 1fr); row-gap: .55rem; } .sp-product-single__description { display: block; padding: 1.5rem; } .sp-product-single__description .sp-product-single__section-label { margin-bottom: .65rem; } .sp-product-single__description h2 { margin-bottom: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .sp-product-card__image img, .sp-product-single__back span { transition: none; } }
@media (max-width: 780px) { .sp-products__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-products__filters .sp-button { grid-column: 1 / -1; width: 100%; } }
@media (max-width: 560px) { .sp-products__filters { grid-template-columns: 1fr; } .sp-products__filters .sp-button, .sp-products__reset { grid-column: auto; } .sp-products__reset { justify-self: start; } }
@media (max-width: 767px) { .sp-season-calendar__scroll { display: none; } .sp-season-calendar__mobile { display: grid; gap: .85rem; } .sp-season-calendar__legend { justify-content: flex-start; } }