/* ==========================================================================
   NEXORA Technologies | Core Stylesheet
   Off-White dominant · Deep Navy · Electric Blue · Yellow accent
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --off-white:#FBFCFC;
  --navy:#111835;
  --navy-70: rgba(17,24,53,.7);
  --navy-45: rgba(17,24,53,.45);
  --navy-12: rgba(17,24,53,.12);
  --navy-06: rgba(17,24,53,.06);
  --blue:#0248C1;
  --blue-dark:#01327f;
  --yellow:#F8D613;
  --white:#ffffff;
  --line: rgba(17,24,53,.14);

  --font-display:'Manrope', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;

  --radius-s: 2px;
  --radius-m: 4px;
  --radius-l: 6px;

  --container: 1280px;
  --gap: clamp(16px, 2.4vw, 32px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--off-white);
  color:var(--navy);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
ul{list-style:none;margin:0;padding:0}
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(18px,4vw,48px);
}
.hidden{display:none !important}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.01em;
  margin:0;
  color:var(--navy);
}
h1{font-size:clamp(38px,6vw,74px)}
h2{font-size:clamp(28px,3.6vw,44px)}
h3{font-size:clamp(20px,2.2vw,26px)}
p{margin:0}
.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  color:var(--blue);
  margin:0 0 10px;
}
.lede{
  font-size:clamp(16px,1.6vw,19px);
  color:var(--navy-70);
  max-width:52ch;
}
h1 + .lede, h2 + .lede, h3 + .lede{margin-top:16px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  font-weight:700;
  font-size:clamp(13px,3.2vw,14.5px);
  border-radius:var(--radius-s);
  border:1.5px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue); color:var(--white);}
.btn-primary:hover{background:var(--blue-dark)}
.btn-dark{background:var(--navy); color:var(--white);}
.btn-dark:hover{background:#0a0f26}
.btn-outline{background:transparent; border-color:var(--navy); color:var(--navy);}
.btn-outline:hover{background:var(--navy); color:var(--white);}
.btn-yellow{background:var(--yellow); color:var(--navy);}
.btn-yellow:hover{background:#e6c40f}
.btn-ghost{background:transparent; color:var(--navy); padding:14px 8px;}
.btn-ghost:hover{color:var(--blue)}
.btn-sm{padding:10px 16px; font-size:13px}
.btn-block{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed}
.icon{width:18px;height:18px;stroke-width:2;flex:none}
@media (max-width:400px){
  .btn{padding:12px 18px}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--off-white);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 14px rgba(17,24,53,.06);
}
.header-top{
  background:var(--navy); color:var(--off-white);
  font-size:12.5px;
}
.header-top .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px;
  gap:12px;
}
.header-top a{opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.header-top a:hover{opacity:1; color:var(--yellow)}
.header-top .top-right{display:flex; align-items:center; gap:10px; flex:none;}
.header-top .track-text{opacity:.85}
.lang-switch{display:flex; gap:6px; align-items:center; font-weight:700;}
.lang-switch button{background:none;border:none;color:inherit;opacity:.55;font-size:12.5px;padding:2px 4px;}
.lang-switch button.active{opacity:1; color:var(--yellow)}
@media (max-width:640px){
  .header-top .track-text, .header-top .top-sep{display:none}
}

.header-main .container{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:28px;
  padding-top:14px; padding-bottom:14px;
}
.header-brand{display:flex; align-items:center; gap:10px; min-width:0;}
.logo{
  font-family:var(--font-display); font-weight:800; font-size:21px;
  letter-spacing:-.02em; flex:none;
}
.logo span{color:var(--blue)}
.main-nav{display:flex; justify-content:center; gap:clamp(16px,1.8vw,28px); min-width:0;}
.main-nav a{
  font-weight:600; font-size:14px; color:var(--navy-70);
  position:relative; padding:6px 0; white-space:nowrap;
}
.main-nav a:hover, .main-nav a.active{color:var(--navy)}
.main-nav a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--blue);
}
.header-actions{display:flex; align-items:center; gap:4px; flex:none;}
.icon-btn{
  position:relative; background:none; border:none; padding:9px;
  color:var(--navy); border-radius:var(--radius-s);
}
.icon-btn:hover{background:var(--navy-06)}
.icon-btn .icon{width:21px; height:21px;}
.icon-btn .count{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px;
  background:var(--yellow); color:var(--navy); font-size:10px; font-weight:800;
  border-radius:50%; align-items:center; justify-content:center;
  padding:0 3px; display:none;
}
.icon-btn .count.show{display:flex}
.search-box{
  display:flex; align-items:center; gap:9px;
  background:var(--navy-06); border:1.5px solid transparent; border-radius:var(--radius-s);
  padding:9px 14px; min-width:120px; flex:0 1 200px;
  transition:background .18s ease, border-color .18s ease;
}
.search-box:focus-within{background:#fff; border-color:var(--blue)}
.search-box .icon{color:var(--navy-45); flex:none;}
.search-box:focus-within .icon{color:var(--blue)}
.search-box input{border:none; outline:none; background:none; width:100%; font-size:13.5px; color:var(--navy); min-width:0;}
.nav-drawer-head{display:none}

/* ---------- Hamburger (3-line to X) ---------- */
.burger{
  display:none; background:none; border:none; padding:8px; width:38px; height:38px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  flex:none;
}
.burger span{
  display:block; width:20px; height:2px; background:var(--navy);
  transition:transform .25s ease, opacity .2s ease, width .2s ease;
}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1180px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,360px); height:100vh; height:100dvh;
    background:var(--off-white); flex-direction:column; align-items:stretch; gap:0;
    padding:0; transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1); box-shadow:-12px 0 32px rgba(17,24,53,.14);
    z-index:120; overflow-y:auto; justify-content:flex-start;
  }
  .main-nav.open{transform:translateX(0)}
  .nav-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 24px; border-bottom:1px solid var(--line);
  }
  .nav-drawer-head span{font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.06em; color:var(--navy-45);}
  .nav-drawer-head button{background:none; border:none; padding:6px; color:var(--navy);}
  .main-nav a{
    padding:16px 28px; border-bottom:1px solid var(--line); font-size:16px; white-space:normal;
  }
  .main-nav a.active::after{display:none}
  .main-nav a.active{color:var(--blue)}
  .burger{display:flex}
  .header-main .container{grid-template-columns:auto 1fr; gap:12px;}
  .search-box{display:none}
  .header-actions{grid-column:2; justify-self:end;}
}
.nav-scrim{display:none; position:fixed; inset:0; background:rgba(17,24,53,.5); z-index:110; backdrop-filter:blur(1px);}
.nav-scrim.open{display:block}

