/* ============================================================
   ROKONMA SHOP — clean corporate · light · professional · 3D
   ============================================================ */

:root {
  --bg:      #f5f7fb;        /* light corporate grey-blue */
  --bg-2:    #ffffff;
  --panel:   #ffffff;
  --panel-2: #eef3fb;
  --line:    #e2e8f2;
  --line-2:  #cdd8e8;
  --ink:     #0f2444;        /* deep navy text */
  --ink-2:   #36476a;
  --dim:     #6b7894;
  --navy:    #123a72;
  --blue:    #1f6feb;
  --blue-d:  #1659c4;
  --accent:  #1f6feb;
  --grad:    linear-gradient(120deg,#123a72,#1f6feb);
  --grad-2:  linear-gradient(120deg,#1f6feb,#3b9cff);

  --sans: 'Sora','Inter',system-ui,sans-serif;
  --mono: 'Space Mono',ui-monospace,monospace;
  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.4,0,.2,1);
  --gut: clamp(18px,4vw,72px);

  --shadow-sm: 0 1px 3px rgba(15,36,68,.06);
  --shadow-md: 0 8px 28px rgba(15,36,68,.08);
  --shadow-lg: 0 20px 52px rgba(15,36,68,.12);
  --shadow-blue: 0 10px 28px rgba(31,111,235,.25);
}

* , *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--sans); background:var(--bg); color:var(--ink); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
body.loading { overflow:hidden; }
body.no-scroll { overflow:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; color:inherit; }
::selection { background:var(--blue); color:#fff; }
.wrap { padding:0 var(--gut); }
.mono { font-family:var(--mono); }

/* subtle background tint blobs (very faint, professional) */
.aurora { position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.aurora span { position:absolute; border-radius:50%; filter:blur(120px); opacity:.12; }
.aurora .a1 { width:520px; height:520px; background:var(--blue); top:-180px; left:-140px; }
.aurora .a2 { width:460px; height:460px; background:var(--navy); top:38%; right:-180px; }
.aurora .a3 { width:420px; height:420px; background:var(--blue); bottom:-200px; left:34%; opacity:.08; }
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(15,36,68,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(15,36,68,.025) 1px,transparent 1px);
  background-size:64px 64px; }

/* ── Loader ─────────────────────────────────────────────────── */
#loader { position:fixed; inset:0; z-index:99999; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; transition:opacity .6s var(--ease), visibility .6s var(--ease); }
body:not(.loading) #loader { opacity:0; visibility:hidden; }
.l-orb { width:54px; height:54px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--blue); animation:spin 0.9s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.l-txt { font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--dim); }

/* ── Scroll progress ────────────────────────────────────────── */
#scroll-progress { position:fixed; top:0; left:0; height:3px; width:0; background:var(--blue); z-index:10000; }

