/* ==========================================================================
   The Dress-Up Atelier (page-dress-up.php, assets/js/dressup.js).
   The stage holds the doll; the panel holds the numbered steps (numbers come
   from a CSS counter, so a hidden step is skipped) and the hang tag that
   lists every piece and sends the whole look to the bag. Phones: the stage stays on screen
   (sticky, shorter) while the steps scroll under it.
   ========================================================================== */
.rr-du { padding-block: clamp(1.6rem, 1rem + 2vw, 3rem) var(--rr-space-chapter); background: var(--rr-grain), radial-gradient(60% 50% at 20% 0%, rgba(255, 255, 255, .8), transparent 70%), radial-gradient(40% 40% at 100% 60%, rgba(247, 214, 169, .3), transparent 70%), radial-gradient(ellipse 78% 72% at 50% 50%, #FFF1F4 52%, rgba(255, 241, 244, 0) 92%), var(--rr-bow-print), #FFF1F4; }
.rr-du__head { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.rr-du__kicker { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); line-height: 1; color: var(--rr-gold-deep); }
.rr-du__title { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.04; color: var(--rr-ink); }
.rr-du__lede { max-width: 56ch; color: var(--rr-muted); }
.rr-du__empty { text-align: center; }
.rr-du__head .rr-du__empty { margin-top: 1rem; }

.rr-du__game { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; align-items: start; }
/* Grid items and fieldsets default to min-content width; the design rail must not widen the page. */
.rr-du__stage, .rr-du__panel, .rr-du__step { min-width: 0; }

/* Stage */
.rr-du__stage { position: sticky; top: calc(var(--rr-head, 70px) + 8px); z-index: 2; display: grid; gap: .6rem; }
.rr-du__frame { position: relative; width: min(100%, 460px); margin-inline: auto; aspect-ratio: 400 / 700; max-height: 46vh; border: 6px solid #fff; border-radius: 999px 999px 28px 28px; overflow: hidden; background: #FFF1F4; box-shadow: var(--rr-shadow-lg); }
.rr-du__frame .rr-doll { display: block; width: 100%; height: 100%; }
.rr-du__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.rr-du__tool { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .95rem; border: 1px solid var(--rr-blush-300); border-radius: 999px; background: #fff; box-shadow: var(--rr-shadow); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rr-ink); transition: background .25s, translate .25s var(--rr-ease); }
.rr-du__tool span { color: var(--rr-rose-650); font-size: .95rem; }
.rr-du__tool:hover { background: var(--rr-fill); translate: 0 -2px; }
.rr-du__tool--main { border-color: var(--rr-fill); background: var(--rr-fill); }
.rr-du__tool--main span { color: var(--rr-rose-900); }
.rr-du__note { margin: 0; padding: .45rem .9rem; justify-self: center; max-width: 100%; overflow-wrap: anywhere; border-radius: 999px; background: var(--rr-ink); color: #fff; font-size: .8rem; text-align: center; }

/* Doll motion: blink, a slow breath, a swish when the fabric or colour changes, a twirl on demand. */
.rr-doll__eyes { transform-origin: 200px 118px; animation: rr-du-blink 5.5s infinite; }
@keyframes rr-du-blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.rr-doll__all { transform-origin: 200px 660px; animation: rr-du-breathe 4.5s ease-in-out infinite; }
@keyframes rr-du-breathe { 50% { transform: translateY(-2px) scale(1.004); } }
.rr-doll__sparkles path { transform-box: fill-box; transform-origin: center; animation: rr-du-tw 3s ease-in-out infinite; }
.rr-doll__sparkles path:nth-child(2) { animation-delay: 1s; }
.rr-doll__sparkles path:nth-child(3) { animation-delay: 2s; }
@keyframes rr-du-tw { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
.rr-doll .body { transition: transform .55s cubic-bezier(.34, 1.4, .64, 1); }
.rr-doll__skirt, .rr-doll__top { transform-origin: 200px 300px; }
.is-swish .rr-doll__skirt, .is-swish .rr-doll__top { animation: rr-du-swish .6s var(--rr-ease); }
@keyframes rr-du-swish { 0% { opacity: .35; transform: scaleY(.96); } 100% { opacity: 1; transform: none; } }
.is-twirl .rr-doll__skirt { animation: rr-du-twirl 1.2s cubic-bezier(.36, .07, .19, .97); }
@keyframes rr-du-twirl { 0% { transform: none; } 20% { transform: scaleX(1.14) skewX(-6deg); } 45% { transform: scaleX(.9) skewX(5deg); } 70% { transform: scaleX(1.06) skewX(-2deg); } 100% { transform: none; } }
.is-twirl .rr-doll__all { animation: rr-du-hop 1.2s var(--rr-ease); }
@keyframes rr-du-hop { 30% { transform: translateY(-10px); } 60% { transform: translateY(0); } }
.rr-du__burst { position: absolute; left: 50%; top: 52%; pointer-events: none; }
.rr-du__burst i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; background: var(--rr-gold-300); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: rr-du-star .9s var(--d, 0s) ease-out forwards; }
.rr-du__burst i:nth-child(3n) { background: var(--rr-rose-650); }
@keyframes rr-du-star { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.2) rotate(90deg); } }

/* Panel: numbered steps */
.rr-du__panel { display: grid; gap: 1rem; counter-reset: rr-du-step; }
.rr-du__step { margin: 0; padding: 1rem 1.1rem 1.15rem; border: 0; border-radius: 22px; background: rgba(255, 255, 255, .86); box-shadow: var(--rr-shadow); }
.rr-du__step legend, .rr-du__legend, .rr-du__style summary { display: flex; align-items: baseline; gap: .55rem; float: left; width: 100%; margin-bottom: .75rem; padding: 0; font-family: var(--rr-serif); font-size: 1.3rem; color: var(--rr-ink); }
.rr-du__step legend + *, .rr-du__legend + * { clear: both; }
.rr-du__step small { margin-left: auto; font-family: var(--rr-sans); font-size: .76rem; font-weight: 600; letter-spacing: .08em; color: var(--rr-rose-900); }
.rr-du__step { counter-increment: rr-du-step; }
.rr-du__no::before { content: counter(rr-du-step); }
.rr-du__no { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--rr-fill); font-family: var(--rr-sans); font-size: .74rem; font-weight: 600; color: var(--rr-ink); translate: 0 -2px; }
.rr-du__step input[type="radio"], .rr-du__step input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* 1. Designs: a swipe row of photo cards */
.rr-du__designs { display: grid; grid-auto-flow: column; grid-auto-columns: 108px; gap: .6rem; overflow-x: auto; padding: .2rem .1rem .6rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rr-du__design { position: relative; display: grid; gap: .25rem; scroll-snap-align: start; cursor: pointer; }
.rr-du__thumb { display: block; aspect-ratio: var(--rr-photo); border: 3px solid #fff; border-radius: 999px 999px 14px 14px; overflow: hidden; background: var(--rr-blush-100); box-shadow: var(--rr-shadow); transition: border-color .25s, translate .25s var(--rr-ease); }
.rr-du__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rr-du__dname { font-family: var(--rr-serif); font-size: .92rem; line-height: 1.15; color: var(--rr-ink); }
.rr-du__dprice { font-size: .72rem; color: var(--rr-muted); }
.rr-du__design:hover .rr-du__thumb { translate: 0 -3px; }
.rr-du__design input:checked + .rr-du__thumb { border-color: var(--rr-rose-650); box-shadow: 0 0 0 3px rgba(242, 92, 132, .2), var(--rr-shadow); }
.rr-du__design input:focus-visible + .rr-du__thumb { outline: 2px solid var(--rr-rose-800); outline-offset: 3px; }
.rr-du__thumb { position: relative; }
.rr-du__kind { position: absolute; left: 50%; bottom: 6px; translate: -50% 0; padding: .1rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rr-rose-900); white-space: nowrap; }

/* 2. Fabrics: chips with a small woven sample */
.rr-du__chips, .rr-du__swatches, .rr-du__pills, .rr-du__dots { display: flex; flex-wrap: wrap; gap: .5rem; }
.rr-du__chip { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem 0 .45rem; border: 1.5px solid var(--rr-blush-300); border-radius: 999px; background: #fff; font-size: .88rem; cursor: pointer; transition: border-color .25s, background .25s; }
.rr-du__chip:has(input:checked) { border-color: var(--rr-rose-650); background: #FFF1F4; }
.rr-du__chip:has(input:focus-visible) { outline: 2px solid var(--rr-rose-800); outline-offset: 2px; }
.rr-du__tex { width: 30px; height: 30px; border-radius: 50%; background: var(--rr-pink-deep); box-shadow: inset 0 0 0 1px rgba(62, 42, 44, .1); }
.rr-du__tex--cotton { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px), #F7A9BA; }
.rr-du__tex--satin { background: linear-gradient(135deg, #E58AA2, #FFE3EA 48%, #E58AA2); }
.rr-du__tex--velvet { background: radial-gradient(circle at 40% 30%, #F7A9BA, #9C2C4E); }
.rr-du__tex--organza { background: linear-gradient(120deg, rgba(247, 169, 186, .55), rgba(255, 255, 255, .9) 50%, rgba(247, 169, 186, .55)); }
.rr-du__tex--chiffon { background: linear-gradient(180deg, rgba(255, 214, 223, .9), rgba(247, 169, 186, .7)); }
.rr-du__tex--tulle { background: radial-gradient(circle, rgba(255, 255, 255, .8) 1px, transparent 1.5px) 0 0 / 5px 5px, rgba(247, 169, 186, .7); }
.rr-du__tex--wool { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 4px), #E58AA2; }

/* 3. Colours: round swatches with the name under */
.rr-du__swatch { position: relative; display: grid; justify-items: center; gap: .25rem; width: 64px; cursor: pointer; }
.rr-du__dot { width: 44px; height: 44px; border: 3px solid #fff; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px var(--rr-blush-300), var(--rr-shadow); transition: box-shadow .25s, scale .25s var(--rr-ease); }
.rr-du__swatch .rr-du__label { font-size: .72rem; color: var(--rr-muted); text-align: center; }
.rr-du__swatch:has(input:checked) .rr-du__dot { box-shadow: 0 0 0 2.5px var(--rr-rose-650), var(--rr-shadow); scale: 1.08; }
.rr-du__swatch:has(input:focus-visible) .rr-du__dot { outline: 2px solid var(--rr-rose-800); outline-offset: 3px; }
.rr-du__chip .rr-du__label, .rr-du__swatch .rr-du__label { pointer-events: none; }

/* Smaller chips and swatches for the paired piece and the accessories. */
.rr-du__chips--sm .rr-du__chip { min-height: 38px; font-size: .8rem; }
.rr-du__chips--sm .rr-du__tex { width: 24px; height: 24px; }
.rr-du__swatches--sm .rr-du__swatch { width: 52px; }
.rr-du__swatches--sm .rr-du__dot { width: 32px; height: 32px; border-width: 2px; }

/* What the chosen fabric is like (from the fabric glossary). */
.rr-du__fnote { margin: .7rem 0 0; padding-left: .8rem; border-left: 2px solid var(--rr-gold-300); font-size: .84rem; line-height: 1.5; color: var(--rr-muted); }
.rr-du__fnote:empty { display: none; }

/* 4. Size: a ribbon slider */
/* Ribbon track filled to the chosen size (--pct from dressup.js), with a bow on the thumb. */
.rr-du__range { width: 100%; height: 34px; margin: .2rem 0 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --pct: 50%; }
.rr-du__range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--rr-fill-hover) var(--pct), var(--rr-blush-200) var(--pct)); box-shadow: inset 0 1px 2px rgba(150, 66, 92, .15); }
.rr-du__range::-moz-range-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--rr-fill-hover) var(--pct), var(--rr-blush-200) var(--pct)); }
.rr-du__range::-webkit-slider-thumb { width: 34px; height: 34px; margin-top: -12px; border: 3px solid #fff; border-radius: 50%; background: #FFF8F0 url("../img/bow.webp") center / 70% no-repeat; box-shadow: var(--rr-shadow); -webkit-appearance: none; appearance: none; }
.rr-du__range::-moz-range-thumb { width: 28px; height: 28px; border: 3px solid #fff; border-radius: 50%; background: #FFF8F0 url("../img/bow.webp") center / 70% no-repeat; box-shadow: var(--rr-shadow); }
.rr-du__range:focus-visible { outline: 2px solid var(--rr-rose-800); outline-offset: 4px; border-radius: 999px; }
.rr-du__ticks { display: flex; justify-content: space-between; margin-top: .1rem; padding-inline: 4px; font-size: .68rem; font-weight: 600; color: var(--rr-muted); }
.rr-du__hint { margin-top: .6rem; font-size: .8rem; color: var(--rr-muted); }

/* Wear it with: the doll's own plain piece, or a real one from the catalogue */
.rr-du__pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.rr-du__pair { position: relative; display: grid; gap: .2rem; cursor: pointer; }
.rr-du__pthumb { display: grid; place-items: center; aspect-ratio: var(--rr-photo); border: 3px solid #fff; border-radius: 14px; overflow: hidden; background: var(--rr-blush-100); box-shadow: var(--rr-shadow); font-size: 1.6rem; color: var(--rr-rose-650); transition: border-color .25s, translate .25s var(--rr-ease); }
.rr-du__pthumb img { width: 100%; height: 100%; object-fit: cover; }
.rr-du__pair--plain .rr-du__pthumb { background: repeating-linear-gradient(45deg, #FFF1F4 0 8px, #FFE6EC 8px 16px); }
.rr-du__pname { font-family: var(--rr-serif); font-size: .9rem; line-height: 1.15; color: var(--rr-ink); }
.rr-du__pair:hover .rr-du__pthumb { translate: 0 -3px; }
.rr-du__pair:has(input:checked) .rr-du__pthumb { border-color: var(--rr-rose-650); box-shadow: 0 0 0 3px rgba(242, 92, 132, .2), var(--rr-shadow); }
.rr-du__pair:has(input:focus-visible) .rr-du__pthumb { outline: 2px solid var(--rr-rose-800); outline-offset: 3px; }
.rr-du__popts { display: grid; gap: .7rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed rgba(207, 139, 42, .4); }
.rr-du__popts .rr-du__hint { margin: 0; }

/* Accessories: real ready-to-ship pieces, each with its real colours */
.rr-du__accs { display: grid; gap: .7rem; }
.rr-du__acc { display: grid; gap: .55rem; padding: .6rem; border: 1.5px solid var(--rr-blush-300); border-radius: 18px; background: #fff; transition: border-color .25s, background .25s; }
.rr-du__acc:has(input[name="rr_du_acc"]:checked) { border-color: var(--rr-rose-650); background: #FFF6F8; }
.rr-du__acc-pick { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: .7rem; cursor: pointer; }
.rr-du__acc-pick .rr-du__pthumb { border-width: 2px; border-radius: 12px; }
.rr-du__acc-text { display: grid; gap: .1rem; }
.rr-du__acc-pick:has(input:focus-visible) .rr-du__wear { outline: 2px solid var(--rr-rose-800); outline-offset: 2px; }
/* The wear toggle: an empty ring that fills with a tick. */
.rr-du__wear { display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--rr-blush-300); border-radius: 50%; background: #fff; transition: background .25s, border-color .25s; }
.rr-du__wear::after { content: "+"; font-size: 1.1rem; line-height: 1; color: var(--rr-rose-900); }
.rr-du__acc-pick:has(input:checked) .rr-du__wear { border-color: var(--rr-rose-650); background: var(--rr-fill); }
.rr-du__acc-pick:has(input:checked) .rr-du__wear::after { content: "\2713"; font-size: .9rem; }
.rr-du__acc .rr-du__swatches { padding-left: calc(56px + .7rem); }

/* Style the doll */
.rr-du__style summary { float: none; margin: 0; cursor: pointer; list-style: none; }
.rr-du__style summary small { margin-left: auto; }
.rr-du__style summary::-webkit-details-marker { display: none; }
.rr-du__style[open] summary { margin-bottom: .8rem; }
.rr-du__style-grid { display: grid; gap: .9rem; }
.rr-du__style-grid fieldset { margin: 0; padding: 0; border: 0; }
.rr-du__style-grid legend { margin-bottom: .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rr-gold-deep); }
.rr-du__dots label { position: relative; cursor: pointer; }
.rr-du__dots i { display: block; width: 34px; height: 34px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--rr-blush-300); }
.rr-du__dots label:has(input:checked) i { box-shadow: 0 0 0 2.5px var(--rr-rose-650); }
.rr-du__dots label:has(input:focus-visible) i { outline: 2px solid var(--rr-rose-800); outline-offset: 2px; }
.rr-du__pills label { position: relative; cursor: pointer; }
.rr-du__pills span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border: 1.5px solid var(--rr-blush-300); border-radius: 999px; background: #fff; font-size: .84rem; }
.rr-du__pills label:has(input:checked) span { border-color: var(--rr-rose-650); background: var(--rr-fill); }
.rr-du__pills label:has(input:focus-visible) span { outline: 2px solid var(--rr-rose-800); outline-offset: 2px; }

/* The hang tag: the look, its price and the way to the bag */
.rr-du__tag { position: relative; display: grid; gap: .6rem; padding: 2.2rem 1.4rem 1.4rem; border-radius: 22px 22px 18px 18px; box-shadow: var(--rr-shadow-lg); text-align: center; --rr-print-alpha: .22; }
.rr-du__hole { position: absolute; top: .8rem; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--rr-blush-100); box-shadow: 0 0 0 3px var(--rr-gold-500), inset 0 1px 2px rgba(62, 42, 44, .25); }
.rr-du__tag-script { margin: 0; font-size: 1.8rem; line-height: 1; color: var(--rr-gold-deep); text-shadow: 0 0 6px #fff, 0 0 2px #fff; }
.rr-du__lines { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.rr-du__lines li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem .7rem; border-radius: 12px; background: rgba(255, 255, 255, .94); }
.rr-du__lines span { display: grid; min-width: 0; }
.rr-du__lines b { font-family: var(--rr-serif); font-size: 1.08rem; font-weight: 500; line-height: 1.15; color: var(--rr-ink); }
.rr-du__lines small { font-size: .74rem; color: var(--rr-muted); }
.rr-du__lines em { flex: none; font-style: normal; font-size: .84rem; font-weight: 600; color: var(--rr-ink); }
.rr-du__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: .2rem .7rem 0; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rr-gold-deep); }
.rr-du__total b { font-family: var(--rr-serif); font-size: 1.5rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--rr-ink); }
.rr-du__lead { margin: 0; padding: .2rem .5rem; justify-self: center; border-radius: 6px; background: rgba(255, 255, 255, .9); font-size: .8rem; color: var(--rr-muted); }
.rr-du__order { margin: 0; }
.rr-du__order .rr-btn { width: 100%; }
.rr-du__more { display: inline-flex; justify-content: center; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .6rem; justify-self: center; border-radius: 6px; background: rgba(255, 255, 255, .85); font-size: .8rem; font-weight: 500; color: var(--rr-rose-900); }
.rr-du__more:hover .rr-arrow { translate: 4px 0; }
.rr-du__disclaimer { margin: .2rem 0 0; padding: .4rem .6rem; border-radius: 8px; background: rgba(255, 255, 255, .9); font-size: .74rem; line-height: 1.45; color: var(--rr-muted); }
/* WooCommerce adds a "View cart" link after the button; the bag drawer already opens. */
.rr-du__order .added_to_cart { display: none; }
.rr-du__order .rr-btn[disabled] { opacity: .7; cursor: progress; }

/* How to play: three numbered cards under the game. */
.rr-du-how { background: var(--rr-cream); }
.rr-du-how__list { display: grid; gap: 1rem; max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; counter-reset: rr-how; }
.rr-du-how__list li { position: relative; display: grid; gap: .3rem; padding: 1.4rem 1.3rem 1.3rem 4.4rem; border-radius: 22px; background: #fff; box-shadow: var(--rr-shadow); counter-increment: rr-how; }
.rr-du-how__list li::before { content: counter(rr-how); position: absolute; top: 1.2rem; left: 1.2rem; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--rr-fill); font-family: var(--rr-serif); font-size: 1.3rem; font-style: italic; color: var(--rr-ink); }
.rr-du-how__list b { font-family: var(--rr-serif); font-size: 1.3rem; font-weight: 500; color: var(--rr-ink); }
.rr-du-how__list span { font-size: .9rem; color: var(--rr-muted); }

@media (min-width: 900px) {
	/* The doll owns the left column from the top; the title sits over the steps. */
	.rr-du__game { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "stage head" "stage panel"; column-gap: clamp(2rem, 1rem + 3vw, 4rem); row-gap: 1.2rem; }
	.rr-du__head { grid-area: head; justify-items: start; text-align: left; }
	.rr-du__stage { grid-area: stage; grid-row: 1 / span 2; align-self: start; }
	.rr-du__panel { grid-area: panel; }
	.rr-du-how__list { grid-template-columns: repeat(3, 1fr); }
	.rr-du__stage { top: calc(var(--rr-head, 100px) + 16px); }
	.rr-du__frame { max-height: calc(100vh - var(--rr-head, 100px) - 140px); }
	.rr-du__designs { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); overflow: visible; }
	.rr-du__style-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
	.rr-du__lede { font-size: .9rem; }
	/* The doll stays on screen while the steps scroll under it. */
	.rr-du__stage { margin-inline: calc(-1 * var(--rr-gutter)); padding: .5rem var(--rr-gutter) .6rem; background: #FFF1F4; box-shadow: 0 12px 18px -14px rgba(150, 66, 92, .35); }
	.rr-du__frame { width: auto; height: 38vh; max-height: 38vh; }
	.rr-du__tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
	.rr-du__tool { justify-content: center; min-height: 40px; padding: 0 .3rem; font-size: .6rem; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
	.rr-doll__eyes, .rr-doll__all, .rr-doll__sparkles path, .is-swish .rr-doll__skirt, .is-swish .rr-doll__top, .is-twirl .rr-doll__skirt, .is-twirl .rr-doll__all { animation: none; }
	.rr-doll .body { transition: none; }
}