/* ---------- Sections ---------- */
.section{padding:clamp(48px,7vw,96px) 0;}
.section-navy{background:var(--navy); color:var(--off-white); position:relative; overflow:hidden;}
.section-navy::before{
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 68px);
  pointer-events:none;
}
.section-navy .container{position:relative; z-index:1;}
.section-navy h2, .section-navy h3{color:var(--off-white)}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;
  margin-bottom:clamp(24px,4vw,44px);
}
.section-head .link-more{font-weight:700; font-size:14px; color:var(--blue); flex:none;}
.section-head .link-more:hover{text-decoration:underline}
.section-head .btn{flex:none}

/* ---------- Hero banner (full-bleed editorial) ---------- */
.hero-banner{position:relative; display:block; width:100%; overflow:hidden; height:clamp(480px,78vh,720px); min-height:420px; margin:0;}
.hero-banner img{display:block; width:100%; height:100%; object-fit:cover; object-position:center 68%;}
@media (min-width:900px){
  .hero-banner{height:calc(100vh - 108px); max-height:980px; min-height:560px;}
}
.hero-banner::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(17,24,53,.94) 0%, rgba(17,24,53,.82) 30%, rgba(17,24,53,.35) 58%, rgba(17,24,53,.05) 78%);
}
.hero-banner-content{position:absolute; inset:0; display:flex; align-items:center; z-index:2;}
.hero-banner-content .inner{max-width:620px;}
.hero-banner .eyebrow{color:var(--yellow); margin-bottom:16px;}
.hero-banner h1{color:#fff; margin-bottom:18px;}
.hero-banner p{color:rgba(251,252,252,.8); margin-bottom:30px; max-width:48ch;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-tag{
  position:absolute; z-index:2; top:clamp(80px,14vh,120px); right:clamp(18px,4vw,48px);
  background:var(--yellow); color:var(--navy); font-weight:800; font-size:13px; padding:10px 16px;
}
@media (max-width:640px){
  .hero-tag{display:none}
  .hero-banner{height:clamp(520px,90vh,640px)}
}

/* ---------- Brand marquee (replaces stats bar) ---------- */
.brand-marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--off-white); padding:26px 0;}
.brand-marquee-label{
  text-align:center; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy-45); margin-bottom:18px;
}
.marquee-viewport{overflow:hidden; width:100%; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.marquee-track{display:flex; width:max-content; animation:nx-marquee 26s linear infinite;}
.brand-marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-group{display:flex; align-items:center; flex:none;}
.marquee-item{
  display:flex; align-items:center; justify-content:center; padding:0 clamp(28px,4.5vw,50px);
  height:44px;
}
.marquee-item img{height:26px; width:auto; max-width:120px; object-fit:contain; opacity:.7; transition:opacity .15s ease;}
.marquee-item:hover img{opacity:1}
@keyframes nx-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
}

