/* =========================================
   FROSTBITE GRILLZ — DESIGN SYSTEM
   Palette: graphite / deep teal / signature cyan-teal
   (matches frostbite_v2.html reference exactly)
   ========================================= */
:root {
  --graphite:    #06121A;
  --teal-deep:   #0E2530;
  --teal-panel:  #112B36;
  --teal-line:   rgba(15,184,201,0.16);
  --teal-line-strong: rgba(15,184,201,0.4);
  --teal:        #0FB8C9;
  --teal-bright: #2FE0D4;
  --mint:        #9DEEE6;
  --paper:       #EAFBFA;
  --gold:        #D9B25C;
  --glow:        0 0 22px rgba(15,184,201,0.35), 0 0 60px rgba(15,184,201,0.15);
  --glow-strong: 0 0 34px rgba(47,224,212,0.55), 0 0 90px rgba(15,184,201,0.3);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--graphite);
  color: var(--paper);
  font-family: 'Archivo', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

/* TICKER */
.ticker-wrap { background: var(--teal); padding: 9px 0; overflow: hidden; white-space: nowrap; position: relative; z-index: 100; }
.ticker-track { display: inline-flex; animation: ticker 32s linear infinite; }
.ticker-track span { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: #06121A; padding: 0 1.8rem; }
.ticker-track span.dot { color: rgba(6,18,26,0.4); }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* NAV */
nav { position: sticky; top: 0; z-index: 999; background: rgba(6,18,26,0.93); backdrop-filter: blur(16px); border-bottom: 1px solid var(--teal-line); padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 88px; }
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo img.wordmark { height: 88px; object-fit: contain; filter: none; }
.nav-links { display: flex; gap: 0.2rem; list-style: none; }
.nav-links a { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(234,251,250,0.62); text-decoration: none; padding: 0.55rem 0.9rem; border-radius: 3px; transition: color 0.2s, background 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--paper); background: rgba(15,184,201,0.1); }
.nav-cta { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; background: var(--teal); color: #06121A; border: none; padding: 0.6rem 1.3rem; border-radius: 3px; cursor: pointer; text-decoration: none; transition: box-shadow 0.3s, transform 0.2s, background 0.2s; }
.nav-cta:hover { box-shadow: var(--glow); transform: translateY(-1px); background: var(--teal-bright); }
.nav-basket { display: flex; align-items: center; gap: 0.5rem; font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mint); text-decoration: none; margin-left: 1rem; cursor: pointer; background:none; border:none; }
.basket-count { background: var(--teal); color: #06121A; font-size: 0.68rem; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--mint); border-radius: 2px; }

/* PAGES */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }

/* HERO */
.hero { position: relative; min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 4rem 2rem 6rem; background: radial-gradient(ellipse 900px 600px at 50% 110%, rgba(15,184,201,0.16) 0%, transparent 60%), linear-gradient(180deg, #06121A 0%, #081a24 100%); }
.hero-canvas { position: absolute; inset: 0; pointer-events: none; }
.hero-eyebrow { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 1.6rem; position: relative; display: flex; align-items: center; gap: 0.6rem; }
.hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--teal-line-strong); }
.hero-logo-icon { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 0 24px rgba(15,184,201,0.5)); animation: pulse-glow 3.4s ease-in-out infinite; margin-bottom: 1.4rem; position: relative; }
@keyframes pulse-glow { 0%, 100% { filter: drop-shadow(0 0 18px rgba(15,184,201,0.45)); } 50% { filter: drop-shadow(0 0 44px rgba(47,224,212,0.85)); } }
/* Motion Shine: every gem's highlight/flash circle (tagged by pvGem()
   in app.js) shares one CSS custom property pair set on #preview-svg,
   updated continuously from device tilt (or mouse position on desktop)
   -- so the whole preview's sparkle sweeps together as a single,
   cheap, GPU-friendly transform rather than touching each gem in JS. */
#preview-svg { --shine-dx: 0px; --shine-dy: 0px; }
.pv-gem-highlight, .pv-gem-flash { transform: translate(var(--shine-dx), var(--shine-dy)); transition: transform 0.05s linear; filter: drop-shadow(0 0 2.5px rgba(255,255,255,0.95)); }
.hero h1 { font-family: 'Anton', sans-serif; font-size: clamp(3.6rem, 11vw, 8rem); line-height: 0.92; letter-spacing: 0.01em; color: var(--paper); position: relative; margin-bottom: 1rem; }
.hero h1 span { color: var(--teal); }
.hero-sub { font-family: 'Archivo', sans-serif; font-weight: 400; font-size: clamp(0.95rem, 2vw, 1.15rem); letter-spacing: 0.04em; color: rgba(234,251,250,0.55); margin-bottom: 2.8rem; position: relative; max-width: 480px; line-height: 1.6; }
.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; position: relative; }
.btn-primary { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--teal); color: #06121A; border: none; padding: 1rem 2.4rem; border-radius: 3px; cursor: pointer; text-decoration: none; display: inline-block; transition: box-shadow 0.3s, transform 0.2s, background 0.2s; }
.btn-primary:hover { box-shadow: var(--glow-strong); transform: translateY(-2px); background: var(--teal-bright); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-outline { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; color: var(--mint); border: 1px solid rgba(15,184,201,0.35); padding: 1rem 2.4rem; border-radius: 3px; cursor: pointer; text-decoration: none; display: inline-block; transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; }
.btn-outline:hover { border-color: var(--teal); background: rgba(15,184,201,0.08); box-shadow: 0 0 20px rgba(15,184,201,0.15); }
.hero-scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: rgba(234,251,250,0.28); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; font-family: 'Archivo Expanded', sans-serif; animation: bounce 2s ease-in-out infinite; }
@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

