:root {
  --orange: #EE4D2D;
  --orange-deep: #D63A1C;
  --navy: #14213D;
  --gold: #F5B820;
  --gold-deep: #E0A30F;
  --gold-hi: #FFE27D;
  --gold-edge: #C98F08;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #ECEFF6;
  --fg: #14213D;
  --muted: #5A647C;
  --border: #DEE3EE;
  --red: #D91E36;
  --red-soft: #FDECEE;
  --green: #0E8F47;
  --green-soft: #E5F6EC;
  --banner-bg: #14213D;
  --banner-fg: #FFFFFF;
  --tab-bg: #E6EAF3;
  --tone-snacks: #FDF1D0;
  --tone-pastes: #FFE4DB;
  --tone-sauces: #FDE0E4;
  --tone-baking: #E3ECFA;
  --tone-spreads: #F1E4D6;
  --shadow: 0 6px 20px rgba(20, 33, 61, 0.08);
  --shadow-lg: 0 14px 34px rgba(20, 33, 61, 0.16);
  color-scheme: light;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--orange); }
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--orange); color: #fff; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; }
.logo { font-size: 19px; letter-spacing: -0.02em; text-decoration: none; display: flex; align-items: baseline; }
.logo b { font-weight: 800; }
.logo span { font-weight: 500; opacity: 0.92; }
.nav { display: none; gap: 6px; align-items: center; }
.nav a { text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 999px; transition: background .2s; }
.nav a:hover { background: rgba(255, 255, 255, 0.18); }
.cartbtn { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 700; font-size: 14px; padding: 9px 14px; border-radius: 999px; transition: background .2s, transform .2s; }
.cartbtn:hover { background: rgba(255, 255, 255, 0.3); }
.cartbtn .count { background: var(--gold); color: var(--navy); min-width: 22px; height: 22px; border-radius: 11px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; padding: 0 6px; }
.bump { animation: bump .45s ease; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 70% { transform: scale(0.96); } 100% { transform: scale(1); } }

