:root {
  --pink: #F0A8AA;
  --pink-deep: #D96678;
  --pink-soft: #FBE2E1;
  --cream: #FDF6E8;
  --paper: #FFFDF8;
  --sage: #9CAF88;
  --sage-deep: #6F875E;
  --sage-soft: #E5ECD9;
  --gold: #C9A15C;
  --gold-soft: #F6E5B9;
  --brown: #71472F;
  --ink: #45362E;
  --muted: #776960;
  --line: rgba(201, 161, 92, .25);
  --shadow: 0 16px 38px rgba(113, 71, 47, .12);
  --shadow-soft: 0 9px 24px rgba(113, 71, 47, .08);
  --font-rounded: "Trebuchet MS", "Avenir Next Rounded", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  font-family: var(--font-rounded);
  color: var(--ink);
  background: var(--cream);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--cream); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 7% 9%, rgba(240,168,170,.18) 0 90px, transparent 91px),
    radial-gradient(circle at 94% 28%, rgba(156,175,136,.14) 0 125px, transparent 126px),
    radial-gradient(circle at 21% 90%, rgba(201,161,92,.08) 0 105px, transparent 106px),
    linear-gradient(180deg, #FFF9EE 0%, var(--cream) 48%, #FBEDE2 100%);
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 4px solid rgba(111,135,94,.34); outline-offset: 4px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { text-wrap: pretty; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; position: relative; overflow: hidden; padding-bottom: 1rem; }
.app-shell::before, .app-shell::after { content: ""; position: fixed; pointer-events: none; z-index: 0; border-radius: 50%; }
.app-shell::before { width: 16rem; height: 16rem; background: rgba(240,168,170,.08); left: -7rem; top: 38%; }
.app-shell::after { width: 18rem; height: 18rem; background: rgba(201,161,92,.07); right: -8rem; bottom: 7%; }

.topbar {
  width: min(1180px, calc(100% - 2rem));
  min-height: 86px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  position: relative;
  z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: .72rem; text-decoration: none; min-height: 56px; }
.brand-mark {
  width: 3rem; height: 3rem; flex: 0 0 auto; position: relative; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(145deg, #F8C8CA, var(--pink));
  border: 2px solid rgba(217,102,120,.24); box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 7px 15px rgba(217,102,120,.16);
}
.brand-heart { color: #fff; font-size: 1.45rem; text-shadow: 0 2px 0 rgba(217,102,120,.18); }
.brand-sparkle { position: absolute; top: .25rem; right: .25rem; width: 1rem; height: 1rem; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: white; font-size: .5rem; }
.brand-copy strong { display: block; color: var(--pink-deep); font-size: 1.12rem; line-height: 1; letter-spacing: -.025em; }
.brand-copy small { display: block; margin-top: .13rem; color: var(--sage-deep); font-size: .73rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.desktop-nav { justify-self: center; display: inline-flex; gap: .35rem; align-items: center; padding: .33rem; border-radius: 999px; background: rgba(255,253,248,.72); border: 1px solid rgba(201,161,92,.18); box-shadow: 0 5px 17px rgba(113,71,47,.04); }
.desktop-nav a { min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; padding: .62rem .9rem; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .84rem; font-weight: 900; transition: .18s ease; }
.desktop-nav a:hover { color: var(--brown); background: rgba(251,226,225,.55); }
.desktop-nav a.is-active { color: #fff; background: linear-gradient(180deg, #EE8D99, var(--pink-deep)); box-shadow: 0 5px 12px rgba(217,102,120,.2), inset 0 2px 0 rgba(255,255,255,.3); }
.desktop-nav .founder-link { border-left: 1px solid rgba(201,161,92,.18); color: #8B6B31; }

.basket-button { min-height: 50px; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .72rem .55rem .9rem; border: 1px solid rgba(201,161,92,.35); border-radius: 999px; background: rgba(255,253,248,.9); color: var(--brown); font-weight: 900; box-shadow: var(--shadow-soft); opacity: 1; }
.basket-button > span:first-child { font-size: 1.12rem; color: var(--pink-deep); }
.basket-count { min-width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--sage); font-size: .72rem; }

main { position: relative; z-index: 2; }
.view { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
.view.is-active { animation: view-in .28s ease-out; }
@keyframes view-in { from { opacity: .25; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.eyebrow { margin: 0 0 .52rem; color: var(--pink-deep); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; font-weight: 900; }
h1 { margin: 0; color: var(--brown); font-size: clamp(2.65rem, 5.2vw, 5.3rem); line-height: .95; letter-spacing: -.055em; }
h1 em { color: var(--pink-deep); font-style: normal; text-shadow: 0 3px 0 rgba(201,161,92,.16); }
h2 { margin: 0; color: var(--brown); font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.04; letter-spacing: -.035em; }
h3 { color: var(--brown); letter-spacing: -.02em; }

.hero-panel {
  min-height: 565px;
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(440px,1.05fr);
  align-items: center;
  gap: 1.5rem;
  padding: 2.55rem 2.7rem 2rem;
  border: 1px solid rgba(201,161,92,.27);
  border-radius: 2.4rem;
  background:
    radial-gradient(circle at 70% 15%, rgba(240,168,170,.27) 0 72px, transparent 73px),
    radial-gradient(circle at 89% 61%, rgba(156,175,136,.24) 0 86px, transparent 87px),
    linear-gradient(135deg, rgba(255,253,248,.98), rgba(253,246,232,.93));
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero-panel::before { content: "♥   ✦   ♣   ★"; position: absolute; right: 2.1rem; top: .95rem; color: rgba(201,161,92,.4); font-size: 1rem; letter-spacing: .95rem; transform: rotate(3deg); }
.hero-panel::after { content: ""; position: absolute; left: -42px; bottom: -58px; width: 165px; height: 165px; border-radius: 50%; border: 22px dotted rgba(240,168,170,.11); }
.hero-copy { position: relative; z-index: 3; }
.hero-intro { max-width: 35rem; margin: 1.25rem 0 1.45rem; color: var(--muted); font-size: 1.04rem; line-height: 1.58; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.primary-button, .secondary-button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .8rem 1.3rem; border-radius: 999px; text-decoration: none; font-weight: 900; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.primary-button { border: 0; background: linear-gradient(180deg, #EE8D99, var(--pink-deep)); color: white; box-shadow: 0 10px 20px rgba(217,102,120,.23), inset 0 2px 0 rgba(255,255,255,.34); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 13px 24px rgba(217,102,120,.28), inset 0 2px 0 rgba(255,255,255,.34); }
.primary-button.small { min-height: 48px; padding: .7rem 1.05rem; font-size: .86rem; }
.secondary-button { border: 1px solid rgba(156,175,136,.45); background: rgba(255,253,248,.86); color: var(--sage-deep); box-shadow: 0 7px 17px rgba(113,71,47,.06); }
.secondary-button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(113,71,47,.09); }
.trust-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.25rem; }
.trust-pills span { display: inline-flex; align-items: center; min-height: 32px; padding: .42rem .65rem; border-radius: 999px; background: rgba(255,253,248,.72); border: 1px solid rgba(201,161,92,.16); color: #8A796D; font-size: .7rem; font-weight: 800; }

.hero-world { min-height: 470px; position: relative; align-self: stretch; }
.mascot { position: absolute; bottom: -1.1rem; margin: 0; }
.mascot img { width: 100%; filter: drop-shadow(0 15px 16px rgba(113,71,47,.08)); }
.mascot-brownie { width: min(58%, 328px); left: -1.4rem; z-index: 4; }
.mascot-nibbles { width: min(50%, 282px); right: -1rem; z-index: 5; }
.speech { position: absolute; z-index: 8; max-width: 14.2rem; padding: .72rem .84rem; border-radius: 1rem; background: rgba(255,253,248,.97); border: 2px solid rgba(240,168,170,.45); color: var(--muted); font-size: .76rem; line-height: 1.35; box-shadow: 0 8px 18px rgba(113,71,47,.08); }
.speech strong { display: block; margin-bottom: .14rem; color: var(--pink-deep); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.speech::after { content: ""; position: absolute; width: 13px; height: 13px; background: inherit; border-right: inherit; border-bottom: inherit; transform: rotate(45deg); bottom: -8px; }
.speech-brownie { top: 1.1rem; left: 0; }
.speech-brownie::after { left: 35px; }
.speech-nibbles { top: 6rem; right: -.2rem; border-color: rgba(156,175,136,.55); }
.speech-nibbles strong { color: var(--sage-deep); }
.speech-nibbles::after { right: 34px; }
.float-charm { position: absolute; z-index: 6; display: grid; place-items: center; border-radius: 50%; color: white; box-shadow: 0 7px 18px rgba(113,71,47,.1), inset 0 2px 0 rgba(255,255,255,.32); animation: float-charm 3.8s ease-in-out infinite; }
.charm-heart { width: 38px; height: 38px; left: 42%; top: 24%; background: var(--pink); }
.charm-star { width: 31px; height: 31px; right: 16%; top: 43%; background: var(--gold); animation-delay: .8s; }
.charm-clover { width: 29px; height: 29px; left: 22%; bottom: 17%; background: var(--sage); animation-delay: 1.6s; }
@keyframes float-charm { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
.bracelet-orbit { position: absolute; width: 132px; height: 132px; border: 1px dashed rgba(201,161,92,.3); border-radius: 50%; right: 7%; bottom: 12%; opacity: .65; animation: orbit-spin 18s linear infinite; }
.bracelet-orbit i { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--pink); border: 2px solid rgba(255,255,255,.65); box-shadow: 0 2px 5px rgba(113,71,47,.09); }
.bracelet-orbit i:nth-child(1){left:56px;top:-9px}.bracelet-orbit i:nth-child(2){right:8px;top:14px;background:var(--sage)}.bracelet-orbit i:nth-child(3){right:-9px;top:56px;background:var(--gold)}.bracelet-orbit i:nth-child(4){right:8px;bottom:14px}.bracelet-orbit i:nth-child(5){left:56px;bottom:-9px;background:var(--sage)}.bracelet-orbit i:nth-child(6){left:8px;bottom:14px;background:var(--gold)}.bracelet-orbit i:nth-child(7){left:-9px;top:56px}.bracelet-orbit i:nth-child(8){left:8px;top:14px;background:var(--sage)}
@keyframes orbit-spin { to { transform: rotate(360deg); } }

.home-section { margin-top: 1.05rem; padding: 2rem; border-radius: 1.7rem; background: rgba(255,253,248,.76); border: 1px solid rgba(201,161,92,.2); box-shadow: 0 10px 28px rgba(113,71,47,.055); }
.section-heading { max-width: 690px; margin-bottom: 1.35rem; }
.section-heading p:not(.eyebrow) { margin: .65rem 0 0; color: var(--muted); line-height: 1.5; }
.heading-row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.centred { margin-inline: auto; text-align: center; }
.text-link { display: inline-flex; gap: .35rem; align-items: center; min-height: 44px; color: var(--pink-deep); font-weight: 900; font-size: .86rem; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.hero-feature { display: grid; grid-template-columns: .82fr 1.18fr; gap: 1.2rem; align-items: center; background: linear-gradient(120deg, rgba(251,226,225,.65), rgba(255,253,248,.9) 47%, rgba(229,236,217,.58)); }
.hero-feature .section-heading { margin: 0; }
.hero-product-placeholder { min-height: 235px; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-radius: 1.45rem; overflow: hidden; background: rgba(255,253,248,.92); border: 1px solid rgba(201,161,92,.25); box-shadow: var(--shadow-soft); }
.product-art { min-height: 220px; display: grid; place-items: center; position: relative; overflow: hidden; }
.product-art::before, .product-art::after { content: ""; position: absolute; border-radius: 50%; }
.product-art::before { width: 125px; height: 125px; background: rgba(255,255,255,.26); top: -38px; left: -28px; }
.product-art::after { width: 95px; height: 95px; border: 13px dotted rgba(255,255,255,.24); right: -26px; bottom: -26px; }
.product-art-hero { background: linear-gradient(145deg, #F6D4D4, #F0A8AA 48%, #D9929A); }
.art-pink { background: linear-gradient(145deg, #FCE4E2, #EFA9AB); }
.art-sage { background: linear-gradient(145deg, #E9F0E0, #AFC09A); }
.art-gold { background: linear-gradient(145deg, #FAECC8, #D6B26D); }
.bracelet { width: 134px; height: 134px; position: relative; border-radius: 50%; z-index: 2; transform: rotate(-8deg); }
.bracelet span, .bracelet b { position: absolute; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 3px solid rgba(255,255,255,.68); background: var(--paper); box-shadow: 0 4px 8px rgba(113,71,47,.12), inset 0 2px 0 rgba(255,255,255,.8); }
.bracelet span:nth-child(1){left:53px;top:-4px;background:#FDF1D6}.bracelet span:nth-child(2){right:6px;top:17px;background:#F3B6B8}.bracelet span:nth-child(3){right:-4px;top:54px;background:#B2C39F}.bracelet span:nth-child(4){right:14px;bottom:7px;background:#F4D384}.bracelet span:nth-child(5){left:53px;bottom:-5px;background:#F3B6B8}.bracelet span:nth-child(6){left:8px;bottom:15px;background:#B2C39F}.bracelet span:nth-child(7){left:-4px;top:53px;background:#F4D384}.bracelet span:nth-child(8){left:14px;top:15px;background:#FFF2DF}
.bracelet b { right: -10px; top: 51px; width: 34px; height: 34px; color: white; background: var(--gold); font-size: .8rem; }
.bracelet-large { width: 154px; height: 154px; transform: rotate(-10deg) scale(1.06); }
.bracelet-large span:nth-child(1){left:63px}.bracelet-large span:nth-child(2){right:12px;top:22px}.bracelet-large span:nth-child(3){right:-1px;top:64px}.bracelet-large span:nth-child(4){right:19px;bottom:10px}.bracelet-large span:nth-child(5){left:63px;bottom:-3px}.bracelet-large span:nth-child(6){left:13px;bottom:18px}.bracelet-large span:nth-child(7){left:-2px;top:64px}.bracelet-large span:nth-child(8){left:18px;top:21px}.bracelet-large b{right:-3px;top:61px}
.bracelet.alt span:nth-child(even){background:#F7D4D5}.bracelet.alt span:nth-child(odd){background:#EFF3E9}.bracelet.gold span:nth-child(even){background:#F8E5B5}.bracelet.gold span:nth-child(odd){background:#FFF6E2}
.mini-charm { position: absolute; z-index: 4; right: 22%; bottom: 22%; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--pink-deep); font-style: normal; font-weight: 900; box-shadow: var(--shadow-soft); }
.hero-ribbon { position: absolute; left: 1rem; top: 1rem; z-index: 5; padding: .45rem .65rem; border-radius: 999px; background: var(--gold); color: white; font-size: .7rem; font-weight: 900; letter-spacing: .04em; }
.placeholder-copy { padding: 1.35rem; align-self: center; }
.placeholder-copy h3 { margin: .65rem 0 .4rem; font-size: 1.28rem; }
.placeholder-copy p { margin: 0 0 .7rem; color: var(--muted); line-height: 1.45; font-size: .88rem; }

.level-pill { display: inline-flex; min-height: 27px; align-items: center; padding: .3rem .56rem; border-radius: 999px; font-size: .66rem; font-weight: 900; letter-spacing: .025em; background: #F1EAE0; color: #7C7068; }
.level-pill.lucky { background: var(--pink-soft); color: #B55263; }.level-pill.rare { background: var(--sage-soft); color: #5E7454; }.level-pill.super { background: var(--gold-soft); color: #927028; }.level-pill.ultra { background: #F2D7DB; color: #9B4253; box-shadow: inset 0 0 0 1px rgba(201,161,92,.22); }
.preview-products { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; }
.preview-card { position: relative; overflow: hidden; min-width: 0; border-radius: 1.4rem; border: 1px solid rgba(201,161,92,.22); background: var(--paper); box-shadow: var(--shadow-soft); }
.preview-card .product-art { min-height: 205px; }
.preview-card-body { padding: 1rem 1rem 1.1rem; }
.preview-card-body h3 { margin: .55rem 0 .3rem; font-size: 1.05rem; }
.preview-card-body p { min-height: 2.7em; margin: 0 0 .8rem; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.price { color: var(--brown); font-size: 1.05rem; }
.example-tag { position: absolute; right: .65rem; top: .65rem; z-index: 5; padding: .35rem .5rem; border-radius: 999px; background: rgba(255,253,248,.9); color: var(--muted); font-size: .6rem; font-weight: 900; box-shadow: 0 3px 10px rgba(113,71,47,.08); }

.lucky-levels-section { background: linear-gradient(180deg, rgba(255,253,248,.86), rgba(253,246,232,.92)); }
.level-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .65rem; }
.level-card { min-height: 155px; padding: 1rem .85rem; text-align: center; border-radius: 1.2rem; background: var(--paper); border: 1px solid rgba(201,161,92,.2); box-shadow: 0 6px 16px rgba(113,71,47,.055); }
.level-symbol { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; margin: 0 auto .55rem; border-radius: 50%; background: #F4EFE8; color: #8B7B70; font-weight: 900; }
.level-card h3 { margin: 0; font-size: .95rem; }
.level-card p { margin: .42rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.level-card.lucky .level-symbol{background:var(--pink-soft);color:var(--pink-deep)}.level-card.rare .level-symbol{background:var(--sage-soft);color:var(--sage-deep)}.level-card.super .level-symbol{background:var(--gold-soft);color:#9A7428}.level-card.ultra .level-symbol{background:linear-gradient(145deg,var(--pink-soft),var(--gold-soft));color:#A34A5B}

.story-strip { min-height: 190px; margin-top: 1.05rem; padding: 1.5rem 10.5rem; position: relative; display: grid; place-items: center; text-align: center; overflow: hidden; border-radius: 1.7rem; background: linear-gradient(90deg, rgba(251,226,225,.8), rgba(229,236,217,.82)); border: 1px solid rgba(156,175,136,.24); }
.story-strip > div { max-width: 720px; position: relative; z-index: 2; }
.story-strip h2 { font-size: clamp(1.5rem,2.5vw,2.2rem); }
.story-strip p:not(.eyebrow) { margin: .65rem auto 0; color: var(--muted); line-height: 1.5; font-size: .86rem; }
.story-mascot { position: absolute; bottom: -40px; width: 175px; opacity: .9; }
.brownie-story { left: .5rem; }.nibbles-story { right: .5rem; }

.page-header { min-height: 230px; margin-bottom: 1rem; padding: 2.3rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-radius: 2rem; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,253,248,.98), rgba(253,246,232,.94)); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.page-header::after { content: "♥  ✦  ♣"; position: absolute; right: 2rem; top: 1rem; color: rgba(201,161,92,.35); letter-spacing: .8rem; }
.page-header h1 { font-size: clamp(2.6rem,5vw,4.6rem); }
.page-header p:not(.eyebrow) { max-width: 550px; margin: .85rem 0 0; color: var(--muted); line-height: 1.5; }
.mini-guide { max-width: 340px; min-width: 270px; min-height: 112px; display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: .7rem; padding: .7rem .85rem .7rem .35rem; border-radius: 1.35rem; background: linear-gradient(120deg, rgba(251,226,225,.8), rgba(255,253,248,.9)); border: 1px solid rgba(240,168,170,.28); box-shadow: var(--shadow-soft); position: relative; z-index: 2; }
.mini-guide img { width: 90px; max-height: 98px; object-fit: contain; object-position: bottom; }
.mini-guide strong { display: block; color: var(--pink-deep); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; }
.mini-guide span { display: block; margin-top: .25rem; color: var(--muted); font-size: .76rem; line-height: 1.35; }

.filter-shell { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 0 .85rem; scrollbar-width: none; }
.filter-shell::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; min-height: 44px; padding: .55rem .8rem; border-radius: 999px; border: 1px solid rgba(201,161,92,.23); background: rgba(255,253,248,.8); color: var(--muted); font-weight: 900; font-size: .76rem; opacity: 1; }
.filter-chip.is-selected { background: var(--pink-soft); color: var(--pink-deep); border-color: rgba(217,102,120,.2); }

.shop-empty { min-height: 455px; display: grid; grid-template-columns: minmax(300px,.95fr) minmax(320px,.95fr) 190px; align-items: center; gap: 1.2rem; padding: 2rem 1.8rem; border-radius: 1.7rem; background: rgba(255,253,248,.8); border: 1px solid rgba(201,161,92,.2); box-shadow: var(--shadow-soft); overflow: hidden; }
.empty-shelf { min-height: 250px; position: relative; display: flex; align-items: flex-end; justify-content: center; gap: .55rem; padding-bottom: 73px; }
.shelf-line { position: absolute; left: 5%; right: 5%; bottom: 62px; height: 15px; border-radius: 999px; background: linear-gradient(180deg, #E9C783, var(--gold)); box-shadow: 0 8px 0 #A87936, 0 13px 18px rgba(113,71,47,.13); }
.empty-card { width: 86px; height: 112px; display: grid; place-items: center; border-radius: 1.1rem 1.1rem .5rem .5rem; background: linear-gradient(160deg, #FFF9EF, #F6EBDD); border: 2px dashed #DCCDBB; color: #D6C3AE; font-size: 1.35rem; transform-origin: bottom; }
.ghost-one { transform: rotate(-4deg); }.ghost-two { transform: translateY(-12px); }.ghost-three { transform: rotate(4deg); }
.empty-copy { position: relative; z-index: 2; }
.empty-copy h2 { margin-top: .65rem; font-size: clamp(1.7rem,3vw,2.4rem); }
.empty-copy p { margin: .75rem 0 1rem; color: var(--muted); line-height: 1.5; font-size: .9rem; }
.tiny-badge { display: inline-flex; padding: .38rem .6rem; border-radius: 999px; background: var(--sage-soft); color: var(--sage-deep); font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.empty-nibbles { width: 220px; align-self: end; margin-bottom: -44px; }

.founder-header { background: linear-gradient(135deg, rgba(229,236,217,.75), rgba(255,253,248,.96) 55%, rgba(246,229,185,.42)); }
.founder-mode-badge { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; padding: .65rem .9rem; border-radius: 999px; background: rgba(255,253,248,.9); border: 1px solid rgba(201,161,92,.38); color: #8A6B2F; font-weight: 900; font-size: .78rem; box-shadow: var(--shadow-soft); }
.builder-coming-soon { min-height: 440px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 1.5rem; padding: 1.5rem 2rem; border-radius: 1.7rem; background: rgba(255,253,248,.78); border: 1px solid rgba(201,161,92,.2); box-shadow: var(--shadow-soft); }
.builder-characters { min-height: 330px; position: relative; }
.builder-characters img { position: absolute; bottom: -15px; width: 55%; filter: drop-shadow(0 14px 15px rgba(113,71,47,.08)); }
.builder-characters img:first-child { left: 0; }.builder-characters img:last-child { right: 0; width: 49%; }
.builder-message h2 { max-width: 590px; }
.builder-message > p:not(.eyebrow) { max-width: 600px; margin: .8rem 0 1rem; color: var(--muted); line-height: 1.55; }
.builder-preview-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.builder-preview-pills span { padding: .5rem .68rem; border-radius: 999px; background: linear-gradient(180deg, #FFFDF8, #F8F0E5); border: 1px solid rgba(201,161,92,.2); color: var(--muted); font-size: .72rem; font-weight: 850; }

.mobile-dock { display: none; }
.site-footer { width: min(1180px, calc(100% - 2rem)); margin: 1rem auto 0; padding: 1rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; color: #8C7B6F; font-size: .7rem; position: relative; z-index: 2; }
.site-footer p { margin: 0; }.site-footer strong { color: var(--brown); }.site-footer span { margin-left: .35rem; color: var(--pink-deep); font-weight: 800; }

@media (max-width: 980px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .desktop-nav { display: none; }
  .basket-button { justify-self: end; }
  .hero-panel { grid-template-columns: .92fr 1.08fr; min-height: 530px; padding: 2rem 1.9rem 1.5rem; }
  .hero-world { min-height: 430px; }
  .hero-product-placeholder { grid-template-columns: .9fr 1.1fr; }
  .level-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .level-card:nth-child(4), .level-card:nth-child(5) { grid-column: span 1; }
  .story-strip { padding-inline: 8.5rem; }
  .shop-empty { grid-template-columns: .9fr 1fr; }
  .empty-nibbles { position: absolute; right: 10px; bottom: -30px; width: 165px; opacity: .28; }
  .shop-empty { position: relative; }
}

@media (max-width: 760px) {
  .app-shell { padding-bottom: 6.4rem; }
  .topbar { width: min(100% - 1.1rem, 1180px); min-height: 76px; gap: .55rem; }
  .brand-mark { width: 2.65rem; height: 2.65rem; }
  .brand-copy strong { font-size: .97rem; }.brand-copy small { font-size: .62rem; }
  .basket-label { display: none; }.basket-button { min-height: 46px; padding: .5rem .55rem .5rem .65rem; }
  .view { width: min(100% - 1.1rem, 1180px); }
  .hero-panel { min-height: auto; grid-template-columns: 1fr; padding: 1.55rem 1.15rem .6rem; border-radius: 1.75rem; }
  .hero-copy { text-align: center; }
  .hero-copy h1 { font-size: clamp(2.75rem, 12vw, 4.5rem); }
  .hero-intro { margin-inline: auto; font-size: .95rem; }
  .hero-actions, .trust-pills { justify-content: center; }
  .hero-actions .primary-button, .hero-actions .secondary-button { min-width: min(100%, 260px); }
  .hero-world { min-height: 365px; max-width: 510px; width: 100%; margin: 0 auto; }
  .mascot-brownie { left: 1%; width: 57%; }.mascot-nibbles { right: 0; width: 49%; }
  .speech { max-width: 11.7rem; padding: .6rem .67rem; font-size: .68rem; }.speech-brownie { top: .2rem; left: 0; }.speech-nibbles { top: 3.7rem; right: 0; }
  .bracelet-orbit { width: 105px; height: 105px; right: 7%; bottom: 7%; opacity: .4; }
  .bracelet-orbit i { width: 15px; height: 15px; }.bracelet-orbit i:nth-child(1){left:45px;top:-7px}.bracelet-orbit i:nth-child(2){right:6px;top:11px}.bracelet-orbit i:nth-child(3){right:-7px;top:45px}.bracelet-orbit i:nth-child(4){right:6px;bottom:11px}.bracelet-orbit i:nth-child(5){left:45px;bottom:-7px}.bracelet-orbit i:nth-child(6){left:6px;bottom:11px}.bracelet-orbit i:nth-child(7){left:-7px;top:45px}.bracelet-orbit i:nth-child(8){left:6px;top:11px}
  .home-section { padding: 1.25rem 1rem; border-radius: 1.4rem; }
  .hero-feature { grid-template-columns: 1fr; }.hero-feature .section-heading { text-align: center; margin-inline: auto; }
  .hero-product-placeholder { grid-template-columns: 1fr 1fr; min-height: 220px; }
  .product-art { min-height: 190px; }
  .preview-products { grid-template-columns: 1fr 1fr; }
  .preview-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: .9fr 1.1fr; }.preview-card:last-child .product-art { min-height: 170px; }.preview-card:last-child .preview-card-body { align-self: center; }
  .level-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.level-card:last-child { grid-column: 1 / -1; }
  .story-strip { min-height: 230px; padding: 1.25rem 5.2rem; }.story-mascot { width: 125px; bottom: -30px; }.brownie-story { left: -38px; }.nibbles-story { right: -38px; }
  .page-header { min-height: 210px; padding: 1.55rem 1.25rem; border-radius: 1.6rem; }.mini-guide { min-width: 220px; grid-template-columns: 70px 1fr; }.mini-guide img { width: 72px; }
  .shop-empty { min-height: 480px; grid-template-columns: 1fr; padding: 1.25rem; text-align: center; }.empty-shelf { min-height: 215px; padding-bottom: 65px; }.empty-copy { max-width: 530px; margin: 0 auto; }.empty-nibbles { display: none; }
  .builder-coming-soon { grid-template-columns: .8fr 1.2fr; padding: 1rem; }.builder-characters { min-height: 300px; }
  .mobile-dock { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; position: fixed; z-index: 50; left: max(.75rem, env(safe-area-inset-left)); right: max(.75rem, env(safe-area-inset-right)); bottom: max(.65rem, env(safe-area-inset-bottom)); padding: .38rem; border-radius: 1.35rem; background: rgba(255,253,248,.94); border: 1px solid rgba(201,161,92,.28); box-shadow: 0 14px 32px rgba(113,71,47,.17); backdrop-filter: blur(12px); }
  .mobile-dock a { min-height: 58px; display: grid; place-items: center; align-content: center; gap: .15rem; border-radius: 1rem; color: var(--muted); text-decoration: none; font-weight: 900; }
  .mobile-dock a > span { font-size: 1.08rem; }.mobile-dock small { font-size: .66rem; font-weight: 900; }.mobile-dock a.is-active { background: linear-gradient(180deg, #F5B9BC, var(--pink)); color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.38), 0 5px 12px rgba(217,102,120,.18); }
  .site-footer { display: block; padding: .8rem .2rem 1rem; text-align: center; }.site-footer p + p { margin-top: .35rem; }
}

@media (max-width: 540px) {
  .hero-panel { padding-inline: .9rem; }
  .hero-world { min-height: 330px; }.speech { max-width: 9.7rem; font-size: .62rem; }.speech strong { font-size: .61rem; }.speech-nibbles { top: 3.2rem; }
  .hero-product-placeholder { grid-template-columns: 1fr; }.product-art-hero { min-height: 185px; }.placeholder-copy { text-align: center; }
  .preview-products { grid-template-columns: 1fr; }.preview-card:last-child { grid-column: auto; display: block; }.preview-card:last-child .product-art { min-height: 205px; }
  .level-grid { grid-template-columns: 1fr; }.level-card:last-child { grid-column: auto; }.level-card { min-height: auto; display: grid; grid-template-columns: 44px 1fr; column-gap: .65rem; text-align: left; align-items: center; }.level-symbol { width: 2.5rem; height: 2.5rem; grid-row: 1 / span 2; margin: 0; }.level-card p { margin-top: .18rem; }
  .story-strip { padding: 1.2rem 3.5rem; }.story-mascot { width: 100px; opacity: .62; }
  .page-header { display: block; text-align: center; }.mini-guide { margin: 1.2rem auto 0; text-align: left; }.founder-mode-badge { margin-top: 1rem; }
  .empty-card { width: 74px; height: 98px; }.builder-coming-soon { grid-template-columns: 1fr; text-align: center; }.builder-characters { min-height: 230px; max-width: 340px; width: 100%; margin: 0 auto; }.builder-preview-pills { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Checkpoint 3 — tablet-first Shop Builder */
.builder-intro { min-height: 132px; margin-bottom: 1rem; padding: 1rem 1.25rem; display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 1rem; border-radius: 1.55rem; background: linear-gradient(115deg, rgba(251,226,225,.82), rgba(255,253,248,.96) 52%, rgba(229,236,217,.72)); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.builder-intro-character { height: 105px; overflow: hidden; align-self: end; }.builder-intro-character img { width: 110px; margin-top: 2px; }
.builder-intro h2 { margin: .1rem 0 .25rem; color: var(--brown); font-size: 1.5rem; }.builder-intro p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.builder-totals { display: flex; gap: .55rem; }.builder-totals span { min-width: 94px; padding: .7rem .8rem; border-radius: 1.1rem; background: rgba(255,253,248,.88); border: 1px solid rgba(201,161,92,.22); text-align: center; color: var(--muted); font-size: .67rem; font-weight: 800; }.builder-totals strong { display: block; color: var(--pink-deep); font-size: 1.35rem; line-height: 1; margin-bottom: .2rem; }
.builder-feedback { position: sticky; top: .5rem; z-index: 40; max-width: 720px; margin: 0 auto 1rem; padding: .8rem 1rem; border-radius: 999px; text-align: center; background: #EDF3E7; border: 1px solid rgba(111,135,94,.3); color: var(--sage-deep); font-weight: 900; box-shadow: var(--shadow-soft); }.builder-feedback[data-type="error"] { background: #FCE8E8; border-color: rgba(217,102,120,.35); color: #A44D5A; }
.builder-workspace { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(310px,.8fr); gap: 1rem; align-items: start; }
.bracelet-form { display: grid; gap: .85rem; }
.form-card { margin: 0; padding: 1.15rem; border: 1px solid rgba(201,161,92,.22); border-radius: 1.45rem; background: rgba(255,253,248,.9); box-shadow: var(--shadow-soft); min-width: 0; }.form-card-main { background: linear-gradient(145deg, rgba(255,253,248,.98), rgba(251,226,225,.34)); }
.form-card-heading { display: flex; gap: .7rem; align-items: center; margin-bottom: .9rem; }.form-card-heading.compact { margin-bottom: .65rem; }.form-card-heading h2,.form-card-heading h3 { margin: 0; color: var(--brown); }.form-card-heading h2 { font-size: 1.35rem; }.form-card-heading h3 { font-size: 1rem; }.form-card-heading small { color: var(--muted); font-size: .65rem; font-weight: 800; }
.step-dot { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#F6B5B8,var(--pink)); color: white; font-weight: 900; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 5px 10px rgba(217,102,120,.13); }
.form-card legend { padding: 0 .3rem; display: flex; gap: .65rem; align-items: center; color: var(--brown); font-size: 1.2rem; font-weight: 900; }.form-card legend small { display: block; color: var(--pink-deep); font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; }
.field-label { display: block; margin: .85rem 0 .35rem; color: var(--brown); font-size: .78rem; font-weight: 900; }.field-label:first-of-type { margin-top: 0; }.small-label span { color: var(--muted); font-weight: 700; }
.bracelet-form input[type="text"], .bracelet-form input[type="number"], .bracelet-form textarea { width: 100%; min-height: 50px; border: 2px solid #E8DCCB; border-radius: 1rem; background: #FFFEFB; color: var(--ink); padding: .72rem .82rem; outline: 0; transition: border-color .16s, box-shadow .16s; }.bracelet-form textarea { resize: vertical; min-height: 88px; line-height: 1.45; }.bracelet-form input:focus,.bracelet-form textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(240,168,170,.15); }.big-input { font-size: 1.08rem; font-weight: 850; }
.field-help { margin: .35rem 0 .7rem; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.level-choices { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .45rem; }.choice-card { min-height: 108px; padding: .62rem .35rem; display: grid; place-items: center; align-content: center; gap: .2rem; border: 2px solid transparent; border-radius: 1.05rem; background: #F8F2E9; color: var(--muted); text-align: center; cursor: pointer; user-select: none; }.choice-card input,.choice-pill input,.star-choice input { position: absolute; opacity: 0; pointer-events: none; }.choice-card .choice-symbol { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.72); font-size: 1rem; }.choice-card strong { color: var(--brown); font-size: .72rem; }.choice-card small { font-size: .58rem; line-height: 1.15; }.choice-card.is-picked { border-color: currentColor; transform: translateY(-2px); box-shadow: 0 7px 14px rgba(113,71,47,.09); }.choice-card.common.is-picked{color:#967B65;background:#F5ECE1}.choice-card.lucky.is-picked{color:var(--pink-deep);background:var(--pink-soft)}.choice-card.rare.is-picked{color:var(--sage-deep);background:var(--sage-soft)}.choice-card.super.is-picked{color:#9B712A;background:var(--gold-soft)}.choice-card.ultra.is-picked{color:#8E5D8C;background:#F1E4F0}
.two-up-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }.two-up-card > div + div { border-left: 1px dashed #E5D6C2; padding-left: 1.2rem; }
.price-input-wrap { max-width: 190px; min-height: 54px; display: grid; grid-template-columns: 42px 1fr; align-items: center; border: 2px solid #E8DCCB; border-radius: 1rem; background: white; overflow: hidden; }.price-input-wrap > span { height: 100%; display: grid; place-items: center; background: var(--gold-soft); color: #8C682E; font-weight: 900; }.price-input-wrap input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 1.05rem; font-weight: 900; }
.pill-choices { display: flex; flex-wrap: wrap; gap: .45rem; }.choice-pill { min-height: 50px; display: inline-flex; cursor: pointer; }.choice-pill span { display: grid; place-items: center; min-height: 50px; padding: .6rem .8rem; border-radius: 999px; border: 2px solid #E7DCCC; background: #FFFEFB; color: var(--muted); font-size: .73rem; font-weight: 900; }.choice-pill.is-picked span { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-deep); }
.star-choices { display: grid; grid-template-columns: repeat(5,1fr); gap: .4rem; }.star-choice { min-height: 63px; display: grid; place-items: center; align-content: center; gap: .1rem; border: 2px solid #E8DCCB; border-radius: .9rem; background: #FFFEFB; color: #C4A063; cursor: pointer; }.star-choice span { font-size: clamp(.62rem,1.35vw,.9rem); white-space: nowrap; letter-spacing: -.06em; }.star-choice small { color: var(--muted); font-weight: 900; }.star-choice.is-picked { border-color: var(--gold); background: var(--gold-soft); color: #A97929; transform: translateY(-2px); }
.photo-capture-row { display: grid; grid-template-columns: 190px 1fr; gap: 1rem; align-items: center; }.photo-frame { aspect-ratio: 1; border-radius: 1.2rem; display: grid; place-items: center; align-content: center; gap: .25rem; text-align: center; background: linear-gradient(145deg,#F9EEE2,#FFFDF8); border: 2px dashed #D9C5AD; color: var(--muted); overflow: hidden; }.photo-frame img { width:100%;height:100%;object-fit:cover; }.photo-placeholder-icon { font-size: 2rem; color: var(--pink); }.photo-frame strong { font-size: .72rem; }.photo-frame small { font-size: .58rem; }.photo-actions { display: grid; justify-items: start; gap: .5rem; }.photo-button { min-height: 50px; display: inline-flex; align-items: center; padding: .65rem .9rem; border-radius: 999px; background: var(--pink-soft); color: var(--pink-deep); border: 1px solid rgba(217,102,120,.2); font-weight: 900; font-size: .75rem; cursor: pointer; }.photo-button input { position:absolute;width:1px;height:1px;opacity:0; }.photo-actions p { max-width: 360px; margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.4; }.text-button { border:0;background:none;min-height:42px;padding:.35rem;color:var(--pink-deep);font-weight:900;cursor:pointer }.danger-text { color:#A9545E; }
.switches-card { display: grid; gap: .5rem; }.switch-row { min-height: 75px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: .7rem .8rem; border-radius: 1rem; background: #FAF6EF; border: 1px solid rgba(201,161,92,.16); cursor: pointer; }.switch-row strong { display:block;color:var(--brown);font-size:.78rem}.switch-row small { display:block;margin-top:.18rem;color:var(--muted);font-size:.65rem;line-height:1.35}.switch-row input { position:absolute;opacity:0 }.switch-row i { width: 52px; height: 30px; border-radius: 999px; background: #D9D1C7; position: relative; transition: .18s; }.switch-row i::after { content:""; width: 24px; height: 24px; border-radius: 50%; background:white; position:absolute;left:3px;top:3px;box-shadow:0 2px 6px rgba(113,71,47,.2);transition:.18s}.switch-row input:checked + i { background:var(--sage); }.switch-row input:checked + i::after { transform:translateX(22px); }
.builder-save-bar { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; padding: .75rem .2rem .2rem; }.save-bracelet-button { min-width: 210px; }.builder-save-bar p { flex:1; min-width:230px; margin:0;color:var(--muted);font-size:.67rem;line-height:1.4}.builder-save-bar p strong{color:var(--sage-deep)}
.sticky-preview { position: sticky; top: 1rem; padding: 1rem; border-radius: 1.5rem; background: linear-gradient(150deg, rgba(251,226,225,.68), rgba(255,253,248,.98) 45%, rgba(229,236,217,.6)); border: 1px solid rgba(201,161,92,.24); box-shadow: var(--shadow); }.preview-heading { min-height: 80px; display:grid;grid-template-columns:1fr 76px;align-items:center }.preview-heading h2{margin:.1rem 0;color:var(--brown);font-size:1.2rem}.preview-heading img{width:82px;height:82px;object-fit:contain;object-position:bottom}.builder-live-card { border-radius: 1.25rem; overflow:hidden; background:#FFFDF8;border:1px solid rgba(201,161,92,.24);box-shadow:0 10px 22px rgba(113,71,47,.1)}.builder-live-photo{min-height:240px;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 50% 45%,#FFFDF8 0 33%,transparent 34%),linear-gradient(145deg,#F6DDD9,#F4E8C9)}.builder-live-photo.has-photo{background:#EEE}.builder-live-photo>img{width:100%;height:100%;min-height:240px;max-height:330px;object-fit:cover}.builder-bracelet{transform:scale(1.12)}.preview-hero-ribbon{position:absolute;left:.65rem;top:.65rem;padding:.38rem .58rem;border-radius:999px;background:linear-gradient(180deg,#D6B469,var(--gold));color:white;font-size:.63rem;font-weight:900;box-shadow:0 5px 10px rgba(113,71,47,.13)}.builder-live-body{padding:1rem}.builder-live-body h3{margin:.5rem 0 .3rem;color:var(--brown);font-size:1.2rem}.builder-live-body p{min-height:2.7em;margin:0;color:var(--muted);font-size:.75rem;line-height:1.4}.builder-live-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.85rem}.publish-status{display:inline-flex;padding:.3rem .45rem;border-radius:999px;font-size:.57rem;font-weight:900}.publish-status.published{background:var(--sage-soft);color:var(--sage-deep)}.publish-status.draft{background:#F2ECE4;color:#8D7C70}.preview-note{margin:.7rem .25rem 0;color:var(--muted);font-size:.62rem;line-height:1.4;text-align:center}
.founder-shelf{margin-top:1rem;padding:1.25rem;border-radius:1.55rem;background:rgba(255,253,248,.84);border:1px solid rgba(201,161,92,.22);box-shadow:var(--shadow-soft)}.founder-shelf .section-heading{margin-bottom:.9rem}.founder-shelf .section-heading p{margin:.25rem 0 0;color:var(--muted);font-size:.75rem}.local-only-badge{padding:.48rem .65rem;border-radius:999px;background:var(--sage-soft);color:var(--sage-deep);font-size:.63rem;font-weight:900}.saved-products{display:grid;gap:.65rem}.builder-saved-empty{min-height:170px;display:grid;place-items:center;align-content:center;text-align:center;border:2px dashed #E3D6C4;border-radius:1.2rem;color:var(--muted);background:#FCF8F1}.builder-saved-empty>span{font-size:2rem;color:var(--pink)}.builder-saved-empty h3{margin:.25rem 0;color:var(--brown)}.builder-saved-empty p{margin:.1rem 0;font-size:.72rem}.saved-product-card{display:grid;grid-template-columns:105px 1fr auto;gap:.85rem;align-items:center;min-height:120px;padding:.65rem;border-radius:1.1rem;background:#FFFDF8;border:1px solid rgba(201,161,92,.2)}.saved-product-thumb{width:105px;height:105px;display:grid;place-items:center;border-radius:.9rem;background:linear-gradient(145deg,#F6E4DD,#F2E9CC);color:var(--pink-deep);font-size:1.8rem;overflow:hidden}.saved-product-thumb img{width:100%;height:100%;object-fit:cover}.saved-product-badges{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}.saved-product-copy h3{margin:.35rem 0 .2rem;color:var(--brown);font-size:1rem}.saved-product-copy>p{margin:0;color:var(--muted);font-size:.68rem}.saved-product-facts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.45rem;color:var(--muted);font-size:.6rem}.saved-product-facts strong{color:var(--pink-deep);font-size:.75rem}.mini-hero-badge{padding:.3rem .45rem;border-radius:999px;background:var(--gold-soft);color:#906B2B;font-size:.57rem;font-weight:900}.saved-product-actions{display:grid;gap:.3rem}.mini-action{min-width:72px;min-height:38px;border-radius:.75rem;border:1px solid #E4D7C6;background:#FAF5ED;color:var(--brown);font-size:.64rem;font-weight:900;cursor:pointer}.mini-action:hover{transform:translateY(-1px)}.mini-action.danger{color:#A9545E;background:#FCF0F1;border-color:#F0D0D4}
.product-preview-dialog{width:min(850px,calc(100% - 2rem));max-height:calc(100vh - 2rem);padding:0;border:0;border-radius:1.6rem;background:#FFFDF8;box-shadow:0 25px 80px rgba(80,50,30,.32);overflow:auto}.product-preview-dialog::backdrop{background:rgba(69,54,46,.45);backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:.7rem;top:.7rem;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,253,248,.9);color:var(--brown);font-size:1.5rem;box-shadow:var(--shadow-soft);cursor:pointer}.dialog-photo{min-height:330px;display:grid;place-items:center;background:linear-gradient(145deg,var(--pink-soft),var(--gold-soft));overflow:hidden}.dialog-photo img{width:100%;height:min(50vh,440px);object-fit:cover}.dialog-big-symbol{font-size:5rem;color:var(--pink-deep)}.dialog-content{padding:1.3rem}.dialog-badges{display:flex;gap:.4rem;flex-wrap:wrap}.dialog-content h2{margin:.65rem 0 .35rem;color:var(--brown);font-size:1.8rem}.dialog-description{color:var(--muted);line-height:1.5}.dialog-price{display:block;margin:.6rem 0;color:var(--pink-deep);font-size:1.35rem}.dialog-detail-list{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.8rem}.dialog-detail-row{padding:.7rem;border-radius:.85rem;background:#F9F3EA}.dialog-detail-row strong{display:block;color:var(--brown);font-size:.65rem;text-transform:uppercase;letter-spacing:.05em}.dialog-detail-row span{display:block;margin-top:.2rem;color:var(--muted);font-size:.72rem;line-height:1.35}

@media (max-width: 980px){.builder-workspace{grid-template-columns:minmax(0,1fr) 300px}.level-choices{grid-template-columns:repeat(3,1fr)}.choice-card:nth-child(4),.choice-card:nth-child(5){min-height:92px}.builder-live-photo{min-height:210px}.builder-live-photo>img{min-height:210px}.saved-product-card{grid-template-columns:95px 1fr auto}.saved-product-thumb{width:95px;height:95px}}
@media (max-width: 760px){.builder-intro{grid-template-columns:72px 1fr}.builder-intro-character{height:90px}.builder-intro-character img{width:90px}.builder-totals{grid-column:1/-1;justify-content:center}.builder-workspace{grid-template-columns:1fr}.builder-preview-column{order:-1}.sticky-preview{position:relative;top:auto}.preview-heading{grid-template-columns:1fr 70px}.builder-live-card{display:grid;grid-template-columns:.9fr 1.1fr}.builder-live-photo,.builder-live-photo>img{min-height:190px;height:100%;max-height:260px}.two-up-card{grid-template-columns:1fr}.two-up-card>div+div{border-left:0;border-top:1px dashed #E5D6C2;padding-left:0;padding-top:1rem}.level-choices{grid-template-columns:repeat(3,1fr)}.photo-capture-row{grid-template-columns:150px 1fr}.saved-product-card{grid-template-columns:82px 1fr}.saved-product-thumb{width:82px;height:82px}.saved-product-actions{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.mini-action{min-height:44px}.star-choice{min-height:60px}.switch-row{min-height:82px}.product-preview-dialog{width:calc(100% - 1rem)}.dialog-detail-list{grid-template-columns:1fr}}
@media (max-width: 540px){.builder-intro{grid-template-columns:1fr;text-align:center}.builder-intro-character{display:none}.builder-totals{justify-content:center}.builder-live-card{grid-template-columns:1fr}.builder-live-photo,.builder-live-photo>img{min-height:205px}.level-choices{grid-template-columns:repeat(2,1fr)}.choice-card:last-child{grid-column:1/-1}.star-choices{grid-template-columns:repeat(5,1fr);gap:.25rem}.star-choice{min-width:0;padding:.2rem}.star-choice span{font-size:.55rem}.photo-capture-row{grid-template-columns:1fr}.photo-frame{max-width:210px;width:100%;margin:0 auto}.photo-actions{justify-items:center;text-align:center}.switch-row{grid-template-columns:1fr auto}.builder-save-bar{display:grid}.builder-save-bar>*{width:100%}.saved-product-card{grid-template-columns:70px 1fr}.saved-product-thumb{width:70px;height:70px}.saved-product-facts span:last-child{display:none}.local-only-badge{margin-top:.5rem}.founder-shelf .heading-row{display:block}.dialog-photo{min-height:250px}}

/* iPad/tablet portrait navigation bridge: desktop nav hides at 980px, so the touch dock must start there too. */
@media (min-width: 761px) and (max-width: 980px) {
  .app-shell { padding-bottom: 6.4rem; }
  .mobile-dock { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; position: fixed; z-index: 50; left: max(.75rem, env(safe-area-inset-left)); right: max(.75rem, env(safe-area-inset-right)); bottom: max(.65rem, env(safe-area-inset-bottom)); max-width: 520px; margin-inline: auto; padding: .38rem; border-radius: 1.35rem; background: rgba(255,253,248,.94); border: 1px solid rgba(201,161,92,.28); box-shadow: 0 14px 32px rgba(113,71,47,.17); backdrop-filter: blur(12px); }
  .mobile-dock a { min-height: 58px; display: grid; place-items: center; align-content: center; gap: .15rem; border-radius: 1rem; color: var(--muted); text-decoration: none; font-weight: 900; }
  .mobile-dock a > span { font-size: 1.08rem; }
  .mobile-dock small { font-size: .66rem; font-weight: 900; }
  .mobile-dock a.is-active { background: linear-gradient(180deg, #F5B9BC, var(--pink)); color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.38), 0 5px 12px rgba(217,102,120,.18); }
}

/* Checkpoint 4 — customer-facing mock shop */
.shop-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.25rem; }
.shop-toolbar .filter-shell { flex:1; min-width:0; padding-bottom:.65rem; }
.shop-result-count { flex:0 0 auto; margin-bottom:.45rem; padding:.42rem .62rem; border-radius:999px; background:rgba(255,253,248,.84); border:1px solid var(--line); color:var(--sage-deep); font-size:.68rem; font-weight:900; white-space:nowrap; }
.filter-chip { cursor:pointer; transition:transform .15s ease, background .15s ease, box-shadow .15s ease; }
.filter-chip:hover { transform:translateY(-1px); box-shadow:0 5px 12px rgba(113,71,47,.06); }
.filter-chip.hero-filter { border-color:rgba(201,161,92,.42); }
.shop-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.shop-product-card { min-width:0; overflow:hidden; border-radius:1.45rem; background:rgba(255,253,248,.94); border:1px solid rgba(201,161,92,.23); box-shadow:var(--shadow-soft); transition:transform .18s ease, box-shadow .18s ease; }
.shop-product-card:hover { transform:translateY(-3px); box-shadow:0 14px 31px rgba(113,71,47,.11); }
.shop-product-image { min-height:245px; position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.72) 0 31%,transparent 32%),linear-gradient(145deg,#F9DDD9,#F2E4C4); }
.shop-product-image[data-level="common"] { background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.78) 0 31%,transparent 32%),linear-gradient(145deg,#F5EEE5,#E9DCCF); }
.shop-product-image[data-level="lucky"] { background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.72) 0 31%,transparent 32%),linear-gradient(145deg,#FBE1E0,#EDA2A7); }
.shop-product-image[data-level="rare"] { background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.7) 0 31%,transparent 32%),linear-gradient(145deg,#EBF1E4,#A9BC96); }
.shop-product-image[data-level="super"] { background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.72) 0 31%,transparent 32%),linear-gradient(145deg,#FBEDC8,#D4B066); }
.shop-product-image[data-level="ultra"] { background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.75) 0 31%,transparent 32%),linear-gradient(145deg,#F9D8DD,#D996A4 55%,#C7B17C); }
.shop-product-image.has-photo { background:#F3EEE7; }
.shop-product-image.has-photo img { width:100%; height:245px; object-fit:cover; }
.shop-hero-ribbon { position:absolute; z-index:3; left:.75rem; top:.75rem; padding:.42rem .6rem; border-radius:999px; background:linear-gradient(180deg,#DAB96D,var(--gold)); color:white; font-size:.64rem; font-weight:900; box-shadow:0 6px 13px rgba(113,71,47,.13); }
.shop-bracelet-art { width:154px; height:154px; position:relative; transform:rotate(-7deg); }
.shop-bracelet-art i,.shop-bracelet-art b { position:absolute; width:31px; height:31px; border-radius:50%; border:3px solid rgba(255,255,255,.72); background:#FFF8E8; box-shadow:0 5px 10px rgba(113,71,47,.13), inset 0 2px 0 rgba(255,255,255,.8); }
.shop-bracelet-art i:nth-child(1){left:61px;top:-5px;background:#F7D4D5}.shop-bracelet-art i:nth-child(2){right:10px;top:19px;background:#E9F0E1}.shop-bracelet-art i:nth-child(3){right:-5px;top:61px;background:#F7DF9E}.shop-bracelet-art i:nth-child(4){right:13px;bottom:11px;background:#F4BCBF}.shop-bracelet-art i:nth-child(5){left:61px;bottom:-5px;background:#E7EEDC}.shop-bracelet-art i:nth-child(6){left:11px;bottom:14px;background:#F6DB97}.shop-bracelet-art i:nth-child(7){left:-5px;top:61px;background:#F5C7CA}.shop-bracelet-art i:nth-child(8){left:15px;top:16px;background:#E4EDD9}
.shop-bracelet-art b { right:-11px; top:58px; width:38px; height:38px; display:grid; place-items:center; color:white; background:var(--gold); font-size:.9rem; }
.shop-product-body { padding:1rem; }
.shop-card-badges { min-height:30px; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.shop-star-vote { color:#A87A28; font-size:.6rem; font-weight:900; }
.shop-product-body h3 { margin:.55rem 0 .3rem; font-size:1.22rem; }
.shop-product-body>p { min-height:3em; margin:0; color:var(--muted); font-size:.75rem; line-height:1.42; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.shop-product-foot { display:grid; gap:.7rem; margin-top:.9rem; }
.shop-price { color:var(--pink-deep); font-size:1.2rem; }
.shop-card-actions { display:grid; grid-template-columns:.85fr 1.15fr; gap:.42rem; }
.shop-secondary-action,.shop-add-action { min-height:46px; border-radius:.9rem; padding:.55rem .5rem; font-size:.68rem; font-weight:900; cursor:pointer; }
.shop-secondary-action { border:1px solid rgba(156,175,136,.4); background:#F8FBF5; color:var(--sage-deep); }
.shop-add-action { border:0; background:linear-gradient(180deg,#EE9BA4,var(--pink-deep)); color:white; box-shadow:0 6px 14px rgba(217,102,120,.18); }
.filter-empty { min-height:300px; display:grid; place-items:center; align-content:center; text-align:center; margin-top:.3rem; padding:2rem; border-radius:1.5rem; background:rgba(255,253,248,.82); border:2px dashed #E0D3C2; }
.filter-empty>span { color:var(--gold); font-size:2.4rem; }.filter-empty h2{margin:.35rem 0;font-size:1.65rem}.filter-empty p{margin:.15rem 0 1rem;color:var(--muted)}

.home-live-hero { min-height:255px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-radius:1.45rem; background:#FFFDF8; border:1px solid rgba(201,161,92,.24); box-shadow:var(--shadow-soft); }
.home-hero-visual { min-height:255px; display:grid; place-items:center; position:relative; overflow:hidden; background:linear-gradient(145deg,#F5D6D8,#ECA2AA 52%,#D7BA75); }
.home-hero-visual.has-photo img { width:100%; height:100%; min-height:255px; object-fit:cover; }
.home-hero-copy { align-self:center; padding:1.35rem; }.home-hero-copy h3{margin:.6rem 0 .35rem;font-size:1.45rem}.home-hero-copy>p{margin:0 0 .55rem;color:var(--muted);line-height:1.45}.home-hero-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.8rem}.home-hero-actions .primary-button,.home-hero-actions .secondary-button{min-height:48px;padding:.65rem .85rem;font-size:.72rem}
.preview-products:not([data-empty="true"]) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.preview-products:not([data-empty="true"]) .shop-product-image { min-height:205px; }.preview-products:not([data-empty="true"]) .shop-product-image.has-photo img{height:205px}.preview-products:not([data-empty="true"]) .shop-product-card{box-shadow:0 8px 21px rgba(113,71,47,.07)}

.shop-toast { position:fixed; z-index:100; left:50%; top:max(1rem,env(safe-area-inset-top)); transform:translateX(-50%); width:min(520px,calc(100% - 2rem)); padding:.75rem 1rem; border-radius:999px; background:#EDF3E7; border:1px solid rgba(111,135,94,.3); color:var(--sage-deep); text-align:center; font-size:.78rem; font-weight:900; box-shadow:0 14px 32px rgba(113,71,47,.16); }
.customer-dialog { width:min(900px,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); padding:0; border:0; border-radius:1.7rem; background:#FFFDF8; color:var(--ink); box-shadow:0 28px 85px rgba(69,45,31,.34); overflow:auto; }
.customer-dialog::backdrop { background:rgba(69,54,46,.48); backdrop-filter:blur(5px); }
.shop-detail-layout { display:grid; grid-template-columns:minmax(330px,.95fr) minmax(0,1.05fr); min-height:560px; }
.shop-detail-layout>[data-shop-detail-visual] { min-height:100%; }
.shop-detail-image { min-height:100%; height:100%; display:grid; place-items:center; position:relative; overflow:hidden; background:linear-gradient(145deg,#F8DFDD,#EAA1A7 48%,#D8BE7F); }
.shop-detail-image.has-photo img { width:100%; height:100%; min-height:560px; object-fit:cover; }
.shop-detail-copy { align-self:center; padding:2rem 1.7rem; }.detail-badges{display:flex;gap:.4rem;flex-wrap:wrap}.shop-detail-copy h2{margin:.7rem 0 .35rem;font-size:2.15rem}.shop-detail-description{margin:0;color:var(--muted);line-height:1.55}.shop-detail-price{display:block;margin:.65rem 0;color:var(--pink-deep);font-size:1.45rem}.shop-detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:.48rem;margin:.85rem 0}.shop-detail-fact{padding:.72rem;border-radius:.9rem;background:#F9F3EA}.shop-detail-fact strong{display:block;color:var(--brown);font-size:.61rem;text-transform:uppercase;letter-spacing:.055em}.shop-detail-fact span{display:block;margin-top:.25rem;color:var(--muted);font-size:.72rem;line-height:1.35}.detail-mascot-note{min-height:78px;display:grid;grid-template-columns:70px 1fr;align-items:center;gap:.55rem;margin:.8rem 0;padding:.5rem .7rem;border-radius:1rem;background:linear-gradient(90deg,var(--pink-soft),rgba(229,236,217,.75))}.detail-mascot-note img{width:68px;height:70px;object-fit:contain;object-position:bottom}.detail-mascot-note p{margin:0;color:var(--muted);font-size:.69rem;line-height:1.4}.detail-mascot-note strong{display:block;color:var(--sage-deep);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em}.detail-add-button{width:100%;margin-top:.3rem}.practice-detail-note{margin:.55rem 0 0;text-align:center;color:#8B7B70;font-size:.61rem;line-height:1.4}

.basket-dialog { width:min(760px,calc(100% - 2rem)); }
.basket-dialog-header { min-height:130px; display:grid; grid-template-columns:1fr 115px; align-items:center; padding:1.2rem 1.4rem .7rem; background:linear-gradient(115deg,var(--pink-soft),rgba(255,253,248,.96) 55%,var(--sage-soft)); border-bottom:1px solid var(--line); }.basket-dialog-header h2{font-size:2rem}.basket-dialog-header p:not(.eyebrow){margin:.3rem 0 0;color:var(--muted);font-size:.72rem}.basket-dialog-header img{width:120px;height:110px;object-fit:contain;object-position:bottom}
.basket-items { display:grid; gap:.55rem; padding:1rem 1.25rem; max-height:48vh; overflow:auto; }.basket-empty-state{min-height:220px;display:grid;place-items:center;align-content:center;text-align:center;color:var(--muted)}.basket-empty-state>span{font-size:3rem;color:var(--pink)}.basket-empty-state h3{margin:.25rem 0;font-size:1.3rem}.basket-empty-state p{margin:.15rem 0;font-size:.75rem}
.basket-row { display:grid; grid-template-columns:105px 1fr; gap:.8rem; align-items:center; padding:.65rem; border-radius:1.05rem; background:#FCF8F1; border:1px solid rgba(201,161,92,.19); }.basket-thumb{width:105px;height:105px;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:.85rem;background:linear-gradient(145deg,#F8E0DE,#E8EEDC)}.basket-thumb.has-photo img{width:100%;height:100%;object-fit:cover}.basket-thumb .shop-bracelet-art{transform:scale(.48) rotate(-7deg)}.basket-thumb .shop-hero-ribbon{font-size:.48rem;left:.25rem;top:.25rem;padding:.25rem .35rem}.basket-row-copy h3{margin:.32rem 0 .18rem;font-size:1rem}.basket-line-price{color:var(--pink-deep);font-size:.85rem}.unique-note{display:block;margin-top:.2rem;color:#8A6B2F;font-size:.58rem}.basket-row-controls{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-top:.5rem}.quantity-button{width:38px;height:38px;border-radius:.7rem;border:1px solid #DED2C2;background:#FFFDF8;color:var(--brown);font-size:1.05rem;font-weight:900;cursor:pointer}.quantity-button:disabled{opacity:.35;cursor:not-allowed}.quantity-number{min-width:28px;text-align:center;font-weight:900}.basket-remove{min-height:38px;margin-left:.25rem;padding:.4rem .55rem;border-radius:.7rem;border:0;background:#F9E7E9;color:#A44D5A;font-size:.62rem;font-weight:900;cursor:pointer}.basket-summary{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.3rem;border-top:1px dashed #DECFBB;border-bottom:1px dashed #DECFBB;background:#FFF9EF}.basket-summary span{color:var(--muted);font-size:.75rem;font-weight:900}.basket-summary strong{color:var(--pink-deep);font-size:1.45rem}.basket-actions{display:flex;justify-content:space-between;gap:.6rem;padding:1rem 1.25rem .4rem}.basket-actions>*{flex:1}.safe-commerce-note{margin:.35rem 1.25rem 1rem;text-align:center;color:#8B7D72;font-size:.62rem;line-height:1.45}

.checkout-dialog { width:min(760px,calc(100% - 2rem)); }.checkout-dialog form{padding:1.4rem}.checkout-header{text-align:center;padding:.4rem .5rem 1rem}.checkout-header h2{font-size:2.2rem}.checkout-header>p:not(.eyebrow){max-width:570px;margin:.45rem auto 0;color:var(--muted);font-size:.76rem;line-height:1.5}.pretend-stamp{display:inline-flex;margin-bottom:.55rem;padding:.35rem .55rem;border-radius:.5rem;border:2px dashed #B48A43;color:#99712E;background:#FFF3CF;font-size:.58rem;font-weight:950;letter-spacing:.09em;transform:rotate(-2deg)}
.checkout-choice-card{margin:0 0 .7rem;padding:.9rem;border:1px solid rgba(201,161,92,.22);border-radius:1.05rem;background:#FCF8F2}.checkout-choice-card legend{padding:0 .35rem;color:var(--brown);font-weight:900}.checkout-choice-card>p{margin:.15rem 0 .65rem;color:var(--muted);font-size:.65rem}.checkout-choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}.checkout-choice-grid label,.delivery-choices label{position:relative;cursor:pointer}.checkout-choice-grid input,.delivery-choices input{position:absolute;opacity:0;pointer-events:none}.checkout-choice-grid span{min-height:58px;display:grid;place-items:center;padding:.4rem;border-radius:.8rem;border:1px solid #DED1C0;background:#FFFDF8;color:var(--muted);font-size:.65rem;font-weight:900;text-align:center}.checkout-choice-grid input:checked+span{border-color:var(--pink);background:var(--pink-soft);color:var(--pink-deep);box-shadow:inset 0 0 0 1px rgba(217,102,120,.15)}
.delivery-choices{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.delivery-choices label>span{min-height:78px;display:grid;align-content:center;padding:.65rem .75rem;border-radius:.85rem;border:1px solid #DED1C0;background:#FFFDF8}.delivery-choices strong{color:var(--brown);font-size:.72rem}.delivery-choices small{margin-top:.2rem;color:var(--muted);font-size:.6rem}.delivery-choices input:checked+span{border-color:var(--sage);background:var(--sage-soft);box-shadow:inset 0 0 0 1px rgba(111,135,94,.14)}
.checkout-summary-card{margin:.7rem 0;padding:.9rem;border-radius:1rem;background:linear-gradient(120deg,#FFF7EA,#F8F1E6);border:1px dashed #D8C5AA}.checkout-summary-card h3{margin:0 0 .55rem;font-size:.9rem}.checkout-summary-row,.checkout-summary-total{display:flex;justify-content:space-between;gap:1rem;padding:.32rem 0;color:var(--muted);font-size:.68rem}.checkout-summary-row strong{color:var(--brown)}.checkout-summary-total{margin-top:.35rem;padding-top:.55rem;border-top:1px dashed #D6C6B1;font-weight:900}.checkout-summary-total strong{color:var(--pink-deep);font-size:1rem}.checkout-buttons{display:flex;gap:.55rem;margin-top:.9rem}.checkout-buttons>*{flex:1}.centred-note{margin:.65rem 0 0}.place-practice-order{min-width:210px}

.confirmation-dialog { width:min(720px,calc(100% - 1.4rem)); overflow:hidden; background:radial-gradient(circle at 50% 0,rgba(246,229,185,.55),transparent 36%),linear-gradient(150deg,#FFFDF8,#FFF6EB); }.confirmation-sparkles{text-align:center;padding:1.1rem 1rem 0;color:var(--gold);font-size:1.25rem;letter-spacing:1rem;animation:twinkle 2.6s ease-in-out infinite}.confirmation-characters{height:155px;display:flex;justify-content:center;align-items:flex-end;gap:-.4rem;overflow:hidden}.confirmation-characters img{width:165px;height:180px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 8px 10px rgba(113,71,47,.08))}.confirmation-copy-wrap{padding:.2rem 1.5rem 1.5rem;text-align:center}.confirmation-copy-wrap h2{max-width:560px;margin:.3rem auto;font-size:2.1rem}.confirmation-copy-wrap>p:not(.eyebrow):not(.confirmation-meta){max-width:560px;margin:.5rem auto;color:var(--muted);font-size:.76rem;line-height:1.5}.practice-reference{max-width:360px;margin:.85rem auto;padding:.7rem;border-radius:1rem;background:var(--pink-soft);border:1px solid rgba(217,102,120,.2)}.practice-reference small{display:block;color:var(--muted);font-size:.58rem;text-transform:uppercase;letter-spacing:.07em}.practice-reference strong{display:block;margin-top:.2rem;color:var(--pink-deep);font-size:1.05rem;letter-spacing:.04em}.confirmation-meta{margin:.5rem auto .9rem;color:var(--sage-deep);font-size:.68rem;font-weight:900}

@media (max-width: 980px) {
  .shop-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .preview-products:not([data-empty="true"]) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .preview-products:not([data-empty="true"]) .shop-product-card:last-child { grid-column:1/-1; display:grid; grid-template-columns:.85fr 1.15fr; }
  .preview-products:not([data-empty="true"]) .shop-product-card:last-child .shop-product-image { min-height:190px; }.preview-products:not([data-empty="true"]) .shop-product-card:last-child .shop-product-image.has-photo img{height:190px}
}

@media (max-width: 760px) {
  .shop-toolbar { display:block; }.shop-result-count{display:inline-flex;margin:.05rem 0 .65rem}.shop-product-grid{gap:.7rem}.shop-product-image{min-height:215px}.shop-product-image.has-photo img{height:215px}.shop-product-body{padding:.8rem}.shop-card-actions{grid-template-columns:1fr}.shop-secondary-action,.shop-add-action{min-height:48px}
  .shop-detail-layout{grid-template-columns:1fr;min-height:0}.shop-detail-layout>[data-shop-detail-visual]{min-height:270px}.shop-detail-image{min-height:270px;height:270px}.shop-detail-image.has-photo img{min-height:270px;height:270px}.shop-detail-copy{padding:1.2rem}.shop-detail-copy h2{font-size:1.75rem}.shop-detail-facts{grid-template-columns:1fr 1fr}
  .home-live-hero{grid-template-columns:1fr 1fr}.home-hero-visual,.home-hero-visual.has-photo img{min-height:215px}.home-hero-copy{padding:1rem}.home-hero-copy h3{font-size:1.2rem}.home-hero-actions{display:grid}.home-hero-actions>*{width:100%}
  .basket-dialog-header{grid-template-columns:1fr 90px;padding-left:1rem}.basket-dialog-header img{width:90px;height:95px}.basket-items{padding:.75rem}.basket-row{grid-template-columns:82px 1fr}.basket-thumb{width:82px;height:82px}.basket-actions{padding:.8rem .75rem .3rem}.safe-commerce-note{margin-inline:.75rem}
  .checkout-dialog form{padding:1rem}.checkout-choice-grid{grid-template-columns:repeat(2,1fr)}.checkout-buttons{display:grid}.checkout-buttons>*{width:100%}
}

@media (max-width: 540px) {
  .shop-product-grid{grid-template-columns:1fr}.shop-product-image{min-height:235px}.shop-product-image.has-photo img{height:235px}.shop-product-body>p{min-height:0}.shop-card-actions{grid-template-columns:.9fr 1.1fr}
  .preview-products:not([data-empty="true"]){grid-template-columns:1fr}.preview-products:not([data-empty="true"]) .shop-product-card:last-child{grid-column:auto;display:block}
  .home-live-hero{grid-template-columns:1fr}.home-hero-visual,.home-hero-visual.has-photo img{min-height:210px;height:210px}.home-hero-copy{text-align:center}.home-hero-actions{display:flex;justify-content:center}.home-hero-actions>*{width:auto;flex:1}
  .shop-detail-facts{grid-template-columns:1fr}.detail-mascot-note{grid-template-columns:58px 1fr}.detail-mascot-note img{width:58px}
  .basket-dialog{width:calc(100% - .7rem)}.basket-dialog-header{grid-template-columns:1fr 70px}.basket-dialog-header img{width:72px}.basket-row{grid-template-columns:70px 1fr;gap:.55rem}.basket-thumb{width:70px;height:70px}.basket-row-controls{gap:.25rem}.quantity-button{width:40px;height:40px}.basket-remove{margin-left:0}.basket-actions{display:grid}.basket-actions>*{width:100%}
  .checkout-dialog{width:calc(100% - .7rem)}.delivery-choices{grid-template-columns:1fr}.confirmation-characters{height:130px}.confirmation-characters img{width:135px;height:150px}.confirmation-copy-wrap{padding-inline:1rem}.confirmation-copy-wrap h2{font-size:1.7rem}
}


/* Checkpoint 5 — robustness, safe reset and touch polish */
.text-button { min-height: 44px; }
.mini-action { min-height: 44px; }
.quantity-button { width: 44px; height: 44px; }
.basket-remove { min-height: 44px; padding: .5rem .65rem; }
.reset-practice-panel {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  border: 1px dashed rgba(169,84,94,.34);
  border-radius: 1.2rem;
  background: rgba(252,240,241,.72);
}
.reset-practice-panel strong { display:block; color:#9D4E58; font-size:.82rem; }
.reset-practice-panel p { max-width: 720px; margin:.28rem 0 0; color:var(--muted); font-size:.68rem; line-height:1.45; }
.reset-practice-button {
  min-height: 48px;
  padding: .65rem .9rem;
  border: 1px solid #E6BFC4;
  border-radius: .9rem;
  background: #FFF9F9;
  color: #9D4E58;
  font-weight: 900;
  cursor: pointer;
}
.reset-practice-button:hover { background:#FCEBED; }
@media (max-width: 760px) {
  .reset-practice-panel { grid-template-columns: 1fr; }
  .reset-practice-button { width:100%; }
}
@media (max-width: 540px) {
  .quantity-button { width:44px; height:44px; }
}