/* FEATURES STRIP */
.features { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--teal-line); border-bottom: 1px solid var(--teal-line); }
.feature-item { padding: 2.4rem 2rem; border-right: 1px solid var(--teal-line); text-align: center; }
.feature-item:last-child { border-right: none; }
.feature-icon { font-size: 1.8rem; margin-bottom: 0.9rem; }
.feature-title { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mint); margin-bottom: 0.4rem; }
.feature-desc { font-size: 0.83rem; color: rgba(234,251,250,0.45); line-height: 1.5; }

/* SECTIONS / PRODUCT GRID */
.section { padding: 5rem 2rem; max-width: 1300px; margin: 0 auto; }
.section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.6rem; flex-wrap: wrap; gap: 1rem; }
.section-title { font-family: 'Anton', sans-serif; font-size: clamp(2.2rem, 4.6vw, 3.6rem); color: var(--paper); line-height: 1; }
.section-title span { color: var(--teal); }
.section-link { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-bright); text-decoration: none; border-bottom: 1px solid rgba(15,184,201,0.3); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; cursor: pointer; background: none; border-top:none;border-left:none;border-right:none; }
.section-link:hover { color: var(--mint); border-color: var(--mint); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
.product-card { background: var(--teal-panel); border: 1px solid var(--teal-line); border-radius: 6px; overflow: hidden; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; text-decoration: none; color: inherit; display: block; }
.product-card:hover { border-color: var(--teal-line-strong); transform: translateY(-4px); box-shadow: 0 10px 36px rgba(15,184,201,0.14); }
.product-img { width: 100%; aspect-ratio: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #0a1e28; }
.product-img img { width: 100%; height: 100%; object-fit: contain; object-position: center center; display:block; }
.product-badge { position: absolute; top: 12px; left: 12px; background: var(--teal); color: #06121A; font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; z-index: 2; }
.product-info { padding: 1.2rem; }
.product-name { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 1.04rem; letter-spacing: 0.02em; color: var(--paper); margin-bottom: 0.3rem; }
.product-material { font-size: 0.78rem; color: rgba(234,251,250,0.4); margin-bottom: 0.8rem; }
.product-price { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--teal-bright); }
.product-price .from { font-size: 0.72rem; color: rgba(234,251,250,0.4); font-weight: 400; margin-right: 4px; }
.product-price .price-was { font-size: 0.85rem; color: rgba(234,251,250,0.35); font-weight: 600; text-decoration: line-through; margin-right: 6px; }
.add-to-cart { width: 100%; margin-top: 1rem; font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase; background: var(--teal); color: #06121A; border: none; padding: 0.7rem; border-radius: 3px; cursor: pointer; transition: box-shadow 0.3s, background 0.2s; }
.add-to-cart:hover { box-shadow: var(--glow); background: var(--teal-bright); }

/* PROCESS */
.process-bg { background: linear-gradient(180deg, var(--graphite) 0%, var(--teal-deep) 50%, var(--graphite) 100%); border-top: 1px solid var(--teal-line); border-bottom: 1px solid var(--teal-line); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 1100px; margin: 0 auto; padding: 5rem 2rem; }
.process-step { text-align: center; }
.process-num { font-family: 'Anton', sans-serif; font-size: 3.6rem; color: rgba(15,184,201,0.14); line-height: 1; margin-bottom: 0.4rem; }
.process-icon { font-size: 1.7rem; margin-bottom: 0.9rem; }
.process-label { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mint); margin-bottom: 0.5rem; }
.process-desc { font-size: 0.82rem; color: rgba(234,251,250,0.4); line-height: 1.6; }

/* GALLERY */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.gallery-item { aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; background: #0a1e28; }
.gallery-item img, .gallery-item video { width:100%; height:100%; object-fit:cover; object-position:center center; background:#0a1e28; display:block; image-rendering:auto; }
/* GIF freeze: a canvas snapshot of frame 1 sits on top; removed on hover/tap so the animated GIF underneath plays */
.gallery-item .gif-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item .gif-play-icon { position:absolute; bottom:8px; right:8px; width:28px; height:28px; border-radius:50%; background:rgba(15,184,201,0.85); display:flex; align-items:center; justify-content:center; font-size:0.65rem; color:#fff; padding-left:2px; pointer-events:none; transition:opacity 0.2s; }
.gallery-item.gif-playing .gif-poster { display:none; }
.gallery-item.gif-playing .gif-play-icon { opacity:0; }
.video-play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(6,18,26,0.55); cursor:pointer; z-index:2; }
.video-play-btn { width:52px; height:52px; border-radius:50%; background:rgba(15,184,201,0.85); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#fff; padding-left:4px; box-shadow:0 0 0 3px rgba(255,255,255,0.2); transition:transform 0.2s,background 0.2s; }
.video-play-overlay:hover .video-play-btn { transform:scale(1.1); background:rgba(15,184,201,1); }
.gallery-item:hover { transform: scale(1.02); box-shadow: 0 0 0 1px var(--teal-line-strong); }
.gallery-overlay { position: absolute; inset: 0; background: rgba(6,18,26,0.72); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay span { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.84rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }

/* BUILD YOUR OWN — TOOTH-BY-TOOTH BUILDER */
.builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.4rem; max-width: 1500px; margin: 0 auto; padding: 2.5rem 2rem 5rem; align-items: start; }
.builder-mouth-card { background: var(--teal-panel); border: 1px solid var(--teal-line); border-radius: 10px; padding: 2.4rem 2rem; }

/* Live visual preview panel */
.preview-card { background: var(--teal-panel); border: 1px solid var(--teal-line); border-radius: 10px; padding: 1.6rem; position: sticky; top: 90px; }
.preview-title { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(234,251,250,0.4); margin-bottom: 1rem; text-align: center; }
.preview-caption { font-size: 0.8rem; color: rgba(234,251,250,0.4); text-align: center; margin-top: 0.9rem; font-family: 'Archivo', sans-serif; }
.pv-tooth { transition: fill 0.25s ease; }
.mouth-toolbar { display: flex; gap: 0.6rem; margin-bottom: 2.2rem; flex-wrap: wrap; }
.tool-btn { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255,255,255,0.03); border: 1px solid var(--teal-line); color: rgba(234,251,250,0.65); padding: 0.55rem 1.1rem; border-radius: 4px; cursor: pointer; transition: all 0.2s; }
.tool-btn:hover { border-color: var(--teal-line-strong); color: var(--paper); }
.tool-btn.reset { color: #ff8a7a; border-color: rgba(255,138,122,0.25); }
.tool-btn.reset:hover { border-color: #ff8a7a; }
.tool-btn.active { background: var(--teal); border-color: var(--teal); color: #06121A; }

.selection-summary { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--teal-line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.selection-text { font-size: 0.85rem; color: rgba(234,251,250,0.55); }
.selection-text strong { color: var(--teal-bright); }

.builder-panel { display: flex; flex-direction: column; gap: 1.2rem; }
.builder-section { background: var(--teal-panel); border: 1px solid var(--teal-line); border-radius: 8px; padding: 1.4rem 1.5rem; }
.builder-section-title { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(234,251,250,0.4); margin-bottom: 1rem; }
.info-icon-btn { background: none; border: none; color: var(--teal); font-size: 0.95rem; cursor: pointer; padding: 0 0.2rem; vertical-align: middle; opacity: 0.75; transition: opacity 0.15s; }
.info-icon-btn:hover { opacity: 1; }
.info-modal-section { margin-bottom: 1.3rem; }
.info-modal-section:last-child { margin-bottom: 0; }
.info-modal-section h4 { font-family: 'Archivo Expanded', sans-serif; font-size: 0.88rem; color: var(--mint); margin-bottom: 0.35rem; }
.info-modal-section p { font-size: 0.85rem; line-height: 1.55; color: rgba(234,251,250,0.75); }
.impression-howto { border: 1px solid var(--teal-line); border-radius: 8px; margin-bottom: 1.2rem; overflow: hidden; }
.impression-howto-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; background: rgba(15,184,201,0.06); border: none; color: var(--paper); font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.82rem; padding: 0.9rem 1.1rem; cursor: pointer; text-align: left; }
.impression-howto-chevron { transition: transform 0.2s; }
.impression-howto-toggle.open .impression-howto-chevron { transform: rotate(180deg); }
.impression-howto-steps { display: none; padding: 1.1rem; border-top: 1px solid var(--teal-line); }
.impression-howto-steps.open { display: block; }
.howto-step { display: flex; gap: 0.9rem; margin-bottom: 0.9rem; font-size: 0.85rem; line-height: 1.5; color: rgba(234,251,250,0.75); }
.howto-step:last-of-type { margin-bottom: 0; }
.howto-step-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #06121A; font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
.time-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
.time-slot-btn { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.78rem; padding: 0.65rem 0.4rem; border-radius: 6px; border: 1px solid var(--teal-line); background: rgba(255,255,255,0.02); color: rgba(234,251,250,0.75); cursor: pointer; transition: all 0.15s; text-align: center; }
.time-slot-btn:hover { border-color: var(--teal-line-strong); }
.time-slot-btn.active { background: var(--teal); border-color: var(--teal); color: #06121A; }
.time-slot-btn.taken { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; background: none; }
.time-slot-btn.taken:hover { border-color: var(--teal-line); }

/* PER-TOOTH CUSTOMISE CHIPS */
.tooth-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tooth-chip { display: flex; align-items: center; gap: 0.45rem; font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.03em; background: rgba(255,255,255,0.03); border: 1px solid var(--teal-line); color: rgba(234,251,250,0.6); padding: 0.45rem 0.85rem; border-radius: 50px; cursor: pointer; transition: all 0.15s; }
.tooth-chip:hover { border-color: var(--teal-line-strong); }
.tooth-chip.active { border-color: var(--teal); background: rgba(15,184,201,0.16); color: var(--paper); }
.tooth-chip .tooth-chip-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.25); }
.builder-edit-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; background: rgba(15,184,201,0.1); border: 1px solid var(--teal-line-strong); border-radius: 8px; padding: 0.7rem 1rem; margin-bottom: 1.4rem; font-size: 0.82rem; color: var(--paper); flex-wrap: wrap; }
.builder-edit-banner.editing-single { background: rgba(255,179,71,0.1); border-color: rgba(255,179,71,0.4); }
.builder-edit-banner-back { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(255,255,255,0.06); border: 1px solid var(--teal-line-strong); color: var(--paper); padding: 0.4rem 0.9rem; border-radius: 50px; cursor: pointer; white-space: nowrap; }
.builder-edit-banner-back:hover { background: rgba(255,255,255,0.12); }
.pv-tooth-active-outline { stroke: #ffb347 !important; stroke-width: 3px !important; stroke-dasharray: 4 2; }
.builder-hint { font-size: 0.76rem; color: rgba(234,251,250,0.35); line-height: 1.5; }
.material-select { display: flex; align-items: center; justify-content: space-between; cursor: pointer; background: rgba(255,255,255,0.02); border: 1px solid var(--teal-line); border-radius: 6px; padding: 0.9rem 1rem; }
.material-select-current { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 1rem; color: var(--paper); display: flex; align-items: center; gap: 0.6rem; }
.material-swatch-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }
.rhodium-swatch-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.rhodium-swatch { display: flex; align-items: center; gap: 0.5rem; font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.78rem; background: rgba(255,255,255,0.02); border: 1px solid var(--teal-line); color: rgba(234,251,250,0.7); padding: 0.55rem 1rem; border-radius: 50px; cursor: pointer; transition: all 0.15s; }
.rhodium-swatch:hover { border-color: var(--teal-line-strong); }
.rhodium-swatch.active { border-color: #ffb347; background: rgba(255,179,71,0.12); color: var(--paper); }
.rhodium-swatch-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.25); }
.material-dropdown { display: none; margin-top: 0.6rem; flex-direction: column; gap: 0.4rem; }
.material-dropdown.open { display: flex; }
.material-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 5px; cursor: pointer; font-family: 'Archivo Expanded', sans-serif; font-weight: 600; font-size: 0.88rem; color: rgba(234,251,250,0.7); transition: background 0.15s; }
.material-option:hover { background: rgba(15,184,201,0.08); }
.material-option.active { background: rgba(15,184,201,0.14); color: var(--paper); }

.addon-grid { display: flex; flex-direction: column; gap: 0.55rem; }
.addon-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; background: rgba(255,255,255,0.02); border: 1px solid var(--teal-line); border-radius: 6px; padding: 0.75rem 0.9rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.addon-row:hover { border-color: var(--teal-line-strong); }
.addon-row.checked { border-color: var(--teal-line-strong); background: rgba(15,184,201,0.06); }
.addon-left { display: flex; align-items: center; gap: 0.7rem; }
.addon-check { width: 19px; height: 19px; border-radius: 4px; border: 1.5px solid rgba(234,251,250,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.addon-row.checked .addon-check { background: var(--teal); border-color: var(--teal); }
.addon-check svg { width: 12px; height: 12px; opacity: 0; transition: opacity 0.15s; }
.addon-row.checked .addon-check svg { opacity: 1; }
.addon-name { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em; color: var(--paper); }
.addon-price { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.8rem; color: var(--teal-bright); white-space: nowrap; }

.builder-total-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.3rem; }
.builder-total-label { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(234,251,250,0.4); }
.builder-total-price { font-family: 'Anton', sans-serif; font-size: 2.4rem; color: var(--teal-bright); line-height: 1; }
.builder-note { font-size: 0.76rem; color: rgba(234,251,250,0.35); margin-bottom: 1.2rem; }
.builder-add-btn { width: 100%; font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--teal); color: #06121A; border: none; padding: 1.05rem; border-radius: 5px; cursor: pointer; transition: box-shadow 0.3s, background 0.2s; }
.builder-add-btn:hover { box-shadow: var(--glow-strong); background: var(--teal-bright); }
.builder-add-btn:disabled { background: rgba(255,255,255,0.06); color: rgba(234,251,250,0.3); cursor: not-allowed; }
.builder-add-btn:disabled:hover { box-shadow: none; }

/* ABOUT */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; max-width: 1100px; margin: 0 auto; padding: 5rem 2rem; }
.about-visual { aspect-ratio: 1; border: 1px solid var(--teal-line); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow:hidden; background: #0a1e28; }
.about-visual img { width:100%; height:100%; object-fit:cover; }
.about-body h2 { font-family: 'Anton', sans-serif; font-size: 2.7rem; color: var(--paper); margin-bottom: 1.4rem; line-height: 1.05; }
.about-body h2 span { color: var(--teal); }
.about-body p { font-size: 0.96rem; color: rgba(234,251,250,0.55); line-height: 1.8; margin-bottom: 1.1rem; }
.stats-row { display: flex; gap: 2.6rem; margin-top: 2.2rem; flex-wrap: wrap; }

.policy-section { max-width: 1100px; margin: 0 auto; padding: 1rem 2rem 6rem; border-top: 1px solid var(--teal-line); padding-top: 4rem; }
.policy-heading { font-family: 'Anton', sans-serif; font-size: 2.2rem; color: var(--paper); text-align: center; margin-bottom: 2.4rem; }
.policy-heading span { color: var(--teal); }
.policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; }
.policy-card { background: var(--teal-panel); border: 1px solid var(--teal-line); border-radius: 10px; padding: 1.8rem 1.6rem; }
.policy-icon { font-size: 1.6rem; margin-bottom: 0.8rem; }
.policy-card h3 { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 1rem; color: var(--paper); margin-bottom: 0.6rem; }
.policy-card p { font-size: 0.85rem; color: rgba(234,251,250,0.5); line-height: 1.65; }
.policy-thanks { text-align: center; margin-top: 2.4rem; color: rgba(234,251,250,0.35); font-size: 0.85rem; font-style: italic; }
.stat-num { font-family: 'Anton', sans-serif; font-size: 2.2rem; color: var(--teal-bright); line-height: 1; }
.stat-label { font-family: 'Archivo Expanded', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(234,251,250,0.4); margin-top: 4px; }

/* CONTACT */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; max-width: 1100px; margin: 0 auto; padding: 5rem 2rem; }
.contact-info h2 { font-family: 'Anton', sans-serif; font-size: 3rem; color: var(--paper); line-height: 1.05; margin-bottom: 1.4rem; }
.contact-info h2 span { color: var(--teal); }
.contact-info p { color: rgba(234,251,250,0.5); line-height: 1.7; margin-bottom: 1.8rem; }
.contact-methods { display: flex; flex-direction: column; gap: 0.9rem; }
.contact-method { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--teal-panel); border: 1px solid var(--teal-line); border-radius: 6px; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.contact-method:hover { border-color: var(--teal-line-strong); box-shadow: 0 4px 20px rgba(15,184,201,0.08); }
.contact-method-icon { font-size: 1.4rem; }
.contact-method-label { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 2px; }
.contact-method-value { font-size: 0.92rem; color: var(--paper); }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-label { font-family: 'Archivo Expanded', sans-serif; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-bright); }
.form-input, .form-select, .form-textarea { background: var(--teal-panel); border: 1px solid var(--teal-line); border-radius: 5px; color: var(--paper); font-family: 'Archivo', sans-serif; font-size: 0.92rem; padding: 0.8rem 1rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; width:100%; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,184,201,0.1); }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(234,251,250,0.22); }
.form-select { appearance: none; cursor: pointer; }
.form-textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* PAGE HERO BANNER */
.page-hero { background: radial-gradient(ellipse 700px 400px at 50% 0%, rgba(15,184,201,0.12), transparent 70%), var(--graphite); border-bottom: 1px solid var(--teal-line); padding: 4.5rem 2rem 3.5rem; text-align: center; }
.page-hero h1 { font-family: 'Anton', sans-serif; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1; color: var(--paper); margin-bottom: 0.7rem; }
.page-hero h1 span { color: var(--teal); }
.page-hero p { font-family: 'Archivo', sans-serif; font-size: 0.95rem; letter-spacing: 0.04em; color: rgba(234,251,250,0.4); }

.filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 1.5rem 2rem; max-width: 1300px; margin: 0 auto; align-items: center; }
.shop-search-input { font-family: 'Archivo', sans-serif; font-size: 0.85rem; background: rgba(255,255,255,0.03); border: 1px solid var(--teal-line); color: var(--paper); padding: 0.55rem 1.1rem; border-radius: 50px; min-width: 220px; flex: 1 1 220px; max-width: 320px; transition: border-color 0.2s; }
.shop-search-input::placeholder { color: rgba(234,251,250,0.32); }
.shop-search-input:focus { outline: none; border-color: var(--teal-line-strong); }
.filter-btn { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; background: none; border: 1px solid var(--teal-line); color: rgba(234,251,250,0.55); padding: 0.5rem 1.1rem; border-radius: 50px; cursor: pointer; transition: all 0.2s; }
.filter-btn:hover { border-color: var(--teal-line-strong); color: var(--paper); }
.shop-sort-select { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.04em; background: rgba(255,255,255,0.03); border: 1px solid var(--teal-line); color: rgba(234,251,250,0.75); padding: 0.5rem 1rem; border-radius: 50px; cursor: pointer; margin-left: auto; }
.shop-sort-select:focus { outline: none; border-color: var(--teal-line-strong); }
.booking-address-display { font-size: 0.95rem; font-weight: 600; color: var(--mint); margin-bottom: 0.6rem; }
.review-star { cursor: pointer; color: rgba(255,255,255,0.2); transition: color 0.15s; }
.review-star.filled { color: #ffb347; }
.review-star:hover { color: #ffb347; }
.public-reviews-section { padding: 4rem 2rem; max-width: 1300px; margin: 0 auto; }
.public-reviews-avg-row { display: flex; align-items: center; gap: 0.6rem; justify-content: center; margin-top: 0.5rem; flex-wrap: wrap; }
.public-reviews-avg-stars { font-size: 1.3rem; color: #ffb347; }
.public-reviews-avg-num { font-family: 'Anton', sans-serif; font-size: 1.5rem; color: var(--paper); }
.public-reviews-avg-label { font-size: 0.8rem; color: rgba(234,251,250,0.4); }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.review-card { background: var(--teal-panel); border: 1px solid var(--teal-line); border-radius: 10px; padding: 1.3rem; display: flex; flex-direction: column; }
.review-card-photo { width: 100%; height: 180px; object-fit: cover; border-radius: 6px; margin-bottom: 0.8rem; }
video.review-card-photo { height: 180px; }
.review-card-stars { color: #ffb347; font-size: 0.95rem; margin-bottom: 0.5rem; }
.review-card-comment { font-size: 0.85rem; color: rgba(234,251,250,0.75); line-height: 1.55; margin-bottom: 0.7rem; flex: 1; }
.review-card-byline { display: flex; flex-direction: column; gap: 0.1rem; margin-top: auto; }
.review-card-name { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.78rem; color: rgba(234,251,250,0.6); }
.review-card-location { font-size: 0.72rem; color: rgba(234,251,250,0.35); }
.filter-btn.active { background: rgba(15,184,201,0.18); border-color: var(--teal); color: var(--paper); }

/* FOOTER */
footer { background: var(--teal-panel); border-top: 1px solid var(--teal-line); padding: 4rem 2rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto 3rem; }
.footer-brand img.icon { height: 48px; width: 48px; margin-bottom: 1rem; filter: none; }
.footer-brand p { font-size: 0.85rem; color: rgba(234,251,250,0.4); line-height: 1.7; max-width: 260px; }
.footer-col h4 { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { font-size: 0.85rem; color: rgba(234,251,250,0.4); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--mint); }
.footer-bottom { border-top: 1px solid var(--teal-line); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; gap: 1rem; }
.footer-copy { font-size: 0.78rem; color: rgba(234,251,250,0.28); font-family: 'Archivo Expanded', sans-serif; letter-spacing: 0.03em; }
.footer-payments { display: flex; gap: 0.5rem; align-items: center; }
.payment-chip { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; padding: 4px 10px; font-size: 0.68rem; font-weight: 700; color: rgba(234,251,250,0.45); font-family: 'Archivo Expanded', sans-serif; letter-spacing: 0.03em; }

/* BASKET DRAWER */
.basket-overlay { position: fixed; inset: 0; background: rgba(6,18,26,0.72); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.basket-overlay.open { opacity: 1; pointer-events: all; }
.basket-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; background: var(--teal-deep); border-left: 1px solid var(--teal-line); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); z-index: 2001; display: flex; flex-direction: column; padding: 2rem; overflow-y:auto; }
.basket-drawer.open { transform: translateX(0); }
.basket-drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.basket-drawer-title { font-family: 'Anton', sans-serif; font-size: 1.7rem; color: var(--paper); }
.basket-close { background: none; border: none; color: rgba(234,251,250,0.5); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.basket-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(234,251,250,0.28); text-align: center; gap: 1rem; }
.basket-empty-icon { font-size: 2.6rem; }
.basket-empty p { font-family: 'Archivo Expanded', sans-serif; font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; }
.basket-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.basket-item { display: flex; gap: 1rem; align-items: flex-start; background: rgba(255,255,255,0.03); border: 1px solid var(--teal-line); border-radius: 6px; padding: 0.9rem; }
.basket-item-thumb { width: 48px; height: 48px; border-radius: 5px; flex-shrink: 0; overflow: hidden; }
.basket-item-thumb img { width:100%; height:100%; object-fit:cover; }
.basket-item-info { flex: 1; }
.basket-item-name { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; }
.basket-item-sub { font-size: 0.76rem; color: rgba(234,251,250,0.4); }
.basket-item-price { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--teal-bright); }
.basket-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; flex-shrink: 0; }
.basket-item-remove { background: none; border: none; color: rgba(255,138,122,0.7); font-size: 0.72rem; font-family: 'Archivo', sans-serif; cursor: pointer; text-decoration: underline; padding: 0; }
.basket-item-remove:hover { color: #ff8a7a; }
.basket-qty-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.basket-qty-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--teal-line); background: rgba(255,255,255,0.04); color: var(--paper); font-size: 0.9rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.basket-qty-btn:hover { border-color: var(--teal-line-strong); }
.basket-qty-value { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.85rem; min-width: 1.2rem; text-align: center; }
.basket-footer { border-top: 1px solid var(--teal-line); padding-top: 1.4rem; margin-top: 1rem; }
.basket-total { display: flex; justify-content: space-between; font-family: 'Archivo Expanded', sans-serif; font-weight: 700; margin-bottom: 1.1rem; }
.basket-total span:first-child { font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(234,251,250,0.45); }
.basket-total span:last-child { font-size: 1.4rem; color: var(--paper); }
.shipping-note { font-size: 0.74rem; color: rgba(234,251,250,0.3); text-align: center; margin-top: 0.8rem; font-family: 'Archivo Expanded', sans-serif; }

/* PROMO CODE (basket drawer) */
.promo-code-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.promo-code-input { flex: 1; padding: 0.7rem 0.9rem !important; font-size: 0.85rem !important; }
.promo-apply-btn { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(15,184,201,0.14); border: 1px solid var(--teal-line-strong); color: var(--mint); padding: 0 1.1rem; border-radius: 5px; cursor: pointer; transition: background 0.2s; white-space: nowrap; }
.promo-apply-btn:hover { background: rgba(15,184,201,0.24); }
.promo-applied-row { display: flex; align-items: center; gap: 0.6rem; background: rgba(15,184,201,0.1); border: 1px solid var(--teal-line-strong); border-radius: 6px; padding: 0.7rem 0.9rem; margin-bottom: 1rem; }
.promo-applied-label { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--mint); flex: 1; }
.promo-applied-amount { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.88rem; color: var(--teal-bright); }
.promo-remove-btn { background: none; border: none; color: rgba(234,251,250,0.4); font-size: 0.72rem; text-decoration: underline; cursor: pointer; font-family: 'Archivo', sans-serif; }
.promo-remove-btn:hover { color: #ff8a7a; }
.basket-subtotal-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: rgba(234,251,250,0.5); margin-bottom: 0.5rem; }

