/* Thin Layer: blush and plum, a price list on the left, the picture on the right. */
body { --bg: #fbdcd6; --fg: #3a1430; --display: "Red Hat Display", sans-serif; --display-w: 300; --body: "Red Hat Text", system-ui, sans-serif; --strip-bg: #fff5f2; --strip-fg: #3a1430; --why-bg: #fff5f2; }
.buy { background: #a51f50; border: 0; border-radius: 3px; color: #fff; font-weight: 600; padding: 0.7rem 1.4rem; }
.ctl { background: #fff5f2; border: 0; border-radius: 3px; color: inherit; padding: 0.6rem 1rem; }
.c-hero { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(0, 1.5fr); height: calc(100svh - 1.8rem); min-height: 40rem; overflow: clip; }
.c-left { display: flex; flex-direction: column; justify-content: space-between; padding: 0.75rem var(--gutter) 1.25rem; }
.shopname { font-weight: 700; }
.c-left h1 { font-family: "Red Hat Display", sans-serif; font-size: clamp(2rem, 3.9vw, 4.2rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin: 0.5rem 0 1rem; }
.c-range { border-block-start: 1px solid #3a143066; list-style: none; margin: 0 0 1rem; padding: 0; }
.c-range li { border-block-end: 1px solid #3a143066; }
.c-range button { align-items: baseline; background: none; border: 0; color: inherit; cursor: pointer; display: flex; font: inherit; justify-content: space-between; padding: 0.45rem 0; text-align: start; width: 100%; }
.c-range button[aria-current="true"] { font-weight: 700; }
@media (hover: hover) { .c-range button:hover { color: #a51f50; } }
.c-range b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cartline { font-size: 0.8rem; margin: 0.5rem 0 0; }
.c-right { min-height: 0; position: relative; }
.c-ctl { bottom: 1rem; display: flex; gap: 0.4rem; position: absolute; right: 1rem; z-index: 2; }
.c-behind { background: #3a1430; color: #fff5f2; overflow: clip; padding: clamp(3rem, 7vw, 6rem) 0; }
.c-behind h2 { font-family: "Red Hat Display", sans-serif; font-size: clamp(2.6rem, 7vw, 7rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin: 0 0 1.5rem; padding-inline: var(--gutter); }
.c-behind .row-demo { margin-inline-start: var(--gutter); --gap: 8px; }
@media (max-width: 820px) { .c-hero { grid-template-columns: minmax(0, 1fr); height: auto; } .c-right { grid-row: 1; height: 56vh; } }
.c-hero { grid-template-columns: minmax(18rem, 1fr) auto; height: auto; min-height: calc(100svh - 1.8rem); }
.c-right { --sq: min(100svh - 1.8rem, 62vw); height: var(--sq); width: var(--sq); }
@media (max-width: 820px) { .c-hero { grid-template-columns: minmax(0, 1fr); } .c-right { aspect-ratio: 1; height: auto; width: 100%; } }