:root {
  /* Sampled from the supplied NOUN pebble palette. */
  --ink: #373737;
  --paper: #f5f1ed;
  --cream: #fffdf9;
  --cherry: #952c26;
  --pink: #c78191;
  --butter: #dbca79;
  --mint: #778367;
  --fern: #698f5a;
  --periwinkle: #82889b;
  --cocoa: #623b37;
  --berry: #871e4a;
  --orange: #c16c34;
  --pebble: #dfdad8;
  --focus-light: var(--butter);
  --focus-dark: var(--ink);
  --font-display: 'Montserrat', Arial, Helvetica, sans-serif;
  --font-ui: 'Montserrat', Arial, Helvetica, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --line: rgba(55,55,55,.2);
  --shadow: 0 24px 70px rgba(55, 55, 55, .16);
  --gutter: 4vw;
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-ui); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }

/* Header: same layout as the shop's (dist/shop/shop.css), so the two read as one site. */
.topbar { height: var(--header-h); line-height: 1.4; display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; background: rgba(245,241,237,.94); backdrop-filter: blur(10px); }
.brand { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.brand img { width: 180px; height: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.nav-link { background: none; border: 0; padding: 10px 14px; cursor: pointer; color: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; white-space: nowrap; }
.nav-link:hover { background: var(--pebble); }
.nav-link em { font-family: var(--font-serif); font-weight: 400; text-transform: none; letter-spacing: -.01em; font-size: 14px; color: var(--ink); }
.nav-studio { border: 1px solid var(--ink); }
.nav-studio em { color: var(--cherry); }
.nav-studio::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cherry); }
.nav-search-mobile { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.live-dot { width: 7px; height: 7px; background: var(--fern); border-radius: 50%; display: inline-block; margin-right: 8px; box-shadow: 0 0 0 4px rgba(105,143,90,.14); }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; display: grid; place-items: center; color: inherit; text-decoration: none; }
.icon-btn:hover { border-color: var(--ink); background: var(--pebble); }
.icon-btn svg { width: 18px; height: 18px; }
.bag-button { border: 0; background: var(--ink); color: white; border-radius: 99px; padding: 10px 12px 10px 18px; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; }
.bag-button:hover { background: #000; }
.bag-button b { display: inline-grid; place-items: center; width: 24px; height: 24px; background: var(--cherry); border-radius: 50%; margin-left: 8px; font-size: 11px; }
.menu-btn { display: none; }
.topbar :is(.nav-link, .icon-btn, .bag-button, .menu-btn):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--butter); }
/* Header with six links (same as the shop's): tighter between 961 and 1280 px so it stays on one line. */
@media (min-width: 961px) and (max-width: 1280px) {
  .topbar { gap: 14px; }
  .brand img { width: 150px; }
  .site-nav { gap: 0; margin-left: 0; }
  .nav-link { padding: 10px 9px; letter-spacing: .07em; gap: 6px; }
  .nav-link em { font-size: 13px; }
  .nav-studio::before { width: 6px; height: 6px; }
  .top-actions { gap: 8px; }
  .bag-button { padding-left: 14px; }
}