/* ACCOUNT PAGE */
.account-layout { max-width: 700px; margin: 0 auto; padding: 3.5rem 2rem 5rem; }
.account-profile-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.2rem; background: var(--teal-panel); border: 1px solid var(--teal-line); border-radius: 10px; padding: 1.6rem 1.8rem; }
.account-profile-name { font-family: 'Anton', sans-serif; font-size: 1.5rem; color: var(--paper); }
.account-profile-email { font-size: 0.85rem; color: rgba(234,251,250,0.45); margin-top: 2px; }
.account-order-card { background: var(--teal-panel); border: 1px solid var(--teal-line); border-radius: 8px; padding: 1.1rem 1.3rem; margin-bottom: 0.9rem; }
.account-order-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.account-order-ref { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--paper); }
.account-order-status { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; }
.status-paid { background: rgba(15,184,201,0.18); color: var(--mint); }
.status-pending { background: rgba(217,178,92,0.18); color: var(--gold); }
.status-failed, .status-refunded { background: rgba(255,90,90,0.15); color: #ff8a7a; }
.account-order-date { font-size: 0.74rem; color: rgba(234,251,250,0.35); margin-bottom: 0.5rem; }
.account-order-items { font-size: 0.82rem; color: rgba(234,251,250,0.55); margin-bottom: 0.4rem; line-height: 1.5; }
.account-order-promo { font-size: 0.76rem; color: var(--teal-bright); margin-bottom: 0.4rem; }
.account-order-total { font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--teal-bright); }