/* hero */
/* batik cover: crisp vector tile, 85% transparent over the orange gradient */
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--orange) 0%, #FF7A3D 100%); color: #fff; padding-block: 22px 62px; }
.hero::before { content: ""; position: absolute; inset: 0; background: url("/batik.svg") center / 180px 180px repeat; opacity: 0.15; }
.herocard { max-width: 700px; margin-inline: auto; text-align: center; padding: 6px 0 4px; animation: rise .6s ease both; }
.hl { display: block; }
.hl1 { font-size: clamp(34px, 10.4vw, 64px); line-height: 1.02; font-weight: 800; letter-spacing: -0.02em; animation: rise .6s .05s ease both; }
.hl2 { margin-top: 6px; font-size: clamp(22px, 6.6vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; animation: rise .6s .15s ease both; }
.hl3 { margin-top: 8px; font-size: clamp(16px, 4.6vw, 26px); line-height: 1.2; font-weight: 800; letter-spacing: 0.01em; color: #fff; text-shadow: 0 2px 10px rgba(20, 33, 61, 0.35); animation: rise .6s .25s ease both; }
.vp { margin: 0 0 14px; font-size: clamp(15px, 4vw, 22px); line-height: 1.35; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(20, 33, 61, 0.35); text-wrap: balance; animation: rise .6s ease both; }

.hero .wrap { position: relative; z-index: 1; }

.hero h1 { margin: 0; }

.fdw { position: relative; display: inline-block; }
.gtext { display: inline-block; background: linear-gradient(100deg, #FFC928 0%, #FFF4B8 22%, #F5B820 44%, #FFE27D 66%, #FFC928 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: goldtext 3.2s linear infinite; filter: drop-shadow(0 3px 0 rgba(20, 33, 61, 0.55)) drop-shadow(0 0 12px rgba(255, 226, 125, 0.4)); }
@keyframes goldtext { from { background-position: 0% 0; } to { background-position: 260% 0; } }
.spark { position: absolute; top: -0.35em; right: -0.6em; font-size: 0.6em; color: #fff; animation: twinkle 2s ease-in-out infinite; pointer-events: none; }
.spark.s2 { top: auto; bottom: -0.15em; left: -0.5em; right: auto; font-size: 0.42em; color: var(--gold-hi); animation-delay: -1s; }
@keyframes twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }

@keyframes pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* suburb checker */
.checker { position: relative; z-index: 2; margin-top: -38px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 16px; }
.checker h2 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.checker h2 .i { color: var(--orange); }
.searchrow { position: relative; display: flex; gap: 8px; margin-top: 12px; }
.field { position: relative; flex: 1; min-width: 0; }
.field .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.field input { width: 100%; height: 50px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg); color: var(--fg); font: inherit; font-size: 16px; padding: 0 14px 0 44px; transition: border-color .2s, box-shadow .2s; }
.field input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(238, 77, 45, 0.18); }
.field input::placeholder { color: var(--muted); }
.sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 5; margin: 0; list-style: none; }
.sugg li { padding: 10px 12px; border-radius: 10px; cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.sugg li small { color: var(--green); font-weight: 700; }
.sugg li[aria-selected="true"], .sugg li:hover { background: var(--surface-2); }

.btn { position: relative; overflow: hidden; border: 0; border-radius: 14px; font-weight: 700; font-size: 15px; padding: 0 20px; height: 50px; background: var(--orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s; box-shadow: 0 4px 0 var(--orange-deep); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--orange-deep); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--orange-deep); }
.btn.ghost { background: var(--surface-2); color: var(--fg); box-shadow: none; }
.btn.ghost:hover { box-shadow: none; background: var(--border); }
.btn[disabled] { background: var(--surface-2); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

.result { margin-top: 12px; border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; animation: pop .35s ease both; }
.result[hidden] { display: none; }
.result .badge { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.result.ok { background: var(--green-soft); }
.result.ok .badge { background: var(--green); color: #fff; }
.result.ok strong { color: var(--green); }
.result.no { background: var(--red-soft); }
.result.no .badge { background: var(--red); color: #fff; }
.result.no strong { color: var(--red); }
.result p { font-size: 14px; color: var(--muted); margin-top: 2px; }
.result strong { font-size: 15px; display: block; }
.result a { font-weight: 700; color: var(--fg); }
details.all { margin-top: 12px; }
details.all summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 6px; }
details.all summary::-webkit-details-marker { display: none; }
details.all summary::after { content: "+"; font-size: 18px; line-height: 1; transition: transform .2s; }
details.all[open] summary::after { transform: rotate(45deg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 999px; padding: 6px 11px; font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s, transform .15s; }
.chip:hover { border-color: var(--green); background: var(--green-soft); transform: translateY(-1px); }

/* delivery banner */
.banner { margin-top: 14px; background: var(--banner-bg); color: var(--banner-fg); border-radius: 18px; padding: 14px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; position: relative; overflow: hidden; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(245, 184, 32, 0.16) 50%, transparent 70%); transform: translateX(-100%); animation: sweep 5s ease-in-out infinite; pointer-events: none; }
@keyframes sweep { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.truck { position: relative; overflow: hidden; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-deep) 100%); color: var(--navy); display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 0 var(--gold-edge); }
.truck .i { width: 26px; height: 26px; animation: drive 2.4s ease-in-out infinite; }
@keyframes drive { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
.banner .txt { flex: 1; min-width: 200px; position: relative; z-index: 1; }
.banner small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.banner strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.banner .when .d, .banner .when .tm { display: block; }
.banner .when .tm { font-size: 15px; font-weight: 700; color: var(--gold-hi); margin-top: 1px; }
.banner .by { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.banner .by .i { width: 16px; height: 16px; color: var(--gold); }

/* round header and countdown */
.round { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.round h2 { font-size: clamp(22px, 4vw, 30px); font-weight: 800; letter-spacing: -0.02em; }
.cd { display: flex; gap: 8px; align-items: center; }
.cd .lbl { font-size: 12px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 2px; display: flex; align-items: center; gap: 6px; }
.cd .lbl .i { width: 16px; height: 16px; }
.cd .u { background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); border-radius: 12px; min-width: 54px; padding: 6px 4px 5px; text-align: center; }
.cd .u b { display: block; font-size: 22px; line-height: 1.1; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.cd .u span { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.cd .u b.tick { animation: tick .3s ease; }
@keyframes tick { 0% { transform: translateY(-6px); opacity: 0.2; } 100% { transform: translateY(0); opacity: 1; } }
.cd.urgent .u { animation: throb 1.2s ease-in-out infinite; }
@keyframes throb { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 30, 54, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(217, 30, 54, 0); } }
.cd.closed .u { display: none; }
.cd.closed .lbl { color: var(--muted); font-size: 14px; }
.note { margin-top: 14px; background: var(--surface); border: 1px dashed var(--border); border-radius: 14px; padding: 10px 14px; font-size: 13px; color: var(--muted); }
.note b { color: var(--fg); }

/* tabs */
.tabswrap { margin-top: 16px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.tabswrap::-webkit-scrollbar { display: none; }
.tabs { position: relative; display: inline-flex; gap: 2px; padding: 4px; background: var(--tab-bg); border-radius: 999px; min-width: max-content; }
.tab-ind { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-deep) 100%); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 0 var(--gold-edge), 0 6px 14px rgba(245, 184, 32, 0.45); overflow: hidden; transition: transform .35s cubic-bezier(.3, 1.3, .5, 1), width .35s cubic-bezier(.3, 1.3, .5, 1); z-index: 0; }
.tab-ind::after, footer .ch::after, .truck::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.8), transparent); transform: translateX(-130%) skewX(-18deg); animation: gshine 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes gshine { 0% { transform: translateX(-130%) skewX(-18deg); } 45%, 100% { transform: translateX(260%) skewX(-18deg); } }
.tab { position: relative; z-index: 1; border: 0; background: transparent; color: var(--fg); font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; transition: color .2s, transform .2s; }
.tab:hover { transform: translateY(-1px); }
.tab .n { font-size: 11px; font-weight: 800; background: rgba(20, 33, 61, 0.1); border-radius: 999px; padding: 1px 7px; transition: background .2s; }
.tab[aria-selected="true"] { color: var(--navy); }
.tab[aria-selected="true"] .n { background: rgba(20, 33, 61, 0.16); }

/* product grid */
.grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; animation: rise .5s calc(var(--i, 0) * 55ms) ease both; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--orange) 45%, var(--border)); }
.card.out { animation: fade .16s ease forwards; }
@keyframes fade { to { opacity: 0; transform: scale(0.96); } }
.photo { position: relative; aspect-ratio: 1 / 0.82; max-width: 100%; background: var(--tone); display: grid; place-items: center; overflow: hidden; }
.photo .em { font-size: clamp(44px, 12vw, 64px); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.15)); }
.card:hover .photo .em { transform: scale(1.14) rotate(-4deg); }
.tag { z-index: 2; position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--red); color: #fff; overflow: hidden; }
.tag.prem { background: var(--navy); color: var(--gold); }
.tag.hot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); transform: translateX(-120%); animation: sweep2 2.8s ease-in-out infinite; }
@keyframes sweep2 { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
/* product photo carousel */
.photo.has { display: block; background: var(--surface-2); }
.slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slides img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; display: block; }
.cnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.92); color: var(--navy); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(20, 33, 61, 0.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.cnav.prev { left: 8px; } .cnav.next { right: 8px; }
.cnav:hover { transform: translateY(-50%) scale(1.1); }
@media (hover: hover) { .card:hover .cnav, .photo:focus-within .cnav { opacity: 1; pointer-events: auto; } }
.dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; z-index: 2; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.65); box-shadow: 0 0 3px rgba(0, 0, 0, 0.45); transition: width .25s, background .25s; }
.dots i.on { width: 16px; background: #fff; }
.body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.name { font-weight: 700; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; overflow-wrap: anywhere; }
.meta { font-size: 12px; color: var(--muted); min-height: 1.5em; }
.price { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price.red { color: var(--red); }
.price.green { color: var(--green); }
.stock { display: flex; flex-direction: column; gap: 5px; }
.stock .t { font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.stock .t.red { color: var(--red); }
.stock .t.green { color: var(--green); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.t.red .dot { animation: ping 1.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; transform-origin: left; animation: grow .9s .2s ease both; }
.bar i.red { background: linear-gradient(90deg, var(--red), #FF6B3D); }
.bar i.green { background: var(--green); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.act { margin-top: auto; padding-top: 6px; }
.add { width: 100%; height: 42px; font-size: 14px; border-radius: 12px; box-shadow: 0 3px 0 var(--orange-deep); }
.step { display: flex; align-items: center; justify-content: space-between; height: 42px; border-radius: 12px; border: 2px solid var(--orange); overflow: hidden; transition: border-color .2s; }
.step button { width: 42px; height: 100%; border: 0; background: transparent; color: var(--orange); display: grid; place-items: center; transition: background .15s; }
.step button:hover { background: color-mix(in srgb, var(--orange) 14%, transparent); }
.step button:active { background: color-mix(in srgb, var(--orange) 28%, transparent); }
.step button:disabled { opacity: 0.3; cursor: not-allowed; }
.step button:disabled:hover { background: transparent; }
.step.zero { border-color: var(--border); }
.step.zero [data-inc] { background: var(--orange); color: #fff; }
.step.zero [data-inc]:hover { background: var(--orange-deep); }
.step output { min-width: 28px; text-align: center; }
.step output { font-weight: 800; font-variant-numeric: tabular-nums; }
.soldout { opacity: 0.6; }

/* how it works */
.how { margin-top: 38px; display: grid; gap: 12px; grid-template-columns: 1fr; }
.how h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.steps { display: grid; gap: 10px; grid-template-columns: 1fr; }
.s { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; gap: 12px; align-items: flex-start; transition: transform .2s, box-shadow .2s; }
.s:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.s .ic { position: relative; overflow: hidden; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-deep) 100%); color: var(--navy); display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 0 var(--gold-edge); }
.s b { display: block; font-size: 14px; }
.s span { font-size: 13px; color: var(--muted); }

footer { margin-top: 40px; background: var(--navy); color: #E7EBF5; padding-block: 28px 120px; }
footer .wrap { display: grid; gap: 14px; }
footer .brand { font-size: 18px; font-weight: 800; color: #fff; }
footer p { font-size: 13px; color: #B7C0D6; max-width: 60ch; }
footer .ch { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-deep) 100%); color: var(--navy); font-weight: 800; padding: 11px 18px; border-radius: 999px; text-decoration: none; width: fit-content; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 0 var(--gold-edge), 0 8px 18px rgba(245, 184, 32, 0.35); transition: transform .2s, box-shadow .2s; }
footer .ch:hover { transform: translateY(-2px) scale(1.02); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 5px 0 var(--gold-edge), 0 12px 22px rgba(245, 184, 32, 0.45); }
footer .num { color: #fff; font-weight: 700; user-select: all; }

/* cart bar and drawer */
.bar-cart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); transform: translateY(120%); transition: transform .4s cubic-bezier(.3, 1.2, .5, 1); pointer-events: none; }
.bar-cart.show { transform: translateY(0); }
.bar-cart .in { pointer-events: auto; max-width: 720px; margin-inline: auto; background: var(--navy); color: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); padding: 10px 10px 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bar-cart .sum { min-width: 0; }
.bar-cart .sum small { display: block; font-size: 12px; color: #B7C0D6; }
.bar-cart .sum b { font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }
.bar-cart .btn { height: 46px; }
.scrim { position: fixed; inset: 0; background: rgba(8, 14, 28, 0.55); z-index: 40; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.scrim.open { opacity: 1; visibility: visible; }
.drawer { position: fixed; z-index: 41; background: var(--surface); color: var(--fg); display: flex; flex-direction: column; visibility: hidden; transition: transform .35s cubic-bezier(.3, 1, .4, 1), visibility .35s; left: 0; right: 0; bottom: 0; max-height: 88dvh; border-radius: 22px 22px 0 0; transform: translateY(105%); padding-bottom: env(safe-area-inset-bottom, 0px); }
.drawer.open { transform: translateY(0); visibility: visible; }
.dh { display: flex; justify-content: space-between; align-items: center; padding: 16px max(18px, env(safe-area-inset-left, 0px)) 8px; }
.dh h2 { font-size: 20px; font-weight: 800; }
.x { border: 0; background: var(--surface-2); color: var(--fg); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; transition: transform .2s; }
.x:hover { transform: rotate(90deg); }
.items { overflow-y: auto; padding: 4px max(18px, env(safe-area-inset-left, 0px)); display: grid; gap: 10px; }
.it { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.it .th { width: 52px; height: 52px; border-radius: 12px; background: var(--tone); display: grid; place-items: center; font-size: 28px; overflow: hidden; }
.it .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.it .nm { font-weight: 700; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.it .pr { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.it .step { height: 36px; }
.it .step button { width: 34px; }
.empty { text-align: center; color: var(--muted); padding: 34px 10px; }
.df { padding: 12px max(18px, env(safe-area-inset-left, 0px)) 16px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.tot { display: flex; justify-content: space-between; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.df small { color: var(--muted); font-size: 12px; }

@media (min-width: 720px) {
  .nav { display: flex; }
  .banner .when .d, .banner .when .tm { display: inline; }
  .banner .when .tm::before { content: "\00b7\00a0"; color: var(--gold); margin-left: 4px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hero { padding-block: 30px 72px; }
  .checker { padding: 20px 22px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .body { padding: 14px 14px 16px; }
  .drawer { left: auto; top: 0; right: 0; bottom: 0; width: 420px; max-height: none; border-radius: 22px 0 0 22px; transform: translateX(105%); padding-bottom: 0; }
  .drawer.open { transform: translateX(0); }
  .bar-cart { left: auto; right: 0; width: 100%; }
}
@media (min-width: 1000px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .banner strong { font-size: 19px; }
}
@media (max-width: 400px) {
  .price { font-size: 20px; }
  .cd .u { min-width: 46px; }
  .cd .u b { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- shared additions: states, forms, checkout, order page ---------- */
.state { margin-top: 18px; background: var(--surface-2); border-radius: 16px; padding: 22px 16px; text-align: center; color: var(--muted); font-weight: 600; }
.state a { color: var(--orange); font-weight: 800; }
.grid .state { grid-column: 1 / -1; }
.skeleton { height: 280px; border-radius: 18px; background: linear-gradient(100deg, var(--surface-2) 30%, #F6F8FC 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.hide { display: none !important; }

.pagehead { background: var(--orange); color: #fff; }
.pagehead .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 12px; }
.pagehead a.back { color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.pagehead a.back:hover { background: rgba(255, 255, 255, 0.3); }
.pagehead .logo { color: #fff; }
.pg { padding-block: 22px 60px; max-width: 960px; }
.pg h1 { font-size: clamp(24px, 5vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
.pg .sub { color: var(--muted); margin-top: 4px; }

.co { display: grid; gap: 16px; margin-top: 18px; grid-template-columns: 1fr; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); }
.panel h2 { font-size: 17px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.panel h2 .num { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--navy); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.fld { display: grid; gap: 6px; margin-bottom: 12px; }
.fld:last-child { margin-bottom: 0; }
.fld label, .fld .lab { font-size: 13px; font-weight: 700; }
.fld label small, .fld .lab small { font-weight: 500; color: var(--muted); }
.fld input, .fld select, .fld textarea { width: 100%; border: 2px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--fg); font: inherit; font-size: 16px; padding: 11px 13px; transition: border-color .2s, box-shadow .2s; }
.fld input, .fld select { height: 48px; }
.fld textarea { min-height: 76px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(238, 77, 45, 0.18); }
.fld.bad input, .fld.bad select, .fld.bad textarea { border-color: var(--red); }
.row2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
.hint { font-size: 12px; color: var(--muted); }
.feebox { border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; margin-top: 8px; }
.feebox.ok { background: var(--green-soft); color: var(--green); }
.feebox.warn { background: #FFF4D6; color: #8A5A00; }
.pay { display: grid; gap: 10px; }
.opt { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; border: 2px solid var(--border); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.opt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--orange); }
.opt b { display: block; font-size: 15px; }
.opt span { font-size: 13px; color: var(--muted); }
.opt:has(input:checked) { border-color: var(--orange); background: #FFF5F2; }
.opt.off { opacity: 0.55; cursor: not-allowed; }
.opt .badge { display: inline-block; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.chk { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; margin-top: 4px; }
.chk input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--orange); }
.sumline { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.sumline span:first-child { min-width: 0; overflow-wrap: anywhere; }
.sumline.t { font-weight: 800; font-size: 19px; border-bottom: 0; padding-top: 12px; }
.sumline.free span:last-child { color: var(--green); font-weight: 800; }
.errbox { background: var(--red-soft); color: var(--red); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.sticky { position: static; }
.btn.wide { width: 100%; height: 54px; font-size: 16px; margin-top: 14px; }
.safe { font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px; }

.status { border-radius: 18px; padding: 18px 16px; display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; }
.status .badge { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.status h1 { font-size: 22px; }
.status p { margin-top: 4px; color: var(--muted); font-size: 14px; }
.status.paid { background: var(--green-soft); } .status.paid .badge { background: var(--green); } .status.paid h1 { color: var(--green); }
.status.pend { background: #FFF4D6; } .status.pend .badge { background: var(--gold); color: var(--navy); }
.status.void { background: var(--surface-2); } .status.void .badge { background: var(--muted); }
.kv { display: grid; gap: 0; }
.kvr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.kvr:last-child { border-bottom: 0; }
.kvr .k { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.kvr .v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.cp { border: 0; background: var(--navy); color: #fff; font-weight: 700; font-size: 12px; padding: 7px 12px; border-radius: 999px; min-width: 64px; }
.cp:hover { background: #22345f; }
.vwrap { display: flex; align-items: center; gap: 10px; }
.stepsl { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.btn.green { background: #25A244; box-shadow: 0 4px 0 #1B7D33; }
.btn.green:hover { box-shadow: 0 6px 0 #1B7D33; }
.tm-red { color: var(--red); font-weight: 800; }

@media (min-width: 760px) {
  .co { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .row2 { grid-template-columns: 1fr 1fr; }
  .sticky { position: sticky; top: 76px; }
}