/* Self-hosted fonts (latin subset). Faces only download when the page uses them. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/anton-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/barlow-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-condensed-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-condensed-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800 900;
  font-display: swap;
  src: url(fonts/montserrat-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/russo-one-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Colour tokens (client brief: white background, black + yellow) ===== */
:root{
  --bg:#ffffff; --surface:#f4f4f2; --surface-2:#ebebe7; --ink:#000000; --ink-2:#3d3d3d; --muted:#6b6b6b;
  --line:#dcdcd6; --yellow:#f5d13b; --yellow-deep:#e2b800; --on-yellow:#000; --bar:#000; --on-bar:#fff;
  --green:#25d366; --danger:#c0262d;
  color-scheme: light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#121212; --surface:#1d1d1d; --surface-2:#262626; --ink:#fff; --ink-2:#d6d6d6; --muted:#a0a0a0; --line:#333; color-scheme:dark; }
}
:root[data-theme="dark"]{ --bg:#121212; --surface:#1d1d1d; --surface-2:#262626; --ink:#fff; --ink-2:#d6d6d6; --muted:#a0a0a0; --line:#333; color-scheme:dark; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; 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:60; background:var(--bar); }
img{ max-width:100%; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--yellow-deep); outline-offset:2px; }
.wrap{ width:min(1180px,100% - 32px); margin-inline:auto; }
h1,h2,h3{ font-family:"Montserrat","Arial Black",sans-serif; font-style:italic; font-weight:900; line-height:1.05; letter-spacing:-.01em; margin:0 0 .4em; }
h1{ font-size:clamp(2.2rem,6vw,4.2rem); }
h2{ font-size:clamp(1.7rem,4vw,2.6rem); }
h3{ font-size:1.25rem; font-weight:800; }
p{ margin:0 0 1em; max-width:68ch; }
.muted{ color:var(--muted); }
section{ padding:64px 0; }