/* PRODUCTION STEPPER ("Track My Grillz") */
.production-stepper { display: flex; flex-wrap: wrap; gap: 0.5rem 0; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--teal-line); }
.production-step { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 90px; position: relative; opacity: 0.4; }
.production-step.done { opacity: 1; }
.production-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(234,251,250,0.2); flex-shrink: 0; }
.production-step.done .production-dot { background: var(--teal); }
.production-step.current .production-dot { background: var(--teal-bright); box-shadow: 0 0 0 4px rgba(15,184,201,0.25); }
.production-label { font-size: 0.68rem; font-family: 'Archivo Expanded', sans-serif; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(234,251,250,0.6); }
.production-step.current .production-label { color: var(--teal-bright); }

/* DENTAL SCAN UPLOAD */
.scan-upload-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* TOAST */
.toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--teal); color: #06121A; font-family: 'Archivo Expanded', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 1rem 2rem; border-radius: 5px; z-index: 3000; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 8px 30px rgba(15,184,201,0.35); white-space: nowrap; }
.toast.show { transform: translateX(-50%) translateY(0); }

/* CHECKOUT MODAL */
.checkout-overlay { position: fixed; inset:0; background: rgba(6,18,26,0.8); z-index: 4000; opacity:0; pointer-events:none; transition: opacity 0.3s; display:flex; align-items:center; justify-content:center; padding: 2rem; }
.checkout-overlay.open { opacity:1; pointer-events:all; }
.checkout-modal { background: var(--teal-deep); border:1px solid var(--teal-line); border-radius: 10px; max-width: 560px; width:100%; max-height: 90vh; overflow-y:auto; padding: 2.2rem; }
.checkout-modal h2 { font-family:'Anton',sans-serif; font-size:1.8rem; margin-bottom:0.3rem; }
.checkout-modal .sub { font-size:0.85rem; color:rgba(234,251,250,0.45); margin-bottom:1.6rem; }
.checkout-section { margin-bottom: 1.4rem; }
.payment-tabs { display:flex; gap:0.6rem; margin-bottom:1.2rem; }
.payment-tab { flex:1; text-align:center; font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; padding:0.8rem; border-radius:6px; border:1px solid var(--teal-line); background:rgba(255,255,255,0.02); color:rgba(234,251,250,0.6); cursor:pointer; transition:all 0.2s; }
.payment-tab.active { border-color:var(--teal); background:rgba(15,184,201,0.14); color:var(--paper); }
#stripe-card-element { background: var(--teal-panel); border:1px solid var(--teal-line); border-radius:6px; padding:0.9rem 1rem; }
#paypal-button-container { min-height: 45px; }
.checkout-total-row { display:flex; justify-content:space-between; align-items:baseline; padding: 1rem 0; border-top:1px solid var(--teal-line); margin-top:0.5rem; }
.checkout-total-row .label { font-family:'Archivo Expanded',sans-serif; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(234,251,250,0.5); }
.checkout-total-row .value { font-family:'Anton',sans-serif; font-size:1.8rem; color:var(--teal-bright); }
.checkout-error { background: rgba(255,90,90,0.1); border:1px solid rgba(255,90,90,0.3); color:#ff8a7a; font-size:0.85rem; padding:0.8rem 1rem; border-radius:6px; margin-bottom:1rem; display:none; }
.checkout-error.show { display:block; }
.form-success { background: rgba(15,184,201,0.1); border:1px solid var(--teal-line-strong); color: var(--mint); font-size:0.85rem; padding:0.8rem 1rem; border-radius:6px; }
.checkout-close { position:absolute; top:1.4rem; right:1.4rem; background:none; border:none; color:rgba(234,251,250,0.5); font-size:1.4rem; cursor:pointer; }
.checkout-modal { position:relative; }
.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(6,18,26,0.3); border-top-color:#06121A; border-radius:50%; animation:spin 0.7s linear infinite; margin-right:8px; vertical-align:middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* PRODUCT OPTIONS MODAL — opens from "Choose Options" on multi-material
   catalogue pieces (the K9 grillz photos). Modelled on .checkout-modal. */
.product-modal-overlay { position: fixed; inset:0; background: rgba(6,18,26,0.8); z-index: 4000; opacity:0; pointer-events:none; transition: opacity 0.3s; display:flex; align-items:center; justify-content:center; padding: 2rem; }
.product-modal-overlay.open { opacity:1; pointer-events:all; }
.product-modal { background: var(--teal-deep); border:1px solid var(--teal-line); border-radius: 10px; max-width: 600px; width:100%; max-height: 90vh; overflow-y:auto; padding: 2.2rem; position: relative; }
.product-modal-close { position:absolute; top:1.4rem; right:1.4rem; background:none; border:none; color:rgba(234,251,250,0.5); font-size:1.4rem; cursor:pointer; line-height:1; }
.product-modal h2 { font-family:'Anton', sans-serif; font-size:1.7rem; margin-bottom:0.3rem; padding-right: 2rem; }
.product-modal .sub { font-size:0.85rem; color:rgba(234,251,250,0.45); margin-bottom:1.3rem; }
.product-modal-img { width:100%; aspect-ratio:1; border-radius:8px; overflow:hidden; background:#0a1e28; margin-bottom:1.1rem; }
.product-modal-img img { width:100%; height:100%; object-fit:contain; object-position:center center; display:block; }
.tone-swatches { display:flex; gap:0.7rem; margin-bottom:1.4rem; }
.tone-swatch { flex:1; display:flex; flex-direction:column; align-items:center; gap:0.45rem; cursor:pointer; padding:0.6rem; border-radius:7px; border:1px solid var(--teal-line); background:rgba(255,255,255,0.02); transition: border-color 0.15s, background 0.15s; }
.tone-swatch:hover { border-color: var(--teal-line-strong); }
.tone-swatch.active { border-color: var(--teal); background: rgba(15,184,201,0.12); }
.tone-swatch img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:5px; display:block; background:#0a1e28; }
.tone-swatch span { font-family:'Archivo Expanded', sans-serif; font-weight:700; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:rgba(234,251,250,0.65); }
.style-toggle { display:flex; gap:0.6rem; margin-top:0.7rem; }
.style-toggle button { flex:1; font-family:'Archivo Expanded', sans-serif; font-weight:700; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; padding:0.85rem 0.6rem; border-radius:6px; border:1px solid var(--teal-line); background:rgba(255,255,255,0.02); color:rgba(234,251,250,0.6); cursor:pointer; transition: all 0.2s; }
.style-toggle button:hover { border-color: var(--teal-line-strong); }
.style-toggle button.active { border-color: var(--teal); background: rgba(15,184,201,0.14); color: var(--paper); }
.product-modal-total-row { display:flex; justify-content:space-between; align-items:baseline; padding:1rem 0; border-top:1px solid var(--teal-line); margin-top:1.2rem; }
.product-modal-total-row .label { font-family:'Archivo Expanded', sans-serif; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(234,251,250,0.5); }
.product-modal-total-row .value { font-family:'Anton', sans-serif; font-size:1.8rem; color: var(--teal-bright); }

/* RESPONSIVE */
@media (max-width: 1080px) and (min-width: 1051px) {
  /* A narrow sliver between the new hamburger breakpoint and a full
     laptop width -- tighten spacing same as the 1300px rule below. */
  .nav-links { gap: 0; }
  .nav-links a { padding: 0.55rem 0.5rem; font-size: 0.68rem; }
}
@media (max-width: 1300px) and (min-width: 1081px) {
  /* Between the hamburger breakpoint and a full desktop width, 9 nav
     items can get tight (laptops) -- tighten spacing before resorting
     to the mobile menu. */
  .nav-links { gap: 0; }
  .nav-links a { padding: 0.55rem 0.55rem; font-size: 0.7rem; }
  .nav-cta { padding: 0.7rem 1.1rem; font-size: 0.72rem; }
}
@media (max-width: 980px) { .builder-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1050px) {
  /* iPad landscape is exactly 1024px wide -- even with the spacing
     squeeze above, "Build Your Own" (the longest nav label) was
     wrapping onto three stacked lines. Tablets are touch devices
     anyway, so it's cleaner to just give them the same hamburger menu
     phones get, rather than keep squeezing the desktop nav further. */
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-links.mobile-open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: rgba(14,37,48,0.98); backdrop-filter: blur(16px); padding: 1.5rem 2rem; border-bottom: 1px solid var(--teal-line); gap: 0.3rem; z-index: 998; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-links.mobile-open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: rgba(14,37,48,0.98); backdrop-filter: blur(16px); padding: 1.5rem 2rem; border-bottom: 1px solid var(--teal-line); gap: 0.3rem; z-index: 998; }
  .features { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .basket-drawer { width: 100%; }

  /* Nav: drop the CTA button (it's redundant with the hamburger menu's own
     Build Your Own link) and shrink the logo so basket+hamburger always fit
     on one line without wrapping. */
  nav { padding: 0 1rem; height: 70px; }
  .nav-cta { display: none; }
  .nav-logo img.wordmark { height: 56px; }
  .nav-basket { font-size: 0.7rem; margin-left: 0.4rem; white-space: nowrap; }
  .hero-logo-icon { width: 80px; height: 80px; }
  .hero-sub { padding: 0 0.5rem; }

  .ticker-track span { padding: 0 1.2rem; font-size: 0.68rem; }

  /* Checkout / builder cards: tighten side padding so content isn't
     squeezed against the screen edge. Single source of truth for this
     padding — do not redefine .builder-mouth-card padding in the 540px
     breakpoint below, or it overrides this with conflicting values.
     .builder-layout's own side padding is tightened here too -- on a
     narrow phone the outer layout padding plus the card's own padding
     was eating ~50-60px of width before the diagram (which renders at
     100% of whatever's left) ever got drawn, making it look noticeably
     smaller than it needs to. */
  .checkout-modal { padding: 1.4rem 1.2rem; }
  .product-modal { padding: 1.4rem 1.2rem; }
  .builder-layout { padding: 1.2rem 0.5rem 3rem; }
  .builder-mouth-card { padding: 1.4rem 0.6rem; }
  .page-hero { padding: 3.5rem 1.2rem 2.5rem; }
  .section { padding: 3rem 1.2rem; }
  .hero { padding: 3rem 1.2rem 4rem; }
}
@media (max-width: 540px) {
  .features { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .stats-row { gap: 1.4rem; }
  .policy-grid { grid-template-columns: 1fr; }
  .production-step { min-width: 70px; }
  .production-label { font-size: 0.6rem; }
  .scan-upload-row { flex-direction: column; align-items: stretch; }
  .scan-upload-row select, .scan-upload-row button { width: 100%; }

  .builder-layout { padding: 1rem 0.3rem 2.5rem; }
  .builder-mouth-card { padding: 1.2rem 0.5rem; }
  .mouth-toolbar { gap: 0.4rem; }
  .tool-btn { font-size: 0.66rem; padding: 0.45rem 0.7rem; }
  .checkout-modal { padding: 1.2rem 1rem; }
  .product-modal { padding: 1.2rem 1rem; }
}

/* Global safety net: never allow horizontal overflow regardless of which
   component is responsible — this is a backstop, not a fix for the root
   cause, so the rules above should still be the first line of defence. */
html, body { max-width: 100%; overflow-x: hidden; }