:root{
  --bg:#0E0E0E;
  --bg2:#0E0E0E;
  --gradient-start:#1B2B34;
  --gradient-end:#243B55;
  --cyan:#00BFFF;
  --gold:#E6C773;
  --ink:#F5F7FA;
  --muted:#A9B4C0;
  --card:#12171E;
  --accent:#1C415A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
a{color:var(--cyan);text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:rgba(14,58,59,.9);backdrop-filter:saturate(150%) blur(8px);z-index:50;border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px}
.brand h1{font-size:20px;margin:0;letter-spacing:.5px}
.cta{display:flex;gap:10px;align-items:center}
.btn{padding:12px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,#0A2A3D,#0F3E5A);box-shadow:0 0 0 rgba(0,191,255,0.0);color:#fff;cursor:pointer;transition:.2s transform,.2s box-shadow}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 18px rgba(0,191,255,.45)}
.btn.ghost{background:transparent;border-color:rgba(0,191,255,.35)}
.hero{padding:48px 0 24px;background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end))}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
h2.big{font-size:44px;line-height:1.05;margin:.2em 0}
.sub{color:var(--muted);font-size:18px;margin:12px 0 22px}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:8px 12px;border-radius:999px;font-size:13px;color:#E9EFEF}
.mascot{max-width:420px;margin:0 auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.section{padding:36px 0}
.section h3{font-size:28px;margin:0 0 16px}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.card .content{padding:14px}
.card h4{margin:0 0 6px;font-size:18px;letter-spacing:.2px}
.price{color:var(--gold);font-weight:700;margin:2px 0 8px}
.desc{font-size:14px;color:#E1E8E8;opacity:.95}
.card .actions{display:flex;gap:10px;margin-top:auto;padding:14px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kpi{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px}
.kpi h5{margin:0;font-size:14px;color:var(--muted)}
.kpi p{margin:8px 0 0;font-size:18px;font-weight:700}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.step{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:16px}
footer{padding:28px 0;border-top:1px solid rgba(255,255,255,.06);background:var(--bg2);color:#cfe2e2}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.small{font-size:13px;color:#9fb2b2}
.disclaimer{font-size:12px;color:#9fb2b2;margin-top:10px}
.cart-fab{position:fixed;right:18px;bottom:18px;background:var(--gold);color:#0B2F30;font-weight:800;border-radius:999px;padding:14px 18px;box-shadow:0 10px 22px rgba(0,0,0,.35);cursor:pointer;z-index:60}
.drawer{position:fixed;top:0;right:-420px;width:380px;max-width:92vw;height:100vh;background:#0c3233;border-left:1px solid rgba(255,255,255,.1);transition:right .25s;z-index:70;display:flex;flex-direction:column}
.drawer.open{right:0}
.drawer header{padding:14px;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer .items{flex:1;overflow:auto;padding:12px}
.line{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.qty{display:flex;gap:6px;align-items:center}
.qty button{width:26px;height:26px;border-radius:6px;background:var(--accent);border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer}
.drawer footer{padding:14px;border-top:1px solid rgba(255,255,255,.1)}
.total-line{display:flex;align-items:center;justify-content:space-between;margin:8px 0;font-weight:700}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr}
  .grid.cols-4{grid-template-columns:1fr 1fr}
  .footer-cols{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr 1fr}
}


@media(max-width:600px){
  .mascot{max-width:200px;margin:8px auto 0;}
  h2.big{font-size:34px;line-height:1.1}
  .sub{font-size:16px}
}


/* Cart count badge */
.badge-count{position:relative}
.badge-count .count{position:absolute;top:-8px;right:-8px;background:var(--cyan);color:#001018;border-radius:999px;padding:2px 6px;font-size:12px;font-weight:800;min-width:18px;text-align:center}

/* Sticky mini-cart for mobile */
.mini-cart{position:fixed;left:0;right:0;bottom:-120px;background:rgba(18,23,30,.98);border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;padding:12px 16px;transition:bottom .25s ease;z-index:80}
.mini-cart.show{bottom:0}
.mini-cart .tot{font-weight:800}
@media(min-width:801px){.mini-cart{display:none}}


@media(max-width:600px){
  .mascot{max-width:300px;margin:8px auto 0}
}


@media(max-width:600px){
  .hero .mascot{width:90vw;max-width:380px;margin:8px auto 0;display:block}
}


.hero .visual{width:100%}
@media(max-width:700px){
  .hero .mascot{width:92vw !important; max-width:440px !important; height:auto; display:block; margin:8px auto 0}
}


/* ==== Mobile layout fix for /checkout (safe & generic) ==== */

/* iOS: prevent zoom on focus, ensure touch targets */
html { -webkit-text-size-adjust: 100%; }
input, select, textarea, button { font-size: 16px; }

/* Keep everything inside small screens readable and prevent sideways scroll */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }

  /* Collapse common grid/flex rows into a single column */
  .checkout, .checkout-page, main, .container, .content { width: 100%; }
  .checkout-grid,
  .grid,
  .row,
  .columns,
  .flex {
    display: block !important;
    width: 100% !important;
  }
  .checkout-grid > *,
  .grid > *,
  .row > *,
  .columns > *,
  .flex > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Inputs & selects full width and thumb-friendly height */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    width: 100% !important;
    min-height: 44px;
  }

  /* Two-up form rows (City/Province, Address 1/2, etc.) become single column */
  .form-row--2col,
  .two-col,
  .half-row {
    display: block !important;
  }
  .form-row--2col > *,
  .two-col > *,
  .half-row > * {
    width: 100% !important;
  }

  /* Order Summary controls */
  .summary select { width: 100% !important; }

  /* Buttons */
  .button, .btn, button[type="submit"], #place-order {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
  }

  /* Long lines (emails/order numbers) should wrap nicely */
  .break-all, .wrap-long, .summary p, .summary span {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Slightly tighter headings on small screens */
@media (max-width: 640px) {
  h1, h2, .section-title { font-size: 20px; line-height: 1.2; }
}