.hero { min-height: calc(100vh - var(--header-h)); padding: 5vw var(--gutter) 4vw; display: grid; grid-template-columns: .88fr 1.12fr; gap:4vw; align-items: center; overflow: hidden; position: relative; }
.hero::after { content: "DESIGN / INDULGE / CELEBRATE"; position: absolute; bottom: 8px; left: var(--gutter); font-size: clamp(11px, 1vw, 14px); font-weight: 900; letter-spacing: .24em; color: rgba(55,55,55,.34); }
.eyebrow { margin: 0 0 16px; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 900; }
.eyebrow::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--cherry); vertical-align: middle; margin: 0 10px 3px 0; }
.hero h1 { margin: 0; font-size: clamp(62px, 7.5vw, 132px); line-height: .79; letter-spacing: -.075em; text-transform: uppercase; font-weight: 900; }
.hero h1 span { font-family: var(--font-serif); color: var(--cherry); text-transform: none; font-weight: 400; font-style: italic; letter-spacing: -.065em; }
.hero-intro { max-width: 500px; margin: 36px 0; font-family: var(--font-serif); font-size: clamp(18px, 1.55vw, 24px); line-height: 1.42; }
.primary-link { display: inline-flex; align-items: center; gap: 30px; color: white; background: var(--ink); border-radius: 99px; text-decoration: none; padding: 16px 18px 16px 24px; text-transform: uppercase; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.primary-link span { display: grid; place-items: center; width: 30px; height: 30px; background: var(--cherry); border-radius: 50%; }
/* Cut-out photograph standing in front of a pink disc with a fine ring, as in the first design. */
.hero-visual { width:min(100%,780px); aspect-ratio:1400 / 1060; margin-inline:auto; position:relative; display:grid; place-items:end center; }
.hero-visual::before { content:""; position:absolute; z-index:0; left:50%; top:0; width:75%; aspect-ratio:1; border-radius:50%; background:var(--pink); transform:translateX(-50%); }
.hero-visual::after { content:""; position:absolute; z-index:1; left:50%; top:8.5%; width:61%; aspect-ratio:1; border:1px solid rgba(55,55,55,.45); border-radius:50%; transform:translateX(-50%); pointer-events:none; }
.hero-visual img { position:relative; z-index:2; width:100%; height:auto; }
.hero-visual p { position: absolute; z-index:3; bottom:-18px; right:-1%; margin:0; padding:10px 14px; background:var(--cream); border:1px solid var(--ink); font:italic 18px var(--font-serif); transform:rotate(-3deg); }
.orbit { position: absolute; z-index: 4; background: var(--cream); border: 1px solid var(--ink); padding: 8px 12px; border-radius: 99px; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; font-weight: 900; }
.orbit-one { top: 8%; left: 5%; transform: rotate(-8deg); }
.orbit-two { top: 19%; right: 0; transform: rotate(7deg); }

.builder { background: var(--ink); color: var(--cream); padding: 7vw var(--gutter) 5vw; scroll-margin-top: var(--header-h); }
.builder-heading { display: flex; justify-content: space-between; gap: 40px; align-items: flex-end; margin-bottom: 42px; }
.builder-heading h2, .section-head h2 { margin: 0; font-size: clamp(42px, 6vw, 84px); text-transform: uppercase; letter-spacing: -.06em; line-height: .9; font-weight: 900; }
.builder-heading > p { max-width: 420px; margin: 0; color: rgba(255,253,249,.7); font: 18px/1.5 var(--font-serif); }
.builder-layout { display: grid; grid-template-columns: minmax(330px, .78fr) minmax(0, 1.6fr); border: 1px solid rgba(255,255,255,.2); min-height: 760px; }
.config-panel { border-right: 1px solid rgba(255,255,255,.2); }
.step-nav { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid rgba(255,255,255,.2); }
.step-tab { border: 0; border-right: 1px solid rgba(255,255,255,.16); background: transparent; color: color-mix(in srgb,var(--cream) 72%,transparent); padding: 16px 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; }
.step-tab:last-child { border-right: 0; }
.step-tab span { display: block; margin-bottom: 5px; font-size: 10px; }
.step-tab.active { background: var(--cherry); color: white; }
.step-tab.complete:not(.active) { color:var(--cream); background:color-mix(in srgb,var(--fern) 18%,transparent); }
.step-tab.complete:not(.active) span::after { content:" ✓"; color:var(--fern); }
.step-tab:disabled { color:color-mix(in srgb,var(--cream) 48%,transparent); background:rgba(255,255,255,.018); cursor:not-allowed; opacity:1; }
.config-panel form { height: 690px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cherry) rgba(255,255,255,.08); }
.option-section { border: 0; margin: 0; padding: 34px; display: none; }
.option-section.active { display: block; animation: section-in .25s ease-out; }
@keyframes section-in { from { opacity: 0; transform: translateY(8px); } }
.option-section legend { width: 100%; display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; }
.option-section legend small { color: #fadee6; font-size: 10px; letter-spacing: .08em; }
.option-section legend span { margin-left: auto; color: var(--butter); font-size: 10px; letter-spacing: .08em; }
.section-note { margin: 8px 0 24px; color: color-mix(in srgb,var(--cream) 56%,transparent); font: italic 14px var(--font-serif); }
.choice-grid { display: grid; gap: 12px; }
.choice-grid-two { grid-template-columns: 1fr 1fr; }
.choice-card { display: block; position: relative; cursor: pointer; }
.choice-card input, .choice-row input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card-content { min-height: 150px; border: 1px solid rgba(255,255,255,.22); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; gap:16px; transition: .2s ease; background: rgba(255,255,255,.025); }
.shell-card-art { width:100%; height:68px; object-fit:contain; filter:drop-shadow(0 5px 4px rgba(0,0,0,.24)); }
.shell-card-copy { display:block; min-width:0; }
.choice-card-content strong { display:block; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.choice-card-content small { display:block; color: color-mix(in srgb,var(--cream) 62%,transparent); margin-top: 6px; font:italic 12px/1.3 var(--font-serif); }
.choice-card input:checked + .choice-card-content { border-color: var(--butter); box-shadow: inset 0 0 0 1px var(--butter); background: color-mix(in srgb,var(--butter) 8%,transparent); }
.choice-card input:focus-visible + .choice-card-content, .choice-row input:focus-visible + .row-content { outline: 3px solid var(--focus-light); outline-offset: 2px; box-shadow:0 0 0 5px var(--focus-dark); }
.choice-list { display: grid; gap: 9px; }
.choice-row { display: block; position: relative; cursor: pointer; }
.row-content { display: grid; grid-template-columns: 36px minmax(0,1fr) max-content 18px; align-items: center; gap: 10px; min-height: 52px; padding:4px 2px; border-bottom: 1px solid rgba(255,255,255,.13); transition:padding .18s,background .18s; }
.choice-row:hover .row-content { padding-left: 5px; }
.option-thumb { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 35% 28%,#fffaf0 0 18%,#e8dac3 66%,#ccb895 100%); border:1px solid color-mix(in srgb,var(--butter) 42%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 5px rgba(0,0,0,.18); }
.option-thumb img { width:32px; height:32px; object-fit:contain; }
.option-thumb.piping-thumb { width:54px; height:32px; border-radius:3px; }
.option-thumb.piping-thumb img { width:54px; height:30px; object-fit:cover; }
.row-content:has(.piping-thumb) { grid-template-columns:54px minmax(0,1fr) max-content 18px; }
.option-thumb.silver img { filter:grayscale(1) brightness(1.15) contrast(1.3); }
.option-thumb.dark img { filter:brightness(.5); }
.option-swatch { position:relative; width:25px; height:12px; overflow:hidden; border-radius:999px; transform:rotate(-8deg); background:linear-gradient(155deg,rgba(255,255,255,.7) 0 18%,var(--swatch,#ddd) 23% 70%,rgba(0,0,0,.24)); border:1px solid rgba(64,35,19,.32); box-shadow:inset 0 2px 2px rgba(255,255,255,.35),0 2px 2px rgba(65,37,19,.2); }
.option-swatch::after { content:""; position:absolute; inset:-4px; opacity:.28; background:repeating-linear-gradient(112deg,transparent 0 4px,rgba(69,38,19,.55) 4px 4.7px,transparent 4.7px 7px); mix-blend-mode:multiply; }
.option-swatch.drizzle { height:7px; border-radius:80% 30% 70% 35%; transform:rotate(-18deg); box-shadow:inset 0 1px 1px rgba(255,255,255,.5),4px 3px 0 -2px var(--swatch); }
.option-swatch.glaze { width:27px; height:14px; transform:none; background:linear-gradient(165deg,#f4c28d 0 12%,var(--swatch) 30% 72%,#713817); }
.option-swatch.bare-shell { width:27px; height:11px; transform:none; background:linear-gradient(#efc47d,#b66b2c); }
.option-swatch.coating { width:27px; height:12px; transform:none; }
.option-swatch.enrobe { background:linear-gradient(145deg,#a87958 0 10%,#5a3828 35% 72%,#2c1711); }
.option-swatch.gold-luxe { background:linear-gradient(120deg,#8c6817 0 9%,#f8df72 24%,#b98718 45%,#ffe995 59%,#8f6610 85%,#e7c653); }
.row-content strong { min-width:0; font-size: 12px; line-height:1.3; font-weight: 700; transition:color .18s; }
.row-price { min-width:0; white-space:nowrap; font-size: 10px; color: var(--butter); font-style: normal; font-weight:800; letter-spacing:.025em; }
.row-price.is-included { color:var(--butter); }
.row-indicator { width:18px; height:18px; border:1px solid rgba(255,255,255,.58); display:grid; place-items:center; font-size:11px; }
.row-indicator.check { border-radius:3px; }
.row-indicator.radio { border-radius:50%; }
.choice-row input:checked + .row-content { background:linear-gradient(90deg,color-mix(in srgb,var(--cherry) 11%,transparent),transparent 82%); }
.choice-row input:checked + .row-content strong { color:#fffef9; }
.choice-row input:checked + .row-content .row-indicator { background:var(--cherry); border-color:var(--cherry); }
.choice-row input:checked + .row-content .check::after { content:"✓"; color:white; font-weight:900; }
.choice-row input:checked + .row-content .radio::after { content:""; width:6px; height:6px; border-radius:50%; background:white; }
.choice-row input:disabled + .row-content { opacity: .3; cursor: not-allowed; }
.subsection-title { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 8px; padding-bottom:7px; border-bottom:1px solid color-mix(in srgb,var(--butter) 32%,transparent); color:var(--butter); }
.subsection-title h3 { text-transform: uppercase; margin: 0; font-size: 10px; letter-spacing:.11em; font-weight: 900; }
.subsection-title span { color: var(--butter); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.step-footer { margin-top:28px; display:grid; gap:8px; }
.step-footer small { color:color-mix(in srgb,var(--cream) 56%,transparent); font:italic 12px var(--font-serif); }
.step-next { width:100%; border:0; background:var(--cream); color:var(--ink); min-height:52px; padding:0 18px; display:flex; justify-content:space-between; align-items:center; text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-weight:900; cursor:pointer; }
.step-next span { width:25px; height:25px; border-radius:50%; display:grid; place-items:center; background:var(--cherry); color:white; }
.step-next.finish { background:var(--cherry); color:white; }
.step-next.finish span { background:var(--ink); }
.step-next:disabled { opacity:.28; cursor:not-allowed; }

.preview-column { min-width: 0; background: var(--pebble); color: var(--ink); display: flex; flex-direction: column; }
.preview-card { display: flex; flex-direction: column; flex: 1; }
.preview-toolbar { height: 62px; border-bottom: 1px solid var(--line); padding: 0 24px; display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; letter-spacing: .11em; font-size: 10px; font-weight: 900; }
.preview-actions { display: flex; gap: 18px; }
.preview-actions button, .checkout-summary button { border: 0; background: none; padding: 0 0 2px; border-bottom: 1px solid; cursor: pointer; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 900; }
.stage { position: relative; min-height: 490px; display: grid; place-items: center; overflow: hidden; background-image: radial-gradient(circle at 50% 40%, rgba(255,255,255,.8), transparent 55%), linear-gradient(color-mix(in srgb,var(--ink) 5.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 5.5%,transparent) 1px,transparent 1px); background-size: auto, 34px 34px,34px 34px; }
.stage::before { content: "E"; position: absolute; font: italic 390px/1 var(--font-serif); color: color-mix(in srgb,var(--cherry) 5.5%,transparent); transform: translateY(-4%); }
.stage-label { position: absolute; top: 30px; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.label-left { left: 24px; }
.label-right { right: 24px; }
.dessert { width: 88%; height: 270px; position: relative; z-index: 2; transform: translateY(7px); --fill: #f1e1a8; --fill-dark:#c6a664; --shell: #bd712e; --glaze: transparent; transition:opacity .25s; }
.dessert.empty { opacity:.34; filter:grayscale(.5); }
.dessert-shadow { position: absolute; width: 94%; height: 24px; left: 3%; bottom: 35px; background: rgba(52,27,15,.24); filter: blur(14px); border-radius: 50%; }

.topping-layer,.drizzle-layer,.sprinkle-layer,.leaf-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.build-readout { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 22px 28px 26px; border-top: 1px solid var(--line); }
.build-readout span,.price-block span { font-size:9px; letter-spacing:.13em; font-weight:900; }
.build-readout h3 { margin: 5px 0; font: italic 29px Georgia,serif; color:var(--cherry); }
.build-readout p { margin:0; color:color-mix(in srgb,var(--ink) 78%,transparent); font-size:12px; }
.build-readout .prototype-note { max-width:680px; margin-top:9px; padding-left:18px; position:relative; color:rgba(55,55,55,.78); font:11px/1.4 var(--font-ui); }
.build-readout .prototype-note::before { content:"i"; position:absolute; left:0; top:0; width:12px; height:12px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; font:italic 9px/12px Georgia,serif; }
.prototype-note strong { text-transform:uppercase; letter-spacing:.08em; font-size:10px; }
.price-block { text-align:right; }
.price-block strong { display:block; font-size:40px; letter-spacing:-.06em; }
.checkout-bar { display:grid; grid-template-columns: .8fr 1.2fr; border-top:1px solid var(--line); min-height:78px; }
.checkout-summary { display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-right:1px solid var(--line); text-transform:uppercase; font-size:9px; font-weight:900; letter-spacing:.08em; }
.add-button { border:0; background:var(--cherry); color:white; padding:0 28px; display:flex; justify-content:space-between; align-items:center; text-transform:uppercase; font-size:11px; font-weight:900; letter-spacing:.08em; cursor:pointer; transition:.2s; }
.add-button:hover { background:var(--berry); }
.add-button b { font-size:18px; }
.add-button:disabled { background:color-mix(in srgb,var(--ink) 48%,var(--pebble)); color:color-mix(in srgb,var(--cream) 72%,transparent); cursor:not-allowed; }
.add-button:disabled b { opacity:.55; }
.add-button.full { width:100%; min-height:54px; justify-content:center; }

.inspiration,.how-it-works { padding:8vw var(--gutter); }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:42px; }
.section-head h2 { max-width:900px; }
.gallery-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:16px; }
.gallery-grid figure { margin:0; position:relative; min-height:310px; overflow:hidden; }
.gallery-grid .gallery-large { grid-row:span 2; }
.gallery-grid img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.gallery-grid figure:hover img { transform:scale(1.035); }
.gallery-grid figcaption { position:absolute; left:16px; right:16px; bottom:16px; background:color-mix(in srgb,var(--cream) 93%,transparent); padding:15px 17px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.gallery-grid figcaption span { font:italic 19px Georgia,serif; }
.gallery-grid figcaption small { text-transform:uppercase; letter-spacing:.08em; font-size:8px; }
.how-it-works { background:var(--butter); }
.occasion-intro { max-width:840px; margin:-14px 0 54px; font:clamp(18px,2vw,28px)/1.45 var(--font-serif); }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }
.process-grid article { padding:34px 7vw 20px 0; border-right:1px solid var(--ink); }
.process-grid article:not(:first-child) { padding-left:34px; }
.process-grid article:last-child { border-right:0; }
.process-grid b { color:var(--cherry); font-size:11px; }
.process-grid h3 { text-transform:uppercase; font-size:20px; margin:28px 0 10px; font-weight:900; }
.process-grid p { font:16px/1.5 Georgia,serif; margin:0; }
.testimonial { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:30px; margin:64px 0 0; padding:clamp(28px,4vw,58px); background:var(--berry); color:var(--cream); }
.testimonial p { max-width:920px; margin:0; font:italic clamp(28px,4vw,58px)/1.06 var(--font-serif); letter-spacing:-.025em; }
.testimonial cite { font-style:normal; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
footer { padding:5vw var(--gutter) 3vw; background:var(--cherry); color:white; container-type:inline-size; }
.footer-wordmark { font-size:clamp(40px,15vw,260px); font-size:min(260px,calc(100cqw / 6.2)); line-height:.72; text-transform:uppercase; letter-spacing:-.085em; font-weight:900; white-space:nowrap; overflow:hidden; }
.footer-row { display:flex; justify-content:space-between; margin-top:5vw; text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:800; }
.footer-row a { color:white; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 22px; }

dialog { width:min(620px,calc(100% - 32px)); border:0; padding:38px; background:var(--cream); color:var(--ink); box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(17,14,10,.72); backdrop-filter:blur(5px); }
dialog h2 { margin:0 0 22px; font:italic 38px Georgia,serif; color:var(--cherry); }
.dialog-close { position:absolute; top:14px; right:15px; border:1px solid var(--ink); border-radius:50%; background:transparent; width:34px; height:34px; font-size:24px; cursor:pointer; }
.spec-row { display:grid; grid-template-columns:115px 1fr; gap:16px; padding:12px 0; border-top:1px solid var(--line); font-size:13px; }
.spec-row b { text-transform:uppercase; font-size:9px; letter-spacing:.1em; }
.dialog-total { display:flex; justify-content:space-between; align-items:center; border-top:2px solid var(--ink); padding:19px 0; margin-top:8px; text-transform:uppercase; font-size:10px; font-weight:900; }
.dialog-total strong { font-size:28px; }
.toast { position:fixed; z-index:30; bottom:24px; left:50%; transform:translate(-50%,140%); background:var(--ink); color:white; padding:15px 22px; border-radius:99px; font-size:12px; box-shadow:var(--shadow); transition:transform .3s ease; }
.toast.show { transform:translate(-50%,0); }

@media (max-width: 960px) {
  :root { --gutter: 20px; --header-h: 68px; }
  .topbar { gap: 12px; }
  .menu-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer; order: 3; }
  .menu-btn svg { width: 18px; height: 18px; }
  .top-actions { order: 2; gap: 10px; }
  .top-actions .search-btn { display: none; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); border-bottom: 1px solid var(--ink); flex-direction: column; align-items: stretch; margin: 0; padding: 8px var(--gutter) 22px; gap: 0; box-shadow: var(--shadow); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .site-nav.open { display: flex; }
  .site-nav .nav-link { border-radius: 0; padding: 18px 0; border-bottom: 1px solid var(--line); justify-content: space-between; font-size: 12px; width: 100%; }
  .site-nav .nav-link:hover { background: none; }
  .nav-studio { border: 0 !important; border-bottom: 1px solid var(--line) !important; justify-content: flex-start !important; }
  .nav-studio::before { display: none; }
  .nav-search-mobile { display: inline-flex; }
}
@media (max-width: 1000px) {
  .hero { grid-template-columns:1fr; padding-top:10vw; }
  .hero-copy { position:relative; z-index:3; }
  .hero-visual { width:min(86vw,800px); height:auto; margin-top:38px; }
  .hero-visual img { width:100%; }
  .builder-layout { grid-template-columns:1fr; }
  .config-panel { border-right:0; border-bottom:1px solid rgba(255,255,255,.2); }
  .config-panel form { height:auto; min-height:520px; }
  .stage { min-height:450px; }
}

@media (max-width: 700px) {
  .brand img { width:140px; }
  .bag-button { padding-left:14px; }
  .hero { min-height:auto; padding:70px var(--gutter) 40px; }
  .hero h1 { font-size:17vw; }
  .hero-intro { margin:26px 0; }
  .hero-visual { width:100%; height:auto; margin-top:38px; }
  .hero-visual img { width:100%; }
  .hero-visual p,.orbit-two { display:none; }
  .builder { padding:70px var(--gutter) 40px; }
  .builder-heading { display:block; }
  .builder-heading > p { margin-top:24px; }
  .builder-layout { border-left:0; border-right:0; }
  .option-section { padding:28px 20px; }
  .choice-grid-two { grid-template-columns:1fr; }
  .choice-card-content { min-height:118px; }
  .shell-card-art { height:48px; }
  .step-tab { letter-spacing:.04em; }
  .stage { min-height:350px; }
  .dessert { width:95%; transform:scale(.84); }
  .stage-label { top:15px; }
  .build-readout { padding:20px; align-items:flex-start; }
  .build-readout h3 { font-size:23px; }
  .price-block strong { font-size:32px; }
  .checkout-bar { grid-template-columns:1fr; }
  .checkout-summary { min-height:54px; border-right:0; }
  .add-button { min-height:64px; }
  .inspiration,.how-it-works { padding:70px var(--gutter); }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-grid .gallery-large { grid-row:auto; }
  .gallery-grid figure { min-height:300px; }
  .section-head { display:block; }
  .process-grid { grid-template-columns:1fr; }
  .process-grid article,.process-grid article:not(:first-child) { padding:28px 0; border-right:0; border-bottom:1px solid var(--ink); }
  .process-grid article:last-child { border-bottom:0; }
  .occasion-intro { margin:0 0 38px; }
  .testimonial { grid-template-columns:1fr; gap:20px; margin-top:40px; padding:28px 22px; }
  dialog { padding:34px 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}

.dessert.photo-model { width:min(92%,980px); height:290px; transform:none; isolation:isolate; --rest:16%; }
/* Desktop: the pastry sits a little higher so the cut-end below it has room to stand clear of it. */
@media (min-width:1001px) { .dessert.photo-model { top:-30px; } }
.photo-model .dessert-shadow { z-index:0; width:86%; left:7%; bottom:calc(var(--rest) - 4px); height:16px; opacity:.5; filter:blur(12px); }


@media (max-width: 760px) {
  .dessert.photo-model { width:98%; height:250px; transform:none; }
}

/* French Renaissance configurator plates */
.stage {
  background-color:color-mix(in srgb,var(--paper) 86%,var(--butter));
  background-image:
    radial-gradient(ellipse at 50% 44%,rgba(255,253,246,.94),rgba(248,241,226,.7) 52%,transparent 76%),
    repeating-linear-gradient(0deg,rgba(91,67,42,.035) 0 1px,transparent 1px 6px),
    linear-gradient(rgba(95,67,39,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(95,67,39,.06) 1px,transparent 1px);
  background-size:auto,auto,34px 34px,34px 34px;
}
.stage::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:url("assets/illustration/m-y-stage-illustration-v2.png") center 48%/100% auto no-repeat;
  mix-blend-mode:multiply;
  opacity:.065;
  filter:sepia(.7) saturate(.6) hue-rotate(345deg);
  pointer-events:none;
}
.stage::after {
  content:none;
}


@media (max-width:760px) {
  .stage::before { opacity:.04; }
}

/* Pastry compositor: the base artwork and every ingredient layer share one box with the artwork's
   2160 × 350 proportions, so pieces placed in % stay attached to the shell at every width.
   Layers have no z-index of their own; each piece's z-index orders it within the whole pastry:
   2 shell · 3 glaze/filling · 4 back cream · 7 front cream · 8 drizzle/front pastry wall
   9–10 fruit, chunks and chocolate · 11 small finishes · 12 leaf/plaque · 13 inside card. */
.photo-model .pastry-photo,
.photo-model .filling-layer,
.photo-model .glaze-layer,
.photo-model .piping-layer,
.photo-model .topping-layer,
.photo-model .drizzle-layer,
.photo-model .sprinkle-layer,
.photo-model .leaf-layer { position:absolute; inset:auto 0 var(--rest,26%) 0; width:100%; height:auto; aspect-ratio:2160 / 350; pointer-events:none; }
/* Layers must not form stacking contexts of their own, or every piece in them would sit at the
   layer's level instead of its own z-index (an older rule gave them z-index 5). */
.photo-model :is(.piping-layer,.topping-layer,.drizzle-layer,.sprinkle-layer,.leaf-layer) { z-index:auto; }
.photo-model .pastry-photo.pastry-wall { z-index:8; filter:drop-shadow(0 -1px 1px rgba(80,46,20,.25)); }
.photo-model.mille .pastry-photo.pastry-wall { clip-path:inset(55% 0 0); }
.photo-model .pastry-photo { z-index:2; object-fit:fill; filter:drop-shadow(0 7px 5px rgba(73,45,24,.22)); transition:filter .25s,opacity .25s; }
.photo-model .filling-layer { z-index:3; }
/* The mille-feuille stays visibly filled when decorative cream is added. The top piping overlaps
   this layer; hiding it exposed the bare pastry floor and created a false gap beneath the cream. */
.photo-model.mille.has-top-cream .filling-layer { opacity:1; }
.photo-model.mille.has-filling .filling-layer::before { content:""; position:absolute; z-index:0; left:2.2%; right:2.2%; top:33%; bottom:45%; border-radius:7px; background:linear-gradient(180deg,color-mix(in srgb,var(--fill),white 10%),var(--fill) 58%,var(--fill-dark)); box-shadow:inset 0 1px 1px rgba(255,246,224,.3); }
.photo-model .mille-filling { position:absolute; inset:0; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 1px 1px rgba(80,42,20,.22)); }
.photo-model .mille-filling-art { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; object-fit:fill; transform:translateY(-14%) scaleY(1.25); transform-origin:50% 50%; filter:drop-shadow(0 1px 1px rgba(80,42,20,.22)); }
.photo-model .mille-filling-art.pistachio-tint { filter:sepia(.14) hue-rotate(6deg) saturate(.56) brightness(1.01) drop-shadow(0 1px 1px rgba(80,42,20,.22)); }
.mille-filling-lobes { stroke:color-mix(in srgb,var(--fill-dark),#3a1d0d 20%); stroke-width:.55; }
.mille-filling-gloss { fill:none; stroke:rgba(255,250,226,.68); stroke-width:2.2; stroke-linecap:round; }
.mille-filling-specks { fill:#51351d; opacity:.72; }
.photo-model.empty .pastry-photo { opacity:.35; filter:grayscale(.45) sepia(.35) drop-shadow(0 7px 5px rgba(73,45,24,.13)); }
.photo-model .piece {
  position:absolute;
  height:auto;
  max-width:none;
  transform:translate(-50%,-100%) rotate(var(--tilt,0deg)) scaleX(var(--flip,1));
  transform-origin:50% 100%;
  filter:drop-shadow(0 1.5px 1.2px rgba(64,36,18,.3));
}
.photo-model .piece.cream { filter:drop-shadow(0 2px 1.5px rgba(96,64,34,.2)); }
.photo-model .cream-band { position:absolute; inset:0; z-index:4; width:100%; height:100%; max-width:none; object-fit:fill; transform:translateY(-38%); filter:drop-shadow(0 2px 1.5px rgba(96,64,34,.22)); }
.photo-model.mille .piece.cream { transform:translate(-50%,-50%) rotate(var(--tilt,0deg)) scaleY(1.4) scaleX(var(--flip,1)); }
.photo-model.mille .cream-band { transform:translateY(-12%) scaleY(1.55); transform-origin:50% 100%; }
/* The lower front of the cream band, redrawn over the toppings' bases (between toppings z6 and fillers z8). */
.photo-model .cream-band.cream-band-front { z-index:7; filter:none; }
/* On a piped band, toppings cast a soft contact shadow onto the cream so they read as resting on it.
   :where() deliberately keeps this fallback less specific than ingredient colour treatments below. */
.photo-model.has-band :where(.piece:not(.cream):not(.finish)) { filter:drop-shadow(0 2.5px 1.5px rgba(112,78,40,.38)) drop-shadow(0 .5px .5px rgba(70,40,18,.3)); }
/* Keep the two easily-confused chunk families readable without changing their artwork language. */
.photo-model .piece.ruby { filter:saturate(1.09) contrast(1.08) drop-shadow(0 2px 1.2px rgba(95,25,43,.38)); }
.photo-model .piece.scone { filter:saturate(1.03) contrast(1.07) drop-shadow(0 2px 1.3px rgba(91,53,24,.32)); }
.photo-model .piece:is(.raspberry-baton,.caramel-cacao-disc,.chocolate-tuile,.raspberry-white-sail) { filter:saturate(1.02) contrast(1.04) drop-shadow(0 2px 1.2px rgba(70,35,22,.34)); }
/* Photographic accessory pieces are warmed slightly to sit with the hand-rendered artwork. */
.photo-model .piece.finish { filter:sepia(.16) saturate(.92) contrast(1.04) drop-shadow(0 1px .8px rgba(64,36,18,.32)); }
.photo-model .piece.finish.leaf { filter:saturate(1.2) brightness(1.08) contrast(1.12) drop-shadow(0 0 .7px rgba(255,246,174,.82)) drop-shadow(0 1px .8px rgba(92,62,12,.48)); }
.photo-model .piece.finish.silver { filter:grayscale(1) brightness(1.12) contrast(1.35) drop-shadow(0 1px .7px rgba(52,52,58,.45)); }
.photo-model .piece.finish.dark { filter:brightness(.5) saturate(.7) drop-shadow(0 1px .8px rgba(40,22,12,.35)); }
.photo-model .glaze-layer { z-index:3; }
.photo-model .glaze { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.photo-model .glaze-body { stroke:#5a2e12; stroke-width:1.6; stroke-linejoin:round; }
.photo-model .glaze-streak { fill:none; stroke:rgba(255,242,214,.5); stroke-width:1.4; stroke-linecap:round; }
.photo-model .glaze-streak.soft { stroke:rgba(255,236,200,.24); stroke-width:2.8; }
.photo-model .glaze-shine { fill:rgba(255,244,220,.75); }
.photo-model .drizzle { position:absolute; z-index:8; inset:0; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 1px .8px rgba(80,44,16,.34)); }
.photo-model .drizzle .drizzle-strand { fill:none; stroke:var(--drizzle); stroke-linecap:round; stroke-linejoin:round; }
.photo-model .drizzle .drizzle-highlight { fill:none; stroke:rgba(255,244,218,.56); stroke-linecap:round; opacity:.72; }
.photo-model .praline-drizzle .drizzle-strand { stroke:#8c5a33; }
.photo-model .pistachio-drizzle .drizzle-highlight { stroke:rgba(247,250,213,.48); }

/* Option groups inside a step (cream, topping families, finishing-touch families). */
.option-group:first-child .subsection-title,
.option-group .subsection-title { margin:24px 0 8px; }

/* Step navigation: each step's heading clears the tab bar, and its confirm button stays pinned to
   the bottom of the options panel while the list scrolls. */
.option-section { padding-top:0; }
.option-section legend { padding-top:30px; }
.option-section legend span { white-space:nowrap; }
.step-footer { position:sticky; bottom:0; z-index:2; margin:28px -34px -34px; padding:18px 34px 22px; background:linear-gradient(transparent,var(--ink) 18px); }
/* While steps remain, the main button guides to the next one instead of sitting disabled. */
.add-button.is-guide { background:var(--ink); color:var(--cream); }
.add-button.is-guide:hover { background:#2c2824; }
.add-button.is-guide span::after,
.add-button.full.is-guide::after { content:" →"; }
.add-button.is-guide b { opacity:.7; }

/* Stacked layout: the live preview stays pinned at the top while options scroll beneath it, and
   the checkout bar stays pinned at the bottom. The preview column's children join the layout grid
   so both can stick for the whole height of the builder. */
@media (max-width:1000px) {
  .preview-column { display:contents; }
  .preview-card { order:-1; position:sticky; top:var(--header-h); z-index:8; background:var(--pebble); color:var(--ink); box-shadow:0 10px 24px rgba(0,0,0,.3); }
  .preview-toolbar { height:44px; padding:0 16px; }
  .stage { min-height:0; height:clamp(150px,calc(30vw + 40px),300px); }
  .stage-label,.stage::before,.stage::after { display:none; }
  .dessert.photo-model { width:96%; height:100%; }
  .build-readout { padding:10px 16px 12px; align-items:center; gap:12px; }
  .build-readout > div > span,.build-readout p,.price-block span { display:none; }
  .build-readout .prototype-note { display:block; max-width:54ch; margin-top:4px; font-size:11px; line-height:1.35; }
  .build-readout h3 { margin:0; font-size:20px; }
  .price-block strong { font-size:26px; }
  .checkout-bar { order:3; position:sticky; bottom:0; z-index:8; grid-template-columns:auto 1fr; min-height:60px; background:var(--pebble); color:var(--ink); box-shadow:0 -8px 20px rgba(0,0,0,.28); }
  .checkout-summary { min-height:0; padding:0 18px; gap:16px; border-right:1px solid var(--line); }
  .add-button { min-height:60px; padding:0 18px; gap:12px; }
  /* The pinned checkout button does the step footer's job here. */
  .step-footer { display:none; }
  .option-section { padding-bottom:28px; }
}
@media (max-width:700px) {
  #selectionCount { display:none; }
  .option-section legend { padding-top:24px; }
}

/* On desktop the complete studio is one viewport: the configurator scrolls internally only when
   a long ingredient family needs it, while the pastry and order controls remain in view. */
@media (min-width:1001px) {
  .builder { padding:24px var(--gutter) 28px; }
  .builder-heading { align-items:center; margin-bottom:16px; }
  .builder-heading h2 { font-size:clamp(40px,4.2vw,58px); }
  .builder-heading > p { max-width:390px; font-size:14px; line-height:1.35; }
  .builder-layout { height:calc(100svh - 145px - var(--header-h)); min-height:620px; max-height:760px; }
  .config-panel { display:flex; min-height:0; flex-direction:column; }
  .config-panel form { height:auto; min-height:0; flex:1; }
  .preview-column,.preview-card { min-height:0; }
  .preview-toolbar { height:50px; }
  .stage { min-height:0; flex:1; }
  .build-readout { padding:14px 22px 16px; }
  .build-readout h3 { margin:3px 0; font-size:25px; }
  .checkout-bar { min-height:64px; }
}

/* Cut end: the section sits beneath the full-length pastry so it explains the interior without
   covering the product. The cream sprite sits on top of the drawn section. */
.photo-model .slice { position:absolute; z-index:13; left:50%; right:auto; bottom:-104px; width:clamp(160px,26%,250px); margin:0; text-align:center; transform:translateX(-50%); pointer-events:none; }
.slice-art { position:relative; aspect-ratio:3 / 2; transform:rotate(-3deg); }
.photo-model .slice[hidden],.slice-cream[hidden] { display:none; }
.slice-shell-art { position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 3px rgba(66,33,14,.24)); }
.slice-cream { position:absolute; left:52%; top:15%; z-index:3; width:35%; transform:translate(-50%,-58%); filter:drop-shadow(0 2px 2px rgba(96,64,34,.25)); }
.slice-art[data-base="mille"] .slice-cream { top:22%; }
.slice-ink { stroke:#4a2c16; stroke-width:.9; stroke-linejoin:round; }
.slice-ink.thin { stroke-width:.6; }
.slice-crumb { fill:rgba(255,226,170,.35); stroke:rgba(110,56,20,.45); stroke-width:.35; }
.slice-flake { fill:none; stroke:rgba(110,56,20,.5); stroke-width:.6; }
.slice-wall { fill:#f4dfb3; }
.slice-hollow { fill:#efdcb6; stroke:#a57a45; stroke-width:.6; stroke-dasharray:2 1.6; }
.slice-swirl { fill:none; stroke:rgba(255,248,232,.38); stroke-width:.9; stroke-linecap:round; }
.slice-gloss { fill:none; stroke:rgba(255,252,236,.7); stroke-width:1.4; stroke-linecap:round; }
.slice-shine { fill:rgba(255,255,245,.8); }
.slice-speck { fill:#3b2414; }
.slice-blob { fill:none; stroke:rgba(80,52,26,.28); stroke-width:.8; }
.slice-blob:nth-child(odd) { fill:rgba(255,250,236,.14); }
.slice-coat-gloss { fill:none; stroke:rgba(255,238,214,.35); stroke-width:1.6; stroke-linecap:round; }
.slice-leaf { fill:none; stroke:rgba(120,82,10,.55); stroke-width:.5; stroke-dasharray:6 3 2 5; }
.slice-fill-hatch,.mille-filling-hatch { fill:none; stroke:rgba(72,42,22,.28); stroke-width:.42; stroke-linecap:round; }
.slice-fill-stipple,.mille-filling-stipple { fill:rgba(71,41,22,.32); }
.slice-crust-hatch { fill:none; stroke:rgba(86,46,20,.32); stroke-width:.38; stroke-linecap:round; }
.slice figcaption { min-width:126px; margin:1px 0 0 50%; padding:3px 6px 4px; display:grid; gap:1px; transform:translateX(-50%); background:rgba(244,237,221,.88); border-top:1px solid rgba(97,66,38,.28); }
.slice figcaption small { font-size:7px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb,var(--ink) 74%,transparent); }
.slice figcaption b { font:italic 11px/1.25 Georgia,serif; color:var(--ink); white-space:normal; }
.slice.is-empty figcaption b { color:color-mix(in srgb,var(--ink) 50%,transparent); }
@media (max-width:1000px) {
  .dessert.photo-model { --rest:31%; }
  .photo-model .slice { width:clamp(116px,21%,168px); bottom:20px; }
  .slice figcaption { position:absolute; left:50%; right:auto; top:calc(100% - 2px); min-width:118px; margin:0; transform:translateX(-50%); }
  .slice figcaption small { display:block; }
  .slice figcaption b { font-size:9px; white-space:normal; }
}

/* Summary and order dialogs. */
dialog { max-height:calc(100dvh - 32px); overflow-y:auto; }
.spec-row { grid-template-columns:115px 1fr auto; align-items:baseline; }
.spec-row em { font-style:normal; font-size:12px; font-weight:700; color:color-mix(in srgb,var(--ink) 60%,transparent); white-space:nowrap; }
.spec-row.spec-base em { color:var(--ink); }
.dialog-preview { margin:0 -14px 18px; padding:8px 0 22px; background:var(--paper); border:1px solid var(--line); }
.dialog-preview .dessert.photo-model { width:90%; height:220px; margin:0 auto; --rest:32%; }
.dialog-preview .dessert-shadow { display:none; }
.dialog-preview .slice figcaption { display:none; }
.dialog-preview .photo-model .slice { width:clamp(150px,29%,205px); bottom:-32px; }
.order-dialog { width:min(680px,calc(100% - 32px)); }
.order-item { display:grid; grid-template-columns:1fr auto; gap:6px 18px; padding:16px 0; border-top:1px solid var(--line); }
.order-item h3 { margin:0 0 4px; font:italic 22px Georgia,serif; color:var(--cherry); }
.order-item p { margin:0; font-size:12px; line-height:1.5; color:color-mix(in srgb,var(--ink) 76%,transparent); }
.order-item strong { font-size:20px; }
.order-item-actions { grid-column:1 / -1; display:flex; gap:18px; }
.order-item-actions button,.text-button { border:0; background:none; padding:0 0 2px; border-bottom:1px solid; cursor:pointer; text-transform:uppercase; letter-spacing:.08em; font-size:9px; font-weight:900; color:var(--ink); }
.order-empty { padding:18px 0; border-top:1px solid var(--line); font:italic 15px var(--font-serif); color:color-mix(in srgb,var(--ink) 65%,transparent); }
.order-note { margin:0; padding:2px 0 12px; font:italic 14px/1.5 var(--font-serif); color:color-mix(in srgb,var(--ink) 70%,transparent); }
.order-actions { display:grid; gap:14px; margin-top:6px; }
.order-actions .add-button { text-decoration:none; }
.order-actions .text-button { justify-self:center; text-decoration:none; padding-bottom:2px; }
[hidden] { display:none !important; }
@media (max-width:700px) {
  .spec-row { grid-template-columns:90px 1fr auto; gap:10px; }
  .dialog-preview { margin:0 -8px 16px; }
  .dialog-preview .dessert.photo-model { height:110px; }
}

/* Option notes, share and save links, and the settle animation for new pieces. */
.row-note { display:block; margin-top:2px; font:italic 400 11px/1.3 var(--font-serif); color:color-mix(in srgb,var(--cream) 60%,transparent); }
.dialog-links { display:flex; gap:22px; margin:-6px 0 14px; }
.preview-actions { flex-wrap:wrap; justify-content:flex-end; gap:6px 16px; }
.photo-model .piece.enter { animation:piece-settle .52s cubic-bezier(.18,.88,.28,1.18) both; animation-delay:calc(var(--x) * 3ms); }
@keyframes piece-settle {
  0% { opacity:0; translate:0 -18px; scale:.82; }
  72% { opacity:1; translate:0 2px; scale:1.03; }
  100% { opacity:1; translate:0 0; scale:1; }
}
@media (max-width:700px) {
  /* The pinned preview speaks for itself on phones; the toolbar keeps only its actions. */
  .preview-toolbar > div:first-child { display:none; }
  .preview-toolbar { height:auto; min-height:44px; padding:6px 16px; }
  .preview-actions { width:100%; justify-content:space-between; gap:4px 12px; }
}

/* Message plaque: white chocolate, piped dark-chocolate script, leaning back on the cream. */
.photo-model .plaque { position:absolute; aspect-ratio:110 / 34; container-type:inline-size; transform:translate(-50%,-100%) rotate(-1.5deg); transform-origin:50% 100%; filter:drop-shadow(0 3px 2px rgba(70,44,20,.32)); }
.plaque-slab { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.plaque-text { position:absolute; left:6%; right:6%; top:3%; height:85%; display:flex; flex-direction:column; justify-content:center; align-items:center; transform:scaleY(.66); }
.plaque-line { display:block; font:600 var(--size,15cqw)/1.02 'Dancing Script','Snell Roundhand','Segoe Script','Brush Script MT',cursive; color:#3b2314; white-space:nowrap; -webkit-text-stroke:.025em #3b2314; text-shadow:0 .03em 0 rgba(255,255,255,.4); }
.plaque-line:nth-child(2) { padding-left:12%; }
.option-swatch.plaque { width:28px; height:14px; border-radius:2px; transform:rotate(-6deg); background:linear-gradient(160deg,#fff9e8,#efe0b8 60%,#dcc591); border:1px solid #8a7345; }
.message-field { display:grid; gap:6px; margin:4px 0 10px 47px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; color:var(--butter); }
.message-field input { min-height:44px; padding:8px 12px; border:1px solid rgba(255,255,255,.35); background:color-mix(in srgb,var(--cream) 8%,transparent); color:var(--cream); font:italic 600 20px 'Dancing Script','Snell Roundhand',cursive; letter-spacing:0; text-transform:none; }
.message-field input:focus-visible { outline:3px solid var(--focus-light); outline-offset:1px; box-shadow:0 0 0 3px var(--focus-dark); }
.message-field small { font:italic 400 11px var(--font-serif); letter-spacing:0; text-transform:none; color:color-mix(in srgb,var(--cream) 55%,transparent); }

/* Toppings step: numbered parts and a cue that points to the toppings below. */
.part-title { display:flex; align-items:baseline; gap:10px; margin:26px 0 0; color:var(--cream); }
.part-title b { display:grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%; background:var(--butter); color:var(--ink); font-size:11px; font-weight:900; transform:translateY(-1px); }
.part-title span { font-size:15px; font-weight:900; text-transform:uppercase; letter-spacing:.02em; }
.part-title small { margin-left:auto; color:rgba(255,253,249,.6); font:italic 12px var(--font-serif); }
#toppingOptions > .part-title:first-child { margin-top:6px; }
#toppingOptions .part-title + .option-group .subsection-title { display:none; }
#toppingOptions .part-title + .option-group .choice-list { margin-top:8px; }
#toppingsStart { scroll-margin-top:12px; border-radius:6px; }
#toppingsStart.flash { animation:part-flash 1.4s ease-out; }
@keyframes part-flash { 0%,30% { background:color-mix(in srgb,var(--butter) 26%,transparent); box-shadow:0 0 0 8px color-mix(in srgb,var(--butter) 26%,transparent); } 100% { background:transparent; box-shadow:0 0 0 8px transparent; } }
.next-cue { width:100%; margin:18px 0 0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px dashed color-mix(in srgb,var(--butter) 70%,transparent); border-radius:6px; background:color-mix(in srgb,var(--butter) 12%,transparent); color:var(--cream); text-align:left; cursor:pointer; font:inherit; }
.next-cue b { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.next-cue small { display:block; margin-top:3px; font:italic 12px var(--font-serif); color:rgba(255,253,249,.7); }
.next-cue i { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--butter); color:var(--ink); font-style:normal; font-weight:900; animation:cue-bob 1.6s ease-in-out infinite; }
.next-cue:hover { background:color-mix(in srgb,var(--butter) 20%,transparent); }
.next-cue:focus-visible { outline:3px solid var(--focus-light); outline-offset:2px; }
@keyframes cue-bob { 50% { transform:translateY(3px); } }

/* Touch targets: small text buttons keep their look but get a 44 px hit area from an invisible ::after. */
.preview-actions button,.checkout-summary button,.order-item-actions button,.text-button,.dialog-close { position:relative; }
.preview-actions button::after,.checkout-summary button::after,.order-item-actions button::after,.text-button::after { content:""; position:absolute; inset:-16px -6px; }
.order-item-actions button::after { inset:-16px -10px; }
.order-item-actions button + button::after { inset:-16px -6px; }
.preview-actions button,.checkout-summary button { z-index:1; }
.dialog-close::after { content:""; position:absolute; inset:-6px; border-radius:50%; }
.order-actions .text-button::after { inset:-14px -10px -18px; }
.order-actions .add-button { position:relative; z-index:1; }
.footer-links a { position:relative; }
.footer-links a::after { content:""; position:absolute; inset:-15.5px -6px; }
@media (max-width:700px) { .footer-links { row-gap:31px; } }
.menu-btn,.icon-btn { position:relative; }
.menu-btn::after { content:""; position:absolute; inset:-2px; border-radius:50%; }

/* Kitchen sheet (#kitchen?…): only the sheet is shown; it prints on one A4 landscape page. */
body.kitchen-mode > :not(.kitchen-sheet) { display:none !important; }
.kitchen-sheet { max-width:1100px; margin:0 auto; padding:28px 32px 40px; color:var(--ink); }
.kitchen-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; border-bottom:2px solid var(--ink); padding-bottom:14px; }
.kitchen-head h1 { margin:4px 0 2px; font:italic 40px/1.05 var(--font-serif); color:var(--cherry); }
.kitchen-head .eyebrow { margin:0; }
.kitchen-size { margin:0; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.kitchen-print { border:0; border-radius:99px; background:var(--ink); color:#fff; padding:12px 22px; font:800 12px var(--font-ui); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.kitchen-art { position:relative; margin:18px 0 70px; }
.kitchen-art .dessert.photo-model { width:100%; height:330px; margin:0 auto; }
.kitchen-message { display:flex; align-items:baseline; gap:14px; margin:0 0 16px; padding:12px 16px; border:2px solid var(--ink); }
.kitchen-message small { font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.kitchen-message b { font:italic 28px var(--font-serif); }
.kitchen-spec { display:grid; grid-template-columns:repeat(3,1fr); gap:12px 28px; margin:0; }
.kitchen-spec div { border-top:1px solid var(--line); padding-top:8px; }
.kitchen-spec dt { font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb,var(--ink) 65%,transparent); }
.kitchen-spec dd { margin:4px 0 0; font-size:17px; font-weight:700; line-height:1.35; }
.kitchen-foot { margin-top:22px; font:italic 13px var(--font-serif); color:color-mix(in srgb,var(--ink) 65%,transparent); }
@media (max-width:700px) {
  .kitchen-sheet { padding:18px 16px 30px; }
  .kitchen-head h1 { font-size:28px; }
  .kitchen-art .dessert.photo-model { height:180px; }
  .kitchen-spec { grid-template-columns:1fr; }
}
@media print {
  @page { size:A4 landscape; margin:10mm; }
  body.kitchen-mode { background:#fff; }
  .kitchen-print { display:none; }
  .kitchen-sheet { max-width:none; padding:0; }
  .kitchen-art { margin:48px 0 40px; }
  .kitchen-art .dessert.photo-model { height:250px; }
  .kitchen-head h1 { font-size:32px; }
  .kitchen-spec dd { font-size:15px; }
  .kitchen-message { margin-bottom:10px; padding:8px 14px; }
  .kitchen-art .piece, .kitchen-art img { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}

/* Phones: the pinned preview keeps the illustration note to one short sentence, so the pastry keeps the room. */
.prototype-note .note-short { display:none; }
@media (max-width: 760px) {
  .prototype-note .note-long { display:none; }
  .prototype-note .note-short { display:inline; }
}
/* Very small phones (320 px): the logo shrinks so the header fits without sideways scroll. */
@media (max-width: 359px) { .brand img { width:112px; } }