/* ---------- Category strip ---------- */
.cat-strip{display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none;}
.cat-strip::-webkit-scrollbar{display:none}
.cat-tile{
  flex:none; width:200px; height:150px; position:relative; overflow:hidden;
  background:var(--navy); color:var(--off-white);
}
.cat-tile img{width:100%; height:100%; object-fit:cover; opacity:.55; transition:transform .3s ease, opacity .3s ease;}
.cat-tile:hover img{transform:scale(1.06); opacity:.68}
.cat-tile span{
  position:absolute; left:14px; bottom:14px; right:14px;
  font-family:var(--font-display); font-weight:800; font-size:16px;
}

/* ---------- Product grid & cards ---------- */
.product-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap);
}
.product-grid > *{min-width:0}
@media (max-width:1100px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.product-grid{grid-template-columns:repeat(2,1fr); gap:14px;}}
@media (max-width:460px){.product-grid{grid-template-columns:1fr 1fr; gap:10px;}}

.p-card{
  background:var(--white); border:1px solid var(--line);
  display:flex; flex-direction:column; height:100%; min-width:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.p-card:hover{border-color:var(--navy-12); box-shadow:0 8px 20px rgba(17,24,53,.07);}
.p-media{position:relative; aspect-ratio:4/3.3; overflow:hidden; background:#eef0f4;}
.p-media-link{display:block; width:100%; height:100%;}
.p-media img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.p-card:hover .p-media img{transform:scale(1.04)}
.p-badges{position:absolute; top:8px; left:8px; right:44px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; z-index:2;}
.p-badge{
  font-size:9.5px; font-weight:800; padding:5px 8px; letter-spacing:.07em; text-transform:uppercase;
  display:flex; align-items:center; white-space:normal; line-height:1.35; max-width:100%;
}
.p-badge.new{background:var(--navy); color:#fff}
.p-badge.promo{background:var(--yellow); color:var(--navy)}
.p-badge.low{background:#fff; color:var(--navy); box-shadow:0 1px 5px rgba(17,24,53,.16);}
.p-badge.out{background:var(--navy-45); color:#fff}
.p-badge.rec{background:var(--blue); color:#fff;}

.p-quick-actions{position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:6px; z-index:2;}
.p-icon-btn{
  width:30px; height:30px; background:rgba(255,255,255,.95); border:none;
  display:flex; align-items:center; justify-content:center; color:var(--navy);
  box-shadow:0 1px 5px rgba(17,24,53,.16); flex:none; padding:0;
}
.p-icon-btn .icon{width:15px; height:15px}
.p-icon-btn:hover{background:var(--navy); color:#fff}
.p-wish.active{color:var(--blue)}
.p-wish.active:hover{color:#fff}

.p-body{padding:12px 12px 12px; display:flex; flex-direction:column; gap:3px; flex:1; min-width:0;}
.p-brand{font-size:10.5px; font-weight:700; color:var(--navy-45); text-transform:uppercase; letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.p-name{
  font-weight:700; font-size:13.5px; line-height:1.32; color:var(--navy);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.65em;
}
.p-bottom{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; gap:8px; flex-wrap:wrap;}
.p-price{font-family:var(--font-display); font-weight:800; font-size:15px; line-height:1.1; white-space:nowrap; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;}
.p-price .old{display:block; font-family:var(--font-body); font-weight:500; font-size:11px; color:var(--navy-45); text-decoration:line-through; margin-top:2px;}
.p-avail{font-size:11px; font-weight:700;}
.p-avail.in{color:#0a7d3c}
.p-avail.low{color:#b3730b}
.p-avail.out{color:#b3261e}

.p-bottom-actions{display:flex; gap:6px; flex:none;}
.p-bottom-actions .p-icon-btn{
  width:32px; height:32px; background:var(--off-white); border:1px solid var(--line); box-shadow:none;
}
.p-bottom-actions .p-icon-btn:hover{background:var(--navy); border-color:var(--navy); color:#fff;}
.p-cart-btn{background:var(--navy) !important; border-color:var(--navy) !important; color:#fff !important; border-radius:8px;}
.p-cart-btn:hover{background:var(--blue) !important; border-color:var(--blue) !important;}
.p-cart-btn:disabled{background:var(--navy-12) !important; border-color:var(--line) !important; color:var(--navy-45) !important; cursor:not-allowed;}
@media (max-width:400px){
  .p-bottom-actions .p-icon-btn{width:30px; height:30px}
}

/* featured / large editorial card */
.p-card.featured{grid-column:span 2; grid-row:span 2;}
.p-card.featured .p-media{aspect-ratio:auto; height:100%;}
.p-card.featured .p-body{padding:16px;}
.p-card.featured .p-name{font-size:18px; -webkit-line-clamp:3; min-height:0;}
.p-card.featured .p-price{font-size:19px}
@media (max-width:760px){.p-card.featured{grid-column:span 2; grid-row:auto;} .p-card.featured .p-media{aspect-ratio:16/10; height:auto;}}

/* horizontal mobile card */
.p-card.horizontal{flex-direction:row}
.p-card.horizontal .p-media{width:120px; flex:none; aspect-ratio:auto;}
.p-card.horizontal .p-body{padding:10px 12px;}

/* featured showcase (1 big card on top, 2 below) */
.featured-showcase{display:flex; flex-direction:column; gap:var(--gap);}
.featured-showcase-bottom{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap);}
@media (max-width:600px){.featured-showcase-bottom{grid-template-columns:1fr;}}
.p-card.showcase-top{flex-direction:row;}
.p-card.showcase-top .p-media{aspect-ratio:auto; width:56%; flex:none;}
.p-card.showcase-top .p-body{padding:clamp(18px,2.6vw,30px); justify-content:center;}
.p-card.showcase-top .p-name{font-size:clamp(18px,2.2vw,24px); -webkit-line-clamp:3; min-height:0;}
.p-card.showcase-top .p-price{font-size:clamp(17px,1.8vw,21px)}
.p-card.showcase-top .p-brand{font-size:12px}
@media (max-width:700px){
  .p-card.showcase-top{flex-direction:column;}
  .p-card.showcase-top .p-media{width:100%; aspect-ratio:16/10;}
}

/* ---------- Filters bar ---------- */
.shop-layout{display:grid; grid-template-columns:250px 1fr; gap:var(--gap); align-items:start;}
.shop-layout > *{min-width:0}
@media (max-width:900px){.shop-layout{grid-template-columns:1fr}}
.filters{border:1px solid var(--line); padding:22px; position:sticky; top:96px;}
.filters h4{font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px;}
.filter-group{border-top:1px solid var(--line); padding:18px 0;}
.filter-group:first-child{border-top:none; padding-top:14px}
.filter-group summary{font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--navy-70); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.filter-group summary::-webkit-details-marker{display:none}
.filter-group summary::after{content:'+'; font-size:16px; font-weight:400; color:var(--navy-45); transition:transform .15s ease;}
.filter-group[open] summary::after{content:'−'}
.filter-chip-group{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.filter-chip{
  border:1.5px solid var(--line); background:#fff; padding:7px 13px; font-size:12.5px; font-weight:600;
  color:var(--navy-70); cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease;
  display:flex; align-items:center; gap:6px;
}
.filter-chip:hover{border-color:var(--navy-45)}
.filter-chip.active{background:var(--navy); border-color:var(--navy); color:#fff;}
.filter-chip .fc-count{font-size:10.5px; opacity:.6}
.price-range{display:flex; align-items:center; gap:8px; margin-top:14px;}
.price-range input{width:100%; border:1.5px solid var(--line); padding:9px 10px; font-size:12.5px; background:#fff;}
.price-range input:focus{outline:none; border-color:var(--blue);}
.price-range span{color:var(--navy-45); font-size:12px; flex:none;}
.toolbar{
  display:flex; flex-direction:column; gap:10px; margin-bottom:22px;
}
.results-count{font-size:12.5px; color:var(--navy-45); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.filter-sort-pill{
  display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:999px; overflow:hidden;
  background:#fff; width:100%;
}
.fsp-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 14px; font-size:13px; font-weight:700; color:var(--navy);
  background:none; border:none; cursor:pointer; position:relative; min-width:0;
}
.fsp-btn:hover{background:var(--navy-06)}
.fsp-btn .icon{width:16px; height:16px; flex:none;}
.fsp-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fsp-divider{width:1px; background:var(--line); margin:10px 0; flex:none;}
.fsp-sort select{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none; cursor:pointer; appearance:none;
}
@media (min-width:900px){
  .fsp-filter, .fsp-divider{display:none;}
  .filter-sort-pill{max-width:230px; margin-left:auto;}
}
@media (max-width:900px){
  .filters{display:none}
  .filters.open{display:block; position:fixed; inset:0; top:0; z-index:150; overflow:auto; background:var(--off-white); padding:24px; top:0;}
  .filters.open #nx-filters-close{display:inline-flex !important}
}

/* ---------- Compare ---------- */
.compare-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.compare-table th, .compare-table td{border:1px solid var(--line); padding:12px; text-align:left; vertical-align:top;}
.compare-table th{background:var(--navy); color:#fff; font-family:var(--font-display); font-weight:700; font-size:12.5px;}
.compare-table td.spec-label{font-weight:700; background:var(--navy-06); width:160px;}
.compare-table td.diff{background:rgba(248,214,19,.18)}
.compare-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line);}
.compare-scroll .compare-table{border:none;}
.compare-toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.compare-toolbar h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--navy-45); font-weight:700;}
.compare-pick{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:34px;}
@media (max-width:680px){.compare-pick{grid-template-columns:repeat(2, 1fr); gap:10px;}}
.compare-slot{
  width:100%; aspect-ratio:1/1.05; border:1.5px dashed var(--navy-12); background:var(--navy-06); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; font-size:12px; font-weight:600; color:var(--navy-45); text-align:center; padding:12px;
  position:relative; min-width:0; transition:border-color .15s ease, background .15s ease;
}
.compare-slot:hover{border-color:var(--blue); background:rgba(2,72,193,.05); color:var(--blue);}
.compare-slot .plus-icon{
  width:30px; height:30px; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:400; line-height:1;
}
.compare-slot.filled{border-style:solid; border-color:var(--navy); background:#fff; color:var(--navy); padding:16px 12px;}
.compare-slot img{width:56px; height:56px; object-fit:cover; flex:none;}
.compare-slot .slot-name{font-size:12px; font-weight:700; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.compare-slot .slot-price{font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--blue);}
.compare-slot .rm{position:absolute; top:6px; right:6px; background:#fff; border:1px solid var(--line); width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--navy-45);}
.compare-slot .rm:hover{background:var(--navy); color:#fff; border-color:var(--navy);}
.compare-slot .rm .icon{width:12px;height:12px}

/* ---------- Recommendations quiz ---------- */
.quiz-box{background:var(--white); border:1px solid var(--line); padding:clamp(24px,4vw,44px); max-width:720px;}
.quiz-step{display:none}
.quiz-step.active{display:block}
.quiz-options{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:22px;}
@media (max-width:560px){.quiz-options{grid-template-columns:1fr}}
.quiz-opt{
  border:1.5px solid var(--line); padding:16px; text-align:left; background:#fff;
  font-weight:700; font-size:14px; display:flex; flex-direction:column; gap:4px;
}
.quiz-opt small{font-weight:500; color:var(--navy-45); font-size:12px;}
.quiz-opt:hover, .quiz-opt.selected{border-color:var(--blue); background:rgba(2,72,193,.05);}
.quiz-progress{display:flex; gap:6px; margin-bottom:20px;}
.quiz-progress span{height:3px; flex:1; background:var(--line);}
.quiz-progress span.done{background:var(--blue)}

/* ---------- Editorial ---------- */
.editorial-split{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,5vw,64px); align-items:center;}
.editorial-split > *{min-width:0}
@media (max-width:860px){.editorial-split{grid-template-columns:1fr; gap:30px;}}
.editorial-split img{width:100%; height:clamp(300px,34vw,460px); object-fit:cover;}
.editorial-text{padding:0 clamp(0px,2vw,20px); min-width:0;}
.section-navy .editorial-text{border-left:3px solid var(--yellow); padding-left:26px;}
@media (max-width:860px){.section-navy .editorial-text{border-left:none; padding-left:0; border-top:3px solid var(--yellow); padding-top:26px;}}
.editorial-text ul{margin-top:22px; display:flex; flex-direction:column; gap:16px;}
.editorial-text li{display:flex; gap:12px; font-size:14.5px; align-items:flex-start; color:var(--navy-70);}
.editorial-text li::before{
  content:''; flex:none; width:8px; height:8px; margin-top:6px; background:var(--blue);
}
.section-navy .editorial-text li{color:rgba(251,252,252,.75);}
.section-navy .editorial-text li::before{background:var(--yellow);}
.editorial-features{display:flex; flex-direction:column; gap:14px; margin-top:26px;}
@media (min-width:520px){.editorial-features{display:grid; grid-template-columns:1fr 1fr; gap:14px;}}
.ed-feature{display:flex; gap:12px; align-items:flex-start; min-width:0; padding-top:16px; border-top:1px solid rgba(255,255,255,.14);}
.ed-feature-icon{
  width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.25); color:var(--yellow);
}
.ed-feature-icon .icon{width:16px; height:16px;}
.ed-feature span{font-size:13.5px; color:rgba(251,252,252,.8); line-height:1.45; overflow-wrap:break-word; min-width:0; padding-top:6px;}

/* ---------- Homepage promo grid (compare / recommend teaser) ---------- */
.promo-grid{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.promo-grid > *{min-width:0}
@media (max-width:700px){.promo-grid{grid-template-columns:1fr}}
.promo-box{
  border:1px solid var(--line); padding:clamp(24px,3vw,40px);
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
  position:relative; overflow:hidden;
}
.promo-box .btn{align-self:flex-start}
.promo-box-icon{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; flex:none;
  background:var(--navy); color:#fff; margin-bottom:2px;
}
.promo-box-blue{background:var(--navy); border-color:var(--navy);}
.promo-box-blue .eyebrow{color:var(--yellow)}
.promo-box-blue h3{color:#fff}
.promo-box-blue .lede{color:rgba(251,252,252,.7)}
.promo-box-blue .promo-box-icon{background:var(--blue); color:#fff;}
.promo-box-blue::after{
  content:''; position:absolute; right:-40px; bottom:-40px; width:160px; height:160px;
  border:1.5px solid rgba(255,255,255,.08); border-radius:50%;
}
.promo-box-yellow{background:var(--yellow); border-color:var(--yellow);}
.promo-box-yellow .promo-box-icon{background:var(--navy); color:var(--yellow);}
.promo-box-yellow::after{
  content:''; position:absolute; right:-30px; top:-30px; width:120px; height:120px;
  border:1.5px solid rgba(17,24,53,.1); border-radius:50%;
}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--navy); color:#fff;}
.newsletter-inner{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;}
.newsletter-form{display:flex; gap:0; max-width:420px; width:100%;}
.newsletter-form input{flex:1; border:1.5px solid rgba(255,255,255,.3); background:transparent; color:#fff; padding:13px 16px; font-size:14px;}
.newsletter-form input::placeholder{color:rgba(255,255,255,.5)}
.newsletter-form button{border-radius:0;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:rgba(251,252,252,.75); padding:60px 0 24px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12);}
.footer-grid > *{min-width:0}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}}
.footer-grid h5{color:#fff; font-size:13px; font-weight:800; margin-bottom:16px; letter-spacing:.02em;}
.footer-grid a{display:block; font-size:13.5px; padding:5px 0; color:rgba(251,252,252,.72);}
.footer-grid a:hover{color:var(--yellow)}
.footer-brand .logo{color:#fff}
.footer-brand p{font-size:13.5px; margin-top:14px; max-width:34ch; color:rgba(251,252,252,.6);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:12px; flex-wrap:wrap; gap:10px; color:rgba(251,252,252,.5);}
.footer-bottom .demo-tag{background:var(--yellow); color:var(--navy); font-weight:800; padding:3px 8px; font-size:10.5px;}

/* ---------- WhatsApp float ---------- */
/* wa-float removed per request; WhatsApp still reachable via header bar, footer and product/cart actions */

/* ---------- Quick View modal ---------- */
.qv-modal{position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:18px;}
.qv-modal.open{display:flex}
.qv-overlay{position:absolute; inset:0; background:rgba(17,24,53,.58);}
.qv-box{
  position:relative; background:#fff; width:100%; max-width:760px; max-height:88vh; overflow:auto;
  z-index:2; display:grid; grid-template-columns:1fr 1fr;
}
.qv-box > *{min-width:0}
@media (max-width:680px){.qv-box{grid-template-columns:1fr}}
.qv-close{
  position:absolute; top:12px; right:12px; z-index:3; background:#fff; border:none;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
}
.qv-close:hover{background:var(--navy); color:#fff;}
.qv-media{background:#eef0f4; aspect-ratio:1/1;}
.qv-media img{width:100%; height:100%; object-fit:cover;}
.qv-info{padding:clamp(20px,3vw,32px); display:flex; flex-direction:column; gap:8px;}
.qv-info h3{font-size:clamp(19px,2vw,23px); margin-top:2px;}
.qv-price-row{display:flex; align-items:baseline; gap:10px; margin-top:4px;}
.qv-price-row .p-price{font-size:22px}
.qv-specs{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px;}
.qv-spec-chip{border:1px solid var(--line); font-size:11.5px; padding:6px 10px; color:var(--navy-70);}
.qv-spec-chip b{color:var(--navy); font-weight:700;}
.qv-qty{display:flex; align-items:center; border:1.5px solid var(--line); width:fit-content; margin-top:6px;}
.qv-qty button{width:34px; height:38px; background:none; border:none; font-size:16px; font-weight:700;}
.qv-qty span{width:34px; text-align:center; font-weight:700; font-size:13.5px;}
.qv-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}

/* ---------- Empty states ---------- */
.empty-state{text-align:center; padding:clamp(50px,8vw,90px) 20px; max-width:420px; margin:0 auto;}
.empty-state-icon{
  width:64px; height:64px; border:1.5px solid var(--line); background:var(--navy-06);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px; color:var(--navy-45);
}
.empty-state-icon .icon{width:26px; height:26px}
.empty-state h3{font-size:18px; margin-bottom:8px;}
.empty-state p{color:var(--navy-45); font-size:13.5px; margin-bottom:22px; line-height:1.55;}
.empty-state .btn{margin:0 4px;}
.empty-state-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--navy); color:#fff; padding:14px 22px; font-size:13.5px; font-weight:600;
  z-index:200; transition:transform .25s ease; display:flex; align-items:center; gap:10px;
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:12.5px; color:var(--navy-45); padding:18px 0 0;}
.breadcrumb a:hover{color:var(--blue)}

/* ---------- Generic page header ---------- */
.page-hero{
  position:relative; background:var(--navy); color:#fff;
  padding:clamp(28px,5vw,44px) 0 clamp(32px,5.5vw,52px); overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 68px);
  pointer-events:none;
}
.page-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--yellow);
}
.page-hero .container{position:relative; z-index:1;}
.page-hero-crumb{display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(251,252,252,.55); margin-bottom:16px; flex-wrap:wrap;}
.page-hero-crumb a{color:rgba(251,252,252,.75);}
.page-hero-crumb a:hover{color:var(--yellow)}
.page-hero .eyebrow{color:var(--yellow); margin-bottom:10px;}
.page-hero h1{color:#fff; font-size:clamp(28px,4.4vw,46px); max-width:26ch;}
.page-hero p{color:rgba(251,252,252,.68); margin-top:10px; max-width:60ch; font-size:clamp(13.5px,1.6vw,15.5px);}

/* ---------- Forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-grid > *{min-width:0}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12.5px; font-weight:700;}
.field.full{grid-column:1/-1}
.field input, .field select, .field textarea{
  border:1.5px solid var(--line); padding:12px 14px; font-size:14px; background:#fff; color:var(--navy);
  width:100%; min-width:0;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue);}

/* ---------- Utility ---------- */
.flex{display:flex}
.gap-8{gap:8px}
.mt-8{margin-top:8px}
.center{display:flex;align-items:center;justify-content:center;}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}