/* Baby Plates — site styles */
:root {
  --yellow: #FED600;
  --yellow-2: #FFE34D;
  --yellow-soft: #FFF6C2;
  --cream: #FFFBEB;
  --ink: #0B0B0B;
  --ink-2: #222;
  --muted: #5f5f5a;
  --line: #ebe7d9;
  --paper: #fff;
  --green: #12805c;
  --red: #c8352a;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px -12px rgba(0,0,0,.18);
  --stick: 4px 4px 0 var(--ink);
  --head: 'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --max: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 999; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid #2f6bff; outline-offset: 2px; border-radius: 6px; }

/* ---------- buttons ---------- */
.btn { --bg: var(--ink); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: 15px 26px; border-radius: 999px; background: var(--bg); color: var(--fg); border: 2.5px solid var(--ink); font-weight: 800; font-size: 1.02rem; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s; white-space: nowrap; line-height: 1.1; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--stick); }
.btn:active { transform: none; box-shadow: none; }
.btn-yellow { --bg: var(--yellow); --fg: var(--ink); }
.btn-white { --bg: #fff; --fg: var(--ink); }
.btn-ghost { --bg: transparent; --fg: var(--ink); }
.btn-lg { padding: 19px 34px; font-size: 1.12rem; }
.btn-sm { padding: 9px 16px; font-size: .9rem; border-width: 2px; }
.btn-block { width: 100%; white-space: normal; text-align: center; }
.co-grid > *, .builder-grid > *, .split > *, .hero-grid > * { min-width: 0; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }
.link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--ink); border: 2px solid var(--ink); font-weight: 800; font-size: .82rem; letter-spacing: .02em; }
.pill-y { background: var(--yellow); }
.kicker { font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--muted); margin-bottom: 12px; display: block; }

