/* Shared product styling comes from mittpillow-shop.css. Only topper-specific controls live here. */
.topper-page .topper-gallery{min-width:0}
.topper-page .topper-gallery img{filter:saturate(.88) contrast(.98)}
.topper-page .product-summary h1{margin:0}
.topper-page .topper-primary{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}
.topper-page .topper-action-note{text-align:center;font-size:.76rem;color:var(--muted);margin:12px 0 20px}
.topper-page .topper-size-picker legend{font-size:.9rem;margin-bottom:10px}
.topper-page .topper-size-options span{min-height:54px;border-radius:12px;border-color:var(--line);font-size:.9rem}
.topper-page .topper-size-options input:checked+span{border-color:var(--green);background:#fff4ee;box-shadow:0 0 0 1px var(--green)}
.tp-feature-photo img{object-fit:contain}
.topper-page .topper-advice h2{font:800 clamp(2.15rem,3.6vw,3.45rem)/1.05 var(--heading);letter-spacing:-.05em;color:var(--green)}
.topper-page .topper-advice-form{background:#f7f7f2;border-radius:14px}
.topper-page :is(input,textarea,button,a):focus-visible{outline:3px solid var(--green);outline-offset:4px}
.topper-page :is(#materialen,#vragen,#advies,#twee-zijden,#dreamtopper-reviews){scroll-margin-top:110px}
.topper-advice { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 8vw, 110px); padding-block: 100px; }
.topper-advice h2 { margin: 8px 0 24px; font-family: var(--heading); font-size: clamp(2.5rem, 4.3vw, 3.75rem); line-height: 1.03; letter-spacing: -.055em; }
.topper-advice-copy > p { color: var(--muted); line-height: 1.7; }
.topper-measure-note { margin-top: 34px; padding-left: 20px; border-left: 2px solid var(--coral-strong); }
.topper-measure-note p { color: var(--muted); margin: 8px 0 0; font-size: .9375rem; line-height: 1.7; }
.topper-advice-form { padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); border-radius: 12px; background: #fafafa; }
.topper-advice-form h3 { margin: 0 0 8px; font-family: var(--heading); font-size: 1.5rem; letter-spacing: -.03em; }
.topper-advice-form > p { margin: 0 0 24px; color: var(--muted); }
.topper-advice-form label { display: block; margin-bottom: 8px; font-size: .875rem; font-weight: 800; }
.topper-size-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 12px; }
.topper-size-fields > span { align-self: end; padding-bottom: 12px; color: var(--muted); }
.topper-advice-form input, .topper-advice-form textarea { width: 100%; min-width: 0; padding: 13px 12px; border: 1px solid #b6c3c5; border-radius: 7px; color: var(--ink); background: white; font: inherit; }
.topper-advice-form textarea { resize: vertical; min-height: 112px; margin-bottom: 18px; }
.topper-advice-form input::placeholder, .topper-advice-form textarea::placeholder { color: #63737b; opacity: 1; }
.topper-advice-form .topper-field-hint { margin: 10px 0 26px; font-size: .875rem; }
.topper-advice-form .topper-form-note { margin: 15px 0 0; font-size: .875rem; line-height: 1.65; }
.topper-form-note a, .topper-mail-fallback a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.topper-mail-fallback { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .875rem; }
.topper-mail-fallback p { margin: 0 0 12px; }
.topper-copy { min-height: 44px; padding: 8px 15px; border: 1px solid var(--green); border-radius: 6px; background: #fff; font-weight: 700; cursor: pointer; }
.topper-mail-text { margin-top: 16px; }
.topper-copy-status { margin-top: 12px !important; }
.topper-size-picker { min-width: 0; padding: 0; margin: 0 0 24px; border: 0; }
.topper-size-picker legend { margin-bottom: 12px; font-weight: 800; }
.topper-size-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.topper-size-options label { position: relative; cursor: pointer; }
.topper-size-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topper-size-options span { display: flex; justify-content: center; align-items: center; gap: 5px; min-height: 51px; padding: 10px; border: 1px solid #aababc; border-radius: 8px; font-size: .9375rem; font-weight: 700; }
.topper-size-options small { font-size: .8125rem; font-weight: 400; }
.topper-size-options input:checked + span { border-color: var(--coral); background: #fff2ee; box-shadow: inset 0 0 0 1px var(--coral); }
.topper-size-options input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 3px; }

@media(max-width:900px){.topper-advice{gap:36px}}
@media(max-width:760px){.topper-advice{grid-template-columns:1fr;padding-block:58px}.topper-advice-form{padding:24px 18px}.topper-size-fields{gap:8px}}
@media(prefers-reduced-motion:reduce){.topper-page *{scroll-behavior:auto!important}}

/* Product demonstrations, directly beneath the comfort introduction. */
.tp-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 64px}
.tp-video-card{min-width:0;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}
.tp-video-card video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#f7f5f2}
.tp-video-card figcaption{padding:20px 22px 24px}
.tp-video-card h3{margin:0 0 8px;font:600 1.15rem/1.3 var(--heading);color:var(--green);letter-spacing:-.02em}
.tp-video-card p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}
.tp-video-card video:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
@media(max-width:760px){.tp-video-grid{grid-template-columns:1fr;gap:20px;margin-bottom:42px}.tp-video-card figcaption{padding:18px 20px 22px}}

/* Opengewerkte topper met uitleg en korte productfilms. */
.tp-anatomy .mp-anatomy-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);gap:32px;align-items:center}
.tp-anatomy-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
.tp-anatomy-copy figure{margin:0;min-width:0}
.tp-anatomy-copy video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:10px;background:#f7f5f2}
.tp-anatomy-copy figcaption{margin-top:9px;font-size:.75rem;line-height:1.5;color:var(--muted)}
.tp-anatomy-copy video:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.tp-anatomy .mp-anatomy-point{cursor:pointer}
.tp-video-controls{display:flex;justify-content:flex-end;padding-top:6px}
.tp-video-card .tp-video-controls{padding:6px 16px 0}
.tp-video-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:8px 10px;border:0;border-radius:6px;background:transparent;color:var(--green);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.tp-video-button:hover{background:rgba(45,74,67,.06)}
.tp-video-button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.tp-video-icon{display:block;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor}
.tp-video-button[data-playing="true"] .tp-video-icon{width:9px;height:12px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}
@media(max-width:1100px){.tp-anatomy .mp-anatomy-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.tp-anatomy-copy{grid-template-columns:1fr}.tp-anatomy-copy video{max-width:420px}}
@media(max-width:700px){.tp-anatomy .mp-anatomy-layout{grid-template-columns:1fr;gap:20px}.tp-anatomy-copy video{max-width:none}.tp-anatomy .mp-anatomy-heading p:last-child{font-size:.9rem}}

.tp-anatomy-films{display:grid;gap:22px;min-width:0}
.tp-anatomy-copy video.tp-video-portrait{aspect-ratio:9/16;width:100%;max-height:360px;object-fit:contain;background:transparent}

/* Compact benefits under the DreamTopper price. */

.topper-page .topper-price{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.topper-page .tp-original-price{font-size:18px;color:#788181;font-weight:500}
.topper-page .tp-intro-badge{padding:6px 10px;border-radius:20px;background:#ffede6;color:#2c4141;font-size:12px;line-height:1.3;font-weight:600}
.topper-page .selected-unit-price{flex-basis:100%;font-size:13px}
.topper-page .topper-price [hidden]{display:none}
.tp-size-dropdown>label{display:block;margin-bottom:8px;font-size:14px;font-weight:600}
.tp-select-wrap{position:relative}
.tp-select-wrap select{appearance:none;width:100%;min-height:56px;padding:14px 38px 14px 14px;border:1px solid #d9deda;border-radius:12px;background:#fff;color:#2c4141;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.tp-select-wrap>span{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:22px;pointer-events:none}
.tp-select-wrap select:focus-visible{outline:2px solid #2c4141;outline-offset:3px}

.topper-page .topper-primary[hidden]{display:none}