/* ===== Buttons ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:6px; border:2px solid var(--ink); background:var(--ink); color:var(--bg); font-weight:700; text-decoration:none; cursor:pointer; font-size:1rem; }
.btn.yellow{ background:var(--yellow); color:#000; border-color:var(--yellow); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost-light{ background:transparent; color:#fff; border-color:#fff; }
.btn.block{ width:100%; }
.btn:active{ transform:translateY(1px); }

/* ===== Top bar + header ===== */
.ticker{ background:var(--yellow); color:#000; font-weight:700; font-size:.88rem; overflow:hidden; white-space:nowrap; }
.ticker-track{ display:inline-flex; gap:48px; padding:8px 0; animation:tick 28s linear infinite; }
.ticker-track span::before{ content:"■"; margin-right:12px; font-size:.6em; vertical-align:middle; }
@keyframes tick{ to{ transform:translateX(-50%); } }
header.site{ position:sticky; top:0; z-index:50; background:var(--bar); color:var(--on-bar); }
.head-row{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px; }
.logo{ font-family:"Montserrat",sans-serif; font-style:italic; font-weight:900; font-size:1.65rem; letter-spacing:-.02em; text-decoration:none; color:#fff; white-space:nowrap; }
.logo b{ color:var(--yellow); font-weight:900; }
nav.main{ display:flex; gap:4px; }
nav.main a{ color:#fff; text-decoration:none; font-weight:600; padding:8px 12px; border-radius:4px; font-size:.97rem; }
nav.main a.active, nav.main a:hover{ background:#222; color:var(--yellow); }
.icon-btn{ width:44px; height:44px; display:grid; place-items:center; background:none; border:0; color:#fff; cursor:pointer; position:relative; text-decoration:none; }
.cart-count{ position:absolute; top:4px; right:2px; background:var(--yellow); color:#000; font-size:.7rem; font-weight:800; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 4px; }
.menu-toggle{ display:none; }
.head-actions{ display:flex; align-items:center; gap:4px; }
.mobile-menu{ display:none; }
@media (max-width:900px){
  nav.main{ display:none; }
  .menu-toggle{ display:grid; }
  .mobile-menu.open{ display:block; position:fixed; inset:0; top:calc(68px + env(safe-area-inset-top,0px)); background:var(--bar); z-index:49; padding:16px 20px 40px; overflow:auto; }
  .mobile-menu a{ display:block; color:#fff; text-decoration:none; font-family:"Montserrat",sans-serif; font-style:italic; font-weight:900; font-size:1.7rem; padding:12px 0; border-bottom:1px solid #222; }
  .mobile-menu a.active{ color:var(--yellow); }
}

/* ===== Number plate rendering ===== */
.plate{ position:relative; width:100%; aspect-ratio:520/111; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#f3f3f3 55%,#e9e9e9 100%); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 18px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.25); }
.plate.rear{ background:linear-gradient(180deg,#ffe14d 0%,#f7d117 55%,#ecc400 100%); }
.plate.size-short6{ aspect-ratio:425/111; }
.plate.size-short5{ aspect-ratio:360/111; }
.plate.size-hex5,.plate.size-hex6,.plate.size-hex7{ border-radius:0; clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%); }
.plate.size-hex5{ aspect-ratio:400/111; } .plate.size-hex6{ aspect-ratio:460/111; } .plate.size-hex7{ aspect-ratio:520/111; }
.plate.tinted{ background:linear-gradient(180deg,#a9a9a9,#8f8f8f 60%,#7d7d7d); }
.plate.rear.tinted{ background:linear-gradient(180deg,#c9a815,#b39200 60%,#9d8000); }
.plate::before{ content:""; position:absolute; inset:0; background:linear-gradient(170deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%); pointer-events:none; }
.plate.bordered::after{ content:""; position:absolute; inset:4% 1.4%; border:2px solid #000; border-radius:4px; pointer-events:none; }
.plate .badge{ position:absolute; left:0; top:0; bottom:0; width:9%; background:#0b3d91; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:10% 0 7%; font-family:"Barlow Condensed",sans-serif; font-weight:700; line-height:1; z-index:2; overflow:hidden; text-align:center; }
.plate .badge .flag{ width:78%; aspect-ratio:3/2; display:block; }
.plate .badge .flag svg,.plate .badge .flag img{ width:100%; height:100%; display:block; object-fit:contain; }
.plate .badge .bt{ white-space:nowrap; letter-spacing:.02em; }
.custom-badge{ margin-top:14px; border:2px solid #000; border-radius:8px; padding:16px; background:var(--surface); }
.custom-badge[hidden]{ display:none; }
.swatches{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.swatches button{ width:36px; height:36px; border-radius:50%; border:2px solid var(--line); cursor:pointer; padding:0; }
.swatches button[aria-pressed="true"]{ outline:3px solid #000; outline-offset:2px; }
.swatches input[type=color]{ width:44px; height:36px; border:2px solid var(--line); border-radius:6px; padding:2px; background:var(--bg); cursor:pointer; }
.link-btn{ background:none; border:0; text-decoration:underline; cursor:pointer; padding:4px 0; font-weight:600; }
.plate .mark{ position:absolute; right:3%; bottom:5%; font-size:clamp(5px,1.1vw,9px); font-weight:600; color:rgba(0,0,0,.55); letter-spacing:.02em; font-family:"Barlow",sans-serif; }
.plate.tinted .mark{ color:rgba(0,0,0,.6); }
.pt{ font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:700; line-height:1; white-space:pre; color:#111; letter-spacing:.01em; position:relative; z-index:1; transform:translateY(-2%); }
.plate.has-badge .pt{ margin-left:9%; }
.font-block .pt{ font-family:"Anton",Impact,sans-serif; font-weight:400; letter-spacing:.02em; }
.font-retro .pt{ font-family:"Russo One","Arial Black",sans-serif; font-weight:400; }
/* Style effects: each one built to look clearly different */
.pt::after{ content:attr(data-t); position:absolute; inset:0; white-space:pre; pointer-events:none; text-shadow:none; color:transparent; display:none; }
/* Standard: flat printed, no depth */
.fx-std .pt{ color:#111; text-shadow:none; }
/* 3D Gel: low glossy resin dome with a bright shine across the top */
.fx-gel .pt{ color:#000; text-shadow:0 .015em 0 #222, 0 .04em .05em rgba(0,0,0,.45); }
.fx-gel .pt::after,.fx-4dgel .pt::after{ display:block; background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.55) 20%,rgba(255,255,255,.12) 40%,rgba(255,255,255,0) 48%,rgba(255,255,255,0) 84%,rgba(255,255,255,.22) 100%); -webkit-background-clip:text; background-clip:text; }
/* 4D: matte laser-cut acrylic, visible side walls and a cast shadow */
.fx-4d3 .pt{ color:#0d0d0d; text-shadow:.012em .016em 0 #474747,.024em .032em 0 #525252,.036em .048em 0 #5c5c5c,.11em .15em .09em rgba(0,0,0,.32); }
.fx-4d6 .pt{ color:#0d0d0d; text-shadow:.012em .016em 0 #424242,.024em .032em 0 #4a4a4a,.036em .048em 0 #525252,.048em .064em 0 #5a5a5a,.06em .08em 0 #626262,.072em .096em 0 #6a6a6a,.17em .23em .12em rgba(0,0,0,.36); }
/* 4D Gel: raised walls with a gel shine on top */
.fx-4dgel .pt{ color:#000; text-shadow:.012em .016em 0 #444,.024em .032em 0 #4e4e4e,.036em .048em 0 #585858,.048em .064em 0 #626262,.13em .18em .1em rgba(0,0,0,.34); }
/* Bevels: chamfered edges that catch the light from the top left */
.fx-bevel .pt{ color:#080808; text-shadow:.012em .016em 0 #3a3a3a,.05em .07em .05em rgba(0,0,0,.35); }
.fx-bevel .pt::after,.fx-4dbevel .pt::after{ display:none; }
/* Diamond cut bevel: glossy black chiselled letters, light catching the top-left facets */
.pt i{ font-style:normal; position:relative; display:inline-block; }
.fx-bevel .pt i::before,.fx-4dbevel .pt i::before{ content:attr(data-c); position:absolute; left:0; top:0; color:transparent; text-shadow:none;
  background:linear-gradient(160deg,#f4f4f4 0%,#bdbdbd 40%,#7a7a7a 100%); -webkit-background-clip:text; background-clip:text; }
.fx-bevel .pt i::after,.fx-4dbevel .pt i::after{ content:attr(data-c); position:absolute; left:0; top:0; color:transparent; text-shadow:none; transform:translate(.05em,.045em);
  background:linear-gradient(125deg,#353535 0 26%,#141414 26% 49%,#000 49% 68%,#4a4a4a 68% 70%,#0a0a0a 70% 100%); -webkit-background-clip:text; background-clip:text; }
/* 4D Bevel: deep raised letters plus bevelled edges */
.fx-4dbevel .pt{ color:#080808; text-shadow:.012em .016em 0 #444,.024em .032em 0 #4e4e4e,.036em .048em 0 #585858,.048em .064em 0 #626262,.06em .08em 0 #6a6a6a,.15em .2em .11em rgba(0,0,0,.36); }
.faded .pt{ -webkit-mask-image:linear-gradient(180deg,#000 15%,rgba(0,0,0,.18) 100%); mask-image:linear-gradient(180deg,#000 15%,rgba(0,0,0,.18) 100%); }

/* ===== Hero slideshow ===== */
.hero{ position:relative; background:#000; color:#fff; overflow:hidden; }
.slides{ position:relative; height:clamp(480px,72vh,640px); }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease; display:flex; align-items:center; pointer-events:none;
  background:
   repeating-linear-gradient(115deg,transparent 0 46px,rgba(245,209,59,.07) 46px 50px),
   radial-gradient(120% 90% at 85% 40%,#2a2a2a 0%,#000 65%); }
.slide.on{ opacity:1; pointer-events:auto; }
.slide .wrap{ display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center; }
/* only the first slide is the page H1; the others are H2s styled the same */
.slide :is(h1,h2){ color:#fff; font-size:clamp(2.2rem,6vw,4.2rem); }
.slide :is(h1,h2) span{ display:block; }
.slide p{ color:#cfcfcf; font-size:1.1rem; }
.slide .plates-stack{ display:grid; gap:18px; transform:rotate(-6deg); }
.slide .plates-stack .plate:nth-child(2){ margin-left:12%; }
.slide .road{ position:absolute; left:0; right:0; bottom:0; height:10px; background:repeating-linear-gradient(90deg,var(--yellow) 0 60px,transparent 60px 100px); opacity:.85; }
.dots{ position:absolute; bottom:28px; left:0; right:0; display:flex; justify-content:center; gap:10px; z-index:3; }
.dots button{ width:12px; height:12px; border-radius:6px; border:0; background:#666; cursor:pointer; padding:0; transition:width .3s; }
.dots button.on{ width:34px; background:var(--yellow); }
.slide-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:50%; border:2px solid #fff; background:rgba(0,0,0,.4); color:#fff; cursor:pointer; display:grid; place-items:center; }
.slide-arrow.prev{ left:16px; } .slide-arrow.next{ right:16px; }
@media (max-width:820px){
  .slide .wrap{ grid-template-columns:1fr; gap:28px; text-align:left; }
  .slide .plates-stack{ max-width:340px; order:-1; }
  .slides{ height:620px; }
  .slide-arrow{ display:none; }
}

/* ===== Quick reg bar ===== */
.quick{ background:var(--yellow); padding:28px 0; }
.quick .wrap{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.quick h2{ margin:0; font-size:clamp(1.3rem,3vw,1.8rem); flex:1 1 260px; }
.reg-input{ display:flex; flex:2 1 260px; gap:10px; min-width:0; max-width:100%; }
.reg-field{ flex:1; min-width:0; height:58px; border:3px solid #000; border-radius:6px; background:#fff; text-align:center; text-transform:uppercase; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:2rem; letter-spacing:.06em; color:#000; }

/* ===== Style tiles ===== */
.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.tile{ background:var(--surface); border-radius:10px; overflow:hidden; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; border:1px solid var(--line); cursor:pointer; text-align:left; padding:0; }
.tile-art{ padding:30px 26px; display:grid; gap:12px; background:linear-gradient(180deg,#e9e9e6,#d9d9d4); }
.tile-art .plate:first-child{ transform:rotate(-3deg); }
.tile-art .plate:last-child{ transform:rotate(-3deg) translateX(6%); }
.tile-body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:4px; flex:1; }
.tile-body h3{ margin:0; }
.tile-body .price{ font-weight:700; }
.tag{ display:inline-block; font-size:.78rem; font-weight:700; padding:3px 8px; border-radius:3px; background:#000; color:var(--yellow); align-self:flex-start; margin-bottom:6px; }
.tag.show{ background:var(--surface-2); color:var(--ink); }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.section-head h2{ margin:0; }
.link-more{ font-weight:700; text-decoration:none; border-bottom:3px solid var(--yellow); padding-bottom:2px; }

/* ===== Steps ===== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:2px solid var(--ink); border-radius:10px; overflow:hidden; }
.step{ padding:28px; border-right:2px solid var(--ink); }
.step:last-child{ border-right:0; }
.step .n{ font-family:"Montserrat",sans-serif; font-style:italic; font-weight:900; font-size:3rem; line-height:1; color:var(--yellow-deep); -webkit-text-stroke:1.5px #000; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } .step{ border-right:0; border-bottom:2px solid var(--ink); } .step:last-child{ border-bottom:0; } }

/* ===== Private plates ===== */
.pp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.pp{ border:2px solid var(--ink); border-radius:10px; padding:22px; display:flex; flex-direction:column; gap:14px; background:var(--bg); }
.pp .price{ font-family:"Montserrat",sans-serif; font-style:italic; font-weight:900; font-size:1.6rem; }
.pp .row{ display:flex; gap:10px; }
.pp .row .btn{ flex:1; min-height:44px; padding:0 12px; font-size:.95rem; }
.pp.sold{ opacity:.55; }

/* ===== Dark band (about / work) ===== */
.band{ background:#000; color:#fff; }
.band p{ color:#d0d0d0; }
.band h2{ color:#fff; }
.band-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }
@media (max-width:820px){ .band-grid{ grid-template-columns:minmax(0,1fr); } }
.work{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; }
.work > div{ flex:0 0 min(300px,78%); aspect-ratio:4/5; border-radius:10px; scroll-snap-align:start; background:linear-gradient(160deg,#2b2b2b,#0d0d0d); display:flex; flex-direction:column; justify-content:flex-end; padding:20px; gap:14px; border:1px dashed #555; }
.work small{ color:#9a9a9a; }
.work > img{ flex:0 0 min(300px,78%); aspect-ratio:3/4; width:auto; height:auto; object-fit:cover; border-radius:10px; scroll-snap-align:start; display:block; background:#1a1a1a; }

/* ===== Reviews ===== */
.reviews{ text-align:center; }
.review-text{ font-family:"Montserrat",sans-serif; font-style:italic; font-weight:800; font-size:clamp(1.2rem,2.6vw,1.7rem); line-height:1.3; max-width:30ch; margin:12px auto 10px; min-height:5.2em; }
.stars{ color:var(--yellow-deep); font-size:1.4rem; letter-spacing:4px; }
.rev-nav{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:12px; }
.rev-nav button{ width:46px; height:46px; border-radius:50%; border:2px solid var(--ink); background:var(--bg); cursor:pointer; font-size:1.1rem; }

/* ===== FAQ ===== */
.faq{ max-width:820px; }
.faq details{ border-bottom:2px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:20px 0; font-weight:700; font-size:1.1rem; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; line-height:1; font-weight:500; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding-bottom:18px; color:var(--ink-2); }

/* ===== Newsletter + footer ===== */
.news{ background:var(--yellow); color:#000; }
.news form{ display:flex; gap:10px; flex-wrap:wrap; max-width:560px; }
.news input{ flex:1 1 240px; height:52px; border:2px solid #000; border-radius:6px; padding:0 16px; background:#fff; color:#000; }
footer{ background:#000; color:#cfcfcf; padding:56px 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
footer h4{ color:#fff; margin:0 0 12px; font-size:1rem; }
footer a{ color:#cfcfcf; text-decoration:none; display:block; padding:4px 0; }
footer a:hover{ color:var(--yellow); }
footer a.social{ display:inline-flex; align-items:center; gap:8px; margin:12px 8px 0 0; color:#fff; border:1px solid #444; border-radius:20px; padding:8px 14px; }
.mobile-menu a.menu-social{ display:flex; align-items:center; gap:10px; font-family:"Barlow",sans-serif; font-style:normal; font-weight:700; font-size:1.1rem; border-bottom:0; margin-top:10px; padding:6px 0; color:var(--yellow); }
.pay{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.pay span{ border:1px solid #444; border-radius:4px; padding:5px 10px; font-size:.82rem; font-weight:700; color:#fff; }
.legal-line{ border-top:1px solid #222; margin-top:28px; padding-top:20px; font-size:.85rem; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; } }

/* ===== WhatsApp float ===== */
.wa{ position:fixed; right:16px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:40; display:flex; align-items:center; gap:10px; text-decoration:none; }
.wa .lbl{ background:#fff; color:#000; font-weight:700; padding:9px 14px; border-radius:20px; box-shadow:0 4px 14px rgba(0,0,0,.18); font-size:.95rem; }
.wa .circ{ width:58px; height:58px; border-radius:50%; background:var(--green); display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.25); }
@media (max-width:600px){ .wa .lbl{ display:none; } }

/* ===== Page header (inner pages) ===== */
.page-hero{ background:#000; color:#fff; padding:56px 0 48px; position:relative; overflow:hidden; }
.page-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:repeating-linear-gradient(90deg,var(--yellow) 0 60px,transparent 60px 100px); }
.page-hero h1{ color:#fff; margin:0 0 .2em; }
.page-hero p{ color:#cfcfcf; margin:0; }

/* ===== Builder ===== */
.builder{ display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:start; }
.preview{ position:sticky; top:calc(84px + env(safe-area-inset-top,0px)); background:linear-gradient(180deg,#e8e8e4,#cfcfca); border-radius:12px; padding:34px 28px; display:grid; gap:22px; }
.preview .lbl{ font-size:.85rem; font-weight:700; color:#3a3a3a; margin-bottom:-14px; }
.preview .plate-holder{ display:flex; justify-content:center; }
.status{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:8px; padding:12px 14px; font-weight:600; font-size:.95rem; color:#000; }
.status.show{ background:#000; color:var(--yellow); }
.opts{ display:grid; gap:26px; }
.opt h3{ font-family:"Barlow",sans-serif; font-style:normal; font-weight:700; font-size:1.05rem; margin:0 0 10px; display:flex; justify-content:space-between; }
.opt h3 small{ font-weight:500; color:var(--muted); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ border:2px solid var(--line); background:var(--bg); border-radius:6px; padding:9px 14px; cursor:pointer; font-weight:600; font-size:.95rem; min-height:44px; text-align:left; }
.chip small{ display:block; font-weight:500; color:var(--muted); font-size:.8rem; }
.chip[aria-pressed="true"]{ border-color:#000; background:#000; color:#fff; }
.chip[aria-pressed="true"] small{ color:var(--yellow); }
.chip.legal[aria-pressed="true"]{ background:var(--yellow); color:#000; }
.chip.legal[aria-pressed="true"] small{ color:#000; }
.total-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:2px solid var(--ink); padding-top:18px; flex-wrap:wrap; }
.total{ font-family:"Montserrat",sans-serif; font-style:italic; font-weight:900; font-size:2.1rem; }
/* option previews */
.chips.pv{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.chips.pv .chip{ padding:10px; }
.chip-pv{ display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#e8e8e4,#d2d2cc); border-radius:4px; padding:14px 10px; margin-bottom:8px; min-height:74px; }
.chip-pv .plate{ box-shadow:0 3px 8px rgba(0,0,0,.22); }
.chip-pv .mark{ display:none; }
.chip[aria-pressed="true"] .chip-pv{ outline:3px solid var(--yellow); }
.chip.will-switch{ border-style:dashed; border-color:#a9a9a0; }
.chip.will-switch .chip-pv{ opacity:.55; filter:grayscale(.3); }
.switch-tag{ display:block; margin-top:6px; font-size:.75rem; font-weight:700; background:#000; color:var(--yellow); padding:4px 7px; border-radius:3px; line-height:1.25; }
.legal-hint{ display:flex; gap:10px; align-items:flex-start; margin:12px 0 0; font-size:.92rem; background:var(--surface); border-left:5px solid #000; padding:10px 12px; border-radius:0 6px 6px 0; max-width:none; }
.legal-hint:empty{ display:none; }
.addon{ display:flex; gap:12px; align-items:center; border:2px dashed #000; background:#fffbe6; border-radius:8px; padding:14px; margin-top:16px; cursor:pointer; color:#000; }
.addon:has(input:checked){ border-style:solid; background:var(--yellow); }
.addon input{ width:22px; height:22px; accent-color:#000; flex:0 0 22px; }
.addon .txt{ flex:1; font-size:.92rem; line-height:1.35; }
.addon .txt b{ display:block; font-size:1rem; }
.addon .p{ font-weight:800; white-space:nowrap; }
.fav .tile-art{ position:relative; }
.fav-tag{ position:absolute; top:10px; left:10px; z-index:3; font-size:.78rem; font-weight:700; padding:4px 10px; border-radius:20px; background:#000; color:var(--yellow); }
.fav-tag.sale{ background:var(--danger); color:#fff; }
.fav .tile-body h3{ font-size:1.1rem; }
.fav .price{ font-size:1.05rem; }
@media (min-width:900px){ .fav-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:640px){
  .fav-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .fav .tile-art{ padding:40px 12px 18px; gap:8px; }
  .fav .tile-body{ padding:10px 12px 14px; }
  .fav .tile-body h3{ font-size:.98rem; }
  .fav .price{ font-size:.95rem; }
  .fav-tag{ top:8px; left:8px; font-size:.7rem; padding:3px 8px; }
}
.admin-add{ display:grid; grid-template-columns:1.3fr 1fr auto; gap:12px; align-items:end; }
@media (max-width:640px){ .admin-add{ grid-template-columns:1fr; } }
.admin-add .field{ margin:0; }
.admin-row{ display:grid; grid-template-columns:160px 1fr; gap:18px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.admin-row .ctrls{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.admin-row .ctrls input{ width:130px; min-height:44px; border:2px solid var(--line); border-radius:6px; padding:0 12px; background:var(--bg); }
.admin-row .btn{ min-height:44px; padding:0 14px; font-size:.92rem; }
.admin-row .btn.danger{ background:transparent; color:var(--danger); border-color:var(--danger); }
.admin-row.is-sold .plate{ opacity:.5; }
.sold-pill{ font-size:.78rem; font-weight:700; background:var(--danger); color:#fff; padding:3px 8px; border-radius:3px; }
@media (max-width:560px){ .admin-row{ grid-template-columns:1fr; } .admin-row > div:first-child{ max-width:220px; } }
.chip-pv .plate.size-short6,.plate-holder .plate.size-short6{ width:82%; }
.chip-pv .plate.size-short5,.plate-holder .plate.size-short5{ width:70%; }
.chip-pv .plate.size-hex6,.plate-holder .plate.size-hex6{ width:88%; }
.chip-pv .plate.size-hex5,.plate-holder .plate.size-hex5{ width:77%; }
@media (max-width:900px){
  .builder{ grid-template-columns:1fr; gap:24px; }
  .preview{ position:sticky; top:calc(68px + env(safe-area-inset-top,0px)); z-index:5; padding:14px 18px; gap:10px; box-shadow:0 10px 22px rgba(0,0,0,.18); }
  .preview .lbl{ display:none; }
  .preview .plate-holder{ max-width:300px; width:100%; margin-inline:auto; }
  .status{ font-size:.82rem; padding:8px 10px; }
}

/* ===== Checkout ===== */
.checkout{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; }
@media (max-width:900px){ .checkout{ grid-template-columns:1fr; } }
.card{ border:2px solid var(--line); border-radius:10px; padding:24px; margin-bottom:20px; background:var(--bg); }
.card h3{ font-family:"Barlow",sans-serif; font-style:normal; font-weight:700; font-size:1.2rem; display:flex; align-items:center; gap:10px; }
.card h3 .num{ width:28px; height:28px; border-radius:50%; background:#000; color:var(--yellow); display:grid; place-items:center; font-size:.9rem; }
.field{ display:grid; gap:6px; margin-bottom:14px; }
.field label{ font-weight:600; font-size:.92rem; }
.field input,.field select,.field textarea{ min-height:48px; border:2px solid var(--line); border-radius:6px; padding:10px 14px; background:var(--bg); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:#000; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .grid2{ grid-template-columns:1fr; } }
.drop{ border:2px dashed #999; border-radius:10px; padding:20px; display:flex; gap:16px; align-items:center; cursor:pointer; background:var(--surface); margin-bottom:12px; position:relative; }
.drop:hover{ border-color:#000; }
.drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.drop .ic{ width:46px; height:46px; flex:0 0 46px; border-radius:8px; background:var(--yellow); display:grid; place-items:center; }
.drop strong{ display:block; }
.drop .fname{ font-size:.88rem; color:var(--muted); }
.drop.done{ border-style:solid; border-color:#000; }
.drop.done .ic{ background:#000; color:var(--yellow); }
.drop.err{ border-color:#c8102e; }
.drop.err .fname{ color:#c8102e; }
.radio-row{ display:grid; gap:10px; }
.radio-row label{ display:flex; align-items:center; gap:12px; border:2px solid var(--line); border-radius:8px; padding:14px; cursor:pointer; font-weight:600; }
.radio-row label:has(input:checked){ border-color:#000; }
.radio-row label span.p{ margin-left:auto; }
.radio-row input{ accent-color:#000; width:20px; height:20px; }
.paybtns{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px; }
.paybtns button{ min-height:48px; border-radius:6px; border:2px solid #000; background:#000; color:#fff; font-weight:700; cursor:pointer; }
.paybtns button.alt{ background:#fff; color:#000; }
.or{ text-align:center; color:var(--muted); font-size:.9rem; margin:6px 0 14px; }
.summary .line{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); align-items:center; }
.summary .line .mini{ width:120px; flex:0 0 120px; display:grid; gap:5px; }
.summary .line .info{ flex:1; font-size:.93rem; }
.summary .line .info b{ display:block; font-size:1rem; }
.summary .line button{ background:none; border:0; color:var(--danger); cursor:pointer; padding:4px 0; font-weight:600; }
.totals div{ display:flex; justify-content:space-between; padding:6px 0; }
.totals .grand{ font-weight:800; font-size:1.3rem; border-top:2px solid #000; margin-top:6px; padding-top:12px; }
.demo-note{ background:#000; color:var(--yellow); padding:10px 14px; border-radius:6px; font-size:.88rem; font-weight:600; margin-bottom:20px; }
.empty{ text-align:center; padding:60px 20px; }

/* ===== Blog / docs / contact ===== */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.post{ border-top:4px solid #000; padding-top:16px; }
.post .meta{ color:var(--muted); font-size:.88rem; }
.post .art{ background:linear-gradient(160deg,#1f1f1f,#000); border-radius:8px; padding:30px 24px; margin-bottom:16px; }
.docs-cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:760px){ .docs-cols{ grid-template-columns:1fr; } }
.docs-cols ul{ padding-left:20px; margin:0; }
.docs-cols li{ margin-bottom:8px; }
.callout{ border-left:6px solid var(--yellow); background:var(--surface); padding:18px 22px; border-radius:0 8px 8px 0; margin:24px 0; }
.contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:40px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-line{ display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.contact-line .ic{ width:44px; height:44px; border-radius:50%; background:#000; color:var(--yellow); display:grid; place-items:center; flex:0 0 44px; }

/* ===== Toast / modal ===== */
.toast{ position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(20px); background:#000; color:#fff; padding:12px 18px; border-radius:8px; font-weight:600; z-index:70; opacity:0; transition:.25s; pointer-events:none; max-width:calc(100% - 32px); border-left:5px solid var(--yellow); }
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; place-items:center; z-index:80; padding:20px; }
.modal.on{ display:grid; }
.modal .box{ background:var(--bg); border-radius:12px; padding:30px; max-width:440px; width:100%; text-align:center; }
.view{ display:none; } .view.on{ display:block; }
.article{ max-width:720px; }
.article h2{ font-size:clamp(1.4rem,3vw,1.9rem); margin-top:1.6em; }
.article p,.article li{ color:var(--ink-2); }
.article ul{ padding-left:22px; margin:0 0 1em; }
.article li{ margin-bottom:8px; }
.article .back{ display:inline-block; margin-bottom:24px; font-weight:700; text-decoration:none; border-bottom:3px solid var(--yellow); }
.article .art{ background:linear-gradient(160deg,#1f1f1f,#000); border-radius:10px; padding:34px 28px; margin-bottom:28px; display:grid; gap:14px; }
.law{ border:2px solid var(--ink); border-radius:10px; padding:20px 22px; margin:20px 0; }
.law strong{ display:block; font-size:1.05rem; margin-bottom:4px; color:var(--ink); }
.spec{ width:100%; border-collapse:collapse; margin:10px 0 22px; font-size:.97rem; }
.spec th,.spec td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.spec th{ background:#000; color:var(--yellow); font-weight:700; }
.table-scroll{ overflow-x:auto; }
.disclaimer{ font-size:.88rem; color:var(--muted); border-top:1px solid var(--line); padding-top:16px; margin-top:32px; }
@media (prefers-reduced-motion:reduce){ .ticker-track{ animation:none; } .slide{ transition:none; } }

/* ===== Google profile ===== */
.google-ctas{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:24px; }
.google-ctas svg{ flex:0 0 auto; }
.map{ margin-top:18px; border-radius:10px; overflow:hidden; border:2px solid var(--line); aspect-ratio:4/3; background:var(--surface); }
.map iframe{ width:100%; height:100%; border:0; display:block; }

/* ===== Reg validation ===== */
.reg-field.invalid{ border-color:var(--danger); background:#fff5f5; }
.reg-field.valid{ border-color:#1f8a3b; }
.reg-msg{ margin:8px 0 0; font-size:.92rem; font-weight:600; max-width:none; }
.reg-msg:empty{ display:none; }
.reg-msg.err{ color:var(--danger); }
.reg-msg.ok{ color:#1f8a3b; }
.reg-msg .link-btn{ color:inherit; margin-left:4px; }
.quick .reg-msg{ flex:1 0 100%; margin:0; color:#8a0f14; }

.tagline{ font-family:"Montserrat",sans-serif; font-style:italic; font-weight:900; font-size:1.15rem; color:var(--ink); border-left:5px solid var(--yellow); padding-left:12px; }

/* ===== UX + accessibility ===== */
.skip{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--yellow); color:#000; font-weight:700; padding:10px 16px; border-radius:6px; text-decoration:none; }
.skip:focus{ top:12px; }
main:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--yellow-deep); outline-offset:2px; }
.site :focus-visible, footer :focus-visible, .hero :focus-visible{ outline-color:var(--yellow); }
a, button, label, summary, input[type=checkbox], input[type=radio]{ touch-action:manipulation; }
html{ -webkit-tap-highlight-color:rgba(245,209,59,.35); }
h1, h2, h3{ text-wrap:balance; }
.modal{ overscroll-behavior:contain; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.total, .totals, .pp .price{ font-variant-numeric:tabular-nums; }

/* Builder: sticky price bar on phones while choosing options */
.m-bar{ display:none; }
@media (max-width:820px){
  body[data-view="builder"] .m-bar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--bg); border-top:2px solid var(--ink); box-shadow:0 -6px 18px rgba(0,0,0,.12);
    transition:transform .2s ease; }
  body[data-view="builder"].total-visible .m-bar{ transform:translateY(110%); }
  .m-bar b{ font-family:"Montserrat",sans-serif; font-style:italic; font-weight:900; font-size:1.5rem; font-variant-numeric:tabular-nums; }
  .m-bar .btn{ padding-inline:22px; }
  body[data-view="builder"] .wa{ bottom:calc(86px + env(safe-area-inset-bottom,0px)); }
  body[data-view="builder"].total-visible .wa{ bottom:calc(18px + env(safe-area-inset-bottom,0px)); }
  body[data-view="builder"] footer{ padding-bottom:90px; }
}
@media (prefers-reduced-motion:reduce){ .m-bar{ transition:none; } }

/* Home: style cards swipe sideways on phones instead of one long column */
@media (max-width:640px){
  #homeTiles{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:16px; gap:14px; margin-inline:-16px; padding:0 16px 10px; scrollbar-width:none; }
  #homeTiles::-webkit-scrollbar{ display:none; }
  #homeTiles > *{ flex:0 0 78%; scroll-snap-align:start; }
}

/* ===== Phone-first layer ===== */
.m-nav, .c-bar{ display:none; }
@media (max-width:820px){
  /* bottom bar: Build / Private / WhatsApp / Basket */
  .wa{ display:none; }
  .m-nav{ display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:44; background:#000;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px)); border-top:1px solid #222; }
  .m-nav a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:50px; color:#cfcfcf; text-decoration:none; font-size:.74rem; font-weight:700; }
  .m-nav a.active{ color:var(--yellow); }
  .m-nav a.wa-link{ color:#25d366; }
  .m-cart{ position:relative; display:inline-grid; }
  .m-cart b{ position:absolute; top:-6px; right:-10px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--yellow); color:#000; font-size:.66rem; display:grid; place-items:center; }
  .m-cart b[hidden]{ display:none; }
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)); }
  .toast{ bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important; }
  /* builder and checkout swap the bottom bar for their own action bar */
  body[data-view="builder"] .m-nav, body[data-view="checkout"] .m-nav{ display:none; }
  body[data-view="builder"] footer, body[data-view="checkout"] footer{ padding-bottom:20px; }
  body[data-view="checkout"] .c-bar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--bg); border-top:2px solid var(--ink); box-shadow:0 -6px 18px rgba(0,0,0,.12); transition:transform .2s ease; }
  body[data-view="checkout"].pay-visible .c-bar{ transform:translateY(110%); }
  .c-bar b{ font-family:"Montserrat",sans-serif; font-style:italic; font-weight:900; font-size:1.5rem; font-variant-numeric:tabular-nums; }
  .c-bar .btn{ padding-inline:26px; }

  /* menu: clear the header, contact buttons at the bottom */
  .mobile-menu.open{ padding-top:20px; padding-bottom:calc(90px + env(safe-area-inset-bottom,0px)); }
  .menu-cta{ display:grid; gap:10px; margin-top:22px; }
  .mobile-menu .menu-cta a{ font-family:"Barlow",sans-serif; font-style:normal; font-size:1.05rem; text-align:center; border:0; padding:14px; }
  .mobile-menu .menu-cta .wa-btn{ background:#25d366; color:#fff; border-radius:8px; }
  .mobile-menu .menu-cta .ghost-light{ border:2px solid #fff; border-radius:8px; }

  /* footer links: comfortable tap targets */
  footer a{ padding:10px 0; }
}
@media (prefers-reduced-motion:reduce){ .c-bar{ transition:none; } }

/* slide dots: 28px tap area, small visible dot drawn inside */
.dots{ gap:0; bottom:12px; }
.dots button{ position:relative; width:28px; height:28px; border:0; border-radius:0; padding:0; background:none; transition:width .3s; }
.dots button::before{ content:""; position:absolute; inset:8px; border-radius:6px; background:#666; }
.dots button.on{ width:50px; background:none; }
.dots button.on::before{ background:var(--yellow); }
@media (prefers-reduced-motion:reduce){ .dots button{ transition:none; } }

@media (max-width:640px){
  /* hero: shorter so the reg box shows on the first screen */
  .slides{ height:clamp(370px, calc(100svh - 290px), 470px); }
  .slide .wrap{ gap:18px; }
  .slide .plates-stack{ max-width:270px; gap:12px; }
  .slide :is(h1,h2){ font-size:clamp(1.9rem,9vw,2.5rem); margin-bottom:.25em; }
  .slide p{ font-size:1rem; margin:0 0 14px; }
  .slide .btn{ padding:12px 18px; }
  .quick{ padding:20px 0; }
  .dots{ bottom:4px; }
  .quick .wrap{ gap:12px; }

  /* inner page banners and section spacing: less scrolling before the content */
  .page-hero{ padding:26px 0 26px; }
  .page-hero h1{ font-size:clamp(1.8rem,8vw,2.3rem); }
  .page-hero p{ font-size:.98rem; }
  section{ padding:40px 0; }
  body[data-view="checkout"] .page-hero p{ display:none; }

  /* plate styles and sizes pages: two compact columns */
  #styleTiles, #sizeTiles{ grid-template-columns:1fr 1fr; gap:12px; }
  #styleTiles .tile-art, #sizeTiles .tile-art{ padding:18px 12px; gap:8px; }
  #styleTiles .tile-body, #sizeTiles .tile-body{ padding:10px 12px 14px; }
  #styleTiles .tile-body h3, #sizeTiles .tile-body h3{ font-size:1rem; }
  #styleTiles .tile-body .muted, #sizeTiles .tile-body .muted{ font-size:.85rem; line-height:1.35; }
  #styleTiles .tile-body .price, #sizeTiles .tile-body .price{ font-size:.88rem; }
  #styleTiles .tag, #sizeTiles .tag{ font-size:.68rem; }
}

/* short phones (iPhone SE size): smaller hero plates so the text and buttons fit */
@media (max-width:640px) and (max-height:720px){
  .slide .plates-stack{ max-width:215px; gap:8px; }
  .slide .wrap{ gap:12px; }
  .slide p{ font-size:.95rem; margin-bottom:10px; }
}