/* ---------- announcement bar ---------- */
.announce { background: var(--ink); color: #fff; font-size: .86rem; font-weight: 600; text-align: center; padding: 9px 12px; position: relative; z-index: 60; }
.announce b { color: var(--yellow); font-variant-numeric: tabular-nums; }
.announce .ann-msg { display: none; }
.announce .ann-msg.on { display: block; animation: annIn .45s ease; }
@keyframes annIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(0,0,0,.35); }
.nav { display: flex; align-items: center; gap: 24px; height: 76px; }
.brand { display: block; flex-shrink: 0; }
.brand img { height: 52px; width: auto; }
.nav-links { display: flex; gap: 6px; margin-left: 12px; }
.nav-links a { text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 999px; font-size: .96rem; }
.nav-links a:hover, .nav-links a[aria-current] { background: var(--yellow-soft); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--ink); cursor: pointer; position: relative; transition: transform .15s, box-shadow .15s; }
.icon-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.cart-count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--yellow); border: 2px solid var(--ink); font-size: .74rem; font-weight: 800; display: grid; place-items: center; }
.cart-count[data-n="0"] { display: none; }
.cart-count.bump { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.4); } }
.menu-btn { display: none; }
.mobile-nav { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); padding: 48px 0 64px; border-bottom: 1px solid var(--line); }
.hero-photo { position: relative; justify-self: center; width: 100%; max-width: min(430px, calc((100vh - 150px) * .8)); }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.45); }
.hero-price { position: absolute; top: 16px; right: 16px; background: var(--yellow); color: var(--ink); font-weight: 800; padding: 7px 14px; border-radius: 999px; font-size: .95rem; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: 40px; align-items: center; }
.hero h1 { margin: 16px 0 18px; }
.hero h1 .hl { position: relative; white-space: nowrap; z-index: 0; }
.hero h1 .hl::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: .06em; height: .36em; background: var(--yellow); z-index: -1; border-radius: 6px; transform: rotate(-1deg); }
.hero .lead { font-size: 1.18rem; color: var(--ink-2); max-width: 520px; }
.hero-form { display: flex; gap: 10px; margin: 26px 0 16px; max-width: 540px; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 7px; box-shadow: var(--stick); }
.hero-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 16px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.6rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-form input::placeholder { color: #b9b4a0; }
.hero-form .btn { padding: 14px 22px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.tick { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--yellow); display: inline-grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.hero-stage { position: relative; min-height: 460px; display: grid; place-items: center; perspective: 1200px; }
.hero-stage .blob { position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a2a2a, var(--ink) 70%); border: 3px solid var(--ink); box-shadow: 12px 12px 0 var(--yellow), 12px 12px 0 2.5px var(--ink); }
.hero-stage .blob::after { content: ''; position: absolute; inset: 18px; border-radius: 50%; border: 2px dashed rgba(254,214,0,.35); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-plate { position: relative; width: 108%; max-width: 640px; transform-style: preserve-3d; animation: float 6s ease-in-out infinite; z-index: 2; }
.hero-plate .tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(-6deg); transition: transform .25s ease-out; }
.hero-mini { position: absolute; width: 46%; z-index: 1; filter: saturate(.95); }
.hero-mini.m1 { left: -6%; bottom: 2%; transform: rotate(10deg); animation: float 7s ease-in-out -2s infinite; }
.hero-mini.m2 { right: -4%; top: 4%; transform: rotate(-14deg); width: 38%; animation: float 8s ease-in-out -4s infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.sticker { position: absolute; z-index: 3; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 9px 15px; font-weight: 800; font-size: .9rem; box-shadow: var(--stick); }
.sticker.s1 { left: 0; top: 10%; transform: rotate(-6deg); }
.sticker.s2 { right: 2%; bottom: 8%; transform: rotate(5deg); background: var(--yellow); font-size: 1.05rem; }

/* ---------- trust strip / marquee ---------- */
.marquee { background: var(--yellow); border-block: 2.5px solid var(--ink); overflow: hidden; padding: 14px 0; }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: marq 32s linear infinite; font-family: var(--head); font-weight: 700; font-size: 1.25rem; white-space: nowrap; }
.marquee-track span::before { content: '●'; margin-right: 48px; font-size: .6em; vertical-align: middle; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section.cream { background: var(--cream); }
.section.dark { background: var(--ink); color: #fff; }
.section.yellow { background: var(--yellow); }
.sec-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.sec-head p { color: var(--muted); font-size: 1.1rem; }
.dark .sec-head p, .dark .muted { color: #bdbdb5; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { background: #fff; border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 26px; box-shadow: var(--stick); }
.card.flat { box-shadow: none; border: 1px solid var(--line); }
.step-num { width: 52px; height: 52px; border-radius: 50%; background: var(--yellow); border: 2.5px solid var(--ink); display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: 1.4rem; margin-bottom: 18px; }
.step-vis { height: 110px; display: grid; place-items: center; margin: 4px 0 16px; }
.muted { color: var(--muted); }

/* styles gallery */
.styles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.style-card { background: #fff; border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 22px 22px 18px; text-decoration: none; display: flex; flex-direction: column; gap: 12px; transition: transform .2s, box-shadow .2s; }
.style-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); }
.style-card .vis { aspect-ratio: 16/8; display: grid; place-items: center; background: linear-gradient(160deg, #fafaf6, #efece0); border-radius: 12px; padding: 12px; }
.style-card .vis svg { width: 100%; }
.style-card .row { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.style-card .row small { font-weight: 600; color: var(--muted); }

/* price ladder */
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rung { position: relative; background: #fff; border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 26px 18px 22px; text-align: center; }
.rung.best { background: var(--yellow); transform: translateY(-10px); box-shadow: var(--stick); }
.rung .tier { font-family: var(--head); font-size: 1.15rem; font-weight: 600; }
.rung .each { font-family: var(--head); font-size: 2.6rem; font-weight: 700; line-height: 1; margin: 8px 0 4px; }
.rung .each small { font-size: .9rem; font-weight: 600; }
.rung .save { display: inline-block; margin-top: 8px; font-weight: 800; font-size: .82rem; background: var(--ink); color: var(--yellow); border-radius: 999px; padding: 4px 10px; }
.rung .flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-weight: 800; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }

/* split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.feature-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.feature-list li .tick { margin-top: 2px; }
.photo { position: relative; border-radius: 26px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); background: var(--yellow-soft); aspect-ratio: 4/5; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 30% 20%, #fff 0, var(--yellow-soft) 45%, var(--yellow) 100%); }
.photo .fallback .stack { width: 100%; display: grid; gap: 18px; transform: rotate(-8deg); }

/* use cases */
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.use { border-radius: var(--radius); padding: 22px; background: #fff; border: 2px solid var(--ink); }
.use .emoji { font-size: 2rem; }
.use h3 { margin: 10px 0 6px; font-size: 1.2rem; }
.use p { color: var(--muted); font-size: .95rem; margin: 0; }
.dark .use { background: #161616; border-color: #333; color: #fff; }
.dark .use p { color: #aaa; }

/* compare table */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 2.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.compare tr:last-child td { border-bottom: 0; }
.compare th { background: var(--ink); color: #fff; font-family: var(--head); font-size: 1.1rem; }
.compare th.us { background: var(--yellow); color: var(--ink); }
.compare td.us { background: #fffbe0; font-weight: 700; }
.yes { color: var(--green); font-weight: 800; }
.no { color: #a8a8a0; font-weight: 700; }

/* gift banner */
.gift-band { position: relative; overflow: hidden; border-radius: 30px; border: 3px solid var(--ink); background: var(--ink); color: #fff; padding: 56px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; box-shadow: 10px 10px 0 var(--yellow); }
.gift-band h2 { color: #fff; }
.gift-band h2 em { font-style: normal; color: var(--yellow); }
.gift-card-mock { background: #fff; color: var(--ink); border-radius: 16px; padding: 26px; transform: rotate(3deg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); font-family: var(--head); position: relative; }
.gift-card-mock .msg { font-size: 1.35rem; line-height: 1.3; font-weight: 500; margin: 16px 0; }
.gift-card-mock img { height: 34px; width: auto; }
.snow { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(#fff 1.4px, transparent 1.6px), radial-gradient(#fff 1px, transparent 1.2px); background-size: 60px 60px, 34px 34px; background-position: 0 0, 17px 23px; opacity: .14; animation: snow 18s linear infinite; }
@keyframes snow { to { background-position: 0 600px, 17px 623px; } }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 0 22px; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--stick); }
.faq summary { list-style: none; cursor: pointer; padding: 19px 0; font-weight: 800; font-size: 1.06rem; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--head); font-size: 1.6rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 20px; color: var(--ink-2); }

/* CTA */
.cta-final { text-align: center; }
.cta-final .plate-row { display: flex; justify-content: center; gap: 18px; margin: 34px auto; max-width: 900px; }
.cta-final .plate-row > div { flex: 1; }

/* reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review { background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 22px; }
.stars { color: #f5a700; letter-spacing: 2px; font-size: 1.1rem; }

/* social */
.social-row { display: flex; gap: 10px; }
.social-row a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); border: 2px solid var(--ink); transition: transform .15s, background .15s; }
.social-row a:hover { background: var(--yellow); transform: translateY(-2px); }
.social-row svg { width: 20px; height: 20px; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #d8d8d0; padding: 72px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot-logo { display: inline-block; margin-bottom: 16px; }
.foot-logo img { height: 84px; width: auto; }
.site-footer h4 { color: #fff; font-family: var(--head); font-size: 1.1rem; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { text-decoration: none; color: #d8d8d0; }
.site-footer a:hover { color: var(--yellow); }
.site-footer .social-row a { color: var(--ink); background: #fff; border-color: #fff; }
.site-footer .social-row a:hover { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.newsletter { display: flex; gap: 8px; margin-top: 14px; }
.newsletter input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 999px; border: 2px solid #333; background: #161616; color: #fff; }
.foot-bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid #262626; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: .86rem; color: #9a9a92; }
.pay-icons { display: flex; gap: 6px; flex-wrap: wrap; }
.pay-icons span { background: #fff; color: var(--ink); border-radius: 6px; padding: 3px 8px; font-size: .74rem; font-weight: 800; }

/* ---------- cart drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: #fff; z-index: 91; transform: translateX(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; border-left: 3px solid var(--ink); }
body.cart-open .drawer { transform: none; }
body.cart-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { margin: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.drawer-foot { border-top: 1px solid var(--line); padding: 18px 22px 22px; background: var(--cream); }
.drawer-foot:empty { display: none; }
.pop-plate { width: 100%; transform: rotate(-8deg); }
.ship-progress { background: var(--yellow-soft); border: 1.5px solid var(--ink); border-radius: 12px; padding: 10px 14px; font-size: .9rem; font-weight: 600; margin: 12px 0; }
.ship-progress .bar { height: 8px; border-radius: 99px; background: #fff; border: 1.5px solid var(--ink); margin-top: 8px; overflow: hidden; }
.ship-progress .bar i { display: block; height: 100%; background: var(--ink); transition: width .4s; }
.line-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.line-item .thumb { background: #f6f4ec; border-radius: 12px; padding: 8px; }
.line-item h4 { font-family: var(--body); font-size: .98rem; margin: 0 0 2px; }
.line-item .meta { font-size: .82rem; color: var(--muted); }
.line-item .price { font-weight: 800; text-align: right; }
.qty { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 999px; margin-top: 8px; }
.qty button { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-weight: 800; font-size: 1.05rem; }
.qty span { min-width: 22px; text-align: center; font-weight: 800; font-size: .92rem; }
.remove { background: none; border: 0; color: var(--muted); font-size: .8rem; text-decoration: underline; cursor: pointer; margin-left: 10px; }
.totals { display: grid; gap: 6px; font-size: .95rem; }
.totals .row { display: flex; justify-content: space-between; }
.totals .row.big { font-size: 1.2rem; font-weight: 800; padding-top: 8px; border-top: 1px dashed #c9c3ad; margin-top: 4px; }
.totals .save { color: var(--green); font-weight: 700; }
.empty { text-align: center; padding: 48px 10px; }
.upsell { display: flex; gap: 12px; align-items: center; background: #fff; border: 2px dashed var(--ink); border-radius: 14px; padding: 12px; margin: 14px 0; }
.upsell .thumb { width: 90px; flex-shrink: 0; }
.upsell p { margin: 0; font-size: .88rem; }
.pay-row { display: flex; justify-content: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.pay-row span { border: 1px solid #d8d3c0; border-radius: 6px; padding: 3px 8px; font-size: .74rem; font-weight: 800; background: #fff; }

/* ---------- popup ---------- */
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(10,10,10,.55); z-index: 120; opacity: 0; pointer-events: none; transition: opacity .25s; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-card { position: relative; width: min(820px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 10px 10px 0 var(--yellow); display: grid; grid-template-columns: 1fr 1fr; transform: translateY(16px) scale(.98); transition: transform .3s; }
.modal.open .modal-card { transform: none; }
.modal-x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; cursor: pointer; font-size: 1.2rem; z-index: 2; }
.modal-side { background: radial-gradient(circle at 40% 30%, #2b2b2b, var(--ink) 75%); padding: 36px 28px; display: grid; place-items: center; border-right: 3px solid var(--ink); position: relative; overflow: hidden; }
.modal-main { padding: 40px 34px 30px; }
.modal-main h2 { font-size: 2.3rem; margin-bottom: 10px; }
.code-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 2.5px dashed var(--ink); border-radius: 14px; padding: 10px 10px 10px 18px; margin: 18px 0 12px; background: var(--yellow-soft); }
.code-box strong { font-family: 'Barlow Condensed', sans-serif; font-size: 1.9rem; letter-spacing: .12em; }
.mini-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 16px 0; }
.mini-ladder div { border: 2px solid var(--ink); border-radius: 10px; text-align: center; padding: 8px 4px; font-size: .78rem; font-weight: 700; }
.mini-ladder div b { display: block; font-family: var(--head); font-size: 1.2rem; }
.mini-ladder div.hot { background: var(--yellow); }
.modal-form { display: flex; gap: 8px; margin-top: 10px; }
.input { width: 100%; padding: 13px 16px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; outline: none; }
.input:focus { box-shadow: 0 0 0 4px var(--yellow-2); }
.tiny { font-size: .78rem; color: var(--muted); }

/* consent */
.consent { position: fixed; left: 16px; bottom: 16px; max-width: 420px; background: #fff; border: 2.5px solid var(--ink); border-radius: 18px; padding: 18px; box-shadow: var(--stick); z-index: 110; font-size: .9rem; display: none; }
.consent.show { display: block; }
.consent .acts { display: flex; gap: 8px; margin-top: 12px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 999px; font-weight: 700; z-index: 130; transition: transform .3s; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); max-width: calc(100vw - 32px); }
.toast.show { transform: translate(-50%, 0); }

/* ---------- builder ---------- */
.builder { padding: 30px 0 80px; background: linear-gradient(180deg, var(--cream), #fff 380px); }
.crumbs { font-size: .86rem; color: var(--muted); margin-bottom: 16px; }
.crumbs a { text-decoration: none; }
.builder-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
.stage-wrap { position: sticky; top: 96px; }
.stage { position: relative; aspect-ratio: 1.18; border-radius: 28px; border: 3px solid var(--ink); background: radial-gradient(circle at 50% 38%, #fff 0, #f6f2e2 55%, #ebe4c8 100%); overflow: hidden; display: grid; place-items: center; perspective: 1400px; box-shadow: 10px 10px 0 var(--ink); touch-action: pan-y; }
.stage.scene-keys { background: radial-gradient(circle at 50% 30%, #3b3b3b, #121212 70%); }
.stage.scene-desk { background: linear-gradient(160deg, #d9b98a, #b08654); }
.stage .floor { position: absolute; left: 10%; right: 10%; bottom: 13%; height: 22px; background: radial-gradient(closest-side, rgba(0,0,0,.18), transparent); filter: blur(4px); }
.stage-inner { width: 86%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.stage-inner.square { width: 80%; }
.stage-tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out; transform-style: preserve-3d; }
.flip { position: relative; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.flip.back { transform: rotateY(180deg); }
.flip > div { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .face-back { position: absolute; inset: 0; transform: rotateY(180deg); }
.stage-tools { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 7px 13px; border-radius: 999px; font-weight: 700; font-size: .84rem; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.stage-badge { position: absolute; top: 16px; left: 16px; }
.stage-hint { position: absolute; top: 18px; right: 18px; font-size: .78rem; font-weight: 700; color: rgba(0,0,0,.45); }
.scene-keys .stage-hint { color: rgba(255,255,255,.5); }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
.thumbs .t { border: 2px solid var(--line); border-radius: 14px; background: #fff; padding: 8px; aspect-ratio: 1.4; display: grid; place-items: center; overflow: hidden; }
.thumbs .t img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.specs div { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; text-align: center; font-size: .8rem; color: var(--muted); }
.specs b { display: block; color: var(--ink); font-size: .95rem; }

.panel h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 6px 0 10px; }
.rating-line { display: flex; gap: 10px; align-items: center; font-size: .9rem; font-weight: 600; color: var(--muted); }
.price-line { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 4px; flex-wrap: wrap; }
.price-line .now { font-family: var(--head); font-size: 2.6rem; font-weight: 700; line-height: 1; }
.price-line .was { text-decoration: line-through; color: var(--muted); font-weight: 600; }
.price-line .save-tag { background: var(--ink); color: var(--yellow); font-weight: 800; border-radius: 999px; padding: 4px 10px; font-size: .8rem; }
.opt { margin-top: 22px; }
.opt-label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; margin-bottom: 10px; }
.opt-label small { font-weight: 600; color: var(--muted); }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choices.two { grid-template-columns: repeat(2, 1fr); }
.choice { position: relative; border: 2px solid #d9d4c2; background: #fff; border-radius: 14px; padding: 10px; cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; display: flex; flex-direction: column; gap: 6px; }
.choice:hover { border-color: var(--ink); }
.choice[aria-pressed="true"] { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); background: #fffdf2; }
.choice[aria-pressed="true"]::after { content: '✓'; position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-size: .75rem; display: grid; place-items: center; font-weight: 800; }
.choice b { font-size: .92rem; }
.choice small { color: var(--muted); font-size: .76rem; }
.choice .sw { height: 30px; border-radius: 8px; border: 2px solid var(--ink); }
.choice .shape-ico { height: 30px; width: 100%; overflow: visible; }
.shape-ico path { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; transition: fill .2s; }
.reg-help { font-size: .84rem; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }
.reg-input { width: 100%; border: 3px solid var(--ink); border-radius: 14px; padding: 12px 16px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 2rem; letter-spacing: .14em; text-transform: uppercase; text-align: center; background: var(--yellow); outline: none; }
.reg-input.white { background: #f7f7f4; }
.reg-input.black { background: #141414; color: #eee; }
.reg-input:focus { box-shadow: 0 0 0 5px rgba(254,214,0,.5); }
.reg-row { display: grid; gap: 10px; }
.counter { font-size: .8rem; color: var(--muted); text-align: right; margin-top: 4px; }
.idea-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.idea-chips button { border: 1.5px solid #d6d0bb; background: #fff; border-radius: 999px; padding: 5px 11px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.idea-chips button:hover { border-color: var(--ink); background: var(--yellow-soft); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 2px solid #d9d4c2; border-radius: 14px; padding: 12px 14px; background: #fff; cursor: pointer; }
.toggle-row:hover { border-color: var(--ink); }
.toggle-row .txt b { display: block; font-size: .95rem; }
.toggle-row .txt small { color: var(--muted); }
.switch { position: relative; width: 50px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: #d9d4c2; border-radius: 99px; transition: background .2s; border: 2px solid var(--ink); }
.switch span::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; border: 2px solid var(--ink); transition: transform .2s; }
.switch input:checked + span { background: var(--yellow); }
.switch input:checked + span::before { transform: translateX(22px); }
.reveal { display: none; margin-top: 10px; }
.reveal.on { display: block; animation: annIn .3s ease; }
.textarea { min-height: 92px; resize: vertical; }
.buy-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 24px; }
.buy-row .btn { min-width: 0; padding-inline: 16px; }
.buy-row .qty { margin: 0; height: 100%; }
.buy-row .qty button { width: 40px; height: 54px; }
.delivery-box { margin-top: 16px; border: 2px solid var(--ink); border-radius: 16px; padding: 14px 16px; background: #fff; display: grid; gap: 8px; font-size: .92rem; }
.delivery-box .r { display: flex; gap: 10px; align-items: flex-start; }
.delivery-box .ico { width: 26px; text-align: center; flex-shrink: 0; }
.delivery-box b { font-weight: 800; }
.multi-hint { margin-top: 12px; background: var(--yellow-soft); border: 2px dashed var(--ink); border-radius: 14px; padding: 12px 14px; font-size: .9rem; font-weight: 600; }
.acc { margin-top: 22px; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 800; display: flex; justify-content: space-between; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 1.3rem; line-height: 1; }
.acc details[open] summary::after { content: '–'; }
.acc details > div { padding-bottom: 16px; color: var(--ink-2); font-size: .95rem; }
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 2.5px solid var(--ink); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .3s; }
.sticky-buy.show { transform: none; }
.sticky-buy .mini { width: 92px; }
.sticky-buy .p { font-weight: 800; line-height: 1.1; }
.sticky-buy .p small { display: block; font-weight: 600; color: var(--muted); font-size: .75rem; }
.sticky-buy .btn { margin-left: auto; padding: 13px 20px; }

/* ---------- checkout ---------- */
.checkout { background: var(--cream); min-height: 70vh; padding: 36px 0 80px; }
.co-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: start; }
.co-steps { display: flex; gap: 8px; align-items: center; margin-bottom: 22px; font-weight: 700; font-size: .9rem; flex-wrap: wrap; }
.co-steps span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.co-steps span i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; font-style: normal; font-size: .8rem; }
.co-steps span.on { color: var(--ink); }
.co-steps span.on i { background: var(--yellow); border-color: var(--ink); }
.co-steps .sep { width: 28px; height: 2px; background: #d6d0bb; }
.box { background: #fff; border: 2.5px solid var(--ink); border-radius: 20px; padding: 24px; margin-bottom: 18px; }
.box h2 { font-size: 1.5rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.box h2 .n { width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); display: grid; place-items: center; font-size: 1rem; }
.radio-card { display: flex; gap: 14px; align-items: center; border: 2px solid #d9d4c2; border-radius: 14px; padding: 14px 16px; cursor: pointer; margin-bottom: 10px; transition: border-color .15s, background .15s; }
.radio-card:hover { border-color: var(--ink); }
.radio-card input { accent-color: var(--ink); width: 20px; height: 20px; }
.radio-card.on { border-color: var(--ink); background: #fffdf0; box-shadow: 3px 3px 0 var(--ink); }
.radio-card .grow { flex: 1; }
.radio-card .grow b { display: block; }
.radio-card .grow small { color: var(--muted); }
.radio-card .amt { font-weight: 800; }
.radio-card .amt.free { color: var(--green); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field label { font-weight: 700; font-size: .88rem; }
.summary { position: sticky; top: 96px; }
.code-row { display: flex; gap: 8px; margin: 14px 0; }
.code-row .input { text-transform: uppercase; }
.secure-note { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: .82rem; color: var(--muted); margin-top: 12px; font-weight: 600; }
#embedded-checkout:not(:empty) { min-height: 200px; }
.demo-note { background: #fff6d6; border: 2px dashed #c9a700; border-radius: 14px; padding: 14px 16px; font-size: .9rem; margin-bottom: 14px; }
.wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.wallet { height: 50px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; border: 0; cursor: pointer; }
.wallet.apple { background: #000; color: #fff; }
.wallet.google { background: #fff; color: #000; border: 1.5px solid #bbb; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; font-weight: 700; margin: 6px 0 14px; }
.or::before, .or::after { content: ''; height: 1px; flex: 1; background: var(--line); }

/* ---------- prose pages ---------- */
.page-hero { background: var(--cream); padding: 64px 0 48px; border-bottom: 2.5px solid var(--ink); }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.page-hero p { font-size: 1.1rem; color: var(--ink-2); max-width: 680px; }
@media (max-width: 720px) { .page-hero { padding: 44px 0 34px; text-align: center; } .page-hero p { margin-inline: auto; } }
.prose { max-width: 780px; margin: 0 auto; padding: 56px 20px 80px; }
.prose h2 { font-size: 1.7rem; margin: 2em 0 .6em; }
.prose h3 { margin: 1.6em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0 1.6em; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose th { background: var(--cream); }
.notice { background: var(--yellow-soft); border: 2px solid var(--ink); border-radius: 14px; padding: 16px 18px; margin: 1.2em 0; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding-block: 56px 80px; }
.contact-grid > * { min-width: 0; }

/* success */
.success-wrap { text-align: center; max-width: 720px; margin: 0 auto; padding: 64px 20px 90px; }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 140; }

/* reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

.photo img { position: absolute; inset: 0; z-index: 1; }
.photo .cap { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: rgba(10,10,10,.82); color: #fff; font-weight: 700; font-size: .82rem; padding: 7px 12px; border-radius: 999px; backdrop-filter: blur(6px); }
.photo .fallback.night { background: radial-gradient(circle at 50% 30%, #3a3a3a, #0d0d0d 75%); }
.photo .fallback.night::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(transparent, rgba(254,214,0,.10)); }

/* seasonal content: html[data-season] is set in <head> from config SEASON */
html:not([data-season="xmas"]) [data-xmas], html:not([data-season="xmas"]) .snow { display: none !important; }
html[data-season="xmas"] [data-normal] { display: none !important; }

/* reg photo strip */
.reg-strip { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; }
.reg-strip .photo { aspect-ratio: 4/5; }
.reg-strip .photo:first-child { aspect-ratio: auto; grid-row: span 1; }
.thumbs .t.no-photo { display: none; }
.thumbs:not(:has(.t:not(.no-photo))) { display: none; }
.bp-svg { overflow: visible; width: 100%; height: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .menu-btn { display: grid; }
  .mobile-nav { position: fixed; inset: 0; background: #fff; z-index: 95; display: flex; flex-direction: column; padding: 90px 28px 28px; gap: 6px; transform: translateY(-100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  body.menu-open .mobile-nav { transform: none; }
  .mobile-nav a { font-family: var(--head); font-size: 2rem; font-weight: 700; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .mobile-nav .btn { margin-top: 18px; font-family: var(--body); font-size: 1.1rem; border-bottom: 2.5px solid var(--ink); }
  .hero-grid, .split, .builder-grid, .co-grid, .gift-band, .contact-grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; max-width: 560px; }
  .hero-photo img { aspect-ratio: 4/3; object-position: 50% 47%; }
  .stage-wrap, .summary { position: static; }
  .grid-4, .uses, .ladder { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .gift-band { padding: 36px 26px; }
  .rung.best { transform: none; }
}
@media (max-width: 720px) {
  .section { padding: 68px 0; }
  .hide-sm { display: none !important; }
  .nav { height: 66px; gap: 10px; }
  .brand img { height: 42px; }
  .icon-btn { width: 42px; height: 42px; }
  .grid-3, .styles-grid, .reviews { grid-template-columns: 1fr; }
  .styles-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .style-card { padding: 12px; }
  .style-card .row { flex-direction: column; align-items: center; text-align: center; font-size: .9rem; gap: 2px; }
  .sec-head, .sec-head p { text-align: center; }
  .reg-strip { grid-template-columns: 1fr 1fr; gap: 12px; }
  .reg-strip .photo:first-child { grid-column: 1 / -1; aspect-ratio: 4/3; }
  .photo { box-shadow: 6px 6px 0 var(--ink); border-radius: 20px; }
  .gift-band { padding: 30px 20px 26px; gap: 26px; border-radius: 24px; box-shadow: 6px 6px 0 var(--yellow); text-align: center; }
  .gift-band .feature-list { text-align: left; display: inline-grid; }
  .gift-band .btn { width: 100%; justify-content: center; }
  .gift-card-mock { padding: 20px; text-align: left; }
  .gift-card-mock .msg { font-size: 1.15rem; }
  .split > div:not(.photo) { text-align: center; }
  .split .feature-list { text-align: left; }
  .ladder { gap: 24px 12px; }
  .rung { padding: 22px 10px 18px; }
  .rung .each { font-size: 2.1rem; }
  .use { text-align: center; }
  .hero { padding: 10px 0 48px; }
  .hero-grid { gap: 18px; }
  .hero-photo img { border-radius: 18px; }
  .hero-price { top: 10px; right: auto; left: 10px; font-size: .85rem; }
  .hero h1 { margin: 10px 0 12px; text-align: center; }
  .hero .lead { text-align: center; }
  .hero-meta { justify-content: center; }
  .hero .lead { font-size: 1.05rem; }
  .hero .pill { display: flex; align-items: center; gap: 6px; width: fit-content; margin: 4px auto 0; font-size: .8rem; }
  .sticker.s1 { top: 4%; }
  .announce { font-size: .78rem; padding: 8px 10px; }
  .hero-form { flex-direction: column; border-radius: 22px; }
  .hero-form input { padding: 10px 12px; text-align: center; }
  .hero-form .btn { width: 100%; }
  .buy-row .btn { font-size: .95rem; }
  .buy-row .qty button { width: 34px; }
  .sticker { font-size: .78rem; padding: 7px 11px; }
  .modal-card { grid-template-columns: 1fr; }
  .modal-side { border-right: 0; border-bottom: 3px solid var(--ink); padding: 30px 40px 26px 22px; }
  .pop-plate { width: 92%; transform: rotate(-5deg); }
  .modal-main { padding: 26px 22px 22px; }
  .modal-main h2 { font-size: 1.8rem; }
  .compare th, .compare td { padding: 12px 10px; font-size: .88rem; }
  .foot-grid { grid-template-columns: 1fr; text-align: center; }
  .foot-grid p { margin-inline: auto; }
  .site-footer .social-row { justify-content: center; }
  .foot-bottom { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .pay-icons { justify-content: center; flex-wrap: wrap; }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .sticky-buy { display: flex; }
  .field-row { grid-template-columns: 1fr; }
  .choices { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .choice { padding: 8px; text-align: center; align-items: center; }
  .idea-chips { justify-content: center; }
  .reg-help { text-align: center; }
  .cta-final .plate-row { flex-direction: column; max-width: 360px; }
  .stage { box-shadow: 6px 6px 0 var(--ink); }
  .builder { padding: 12px 0 110px; }
  .builder .crumbs { display: none; }
  .builder-grid > * { min-width: 0; }
  .stage-wrap { position: sticky; top: 66px; z-index: 30; margin: 0 -20px; padding: 8px 12px 10px; background: linear-gradient(var(--cream) 85%, rgba(255,251,235,0)); }
  .stage { aspect-ratio: 1.75; border-radius: 20px; box-shadow: 5px 5px 0 var(--ink); }
  .stage-inner { width: 92%; margin-top: -18px; }
  .stage-inner.square { width: 50%; margin-top: -26px; }
  .stage-tools { left: 8px; right: 8px; bottom: 8px; }
  .seg button { padding: 5px 9px; font-size: .74rem; }
  .stage-badge { top: 8px; left: 8px; font-size: .7rem; padding: 4px 9px; }
  .stage-hint { display: none; }
  .specs, .thumbs { display: none; }
  .panel h1 { font-size: 1.9rem; }
}

/* seasonal gift photo behind the gift card (hidden until the photo exists) */
.gift-photo { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; margin: 0 0 -70px; border: 3px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); }
.gift-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gift-photo.no-photo { display: none; }
.gift-photo:not(.no-photo) ~ .gift-card-mock { width: 86%; margin-left: auto; }

/* builder: the plates already in this order (tap to edit) */
.order-tray { background: #fffbe6; border: 2px solid var(--ink); border-radius: 18px; padding: 12px 12px 10px; margin: 6px 0 18px; }
.tray-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: .9rem; margin-bottom: 10px; }
.tray-head span { color: var(--muted); font-size: .8rem; }
.tray-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.tray-card { position: relative; flex: 0 0 auto; min-width: 130px; height: 70px; border: 2px solid var(--line); border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 .82rem var(--body); color: var(--ink); cursor: pointer; transition: border-color .15s, transform .15s; }
.tray-card.on { border-color: var(--ink); box-shadow: 3px 3px 0 var(--yellow); }
.tray-card:hover { transform: translateY(-2px); }
.tray-pick { all: unset; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; cursor: pointer; }
.tray-thumb { display: block; width: 112px; }
.tray-thumb svg { width: 100%; height: auto; display: block; }
.tray-qty { font-size: .75rem; color: var(--muted); }
.tray-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; font-size: 11px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.tray-x:hover { background: #e5484d; color: #fff; }
.tray-new { border-style: dashed; padding: 0 14px; }
.tray-new.on { border-style: solid; background: var(--yellow); }
.plate-no { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 99px; background: var(--ink); color: var(--yellow); font: 800 .72rem var(--body); margin-right: 6px; flex: 0 0 auto; }
.tray-new .plate-no { background: var(--ink); }
/* the seasonal photo already has its own handwritten card, so show just our plate on top of it */
html[data-season="xmas"] .gift-photo[data-xmas]:not(.no-photo) ~ .gift-card-mock,
html[data-season="normal"] .gift-photo[data-normal]:not(.no-photo) ~ .gift-card-mock { display: none; }
.gift-photo:not(.no-photo) { margin-bottom: -48px; }
/* pop-up: seasonal photo fills the left side, our plate sits on top of it */
.pop-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modal-side:has(.pop-photo) { align-items: end; min-height: 260px; }
.modal-side:has(.pop-photo)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,0) 35%, rgba(11,11,11,.55) 100%); }
.modal-side .pop-plate { position: relative; z-index: 2; }
@media (max-width: 760px) { .modal-side:has(.pop-photo) { min-height: 190px; padding-bottom: 18px; } }
/* each plate in the strip has its own -/+ so extra copies can be added without opening the basket */
.tray-card:not(.tray-new) { flex-direction: column; height: auto; padding: 4px 0 6px; gap: 2px; }
.tray-q { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; }
.tray-q button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; font-weight: 800; line-height: 1; cursor: pointer; padding: 0; }
.tray-q button:hover:not(:disabled) { background: var(--yellow); }
.tray-q button:disabled { opacity: .3; cursor: default; }
.tray-new { align-self: stretch; height: auto; min-height: 70px; }
.modal-side.photo-has-plate .pop-plate, .modal-side.photo-has-plate .snow { display: none; }
.modal-side.photo-has-plate::after { background: none; }
/* plates already in the order sit under the buy buttons, out of the way of the options */
.panel .order-tray { margin: 14px 0 0; padding: 10px; }
.panel .tray-head { margin-bottom: 6px; }
.tray-new.on { flex-direction: column; height: auto; padding: 4px 0 6px; gap: 2px; background: var(--yellow); }
.tray-now { font-size: .72rem; font-weight: 800; }
.tray-new b { font-size: .85rem; }
@media (max-width: 760px) {
  .panel .order-tray { padding: 8px; border-radius: 14px; }
  .tray-thumb { width: 84px; }
  .tray-card { min-width: 104px; }
}
/* tablets (single column): keep the preview short so the plate tabs and options are on screen */
@media (max-width: 1020px) and (min-width: 721px) {
  .stage-wrap { position: sticky; top: 76px; z-index: 30; background: var(--cream); padding-bottom: 8px; }
  .stage { aspect-ratio: 2.2; }
  .stage-wrap .specs { display: none; }
}
@media (max-width: 720px) { .tray-thumb { width: 72px; } .tray-card { min-width: 92px; } }

/* the XMAS 10 photo: keep the keyring in frame when the side panel crops it */
.modal-side.photo-has-plate .pop-photo { object-position: 58% 80%; }

/* room above the plate tabs so the remove buttons aren't clipped */
.tray-row { padding-top: 12px; padding-right: 10px; }

/* checkout on phones/tablets: total + code come before "Pay securely", tighter boxes */
@media (max-width: 1020px) {
  #co-main > div:first-child { display: contents; }
  #co-main .summary { display: contents; }
  #co-main .summary > .box:first-child { order: 1; }
  #pay-box { order: 2; }
  #co-main .summary > .box:last-child { order: 3; }
  .co-grid { gap: 0; }
}
@media (max-width: 720px) {
  .checkout { padding: 16px 0 60px; }
  .checkout .box { padding: 16px; border-radius: 16px; margin-bottom: 14px; }
  .checkout .box h2 { font-size: 1.25rem; margin-bottom: 10px; }
  .co-steps { font-size: .78rem; gap: 6px; flex-wrap: nowrap; margin-bottom: 14px; }
  .co-steps .sep { width: 12px; flex-shrink: 0; }
  .co-steps span i { width: 22px; height: 22px; }
  .line-item { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; }
  .line-item .remove { margin-left: 8px; }
  .upsell { padding: 12px; margin: 12px 0 0; }
  .upsell .step-num { display: none; }
  .radio-card { padding: 12px; gap: 10px; }
}

/* phones: short preview that stays on screen, slim one-line option buttons, less reading */
@media (max-width: 720px) {
  .builder-grid { gap: 8px; }
  .stage-wrap { padding: 6px 12px 8px; }
  .stage { aspect-ratio: 2.5; }
  .stage-inner { width: 84%; margin-top: 0; }
  .stage-inner.square { width: 34%; margin-top: 0; }
  .stage .floor { bottom: 8%; }
  .stage-badge { font-size: .64rem; padding: 3px 8px; }
  .panel > .pill { display: flex; width: fit-content; margin: 4px auto 0; font-size: .74rem; padding: 4px 10px; }
  .panel h1 { font-size: 1.7rem; margin: 4px 0 6px; text-align: center; }
  .price-line { justify-content: center; margin-top: 6px; }
  .price-line .now { font-size: 2.1rem; }
  .rating-line { justify-content: center; font-size: .76rem; white-space: nowrap; }
  .opt { margin-top: 18px; }
  .choice { flex-direction: row; justify-content: center; gap: 8px; padding: 11px 6px; }
  .choice small { display: none; }
  .choice .sw { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; }
  .choice .shape-ico { width: 30px; height: 12px; flex: 0 0 30px; }
  .choice b { font-size: .86rem; }
  .choices { gap: 6px; }
  .choice { gap: 6px; padding: 11px 4px; }
  .choice .shape-ico { width: 22px; flex-basis: 22px; }
  .reg-input { font-size: 1.7rem; padding: 10px 12px; }
  .reg-help { font-size: .8rem; margin-top: 8px; }

  /* design page: the preview sits at the top of the page and scrolls away like normal content */
  .stage-wrap { position: static; margin: 0; padding: 4px 0 8px; background: none; }
  /* fewer things to read: one price, one buy button, delivery in one line */
  .rating-line, .price-line .muted, .price-line .was, .buy-row .qty,
  .delivery-box .r:nth-child(n+2), .toggle-row .txt small, #multi-hint:empty { display: none; }
  .reg-help { margin-top: 6px; }
  .buy-row { grid-template-columns: 1fr; margin-top: 18px; }
  .toggle-row { padding: 10px 14px; }
  .opt-label { margin-bottom: 8px; }
  .delivery-box { border-width: 0; background: none; padding: 4px 0 0; text-align: center; font-size: .86rem; }
  .delivery-box .r { display: block; }
  .delivery-box .ico { display: inline; }
  .multi-hint { font-size: .82rem; padding: 10px 12px; }
}

/* ---------- phone fixes (3 Nov) ---------- */
/* never let anything make the page wider than the screen (that's what let iPhones zoom out) */
html, body { overflow-x: clip; }
.bp-svg { display: block; max-width: 100%; }
.styles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.style-card, .style-card .vis { min-width: 0; }
/* Safari sized the plate drawings from nothing inside a centred grid: give them a real width */
.style-card .vis { display: flex; align-items: center; justify-content: center; }
.style-card .vis > svg { flex: 1 1 0; min-width: 0; width: 100%; }
.grid-3 > *, .grid-4 > *, .reg-strip > *, .uses > *, .ladder > *, .hero-grid > *, .split > * { min-width: 0; }

/* menu on phones: logo + close button along the top */
.mobile-nav-top { display: none; }
@media (max-width: 1020px) {
  .mobile-nav { padding: 0 24px 28px; overflow-y: auto; visibility: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s; }
  body.menu-open .mobile-nav { visibility: visible; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  body.menu-open { overflow: hidden; }
  .mobile-nav-top { display: flex; align-items: center; justify-content: space-between; height: 76px; flex: 0 0 auto; margin-bottom: 8px; }
  .mobile-nav-top .brand { border: 0; padding: 0; }
  .mobile-nav-top .brand img { height: 52px; width: auto; }
}
@media (max-width: 720px) {
  .styles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-nav-top { height: 66px; }
  .mobile-nav-top .brand img { height: 42px; }
  .mobile-nav a { font-size: 1.6rem; }

  /* pop-up on phones: small card, no photo panel, just the offer */
  .modal { padding: 20px; }
  .modal-card { width: min(360px, 100%); border-radius: 20px; box-shadow: 6px 6px 0 var(--yellow); }
  .modal-side { display: none; }
  .modal-x { top: 8px; right: 8px; width: 34px; height: 34px; font-size: 1rem; }
  .modal-main { padding: 22px 18px 16px; text-align: center; }
  .modal-main h2 { font-size: 1.45rem; margin: 10px 0 6px !important; }
  .modal-main .muted { font-size: .9rem; }
  .modal-main .pill { font-size: .74rem; padding: 4px 10px; }
  .code-box { margin: 12px 0 8px; padding: 6px 6px 6px 14px; }
  .code-box strong { font-size: 1.45rem; }
  .mini-ladder { display: none; }
  .modal-form { margin-top: 8px; }
  .modal-form .input { padding: 10px 12px; }
  .modal-main .tiny { margin: 6px 0 0 !important; }
}
/* the round social buttons in the phone menu were picking up the menu-link underline and padding */
.mobile-nav .social-row a { padding: 0; border: 2px solid var(--ink); font-size: 1rem; }
/* small phones: big buttons never poke past the edge */
.btn { max-width: 100%; }
@media (max-width: 720px) { .btn-lg { padding-inline: 20px; white-space: normal; text-align: center; } }
.style-card .vis > svg { max-height: 100%; }
.style-card .vis { min-height: 0; }
.style-card .vis[data-style*="square"] > svg { flex: 0 0 auto; width: 44%; }

/* ---------- phone tidy-up (3 Nov, second pass): shorter page, less scrolling ---------- */
/* menu links like /#styles and /#gifts land below the sticky header, not under it */
section[id] { scroll-margin-top: 84px; }
@media (max-width: 720px) {
  .section { padding: 56px 0; }
  .sec-head { margin-bottom: 30px; }
  /* how it works: three short cards instead of three tall ones */
  #how .grid-3 { gap: 12px; }
  #how .card { display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px 16px; text-align: left; }
  #how .step-num { display: none; }
  #how .step-vis { grid-row: 1 / 3; height: auto; margin: 0; }
  #how .step-vis > div { width: 100% !important; }
  #how .card h3 { margin: 0 0 2px; font-size: 1.05rem; align-self: end; }
  #how .card p { margin: 0; font-size: .86rem; align-self: start; }
  /* "made for": the first four are enough on a phone */
  .uses { gap: 10px; }
  .uses .use:nth-child(n+5) { display: none; }
  .use { padding: 14px 10px; }
  .use h3 { font-size: 1rem; }
  .use p { font-size: .84rem; }
  /* final call to action: smaller plates */
  .cta-final .plate-row { max-width: 250px; gap: 12px; margin: 22px auto 26px; }
  /* footer: shop / help / about side by side instead of one long list */
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 10px; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .foot-grid h4 { font-size: .9rem; }
  .foot-grid li { font-size: .82rem; }
}

/* cookie notice: never wider than the screen, and small on phones so it doesn't hide the buy buttons */
.consent { right: 16px; width: auto; }
@media (min-width: 721px) { .consent { right: auto; } }
@media (max-width: 720px) {
  .consent { left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; font-size: .8rem; border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
  .consent .acts { margin-top: 8px; }
  .consent .acts .btn { flex: 1; padding: 9px 10px; }
}
/* cookie question on phones: one slim line with two small buttons */
@media (max-width: 720px) {
  .consent.show { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; }
  .consent .muted { flex: 1; line-height: 1.3; }
  .consent .acts { margin: 0; flex: 0 0 auto; gap: 6px; }
  .consent .acts .btn { flex: 0 0 auto; padding: 7px 12px; font-size: .8rem; }
}

/* iPhone: Safari's floating address bar sits over the bottom of the screen, so the basket's
   checkout button and the little pop-up messages need room above it */
@media (max-width: 720px) {
  .drawer { height: 100dvh; bottom: auto; }
  .drawer-head { padding: 12px 18px; }
  .drawer-body { padding: 6px 18px; }
  .drawer-foot { padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); }
  .drawer-foot .totals .row { padding: 3px 0; }
  .drawer-foot .btn-lg { padding-block: 13px; }
  .pay-row { margin-top: 8px; gap: 4px; }
  .pay-row span { font-size: .68rem; padding: 2px 6px; }
  .toast { top: calc(12px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -160%); text-align: center; font-size: .9rem; }
  .toast.show { transform: translate(-50%, 0); }
}
/* smallest phones (iPhone SE / mini): footer link columns a touch tighter */
@media (max-width: 360px) { .foot-grid { column-gap: 4px; } .foot-grid li { font-size: .76rem; } }

/* ---------- payment form (our own page, Stripe's secure boxes inside) ---------- */
.pay-form { display: grid; gap: 4px; }
.pay-form #pay-express { margin-bottom: 4px; min-height: 50px; }
.pay-form #pay-express[hidden], .pay-form .or[hidden] { display: none; }
.pay-form .or::before, .pay-form .or::after { content: ''; flex: 1; height: 1.5px; background: var(--line); }
.pay-form .or { margin: 10px 0 12px; }
.pay-form .field { margin-bottom: 6px; }
.pay-form .field label { font-size: .875rem; }
.pay-form .field-note { color: var(--muted); font-size: .78rem; }
.pay-sec { font-family: var(--head); font-weight: 700; font-size: 1.1rem; margin: 14px 0 8px; padding-top: 14px; border-top: 1.5px dashed var(--line); }
#pay-address, #pay-card { min-height: 60px; }
.pay-err { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: #fdecea; border: 2px solid var(--red); color: var(--red); font-weight: 700; font-size: .9rem; }
.pay-err[hidden] { display: none; }
.btn-pay { margin-top: 16px; }
.btn-pay:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.pay-back { justify-self: center; margin-top: 10px; background: none; border: 0; font: inherit; font-size: .88rem; font-weight: 700; color: var(--muted); cursor: pointer; text-decoration: underline; }
/* pay button: greyed until the form is complete, but still tappable so it can say what's missing */
.btn-pay.is-incomplete { opacity: .5; box-shadow: none; }
.btn-pay.is-incomplete:hover { transform: none; }

/* iPhone Safari colours the strips behind its status bar and floating address bar from
   fixed layers that touch the screen edges, even invisible ones (closed basket, overlays).
   Hide them properly while closed so the page itself shows edge to edge. */
html { background: var(--paper); }
.drawer, .drawer-backdrop { visibility: hidden; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .25s, visibility 0s .32s; }
body.cart-open .drawer, body.cart-open .drawer-backdrop { visibility: visible; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.modal { visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.modal.open { visibility: visible; transition: opacity .25s; }
.sticky-buy { visibility: hidden; transition: transform .3s, visibility 0s .3s; }
.sticky-buy.show { visibility: visible; transition: transform .3s; }
.r > .ico { margin-right: 6px; }
/* text pages: no double gap above the first heading */
.prose > :first-child { margin-top: 0; }
@media (max-width: 720px) { .prose { padding-top: 34px; padding-bottom: 56px; } }
select.input { text-align: left; text-align-last: left; }
/* iPhone Safari gives date boxes a fixed built-in width that ignores the grid, so they poke out on phones */
input[type="date"].input { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; min-height: 50px; text-align: left; }
input[type="date"].input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field, .field-row > * { min-width: 0; }
/* 3-step price ladder (1 / 2 / 3+) */
.ladder.three { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-inline: auto; }
@media (max-width: 560px) { .ladder.three { gap: 20px 8px; } .ladder.three .rung { padding: 22px 6px 16px; font-size: .86rem; } .ladder.three .rung .each { font-size: 1.7rem; } .ladder.three .rung .tier { font-size: 1rem; } .ladder.three .rung .save { font-size: .72rem; padding: 3px 8px; } .ladder.three .rung .flag { font-size: .64rem; padding: 4px 9px; } }
#price-sub { margin-left: 8px; font-size: 1.05rem; }