/* ── Header ─────────────────────────────────────────────────── */
.head { position:fixed; top:0; left:0; right:0; z-index:9000; display:flex; align-items:center; justify-content:space-between; padding:16px var(--gut); transition:.3s var(--ease); }
.head.scrolled { background:rgba(255,255,255,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px; letter-spacing:.01em; color:var(--ink); }
.brand img { height:34px; width:auto; display:block; }
.brand .dot { width:11px; height:11px; border-radius:3px; background:var(--grad); }
.brand b { color:var(--blue); }
.nav { display:flex; align-items:center; gap:4px; }
.nav a { padding:9px 15px; font-size:14px; font-weight:600; color:var(--ink-2); border-radius:8px; transition:.2s var(--ease); }
.nav a:hover, .nav a.active { color:var(--blue); background:var(--panel-2); }
.nav .cart-btn { display:flex; align-items:center; gap:8px; background:var(--navy); color:#fff; padding:9px 18px; border-radius:8px; position:relative; transition:.2s var(--ease); }
.nav .cart-btn:hover { background:var(--blue); }
.cart-count { min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:#fff; color:var(--navy); font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.menu-btn { display:none; font-size:22px; color:var(--ink); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14.5px; padding:14px 28px; border-radius:8px; transition:.2s var(--ease); position:relative; }
.btn-grad { background:var(--navy); color:#fff; box-shadow:var(--shadow-blue); }
.btn-grad:hover { background:var(--blue); transform:translateY(-2px); box-shadow:0 14px 34px rgba(31,111,235,.35); }
.btn-glass { background:#fff; border:1px solid var(--line-2); color:var(--ink); box-shadow:var(--shadow-sm); }
.btn-glass:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-block { width:100%; justify-content:center; }
.btn i, .btn .ar { transition:transform .25s var(--ease); }
.btn:hover .ar { transform:translateX(4px); }

/* ── Transparent header over hero (homepage) ───────────────── */
.head.head-hero:not(.scrolled) { background:transparent; border-bottom:1px solid transparent; box-shadow:none; }
.head.head-hero:not(.scrolled) .nav a.nav-link { color:rgba(255,255,255,.9); }
.head.head-hero:not(.scrolled) .nav a.nav-link:hover,
.head.head-hero:not(.scrolled) .nav a.nav-link.active { color:#fff; background:rgba(255,255,255,.16); }
.head.head-hero:not(.scrolled) .nav .has-drop > .nav-link { color:rgba(255,255,255,.9); }
.head.head-hero:not(.scrolled) .menu-btn { color:#fff; }
.head.head-hero:not(.scrolled) .brand .logo-dark { display:none; }
.head .brand .logo-light { display:none; }
.head.head-hero:not(.scrolled) .brand .logo-light { display:block; }
.head.head-hero:not(.scrolled) .nav .cart-btn { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(6px); }
.head.head-hero:not(.scrolled) .nav .cart-btn:hover { background:var(--blue); border-color:var(--blue); }
.head.head-hero:not(.scrolled) .nav .cart-count { background:#fff; color:var(--navy); }
.brand img { transition:opacity .2s var(--ease); }

/* ── HERO SLIDER (3 real ROKONMA banners) ───────────────────── */
.hero-slider { position:relative; height:100vh; min-height:560px; overflow:hidden; }
.hs-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease); }
.hs-slide.on { opacity:1; }
.hs-slide::before { content:''; position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); }
.hs-slide.on::before { animation:kenburns 7s ease-out forwards; }
@keyframes kenburns { from{transform:scale(1.04)} to{transform:scale(1.12)} }
.hs-slide.s1::before { background-image:url('../images/rkm/hero_1.jpg'); }
.hs-slide.s2::before { background-image:url('../images/rkm/hero_2.jpg'); }
.hs-slide.s3::before { background-image:url('../images/rkm/hero_3.jpg'); }
.hs-slide::after { content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(6,15,31,.9) 0%,rgba(7,23,57,.62) 38%,rgba(7,23,57,.2) 66%,rgba(7,23,57,.05) 100%),
             radial-gradient(120% 90% at 30% 50%, transparent 40%, rgba(6,15,31,.45) 100%); }
/* top scrim so the transparent header text stays readable */
.hero-slider::before { content:''; position:absolute; top:0; left:0; right:0; height:160px; z-index:3; pointer-events:none; background:linear-gradient(180deg,rgba(6,15,31,.55),transparent); }
.hs-inner { position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:center; padding:90px var(--gut) 0; max-width:1500px; margin:0 auto; }
.hs-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; padding:7px 15px; border-radius:99px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; margin-bottom:24px; width:fit-content; backdrop-filter:blur(6px); }
.hs-eyebrow .pdot { width:7px; height:7px; border-radius:50%; background:#7db0ff; }
.hs-slide .hs-text { max-width:680px; }
.hs-slide h1 { font-size:clamp(40px,6vw,76px); font-weight:800; line-height:1.04; letter-spacing:-.02em; color:#fff; margin-bottom:18px; opacity:0; transform:translateY(20px); }
.hs-slide.on h1 { animation:hsUp .8s var(--ease) .2s forwards; }
.hs-slide p.hs-sub { font-size:clamp(16px,2vw,21px); color:rgba(255,255,255,.9); max-width:540px; margin-bottom:30px; opacity:0; transform:translateY(20px); }
.hs-slide.on p.hs-sub { animation:hsUp .8s var(--ease) .35s forwards; }
.hs-actions { display:flex; gap:14px; flex-wrap:wrap; opacity:0; transform:translateY(20px); }
.hs-slide.on .hs-actions { animation:hsUp .8s var(--ease) .5s forwards; }
.hs-actions .btn-glass { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); color:#fff; backdrop-filter:blur(6px); }
.hs-actions .btn-glass:hover { background:#fff; color:var(--navy); }
@keyframes hsUp { to{opacity:1;transform:none} }
/* arrows + dots */
.hs-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:24px; display:flex; align-items:center; justify-content:center; transition:.2s var(--ease); backdrop-filter:blur(6px); }
.hs-arrow:hover { background:var(--blue); border-color:var(--blue); }
.hs-prev { left:22px; } .hs-next { right:22px; }
.hs-dots { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:4; display:flex; gap:10px; }
.hs-dots i { width:34px; height:4px; border-radius:3px; background:rgba(255,255,255,.35); cursor:pointer; transition:.3s var(--ease); }
.hs-dots i.on { background:#fff; width:48px; }
/* scroll cue */
.hs-scroll { position:absolute; bottom:28px; left:var(--gut); z-index:4; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.7); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.hs-scroll .mouse { width:22px; height:34px; border:2px solid rgba(255,255,255,.6); border-radius:12px; position:relative; }
.hs-scroll .mouse::after { content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:3px; height:6px; border-radius:2px; background:#fff; animation:scrollwheel 1.6s var(--ease) infinite; }
@keyframes scrollwheel { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1;transform:translate(-50%,10px)} 100%{opacity:0;transform:translate(-50%,10px)} }
@media (max-width:720px){ .hs-scroll{ display:none } }

.hs-mini { position:absolute; bottom:26px; right:var(--gut); z-index:4; display:flex; gap:34px; }
.hs-mini .m .n { font-size:26px; font-weight:800; color:#fff; }
.hs-mini .m .l { font-size:12px; color:rgba(255,255,255,.7); }
@media (max-width:720px){ .hs-arrow{ width:42px;height:42px;font-size:20px } .hs-prev{left:10px} .hs-next{right:10px} .hs-mini{ display:none } }

/* neon 3D stage — dark glowing backdrop so the neon roller pops */
.stage.stage-neon { background:radial-gradient(58% 58% at 50% 46%, #20407e 0%, #122a5c 50%, #0a1733 100%); border-color:#1b2f63; box-shadow:var(--shadow-lg), inset 0 0 80px rgba(70,150,255,.3); }
.stage.stage-neon::after { content:''; position:absolute; inset:0; margin:auto; width:62%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(60,150,255,.45), transparent 65%); filter:blur(26px); pointer-events:none; z-index:0; animation:neonPulse 3.4s ease-in-out infinite; }
@keyframes neonPulse { 0%,100%{opacity:.6;transform:scale(.96)} 50%{opacity:1;transform:scale(1.04)} }
.stage.stage-neon model-viewer { position:relative; z-index:1; }
.stage.stage-neon .ring { border-color:rgba(120,180,255,.35); }
.stage.stage-neon .badge3d { background:rgba(10,23,51,.7); border-color:rgba(120,180,255,.4); color:#9cc2ff; backdrop-filter:blur(4px); }
.stage.stage-neon .drag-hint { background:rgba(10,23,51,.7); border-color:rgba(120,180,255,.4); color:#9cc2ff; backdrop-filter:blur(4px); }

/* 3D showcase strip below slider */
.hero3d-strip { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:clamp(60px,8vw,110px) var(--gut); }
.hero3d-strip .h3s-stage { height:60vh; min-height:400px; }

/* ── HERO with 3D ───────────────────────────────────────────── */
.hero { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:120px var(--gut) 60px; position:relative; }
.hero-l { position:relative; z-index:2; }
.hero-pill { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; padding:7px 15px; border-radius:99px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink-2); margin-bottom:26px; }
.hero-pill .pdot { width:7px; height:7px; border-radius:50%; background:var(--blue); }
.hero h1 { font-size:clamp(42px,5.8vw,80px); font-weight:800; line-height:1.04; letter-spacing:-.02em; margin-bottom:22px; }
.hero h1 .g { color:var(--blue); }
.hero p { font-size:17px; color:var(--ink-2); max-width:480px; margin-bottom:32px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:42px; }
.hero-mini { display:flex; gap:42px; flex-wrap:wrap; }
.hero-mini .m .n { font-size:30px; font-weight:800; color:var(--navy); }
.hero-mini .m .l { font-size:12.5px; color:var(--dim); font-weight:500; }

.hero-3d { position:relative; height:74vh; min-height:440px; }
.stage { width:100%; height:100%; border-radius:18px; overflow:hidden; position:relative; background:radial-gradient(60% 60% at 50% 45%, rgba(31,111,235,.08), #fff 72%); border:1px solid var(--line); box-shadow:var(--shadow-lg); }
model-viewer { width:100%; height:100%; --poster-color:transparent; background:transparent; }
.stage .ring { position:absolute; inset:0; margin:auto; width:78%; aspect-ratio:1; border:1px dashed var(--line-2); border-radius:50%; animation:spinr 40s linear infinite; pointer-events:none; }
@keyframes spinr { to{transform:rotate(360deg)} }
.stage .badge3d { position:absolute; top:16px; left:16px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; padding:6px 13px; border-radius:6px; background:#fff; border:1px solid var(--line); color:var(--ink-2); }
.stage .drag-hint { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--dim); display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:6px; background:#fff; border:1px solid var(--line); }

/* ── Marquee (straight, restrained) ─────────────────────────── */
.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; overflow:hidden; white-space:nowrap; background:#fff; }
.mq-track { display:inline-flex; gap:0; animation:mq 40s linear infinite; }
.mq-track span { font-size:15px; font-weight:600; color:var(--dim); letter-spacing:.04em; padding:0 30px; display:inline-flex; align-items:center; gap:30px; }
.mq-track span::after { content:''; width:5px; height:5px; border-radius:50%; background:var(--blue); }
@keyframes mq { to{transform:translateX(-50%)} }

/* ── Section ────────────────────────────────────────────────── */
.sec { padding:clamp(70px,9vw,130px) var(--gut); position:relative; }
.sec-head { text-align:center; max-width:640px; margin:0 auto clamp(40px,6vw,64px); }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:16px; }
.eyebrow::before, .eyebrow::after { content:''; width:24px; height:1px; background:var(--line-2); }
.sec-head h2 { font-size:clamp(30px,4.4vw,52px); font-weight:800; letter-spacing:-.02em; line-height:1.08; }
.sec-head h2 .g { color:var(--blue); }
.sec-head p { margin-top:14px; color:var(--ink-2); font-size:16px; }

/* ── Product grid (shop cards) ──────────────────────────────── */
.shop-toolbar { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-bottom:34px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font-size:13px; font-weight:600; padding:9px 16px; border-radius:8px; border:1px solid var(--line-2); background:#fff; color:var(--ink-2); transition:.2s var(--ease); }
.chip:hover, .chip.active { color:#fff; background:var(--navy); border-color:var(--navy); }
.chip-link { color:var(--blue); border-color:var(--blue); border-style:dashed; }
.chip-link:hover { background:var(--blue); border-style:solid; color:#fff; }
.searchbox input { background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:11px 18px; font-family:var(--sans); font-size:14px; color:var(--ink); outline:none; min-width:240px; transition:.2s var(--ease); box-shadow:var(--shadow-sm); }
.searchbox input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,111,235,.12); }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; align-items:stretch; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; height:100%; position:relative; transition:.3s var(--ease); box-shadow:var(--shadow-sm); }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--line-2); }
.card .c-media { height:220px; background:#f8fafd; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.card .c-media img { max-width:78%; max-height:78%; object-fit:contain; transition:transform .4s var(--ease); }
.card:hover .c-media img { transform:scale(1.06); }
.card .c-badge { position:absolute; top:14px; left:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; padding:5px 11px; border-radius:6px; background:#fff; border:1px solid var(--line); color:var(--ink-2); }
.card .c-badge.hot { background:var(--navy); border-color:var(--navy); color:#fff; }
.card .c-body { padding:20px; display:flex; flex-direction:column; flex:1; border-top:1px solid var(--line); }
.card .c-cat { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }
.card .c-name { font-size:18px; line-height:1.4; font-weight:700; margin-bottom:8px; height:25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.card .c-desc { font-size:13px; color:var(--ink-2); line-height:1.55; margin-bottom:16px; flex:1; }
.card .c-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; min-height:46px; }
.card .c-price { font-size:21px; font-weight:800; color:var(--ink); }
.card .c-price small { font-size:12px; color:var(--dim); font-weight:600; }
.card .add { display:inline-flex; align-items:center; gap:7px; background:var(--navy); color:#fff; padding:10px 16px; border-radius:8px; font-size:12.5px; font-weight:600; transition:.2s var(--ease); }
.card .add:hover { background:var(--blue); }

/* ── Category tiles ─────────────────────────────────────────── */
.cats { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.cat-tile { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5; display:flex; align-items:flex-end; padding:22px; background:#fff; transition:.3s var(--ease); box-shadow:var(--shadow-sm); }
.cat-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:28px 28px 64px; transition:transform .4s var(--ease); }
.cat-tile::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(255,255,255,.92)); }
.cat-tile .ct-txt { position:relative; z-index:2; }
.cat-tile .ct-txt h4 { font-size:19px; font-weight:700; }
.cat-tile .ct-txt span { font-size:12.5px; color:var(--dim); }
.cat-tile:hover { transform:translateY(-5px); border-color:var(--blue); box-shadow:var(--shadow-lg); }
.cat-tile:hover img { transform:scale(1.05); }

/* ── Feature row (why) ──────────────────────────────────────── */
.feat3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.feat3 .f { background:#fff; border:1px solid var(--line); border-radius:14px; padding:30px; transition:.3s var(--ease); box-shadow:var(--shadow-sm); }
.feat3 .f:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-2); }
.feat3 .f .ic { width:52px; height:52px; border-radius:12px; background:var(--panel-2); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; }
.feat3 .f h4 { font-size:18px; font-weight:700; margin-bottom:8px; }
.feat3 .f p { font-size:14px; color:var(--ink-2); line-height:1.65; }

/* ── Cart drawer ────────────────────────────────────────────── */
.cart-overlay { position:fixed; inset:0; background:rgba(15,36,68,.4); backdrop-filter:blur(3px); z-index:9500; opacity:0; visibility:hidden; transition:.3s var(--ease); }
.cart-overlay.open { opacity:1; visibility:visible; }
.cart-drawer { position:fixed; top:0; right:0; width:420px; max-width:92vw; height:100%; background:#fff; border-left:1px solid var(--line); z-index:9600; transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.cart-drawer.open { transform:translateX(0); }
.cd-head { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.cd-head h3 { font-size:18px; font-weight:700; }
.cd-close { font-size:24px; color:var(--dim); }
.cd-close:hover { color:var(--ink); }
.cd-items { flex:1; overflow-y:auto; padding:16px 24px; }
.cd-empty { text-align:center; color:var(--dim); padding:60px 20px; font-size:14px; }
.cd-item { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.cd-item .ci-img { width:64px; height:64px; border-radius:10px; background:#f8fafd; border:1px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cd-item .ci-img img { max-width:80%; max-height:80%; object-fit:contain; }
.cd-item .ci-info { flex:1; min-width:0; }
.cd-item .ci-name { font-size:14px; font-weight:600; margin-bottom:4px; }
.cd-item .ci-price { font-size:13px; color:var(--blue); font-weight:700; }
.cd-item .ci-ctrl { display:flex; align-items:center; gap:10px; margin-top:8px; }
.cd-item .qty { display:flex; align-items:center; gap:0; border:1px solid var(--line-2); border-radius:7px; overflow:hidden; }
.cd-item .qty button { width:28px; height:26px; font-size:14px; color:var(--ink-2); }
.cd-item .qty button:hover { background:var(--panel-2); color:var(--blue); }
.cd-item .qty span { min-width:26px; text-align:center; font-size:13px; font-weight:600; }
.cd-item .ci-remove { font-size:11.5px; color:var(--dim); }
.cd-item .ci-remove:hover { color:var(--blue); }
.cd-foot { padding:20px 24px; border-top:1px solid var(--line); }
.cd-total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.cd-total .t-l { color:var(--dim); font-size:14px; }
.cd-total .t-v { font-size:24px; font-weight:800; }

/* ── Toast ──────────────────────────────────────────────────── */
.toast { position:fixed; bottom:26px; left:50%; transform:translate(-50%,30px); background:var(--ink); color:#fff; padding:13px 22px; border-radius:8px; font-size:14px; font-weight:600; z-index:9800; opacity:0; visibility:hidden; transition:.3s var(--ease); display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-lg); }
.toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
.toast .tk { width:22px; height:22px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; }

/* ── CTA / page hero / product / cart pages ─────────────────── */
.cta { text-align:center; padding:clamp(70px,9vw,130px) var(--gut); position:relative; }
.cta h2 { font-size:clamp(32px,5.4vw,68px); font-weight:800; letter-spacing:-.02em; line-height:1.04; margin-bottom:30px; }
.cta h2 .g { color:var(--blue); }

.page-hero { padding:140px var(--gut) 50px; text-align:center; }
.page-hero .eyebrow { justify-content:center; }
.page-hero h1 { font-size:clamp(38px,6.4vw,76px); font-weight:800; letter-spacing:-.02em; line-height:1.02; }
.page-hero h1 .g { color:var(--blue); }
.page-hero p { margin:16px auto 0; max-width:520px; color:var(--ink-2); }

/* product page */
.pd { padding:120px var(--gut) 0; }
.pd-back { font-family:var(--mono); font-size:12px; color:var(--dim); display:inline-flex; gap:8px; margin-bottom:34px; }
.pd-back:hover { color:var(--blue); }
.pd-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.pd-stage { height:62vh; min-height:420px; border-radius:18px; background:radial-gradient(60% 60% at 50% 45%, rgba(31,111,235,.07), #fff 72%); border:1px solid var(--line); box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.pd-cat { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); }
.pd h1 { font-size:clamp(34px,4.6vw,56px); font-weight:800; letter-spacing:-.02em; margin:12px 0 16px; line-height:1.05; }
.pd .pd-lead { font-size:16.5px; color:var(--ink-2); line-height:1.7; margin-bottom:24px; }
.pd-price { display:flex; align-items:baseline; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.pd-price .now { font-size:34px; font-weight:800; flex-basis:100%; white-space:nowrap; }
.pd-price .was { font-size:18px; color:var(--dim); text-decoration:line-through; }
.pd-price .off { font-size:12px; font-weight:700; color:#fff; background:var(--navy); padding:4px 10px; border-radius:6px; }
.pd-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.pd-tags span { font-family:var(--mono); font-size:11px; border:1px solid var(--line-2); padding:7px 13px; border-radius:6px; color:var(--ink-2); background:#fff; }
.pd-buy { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.qty-pick { display:flex; align-items:center; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; }
.qty-pick button { width:42px; height:46px; font-size:18px; color:var(--ink-2); }
.qty-pick button:hover { background:var(--panel-2); color:var(--blue); }
.qty-pick span { min-width:40px; text-align:center; font-weight:700; }
.qty-pick .qty-input { width:54px; height:46px; text-align:center; font-weight:700; font-size:15px; border:none; border-left:1px solid var(--line-2); border-right:1px solid var(--line-2); font-family:inherit; color:var(--ink); -moz-appearance:textfield; }
.qty-pick .qty-input::-webkit-outer-spin-button, .qty-pick .qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.qty-pick .qty-input:focus { outline:none; background:var(--panel-2); }
.pd-specs { padding:clamp(60px,8vw,120px) var(--gut); }
.spec-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; border-top:1px solid var(--line); }
.spec-grid2 .r { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.spec-grid2 .r .k { color:var(--dim); font-family:var(--mono); font-size:12.5px; }

/* cart page */
.cart-page { padding:130px var(--gut) 90px; max-width:1000px; margin:0 auto; }
.cart-line { display:flex; gap:16px; align-items:flex-start; padding:16px 20px; margin-bottom:12px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); }
.cart-line .cl-img { width:64px; height:64px; flex-shrink:0; border-radius:10px; background:#f8fafd; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cart-line .cl-img img { max-width:80%; max-height:80%; object-fit:contain; }
.cart-line .cl-main { flex:1; min-width:0; }
.cart-line .cl-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.cart-line .cl-name { font-weight:700; font-size:15.5px; line-height:1.35; }
.cart-line .cl-cat { font-size:12px; color:var(--blue); font-family:var(--mono); margin-top:3px; }
.cart-line .cl-controls { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px; }
.cart-line .cl-sub { font-weight:800; font-size:16px; white-space:nowrap; }
.cart-line .cl-sub.muted { font-weight:700; font-size:13px; color:var(--dim); }
.cart-line .ci-remove { font-size:14px; color:var(--dim); flex-shrink:0; line-height:1; padding:2px; }
.cart-line .ci-remove:hover { color:var(--blue); }
.cart-summary { margin-top:30px; display:flex; justify-content:flex-end; }
.cart-summary .box { width:340px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:var(--shadow-md); }
.cart-summary .row { display:flex; justify-content:space-between; padding:8px 0; font-size:14.5px; color:var(--ink-2); }
.cart-summary .row.total { color:var(--ink); font-size:22px; font-weight:800; border-top:1px solid var(--line); margin-top:10px; padding-top:14px; }

/* ── Footer ─────────────────────────────────────────────────── */
.foot { border-top:1px solid var(--line); padding:clamp(54px,8vw,90px) var(--gut) 30px; background:var(--ink); color:#fff; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:36px; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.14); }
.foot-brand .fl { font-size:22px; font-weight:800; margin-bottom:14px; }
.foot-brand .fl b { color:#5aa0ff; }
.foot-brand .fl-logo { height:40px; width:auto; margin-bottom:16px; filter:brightness(0) invert(1); }
.foot-brand p { font-size:13.5px; color:rgba(255,255,255,.62); max-width:300px; line-height:1.7; }
.foot h5 { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:16px; font-family:var(--mono); }
.foot li { margin-bottom:10px; font-size:14px; }
.foot li a { color:rgba(255,255,255,.82); } .foot li a:hover { color:#5aa0ff; }
.foot-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:22px; font-size:12.5px; color:rgba(255,255,255,.45); }

/* ============================================================
   NEW GLOBAL FOOTER (RKM style) — banner + contact band + columns
   ============================================================ */
.site-footer { margin-top:0; }
/* top banner */
.ft-banner { position:relative; overflow:hidden; background:linear-gradient(100deg,#071739,#0b1f3a 55%,#102a52); color:#fff; padding:26px var(--gut); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.ft-banner::after { content:''; position:absolute; right:0; top:0; bottom:0; width:48%; background:url('../images/rkm/topbanner_rollerproducts.jpg') center/cover; opacity:.22; -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%); mask-image:linear-gradient(90deg,transparent,#000 60%); }
.ft-banner .ftb-l { display:flex; align-items:center; gap:18px; position:relative; z-index:2; }
.ft-banner .ftb-bar { width:4px; height:54px; background:var(--blue); border-radius:3px; }
.ft-banner .ftb-logo { background:#fff; border-radius:10px; padding:12px 18px; }
.ft-banner .ftb-logo img { height:34px; display:block; }
.ft-banner .ftb-tt h3 { font-size:20px; font-weight:800; }
.ft-banner .ftb-tt p { font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:#7db0ff; margin-top:4px; }
.ft-banner .ftb-quote { position:relative; z-index:2; display:inline-flex; align-items:center; gap:9px; background:var(--blue); color:#fff; font-weight:700; font-size:14px; padding:13px 24px; border-radius:99px; transition:.2s var(--ease); box-shadow:0 8px 22px rgba(31,111,235,.4); }
.ft-banner .ftb-quote:hover { background:#3b9cff; transform:translateY(-2px); }

/* contact band */
.ft-contact { background:#fff; display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
.ft-contact .fc { display:flex; gap:16px; padding:30px var(--gut); border-right:1px solid var(--line); }
.ft-contact .fc:last-child { border-right:none; }
.ft-contact .fc .ic { width:46px; height:46px; flex-shrink:0; border-radius:11px; background:var(--panel-2); color:var(--blue); display:flex; align-items:center; justify-content:center; }
.ft-contact .fc .ic svg { width:22px; height:22px; }
.ft-contact .fc h5 { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }
.ft-contact .fc p, .ft-contact .fc a { font-size:14px; color:var(--ink-2); line-height:1.65; display:block; }
.ft-contact .fc a:hover { color:var(--blue); }
.ft-contact .fc .em { display:inline-flex; align-items:center; gap:7px; margin-top:6px; font-size:13px; color:var(--dim); }

/* columns */
.ft-cols { background:#f1f5f9; padding:clamp(44px,6vw,72px) var(--gut) 0; }
.ft-cols-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:40px; padding-bottom:40px; }
.ft-about .ft-logo { height:38px; margin-bottom:18px; }
.ft-about .ft-h { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:700; position:relative; padding-bottom:8px; margin-bottom:14px; display:inline-block; }
.ft-about .ft-h::after, .ft-col h5::after { content:''; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--blue); }
.ft-about p { font-size:13.5px; color:var(--ink-2); line-height:1.75; max-width:330px; }
.ft-col h5 { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:700; position:relative; padding-bottom:8px; margin-bottom:16px; }
.ft-col ul li { margin-bottom:12px; }
.ft-col ul li a { display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-2); transition:.2s var(--ease); }
.ft-col ul li a:hover { color:var(--blue); transform:translateX(3px); }
.ft-col ul li a .ar2 { width:18px; height:18px; border-radius:5px; background:var(--panel-2); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.ft-news p { font-size:13.5px; color:var(--ink-2); line-height:1.7; margin-bottom:14px; }
.ft-news .nf { display:flex; flex-direction:column; gap:10px; }
.ft-news input { background:#fff; border:1px solid var(--line-2); border-radius:9px; padding:13px 14px; font-family:var(--sans); font-size:14px; color:var(--ink); outline:none; transition:.2s var(--ease); }
.ft-news input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,111,235,.12); }
.ft-news button { background:var(--blue); color:#fff; font-weight:700; font-size:13.5px; padding:13px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:.2s var(--ease); }
.ft-news button:hover { background:#1659c4; }
.ft-social { display:flex; gap:10px; margin-top:18px; }
.ft-social a { width:40px; height:40px; border-radius:10px; background:#fff; border:1px solid var(--line); color:var(--ink-2); display:flex; align-items:center; justify-content:center; transition:.2s var(--ease); font-size:12px; font-weight:700; }
.ft-social a:hover { background:var(--blue); color:#fff; border-color:var(--blue); transform:translateY(-2px); }
.ft-social svg { width:17px; height:17px; }
.ft-bottom { border-top:1px solid var(--line-2); padding:20px 0 26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--dim); }
@media (max-width:900px){ .ft-contact{ grid-template-columns:1fr; } .ft-contact .fc{ border-right:none; border-bottom:1px solid var(--line); } .ft-cols-grid{ grid-template-columns:1fr 1fr; gap:30px; } .ft-banner{ justify-content:center; text-align:center; } }
@media (max-width:560px){ .ft-cols-grid{ grid-template-columns:1fr; } }

/* ── Clients around the world (map section) ─────────────────── */
.world { position:relative; background:linear-gradient(135deg,#071739,#0b1f3a 60%,#102a52); color:#fff; padding:clamp(60px,8vw,110px) var(--gut); overflow:hidden; }
.world::before { content:''; position:absolute; inset:0; background:url('../images/rkm/bgmap.png') center/contain no-repeat; opacity:.5; }
.world .world-in { position:relative; z-index:2; text-align:center; max-width:680px; margin:0 auto; }
.world .eyebrow { color:#7db0ff; justify-content:center; }
.world .eyebrow::before, .world .eyebrow::after { background:rgba(255,255,255,.35); }
.world h2 { font-size:clamp(30px,4.4vw,52px); font-weight:800; letter-spacing:-.02em; line-height:1.08; }
.world h2 .g { color:#7db0ff; }
.world p { margin-top:14px; color:rgba(255,255,255,.82); font-size:16px; }
.world-stats { position:relative; z-index:2; display:flex; gap:clamp(30px,6vw,80px); justify-content:center; flex-wrap:wrap; margin-top:40px; }
.world-stats .ws .n { font-size:clamp(30px,4vw,46px); font-weight:800; }
.world-stats .ws .n .u { color:#7db0ff; }
.world-stats .ws .l { font-size:13px; color:rgba(255,255,255,.65); margin-top:6px; }

/* ── Location map ───────────────────────────────────────────── */
.map-sec { padding:clamp(50px,7vw,90px) var(--gut); }
.map-wrap { display:grid; grid-template-columns:1fr 1.4fr; gap:30px; align-items:stretch; }
.map-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:18px; }
.map-card .mc-row { display:flex; gap:14px; }
.map-card .mc-row .ic { width:42px; height:42px; flex-shrink:0; border-radius:11px; background:var(--panel-2); color:var(--blue); display:flex; align-items:center; justify-content:center; }
.map-card .mc-row .ic svg { width:20px; height:20px; }
.map-card .mc-row h5 { font-size:14px; font-weight:700; margin-bottom:4px; }
.map-card .mc-row p, .map-card .mc-row a { font-size:13.5px; color:var(--ink-2); line-height:1.6; display:block; }
.map-card .mc-row a:hover { color:var(--blue); }
.map-frame { border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-md); min-height:380px; }
.map-frame iframe { width:100%; height:100%; min-height:380px; border:0; display:block; }
@media (max-width:820px){ .map-wrap{ grid-template-columns:1fr; } }

/* ── Roller selector wizard ─────────────────────────────────── */
.selector { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-md); overflow:hidden; }
.sel-head { background:linear-gradient(120deg,#071739,#123a72); color:#fff; padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.sel-head .sh-l h3 { font-size:21px; font-weight:800; }
.sel-head .sh-l p { font-size:13.5px; color:rgba(255,255,255,.75); margin-top:4px; }
.sel-steps { display:flex; gap:7px; }
.sel-steps i { width:30px; height:5px; border-radius:3px; background:rgba(255,255,255,.25); transition:.3s var(--ease); }
.sel-steps i.on { background:#7db0ff; width:42px; }
.sel-body { padding:30px; }
.sel-q { font-size:18px; font-weight:700; margin-bottom:6px; }
.sel-sub { font-size:13.5px; color:var(--dim); margin-bottom:22px; }
.sel-opts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.sel-opt { border:1.5px solid var(--line-2); border-radius:13px; padding:20px 16px; text-align:center; cursor:pointer; transition:.2s var(--ease); background:#fff; }
.sel-opt:hover { border-color:var(--blue); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.sel-opt.sel { border-color:var(--blue); background:var(--panel-2); box-shadow:0 0 0 3px rgba(31,111,235,.12); }
.sel-opt .so-ic { width:46px; height:46px; margin:0 auto 12px; border-radius:12px; background:var(--panel-2); color:var(--blue); display:flex; align-items:center; justify-content:center; }
.sel-opt.sel .so-ic { background:var(--navy); color:#fff; }
.sel-opt .so-ic svg { width:24px; height:24px; }
.sel-opt h5 { font-size:14.5px; font-weight:700; }
.sel-opt p { font-size:12px; color:var(--dim); margin-top:4px; line-height:1.4; }
.sel-nav { display:flex; justify-content:space-between; align-items:center; margin-top:26px; gap:12px; }
.sel-nav .sn-back { font-size:13.5px; color:var(--dim); font-weight:600; }
.sel-nav .sn-back:hover { color:var(--blue); }
/* result */
.sel-result { padding:30px; }
.sel-result .sr-top { display:flex; align-items:center; gap:10px; color:var(--blue); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; }
.sr-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.sr-card { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:.3s var(--ease); cursor:pointer; box-shadow:var(--shadow-sm); }
.sr-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--blue); }
.sr-card .src-img { height:150px; background:#f8fafd; display:flex; align-items:center; justify-content:center; padding:18px; }
.sr-card .src-img img { max-width:90%; max-height:90%; object-fit:contain; }
.sr-card .src-b { padding:16px 18px 18px; }
.sr-card .src-tag { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--blue); padding:3px 9px; border-radius:5px; display:inline-block; margin-bottom:8px; }
.sr-card h4 { font-size:16px; font-weight:700; }
.sr-card p { font-size:12.5px; color:var(--ink-2); line-height:1.55; margin-top:6px; }

/* ── FAQ accordion ──────────────────────────────────────────── */
.faq-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { border:1px solid var(--line); border-radius:13px; background:#fff; overflow:hidden; box-shadow:var(--shadow-sm); transition:.2s var(--ease); }
.faq-item.open { border-color:var(--line-2); box-shadow:var(--shadow-md); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; font-size:16px; font-weight:700; color:var(--ink); text-align:left; cursor:pointer; }
.faq-q .fq-ic { width:26px; height:26px; flex-shrink:0; border-radius:8px; background:var(--panel-2); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:18px; transition:.3s var(--ease); }
.faq-item.open .fq-ic { background:var(--navy); color:#fff; transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a-in { padding:0 22px 20px; font-size:14.5px; color:var(--ink-2); line-height:1.75; }

/* ── 40 years badge ─────────────────────────────────────────── */
.years-badge { position:absolute; right:var(--gut); top:92px; z-index:4; height:48px; width:auto; background:rgba(255,255,255,.94); padding:12px 18px; border-radius:12px; box-shadow:0 8px 22px rgba(0,0,0,.28); backdrop-filter:blur(4px); box-sizing:content-box; }
@media (max-width:980px){ .years-badge{ height:38px; top:84px; padding:9px 14px } }
@media (max-width:620px){ .years-badge{ display:none } }

/* ── Custom Roller builder ──────────────────────────────────── */
.cr-wrap { display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:start; }
.cr-visual { position:sticky; top:96px; }
.cr-visual .cr-img { background:#f8fafd; border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow-sm); }
.cr-visual .cr-img img { width:100%; border-radius:10px; }
.cr-visual .cr-points { margin-top:18px; display:grid; gap:10px; }
.cr-visual .cr-pt { display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); }
.cr-visual .cr-pt svg { width:18px; height:18px; color:var(--blue); flex-shrink:0; margin-top:2px; }
.cr-form { background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px; box-shadow:var(--shadow-md); }
.cr-form .cr-sec { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin:22px 0 12px; }
.cr-form .cr-sec:first-child { margin-top:0; }
.cr-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cr-field label { display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.cr-field input, .cr-field select, .cr-field textarea { width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:9px; padding:11px 13px; font-family:var(--sans); font-size:14px; color:var(--ink); outline:none; transition:.2s var(--ease); }
.cr-field input:focus, .cr-field select:focus, .cr-field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,111,235,.12); background:#fff; }
.cr-field textarea { min-height:90px; resize:vertical; }
.cr-field.full { grid-column:1 / -1; }
.cr-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.cr-prev-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.cr-prev-grid .pv { position:relative; width:96px; height:74px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#f8fafd; }
.cr-prev-grid .pv img { width:100%; height:100%; object-fit:cover; }
.cr-prev-grid .pv .pv-x { position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:rgba(7,23,57,.8); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cr-prev-grid .pv .pv-x:hover { background:var(--blue); }
@media (max-width:860px){ .cr-wrap { grid-template-columns:1fr; } .cr-visual { position:static; } }

/* ── Cart checkout (buy online) ─────────────────────────────── */
.co-h { font-size:20px; font-weight:800; margin-bottom:14px; display:flex; align-items:baseline; gap:10px; }
.co-h span { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--dim); }
.checkout-grid { display:grid; grid-template-columns:1.5fr .9fr; gap:30px; align-items:start; }
.checkout-grid .cart-summary { margin-top:0; }
.ship-pick { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px 0; margin:6px 0; }
.ship-opt { display:flex; align-items:center; gap:10px; padding:9px 2px; font-size:13.5px; color:var(--ink-2); cursor:pointer; }
.ship-opt input { accent-color:var(--blue); width:16px; height:16px; }
.ship-opt span { flex:1; display:flex; flex-direction:column; }
.ship-opt span small { font-size:11px; color:var(--dim); font-weight:400; margin-top:1px; }
.ship-opt b { color:var(--ink); white-space:nowrap; }
.ship-group { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin:12px 0 4px; padding-top:8px; border-top:1px solid var(--line); }
.ship-group:first-child { border-top:none; padding-top:0; }
.ship-pick { max-height:none; }
/* compact shipping dropdown */
.ship-select { width:100%; padding:11px 14px; font-family:var(--sans); font-size:14px; color:var(--ink); background:#fff; border:1px solid var(--line-2); border-radius:9px; cursor:pointer; outline:none; transition:.2s var(--ease); -webkit-appearance:menulist; appearance:auto; }
.ship-select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,111,235,.12); }
.ship-note { font-size:11.5px; color:var(--dim); margin-top:8px; line-height:1.4; }
.pay-badges { display:flex; justify-content:space-between; gap:8px; margin-top:12px; font-size:11px; color:var(--dim); font-family:var(--mono); }
@media (max-width:820px){ .checkout-grid { grid-template-columns:1fr; } }

/* demo checkout modal */
.dc-overlay { position:fixed; inset:0; z-index:10002; background:rgba(7,23,57,.6); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:.25s var(--ease); }
.dc-overlay.open { opacity:1; visibility:visible; }
.dc-modal { background:#fff; width:min(440px,100%); border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden; transform:translateY(14px) scale(.98); transition:.28s var(--spring); }
.dc-overlay.open .dc-modal { transform:none; }
.dc-head { display:flex; align-items:center; gap:8px; padding:16px 20px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px; }
.dc-head .dc-lock { font-size:14px; }
.dc-head .dc-badge { font-family:var(--mono); font-size:10px; background:var(--panel-2); color:var(--blue); padding:3px 8px; border-radius:5px; letter-spacing:.08em; }
.dc-head .dc-x { margin-left:auto; font-size:20px; color:var(--dim); background:none; }
.dc-head .dc-x:hover { color:var(--ink); }
.dc-body { padding:22px 24px 24px; }
.dc-sum { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:18px; }
.dc-row { display:flex; justify-content:space-between; gap:14px; font-size:13.5px; color:var(--ink-2); padding:5px 0; }
.dc-row.dc-tot { border-top:1px solid var(--line); margin-top:6px; padding-top:10px; font-size:16px; font-weight:800; color:var(--ink); }
.dc-card label { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin:12px 0 6px; }
.dc-card .dc-inp { background:#fff; border:1px solid var(--line-2); border-radius:9px; padding:12px 14px; font-family:var(--mono); font-size:14px; color:var(--ink-2); }
.dc-card .dc-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dc-note { font-size:11.5px; color:var(--dim); text-align:center; margin-top:12px; line-height:1.5; }
#dcPay { margin-top:18px; }
.dc-success { padding:44px 30px; text-align:center; }
.dc-success .dc-check { width:70px; height:70px; margin:0 auto 18px; border-radius:50%; background:#25d366; color:#fff; font-size:38px; display:flex; align-items:center; justify-content:center; animation:dcPop .4s var(--spring); }
@keyframes dcPop { from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }
.dc-success h3 { font-size:22px; font-weight:800; margin-bottom:10px; }
.dc-success p { font-size:14px; color:var(--ink-2); line-height:1.6; margin-bottom:14px; }
.dc-success #dcDone { margin-top:6px; }

/* ── Dimension / spec data table (from RKM spec sheets) ─────── */
.dim-sec { padding:0 var(--gut) clamp(40px,6vw,80px); }
.dim-head { display:flex; align-items:baseline; gap:12px; margin-bottom:6px; flex-wrap:wrap; }
.dim-head h2 { font-size:30px; font-weight:800; }
.dim-head .dim-sub { font-family:var(--mono); font-size:12px; color:var(--dim); }
.dim-note { font-size:13px; color:var(--ink-2); margin:4px 0 18px; }
.dim-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); -webkit-overflow-scrolling:touch; }
table.dim-table { width:100%; border-collapse:collapse; min-width:640px; background:#fff; font-size:13.5px; }
table.dim-table th, table.dim-table td { padding:10px 12px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap; }
table.dim-table thead th { background:var(--navy); color:#fff; font-weight:700; font-size:12.5px; letter-spacing:.02em; position:sticky; top:0; }
table.dim-table thead tr.grp th { background:#0b1f3a; font-family:var(--mono); font-size:11px; letter-spacing:.06em; }
table.dim-table tbody tr:nth-child(even) td { background:var(--bg); }
table.dim-table tbody tr:hover td { background:rgba(31,111,235,.06); }
table.dim-table td.k, table.dim-table th.k { text-align:left; font-weight:700; color:var(--navy); background:var(--panel-2); position:sticky; left:0; }
table.dim-table tbody tr:nth-child(even) td.k { background:#e7eefb; }
.dim-foot { font-size:11.5px; color:var(--dim); margin-top:10px; }
/* technical drawing section (Table → Drawing → Specifications) */
.prod-draw { padding:0 var(--gut) clamp(40px,6vw,80px); }
.draw-box { position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:clamp(20px,3vw,40px); box-shadow:var(--shadow-sm); text-align:center; }
.draw-box img { max-width:100%; width:auto; max-height:520px; display:inline-block; }
.draw-2col { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px){ .draw-2col { grid-template-columns:1fr; } }
.draw-cap { font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--blue); font-weight:700; text-align:left; margin-bottom:12px; }
/* roller drawing shown directly above each dimension table */
.tbl-draw { background:#fff; border:1px solid var(--line); border-radius:14px 14px 0 0; border-bottom:none; padding:40px 36px 24px; text-align:center; }
.tbl-draw img { max-width:100%; width:100%; max-height:460px; object-fit:contain; display:inline-block; cursor:zoom-in; }
.tbl-draw + .dim-wrap { border-radius:0 0 14px 14px; }
@media (max-width:640px){ .tbl-draw { padding:24px 16px 16px; } .tbl-draw img { max-height:280px; } }
/* selectable spec rows */
table.dim-table tbody tr.selectable { cursor:pointer; }
table.dim-table tbody tr.selectable:hover td { background:rgba(31,111,235,.10); }
/* yellow highlight when its belt width is selected */
table.dim-table tbody tr.row-hl td { background:#fff3bf !important; box-shadow:inset 4px 0 0 #f5a623; }
table.dim-table tbody tr.row-hl td.k { background:#ffe9a8 !important; color:#7a4d00; }

.cl-save { color:#1a7f43; font-weight:700; font-size:12px; }

/* ── CNC landing page (services-style) ──────────────────────── */
.cnc2-hero { position:relative; min-height:560px; display:flex; align-items:center; color:#fff; overflow:hidden; }
.cnc2-hero .c2h-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.cnc2-hero .c2h-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(8,20,45,.94) 0%, rgba(8,20,45,.82) 42%, rgba(8,20,45,.30) 100%); }
.cnc2-hero .c2h-inner { position:relative; z-index:2; max-width:640px; padding:0 var(--gut); }
.cnc2-hero .c2h-eyebrow { color:var(--blue); font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.cnc2-hero h1 { font-size:clamp(38px,6vw,62px); font-weight:800; line-height:1.05; margin:16px 0 18px; letter-spacing:-.01em; }
.cnc2-hero h1 .g { color:var(--blue); }
.cnc2-hero p { font-size:17px; color:rgba(255,255,255,.85); line-height:1.6; max-width:480px; }
.cnc2-hero .c2h-btns { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.c2h-ghost { background:#fff; color:var(--navy); border:2px solid #fff; font-weight:700; }
.c2h-ghost:hover { background:transparent; color:#fff; }

/* service cards row that overlaps hero */
.cnc2-services { max-width:1200px; margin:-70px auto 0; padding:0 var(--gut); position:relative; z-index:5; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.cnc2-svc { background:#fff; border-right:1px solid var(--line); padding:30px 24px; box-shadow:var(--shadow-md); }
.cnc2-svc:first-child { border-radius:14px 0 0 14px; } .cnc2-svc:last-child { border-right:none; border-radius:0 14px 14px 0; }
.cnc2-svc .si { width:46px; height:46px; color:var(--blue); margin-bottom:16px; }
.cnc2-svc h3 { font-size:16px; font-weight:700; margin-bottom:10px; }
.cnc2-svc p { font-size:13.5px; color:var(--ink-2); line-height:1.55; }
.cnc2-svc .more { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:12.5px; font-weight:700; color:var(--blue); }
@media (max-width:900px){ .cnc2-services { grid-template-columns:1fr 1fr; } .cnc2-svc, .cnc2-svc:first-child, .cnc2-svc:last-child { border-radius:0; border-bottom:1px solid var(--line); } }
@media (max-width:560px){ .cnc2-services { grid-template-columns:1fr; margin-top:-40px; } }

/* about + stats */
.cnc2-about { max-width:1200px; margin:0 auto; padding:clamp(50px,7vw,90px) var(--gut); display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.cnc2-about .c2a-img img { width:100%; border-radius:16px; box-shadow:var(--shadow-md); }
.cnc2-about .c2a-eye { color:var(--blue); font-family:var(--mono); font-size:12px; letter-spacing:.12em; font-weight:700; }
.cnc2-about h2 { font-size:clamp(26px,3.4vw,36px); font-weight:800; margin:10px 0 16px; line-height:1.15; }
.cnc2-about p { color:var(--ink-2); line-height:1.65; }
.cnc2-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; }
.cnc2-stat { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:18px 10px; text-align:center; }
.cnc2-stat .sv { font-size:26px; font-weight:800; color:var(--navy); }
.cnc2-stat .sl { font-size:10.5px; font-family:var(--mono); letter-spacing:.05em; color:var(--dim); text-transform:uppercase; margin-top:4px; }
@media (max-width:820px){ .cnc2-about { grid-template-columns:1fr; } }
@media (max-width:520px){ .cnc2-stats { grid-template-columns:1fr 1fr; } }

/* 3-column capability band */
.cnc2-cols { max-width:1200px; margin:0 auto; padding:0 var(--gut) clamp(40px,6vw,70px); display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; }
.cnc2-cols h4 { font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--blue); text-transform:uppercase; margin-bottom:18px; }
.cnc2-cols ul { list-style:none; display:flex; flex-direction:column; gap:13px; }
.cnc2-cols li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink); }
.cnc2-cols li svg { flex-shrink:0; width:18px; height:18px; color:var(--blue); margin-top:1px; }
.cnc2-machine { border:1px solid var(--line); border-radius:14px; padding:18px; }
.cnc2-machine img { width:100%; height:130px; object-fit:cover; border-radius:8px; background:#0d1b33; }
.cnc2-machine h5 { font-size:15px; font-weight:700; margin:12px 0 8px; }
.cnc2-machine .ml { font-size:12.5px; color:var(--ink-2); line-height:1.7; }
@media (max-width:820px){ .cnc2-cols { grid-template-columns:1fr; gap:30px; } }

/* CTA band */
.cnc2-band { max-width:1160px; margin:0 auto clamp(40px,6vw,70px); padding:28px 36px; background:linear-gradient(100deg,var(--navy),var(--blue-d,#0b2a5e)); border-radius:16px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; color:#fff; }
.cnc2-band h3 { font-size:20px; font-weight:800; }
.cnc2-band p { color:rgba(255,255,255,.8); font-size:14px; margin-top:4px; }

/* ── CNC Parts page ─────────────────────────────────────────── */
.cnc-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.cnc-filters { display:flex; gap:10px; flex-wrap:wrap; }
.cnc-fbtn { font-size:13px; font-weight:600; padding:9px 16px; border:1px solid var(--line-2); border-radius:99px; color:var(--ink-2); background:var(--panel); transition:.18s var(--ease); }
.cnc-fbtn:hover { border-color:var(--blue); color:var(--navy); }
.cnc-fbtn.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.cnc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; }
.cnc-card { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); transition:.2s var(--ease); }
.cnc-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-2); }
.cnc-media { position:relative; aspect-ratio:4/3; background:#f6f9fd; display:flex; align-items:center; justify-content:center; padding:18px; }
.cnc-media img { max-width:100%; max-height:100%; object-fit:contain; }
.cnc-badge { position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:10px; letter-spacing:.05em; padding:4px 9px; border-radius:6px; }
.cnc-badge.buy { background:#e6f7ed; color:#1a7f43; }
.cnc-badge.q { background:#fff3bf; color:#7a4d00; }
.cnc-body { display:flex; flex-direction:column; flex:1; padding:16px 16px 18px; }
.cnc-cat { font-family:var(--mono); font-size:11px; color:var(--blue); letter-spacing:.04em; }
.cnc-name { font-size:16px; font-weight:700; margin:4px 0 6px; line-height:1.25; }
.cnc-desc { font-size:13px; color:var(--ink-2); line-height:1.5; flex:1; }
.cnc-view { display:inline-block; margin-top:10px; font-size:12.5px; font-weight:700; color:var(--blue); }
.cnc-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.cnc-price { font-size:18px; font-weight:800; color:var(--navy); }
.cnc-quote { font-size:12.5px; font-weight:600; color:#7a4d00; }
.cnc-foot .btn { padding:8px 14px; font-size:13px; }
.btn.btn-wa { background:#25d366; color:#fff; border:none; display:inline-flex; align-items:center; }
.btn.btn-wa:hover { background:#1da851; }

/* ── Reveal ─────────────────────────────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-d="1"]{transition-delay:.06s}[data-reveal][data-d="2"]{transition-delay:.12s}
[data-reveal][data-d="3"]{transition-delay:.18s}[data-reveal][data-d="4"]{transition-delay:.24s}
[data-reveal][data-d="5"]{transition-delay:.3s}[data-reveal][data-d="6"]{transition-delay:.36s}

/* ── Mobile menu ────────────────────────────────────────────── */
.m-menu { position:fixed; inset:0; z-index:9550; background:#fff; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 var(--gut); transform:translateX(100%); transition:transform .4s var(--ease); }
.m-menu.open { transform:translateX(0); }
.m-menu a { font-size:28px; font-weight:700; padding:12px 0; border-bottom:1px solid var(--line); }
.m-menu a:hover { color:var(--blue); }
.m-close { position:absolute; top:20px; right:var(--gut); font-size:26px; color:var(--ink); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:900px) {
  .nav .nav-link { display:none; }
  .menu-btn { display:inline-block; }
  .hero { grid-template-columns:1fr; }
  .hero-3d { order:-1; height:50vh; }
  .pd-grid { grid-template-columns:1fr; gap:30px; }
  .spec-grid2 { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:540px) {
  .foot-grid { grid-template-columns:1fr; }
  .cart-summary .box { width:100%; }
}

/* ============================================================
   ROKONMA upgrade — banners, segments, about, contact, certs
   ============================================================ */

/* logo sizing — RKM wordmark */
.brand img { height:30px; }
.fl-logo { filter:none !important; max-width:160px; }

/* page banner with real photo */
.banner { position:relative; padding:150px var(--gut) 60px; color:#fff; overflow:hidden; }
.banner::before { content:''; position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; }
.banner::after  { content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(7,23,57,.92),rgba(18,45,94,.78)); z-index:-1; }
.banner.bn-roller::before { background-image:url('../images/rkm/topbanner_rollerproducts.jpg'); }
.banner.bn-news::before   { background-image:url('../images/rkm/topbanner_news.jpg'); }
.banner.bn-about::before  { background-image:url('../images/rkm/bg_aboutus.jpg'); }
.banner.bn-lab::before    { background-image:url('../images/rkm/topbanner_rkmtestlab.jpg'); }
.banner.bn-capacity::before { background-image:url('../images/rkm/topbanner_facilities.jpg'); }
.banner.bn-segment::before  { background-image:url('../images/rkm/topbanner_businesssegment.jpg'); }
.banner .eyebrow { color:#9cc2ff; }
.banner .eyebrow::before, .banner .eyebrow::after { background:rgba(255,255,255,.4); }
.banner h1 { font-size:clamp(38px,6vw,72px); font-weight:800; letter-spacing:-.02em; line-height:1.04; }
.banner h1 .g { color:#7db0ff; }
.banner p { margin-top:16px; max-width:560px; color:rgba(255,255,255,.85); font-size:16.5px; }

/* ── Client logo strip (real ROKONMA clients) ───────────────── */
.clients { padding:clamp(50px,7vw,90px) 0; overflow:hidden; }
.clients .sec-head { margin-bottom:34px; }
.clogos { display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.clogos-track { display:flex; align-items:center; gap:80px; padding-right:80px; animation:clmarq 46s linear infinite; }
.clients:hover .clogos-track { animation-play-state:paused; }
.clogos-track img { height:120px; width:auto; max-width:300px; object-fit:contain; transition:transform .3s var(--ease); flex-shrink:0; }
.clogos-track img:hover { transform:scale(1.08); }
@keyframes clmarq { to { transform:translateX(-50%); } }

/* trust strip (logos / certs row) */
.trust { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; margin-top:30px; }
.trust span { font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-2); background:#fff; border:1px solid var(--line); padding:9px 16px; border-radius:8px; box-shadow:var(--shadow-sm); }

/* segments (business / unit handling) */
.segs { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.seg { position:relative; border-radius:16px; overflow:hidden; padding:40px; min-height:300px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--line); box-shadow:var(--shadow-md); transition:.3s var(--ease); }
.seg::before { content:''; position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; transition:transform .5s var(--ease); }
.seg::after  { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,23,57,.25),rgba(7,23,57,.9)); z-index:-1; }
.seg:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.seg:hover::before { transform:scale(1.05); }
.seg.s-bulk::before { background-image:url('../images/rkm/idler_product_13.png'); background-color:#0b1f3a; }
.seg.s-unit::before { background-image:url('../images/rkm/balltransfer-item1.png'); background-color:#0b1f3a; }
.seg .s-tag { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7db0ff; margin-bottom:10px; }
.seg h3 { font-size:26px; font-weight:800; margin-bottom:10px; }
.seg p { font-size:14.5px; color:rgba(255,255,255,.85); line-height:1.65; margin-bottom:18px; }
.seg a { font-weight:700; font-size:14px; color:#fff; display:inline-flex; gap:8px; align-items:center; }
.seg a:hover { color:#9cc2ff; }

/* about — split */
.about-split { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.about-split .a-img { border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.about-split .a-img img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.about-split h2 { font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-.02em; margin-bottom:18px; line-height:1.1; }
.about-split h2 .g { color:var(--blue); }
.about-split p { color:var(--ink-2); font-size:15.5px; line-height:1.8; margin-bottom:16px; }

/* stat band */
.statband { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; background:var(--ink); color:#fff; border-radius:18px; padding:44px clamp(24px,4vw,56px); }
.statband .s { text-align:center; }
.statband .s .n { font-size:clamp(30px,3.6vw,46px); font-weight:800; color:#fff; line-height:1; }
.statband .s .n .u { color:#7db0ff; }
.statband .s .l { margin-top:8px; font-size:13px; color:rgba(255,255,255,.6); letter-spacing:.02em; }

/* timeline (history) */
.timeline { max-width:760px; margin:0 auto; position:relative; padding-left:30px; }
.timeline::before { content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line-2); }
.tl-item { position:relative; padding:0 0 28px 22px; }
.tl-item::before { content:''; position:absolute; left:-30px; top:4px; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--blue); }
.tl-item .y { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--blue); }
.tl-item p { color:var(--ink-2); font-size:14.5px; margin-top:4px; line-height:1.6; }

/* certifications grid */
.certs { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.cert { background:#fff; border:1px solid var(--line); border-radius:12px; padding:24px 20px; text-align:center; box-shadow:var(--shadow-sm); transition:.3s var(--ease); }
.cert:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue); }
.cert .ct-t { font-weight:800; font-size:17px; color:var(--navy); }
.cert .ct-s { font-size:12.5px; color:var(--dim); margin-top:6px; }

/* contact */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.contact-grid .info { display:flex; flex-direction:column; gap:18px; }
.c-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:var(--shadow-sm); }
.c-card h4 { font-size:16px; font-weight:700; margin-bottom:10px; color:var(--navy); }
.c-card p, .c-card a { font-size:14.5px; color:var(--ink-2); line-height:1.7; display:block; }
.c-card a:hover { color:var(--blue); }
.c-card .k { font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.contact-form { background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px; box-shadow:var(--shadow-md); }
.contact-form label { display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin:14px 0 6px; }
.contact-form input, .contact-form textarea { width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:9px; padding:12px 14px; font-family:var(--sans); font-size:14.5px; color:var(--ink); outline:none; transition:.2s var(--ease); }
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,111,235,.12); background:#fff; }
.contact-form textarea { min-height:120px; resize:vertical; }

/* social row in footer */
.foot-social { display:flex; gap:10px; margin-top:18px; }
.foot-social a { width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; transition:.2s var(--ease); }
.foot-social a:hover { background:var(--blue); transform:translateY(-2px); }
.foot-social svg { width:18px; height:18px; }

/* news grid */
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:26px; }
.news-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:.3s var(--ease); }
.news-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--line-2); }
.news-card .n-media { aspect-ratio:16/9; overflow:hidden; background:#f8fafd; }
.news-card .n-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.news-card:hover .n-media img { transform:scale(1.05); }
.news-card .n-body { padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.news-card .n-meta { display:flex; gap:10px; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--blue); margin-bottom:10px; }
.news-card .n-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--line-2); }
.news-card .n-meta .cat { color:var(--dim); }
.news-card h3 { font-size:19px; font-weight:700; line-height:1.25; margin-bottom:10px; }
.news-card p { font-size:14px; color:var(--ink-2); line-height:1.65; flex:1; }
.news-card .n-more { margin-top:14px; font-weight:700; font-size:13px; color:var(--blue); display:inline-flex; gap:7px; align-items:center; }
.news-card:hover .n-more .ar { transform:translateX(4px); }
.news-card .n-more .ar { transition:transform .25s var(--ease); }
.news-card .n-media { position:relative; }
.news-card .n-count { position:absolute; bottom:10px; right:10px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; background:rgba(7,23,57,.82); color:#fff; padding:5px 10px; border-radius:7px; display:inline-flex; gap:6px; align-items:center; }
.news-card .n-feat { grid-column:1 / -1; }
.news-card.feature { grid-column:span 2; flex-direction:row; }
.news-card.feature .n-media { aspect-ratio:auto; width:48%; }
.news-card.feature .n-body { width:52%; justify-content:center; }
.news-card.feature h3 { font-size:26px; }
@media (max-width:760px) { .news-card.feature { flex-direction:column; grid-column:auto; } .news-card.feature .n-media, .news-card.feature .n-body { width:100%; } .news-card.feature .n-media { aspect-ratio:16/9; } }

/* dropdown menu (Products) */
.nav .has-drop { position:relative; }
.nav .has-drop > .nav-link { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.nav .has-drop > .nav-link::after { content:'⌄'; font-size:14px; line-height:1; opacity:.7; margin-top:-3px; }
.dropdown { position:absolute; top:calc(100% + 8px); left:0; min-width:248px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s var(--ease); z-index:9100; }
.nav .has-drop:hover .dropdown, .nav .has-drop:focus-within .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink-2); }
.dropdown a:hover { background:var(--panel-2); color:var(--blue); }
.dropdown a .di { width:7px; height:7px; border-radius:2px; background:var(--blue); opacity:.55; flex-shrink:0; }
.dropdown .dd-sep { height:1px; background:var(--line); margin:6px 4px; }
.dropdown .dd-label { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:8px 12px 4px; }
/* mobile menu sub-items */
.m-menu .m-sub { font-size:17px !important; font-weight:600 !important; color:var(--ink-2); padding:9px 0 9px 18px !important; border-bottom:1px solid var(--line); }
.m-menu .m-sub:hover { color:var(--blue); }
.m-menu .m-head { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); padding:14px 0 4px !important; border:none !important; }

/* size picker (TK2 belt-width selector) */
.size-pick { margin:4px 0 22px; }
.size-pick .sp-label { font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--dim); text-transform:uppercase; margin-bottom:10px; }
.size-pick .sp-label span { color:var(--blue); font-weight:700; }
.size-pick .sp-opts { display:flex; flex-wrap:wrap; gap:9px; }
.size-pick .sp-opt, .size-pick .ty-opt { border:1.5px solid var(--line-2); background:#fff; color:var(--ink-2); font-size:13px; font-weight:700; padding:9px 15px; border-radius:9px; transition:.18s var(--ease); }
.size-pick .sp-opt:hover, .size-pick .ty-opt:hover { border-color:var(--blue); color:var(--blue); }
.size-pick .sp-opt.on, .size-pick .ty-opt.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.size-pick .sp-need { color:#c0392b !important; font-weight:700; }
/* disabled add-to-enquiry until options chosen */
.btn-grad:disabled, .btn-grad[aria-disabled="true"] { opacity:.45; pointer-events:none; box-shadow:none; filter:grayscale(.3); }

/* image stage variant for non-3D product detail */
.pd-stage-img { display:flex; align-items:center; justify-content:center; padding:30px; background:#f8fafd; }
.pd-stage-img img { max-width:100%; max-height:100%; object-fit:contain; }

/* ── Product media slider (3D + drawing) ────────────────────── */
.pd-slider { position:relative; }
.pd-slider .pd-slide { display:none; width:100%; height:100%; }
.pd-slider .pd-slide.on { display:block; }
.pd-slider .pd-slide.slide-draw { background:#fff; display:none; align-items:center; justify-content:center; padding:26px; }
.pd-slider .pd-slide.slide-draw.on { display:flex; }
.pd-slider .pd-slide.slide-draw img { max-width:100%; max-height:100%; object-fit:contain; }
.sl-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line-2); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:var(--shadow-md); transition:.2s var(--ease); }
.sl-arrow:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.sl-prev { left:14px; } .sl-next { right:14px; }
.sl-dots { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:8px; }
.sl-dots button { width:9px; height:9px; padding:0; border-radius:50%; background:var(--line-2); transition:.2s var(--ease); }
.sl-dots button.on { background:var(--blue); width:24px; border-radius:5px; }
.sl-tag { position:absolute; top:16px; right:16px; z-index:5; font-family:var(--mono); font-size:11px; letter-spacing:.06em; background:#fff; border:1px solid var(--line); color:var(--ink-2); padding:5px 11px; border-radius:6px; }

/* zoomable drawing — hint + cursor */
img.zoomable { cursor:zoom-in; }
.zoom-hint { position:absolute; bottom:14px; left:14px; z-index:5; font-family:var(--mono); font-size:11px; background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--ink-2); padding:5px 10px; border-radius:6px; display:flex; align-items:center; gap:6px; pointer-events:none; }

/* ── Zoom lightbox ──────────────────────────────────────────── */
.zoom-lb { position:fixed; inset:0; z-index:10050; background:rgba(7,23,57,.94); display:none; align-items:center; justify-content:center; overflow:hidden; touch-action:none; }
.zoom-lb.open { display:flex; }
.zoom-lb img { max-width:96vw; max-height:90vh; transform-origin:center center; transition:transform .12s ease-out; will-change:transform; cursor:grab; user-select:none; -webkit-user-drag:none; }
.zoom-lb img.grabbing { cursor:grabbing; transition:none; }
.zlb-bar { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:8px; background:rgba(10,23,51,.85); border:1px solid rgba(255,255,255,.18); border-radius:99px; padding:8px 10px; backdrop-filter:blur(6px); }
.zlb-bar button { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; transition:.18s var(--ease); }
.zlb-bar button:hover { background:var(--blue); }
.zlb-bar .zlb-lvl { color:#fff; font-family:var(--mono); font-size:12px; min-width:48px; text-align:center; }
.zlb-close { position:absolute; top:20px; right:24px; z-index:2; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:24px; display:flex; align-items:center; justify-content:center; transition:.18s var(--ease); }
.zlb-close:hover { background:var(--blue); }
.zlb-help { position:absolute; top:24px; left:24px; z-index:2; color:rgba(255,255,255,.7); font-family:var(--mono); font-size:11.5px; }
@media (max-width:560px){ .zlb-help{ display:none } }

/* ── Interactive exploded roller view ───────────────────────── */
.explode { padding:clamp(60px,8vw,110px) var(--gut); }
.explode-wrap { display:grid; grid-template-columns:1.35fr .8fr; gap:40px; align-items:start; }
.explode-stage { position:relative; background:radial-gradient(60% 60% at 50% 45%, rgba(31,111,235,.07), #fff 72%); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:30px 20px; overflow:hidden; min-height:340px; }
.exp-toolbar { display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; }
.exp-toolbar .hint { font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.04em; }
.exp-toggle { display:inline-flex; align-items:center; gap:9px; background:var(--navy); color:#fff; padding:9px 16px; border-radius:8px; font-size:13px; font-weight:700; transition:.2s var(--ease); }
.exp-toggle:hover { background:var(--blue); }
.exp-toggle .pill { width:34px; height:18px; border-radius:99px; background:rgba(255,255,255,.28); position:relative; transition:.25s var(--ease); }
.exp-toggle .pill::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:.25s var(--ease); }
.explode.is-exploded .exp-toggle .pill { background:var(--blue); }
.explode.is-exploded .exp-toggle .pill::after { left:18px; }

/* SVG roller assembly */
.roller-svg { width:100%; height:auto; display:block; touch-action:none; }
.roller-svg .part { cursor:pointer; transition:transform .55s cubic-bezier(.34,1.3,.5,1), opacity .3s; transform-box:fill-box; transform-origin:center; }
.roller-svg .part:hover { opacity:.92; }
.roller-svg .part.dim { opacity:.28; }
.roller-svg .part.active .pf { stroke:var(--blue); stroke-width:2.5; }
.exp-label { position:absolute; pointer-events:none; background:var(--navy); color:#fff; font-family:var(--mono); font-size:11px; padding:5px 10px; border-radius:6px; white-space:nowrap; opacity:0; transform:translate(-50%,-6px); transition:.18s var(--ease); z-index:4; box-shadow:var(--shadow-md); }
.exp-label.show { opacity:1; transform:translate(-50%,-12px); }
.exp-label::after { content:''; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--navy); border-bottom:0; }

/* parts list */
.parts-list { display:flex; flex-direction:column; gap:8px; }
.parts-list h3 { font-size:20px; font-weight:800; margin-bottom:6px; }
.part-item { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:#fff; cursor:pointer; transition:.2s var(--ease); }
.part-item:hover, .part-item.active { border-color:var(--blue); box-shadow:var(--shadow-sm); background:var(--panel-2); }
.part-item .pn { width:24px; height:24px; flex-shrink:0; border-radius:7px; background:var(--navy); color:#fff; font-family:var(--mono); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.part-item.active .pn { background:var(--blue); }
.part-item .pt { font-size:14px; font-weight:700; }
.part-item .pd2 { font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-top:2px; }

/* ── Breadcrumbs ────────────────────────────────────────────── */
.crumbs { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--dim); margin-bottom:20px; font-family:var(--mono); }
.crumbs a { color:var(--ink-2); } .crumbs a:hover { color:var(--blue); }
.crumbs .sep { opacity:.5; }
.crumbs .cur { color:var(--blue); }

/* ── Related products ───────────────────────────────────────── */
.related { padding:clamp(50px,7vw,90px) var(--gut) 0; }
.rel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:1000px){ .rel-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .rel-grid { grid-template-columns:repeat(2,1fr); gap:12px; } }

/* ── Lab gallery ────────────────────────────────────────────── */
.lab-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.lab-grid .lab-item { border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); aspect-ratio:16/10; cursor:pointer; background:#f8fafd; transition:.3s var(--ease); }
.lab-grid .lab-item img { width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease); }
.lab-grid .lab-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue); }
.lab-grid .lab-item:hover img { transform:scale(1.06); }

/* ── Floating WhatsApp ──────────────────────────────────────── */
.wa-float { position:fixed; right:22px; bottom:22px; width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(37,211,102,.45); z-index:9400; transition:.25s var(--ease); }
.wa-float:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 16px 36px rgba(37,211,102,.55); }
.wa-float svg { width:30px; height:30px; }
.wa-float::before { content:'Chat with us'; position:absolute; right:68px; top:50%; transform:translateY(-50%); background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:.2s var(--ease); box-shadow:var(--shadow-md); }
.wa-float:hover::before { opacity:1; }
@media (max-width:560px){ .wa-float{ width:50px;height:50px;right:16px;bottom:16px } .wa-float svg{width:26px;height:26px} .wa-float::before{display:none} }

/* ── Scroll to top ──────────────────────────────────────────── */
.to-top { position:fixed; left:22px; bottom:22px; width:46px; height:46px; border-radius:12px; background:#fff; border:1px solid var(--line-2); color:var(--navy); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); z-index:9400; opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s var(--ease); font-size:20px; }
.to-top.show { opacity:1; visibility:visible; transform:none; }
.to-top:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
@media (max-width:560px){ .to-top{ left:16px;bottom:74px;width:42px;height:42px } }

/* ── Share buttons ──────────────────────────────────────────── */
.share { display:flex; gap:10px; align-items:center; margin-top:22px; flex-wrap:wrap; }
.share .sl { font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--dim); text-transform:uppercase; }
.share a, .share button { width:38px; height:38px; border-radius:9px; border:1px solid var(--line-2); background:#fff; color:var(--ink-2); display:flex; align-items:center; justify-content:center; transition:.2s var(--ease); }
.share a:hover, .share button:hover { color:#fff; transform:translateY(-2px); }
.share .s-wa:hover { background:#25d366; border-color:#25d366; }
.share .s-fb:hover { background:#1877f2; border-color:#1877f2; }
.share .s-cp:hover { background:var(--navy); border-color:var(--navy); }
.share svg { width:17px; height:17px; }

@media (max-width:820px){ .explode-wrap { grid-template-columns:1fr; } }

/* ============================================================
   PRESENTATION FEATURES — quick view, compare, showcase, print
   ============================================================ */

/* card action overlay (Quick view / Compare) */
.card .c-media { position:relative; }
.card .c-actions { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; background:rgba(7,23,57,.42); opacity:0; transition:.25s var(--ease); }
.card:hover .c-actions { opacity:1; }
.card .c-actions button { background:#fff; color:var(--navy); font-size:12.5px; font-weight:700; padding:9px 15px; border-radius:8px; box-shadow:var(--shadow-md); transform:translateY(8px); transition:.25s var(--ease); display:inline-flex; align-items:center; gap:6px; }
.card:hover .c-actions button { transform:translateY(0); }
.card .c-actions button:hover { background:var(--blue); color:#fff; }
.card .c-actions .qv { transition-delay:.02s; } .card .c-actions .cmp { transition-delay:.06s; }
@media (hover:none){ .card .c-actions{ display:none; } }

/* ── Quick View modal ───────────────────────────────────────── */
.qv-overlay { position:fixed; inset:0; z-index:9700; background:rgba(7,23,57,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:.3s var(--ease); }
.qv-overlay.open { opacity:1; visibility:visible; }
.qv-modal { background:#fff; border-radius:18px; width:min(920px,100%); max-height:88vh; overflow:auto; box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1fr 1fr; transform:translateY(16px) scale(.98); transition:.3s var(--spring); }
.qv-overlay.open .qv-modal { transform:none; }
.qv-modal .qv-img { background:#f8fafd; display:flex; align-items:center; justify-content:center; padding:34px; border-right:1px solid var(--line); }
.qv-modal .qv-img img { max-width:100%; max-height:360px; object-fit:contain; }
.qv-modal .qv-body { padding:30px; position:relative; }
.qv-modal .qv-close { position:absolute; top:14px; right:16px; font-size:24px; color:var(--dim); background:none; }
.qv-modal .qv-close:hover { color:var(--ink); }
.qv-modal .qv-cat { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); }
.qv-modal h3 { font-size:26px; font-weight:800; margin:8px 0 12px; line-height:1.15; }
.qv-modal .qv-lead { font-size:14.5px; color:var(--ink-2); line-height:1.7; margin-bottom:16px; }
.qv-modal .qv-specs { border-top:1px solid var(--line); margin-bottom:18px; }
.qv-modal .qv-specs .r { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.qv-modal .qv-specs .r .k { color:var(--dim); font-family:var(--mono); font-size:12px; }
.qv-modal .qv-act { display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:680px){ .qv-modal { grid-template-columns:1fr; } .qv-modal .qv-img { border-right:none; border-bottom:1px solid var(--line); } }

/* ── Compare bar + table ────────────────────────────────────── */
.cmp-bar { position:fixed; left:50%; bottom:22px; transform:translate(-50%,140%); z-index:9350; background:var(--ink); color:#fff; border-radius:14px; box-shadow:var(--shadow-lg); padding:12px 16px; display:flex; align-items:center; gap:14px; max-width:94vw; transition:.35s var(--spring); opacity:0; visibility:hidden; pointer-events:none; }
.cmp-bar.show { transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto; }
.cmp-bar .cb-thumbs { display:flex; gap:8px; }
.cmp-bar .cb-th { width:46px; height:46px; border-radius:9px; background:#fff; padding:4px; position:relative; }
.cmp-bar .cb-th img { width:100%; height:100%; object-fit:contain; }
.cmp-bar .cb-th .x { position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%; background:var(--blue); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; }
.cmp-bar .cb-txt { font-size:13px; color:rgba(255,255,255,.8); }
.cmp-bar .cb-go { background:var(--blue); color:#fff; font-weight:700; font-size:13px; padding:10px 18px; border-radius:9px; white-space:nowrap; }
.cmp-bar .cb-go:hover { background:#3b9cff; }
.cmp-bar .cb-clear { font-size:12px; color:rgba(255,255,255,.55); }
.cmp-bar .cb-clear:hover { color:#fff; }

.compare-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); }
.compare-table th, .compare-table td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top; }
.compare-table thead th { background:var(--panel-2); }
.compare-table .ct-img { width:120px; height:90px; display:flex; align-items:center; justify-content:center; background:#f8fafd; border-radius:10px; }
.compare-table .ct-img img { max-width:100%; max-height:100%; object-fit:contain; }
.compare-table .k { font-family:var(--mono); font-size:12px; color:var(--dim); width:170px; background:#fbfdff; }
.compare-table tr:hover td { background:rgba(31,111,235,.03); }
.cmp-empty { text-align:center; padding:70px 20px; color:var(--dim); }

/* ── Print spec sheet ───────────────────────────────────────── */
@media print {
  body * { visibility:hidden !important; }
  #print-sheet, #print-sheet * { visibility:visible !important; }
  #print-sheet { position:absolute; inset:0; display:block !important; padding:0; }
  .wa-float, .to-top, .cmp-bar { display:none !important; }
}
#print-sheet { display:none; }
.ps-head { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid var(--navy); padding-bottom:16px; margin-bottom:20px; }
.ps-head img { height:42px; }
.ps-head .ps-co { text-align:right; font-size:11px; color:#333; line-height:1.6; }
.ps-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ps-grid img { width:100%; border:1px solid #ddd; border-radius:8px; }
.ps-grid h1 { font-size:24px; margin-bottom:8px; }
.ps-spec { width:100%; border-collapse:collapse; margin-top:14px; }
.ps-spec td { padding:7px 8px; border-bottom:1px solid #eee; font-size:12.5px; }
.ps-spec td:first-child { color:#666; width:45%; }
.ps-foot { margin-top:24px; border-top:1px solid #ddd; padding-top:12px; font-size:11px; color:#555; }

/* ── Fullscreen showcase ────────────────────────────────────── */
.showcase { position:fixed; inset:0; z-index:9800; background:linear-gradient(135deg,#071739,#0b1f3a 60%,#102a52); color:#fff; display:none; flex-direction:column; }
.showcase.open { display:flex; }
.sc-top { display:flex; justify-content:space-between; align-items:center; padding:20px 30px; }
.sc-top .sc-brand img { height:30px; filter:brightness(0) invert(1); }
.sc-top .sc-close { font-size:26px; color:rgba(255,255,255,.7); background:none; }
.sc-top .sc-close:hover { color:#fff; }
.sc-stage { flex:1; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:40px; padding:10px 60px; }
.sc-media { display:flex; align-items:center; justify-content:center; height:100%; }
.sc-media img { max-width:100%; max-height:62vh; object-fit:contain; filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)); animation:scIn .6s var(--ease); }
.sc-info { max-width:520px; }
.sc-info .sc-cat { font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#7db0ff; }
.sc-info h2 { font-size:clamp(34px,4.6vw,60px); font-weight:800; letter-spacing:-.02em; line-height:1.05; margin:10px 0 16px; animation:scIn .6s var(--ease); }
.sc-info p { font-size:17px; color:rgba(255,255,255,.82); line-height:1.7; margin-bottom:20px; }
.sc-tags { display:flex; flex-wrap:wrap; gap:8px; }
.sc-tags span { font-family:var(--mono); font-size:12px; border:1px solid rgba(255,255,255,.25); padding:7px 13px; border-radius:7px; color:rgba(255,255,255,.85); }
@keyframes scIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
.sc-nav { display:flex; align-items:center; justify-content:center; gap:24px; padding:20px; }
.sc-nav button { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:24px; transition:.2s var(--ease); }
.sc-nav button:hover { background:var(--blue); }
.sc-nav .sc-count { font-family:var(--mono); font-size:14px; color:rgba(255,255,255,.7); min-width:70px; text-align:center; }
.sc-dots { display:flex; gap:7px; justify-content:center; padding-bottom:18px; }
.sc-dots i { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:.2s; }
.sc-dots i.on { background:#7db0ff; width:22px; border-radius:5px; }
@media (max-width:820px){ .sc-stage{ grid-template-columns:1fr; padding:10px 24px; gap:18px } .sc-media img{ max-height:38vh } }

/* present-mode launch button */
.present-btn { display:inline-flex; align-items:center; gap:9px; }

/* ── Extra polish: hero glow, smoother card, sheen ──────────── */
.hero h1 .g { background:linear-gradient(120deg,var(--blue),#3b9cff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.card .c-media::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s var(--ease); pointer-events:none; }
.card:hover .c-media::after { transform:translateX(120%); }
.btn-grad::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%); transform:translateX(-120%); transition:transform .6s var(--ease); }
.btn-grad:hover::after { transform:translateX(120%); }
.btn { overflow:hidden; }
.stat-band, .statband { position:relative; overflow:hidden; }

/* news article page */
.article { padding:120px var(--gut) 0; max-width:1000px; margin:0 auto; }
.article .pd-back { font-family:var(--mono); font-size:12px; color:var(--dim); display:inline-flex; gap:8px; margin-bottom:26px; }
.article .pd-back:hover { color:var(--blue); }
.article .a-meta { display:flex; gap:10px; align-items:center; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--blue); margin-bottom:14px; }
.article .a-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--line-2); }
.article .a-meta .cat { color:var(--dim); }
.article h1 { font-size:clamp(30px,4.6vw,52px); font-weight:800; letter-spacing:-.02em; line-height:1.08; margin-bottom:18px; }
.article .a-lead { font-size:17px; color:var(--ink-2); line-height:1.8; max-width:760px; }
.a-hero { margin:30px 0 36px; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.a-hero img { width:100%; max-height:520px; object-fit:cover; display:block; }
.gallery-head { display:flex; align-items:baseline; gap:12px; margin:10px 0 18px; }
.gallery-head h2 { font-size:24px; font-weight:800; }
.gallery-head span { font-family:var(--mono); font-size:12px; color:var(--dim); }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.gallery .g-item { aspect-ratio:1; border-radius:12px; overflow:hidden; border:1px solid var(--line); cursor:pointer; background:#f8fafd; position:relative; box-shadow:var(--shadow-sm); transition:.3s var(--ease); }
.gallery .g-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.gallery .g-item:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--blue); }
.gallery .g-item:hover img { transform:scale(1.07); }
.gallery .g-item::after { content:'⤢'; position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:6px; background:rgba(255,255,255,.92); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:13px; opacity:0; transition:.2s var(--ease); }
.gallery .g-item:hover::after { opacity:1; }

/* lightbox */
.lightbox { position:fixed; inset:0; z-index:10001; background:rgba(7,23,57,.94); display:none; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw; max-height:84vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lb-close { position:absolute; top:22px; right:26px; font-size:30px; color:#fff; cursor:pointer; line-height:1; background:none; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s var(--ease); }
.lb-nav:hover { background:var(--blue); }
.lb-prev { left:24px; } .lb-next { right:24px; }
.lb-count { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.8); font-family:var(--mono); font-size:13px; }
@media (max-width:560px) { .lb-nav { width:44px; height:44px; font-size:22px; } .lb-prev { left:10px; } .lb-next { right:10px; } }

/* enquiry actions on cart page */
.enq-actions { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.btn-wa { background:#25d366; color:#fff; box-shadow:0 8px 22px rgba(37,211,102,.3); }
.btn-wa:hover { background:#1eb858; transform:translateY(-2px); }

@media (max-width:900px) {
  .segs, .about-split, .contact-grid { grid-template-columns:1fr; }
  .statband { grid-template-columns:1fr 1fr; gap:30px 16px; }
  .about-split .a-img { order:-1; }
}
@media (max-width:540px) {
  .statband { grid-template-columns:1fr 1fr; }
}

/* ── Car-delivery distance box (cart summary) ── */
.car-box { margin-top:10px; padding:12px; background:#f6f9ff; border:1px solid var(--line); border-radius:10px; }
.car-box .cb-l { display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.car-box .cb-row { display:flex; gap:8px; }
.car-input { flex:1; min-width:0; padding:9px 11px; border:1px solid var(--line-2); border-radius:8px; font-size:13.5px; font-family:inherit; }
.car-input:focus { outline:none; border-color:var(--blue); }
.car-calc { padding:9px 14px; background:var(--blue); color:#fff; border-radius:8px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; }
.car-calc:hover { background:var(--navy); }
.car-calc:disabled { opacity:.6; cursor:default; }
.car-box .cb-out { margin-top:9px; font-size:13px; color:var(--ink); }
.car-box .cb-out b { color:var(--navy); }
.car-box .cb-far { color:#c2410c; font-weight:600; }
.car-box .cb-hint { margin-top:8px; font-size:12px; color:var(--dim); }

/* ── Voucher (welcome reward) ── */
.vch-offer, .vch-applied { margin:12px 0; padding:11px 13px; border-radius:10px; font-size:13px; line-height:1.5; }
.vch-offer { background:#fff7ed; border:1px dashed #f59e0b; color:#92400e; }
.vch-applied { background:#ecfdf3; border:1px solid #34d399; color:#166534; }
.vch-apply, .vch-remove { margin-left:4px; padding:4px 11px; border-radius:7px; font-weight:700; font-size:12px; cursor:pointer; }
.vch-apply { background:#f59e0b; color:#fff; }
.vch-apply:hover { background:#d97706; }
.vch-remove { background:transparent; color:#166534; text-decoration:underline; }
.vch-need, .vch-warn { color:#b45309; font-weight:600; }
.vch-warn { display:inline-block; }

/* ── New-customer voucher POP-OUT card (bouncy in · firework out) ── */
.vch-pop {
  position:fixed; left:22px; bottom:22px; z-index:70; width:300px; max-width:calc(100vw - 32px);
  display:flex; gap:12px; align-items:flex-start; padding:16px 16px 16px 14px;
  background:linear-gradient(135deg,#fff7ed,#ffffff); color:var(--ink);
  border:1px solid #fcd9a4; border-radius:16px;
  box-shadow:0 18px 48px rgba(180,83,9,.28), 0 0 0 4px rgba(245,158,11,.08);
  opacity:0; transform:translateY(120%) scale(.7); pointer-events:none;
}
.vch-pop.in {
  opacity:1; pointer-events:auto;
  animation:vchBounceIn .8s cubic-bezier(.22,1.4,.36,1) forwards;
}
.vch-pop.out { animation:vchPopOut .55s cubic-bezier(.55,0,.9,.4) forwards; }
@keyframes vchBounceIn {
  0%   { opacity:0; transform:translateY(120%) scale(.6); }
  55%  { opacity:1; transform:translateY(-14px) scale(1.06); }
  72%  { transform:translateY(6px) scale(.97); }
  86%  { transform:translateY(-4px) scale(1.02); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes vchPopOut {
  0%   { opacity:1; transform:translateY(0) scale(1); }
  30%  { transform:translateY(-10px) scale(1.08); }
  100% { opacity:0; transform:translateY(40px) scale(.4); }
}
.vch-pop .vp-gift { font-size:38px; line-height:1; flex-shrink:0; animation:vchWobble 2.4s ease-in-out infinite; transform-origin:50% 80%; }
@keyframes vchWobble { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
.vch-pop .vp-x { position:absolute; top:8px; right:10px; width:24px; height:24px; border-radius:50%; background:rgba(180,83,9,.1); color:#b45309; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.18s var(--ease); }
.vch-pop .vp-x:hover { background:#f59e0b; color:#fff; transform:rotate(90deg) scale(1.1); }
.vch-pop .vp-title { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#d97706; }
.vch-pop .vp-amt { font-size:26px; font-weight:900; color:#b45309; line-height:1.1; margin:1px 0 4px; }
.vch-pop .vp-amt span { font-size:14px; font-weight:700; color:#92400e; }
.vch-pop .vp-txt { font-size:12.5px; color:var(--ink-2); line-height:1.5; }
.vch-pop .vp-txt b { color:#b45309; }
.vch-pop .vp-cta { display:inline-flex; align-items:center; gap:5px; margin-top:10px; padding:8px 16px; background:linear-gradient(90deg,#f59e0b,#fb923c); color:#fff; font-weight:800; font-size:13px; border-radius:9px; box-shadow:0 6px 16px rgba(245,158,11,.4); transition:.2s var(--ease); }
.vch-pop .vp-cta:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(245,158,11,.5); }
.vch-pop .vp-cta span { transition:.2s var(--ease); }
.vch-pop .vp-cta:hover span { transform:translateX(3px); }
/* firework canvas overlay */
.vp-fx { position:fixed; inset:0; z-index:71; pointer-events:none; }
@media (max-width:560px){ .vch-pop { left:12px; bottom:12px; width:260px; } }

/* ── Live chat widget ── */
.chat-fab { position:fixed; right:22px; bottom:90px; width:56px; height:56px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(11,31,59,.35); cursor:pointer; z-index:60; transition:.2s var(--ease); }
.chat-fab:hover { transform:translateY(-3px); background:var(--blue); }
.chat-fab svg { width:26px; height:26px; }
.chat-panel { position:fixed; right:22px; bottom:156px; width:340px; max-width:calc(100vw - 32px); height:460px; max-height:calc(100vh - 200px); background:#fff; border-radius:16px; box-shadow:0 24px 60px rgba(11,31,59,.3); display:flex; flex-direction:column; overflow:hidden; z-index:61; opacity:0; visibility:hidden; transform:translateY(16px); transition:.25s var(--ease); }
.chat-panel.open { opacity:1; visibility:visible; transform:translateY(0); }
.chat-head { background:var(--navy); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.chat-head .ch-av { width:34px; height:34px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.chat-head .ch-t { font-weight:800; font-size:14.5px; }
.chat-head .ch-s { font-size:11.5px; opacity:.8; }
.chat-head .ch-x { margin-left:auto; cursor:pointer; font-size:18px; opacity:.85; }
.chat-body { flex:1; padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; background:#f6f9ff; }
.chat-msg { max-width:82%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.5; }
.chat-msg.bot { background:#fff; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-msg.me { background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chat-quick { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.chat-quick button { font-size:12px; padding:6px 10px; border:1px solid var(--blue); color:var(--blue); border-radius:20px; cursor:pointer; background:#fff; }
.chat-quick button:hover { background:var(--blue); color:#fff; }
.chat-foot { padding:10px; border-top:1px solid var(--line); }
.chat-wa { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px; background:#25d366; color:#fff; border-radius:10px; font-weight:700; font-size:13.5px; }
.chat-wa:hover { background:#1eb858; }
.chat-wa svg { width:18px; height:18px; }
@media (max-width:560px){ .chat-panel { right:12px; bottom:150px; } .chat-fab { right:16px; } }

/* ── Account button in navbar ── */
.acct-wrap { position:relative; display:inline-flex; }
.acct-btn { display:flex; align-items:center; gap:7px; background:transparent; border:1px solid var(--line-2); color:var(--ink); padding:8px 14px; border-radius:8px; font-weight:700; font-size:13.5px; cursor:pointer; transition:.2s var(--ease); }
.acct-btn:hover { border-color:var(--blue); color:var(--blue); }
.acct-btn svg { flex-shrink:0; }
.head.head-hero:not(.scrolled) .acct-btn { color:#fff; border-color:rgba(255,255,255,.3); }
.head.head-hero:not(.scrolled) .acct-btn:hover { background:rgba(255,255,255,.14); color:#fff; }
.acct-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:180px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 16px 40px rgba(11,31,59,.18); padding:6px; display:none; flex-direction:column; z-index:50; }
.acct-wrap.open .acct-menu { display:flex; }
.acct-menu a, .acct-menu button { text-align:left; padding:10px 12px; border-radius:7px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; background:transparent; }
.acct-menu a:hover, .acct-menu button:hover { background:var(--panel-2); color:var(--blue); }
.acct-menu .acct-vch { color:#b45309; }
.acct-menu .acct-logout { border-top:1px solid var(--line); margin-top:4px; color:#c2410c; }

/* ── Auth modal (sign up / log in) ── */
.auth-overlay { position:fixed; inset:0; z-index:90; background:rgba(11,31,59,.5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:.25s var(--ease); }
.auth-overlay.open { opacity:1; visibility:visible; }
.auth-modal { width:100%; max-width:400px; background:#fff; border-radius:18px; padding:26px 26px 28px; position:relative; box-shadow:0 30px 70px rgba(11,31,59,.35); transform:translateY(16px) scale(.97); transition:.28s cubic-bezier(.22,1.2,.36,1); }
.auth-overlay.open .auth-modal { transform:translateY(0) scale(1); }
.auth-x { position:absolute; top:14px; right:16px; font-size:18px; color:var(--dim); cursor:pointer; background:none; }
.auth-x:hover { color:var(--ink); }
.auth-tabs { display:flex; gap:6px; background:var(--panel-2); padding:4px; border-radius:10px; margin-bottom:16px; }
.at-tab { flex:1; padding:9px; border-radius:7px; font-weight:700; font-size:14px; color:var(--ink-2); cursor:pointer; background:transparent; transition:.18s var(--ease); }
.at-tab.on { background:#fff; color:var(--navy); box-shadow:0 2px 8px rgba(11,31,59,.1); }
.auth-promo { background:#fff7ed; border:1px dashed #f59e0b; color:#92400e; font-size:12.5px; line-height:1.5; padding:10px 12px; border-radius:10px; margin-bottom:16px; }
.auth-promo b { color:#b45309; }
.auth-form label { display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin:10px 0 5px; }
.auth-form input { width:100%; padding:11px 13px; border:1px solid var(--line-2); border-radius:9px; font-size:14px; font-family:inherit; }
.auth-form input:focus { outline:none; border-color:var(--blue); }
.auth-err { color:#dc2626; font-size:12.5px; font-weight:600; min-height:18px; margin:8px 0 4px; }
.auth-form .btn-block { margin-top:6px; }

/* ── My Account — store dashboard ── */
.acct-page { max-width:1180px; margin:0 auto; padding:104px var(--gut) 80px; }
.acct-guest { text-align:center; padding:90px 20px; max-width:520px; margin:0 auto; }
.acct-guest .ag-ic { font-size:54px; margin-bottom:10px; }
.acct-guest h2 { font-size:28px; font-weight:800; margin-bottom:10px; }
.acct-guest p { color:var(--ink-2); margin:0 auto 24px; line-height:1.65; }
.acct-guest .ag-act { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.acct-shell { display:grid; grid-template-columns:248px 1fr; gap:26px; align-items:start; }
/* sidebar */
.acct-side { position:sticky; top:96px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 10px 30px rgba(11,31,59,.06); }
.ac-user { display:flex; align-items:center; gap:12px; padding:6px 6px 16px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.ac-avatar { width:46px; height:46px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,var(--navy),var(--blue)); color:#fff; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.ac-name { font-size:14.5px; font-weight:800; line-height:1.2; }
.ac-email { font-size:11.5px; color:var(--ink-2); word-break:break-all; }
.acct-nav { display:flex; flex-direction:column; gap:2px; }
.anav { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:10px; font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer; background:transparent; text-align:left; transition:.16s var(--ease); }
.anav svg { width:18px; height:18px; flex-shrink:0; }
.anav:hover { background:var(--panel-2); color:var(--ink); }
.anav.on { background:linear-gradient(135deg,var(--navy),var(--blue)); color:#fff; box-shadow:0 6px 16px rgba(31,111,235,.25); }
.anav-out { margin-top:8px; border-top:1px solid var(--line); border-radius:0 0 10px 10px; color:#c2410c; padding-top:14px; }
.anav-out:hover { background:#fef2f2; color:#b91c1c; }
/* main */
.acct-main { min-width:0; }
.acct-welcome { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:linear-gradient(120deg,var(--navy),var(--blue)); color:#fff; border-radius:18px; padding:26px 28px; margin-bottom:22px; box-shadow:0 14px 36px rgba(11,31,59,.2); }
.acct-welcome h2 { font-size:24px; font-weight:800; }
.acct-welcome p { font-size:14px; opacity:.85; margin-top:3px; }
.acct-welcome .btn-grad { background:#fff; color:var(--navy); }
.acct-title { font-size:24px; font-weight:800; }
.acct-sub { color:var(--ink-2); font-size:14px; margin:4px 0 20px; }
.acct-h { font-size:16px; font-weight:800; margin-bottom:14px; }
/* stat cards */
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
.stat-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:0 6px 18px rgba(11,31,59,.05); }
.sc-ic { width:38px; height:38px; border-radius:10px; background:var(--panel-2); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.sc-ic svg { width:20px; height:20px; }
.sc-n { font-size:26px; font-weight:900; color:var(--navy); line-height:1; }
.sc-l { font-size:12.5px; color:var(--ink-2); margin-top:4px; }
/* coupon */
.coupon { display:flex; align-items:stretch; background:linear-gradient(120deg,#fff7ed,#fff); border:2px dashed #f59e0b; border-radius:16px; overflow:hidden; position:relative; }
.coupon::before, .coupon::after { content:''; position:absolute; width:22px; height:22px; background:var(--panel); border-radius:50%; left:62%; transform:translateX(-50%); }
.coupon::before { top:-12px; } .coupon::after { bottom:-12px; }
.cp-left { flex:1; padding:20px 22px; }
.cp-tag { font-size:11px; font-weight:800; letter-spacing:.08em; color:#d97706; }
.cp-amt { font-size:34px; font-weight:900; color:#b45309; line-height:1.05; margin-top:2px; }
.cp-amt span { font-size:15px; font-weight:800; }
.cp-cond { font-size:12.5px; color:var(--ink-2); margin-top:6px; }
.cp-right { width:34%; min-width:140px; border-left:2px dashed #f59e0b; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; }
.cp-code { font-family:var(--mono); font-weight:700; font-size:14px; color:#b45309; letter-spacing:.05em; background:#fff6e6; border:1px solid #fcd9a4; padding:6px 12px; border-radius:8px; }
.cp-use { white-space:nowrap; padding:9px 16px; font-size:13px; }
.coupon.used { border-color:var(--line-2); border-style:solid; background:var(--panel-2); }
.coupon.used::before, .coupon.used::after { display:none; }
.coupon.used .cp-right { border-left-color:var(--line-2); border-left-style:solid; }
.cp-used { font-family:var(--mono); font-weight:700; color:var(--dim); border:2px solid var(--line-2); padding:5px 12px; border-radius:8px; transform:rotate(-8deg); font-size:13px; }
.vch-note { margin-top:16px; background:var(--panel-2); border-radius:12px; padding:13px 15px; font-size:13px; color:var(--ink-2); }
/* orders */
.order-list { display:flex; flex-direction:column; gap:12px; }
.acct-order { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:0 4px 14px rgba(11,31,59,.04); }
.ao-head { display:flex; align-items:center; gap:10px; font-weight:700; font-size:13.5px; padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.ao-date { color:var(--ink); }
.ao-badge { font-size:11px; font-weight:800; color:#166534; background:#ecfdf3; border:1px solid #bbf7d0; padding:2px 9px; border-radius:20px; }
.ao-total { margin-left:auto; color:var(--navy); font-size:15px; }
.ao-item { display:flex; justify-content:space-between; font-size:13px; color:var(--ink-2); padding:4px 0; }
.ao-item em { color:var(--dim); font-style:normal; }
.ao-vch { font-size:12.5px; color:#1a7f43; font-weight:700; margin-top:8px; }
.acct-empty { text-align:center; padding:40px 24px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.acct-empty .ae-ic { font-size:40px; }
.acct-empty p { color:var(--ink-2); margin:6px 0 16px; }
/* profile */
.profile-grid { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.pf-row { display:flex; justify-content:space-between; gap:16px; padding:15px 18px; font-size:14px; border-bottom:1px solid var(--line); }
.pf-row:last-child { border-bottom:none; }
.pf-row span { color:var(--ink-2); }
.pf-row b { color:var(--ink); text-align:right; word-break:break-all; }
@media (max-width:820px){
  .acct-shell { grid-template-columns:1fr; }
  .acct-side { position:static; }
  .acct-nav { flex-direction:row; flex-wrap:wrap; }
  .anav { flex:1; min-width:120px; justify-content:center; }
  .anav-out { border-top:none; }
  .stat-row { grid-template-columns:1fr; }
}

/* ── Delivery-location: summary button ── */
.loc-open { display:flex; align-items:center; gap:12px; width:100%; text-align:left; margin-top:8px; padding:13px 14px; background:#fff; border:1.5px solid var(--line-2); border-radius:12px; cursor:pointer; transition:.18s var(--ease); }
.loc-open:hover { border-color:var(--blue); background:#f6f9ff; box-shadow:0 4px 14px rgba(31,111,235,.1); }
.loc-open .lo-ic { font-size:24px; flex-shrink:0; }
.loc-open .lo-txt { flex:1; min-width:0; font-size:14px; font-weight:700; color:var(--ink); display:flex; flex-direction:column; }
.loc-open .lo-txt b { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.loc-open .lo-txt small { font-weight:500; font-size:11.5px; color:var(--dim); margin-top:1px; }
.loc-open .lo-arrow { flex-shrink:0; font-size:12.5px; font-weight:800; color:var(--blue); white-space:nowrap; }
.leaflet-control-attribution { font-size:9px; }

/* ── Fullscreen "Pick your location" map modal ── */
.map-modal { position:fixed; inset:0; z-index:95; background:rgba(11,31,59,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:.25s var(--ease); }
.map-modal.open { opacity:1; visibility:visible; }
.mm-panel { width:100%; max-width:920px; height:86vh; max-height:760px; background:#fff; border-radius:20px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(11,31,59,.4); transform:translateY(18px) scale(.98); transition:.28s cubic-bezier(.22,1.2,.36,1); }
.map-modal.open .mm-panel { transform:translateY(0) scale(1); }
.mm-head { display:flex; align-items:flex-start; gap:12px; padding:20px 22px 16px; border-bottom:1px solid var(--line); }
.mm-title { font-size:19px; font-weight:800; color:var(--navy); }
.mm-sub { font-size:13px; color:var(--ink-2); margin-top:3px; }
.mm-x { margin-left:auto; font-size:20px; color:var(--dim); cursor:pointer; background:none; line-height:1; padding:2px; }
.mm-x:hover { color:var(--ink); }
.mm-searchbar { position:relative; margin:14px 22px 0; z-index:1000; }
.mm-sic { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:16px; pointer-events:none; }
.mm-input { width:100%; padding:14px 42px 14px 42px; font-size:15px; font-family:inherit; border:1.5px solid var(--line-2); border-radius:12px; }
.mm-input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(31,111,235,.12); }
.mm-clear { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; background:var(--panel-2); color:var(--ink-2); font-size:12px; cursor:pointer; display:none; }
.mm-clear:hover { background:var(--line-2); }
.mm-suggest { position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 46px rgba(11,31,59,.2); max-height:360px; overflow-y:auto; z-index:1001; display:none; }
.mm-suggest.open { display:block; }
.mm-sug-head { padding:9px 14px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); background:var(--panel-2); border-bottom:1px solid var(--line); position:sticky; top:0; }
.mm-sug-item { display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left; padding:12px 14px; color:var(--ink); cursor:pointer; background:transparent; border-bottom:1px solid var(--line); transition:.12s var(--ease); }
.mm-sug-item:last-child { border-bottom:none; }
.mm-sug-item:hover { background:#f0f6ff; }
.mm-sug-ic { flex-shrink:0; font-size:16px; margin-top:1px; }
.mm-sug-txt { line-height:1.35; min-width:0; }
.mm-sug-txt b { display:block; font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mm-sug-txt b mark { background:#fde68a; color:inherit; border-radius:2px; padding:0 1px; }
.mm-sug-txt small { display:block; font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mm-noresult { padding:16px; font-size:13px; color:var(--dim); text-align:center; line-height:1.5; }
.mm-map { flex:1; margin:14px 22px 0; border-radius:14px; overflow:hidden; border:1px solid var(--line-2); min-height:0; }
.mm-map .leaflet-container { font-family:inherit; height:100%; }
.mm-foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 22px; border-top:1px solid var(--line); }
.mm-readout { flex:1; min-width:200px; display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-2); }
.mm-readout .mm-pin { font-size:22px; }
.mm-readout div { display:flex; flex-direction:column; min-width:0; }
.mm-readout b { color:var(--ink); font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; }
.mm-readout small { font-size:12px; color:var(--dim); }
.mm-readout.set b { color:var(--navy); }
.mm-confirm { white-space:nowrap; padding:13px 22px; }
.mm-confirm:disabled { opacity:.5; pointer-events:none; }
@media (max-width:560px){
  .map-modal { padding:0; }
  .mm-panel { height:100vh; max-height:none; border-radius:0; }
  .mm-confirm { flex:1; }
}

/* ── Order tracker (My Account) ── */
.ao-badge-prog { color:#1e40af; background:#eff6ff; border-color:#bfdbfe; }
.tracker { margin-top:14px; padding:14px 16px; background:var(--panel-2); border-radius:12px; }
.trk-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.trk-status { font-weight:800; font-size:14px; color:var(--navy); }
.trk-eta { font-size:12.5px; color:var(--ink-2); }
.trk-eta b { color:var(--ink); }
.trk-eta.done { color:#166534; font-weight:700; }
.trk-desc { font-size:12.5px; color:var(--ink-2); margin:4px 0 14px; }
.trk-bar { display:flex; align-items:center; }
.trk-step { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; width:56px; text-align:center; }
.trk-dot { width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--dim); transition:.2s var(--ease); }
.trk-step.done .trk-dot { background:#22c55e; border-color:#22c55e; color:#fff; }
.trk-step.now .trk-dot { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 0 0 5px rgba(31,111,235,.16); animation:trkPulse 1.6s ease-in-out infinite; }
@keyframes trkPulse { 0%,100%{ box-shadow:0 0 0 5px rgba(31,111,235,.16);} 50%{ box-shadow:0 0 0 9px rgba(31,111,235,.06);} }
.trk-lbl { font-size:10.5px; font-weight:600; color:var(--ink-2); line-height:1.2; }
.trk-step.done .trk-lbl, .trk-step.now .trk-lbl { color:var(--ink); }
.trk-line { flex:1; height:3px; background:var(--line-2); border-radius:3px; margin:0 -2px 20px; }
.trk-step.done + .trk-line { background:#22c55e; }
.trk-route { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line-2); font-size:12px; color:var(--ink-2); }
.trk-route span { font-weight:600; }
.trk-arrow { color:var(--dim); font-weight:500; flex:1; text-align:center; }
.trk-meta { font-size:11.5px; color:var(--dim); margin-top:6px; }
@media (max-width:560px){ .trk-lbl { font-size:9px; } .trk-step { width:46px; } }

/* ── Login-required gate at checkout ── */
.login-gate { display:flex; align-items:flex-start; gap:12px; margin-top:16px; padding:14px 16px; background:#fff7ed; border:1.5px solid #fcd9a4; border-radius:12px; }
.login-gate .lg-ic { font-size:22px; flex-shrink:0; }
.login-gate .lg-txt { display:flex; flex-direction:column; gap:2px; }
.login-gate .lg-txt b { font-size:14px; color:#92400e; }
.login-gate .lg-txt span { font-size:12.5px; color:#a16207; line-height:1.5; }

/* ── Company Introduction page ── */
.intro-hero { position:relative; min-height:88vh; display:flex; align-items:center; color:#fff; overflow:hidden; }
.intro-hero .ih-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05); }
.intro-hero .ih-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg, rgba(8,20,45,.95) 0%, rgba(8,20,45,.85) 45%, rgba(8,20,45,.45) 100%); }
.intro-hero .ih-inner { position:relative; z-index:2; max-width:680px; padding:0 var(--gut); }
.intro-hero .ih-years { width:96px; margin-bottom:18px; }
.intro-hero .ih-eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#9cc3ff; }
.intro-hero h1 { font-size:clamp(40px,7vw,78px); font-weight:800; letter-spacing:-.02em; line-height:1.02; margin:14px 0 16px; }
.intro-hero p { font-size:clamp(15px,2vw,19px); color:rgba(255,255,255,.85); line-height:1.7; max-width:560px; }
.intro-hero .ih-btns { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.intro-hero .ih-dl { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); color:#fff; backdrop-filter:blur(6px); display:inline-flex; align-items:center; gap:8px; }
.intro-hero .ih-dl:hover { background:rgba(255,255,255,.22); }

/* side progress dots */
.intro-dots { position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:14px; }
.intro-dots a { width:11px; height:11px; border-radius:50%; background:var(--line-2); position:relative; transition:.2s var(--ease); }
.intro-dots a.on { background:var(--blue); transform:scale(1.3); }
.intro-dots a::after { content:attr(data-t); position:absolute; right:22px; top:50%; transform:translateY(-50%); white-space:nowrap; font-size:11.5px; font-weight:700; color:var(--navy); background:#fff; padding:4px 9px; border-radius:6px; box-shadow:0 4px 14px rgba(11,31,59,.14); opacity:0; pointer-events:none; transition:.2s var(--ease); }
.intro-dots a:hover::after { opacity:1; }
@media (max-width:900px){ .intro-dots { display:none; } }

.intro-sec { padding:clamp(60px,9vw,120px) var(--gut); max-width:1200px; margin:0 auto; }
.intro-sec.alt { background:var(--panel-2); max-width:none; }
.intro-sec.alt > * { max-width:1200px; margin-left:auto; margin-right:auto; }
.is-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.is-grid.reverse .is-media { order:-1; }
.is-no { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--blue); letter-spacing:.1em; }
.is-text h2 { font-size:clamp(28px,4vw,42px); font-weight:800; letter-spacing:-.02em; margin:6px 0 16px; }
.is-text p { font-size:15.5px; color:var(--ink-2); line-height:1.8; }
.is-text p strong { color:var(--ink); }
.is-media img { width:100%; border-radius:18px; box-shadow:0 24px 60px rgba(11,31,59,.18); object-fit:cover; aspect-ratio:4/3; }
.is-stats { display:flex; gap:28px; margin-top:26px; flex-wrap:wrap; }
.is-stats b { display:block; font-size:34px; font-weight:900; color:var(--navy); line-height:1; }
.is-stats span { font-size:13px; color:var(--ink-2); }
.is-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.is-chips span { font-size:12.5px; font-weight:600; color:var(--blue); background:#eaf2ff; border:1px solid #cfe0ff; padding:6px 12px; border-radius:20px; }
.is-head-c { text-align:center; max-width:680px; margin:0 auto 44px; }
.is-head-c h2 { font-size:clamp(28px,4vw,42px); font-weight:800; margin:6px 0 12px; }
.is-head-c .is-lead { font-size:15.5px; color:var(--ink-2); line-height:1.7; }

.qc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.qc-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(11,31,59,.05); transition:.2s var(--ease); display:flex; flex-direction:column; }
.qc-card:hover { transform:translateY(-4px); box-shadow:0 16px 38px rgba(11,31,59,.12); }
.qc-card .qc-img { aspect-ratio:4/3; background:#eef3f9; overflow:hidden; }
.qc-card .qc-img img { width:100%; height:100%; object-fit:cover; display:block; transition:.35s var(--ease); }
.qc-card:hover .qc-img img { transform:scale(1.06); }
.qc-card .qc-ic { font-size:30px; margin:18px 18px 6px; }
.qc-card h4 { font-size:15.5px; font-weight:800; margin:16px 16px 6px; }
.qc-card p { font-size:12.5px; color:var(--ink-2); line-height:1.55; margin:0 16px 18px; }

.proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.proj-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(11,31,59,.05); }
.proj-card img { width:100%; height:220px; object-fit:cover; background:#f1f5fb; }
.proj-card figcaption { padding:14px 16px; font-size:13.5px; color:var(--ink-2); line-height:1.5; }

.intro-close { background:linear-gradient(120deg,var(--navy),#15356b); color:#fff; padding:clamp(60px,9vw,110px) var(--gut); text-align:center; }
.intro-close .ic-inner { max-width:760px; margin:0 auto; }
.intro-close .ic-logo { height:46px; margin-bottom:20px; }
.intro-close h2 { font-size:clamp(34px,6vw,56px); font-weight:800; }
.intro-close p { font-size:16px; color:rgba(255,255,255,.82); margin:12px auto 30px; max-width:520px; line-height:1.7; }
.ic-contact { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.ic-contact a { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:14px 18px; color:#fff; font-size:13px; line-height:1.5; min-width:180px; text-align:left; transition:.2s var(--ease); }
.ic-contact a:hover { background:rgba(255,255,255,.16); }
.ic-contact a b { display:block; font-size:12px; color:#9cc3ff; margin-bottom:5px; font-weight:700; }
.ic-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.intro-close .btn-glass { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; }
.intro-close .btn-glass:hover { background:rgba(255,255,255,.22); }
@media (max-width:1000px){ .qc-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){
  .is-grid { grid-template-columns:1fr; }
  .is-grid.reverse .is-media { order:0; }
  .proj-grid { grid-template-columns:1fr; }
}
@media (max-width:520px){ .qc-grid { grid-template-columns:1fr; } }

/* ── Fullscreen presentation mode ── */
.present-ov { position:fixed; inset:0; z-index:100000; background:#0a1326; opacity:0; visibility:hidden; transition:.3s var(--ease); display:flex; flex-direction:column; }
.present-ov.open { opacity:1; visibility:visible; }
/* hide site chrome while presenting */
body.presenting .head, body.presenting .wa-float, body.presenting .chat-fab, body.presenting .chat-panel, body.presenting .intro-dots, body.presenting #scroll-progress { display:none !important; }
.pv-stage { flex:1; display:flex; align-items:center; justify-content:center; padding:clamp(28px,5vw,72px); min-height:0; }
.pv-stage.pv-anim .pv-slide, .pv-stage.pv-anim .pv-cover, .pv-stage.pv-anim .pv-thanks { animation:pvIn .45s cubic-bezier(.22,1,.36,1); }
@keyframes pvIn { from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
/* content slide */
.pv-slide { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; max-width:1180px; width:100%; color:#fff; }
.pv-no { font-family:var(--mono); font-size:14px; font-weight:700; color:#5b9bff; letter-spacing:.12em; }
.pv-eyebrow { display:block; font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#9cc3ff; margin-top:6px; }
.pv-txt h2 { font-size:clamp(30px,5vw,52px); font-weight:800; letter-spacing:-.02em; margin:8px 0 16px; }
.pv-txt p { font-size:clamp(15px,1.7vw,19px); line-height:1.75; color:rgba(255,255,255,.86); }
.pv-media img { width:100%; border-radius:18px; box-shadow:0 30px 70px rgba(0,0,0,.5); aspect-ratio:4/3; object-fit:cover; background:#13233f; }
.pv-stats { display:flex; gap:30px; margin-top:24px; flex-wrap:wrap; }
.pv-stats b { display:block; font-size:34px; font-weight:900; color:#fff; line-height:1; }
.pv-stats span { font-size:13px; color:#9cc3ff; }
.pv-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.pv-chips span { font-size:13px; font-weight:600; color:#cfe0ff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); padding:7px 13px; border-radius:20px; }
/* cover slide */
.pv-cover { width:100%; height:100%; min-height:60vh; border-radius:18px; background-size:cover; background-position:center; position:relative; display:flex; align-items:center; overflow:hidden; }
.pv-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg,rgba(8,18,40,.95),rgba(8,18,40,.6) 70%,rgba(8,18,40,.3)); }
.pvc-in { position:relative; z-index:2; padding:clamp(30px,6vw,80px); color:#fff; max-width:760px; }
.pvc-in h1 { font-size:clamp(38px,7vw,80px); font-weight:800; letter-spacing:-.02em; line-height:1.02; margin:14px 0 16px; }
.pvc-in p { font-size:clamp(16px,2vw,21px); color:rgba(255,255,255,.85); line-height:1.6; }
.pv-hint { display:inline-block; margin-top:28px; font-size:12.5px; color:#9cc3ff; font-family:var(--mono); }
/* thank-you slide */
.pv-thanks { text-align:center; color:#fff; max-width:680px; }
.pv-thanks h1 { font-size:clamp(44px,8vw,84px); font-weight:800; }
.pv-thanks p { font-size:19px; color:rgba(255,255,255,.85); margin:12px 0 28px; }
.pv-lines { display:flex; flex-direction:column; gap:10px; align-items:center; }
.pv-lines span { font-size:15px; color:#cfe0ff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:11px 20px; border-radius:12px; }
/* nav arrows */
.pv-nav { position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:30px; cursor:pointer; z-index:5; transition:.18s var(--ease); display:flex; align-items:center; justify-content:center; }
.pv-nav:hover { background:var(--blue); border-color:var(--blue); }
.pv-prev { left:20px; } .pv-next { right:20px; }
/* bottom control bar */
.pv-bar { display:flex; align-items:center; gap:16px; padding:14px 22px; background:rgba(0,0,0,.3); border-top:1px solid rgba(255,255,255,.1); }
.pv-x { color:#fff; font-size:13px; font-weight:700; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); padding:8px 14px; border-radius:8px; cursor:pointer; }
.pv-x:hover { background:#dc2626; border-color:#dc2626; }
.pv-dots { flex:1; display:flex; gap:8px; justify-content:center; }
.pv-dots i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:.18s var(--ease); }
.pv-dots i.on { background:#5b9bff; transform:scale(1.3); }
.pv-count { color:rgba(255,255,255,.7); font-family:var(--mono); font-size:13px; min-width:54px; text-align:right; }
@media (max-width:820px){
  .pv-slide { grid-template-columns:1fr; gap:20px; }
  .pv-media { order:-1; }
  .pv-media img { max-height:34vh; }
  .pv-nav { width:44px; height:44px; font-size:24px; }
  .pv-prev { left:8px; } .pv-next { right:8px; }
}

/* ── Search-only location modal (no map) ── */
.mm-panel-search { height:auto; max-height:88vh; }
.mm-suggest-inline { position:static; margin:12px 22px 0; box-shadow:none; max-height:48vh; flex:1; }
.mm-suggest-inline:not(.open) { display:block; }
.mm-suggest-inline:empty::before { content:'Start typing to search for your delivery location…'; display:block; padding:30px 16px; text-align:center; color:var(--dim); font-size:13.5px; }
.mm-sug-item.chosen { background:#eaf2ff; }
.mm-sug-item.chosen::after { content:'✓'; margin-left:auto; color:var(--blue); font-weight:800; align-self:center; }
@media (max-width:560px){ .mm-panel-search { height:100vh; max-height:none; } }

/* ── Presentation QC slide (image cards) ── */
.pv-qc { width:100%; max-width:1180px; color:#fff; }
.pv-qc-head { text-align:center; margin-bottom:22px; }
.pv-qc-head h2 { font-size:clamp(26px,4vw,44px); font-weight:800; margin:6px 0 8px; }
.pv-qc-head p { font-size:15px; color:rgba(255,255,255,.82); }
.pv-qc-head .pv-no { display:inline-block; }
.pv-qc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pv-qc-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.pv-qc-img { aspect-ratio:4/3; background:#13233f; overflow:hidden; }
.pv-qc-img img { width:100%; height:100%; object-fit:cover; }
.pv-qc-card h4 { font-size:13.5px; font-weight:800; margin:11px 12px 4px; color:#fff; }
.pv-qc-card p { font-size:11.5px; line-height:1.45; color:rgba(255,255,255,.72); margin:0 12px 12px; }
@media (max-width:900px){ .pv-qc-grid { grid-template-columns:repeat(2,1fr); } .pv-qc-card p { display:none; } }

/* ── Stock badges & status ── */
.stock-badge { position:absolute; top:12px; right:12px; left:auto; z-index:4; font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px; letter-spacing:.02em; box-shadow:0 2px 8px rgba(11,31,59,.18); }
.stock-badge.oos { background:#fee2e2; color:#b91c1c; }
.stock-badge.low { background:#fef3c7; color:#92400e; }
.add.disabled, .add:disabled { opacity:.55; cursor:not-allowed; background:var(--line-2)!important; color:var(--dim)!important; box-shadow:none!important; }
.pd-stock { flex-basis:100%; margin-top:8px; font-size:13px; font-weight:700; }
.pd-stock .in { color:#16a34a; } .pd-stock .low { color:#d97706; } .pd-stock .out { color:#dc2626; }

/* ════════════════════════════════════════════════════════════════
   MOBILE SHOP REDESIGN (Shopee-style) — phones ≤ 600px
   Compact 2-column product grid, smaller media, clear price & full-width
   add button. Desktop layout is untouched.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:600px) {
  /* tighter page padding so 2 columns fit nicely */
  .grid { grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .wrap, .container, .shop-wrap { padding-left:12px; padding-right:12px; }

  .card { border-radius:12px; box-shadow:0 2px 10px rgba(11,31,59,.06); }
  .card .c-media { height:130px; background:#f6f9fd; }
  .card .c-media img { max-width:84%; max-height:84%; }
  .card .c-badge, .stock-badge { font-size:9px; padding:3px 7px; top:8px; }

  .card .c-body { padding:10px 11px 12px; }
  .card .c-cat { font-size:10px; letter-spacing:.03em; }
  /* allow product name to wrap to 2 lines (Shopee style) instead of cutting off */
  .card .c-name { font-size:13.5px; line-height:1.3; height:auto; max-height:35px; white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:5px; }
  .card .c-desc { display:none; }                 /* hide long blurb on mobile — keep it compact */
  .card .c-price-row, .card .c-price { font-size:15px !important; font-weight:800; color:#e8590c; }
  .card .c-price small { font-size:10px; }

  /* footer stacks: price on top, full-width add button below */
  .card .c-foot { flex-direction:column; align-items:stretch; gap:8px; min-height:0; margin-top:8px; }
  .card .c-foot .c-price { font-size:14px; }
  .card .c-foot a.c-price { color:var(--blue); font-size:12px; font-weight:700; }   /* "View specs" link */
  .card .add { width:100%; justify-content:center; padding:9px 10px; font-size:12.5px; border-radius:9px; background:var(--blue); }

  /* shop header / filters tighter */
  .shop-head h1, .sec-head h2 { font-size:24px; }
  .chips, .shop-filters { gap:7px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; flex-wrap:nowrap; }
  .chip { white-space:nowrap; font-size:12.5px; padding:7px 12px; }

  /* ── compact app-style header: cart = icon only, account = icon only ── */
  .nav .cart-btn { padding:9px 11px; gap:0; }
  .nav .cart-btn .cart-label { display:none; }     /* hide "Add to cart" text → just the trolley icon */
  .nav .cart-count { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; font-size:10px; box-shadow:0 1px 4px rgba(0,0,0,.2); }
  .acct-btn { padding:8px 11px; font-size:12.5px; gap:5px; }
  .acct-btn .acct-name { max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .acct-wrap .acct-menu { right:0; }

  /* ── Product detail page: smaller 3D/image so price & buy show sooner ── */
  .pd-stage { height:46vh; min-height:0; }
  .pd-stage-img { padding:18px; }
  .pd h1 { font-size:26px; margin:8px 0 12px; }
  .pd-lead { font-size:14px; }
  .pd-price .now { font-size:28px; }
  .pd-buy { gap:10px; }
  .pd-buy .btn { flex:1; justify-content:center; }
  .pd-specs .spec-grid2 .r { font-size:13px; }
  .pd .crumbs { font-size:11px; overflow-x:auto; white-space:nowrap; }
  /* spec tables scroll horizontally instead of squashing */
  .pd-specs table, .size-table table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* ── Cart / checkout tighter on mobile ── */
  .cart-line { gap:10px; }
  .cl-img { width:64px; height:64px; }
  .cart-summary .box { padding:16px; }
  .co-h { font-size:20px; }

  /* ── Home hero: keep the big title on-screen, no edge clipping ── */
  .hero h1 { font-size:34px; line-height:1.08; margin-bottom:16px; word-break:break-word; }
  .hero-copy, .hero p { font-size:14.5px; }
  .hero .btn { width:100%; justify-content:center; }

  /* ── "Spin before you buy / real 3D" strip: HIDE the 3D model on mobile
       (cramped on a narrow screen). Keep heading, text & buttons full-width. ── */
  .hero3d-strip { grid-template-columns:1fr !important; padding:40px 18px; gap:16px; }
  .hero3d-strip .h3s-stage { display:none !important; }
  .hero3d-strip h2 { font-size:26px !important; }
  .hero3d-strip p { font-size:14.5px !important; max-width:100% !important; }
  .hero3d-strip .hero-actions { flex-direction:column; gap:10px; }
  .hero3d-strip .hero-actions .btn { width:100%; justify-content:center; }

  /* secondary showcase 3D stage (other pages) — also hide on mobile */
  .sc-stage { grid-template-columns:1fr !important; padding:20px 18px; gap:14px; }
  .sc-media { display:none !important; }
  .sc-info { max-width:100%; }
  .sc-info h2 { font-size:24px; line-height:1.15; }
  .sc-info p { font-size:14px; line-height:1.6; }
  .sc-info .btn { width:100%; justify-content:center; }

  /* ── CNC products: 2-column Shopee-style (match shop page) ── */
  .cnc-grid { grid-template-columns:repeat(2,1fr) !important; gap:12px; }
  .cnc-card { border-radius:12px; }
  .cnc-media { padding:12px; }
  .cnc-body { padding:10px 11px 12px; }
  .cnc-name { font-size:13.5px; line-height:1.3; margin:3px 0 5px; }
  .cnc-desc { display:none; }                         /* keep compact */
  .cnc-view { font-size:11.5px; margin-top:6px; }
  .cnc-foot { flex-direction:column; align-items:stretch; gap:8px; margin-top:10px; }
  .cnc-price { font-size:15px; color:#e8590c; }
  .cnc-foot .btn { width:100%; justify-content:center; padding:9px; font-size:12.5px; }
  .cnc2-stats { grid-template-columns:1fr 1fr; }
}
/* tiny phones — keep 2 columns but even tighter */
@media (max-width:360px) {
  .grid { gap:9px !important; }
  .card .c-media { height:112px; }
  .card .c-name { font-size:12.5px; }
}