/* ============================================================
   GSM Mobiles — Frontend CSS (Hacbu-derived design system)
   ============================================================ */

/* ── RESET & TOKENS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy:    #1a2a4a;
  --navy-dk: #0f1d35;
  --navy-lt: #2a4a7b;
  --yellow:  #f5a623;
  --ylight:  #ffd166;
  --yhover:  #e09510;
  --white:   #ffffff;
  --offwhite:#f7f8fc;
  --gray:    #6b7280;
  --lgray:   #e5e7eb;
  --xlgray:  #f3f4f6;
  --text:    #1f2937;
  --success: #27ae60;
  --danger:  #e74c3c;
  --rad:     8px;
  --rad-lg:  14px;
  --shadow:  0 8px 32px rgba(26,42,74,.12);
  --shadow-sm: 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.13);
}

html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;   /* fallback */
  overflow-x: clip;     /* prevents horizontal scroll without breaking position:sticky */
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a  { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--navy); line-height: 1.2; }

/* ── ANIMATIONS ── */
@keyframes fadeUp    { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes slideRight{ from { opacity:0; transform:translateX(-50px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideLeft { from { opacity:0; transform:translateX(50px); } to { opacity:1; transform:translateX(0); } }
@keyframes scaleIn   { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
@keyframes pulse     { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
@keyframes float     { 0%,100% { transform:translateY(0px); } 50% { transform:translateY(-12px); } }

.reveal       { opacity:0; transform:translateY(36px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left  { opacity:0; transform:translateX(-40px); transition: opacity .7s ease, transform .7s ease; }
.reveal-left.visible  { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(40px); transition: opacity .7s ease, transform .7s ease; }
.reveal-right.visible { opacity:1; transform:translateX(0); }

/* ── LAYOUT ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.section   { padding: 80px 5%; }
.section-sm{ padding: 48px 5%; }

/* ── NAVBAR ── */
.site-nav {
  position: sticky; top:0; z-index:1000;
  background: var(--white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%;
  height: 72px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  animation: fadeIn .5s ease;
}

/* ── MOBILE TOP BAR ── (hidden on desktop) */
.mtopbar { display:none; }
.mtb-search { display:none; }
@media (max-width:768px) {
  /* Collapse the desktop nav but keep .nav-links usable for the dropdown menu */
  .site-nav { height:0; padding:0; box-shadow:none; overflow:visible; }
  .site-nav > .logo,
  .site-nav > .nav-toggle,
  .site-nav > .nav-actions { display:none !important; }

  .mtopbar {
      display:flex; align-items:center; justify-content:space-between;
      position:sticky; top:0; z-index:1000;
      height:50px; padding:0 14px;
      background:#fff; border-bottom:1px solid #e8ecf2;
  }
  .mtb-logo { display:flex; align-items:center; }
  .mtb-logo img { height:30px; width:auto; display:block; }

  .mtb-icon {
      flex:0 0 auto; background:none; border:0; cursor:pointer; padding:4px;
      display:flex; align-items:center; justify-content:center; color:var(--navy);
      text-decoration:none; position:relative;   /* anchor each badge to its own icon */
  }
  .mtb-icon svg { width:23px; height:23px; }
  .mtb-cart { color:#0A3EA8; }
  .mtb-cart-count {
      position:absolute; top:0; right:0; background:var(--yellow); color:var(--navy);
      font-size:.62rem; font-weight:800; min-width:16px; height:16px; border-radius:50%;
      display:flex; align-items:center; justify-content:center; padding:0 3px;
  }

  /* search drawer slides under the bar */
  .mtb-search {
      display:flex; position:sticky; top:50px; z-index:999;
      background:#fff; border-bottom:1px solid #e8ecf2;
      max-height:0; overflow:hidden; padding:0 16px;
      transition:max-height .26s ease, padding .26s ease;
  }
  .mtb-search.open { max-height:70px; padding:10px 16px; }
  .mtb-search input {
      flex:1; border:1.5px solid var(--lgray); border-right:0;
      border-radius:8px 0 0 8px; padding:10px 14px; font-size:16px; outline:0; color:var(--navy);
  }
  .mtb-search button {
      flex:0 0 auto; border:0; background:#0A3EA8; color:#fff;
      padding:0 16px; border-radius:0 8px 8px 0; cursor:pointer;
      display:flex; align-items:center;
  }

  /* the existing slide-down menu should sit below the 50px bar */
  .nav-links.mobile-open { position:fixed; top:50px; }
}

/* ── MOBILE SLIDE-IN DRAWER (self-contained, toggled by body.mdrawer-open) ── */
.mdrawer-overlay {
  position:fixed; inset:0; background:rgba(10,20,40,.45);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:2000;
}
.mdrawer {
  position:fixed; top:0; left:0; bottom:0; width:82%; max-width:320px;
  background:#fff; z-index:2001; box-shadow:4px 0 24px rgba(0,0,0,.18);
  transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,.0,.2,1);
  display:flex; flex-direction:column; overflow-y:auto;
}
body.mdrawer-open .mdrawer { transform:translateX(0); }
body.mdrawer-open .mdrawer-overlay { opacity:1; visibility:visible; }
.mdrawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid #eef0f4;
}
.mdrawer-logo { height:34px; width:auto; display:block; }
.mdrawer-close { background:none; border:0; font-size:2rem; line-height:1; color:var(--navy); cursor:pointer; padding:0 4px; }
.mdrawer-links { display:flex; flex-direction:column; padding:10px 0; }
.mdrawer-links a {
  padding:14px 22px; color:var(--navy); text-decoration:none; font-weight:600; font-size:1rem;
  border-bottom:1px solid #f3f5f8;
}
.mdrawer-links a.active { color:var(--yellow); }
.mdrawer-links a:hover { background:var(--offwhite); }
.mdrawer-logout {
  width:calc(100% - 44px); margin:8px 22px; padding:12px; border:0; cursor:pointer;
  background:var(--offwhite); color:var(--navy); font-weight:600; border-radius:8px;
}
.mdrawer-cta {
  margin:12px 22px; padding:13px 18px !important; text-align:center;
  background:var(--yellow); color:var(--navy) !important; border-radius:8px; border-bottom:0 !important;
}

.logo { display:flex; align-items:center; gap:10px; cursor:pointer; }
.logo-img { height:54px; width:auto; display:block; }
.logo-text { font-family:'Poppins',sans-serif; font-weight:800; font-size:1.4rem; color:var(--navy); letter-spacing:.5px; white-space:nowrap; }
.logo-sub  { font-size:.65rem; color:var(--gray); letter-spacing:2px; text-transform:uppercase; white-space:nowrap; }

@media (max-width:600px) {
  .logo { gap:6px; }
  .logo-img { height:38px; }
  .logo-text { font-size:1.05rem; letter-spacing:.3px; }
  .logo-sub  { font-size:.55rem; letter-spacing:1.5px; }
}

.nav-links { display:flex; gap:30px; font-size:.92rem; font-weight:500; align-items:center; }
.nav-links a { color:var(--text); transition:color .2s; position:relative; padding:6px 0; }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:2px; background:var(--yellow); transition:width .25s; }
.nav-links a:hover::after,
.nav-links a.active::after { width:100%; }
.nav-links a:hover, .nav-links a.active { color:var(--navy); }

.nav-actions { display:flex; align-items:center; gap:14px; }
.nav-phone   { font-weight:700; color:var(--navy); font-size:.92rem; }
@media (max-width:1160px) { .nav-phone { display:none; } }

/* desktop expandable search (left of cart) */
.nav-search { display:flex; align-items:center; }
.nav-search-btn {
  background:none; border:0; cursor:pointer; color:var(--navy); padding:6px;
  display:flex; align-items:center; transition:color .15s;
}
.nav-search-btn:hover { color:var(--yellow); }
.nav-search-form { overflow:hidden; }
.nav-search-form input {
  width:0; padding:0; border:1.5px solid var(--lgray); border-radius:50px;
  font-size:.92rem; color:var(--navy); outline:0; background:var(--white);
  transition:width .28s ease, padding .28s ease, margin .28s ease, opacity .2s ease;
  opacity:0;
}
.nav-search.open .nav-search-form input {
  width:210px; padding:9px 16px; margin-left:8px; opacity:1;
}
.nav-search.open .nav-search-form input:focus { border-color:var(--navy); }
/* free up space: hide the phone while the search field is open */
.nav-actions:has(.nav-search.open) .nav-phone { display:none; }
.nav-cart    { position:relative; color:var(--navy); font-size:1.2rem; padding:6px; }
.nav-cart .cart-count { position:absolute; top:-2px; right:-6px; background:var(--yellow); color:var(--navy); border-radius:50%; width:18px; height:18px; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }

.nav-toggle {
    display:none; background:none; border:0; cursor:pointer;
    padding:6px 8px;
    flex-direction:column; align-items:flex-end; justify-content:center;
    gap:4px;
}
.nav-toggle .nt-bar {
    display:block;
    width:26px; height:2px; border-radius:1px;
    background:var(--navy);
    box-shadow:1px 1px 0 rgba(15,29,53,.25);   /* subtle 3D edge */
    transition:transform .25s cubic-bezier(.4,.2,.2,1),
               opacity .2s ease,
               background .2s ease;
    transform-origin:center;
}
.nav-toggle .nt-bar:nth-child(2) { width:20px; }
.nav-toggle:hover .nt-bar { background:#253d6b; }

/* OPEN state — bars morph into an X, switch to blue */
.nav-toggle.open .nt-bar {
    background:#1e47b4;
    box-shadow:1px 1px 0 rgba(13,40,108,.25);
    width:26px;
}
.nav-toggle.open .nt-bar:nth-child(1) { transform:translateY(6px)  rotate(45deg); }
.nav-toggle.open .nt-bar:nth-child(2) { opacity:0; }
.nav-toggle.open .nt-bar:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.nav-mobile-only { display:none; }

.nav-user { position:relative; }
.nav-user .user-btn { display:flex; align-items:center; gap:6px; background:var(--xlgray); padding:8px 14px; border-radius:var(--rad); cursor:pointer; font-weight:600; font-size:.88rem; color:var(--navy); border:none; }
.nav-user .user-btn:hover { background:var(--lgray); }
.nav-user .user-menu { position:absolute; top:calc(100% + 8px); right:0; background:var(--white); box-shadow:var(--shadow); border-radius:var(--rad); min-width:200px; padding:8px 0; display:none; z-index:1001; }
.nav-user.open .user-menu { display:block; }
.nav-user .user-menu a, .nav-user .user-menu button { display:block; width:100%; text-align:left; padding:10px 16px; font-size:.88rem; color:var(--text); background:none; border:none; cursor:pointer; }
.nav-user .user-menu a:hover, .nav-user .user-menu button:hover { background:var(--xlgray); color:var(--navy); }
.nav-user .user-menu hr { margin:6px 0; border:0; border-top:1px solid var(--lgray); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:var(--rad); font-weight:600; font-size:.9rem; cursor:pointer; transition:all .25s; border:none; font-family:inherit; text-align:center; line-height:1.2; }
.btn-yellow  { background:var(--yellow); color:var(--navy); }
.btn-yellow:hover { background:var(--yhover); transform:translateY(-2px); box-shadow:0 6px 20px rgba(245,166,35,.4); color:var(--navy); }
.btn-navy    { background:var(--navy); color:var(--white); }
.btn-navy:hover { background:var(--navy-dk); transform:translateY(-2px); box-shadow:0 6px 20px rgba(26,42,74,.35); color:var(--white); }
.btn-outline { background:transparent; color:var(--white); border:2px solid var(--white); }
.btn-outline:hover { background:var(--white); color:var(--navy); }
.btn-outline-navy { background:transparent; color:var(--navy); border:2px solid var(--navy); }
.btn-outline-navy:hover { background:var(--navy); color:var(--white); }
.btn-ghost   { background:transparent; color:var(--navy); }
.btn-ghost:hover { background:var(--xlgray); }
.btn-danger  { background:var(--danger); color:var(--white); }
.btn-danger:hover { background:#c0392b; color:var(--white); }
.btn-success { background:var(--success); color:var(--white); }
.btn-lg { padding:14px 28px; font-size:1rem; }
.btn-sm { padding:8px 16px; font-size:.82rem; }
.btn-block { width:100%; }
.btn:disabled { opacity:.6; cursor:not-allowed; }

/* ── HERO ── */
.hero {
  min-height: calc(100vh - 72px);   /* fill the screen below the sticky navbar */
  background:
    linear-gradient(120deg, rgba(15,29,53,.88) 0%, rgba(26,42,74,.72) 55%, rgba(37,61,107,.55) 100%),
    url('/gsm/public/storage/herobg.png') center/cover no-repeat;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 60px 5%;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 70% 50%, rgba(245,166,35,.22) 0%, transparent 65%);
  pointer-events: none;
}
.hero-dots { position:absolute; inset:0; pointer-events:none; }
.hero-dots span { position:absolute; border-radius:50%; background:rgba(255,255,255,.08); animation: float 4s ease-in-out infinite; }
.hero-dots span:nth-child(1) { width:200px; height:200px; top:-60px; right:5%; animation-delay:0s; }
.hero-dots span:nth-child(2) { width:120px; height:120px; bottom:10%; right:30%; animation-delay:1.2s; }
.hero-dots span:nth-child(3) { width:80px;  height:80px;  top:40%;  right:18%; animation-delay:2.4s; }

.hero-content { max-width:700px; z-index:2; position:relative; }
.hero-tag { display:inline-block; background:rgba(245,166,35,.2); color:var(--ylight); font-size:.82rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:6px 14px; border-radius:4px; margin-bottom:18px; animation:fadeIn 1s ease; }
.hero h1 { font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(2.6rem,5vw,4rem); line-height:1.08; color:var(--white); margin-bottom:20px; animation:slideRight .9s ease; }
.hero h1 em { color:var(--yellow); font-style:normal; }
.hero p  { color:rgba(255,255,255,.78); font-size:1.05rem; line-height:1.7; max-width:600px; margin-bottom:34px; animation:slideRight 1.1s ease; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; animation:fadeUp 1.3s ease; }

.hero-visual { position:absolute; right:5%; bottom:120px; width:38%; max-width:420px; z-index:2; animation:scaleIn 1s ease .3s both; }
.hero-visual .phone-icon { background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border-radius:var(--rad-lg); padding:40px; display:flex; flex-direction:column; align-items:center; gap:12px; }

.hero-badges { position:absolute; bottom:0; left:0; right:0; z-index:3; background:var(--yellow); display:flex; justify-content:center; gap:0; }
.badge-item { display:flex; align-items:center; gap:10px; padding:18px 36px; border-right:1px solid rgba(255,255,255,.3); cursor:pointer; transition:background .2s; }
.badge-item:last-child { border-right:none; }
.badge-item:hover { background:rgba(255,255,255,.15); }
.badge-item.active { background:rgba(26,42,74,.2); }
.badge-icon { font-size:1.4rem; }
.badge-text { font-family:'Poppins',sans-serif; font-weight:700; font-size:.95rem; color:var(--navy); }

/* ── Before / After ── */
.ba-section { background:#f5f7fa; padding:70px 5%; }
.ba-wrap { position:relative; max-width:1280px; margin:0 auto; padding:0 50px; }
.ba-track { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:14px 4px; }
.ba-track::-webkit-scrollbar { display:none; }
.ba-track { -ms-overflow-style:none; scrollbar-width:none; }
.ba-card { flex:0 0 calc((100% - 48px) / 3); scroll-snap-align:start; background:#fff; border-radius:14px; padding:18px; box-shadow:0 4px 16px rgba(26,42,74,.08); }
.ba-title { font-size:.9rem; font-weight:700; color:var(--navy); margin:0 0 12px; text-align:center; }
.ba-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ba-side { position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:#1a2a4a; }
.ba-side img { width:100%; height:100%; object-fit:cover; display:block; }
.ba-label { position:absolute; bottom:8px; left:8px; background:rgba(0,0,0,.65); color:#fff; font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:14px; letter-spacing:.5px; text-transform:uppercase; }
.ba-label.after { background:var(--yellow); color:#222; }
.ba-nav { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid #ddd; background:#fff; color:var(--navy); font-size:1.6rem; line-height:1; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.08); transition:all .2s; display:flex; align-items:center; justify-content:center; padding-bottom:3px; }
.ba-nav:hover { background:var(--yellow); border-color:var(--yellow); transform:translateY(-50%) scale(1.05); }
.ba-nav.prev { left:0; }
.ba-nav.next { right:0; }
@media (max-width:900px) { .ba-card { flex-basis:calc((100% - 24px) / 2); } }
@media (max-width:600px) { .ba-card { flex-basis:90%; } .ba-wrap { padding:0 36px; } }

/* ── Why Choose Us ── */
/* ── WHY CHOOSE US ── */
.why-choose {
    background:#0a1628; background-size:cover; background-position:center; background-repeat:no-repeat;
    padding:80px 5%; min-height:100vh; display:flex; flex-direction:column; justify-content:center;
}
@media (max-width:768px) {
    .why-choose { background-image:var(--wc-bg-mobile) !important; }
}
.why-head { text-align:center; max-width:780px; margin:0 auto 50px; }
.why-title { font-family:'Poppins', sans-serif; font-weight:800; font-size:clamp(2rem, 3.4vw, 2.8rem); color:#fff; margin:0 0 14px; }
.why-sub { font-size:1.02rem; color:rgba(255,255,255,.72); line-height:1.55; margin:0; }
.why-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; max-width:1280px; margin:0 auto; }
/* OUTER wrapper — continuous floating animation only */
.why-card {
    perspective:1000px;
    animation: whyFloat 4s ease-in-out infinite;
}
@keyframes whyFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

/* INNER card — visible card that tilts (JS) + lifts on hover */
.why-card-inner {
    background:rgba(26,39,68,.62); border-radius:18px; padding:48px 38px 44px;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 24px rgba(0,0,0,0.3);
    text-align:center; height:100%;
    transform-style:preserve-3d; will-change:transform;
    transition: transform 0.1s ease, box-shadow .25s ease, border-color .25s ease;
}
.why-card-inner:hover {
    box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(77,159,255,0.15);
    border-color:rgba(77,159,255,0.25);
}
.why-icon { width:96px; height:96px; margin:0 auto 26px; display:flex; align-items:center; justify-content:center; color:#c9a84c; transition:filter .25s ease; }
.why-icon svg { width:100%; height:100%; }
.why-card-inner:hover .why-icon { filter:drop-shadow(0 0 10px rgba(201,168,76,0.8)); }

@media (prefers-reduced-motion: reduce) { .why-card { animation:none; } }

/* mobile: declutter — hide description text in the Why Choose Us section */
@media (max-width:768px) {
    .why-sub { display:none; }
    .why-card-text { display:none; }
    .why-card-inner { padding:30px 24px; }
}
.why-card-title { font-family:'Poppins', sans-serif; font-weight:800; font-size:1.5rem; color:#4d9fff; margin:0 0 14px; }
.why-card-text { font-size:.96rem; line-height:1.65; color:rgba(255,255,255,.82); margin:0; }
@media (max-width:900px) { .why-grid { grid-template-columns:1fr; gap:20px; } .why-card { padding:36px 28px; } }

/* ══════════════════════════════════════
   TESTIMONIALS SLIDER (matches Before/After layout)
══════════════════════════════════════ */
.ts-section { background:#fff; padding:70px 5%; }

.ts-wrap   { position:relative; max-width:1280px; margin:0 auto; padding:0 50px; }
.ts-track  { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:14px 4px; }
.ts-track::-webkit-scrollbar { display:none; }
.ts-track  { -ms-overflow-style:none; scrollbar-width:none; }

/* slide = column wrapper (4 per row on desktop) */
.ts-slide  { flex:0 0 calc((100% - 60px) / 4); scroll-snap-align:start; display:flex; }

/* the card itself */
.ts-card {
    position:relative;
    width:100%;
    background:#fff;
    border:1px solid #eef0f4;
    border-radius:16px;
    padding:26px 24px 22px;
    box-shadow:0 6px 18px rgba(20,28,60,.05);
    display:flex; flex-direction:column;
    transition:transform .25s, box-shadow .25s, border-color .25s;
}
.ts-card:hover {
    transform:translateY(-4px);
    border-color:rgba(245,166,35,.5);
    box-shadow:0 12px 30px rgba(20,28,60,.1);
}

/* decorative quote mark */
.ts-quote-mark {
    position:absolute; top:10px; right:18px;
    font-family:Georgia, serif; font-size:4rem; line-height:1;
    color:rgba(245,166,35,.18); pointer-events:none; user-select:none;
}

/* stars */
.ts-stars        { display:flex; gap:2px; margin-bottom:12px; }
.ts-star-filled  { color:#f5a623; font-size:1rem; }
.ts-star-empty   { color:#dcdfe6; font-size:1rem; }

/* body */
.ts-body {
    color:#3a3a3a; font-size:.92rem; line-height:1.65;
    margin:0 0 18px;
    display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
    flex:1;
}

/* author row */
.ts-author {
    display:flex; align-items:center; gap:10px;
    border-top:1px solid #f0f2f6; padding-top:14px;
}
.ts-avatar {
    width:38px; height:38px; border-radius:50%; object-fit:cover;
    border:2px solid #f5a623; flex-shrink:0;
}
.ts-avatar-initials {
    background:linear-gradient(135deg,#5b3eff,#8b60ff);
    color:#fff; font-weight:700; font-size:1rem;
    display:flex; align-items:center; justify-content:center;
}
.ts-author-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ts-author-name { color:var(--navy); font-size:.85rem; font-weight:700; }
.ts-author-role { color:var(--gray); font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-verified    { display:inline-flex; align-items:center; gap:3px; font-size:.68rem; color:#2dc28a; font-weight:600; flex-shrink:0; }

/* nav arrows (matches .ba-nav) */
.ts-nav {
    position:absolute; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border-radius:50%;
    border:1px solid #ddd; background:#fff; color:var(--navy);
    font-size:1.6rem; line-height:1; cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    display:flex; align-items:center; justify-content:center;
    padding-bottom:3px; transition:all .2s; z-index:3;
}
.ts-nav:hover  { background:var(--yellow); border-color:var(--yellow); transform:translateY(-50%) scale(1.05); }
.ts-nav.prev   { left:0; }
.ts-nav.next   { right:0; }

/* tablet — 2 per row */
@media (max-width:980px) {
    .ts-slide { flex:0 0 calc((100% - 20px) / 2); }
}

/* mobile — 1 per slide */
@media (max-width:640px) {
    .ts-wrap  { padding:0 36px; }
    .ts-slide { flex:0 0 100%; }
}

/* ── SECTION HEAD ── */
.section-label { font-size:.8rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--yellow); margin-bottom:10px; }
.section-title { font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--navy); line-height:1.15; margin-bottom:16px; }
.section-desc  { color:var(--gray); line-height:1.75; margin-bottom:30px; max-width:600px; }
.section-head  { text-align:center; max-width:700px; margin:0 auto 48px; }
.section-head.left { text-align:left; margin:0 0 48px; }

/* ══════════════════════════════════════
   ABOUT 3-D SECTION
══════════════════════════════════════ */
.about-3d-section {
    display: flex;
    align-items: stretch;
    min-height: 540px;
    overflow: hidden;
    background: var(--white);
}

/* ── Left visual panel ── */
.about-3d-visual {
    width: 46%;
    position: relative;
    background:
        linear-gradient(145deg, rgba(11,27,56,.55) 0%, rgba(22,47,96,.40) 55%, rgba(30,61,120,.45) 100%),
        url('/gsm/public/storage/quality-repairs.png') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 480px;
}
/* feathered right edge */
.about-3d-visual::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 90px;
    background: linear-gradient(90deg, transparent, #ffffff);
    z-index: 5;
}

/* ambient blobs */
.ab-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}
.ab-blob-1 { width: 320px; height: 320px; background: rgba(91,112,255,.35); top: -60px; left: -80px; animation: blobFloat 7s ease-in-out infinite; }
.ab-blob-2 { width: 200px; height: 200px; background: rgba(245,166,35,.25); bottom: 20px; right: 40px; animation: blobFloat 9s ease-in-out infinite reverse; }
.ab-blob-3 { width: 140px; height: 140px; background: rgba(0,200,255,.18); top: 50%; left: 50%; transform: translate(-50%,-50%); animation: blobFloat 6s ease-in-out infinite 1.5s; }

@keyframes blobFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-22px) scale(1.06); }
}

/* ── 3D phone ── */
.ab-phone-wrap {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 380px;
    transform-style: preserve-3d;
    perspective: 900px;
}
.ab-phone {
    position: relative;
    width: 170px;
    height: 340px;
    transform: rotateY(-18deg) rotateX(5deg);
    animation: phoneTilt 5s ease-in-out infinite;
    transform-style: preserve-3d;
}
@keyframes phoneTilt {
    0%,100% { transform: rotateY(-18deg) rotateX(5deg) translateY(0); }
    50%      { transform: rotateY(-10deg) rotateX(2deg) translateY(-14px); }
}
.ab-phone-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #263a6e 0%, #1a2a50 60%, #0f1d38 100%);
    border-radius: 30px;
    border: 2px solid rgba(245,166,35,.6);
    box-shadow:
        0 30px 80px rgba(0,0,0,.6),
        0 0 0 1px rgba(255,255,255,.08) inset,
        6px 6px 0 rgba(245,166,35,.15),
        -2px -2px 20px rgba(91,112,255,.3);
    position: relative;
    overflow: hidden;
}
/* glass sheen */
.ab-phone-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, transparent 100%);
    border-radius: 30px 30px 60% 60%;
    pointer-events: none;
}
.ab-screen {
    position: absolute;
    top: 24px; left: 12px; right: 12px; bottom: 28px;
    background: linear-gradient(160deg, #0c1428 0%, #0a1020 100%);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
}
/* screen grid lines for depth */
.ab-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(245,166,35,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,166,35,.04) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.ab-screen-notch {
    width: 50px; height: 10px;
    background: #0b1428;
    border-radius: 0 0 8px 8px;
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
}
.ab-screen-icon { z-index: 1; animation: iconPulse 2.5s ease-in-out infinite; }
@keyframes iconPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.75; transform:scale(1.08); }
}
.ab-screen-txt {
    font-family: 'Inter', sans-serif;
    font-size: .65rem;
    font-weight: 700;
    color: #f5a623;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 1;
}
.ab-screen-line {
    width: 70%;
    height: 3px;
    background: rgba(245,166,35,.25);
    border-radius: 2px;
    z-index: 1;
}
.ab-screen-line.short { width: 45%; }
.ab-side-btn {
    position: absolute;
    right: -3px; top: 80px;
    width: 4px; height: 38px;
    background: linear-gradient(180deg, #f5a623, #d4881a);
    border-radius: 0 3px 3px 0;
}
.ab-home-bar {
    position: absolute;
    bottom: 10px; left: 50%; transform: translateX(-50%);
    width: 50px; height: 4px;
    background: rgba(255,255,255,.25);
    border-radius: 2px;
}
.ab-phone-shadow {
    position: absolute;
    bottom: -28px; left: 50%; transform: translateX(-50%);
    width: 110px; height: 28px;
    background: radial-gradient(ellipse, rgba(0,0,0,.45) 0%, transparent 75%);
}

/* orbit rings */
.ab-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(245,166,35,.25);
    animation: orbitSpin 14s linear infinite;
    pointer-events: none;
}
.ab-orbit   { width: 280px; height: 280px; top: 50%; left: 50%; transform: translate(-50%,-50%) rotateX(70deg); }
.ab-orbit-2 { width: 360px; height: 360px; top: 50%; left: 50%; transform: translate(-50%,-50%) rotateX(70deg); animation-duration: 22s; animation-direction: reverse; border-color: rgba(91,112,255,.18); }
@keyframes orbitSpin { to { transform: translate(-50%,-50%) rotateX(70deg) rotateZ(360deg); } }

/* ── floating badge cards ── */
.ab-float-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 40px;
    padding: 8px 16px;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.ab-fc-icon { font-size: 1rem; }
.ab-fc-1 { top: 14%; left: 4%;  animation: fcFloat 5s ease-in-out infinite; }
.ab-fc-2 { top: 50%; left: 2%;  animation: fcFloat 6s ease-in-out infinite 1s; }
.ab-fc-3 { bottom: 14%; left: 6%; animation: fcFloat 7s ease-in-out infinite 2s; }
@keyframes fcFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

/* ── Right content ── */
.about-3d-content {
    width: 54%;
    padding: 72px 6% 72px 7%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
}
.about-3d-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    color: var(--navy);
    line-height: 1.12;
    margin-bottom: 18px;
}
.about-3d-title span {
    background: linear-gradient(135deg, var(--navy) 0%, #f5a623 140%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.about-3d-desc {
    color: var(--gray);
    line-height: 1.78;
    font-size: 1rem;
    max-width: 540px;
    margin-bottom: 36px;
}

/* ── Stats ── */
.about-3d-stats { display: flex; gap: 0; margin-bottom: 32px; }
.a3-stat {
    flex: 1;
    padding: 20px 20px 20px 0;
    border-right: 1px solid #eef0f6;
    margin-right: 20px;
}
.a3-stat:last-child { border-right: 0; margin-right: 0; }
.a3-num {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 2.6rem;
    color: var(--navy);
    line-height: 1;
    background: linear-gradient(135deg, var(--navy) 0%, #3a5aab 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.a3-plus { font-size: 1.4rem; font-weight: 700; }
.a3-label { font-size: .8rem; color: var(--gray); font-weight: 600; margin: 6px 0 10px; text-transform: uppercase; letter-spacing: .6px; }
.a3-bar { height: 4px; background: #eef0f6; border-radius: 2px; overflow: hidden; }
.a3-bar-fill { height: 100%; background: linear-gradient(90deg, #f5a623, #e8930f); border-radius: 2px; width: 0; transition: width 1.2s cubic-bezier(.4,0,.2,1); }

/* ── Pill checkmarks ── */
.about-3d-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.a3-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f7f8fc;
    border: 1px solid #eef0f6;
    border-radius: 40px;
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--navy);
}

/* ── responsive ── */
@media (max-width: 820px) {
    .about-3d-section { flex-direction: column; }
    .about-3d-visual { display: none; }   /* hide the 3D phone image on mobile */
    .about-3d-visual::after { display: none; }
    .about-3d-content { width: 100%; padding: 48px 6%; }
    .ab-fc-1, .ab-fc-2, .ab-fc-3 { display: none; }
}

/* legacy aliases kept so old selectors don't break */
.stats-section  { display:none; }
.stats-grid     { display:flex; gap:40px; flex-wrap:wrap; }
.stat-box .num  { font-family:'Poppins',sans-serif; font-weight:800; font-size:3rem; color:var(--navy); }
.stat-box .label { font-size:.85rem; color:var(--gray); margin-top:4px; }

/* ── CARDS ── */
.card-grid { display:grid; gap:24px; }
.cards-3 { grid-template-columns:repeat(3,1fr); }
.cards-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width: 960px) { .cards-3, .cards-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px) { .cards-3, .cards-4 { grid-template-columns:1fr; } }

.service-card { background:var(--white); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s; }
.service-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.service-card:not(.product-card):hover .card-img img { transform:scale(1.08); }
.service-card .card-img { height:200px; overflow:hidden; position:relative; }
.service-card .card-img img { transition:transform .5s; height:100%; width:100%; object-fit:cover; }
.service-card .card-img .img-fallback { height:100%; width:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; color:var(--white); background:linear-gradient(135deg, var(--navy), var(--navy-lt)); }
.service-card .card-body { padding:22px; }
.service-card .card-body h3 { font-size:1.2rem; margin-bottom:8px; }
.service-card .card-body p  { font-size:.88rem; color:var(--gray); line-height:1.6; margin-bottom:14px; }
.learn-link { font-size:.85rem; font-weight:700; color:var(--yellow); display:inline-flex; align-items:center; gap:6px; transition:gap .2s; }
.learn-link:hover { gap:10px; color:var(--yhover); }

/* Product card variations */
.product-card { position:relative; }
.product-card .card-img img { object-fit:contain; background:var(--offwhite); }
/* product "View" rendered as a button */
.view-btn {
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  padding:7px 14px; border-radius:50px; font-size:.82rem; font-weight:700;
  background:var(--navy); color:#fff; transition:background .15s, transform .12s;
}
.product-card:hover .view-btn { background:var(--yellow); color:var(--navy); }
.view-btn:hover { transform:translateY(-1px); }
.product-card .badge-sale { position:absolute; top:12px; right:12px; background:var(--danger); color:var(--white); padding:4px 10px; border-radius:4px; font-size:.72rem; font-weight:700; z-index:2; }
.product-card .price       { font-size:1.1rem; font-weight:700; color:var(--navy); }
.product-card .price-old   { color:var(--gray); text-decoration:line-through; font-size:.85rem; font-weight:500; margin-left:6px; }
.product-card .price-sale  { color:var(--danger); font-size:1.15rem; font-weight:700; }

/* ── BRAND TILES (repair) ── */
.brand-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:768px) { .brand-grid { grid-template-columns:repeat(2,1fr); } }
.brand-tile { background:var(--white); border-radius:12px; padding:30px 20px; text-align:center; box-shadow:var(--shadow-sm); transition:all .3s; border:2px solid transparent; }
.brand-tile:hover { transform:translateY(-4px); border-color:var(--yellow); box-shadow:var(--shadow-lg); }

/* repair section with image background + glass brand cards */
.repair-bg-section {
    background-size:cover; background-position:center; background-repeat:no-repeat;
    min-height:100vh; display:flex; flex-direction:column; justify-content:center;
}
.repair-bg-section .brand-tile {
    background:rgba(255,255,255,.42);
    backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 8px 30px rgba(26,42,74,.12);
}
.repair-bg-section .brand-tile:hover {
    background:rgba(255,255,255,.62);
    border-color:var(--yellow);
}
.repair-bg-section .section-desc { color:#000; font-size:1.15rem; line-height:1.7; max-width:680px; }
@media (max-width:768px) {
    /* 2 smaller cards per row on mobile, centered (avoids edge overflow) */
    .repair-bg-section { overflow-x:hidden; }
    .repair-bg-section .container { max-width:100%; }
    .repair-bg-section .brand-grid {
        display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
        max-width:340px; margin:0 auto;
    }
    .repair-bg-section .brand-tile { aspect-ratio:1 / 1; padding:14px 10px; }
    .repair-bg-section .brand-tile img { height:38px; }
    .repair-bg-section .brand-tile h4 { font-size:.85rem; }
}
/* wider container → wider brand cards */
.repair-bg-section .container { max-width:1440px; }
.repair-bg-section .brand-grid { gap:26px; }
.repair-bg-section .brand-tile {
    aspect-ratio:1 / 1; padding:26px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
@media (max-width:768px) { .repair-bg-section .section-desc { font-size:1rem; } }
.brand-tile img { height:60px; width:auto; margin:0 auto 16px; object-fit:contain; }
.brand-tile .brand-icon { font-size:3rem; color:var(--navy); margin-bottom:12px; }
.brand-tile h4 { font-size:1.1rem; color:var(--navy); }

/* ── WHY US ── */
.whyus-section { background:var(--navy); padding:80px 5%; display:flex; gap:64px; align-items:center; position:relative; overflow:hidden; }
.whyus-section::before { content:''; position:absolute; right:-100px; top:-100px; width:400px; height:400px; border-radius:50%; background:rgba(245,166,35,.08); }
.whyus-left { flex:1; z-index:2; }
.whyus-left h2 { color:var(--white); font-size:clamp(2rem,3.5vw,2.8rem); margin-bottom:16px; }
.whyus-left p  { color:rgba(255,255,255,.7); line-height:1.75; margin-bottom:36px; max-width:520px; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.feature { text-align:left; }
.feature-icon { width:52px; height:52px; border-radius:12px; background:rgba(245,166,35,.15); display:flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:1.4rem; color:var(--yellow); transition:transform .3s; }
.feature:hover .feature-icon { transform:rotate(10deg) scale(1.1); background:rgba(245,166,35,.3); }
.feature h4 { font-weight:700; font-size:1.05rem; color:var(--white); margin-bottom:6px; }
.feature p  { font-size:.85rem; color:rgba(255,255,255,.6); line-height:1.6; }

/* ── FORMS ── */
.form-section { background:var(--offwhite); padding:80px 5%; }
.form-wrap { max-width:900px; margin:0 auto; background:var(--white); border-radius:var(--rad-lg); box-shadow:var(--shadow); overflow:hidden; }
.form-split { display:flex; }
.form-split .bg { width:38%; background:var(--navy); position:relative; overflow:hidden; padding:48px 40px; color:var(--white); display:flex; flex-direction:column; justify-content:center; }
.form-split .bg::before { content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px; border-radius:50%; background:rgba(245,166,35,.1); }
.form-split .bg h2 { color:var(--white); font-size:1.8rem; margin-bottom:14px; position:relative; }
.form-split .bg p  { color:rgba(255,255,255,.7); font-size:.92rem; line-height:1.7; position:relative; }
.form-split .fields { flex:1; padding:48px 40px; }

.form-row { display:flex; gap:16px; }
.form-row + .form-row { margin-top:16px; }
.form-group { flex:1; display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-group label { font-size:.82rem; font-weight:600; color:var(--text); }
.form-group label .req { color:var(--danger); }
.form-group input,
.form-group select,
.form-group textarea {
  border:1.5px solid var(--lgray);
  border-radius:var(--rad); padding:11px 14px;
  font-family:inherit; font-size:.92rem; color:var(--text);
  transition:border-color .2s, box-shadow .2s; outline:none;
  background:var(--white); width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(26,42,74,.1); }
.form-group textarea { resize:vertical; min-height:100px; font-family:inherit; }
.form-group small { font-size:.78rem; color:var(--gray); }

/* ── ALERTS ── */
.alert { padding:14px 18px; border-radius:var(--rad); margin-bottom:16px; font-size:.92rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.alert-success { background:#d4edda; color:#155724; border-left:4px solid var(--success); }
.alert-danger  { background:#f8d7da; color:#721c24; border-left:4px solid var(--danger); }
.alert-info    { background:#d1ecf1; color:#0c5460; border-left:4px solid #17a2b8; }
.alert-warning { background:#fff3cd; color:#856404; border-left:4px solid var(--yellow); }
.alert ul { margin:0; padding-left:20px; }
.alert-close { margin-left:auto; background:none; border:none; cursor:pointer; font-size:1.2rem; opacity:.5; }
.alert-close:hover { opacity:1; }

/* ── BADGES ── */
.badge { display:inline-block; padding:4px 10px; border-radius:4px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.badge-yellow  { background:var(--yellow); color:var(--navy); }
.badge-navy    { background:var(--navy); color:var(--white); }
.badge-success { background:var(--success); color:var(--white); }
.badge-danger  { background:var(--danger); color:var(--white); }
.badge-info    { background:#17a2b8; color:var(--white); }
.badge-warning { background:#f39c12; color:var(--white); }
.badge-light   { background:var(--xlgray); color:var(--text); }

/* ── BREADCRUMBS ── */
.breadcrumb { display:flex; gap:8px; font-size:.88rem; color:var(--gray); margin-bottom:24px; flex-wrap:wrap; }
.breadcrumb a { color:var(--gray); }
.breadcrumb a:hover { color:var(--navy); }
.breadcrumb .sep { color:var(--lgray); }
.breadcrumb .current { color:var(--navy); font-weight:600; }

/* ── PAGE HEADER ── */
.page-header { background:linear-gradient(120deg, var(--navy), #253d6b); padding:60px 5%; color:var(--white); text-align:center; position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(245,166,35,.15), transparent 70%); }
.page-header h1 { color:var(--white); font-size:clamp(2rem,4vw,3rem); position:relative; }
.page-header p  { color:rgba(255,255,255,.75); margin-top:10px; position:relative; }
.page-header .breadcrumb { justify-content:center; color:rgba(255,255,255,.7); position:relative; }
.page-header .breadcrumb a { color:rgba(255,255,255,.7); }
.page-header .breadcrumb a:hover { color:var(--yellow); }
.page-header .breadcrumb .current { color:var(--yellow); }

/* ── TABLES ── */
.tbl { width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--rad); overflow:hidden; box-shadow:var(--shadow-sm); }
.tbl th, .tbl td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--lgray); }
.tbl th { background:var(--offwhite); font-weight:700; color:var(--navy); font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover { background:var(--xlgray); }

/* ── PAGINATION ── */
.pagination { display:flex; gap:6px; justify-content:center; margin-top:32px; }
.pagination a, .pagination span { padding:8px 14px; border-radius:var(--rad); background:var(--white); border:1px solid var(--lgray); color:var(--navy); font-size:.88rem; }
.pagination a:hover { background:var(--xlgray); }
.pagination .current, .pagination [aria-current="page"] { background:var(--navy); color:var(--white); border-color:var(--navy); }

/* ── FOOTER ── */
.site-footer { background:var(--navy-dk); padding:56px 5% 24px; color:rgba(255,255,255,.7); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-logo .logo-text { color:var(--white); }
.footer-logo-img { height:54px; width:auto; display:block; }
.site-footer p { font-size:.88rem; line-height:1.7; }
.footer-col h4 { font-weight:700; color:var(--white); margin-bottom:16px; font-size:1rem; font-family:'Poppins',sans-serif; letter-spacing:.5px; }
.footer-col li { margin-bottom:10px; }
.footer-col a, .footer-col li { font-size:.88rem; color:rgba(255,255,255,.6); transition:color .2s; }
.footer-col a:hover { color:var(--yellow); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; justify-content:space-between; align-items:center; font-size:.82rem; flex-wrap:wrap; gap:12px; }
.social-links { display:flex; gap:10px; }
.social-btn { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:.85rem; color:rgba(255,255,255,.6); transition:all .2s; cursor:pointer; }
.social-btn:hover { background:var(--yellow); color:var(--navy); border-color:var(--yellow); }

/* ── SCROLL TO TOP ── */
#scrollTop { position:fixed; bottom:28px; right:28px; z-index:999; width:46px; height:46px; border-radius:50%; background:var(--yellow); color:var(--navy); border:none; cursor:pointer; font-size:1.3rem; box-shadow:0 4px 14px rgba(245,166,35,.5); opacity:0; transition:opacity .3s, transform .3s; transform:translateY(20px); }
#scrollTop.show { opacity:1; transform:translateY(0); }
#scrollTop:hover { background:var(--navy); color:var(--white); }

/* ── UTILS ── */
.text-center { text-align:center; }
.text-yellow  { color:var(--yellow); }
.text-navy    { color:var(--navy); }
.text-gray    { color:var(--gray); }
.text-white   { color:var(--white); }
.text-danger  { color:var(--danger); }
.text-success { color:var(--success); }
.mt-1 { margin-top:8px; }   .mt-2 { margin-top:16px; }
.mt-3 { margin-top:24px; }  .mt-4 { margin-top:32px; }  .mt-5 { margin-top:48px; }
.mb-1 { margin-bottom:8px; } .mb-2 { margin-bottom:16px; }
.mb-3 { margin-bottom:24px; } .mb-4 { margin-bottom:32px; } .mb-5 { margin-bottom:48px; }
.d-flex { display:flex; }
.gap-1 { gap:8px; }
.gap-2 { gap:16px; }
.gap-3 { gap:24px; }
.justify-between { justify-content:space-between; }
.items-center { align-items:center; }
.flex-wrap { flex-wrap:wrap; }
.w-100 { width:100%; }
.fw-700 { font-weight:700; }
.no-wrap { white-space:nowrap; }

/* ── BOOKING WIZARD ── */
.wizard-steps { display:flex; justify-content:space-between; margin-bottom:40px; position:relative; }
.wizard-steps::before { content:''; position:absolute; top:18px; left:0; right:0; height:2px; background:var(--lgray); z-index:0; }
.wizard-step  { text-align:center; flex:1; position:relative; z-index:1; }
.wizard-step .circle { width:38px; height:38px; border-radius:50%; background:var(--white); border:2px solid var(--lgray); margin:0 auto; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--gray); transition:all .3s; }
.wizard-step.active .circle, .wizard-step.done .circle { background:var(--yellow); border-color:var(--yellow); color:var(--navy); }
.wizard-step.done .circle { background:var(--navy); border-color:var(--navy); color:var(--white); }
.wizard-step .label { font-size:.78rem; color:var(--gray); margin-top:8px; font-weight:600; }
.wizard-step.active .label { color:var(--navy); }

.wizard-panel { background:var(--white); border-radius:var(--rad-lg); box-shadow:var(--shadow); padding:32px; }
.wizard-panel h3 { margin-bottom:20px; font-size:1.4rem; }
.wizard-actions { display:flex; justify-content:space-between; margin-top:28px; padding-top:20px; border-top:1px solid var(--lgray); }

/* ── PART/SLOT ROWS ── */
.part-row { background:var(--xlgray); border-radius:var(--rad); padding:18px; margin-bottom:14px; display:flex; gap:16px; align-items:flex-end; }
.part-row .form-group { margin-bottom:0; }
.total-banner { background:linear-gradient(135deg, var(--navy), var(--navy-lt)); color:var(--white); padding:20px; border-radius:var(--rad); margin-top:20px; }
.total-banner .label { color:rgba(255,255,255,.7); font-size:.85rem; }
.total-banner .amount { color:var(--yellow); font-size:2rem; font-family:'Poppins',sans-serif; font-weight:800; }

.slot-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; margin-top:16px; }
.slot-btn { padding:14px; border:2px solid var(--lgray); border-radius:var(--rad); background:var(--white); cursor:pointer; font-weight:600; transition:all .2s; text-align:center; color:var(--navy); }
.slot-btn:hover { border-color:var(--yellow); background:var(--xlgray); }
.slot-btn.selected { background:var(--yellow); border-color:var(--yellow); color:var(--navy); }

/* ── PHOTO PREVIEW ── */
.photo-preview { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.photo-preview img { width:90px; height:90px; object-fit:cover; border-radius:var(--rad); border:2px solid var(--lgray); }

/* ── ACCORDIONS / FAQ ── */
.accordion-item { background:var(--white); border-radius:var(--rad); margin-bottom:10px; box-shadow:var(--shadow-sm); overflow:hidden; }
.accordion-trigger { width:100%; text-align:left; padding:18px 22px; background:none; border:none; cursor:pointer; font-weight:600; color:var(--navy); display:flex; justify-content:space-between; align-items:center; font-size:1rem; font-family:inherit; }
.accordion-trigger:hover { background:var(--xlgray); }
.accordion-trigger .ic { transition:transform .25s; }
.accordion-item.open .accordion-trigger .ic { transform:rotate(45deg); color:var(--yellow); }
.accordion-body { max-height:0; overflow:hidden; transition:max-height .35s ease; padding:0 22px; color:var(--gray); line-height:1.7; }
.accordion-item.open .accordion-body { max-height:600px; padding-bottom:20px; }

/* ── ACCOUNT SIDEBAR ── */
.account-layout { display:grid; grid-template-columns:260px 1fr; gap:32px; padding:48px 5%; max-width:1200px; margin:0 auto; }
.account-side { background:var(--white); border-radius:var(--rad-lg); box-shadow:var(--shadow-sm); padding:24px 0; height:fit-content; }
.account-side a { display:flex; align-items:center; gap:12px; padding:12px 24px; color:var(--text); font-weight:500; font-size:.92rem; border-left:3px solid transparent; transition:all .2s; }
.account-side a:hover { background:var(--xlgray); color:var(--navy); }
.account-side a.active { background:var(--xlgray); color:var(--navy); border-left-color:var(--yellow); font-weight:700; }
.account-side a i { width:18px; color:var(--gray); }
.account-side a.active i { color:var(--yellow); }
.account-main { background:var(--white); border-radius:var(--rad-lg); box-shadow:var(--shadow-sm); padding:32px; }

@media (max-width:768px) {
  .account-layout { grid-template-columns:1fr; padding:16px 14px; gap:16px; }

  /* sidebar → horizontal scrollable pill bar */
  .account-side {
    display:flex; align-items:center; gap:8px; padding:10px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .account-side::-webkit-scrollbar { display:none; }
  .account-side a {
    flex:0 0 auto; border-left:0; border-radius:50px; padding:9px 15px;
    background:var(--offwhite); white-space:nowrap; font-size:.85rem; font-weight:600;
  }
  .account-side a:hover { background:var(--xlgray); }
  .account-side a.active { background:var(--navy); color:#fff; border-left:0; }
  .account-side a.active i { color:var(--yellow); }
  .account-side form {
    flex:0 0 auto; border-top:0 !important; margin:0 !important; padding:0 !important;
  }
  .account-side form button {
    width:auto !important; padding:9px 15px !important; border-radius:50px;
    background:var(--offwhite) !important; white-space:nowrap; font-size:.85rem !important;
  }

  .account-main { padding:20px 16px; }
  .account-main h2 { font-size:1.3rem; }
}

/* account tables → stacked cards on small screens */
@media (max-width:600px) {
  .account-main table.tbl thead { display:none; }
  .account-main table.tbl,
  .account-main table.tbl tbody,
  .account-main table.tbl tr,
  .account-main table.tbl td { display:block; width:100%; }
  .account-main table.tbl tr {
    border:1px solid var(--lgray); border-radius:10px; padding:6px 14px; margin-bottom:10px; background:var(--white);
  }
  .account-main table.tbl td {
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    text-align:right; padding:8px 0; border:0; border-bottom:1px solid var(--xlgray);
  }
  .account-main table.tbl td:last-child { border-bottom:0; }
  .account-main table.tbl td::before {
    content:attr(data-label); font-weight:700; color:var(--navy); text-align:left; font-size:.82rem;
  }
}

/* ── RESPONSIVE NAV ── */
@media (max-width: 960px) {
  .nav-links { display:none; }
  .nav-toggle { display:flex; order:99; margin-left:8px; }
  .nav-links.mobile-open {
      display:flex; position:absolute; top:72px; left:0; right:0;
      background:var(--white); flex-direction:column;
      align-items:center; text-align:center;
      padding:18px 5%; gap:4px;
      box-shadow:0 12px 28px rgba(0,0,0,.12);
      border-top:1px solid #eef0f4;
      transform-origin:top center;
      animation:navSlide .28s cubic-bezier(.2,.7,.3,1.1) both;
  }
  .nav-links.mobile-open li {
      width:100%; text-align:center; opacity:0;
      animation:navItemIn .35s ease forwards;
  }
  .nav-links.mobile-open .nav-mobile-only { display:block; }
  .nav-links.mobile-open a {
      display:inline-block; padding:10px 4px;
      font-weight:600; color:var(--navy);
      border-bottom:1px solid transparent;
      transition:color .2s, border-color .2s;
  }
  .nav-links.mobile-open a:hover,
  .nav-links.mobile-open a.active { color:var(--yellow); border-color:var(--yellow); }
  .nav-links.mobile-open li:nth-child(1) { animation-delay:.05s; }
  .nav-links.mobile-open li:nth-child(2) { animation-delay:.10s; }
  .nav-links.mobile-open li:nth-child(3) { animation-delay:.15s; }
  .nav-links.mobile-open li:nth-child(4) { animation-delay:.20s; }
  .nav-links.mobile-open li:nth-child(5) { animation-delay:.25s; }
  .nav-links.mobile-open li:nth-child(6) { animation-delay:.30s; }
  .nav-links.mobile-open li:nth-child(7) { animation-delay:.35s; }
  .nav-links.mobile-open li:nth-child(8) { animation-delay:.40s; }

  /* "Book Now" pill inside the mobile dropdown */
  .nav-links.mobile-open .nav-mobile-cta { margin-top:8px; }
  .nav-links.mobile-open .nav-mobile-cta a {
      background:var(--yellow); color:var(--navy); padding:10px 18px;
      border-radius:8px; font-weight:700; border-bottom:none;
  }
  .nav-links.mobile-open .nav-mobile-cta a:hover { background:var(--yhover); }

  @keyframes navSlide {
      from { opacity:0; transform:translateY(-10px) scaleY(.94); }
      to   { opacity:1; transform:translateY(0)    scaleY(1); }
  }
  @keyframes navItemIn {
      from { opacity:0; transform:translateX(14px); }
      to   { opacity:1; transform:translateX(0); }
  }
  .nav-phone { display:none; }
  /* Hide top-bar Login + Book Now on mobile (moved into the dropdown) */
  .nav-actions .btn { display:none; }
  /* Push cart right next to the hamburger (no big gap) */
  .nav-actions { margin-left:auto; gap:6px; }
  .nav-toggle  { margin-left:6px; }
  .hero { min-height: calc(100svh - 50px); padding:40px 5%; }
  .hero-content { max-width:100%; }
  .hero-visual { display:none; }
  .hero-badges { flex-direction:column; }
  .badge-item { border-right:none; border-bottom:1px solid rgba(255,255,255,.3); padding:14px 20px; }
  /* legacy - now replaced by about-3d-section */
  .whyus-section { flex-direction:column; gap:32px; }
  .features-grid { grid-template-columns:1fr; }
  .form-split { flex-direction:column; }
  .form-split .bg, .form-split .fields { width:100%; padding:28px 24px; }
  .form-row { flex-direction:column; gap:0; }
  /* Footer mobile layout:
     row 1 — logo + tagline (full width)
     row 2 — Quick Links | Information (two columns)
     row 3 — Get in Touch (full width) */
  .footer-grid { grid-template-columns:1fr 1fr; gap:24px 18px; }
  .footer-grid > div:nth-child(1) { grid-column:1 / -1; order:1; }  /* logo */
  .footer-grid > div:nth-child(3) { order:2; }                      /* Quick Links */
  .footer-grid > div:nth-child(4) { order:3; }                      /* Information */
  .footer-grid > div:nth-child(2) { grid-column:1 / -1; order:4; }  /* Get in Touch */
  .footer-logo-img { height:48px; }
  .footer-bottom { flex-direction:column; text-align:center; }
}

/* ≤768px: mobile top bar is active — dock the dropdown under the 50px bar.
   Placed after the 960px block so it wins the cascade. */
@media (max-width:768px) {
  .nav-links.mobile-open {
      position:fixed; top:50px; left:0; right:0; z-index:1001;
      align-items:center; text-align:center;
  }
  .nav-links.mobile-open li { text-align:center; }
}

@media (max-width:600px) {
  /* keep Quick Links + Information side by side; logo & Get in Touch stay full width */
  .footer-grid { grid-template-columns:1fr 1fr; gap:20px 16px; }
}

/* ── Home banners (admin-managed, image as background, device-aware) ── */
.home-banners { width:100%; }
.hb {
  position:relative; width:100%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hb-overlay {
  position:absolute; inset:0; display:flex; align-items:center;
  padding:0 7%; background:linear-gradient(90deg, rgba(15,29,53,.55), rgba(15,29,53,0) 70%);
}
.hb-inner { max-width:560px; color:#fff; }
.hb-title { color:#fff; font-size:clamp(1.6rem,3.2vw,2.8rem); font-weight:800; margin-bottom:12px; text-shadow:0 2px 16px rgba(0,0,0,.45); }
.hb-desc { color:rgba(255,255,255,.92); font-size:clamp(.92rem,1.4vw,1.15rem); line-height:1.6; margin-bottom:20px; max-width:480px; text-shadow:0 1px 10px rgba(0,0,0,.35); }
.hb-btn { display:inline-block; }

/* desktop banners: wide cinematic strip */
.hb-desktop { height:clamp(320px, 38vw, 560px); }
/* mobile banners: taller portrait-friendly */
.hb-mobile  { height:clamp(380px, 90vw, 560px); display:none; }

/* device toggling by viewport */
@media (max-width:768px) {
  .hb-desktop { display:none; }
  .hb-mobile  { display:block; }
  .hb-overlay {
    padding:0 24px 36px; align-items:flex-end;
    background:linear-gradient(0deg, rgba(15,29,53,.72), rgba(15,29,53,.15) 55%, rgba(15,29,53,0) 80%);
  }
  .hb-inner { max-width:100%; }
}

/* ════════ MOBILE CATEGORY TOOLBAR + FILTER DRAWER (mobile only) ════════ */
.mshop-chips, .mshop-filterrow { display:none; }
.mfilter, .mfilter-overlay { display:none; }

@media (max-width:768px) {
  /* compact the navy page-header (banner) */
  .page-header { padding:22px 5% 20px; }
  .page-header h1 { font-size:1.5rem; }
  .page-header p  { font-size:.85rem; margin-top:4px; }

  /* on the shop category/search header, drop the subtitle + breadcrumb on mobile */
  .page-header--shop p,
  .page-header--shop .breadcrumb { display:none; }

  /* hide the tall desktop category sidebar */
  .shop-layout > .shop-sidebar { display:none; }
  .shop-layout { grid-template-columns:1fr; }

  /* row 1: horizontal subcategory chips */
  .mshop-chips {
    display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px;
    scrollbar-width:none;
  }
  .mshop-chips::-webkit-scrollbar { display:none; }
  .mchip {
    flex:0 0 auto; white-space:nowrap; padding:9px 16px; border-radius:50px;
    background:#fff; border:1.5px solid var(--lgray); color:var(--navy);
    font-size:.88rem; font-weight:600; text-decoration:none;
  }
  .mchip.active { background:var(--navy); color:#fff; border-color:var(--navy); }
  .mchip-count { opacity:.6; font-weight:700; font-size:.78rem; }
  .mchip.active .mchip-count { opacity:.8; }

  /* row 2: filter button (left) + view toggle (right) */
  .mshop-filterrow {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
  }
  .mshop-filter-btn {
    display:flex; align-items:center; gap:7px;
    padding:10px 18px; border-radius:50px; border:0; cursor:pointer;
    background:#0A3EA8; color:#fff; font-size:.9rem; font-weight:600;
  }
  .mview-toggle { display:flex; gap:4px; background:#fff; border:1.5px solid var(--lgray); border-radius:10px; padding:3px; }
  .mvt { background:none; border:0; cursor:pointer; padding:6px 9px; border-radius:7px; color:var(--gray); display:flex; align-items:center; }
  .mvt.active { background:var(--navy); color:#fff; }

  /* products: 2-up by default, toggle to 1-up */
  .shop-grid.cols-2 { grid-template-columns:1fr 1fr !important; gap:12px; }
  .shop-grid.cols-1 { grid-template-columns:1fr !important; }
  .shop-grid .product-card .card-body { padding:14px; }
  .shop-grid .product-card h3 { font-size:.92rem !important; }

  /* filter drawer (slides up from bottom) */
  .mfilter-overlay {
    display:block; position:fixed; inset:0; background:rgba(10,20,40,.45);
    opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; z-index:2000;
  }
  .mfilter {
    display:flex; flex-direction:column; position:fixed; left:0; right:0; bottom:0; z-index:2001;
    background:#fff; border-radius:18px 18px 0 0; max-height:85vh; overflow-y:auto;
    transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:0 -8px 30px rgba(0,0,0,.2);
  }
  body.mfilter-open .mfilter { transform:translateY(0); }
  body.mfilter-open .mfilter-overlay { opacity:1; visibility:visible; }
  .mfilter-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid var(--lgray); position:sticky; top:0; background:#fff;
  }
  .mfilter-head strong { font-size:1.05rem; color:var(--navy); }
  .mfilter-close { background:none; border:0; font-size:1.9rem; line-height:1; color:var(--gray); cursor:pointer; }
  .mfilter-body { padding:18px 20px 28px; }
  .mfilter-label {
    display:block; font-size:.74rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--gray); margin:18px 0 8px;
  }
  .mfilter-label:first-child { margin-top:0; }
  .mfilter-select, .mfilter-price input {
    width:100%; padding:11px 12px; border:1.5px solid var(--lgray); border-radius:8px;
    font-size:16px; color:var(--navy); background:#fff;
  }
  .mfilter-price { display:flex; gap:10px; }
  .mfilter-colors { display:flex; flex-wrap:wrap; gap:10px; }
  .mcolor { cursor:pointer; display:inline-flex; }
  .mcolor input { position:absolute; opacity:0; pointer-events:none; }
  .mcolor-dot {
    width:34px; height:34px; border-radius:50%; border:2px solid #ddd; display:block;
    transition:box-shadow .15s, transform .12s;
  }
  .mcolor.active .mcolor-dot { box-shadow:0 0 0 3px var(--yellow); transform:scale(1.05); }
  .mcolor-any {
    padding:8px 14px; border:1.5px solid var(--lgray); border-radius:50px; font-size:.85rem;
    font-weight:600; color:var(--navy);
  }
  .mcolor.active .mcolor-any { background:var(--navy); color:#fff; border-color:var(--navy); }
}

/* ── Customer reviews (product + repair pages) ── */
.rv-list { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }
.rv-card {
  background:#fff; border:1px solid var(--lgray); border-radius:var(--rad-lg);
  padding:20px 22px; box-shadow:var(--shadow-sm);
}
.rv-card-stars { color:var(--lgray); font-size:1.05rem; margin-bottom:8px; letter-spacing:1px; }
.rv-card-stars .on { color:var(--yellow); }
.rv-card-title { font-size:1.05rem; margin-bottom:6px; color:var(--navy); }
.rv-card-body { color:var(--gray); line-height:1.65; margin-bottom:14px; white-space:pre-line; }
.rv-card-meta { font-size:.85rem; color:var(--navy); }
.rv-card-meta span { color:var(--gray); }
@media (max-width:768px) { .rv-list { grid-template-columns:1fr; } }

/* repair reviews horizontal slider */
.rv-slider { display:flex; gap:18px; overflow-x:auto; padding:6px 4px 18px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.rv-slider::-webkit-scrollbar { display:none; }
.rv-slider .rv-card { flex:0 0 320px; scroll-snap-align:start; }
@media (max-width:480px) { .rv-slider .rv-card { flex:0 0 84%; } }

/* ── Floating WhatsApp button ── */
.wa-float {
    position:fixed; bottom:24px; left:24px; z-index:999;
    width:56px; height:56px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 15px rgba(37,211,102,.4);
    transition:transform .15s ease;
}
.wa-float:hover { transform:scale(1.06); }
.wa-icon { position:relative; z-index:2; }
.wa-pulse {
    position:absolute; inset:0; border-radius:50%; background:#25D366; z-index:1;
    animation:waPulse 2s ease-out infinite;
}
@keyframes waPulse {
    0%   { transform:scale(1);   opacity:1; }
    100% { transform:scale(1.4); opacity:0; }
}
.wa-tooltip {
    position:absolute; left:calc(100% + 14px); top:50%; transform:translateY(-50%);
    background:#1a2744; color:#fff; font-size:.85rem; font-weight:600; white-space:nowrap;
    padding:8px 14px; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.25);
    opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; z-index:3;
}
.wa-tooltip::before {
    content:''; position:absolute; right:100%; top:50%; transform:translateY(-50%);
    border:6px solid transparent; border-right-color:#1a2744;
}
.wa-float:hover .wa-tooltip { opacity:1; visibility:visible; }

@media (max-width:768px) {
    .wa-float { width:48px; height:48px; bottom:80px; left:18px; }
    .wa-icon { width:24px; height:24px; }
    .wa-tooltip { display:none; }   /* desktop hover only */
}
@media (prefers-reduced-motion: reduce) { .wa-pulse { animation:none; } }

/* ════════ WISHLIST + COMPARE ════════ */
/* product card wrapper (holds anchor + overlay buttons) */
.product-card-wrap { position:relative; display:flex; flex-direction:column; }
.product-card-wrap .product-card { flex:1; }

.card-wish {
    position:absolute; top:12px; left:12px; z-index:3;
    width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
    background:rgba(255,255,255,.92); box-shadow:0 2px 8px rgba(0,0,0,.12);
    display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#888;
    transition:transform .12s, color .15s;
}
.card-wish:hover { transform:scale(1.1); }
.card-wish.active { color:#e23744; }
.card-cmp {
    margin:8px 4px 4px; border:1.5px solid var(--lgray); background:#fff; color:var(--navy);
    border-radius:8px; padding:8px; font-size:.82rem; font-weight:600; cursor:pointer; transition:all .15s;
}
.card-cmp:hover { border-color:var(--navy); background:var(--offwhite); }

/* product page wishlist + compare buttons */
.wish-btn {
    display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:var(--rad);
    border:1.5px solid var(--lgray); background:#fff; color:var(--navy); font-weight:600; cursor:pointer;
    transition:all .15s;
}
.wish-btn:hover { border-color:#e23744; }
.wish-btn.active { border-color:#e23744; color:#e23744; background:#fff5f5; }
.wish-btn .wish-heart { font-size:1.2rem; }
.cmp-btn {
    display:inline-flex; align-items:center; padding:12px 20px; border-radius:var(--rad);
    border:1.5px solid var(--lgray); background:#fff; color:var(--navy); font-weight:600; cursor:pointer;
    transition:all .15s;
}
.cmp-btn:hover { border-color:var(--navy); background:var(--offwhite); }

.nav-wish svg { vertical-align:middle; }

/* ── Compare bar (sticky bottom) ── */
.compare-bar {
    position:fixed; left:0; right:0; bottom:0; z-index:998;
    background:#fff; border-top:1px solid var(--lgray); box-shadow:0 -6px 24px rgba(0,0,0,.12);
    transform:translateY(110%); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.compare-bar.open { transform:translateY(0); }
.compare-bar-inner {
    max-width:1200px; margin:0 auto; padding:12px 5%;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.compare-bar-items { display:flex; gap:10px; flex:1; overflow-x:auto; }
.compare-chip {
    flex:0 0 auto; display:flex; align-items:center; gap:8px; background:var(--offwhite);
    border:1px solid var(--lgray); border-radius:10px; padding:6px 10px;
}
.compare-chip-img { width:34px; height:34px; border-radius:6px; background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.compare-chip-img img { width:100%; height:100%; object-fit:contain; }
.compare-chip-name { font-size:.82rem; font-weight:600; color:var(--navy); max-width:130px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compare-chip-x { background:none; border:0; cursor:pointer; color:var(--gray); font-size:.9rem; }
.compare-bar-actions { display:flex; gap:8px; flex:0 0 auto; }

/* ── Compare table ── */
.compare-scroll { overflow-x:auto; background:#fff; border-radius:var(--rad-lg); box-shadow:var(--shadow-sm); }
.compare-table { width:100%; border-collapse:collapse; min-width:560px; }
.compare-table th, .compare-table td { padding:14px 16px; border-bottom:1px solid var(--lgray); text-align:center; font-size:.9rem; vertical-align:middle; }
.compare-table tr.cmp-diff td:not(.cmp-rowlabel) { background:#fffbe6; }
.cmp-rowlabel { text-align:left !important; font-weight:700; color:var(--navy); background:var(--offwhite); white-space:nowrap; position:sticky; left:0; }
.cmp-head { display:flex; flex-direction:column; align-items:center; gap:8px; }
.cmp-head-img { width:90px; height:90px; display:flex; align-items:center; justify-content:center; }
.cmp-head-img img { max-width:100%; max-height:100%; object-fit:contain; }
.cmp-head-name { font-weight:700; color:var(--navy); }
.cmp-head-price { font-weight:800; color:var(--navy); font-size:1.1rem; }
.cmp-remove { background:none; border:0; color:var(--danger); cursor:pointer; font-size:.82rem; }

/* ── Toast ── */
.toast-msg {
    position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
    background:#1a2744; color:#fff; padding:12px 20px; border-radius:50px; font-size:.9rem; font-weight:600;
    box-shadow:0 6px 20px rgba(0,0,0,.3); opacity:0; visibility:hidden; transition:opacity .25s, transform .25s, visibility .25s; z-index:3000;
}
.toast-msg.show { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

.mtb-wish { color:#0A3EA8; }

/* ════════ HERO BANNER SLIDER ════════ */
.hero-slider-section { width:100%; }
.hslider { position:relative; overflow:hidden; }
.hslider-desktop { height:calc(100vh - 72px); }            /* fill screen below sticky navbar */
.hslider-mobile  { display:none; height:calc(100svh - 50px); }
@media (max-width:768px) {
    .hslider-desktop { display:none; }
    .hslider-mobile  { display:block; }
}
/* crossfade slides (stacked) */
.hslider-track { position:relative; height:100%; }
.hslide {
    position:absolute; inset:0; height:100%; background-size:cover; background-position:center;
    opacity:0; visibility:hidden; transition:opacity .9s ease, visibility .9s ease;
}
.hslide.active { opacity:1; visibility:visible; z-index:1; }
.hslide-overlay {
    position:absolute; inset:0; display:flex; align-items:center; padding:0 7%;
    background:linear-gradient(90deg, rgba(15,29,53,.55), rgba(15,29,53,0) 70%);
}
.hslide-inner { max-width:560px; color:#fff; }
.hslide-title { color:#fff; font-size:clamp(1.8rem,3.4vw,3rem); font-weight:800; line-height:1.12; margin-bottom:14px; text-shadow:0 2px 18px rgba(0,0,0,.45); }
.hslide-desc { color:rgba(255,255,255,.92); font-size:clamp(.95rem,1.4vw,1.2rem); line-height:1.6; margin-bottom:22px; max-width:500px; text-shadow:0 1px 10px rgba(0,0,0,.35); }
.hslide-btn { display:inline-block; }

/* text animates up + fades in when a slide becomes active */
.hslide-inner > * { opacity:0; transform:translateY(22px); }
.hslide.active .hslide-inner > * { animation:hsTextUp .7s ease forwards; }
.hslide.active .hslide-title { animation-delay:.25s; }
.hslide.active .hslide-desc  { animation-delay:.42s; }
.hslide.active .hslide-btn   { animation-delay:.58s; }
@keyframes hsTextUp { to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .hslide-inner > * { opacity:1; transform:none; }
    .hslide.active .hslide-inner > * { animation:none; }
}

.hslider-arrow {
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
    background:rgba(255,255,255,.85); color:var(--navy); font-size:1.9rem; line-height:1;
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.2);
    transition:background .15s;
}
.hslider-arrow:hover { background:#fff; }
.hslider-arrow.prev { left:18px; }
.hslider-arrow.next { right:18px; }
.hslider-dots { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3; }
.hslider-dots button { width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.55); cursor:pointer; padding:0; transition:width .2s, background .2s; }
.hslider-dots button.active { background:#fff; width:26px; border-radius:5px; }

@media (max-width:768px) {
    .hslide-overlay { padding:0 24px 170px; align-items:flex-end; background:linear-gradient(0deg, rgba(15,29,53,.74), rgba(15,29,53,.1) 58%, rgba(15,29,53,0) 80%); }
    .hslide-inner { max-width:100%; }
    .hslider-arrow { display:none; }   /* swipe on mobile */
}

/* ════════ FEATURED PRODUCTS SLIDER ════════ */
.fp-slider { position:relative; }
.fp-track {
    display:flex; gap:22px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
    padding:6px 2px 10px; scrollbar-width:none;
}
.fp-track::-webkit-scrollbar { display:none; }
.fp-card {
    flex:0 0 calc((100% - 66px) / 4);     /* 4 cards per row (3 gaps of 22px) */
    scroll-snap-align:start;
    position:relative; display:flex; flex-direction:column; background:#fff;
    border:1px solid var(--lgray); border-radius:var(--rad-lg); overflow:hidden;
    color:inherit; text-decoration:none;
    box-shadow:0 2px 10px rgba(26,42,74,.05); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fp-card:hover { transform:translateY(-5px); box-shadow:0 14px 34px rgba(26,42,74,.12); border-color:#dfe5ee; }
.fp-card-img { background:#fff; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:18px; }
.fp-card-img img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.fp-card-img .img-fallback { font-size:3rem; }
.fp-card-body { padding:16px 18px 18px; border-top:1px solid #f1f3f7; display:flex; flex-direction:column; gap:4px; }
.fp-card-cat { font-size:.74rem; text-transform:uppercase; letter-spacing:.6px; color:var(--gray); margin:0; }
.fp-card-name { font-size:1rem; font-weight:700; color:var(--navy); margin:0 0 8px; line-height:1.3; }
.fp-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.fp-card-arrow {
    width:30px; height:30px; border-radius:50%; background:var(--offwhite); color:var(--navy);
    display:flex; align-items:center; justify-content:center; font-weight:700; transition:background .2s, color .2s;
}
.fp-card:hover .fp-card-arrow { background:var(--navy); color:#fff; }

.fp-arrow {
    position:absolute; top:42%; transform:translateY(-50%); z-index:4;
    width:44px; height:44px; border-radius:50%; border:1px solid var(--lgray); background:#fff;
    color:var(--navy); font-size:1.7rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.12); transition:background .15s, color .15s;
}
.fp-arrow:hover { background:var(--navy); color:#fff; }
.fp-prev { left:-14px; }
.fp-next { right:-14px; }

@media (max-width:992px) { .fp-card { flex:0 0 calc((100% - 22px) / 2); } }   /* 2 per row tablet */
@media (max-width:768px) {
    .fp-card { flex:0 0 86%; }     /* 1 per view on mobile */
    .fp-arrow { width:38px; height:38px; font-size:1.5rem; }
    .fp-prev { left:-6px; } .fp-next { right:-6px; }
}

/* ── Product card variant chips + color circles (global) ── */
.card-variants { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.card-chip {
    font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:6px;
    border:1.5px solid var(--lgray); color:var(--navy); background:#fff; cursor:pointer;
    transition:background .15s, color .15s, border-color .15s; white-space:nowrap; line-height:1.4;
}
.card-chip:hover { border-color:var(--navy); }
.card-chip.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.card-colors { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.card-color-dot { width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.18); display:inline-block; }

/* ── Language switcher (replaces the navbar CTA) ── */
.lang-switch { position:relative; display:inline-block; }
.lang-btn {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  background:#fff; border:1.5px solid var(--lgray); border-radius:999px;
  padding:7px 14px; font-weight:600; color:var(--navy); font-size:.92rem; line-height:1;
  transition:border-color .15s, box-shadow .15s;
}
.lang-btn:hover { border-color:var(--navy); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.lang-flag { font-size:1.15rem; line-height:1; }
.lang-caret { transition:transform .2s; color:var(--navy); }
.lang-switch.open .lang-caret { transform:rotate(180deg); }
.lang-menu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:172px;
  background:#fff; border:1px solid var(--lgray); border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.14); padding:6px; z-index:1200;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.lang-switch.open .lang-menu { opacity:1; visibility:visible; transform:translateY(0); }
.lang-opt {
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  color:var(--navy); font-weight:600; font-size:.9rem; text-decoration:none; white-space:nowrap;
}
.lang-opt:hover, .lang-opt.active { background:var(--offwhite); }
.lang-check { margin-left:auto; color:#16a34a; font-weight:800; }
/* drawer variant: full-width, menu opens left-aligned */
.mdrawer-lang { margin-top:14px; }
.mdrawer-lang .lang-switch { display:block; }
.mdrawer-lang .lang-btn { width:100%; justify-content:flex-start; }
.mdrawer-lang .lang-menu { right:auto; left:0; width:100%; }