/* Polster – extends the default theme (loaded after the design system and theme.css). */

:root { --color-sand: #efe6da; }

.th-store .t-header__brand { color: var(--ui-primary-text); font-size: 20px; letter-spacing: -.01em; }

.polster-hero {
    background: var(--color-sand);
    border-radius: var(--ui-radius-lg);
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
    display: flex; flex-direction: column; gap: var(--space-4);
}
.polster-hero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.1; max-width: 22ch; letter-spacing: -.02em; }
.polster-hero p { margin: 0; }
.polster-hero .th-lead { max-width: 40ch; color: color-mix(in oklab, var(--color-text) 80%, var(--color-sand)); }
.polster-hero .t-btn { border-radius: var(--radius-full); padding-inline: var(--space-6); }

.t-pcard__img { background: var(--color-sand); }

/* Configurator: dimension sketch on the left, steps on the right */
.th-configurator { display: grid; gap: var(--space-6); }
@container (min-width: 900px) {
    .th-configurator { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
    .th-product:not(.th-product--media) .th-product__info { max-width: none; }
    .cushion-preview { position: sticky; top: var(--space-4); }
}
.cushion-preview { margin: 0; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: var(--space-5); text-align: center; }
.cushion-preview__stage { display: flex; align-items: center; justify-content: center; height: 320px; background: var(--color-sand); border-radius: var(--ui-radius); }
.cushion-preview__box { position: relative; transition: width .3s, height .3s; }
.cushion-preview__top, .cushion-preview__side { position: absolute; left: 0; width: 100%; border-radius: 3px; transition: all .3s; }
.cushion-preview__top { top: 0; box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
.cushion-preview__side { bottom: 0; filter: brightness(.72); }
.cushion-preview__box.is-rounded .cushion-preview__top { border-radius: 24px; }
.cushion-preview__box.is-rounded .cushion-preview__side { border-radius: 0 0 24px 24px; }
.cushion-preview figcaption { margin-top: var(--space-3); font-size: 14px; line-height: 20px; color: var(--ui-text-muted); }

@media (prefers-reduced-motion: reduce) {
    .cushion-preview__box, .cushion-preview__top, .cushion-preview__side { transition: none; }
}

/* Small screens: a lower sketch so that the first configurator step stays in view. */
@container (max-width: 899px) {
    .cushion-preview { padding: var(--space-3); }
    .cushion-preview__stage { height: 200px; overflow: hidden; }
    .cushion-preview__box { transform: scale(.65); }
}