/* ============================================================
   SPARKED ESSENTIALS — FIXED STYLESHEET
   All fixes applied per design brief:
   1. Header icons stay inside orange banner
   2. Ticker text overflow/overlap fixed
   3. "Sell on" nav item removed
   4. Nav category icons → real SVG/PNG icons
   5. A4 Paper category image updated
   6. Country field in newsletter form fixed
   7. Contact section fully responsive
   8. Footer columns equal height/width grid
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --orange:#F68B1E;--od:#D4780A;--ol:#FFF3E0;
  --red:#E74C3C;--green:#27AE60;--gl:#E8F5E9;
  --blue:#2980B9;--white:#fff;--bg:#F5F5F5;
  --text:#212121;--t2:#444;--t3:#757575;--t4:#9E9E9E;
  --border:#E0E0E0;--b2:#BDBDBD;
  --sh:0 2px 8px rgba(0,0,0,.1);--sh2:0 4px 18px rgba(0,0,0,.14);
  --r:4px;--r2:8px;
  --font:'Open Sans',sans-serif
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;font-size:14px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{cursor:pointer;font-family:var(--font);border:none;outline:none}
a{text-decoration:none;color:inherit}
input,select,textarea{font-family:var(--font)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:var(--orange);border-radius:99px}

/* ---- Animations ---- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blink2{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes gradientShift1{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes gradientShift2{0%{background-position:100% 0%}50%{background-position:0% 100%}100%{background-position:100% 0%}}

/* ---- Jumia-style hero banner animation ---- */
@keyframes slideIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@keyframes zoomIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* ---- Order/Pay/Deliver step animation ---- */
@keyframes stepPop{0%{opacity:0;transform:translateY(18px) scale(.95)}60%{transform:translateY(-4px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes arrowBounce{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

.page{display:none}
.page.active{display:block;animation:fadeIn .25s}

/* ============================================================
   PROMO TOP BAR
   ============================================================ */
.promo-bar{
  background:linear-gradient(90deg,#1a1a1a,#2d2d2d,#1a1a1a);
  color:#fff;font-size:11.5px;text-align:center;
  padding:5px 16px;display:flex;align-items:center;
  justify-content:center;gap:0;flex-wrap:wrap;
  overflow:hidden;position:relative;
  border-bottom:2px solid var(--orange);
}
.promo-bar b{color:var(--orange)}
.promo-bar span{opacity:.5;margin:0 8px}
/* Jumia-style date discount banner inside promo bar */
.promo-deal{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,#E74C3C,#FF6B35);
  color:#fff;padding:2px 12px 2px 8px;border-radius:99px;
  font-weight:700;font-size:11px;margin:0 12px;
  animation:pulse 2s ease-in-out infinite;
}
.promo-deal .pd-tag{background:#fff;color:#E74C3C;padding:1px 7px;border-radius:99px;font-size:10px;font-weight:800;margin-right:4px}
.promo-wa-cta{
  display:inline-flex;align-items:center;gap:5px;
  background:#25D366;color:#fff;padding:2px 10px 2px 7px;
  border-radius:99px;font-weight:700;font-size:11px;
  cursor:pointer;transition:background .2s;margin-left:10px;
  text-decoration:none;white-space:nowrap;
}
.promo-wa-cta:hover{background:#1ebe5d}

/* ============================================================
   HEADER — FIX #1: Icons stay inside orange banner only
   ============================================================ */
header{
  background:var(--orange);
  position:sticky;top:0;z-index:500;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  overflow:visible;/* allow dropdowns */
  border-bottom:3px solid var(--od);
}
.hdr{
  max-width:1280px;margin:0 auto;padding:0 16px;
  display:flex;align-items:center;gap:12px;
  height:58px; /* fixed height so icons don't bleed out */
  overflow:visible;
}
.logo{flex-shrink:0;cursor:pointer;user-select:none}
.logo-main{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1}
.logo-main span{color:#FFE082}
.logo-tag{font-size:8.5px;color:rgba(255,255,255,.75);letter-spacing:.1em;font-weight:600;text-transform:uppercase}
.search-bar{flex:1;display:flex;max-width:520px}
.search-bar input{
  flex:1;border:none;outline:none;padding:0 13px;font-size:13.5px;
  color:var(--text);height:36px;border-radius:var(--r) 0 0 var(--r);
}
.search-bar input::placeholder{color:var(--t4)}
.s-btn{
  background:var(--od);color:#fff;padding:0 14px;height:36px;border:none;
  cursor:pointer;border-radius:0 var(--r) var(--r) 0;font-size:14px;
  font-weight:700;transition:background .2s;white-space:nowrap;
}
.s-btn:hover{background:#8a4d00}

/* Fix: right header group — always stays inside orange bar */
.hdr-r{
  display:flex;align-items:center;gap:5px;
  margin-left:auto;flex-shrink:0;
  /* Ensure nothing exceeds header height */
  height:100%;
  align-self:center;
}

/* Fix #1: icon buttons constrained inside header height */
.hico{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:4px 8px;border-radius:var(--r);
  background:rgba(255,255,255,.12);border:none;color:#fff;
  cursor:pointer;transition:background .2s;
  min-width:48px;
  /* Prevent overflow out of orange banner */
  height:44px;justify-content:center;overflow:hidden;
}
.hico:hover{background:rgba(255,255,255,.22)}
.hico .i{font-size:16px;line-height:1}
.hico .l{font-size:9.5px;font-weight:600;white-space:nowrap}
.hico.cart-ico{position:relative}
.hico.cart-ico .badge{
  position:absolute;top:2px;right:4px;background:#fff;
  color:var(--orange);font-size:9px;font-weight:800;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* Sell button — hidden per user request (Image 3 fix) */
.sell-hbtn{display:none!important}


/* ============================================================
   NAV BAR — Fix #3: Remove "Sell on" item; align remaining
   ============================================================ */
.nav-bar{
  background:#fff;border-bottom:2px solid var(--orange);
  position:sticky;top:64px;z-index:490;overflow:visible!important;
  box-shadow:0 2px 6px rgba(0,0,0,.07);
}
.nav-inner{
  max-width:1280px;margin:0 auto;padding:0 16px;
  display:flex;align-items:center;
  white-space:nowrap;overflow-x:auto;overflow-y:visible!important;
  scrollbar-width:none;position:relative;
  /* Fill to right edge so no extra space */
}
.nav-inner::-webkit-scrollbar{display:none}
/* "Sell on" item hidden */
.nl.sell-nav{display:none!important}

.nl{
  font-size:12.5px;font-weight:600;color:var(--t2);
  padding:10px 11px;border-bottom:2px solid transparent;
  margin-bottom:-2px;cursor:pointer;transition:all .15s;
  white-space:nowrap;display:inline-flex;align-items:center;gap:4px;
}
.nl:hover,.nl.act{color:var(--orange);border-bottom-color:var(--orange)}
.nl.hot{color:var(--red);font-weight:700}

/* Skincare dropdown */
.nav-dropdown-wrap{position:relative;display:inline-flex;align-items:center;z-index:99999}
.nav-dropdown-trigger{
  font-size:12.5px;font-weight:600;color:var(--t2);
  padding:10px 11px;border-bottom:2px solid transparent;margin-bottom:-2px;
  cursor:pointer;transition:all .15s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;user-select:none;line-height:1;
}
.nav-dropdown-wrap:hover .nav-dropdown-trigger,
.nav-dropdown-wrap.open .nav-dropdown-trigger{color:var(--orange);border-bottom-color:var(--orange)}
.nav-drop-menu{
  display:none;position:fixed;background:#fff;
  border:1px solid var(--border);border-top:3px solid var(--orange);
  border-radius:0 0 8px 8px;min-width:200px;z-index:99999!important;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.nav-dropdown-wrap.open .nav-drop-menu{display:block}
.ndm-item{
  padding:9px 16px;font-size:12.5px;font-weight:600;color:var(--t2);
  cursor:pointer;transition:background .12s;white-space:nowrap;
  border-bottom:1px solid #f5f5f5;
}
.ndm-item:last-child{border-bottom:none;border-radius:0 0 var(--r2) var(--r2)}
.ndm-item:hover{background:var(--ol);color:var(--orange)}

/* ============================================================
   FIX #2: Ticker — prevent text overlap
   ============================================================ */
.ticker{
  background:var(--ol);border:1px solid #FFD180;
  border-radius:var(--r);padding:7px 0;overflow:hidden;
  margin-bottom:12px;display:flex;align-items:center;
  position:relative;z-index:2;
}
.tick-label{
  background:var(--orange);color:#fff;font-size:11px;font-weight:700;
  padding:2px 12px;border-radius:0 99px 99px 0;flex-shrink:0;margin-right:10px;
  white-space:nowrap;
}
/* Fix overflow: wrapper clips properly */
.ticker-track{
  overflow:hidden;flex:1;min-width:0;
}
.ticker-inner{
  display:inline-flex;animation:marquee 32s linear infinite;
  white-space:nowrap;
}
/* Fix #2: each ticker item has proper spacing, no overlap */
.ti{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 22px;font-size:12.5px;color:var(--t2);
  font-weight:500;flex-shrink:0;
  /* Prevent items from collapsing into each other */
  white-space:nowrap;
}
.ti b{color:var(--orange)}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:1280px;margin:0 auto;padding:10px 16px}
.hero-row{display:grid;grid-template-columns:210px 1fr 170px;gap:12px;margin-bottom:12px}

/* ============================================================
   SIDEBAR — Fix #4: Real image icons (no emojis)
   ============================================================ */
.sidebar{background:#fff;border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh)}
.sb-hdr{background:var(--orange);color:#fff;padding:11px 13px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px}
.sb-item{
  display:flex;align-items:center;gap:9px;padding:8px 13px;
  border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background .15s;
  font-size:12.5px;color:var(--t2);font-weight:500;
}
.sb-item:hover{background:var(--ol);color:var(--orange)}
/* Fix #4: real category icon — small square image */
.sb-ico{
  width:22px;height:22px;border-radius:4px;object-fit:cover;flex-shrink:0;
}
.sb-arr{margin-left:auto;color:var(--t4);font-size:11px}

/* ============================================================
   HERO SLIDER — Jumia-style animation (Fix for animation request)
   ============================================================ */
.slider{
  background:#fff;border-radius:var(--r2);overflow:hidden;
  box-shadow:var(--sh);position:relative;cursor:pointer;
  display:flex;flex-direction:column;
}
#slide-content{flex:1;min-height:0}
.slide{
  display:grid;grid-template-columns:1fr 1fr;
  height:290px;align-items:center;
  position:relative;overflow:hidden;
}
/* Slide background gradients */
.slide-bg-0{background:linear-gradient(135deg,#fff3e0,#ffe0b2,#fff8e1,#ffd54f);background-size:300% 300%;animation:gradientShift1 6s ease infinite}
.slide-bg-1{background:linear-gradient(135deg,#fce4ec,#f8bbd0,#fce4ec,#ff80ab30);background-size:300% 300%;animation:gradientShift2 6s ease infinite}
.slide-bg-2{background:linear-gradient(135deg,#ede7f6,#c5cae9,#e8eaf6,#b39ddb60);background-size:300% 300%;animation:gradientShift1 6s ease infinite}
.slide-bg-3{background:linear-gradient(135deg,#e8f5e9,#c8e6c9,#f1f8e9,#a5d6a760);background-size:300% 300%;animation:gradientShift2 6s ease infinite}
.slide-bg-4{background:linear-gradient(135deg,#fce4ec,#f3e5f5,#e8eaf6,#ce93d830);background-size:300% 300%;animation:gradientShift1 6s ease infinite}
.slide-bg-5{background:linear-gradient(135deg,#e3f2fd,#bbdefb,#e1f5fe,#81d4fa50);background-size:300% 300%;animation:gradientShift2 6s ease infinite}
.slide-bg-6{background:linear-gradient(135deg,#f3e5f5,#ede7f6,#fce4ec,#b39ddb40);background-size:300% 300%;animation:gradientShift1 6s ease infinite}
.slide-bg-7{background:linear-gradient(135deg,#fff8e1,#ffecb3,#fff3e0,#ffd54f50);background-size:300% 300%;animation:gradientShift2 6s ease infinite}
.slide-bg-8{background:linear-gradient(135deg,#fce4ec,#f8bbd0,#fff9c4,#ff80ab40);background-size:300% 300%;animation:gradientShift1 6s ease infinite}

/* Jumia-style: text animates in from left, image from right */
.slide-l{
  padding:28px 24px;z-index:1;
  animation:slideInLeft .55s cubic-bezier(.22,.68,0,1.2) both;
}
.slide-r{
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;height:100%;padding:12px;
  animation:zoomIn .65s cubic-bezier(.22,.68,0,1.2) both;
}
.slide-r img{
  max-height:220px;width:auto;object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));
  transition:transform .4s ease;
}
.slide:hover .slide-r img{transform:scale(1.06)}
.slide-tag{
  display:inline-block;padding:3px 12px;border-radius:99px;
  font-size:11.5px;font-weight:700;color:#fff;margin-bottom:10px;
  animation:fadeInUp .4s .1s both;
}
.slide-h{
  font-size:22px;font-weight:800;color:var(--text);line-height:1.25;
  margin-bottom:8px;animation:fadeInUp .45s .15s both;
}
.slide-h span{color:var(--orange)}
.slide-sub{font-size:12.5px;color:var(--t3);margin-bottom:12px;animation:fadeInUp .5s .2s both}
.slide-price{font-size:19px;font-weight:800;color:var(--orange);margin-bottom:6px;animation:fadeInUp .52s .25s both}
.slide-price small{font-size:12px;font-weight:500;color:var(--t4);text-decoration:line-through;margin-left:6px}
.slide-btn{
  background:var(--orange);color:#fff;padding:9px 20px;border-radius:var(--r2);
  font-weight:700;font-size:13px;border:none;cursor:pointer;
  transition:background .2s,transform .15s;
  animation:fadeInUp .55s .3s both;
}
.slide-btn:hover{background:var(--od);transform:translateY(-2px)}

/* Slider controls */
.slider-prev,.slider-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.8);border:none;cursor:pointer;
  font-size:18px;font-weight:700;color:var(--text);
  width:32px;height:32px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;z-index:5;
  transition:background .15s;box-shadow:var(--sh);
}
.slider-prev{left:8px}
.slider-next{right:8px}
.slider-prev:hover,.slider-next:hover{background:#fff}
.sdots{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 0 8px;background:#fff}
.sdot{width:7px;height:7px;border-radius:50%;background:var(--b2);border:none;cursor:pointer;transition:all .2s}
.sdot.act{background:var(--orange);width:20px;border-radius:99px}

/* ============================================================
   ORDER / PAY / DELIVER STEPS ANIMATION
   ============================================================ */
.how-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:#fff;border-radius:var(--r2);overflow:hidden;
  box-shadow:var(--sh);margin-bottom:14px;
}
.how-step{
  display:flex;flex-direction:column;align-items:center;
  padding:22px 16px;position:relative;text-align:center;
  opacity:0;
  /* JS IntersectionObserver will trigger stepPop animation */
  transition:opacity .1s;
}
.how-step.visible{animation:stepPop .6s ease both;opacity:1}
/* Fallback for older browsers / no JS */
@media(prefers-reduced-motion:no-preference){
  .how-step:nth-child(1){animation-delay:.1s}
  .how-step:nth-child(2){animation-delay:.3s}
  .how-step:nth-child(3){animation-delay:.5s}
}
.how-step:not(:last-child)::after{
  content:'›';position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  font-size:22px;color:var(--orange);font-weight:700;
  animation:arrowBounce 1.4s ease-in-out infinite;
}
.how-step-ico{
  width:56px;height:56px;background:var(--ol);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:10px;
  transition:transform .3s ease;
}
.how-step:hover .how-step-ico{transform:scale(1.12) rotate(-5deg)}
.how-step-num{
  position:absolute;top:14px;right:calc(50% - 36px);
  background:var(--orange);color:#fff;
  width:20px;height:20px;border-radius:50%;
  font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.how-step h4{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.how-step p{font-size:12px;color:var(--t3);line-height:1.5}

/* ============================================================
   CATEGORY PILLS — Fix #4 (icons) & Fix #5 (A4 image)
   ============================================================ */
.cat-scroll{overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-pills{display:flex;gap:10px;padding:4px 0 6px;min-width:max-content}
.cpill{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;transition:all .15s;min-width:72px;
}
.cpill-img{
  width:62px;height:62px;border-radius:50%;overflow:hidden;
  border:2.5px solid var(--border);background:#f5f5f5;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,box-shadow .15s;
}
.cpill-img img{width:100%;height:100%;object-fit:cover}
.cpill.act .cpill-img{border-color:var(--orange);box-shadow:0 0 0 3px rgba(246,139,30,.18);background:var(--ol)}
.cpill:hover .cpill-img{border-color:var(--orange);transform:scale(1.05)}
.cpill-img{transition:transform .15s,border-color .15s,box-shadow .15s}
.cpill-label{font-size:11.5px;font-weight:600;color:var(--t2);text-align:center;white-space:nowrap}
.cpill.act .cpill-label{color:var(--orange)}
/* Fix: "All" pill icon placeholder */
.ico-fb{font-size:22px}

/* Section headers */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sec-t{font-size:16px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:6px}
.sec-t::after{content:'';display:block;width:36px;height:3px;background:var(--orange);border-radius:99px;margin-left:6px}
.sec-a{font-size:12.5px;color:var(--orange);font-weight:600;cursor:pointer}
.sec-a:hover{text-decoration:underline}

/* ============================================================
   PRODUCT CARDS
   Features added:
   - Stock count badge (items left)
   - Discount % badge
   - Warranty badge for eligible products
   - MOQ calculated ≤ $500
   ============================================================ */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pc{
  background:#fff;border-radius:var(--r2);overflow:hidden;
  box-shadow:var(--sh);cursor:pointer;transition:box-shadow .18s,transform .18s;
  display:flex;flex-direction:column;position:relative;
}
.pc:hover{box-shadow:var(--sh2);transform:translateY(-3px)}
.pc-img{position:relative;overflow:hidden;background:#fff;flex-shrink:0;border-bottom:1px solid #f0f0f0}
.pc-img-sq{aspect-ratio:1/1}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.pc:hover .pc-img img{transform:scale(1.06)}

/* Badges */
.pbadge{
  position:absolute;top:8px;left:8px;padding:2px 8px;
  border-radius:99px;font-size:10px;font-weight:700;color:#fff;
  text-transform:uppercase;z-index:2;
}
.pbadge.ora{background:var(--orange)}
.pbadge.red{background:var(--red)}
.pbadge.grn{background:var(--green)}
.pbadge.blu{background:var(--blue)}

/* Warranty badge — bottom left of image */
.pbadge-warranty{
  position:absolute;bottom:8px;left:8px;
  background:linear-gradient(90deg,#1565C0,#1976D2);
  color:#fff;padding:2px 8px;border-radius:99px;
  font-size:9.5px;font-weight:700;z-index:2;
  display:flex;align-items:center;gap:3px;
}

/* Stock left badge — bottom right */
.stock-left{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.7);color:#fff;
  padding:2px 8px;border-radius:99px;
  font-size:9.5px;font-weight:600;z-index:2;
}
.stock-low{background:rgba(231,76,60,.9)}

.pwish{
  position:absolute;top:8px;right:8px;background:#fff;
  border:none;font-size:17px;width:30px;height:30px;
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;cursor:pointer;box-shadow:var(--sh);
  transition:all .2s;z-index:2;color:#ccc;
}
.pwish:hover,.pwish.on{color:#E74C3C}

.pc-body{padding:10px;display:flex;flex-direction:column;flex:1}
.pc-brand{font-size:10.5px;font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.pc-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.35;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-stars{font-size:12px;color:#F4A307;margin-bottom:4px}
.pc-stars span{color:var(--t4);font-size:11px}
.pc-price{font-size:16px;font-weight:800;color:var(--text);margin-bottom:2px}
.pc-old{font-size:12px;color:var(--t4);text-decoration:line-through;margin-right:4px}
.pc-disc{font-size:12px;color:var(--red);font-weight:700}
.pc-moq{font-size:10.5px;color:var(--t4);margin:3px 0 6px;display:flex;align-items:center;gap:4px}
.pc-moq b{color:var(--text)}
.pc-add{
  width:100%;background:var(--orange);color:#fff;padding:7px;
  border-radius:var(--r);font-weight:700;font-size:12.5px;
  border:none;cursor:pointer;transition:background .15s;
  margin-top:auto;
}
.pc-add:hover{background:var(--od)}
.pc-ship{font-size:10.5px;color:var(--t4);margin-top:4px;text-align:center}

/* ============================================================
   FLASH SALE SECTION
   ============================================================ */
.flash-sec{margin-bottom:14px}
.flash-hdr{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
  background:linear-gradient(90deg,var(--red),#c0392b);
  border-radius:var(--r2);padding:10px 16px;color:#fff;
}
.flash-t{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;flex:1}
.flash-cd{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.cd-box{
  background:rgba(0,0,0,.25);border-radius:var(--r);
  padding:4px 8px;min-width:34px;text-align:center;font-size:15px;font-weight:800;
}
.flash-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.fprog{height:4px;background:var(--border);border-radius:99px;margin:6px 0 3px;overflow:hidden}
.fprog-b{height:100%;background:linear-gradient(90deg,var(--orange),var(--red));border-radius:99px;transition:width .4s}
.fsold{display:flex;justify-content:space-between;font-size:10.5px;color:var(--t4)}

/* ============================================================
   FEATURED / TAB PRODUCTS
   ============================================================ */
.stabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.stabs::-webkit-scrollbar{display:none}
.stab{
  padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--t3);
  background:none;border:none;cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;
}
.stab.act{color:var(--orange);border-bottom-color:var(--orange)}
.stab:hover{color:var(--orange)}

/* Best Sellers */
.bs-wrap{display:grid;grid-template-columns:140px 1fr;gap:12px;margin-bottom:14px}
.bs-side{background:#fff;border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);padding:12px 0}
.bs-side h4{font-size:13px;font-weight:700;padding:0 13px 10px;border-bottom:1px solid var(--border);margin-bottom:2px;color:var(--text)}
.bsfb{display:flex;align-items:center;gap:7px;padding:7px 13px;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:background .12s;border-left:3px solid transparent;width:100%;background:none;border:none;border-left:3px solid transparent;text-align:left}
.bsfb:hover{background:var(--ol);color:var(--orange)}
.bsfb.act{color:var(--orange);border-left-color:var(--orange);background:var(--ol)}
.bs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

/* New Arrivals */
.na-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:10px;margin-bottom:14px}
.na-card{border-radius:var(--r2);overflow:hidden;background:#fff;box-shadow:var(--sh);cursor:pointer;transition:box-shadow .18s;position:relative}
.na-card:hover{box-shadow:var(--sh2)}
.na-card.big{grid-column:1;grid-row:span 2}
.na-img{width:100%;overflow:hidden}
.na-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.na-card:hover .na-img img{transform:scale(1.05)}
.na-body{padding:10px}
.na-new{background:var(--green);color:#fff;font-size:10px;font-weight:700;display:inline-block;padding:2px 8px;border-radius:99px;margin-bottom:4px}
.na-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.na-price{font-size:14px;font-weight:800;color:var(--orange);margin-top:4px}
.na-price small{font-size:11px;color:var(--t4);text-decoration:line-through;margin-left:5px}

/* ============================================================
   PROMO BANNERS
   ============================================================ */
.promo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.pb{background:#fff;border-radius:var(--r2);box-shadow:var(--sh);overflow:hidden;display:flex;cursor:pointer;transition:box-shadow .18s}
.pb:hover{box-shadow:var(--sh2)}
.pb-stripe{width:5px;flex-shrink:0}
.pb-body{padding:12px 14px}
.pb-tag{font-size:11px;font-weight:700;margin-bottom:4px}
.pb-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:2px}
.pb-desc{font-size:12px;color:var(--t3);margin-bottom:6px}
.pb-cta{font-size:12.5px;font-weight:700;cursor:pointer}

/* ============================================================
   TRUST ROW
   ============================================================ */
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.trust-card{background:#fff;border-radius:var(--r2);padding:14px;box-shadow:var(--sh);display:flex;align-items:center;gap:10px}
.trust-ico{font-size:26px;flex-shrink:0}
.trust-t{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.trust-s{font-size:11.5px;color:var(--t3)}

/* ============================================================
   NEWSLETTER SECTION — Fix #7: Country field fully visible
   ============================================================ */
.nl-box{
  background:var(--orange);border-radius:var(--r2);
  padding:28px 32px;display:grid;grid-template-columns:1fr 1fr;
  gap:20px;align-items:center;margin-bottom:14px;
}
.nl-l h3{font-size:20px;font-weight:800;color:#fff;margin-bottom:6px}
.nl-l p{font-size:13px;color:rgba(255,255,255,.85);line-height:1.6}
.nl-r{display:flex;flex-direction:column;gap:8px}
/* Fix #7: all newsletter inputs — uniform visible style */
.nl-inp,.nl-sel{
  width:100%;padding:11px 14px;border-radius:var(--r);
  font-size:13.5px;font-family:var(--font);
  /* Force white background and dark text for visibility */
  background:#fff!important;color:var(--text)!important;
  border:2px solid rgba(255,255,255,.3);outline:none;
  transition:border-color .15s;
  /* Fix country dropdown: ensure full visibility */
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  position:relative;z-index:1;
}
.nl-inp:focus,.nl-sel:focus{border-color:#fff}
.nl-inp::placeholder{color:var(--t4)}
/* Country select wrapper — for custom arrow */
.nl-sel-wrap{position:relative;width:100%}
.nl-sel-wrap::after{
  content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--t3);pointer-events:none;font-size:14px;
}
.nl-sel{cursor:pointer;padding-right:32px;width:100%}
.nl-sub{
  background:#fff;color:var(--orange);padding:11px;
  border-radius:var(--r);font-weight:700;font-size:14px;
  border:none;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.nl-sub:hover{background:#FFE082;color:var(--od)}

/* ============================================================
   VENDOR SECTION
   ============================================================ */
.vendor-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.vendor-promo{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:var(--r2);padding:24px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.vp-tag{background:var(--orange);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;display:inline-block;margin-bottom:12px}
.vp-h{font-size:20px;font-weight:800;margin-bottom:8px;line-height:1.2}
.vp-h span{color:var(--orange)}
.vp-feats{margin:12px 0;display:flex;flex-direction:column;gap:5px}
.vp-f{font-size:12.5px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:6px}
.vp-f::before{content:'✓';color:var(--orange);font-weight:700}
.vp-btn{
  background:var(--orange);color:#fff;padding:10px 20px;
  border-radius:var(--r2);font-weight:700;font-size:13px;
  border:none;cursor:pointer;transition:background .2s;
  align-self:flex-start;
}
.vp-btn:hover{background:var(--od)}
.v-cards{display:flex;flex-direction:column;gap:8px;justify-content:center}
.vcard{background:#fff;border-radius:var(--r2);padding:13px 16px;box-shadow:var(--sh);display:flex;align-items:center;gap:12px;cursor:pointer;transition:box-shadow .15s}
.vcard:hover{box-shadow:var(--sh2)}
.vcard-logo{width:42px;height:42px;border-radius:var(--r2);background:var(--ol);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vl-ico{font-size:22px}
.vc-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:1px}
.vc-meta{font-size:11.5px;color:var(--t3)}
.vc-rat{font-size:11.5px;color:#F4A307;margin-top:2px}
.vc-arr{margin-left:auto;font-size:20px;color:var(--t4)}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.rv-card{background:#fff;border-radius:var(--r2);padding:16px;box-shadow:var(--sh)}
.rv-stars{color:#F4A307;font-size:14px;margin-bottom:8px}
.rv-text{font-size:12.5px;color:var(--t3);line-height:1.7;margin-bottom:12px}
.rv-author{display:flex;align-items:center;gap:10px}
.rv-avatar{width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rv-name{font-size:13px;font-weight:700;color:var(--text)}
.rv-co{font-size:11px;color:var(--t4)}
.rv-verified{font-size:10.5px;color:var(--green);font-weight:600;margin-top:2px}

/* ============================================================
   WHATSAPP FLOAT — Fix: "Text To Order" label
   ============================================================ */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:600;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.wa-main-btn{
  background:#25D366;color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  padding:10px 18px 10px 14px;border-radius:99px;
  font-size:13.5px;font-weight:700;box-shadow:0 4px 16px rgba(37,211,102,.4);
  transition:all .2s;
}
.wa-main-btn:hover{background:#1ebe5d;box-shadow:0 6px 20px rgba(37,211,102,.5)}
.wa-ico{font-size:22px;line-height:1}
/* "Text To Order" is the button label now */
.wa-lbl{white-space:nowrap}
.wa-opts{
  display:none;flex-direction:column;gap:5px;
  background:#fff;border-radius:var(--r2);padding:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);border:1px solid var(--border);
  min-width:200px;
}
.wa-opt{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:var(--r);font-size:12.5px;font-weight:600;
  color:var(--t2);cursor:pointer;text-decoration:none;
  transition:background .12s;
}
.wa-opt:hover{background:var(--ol);color:var(--orange)}
.wa-opt-ico{font-size:16px}

/* ============================================================
   PRODUCT DETAIL MODAL — Jumia-style
   ============================================================ */
#pd-ov{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  z-index:700;display:none;align-items:center;
  justify-content:center;padding:14px;overflow-y:auto;
}
#pd-ov.show{display:flex;animation:fadeIn .18s}
.pd-modal{
  background:#fff;border-radius:var(--r2);
  max-width:820px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  overflow:hidden;animation:fadeUp .22s;
}
/* Jumia-style: full-image left, details right */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;min-height:480px}
.pd-left{
  background:#f8f8f8;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:20px;
  position:relative;border-right:1px solid var(--border);
}
/* Thumbnail strip like Jumia */
.pd-thumbs{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.pd-thumb{
  width:52px;height:52px;border-radius:var(--r);overflow:hidden;
  border:2px solid var(--border);cursor:pointer;transition:border-color .15s;
}
.pd-thumb.act{border-color:var(--orange)}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-main-img{
  max-height:320px;max-width:100%;object-fit:contain;
  transition:transform .3s;cursor:zoom-in;
}
.pd-main-img:hover{transform:scale(1.08)}
.pd-x{
  position:absolute;top:10px;right:10px;background:#fff;
  border:none;font-size:17px;width:32px;height:32px;
  border-radius:50%;cursor:pointer;box-shadow:var(--sh);
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);transition:all .15s;
}
.pd-x:hover{background:var(--red);color:#fff}
.pd-right{padding:22px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.pd-brand{font-size:11px;font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:.06em}
.pd-name{font-size:18px;font-weight:800;color:var(--text);line-height:1.3}
.pd-rat-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pd-stars{color:#F4A307;font-size:14px}
.pd-rv{font-size:12px;color:var(--t4)}
.pd-ver{font-size:11.5px;color:var(--green);font-weight:600}
.pd-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pd-price{font-size:26px;font-weight:800;color:var(--orange)}
.pd-old{font-size:15px;color:var(--t4);text-decoration:line-through}
.pd-save{
  background:var(--red);color:#fff;font-size:12px;
  font-weight:700;padding:2px 9px;border-radius:99px;
}
.pd-moq{
  font-size:12.5px;color:var(--t3);background:var(--bg);
  padding:8px 12px;border-radius:var(--r);border-left:3px solid var(--orange);
}
.pd-desc{font-size:13px;color:var(--t3);line-height:1.7}
.pd-specs{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;background:var(--bg);border-radius:var(--r);padding:10px}
.pd-spec{display:flex;gap:6px;font-size:12px}
.pd-sl{color:var(--t4);min-width:80px;font-weight:500}
.pd-sv{font-weight:700;color:var(--text)}

/* Qty selector — Fix: shows actual count, not ×1,000 label inline */
.pd-qty-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pd-ql{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.pd-qctrl{display:flex;align-items:center;gap:0;border:1.5px solid var(--border);border-radius:var(--r)}
.pdqb{
  width:34px;height:34px;background:none;border:none;
  font-size:18px;font-weight:700;cursor:pointer;color:var(--text);
  transition:background .15s;
}
.pdqb:hover{background:var(--ol)}
.pdqv{min-width:38px;text-align:center;font-size:15px;font-weight:700;padding:0 6px}
/* Unit label separated clearly */
.pd-unit-note{font-size:11px;color:var(--t4);margin-top:2px}

.pd-btns{display:flex;gap:8px;flex-wrap:wrap}
.pd-add{
  flex:1;background:var(--orange);color:#fff;padding:11px 16px;
  border-radius:var(--r2);font-weight:700;font-size:14px;
  border:none;cursor:pointer;transition:background .15s;
  display:flex;align-items:center;gap:6px;justify-content:center;
}
.pd-add:hover{background:var(--od)}
.pd-quote{
  flex:1;background:#fff;color:var(--blue);padding:11px 16px;
  border-radius:var(--r2);font-weight:700;font-size:14px;
  border:2px solid var(--blue);cursor:pointer;transition:all .15s;
}
.pd-quote:hover{background:var(--blue);color:#fff}

/* ============================================================
   CART SIDEBAR
   ============================================================ */
#cart-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:650;display:none}
#cart-ov.show{display:block;animation:fadeIn .18s}
.cart-sb{position:fixed;right:-400px;top:0;bottom:0;width:380px;background:#fff;z-index:660;box-shadow:-4px 0 20px rgba(0,0,0,.18);transition:right .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.cart-sb.open{right:0}
.cart-hdr{background:var(--orange);padding:16px;display:flex;align-items:center;justify-content:space-between;color:#fff;flex-shrink:0}
.cart-hdr h3{font-size:16px;font-weight:700}
.cart-close{background:rgba(255,255,255,.2);border:none;color:#fff;font-size:18px;width:30px;height:30px;border-radius:50%;cursor:pointer}
.cart-list{flex:1;overflow-y:auto;padding:12px}
.cempty{text-align:center;padding:40px 20px}
.cempty-ico{font-size:48px;margin-bottom:8px;opacity:.3}
.cempty p{color:var(--t4);font-size:13.5px}
.citem{display:flex;gap:10px;padding:10px;border-bottom:1px solid var(--border)}
.citem-img{width:60px;height:60px;border-radius:var(--r);overflow:hidden;background:var(--bg);flex-shrink:0}
.citem-img img{width:100%;height:100%;object-fit:cover}
.ci-brand{font-size:10px;font-weight:700;color:var(--orange);text-transform:uppercase}
.ci-name{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ci-price{font-size:13px;font-weight:700;color:var(--text);margin:3px 0}
.qty-row{display:flex;align-items:center;gap:6px;margin-top:4px}
.qbtn{width:26px;height:26px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s}
.qbtn:hover{background:var(--ol)}
.qn{font-size:14px;font-weight:700;min-width:22px;text-align:center}
.cdel{background:none;border:none;font-size:18px;color:var(--t4);cursor:pointer;padding:4px;transition:color .15s;margin-left:auto}
.cdel:hover{color:var(--red)}
.cart-foot{padding:14px;border-top:1px solid var(--border);flex-shrink:0}
.cart-min{font-size:11.5px;color:var(--t4);margin-bottom:6px;display:flex;align-items:center;gap:4px}
.cart-total-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cart-total-row span:first-child{font-size:14px;font-weight:600;color:var(--t2)}
.cart-total-row span:last-child{font-size:18px;font-weight:800;color:var(--text)}
.cart-co-btn{width:100%;background:var(--orange);color:#fff;padding:13px;border-radius:var(--r2);font-weight:700;font-size:14px;border:none;cursor:pointer;transition:background .15s}
.cart-co-btn:hover{background:var(--od)}

/* ============================================================
   CHECKOUT
   ============================================================ */
#co-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:800;display:none;align-items:center;justify-content:center;padding:14px}
#co-ov.show{display:flex;animation:fadeIn .18s}
.co-modal{background:#fff;border-radius:var(--r2);max-width:520px;width:100%;animation:fadeUp .22s;box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:hidden;max-height:90vh;overflow-y:auto}
.co-hdr{background:linear-gradient(135deg,var(--orange),var(--od));padding:18px 22px;color:#fff;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.co-hdr h3{font-size:17px;font-weight:700}
.co-close{background:rgba(255,255,255,.2);border:none;color:#fff;font-size:18px;width:30px;height:30px;border-radius:50%;cursor:pointer}
.co-steps{display:flex;padding:14px 22px;gap:0;border-bottom:1px solid var(--border);align-items:center}
.cst{width:28px;height:28px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;transition:background .3s}
.cst.act{background:var(--orange)}
.cst.done{background:var(--green)}
.csl{flex:1;height:2px;background:var(--border);transition:background .3s}
.co-body{padding:20px 22px}
.co-panel{display:none}
.co-panel.act{display:block;animation:fadeUp .18s}
.co-inp{width:100%;border:1.5px solid var(--border);outline:none;padding:10px 13px;border-radius:var(--r);font-size:13.5px;color:var(--text);transition:border .15s;margin-bottom:9px}
.co-inp:focus{border-color:var(--orange)}
.co-r{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.co-next{width:100%;background:var(--orange);color:#fff;padding:12px;border-radius:var(--r);font-weight:700;font-size:14px;border:none;cursor:pointer;transition:background .2s;margin-top:6px}
.co-next:hover{background:var(--od)}
.co-sum{background:var(--bg);border-radius:var(--r);padding:12px;margin-bottom:12px}
.co-sr{display:flex;justify-content:space-between;font-size:13px;color:var(--t2);padding:3px 0}
.co-sr.tot{font-weight:800;color:var(--text);border-top:1px solid var(--border);margin-top:6px;padding-top:6px;font-size:14px}
.popt{border:2px solid var(--border);border-radius:var(--r2);padding:12px 14px;margin-bottom:9px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:border-color .15s}
.popt:hover,.popt.sel{border-color:var(--orange)}
.popt.sel{background:var(--ol)}
.popt-ico{font-size:22px;flex-shrink:0}
.popt-t{font-size:13.5px;font-weight:700;color:var(--text)}
.popt-s{font-size:11.5px;color:var(--t4)}
.co-success{text-align:center;padding:20px}
.co-succ-ico{font-size:52px;margin-bottom:12px}
.co-succ-h{font-size:20px;font-weight:800;margin-bottom:6px;color:var(--text)}
.co-succ-p{font-size:13.5px;color:var(--t3);line-height:1.7}
.co-ref{display:inline-block;background:var(--ol);border:1px solid var(--orange);color:var(--orange);font-weight:700;padding:6px 16px;border-radius:99px;margin:10px 0;font-size:14px}
.co-done{background:var(--green);color:#fff;padding:11px 28px;border-radius:var(--r2);font-weight:700;font-size:14px;border:none;cursor:pointer;margin-top:8px}

/* ============================================================
   AUTH MODAL
   ============================================================ */
#auth-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:800;display:none;align-items:center;justify-content:center;padding:14px}
#auth-ov.show{display:flex;animation:fadeIn .18s}
.auth-modal{background:#fff;border-radius:var(--r2);max-width:400px;width:100%;animation:fadeUp .22s;box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:hidden}
.auth-top{background:var(--orange);padding:18px 22px;display:flex;align-items:center;justify-content:space-between}
.auth-top h3{font-size:17px;font-weight:700;color:#fff}
.auth-tabs{display:flex;background:#fff;border-bottom:2px solid var(--border)}
.auth-tab{flex:1;padding:13px;font-size:13.5px;font-weight:700;color:var(--t3);background:none;border:none;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .15s}
.auth-tab.act{color:var(--orange);border-bottom-color:var(--orange)}
.auth-body{padding:20px 22px}
.auth-panel{display:none}
.auth-panel.act{display:block;animation:fadeUp .18s}
.a-inp{width:100%;border:1.5px solid var(--border);outline:none;padding:11px 13px;border-radius:var(--r);font-size:13.5px;color:var(--text);transition:border .15s;margin-bottom:9px}
.a-inp:focus{border-color:var(--orange)}
.a-inp::placeholder{color:var(--t4)}
.a-sub{width:100%;background:var(--orange);color:#fff;padding:12px;border-radius:var(--r);font-weight:700;font-size:14px;border:none;cursor:pointer;transition:background .2s;margin-top:3px}
.a-sub:hover{background:var(--od)}
.a-forgot{text-align:right;margin-bottom:7px}
.a-forgot a{font-size:12px;color:var(--orange);cursor:pointer;font-weight:600}
.a-or{display:flex;align-items:center;gap:10px;margin:13px 0;font-size:12px;color:var(--t4)}
.a-or::before,.a-or::after{content:'';flex:1;height:1px;background:var(--border)}
.a-soc{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.a-sb{padding:10px;border:1.5px solid var(--border);border-radius:var(--r);background:#fff;font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--t2);transition:all .15s}
.a-sb:hover{border-color:var(--orange);color:var(--orange)}
.a-sw{text-align:center;margin-top:13px;font-size:13px;color:var(--t3)}
.a-sw span{color:var(--orange);cursor:pointer;font-weight:700}

/* ============================================================
   QUOTE MODAL
   ============================================================ */
#quote-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:800;display:none;align-items:center;justify-content:center;padding:14px}
#quote-ov.show{display:flex;animation:fadeIn .18s}
.quote-modal{background:#fff;border-radius:var(--r2);max-width:500px;width:100%;animation:fadeUp .22s;box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:hidden}
.quote-top{background:linear-gradient(135deg,var(--blue),#1a6fa0);padding:20px 22px;display:flex;align-items:center;justify-content:space-between}
.quote-top h3{font-size:17px;font-weight:700;color:#fff}
.quote-body{padding:20px 22px}
.q-inp{width:100%;border:1.5px solid var(--border);outline:none;padding:10px 13px;border-radius:var(--r);font-size:13.5px;color:var(--text);transition:border .15s;margin-bottom:9px}
.q-inp:focus{border-color:var(--blue)}
.q-inp::placeholder{color:var(--t4)}
.q-textarea{width:100%;border:1.5px solid var(--border);outline:none;padding:10px 13px;border-radius:var(--r);font-size:13.5px;color:var(--text);transition:border .15s;margin-bottom:9px;resize:vertical;min-height:90px}
.q-textarea:focus{border-color:var(--blue)}
.q-sub{width:100%;background:var(--blue);color:#fff;padding:12px;border-radius:var(--r);font-weight:700;font-size:14px;border:none;cursor:pointer;transition:background .2s}
.q-sub:hover{background:#1a6fa0}

/* ============================================================
   VENDOR REGISTER MODAL
   ============================================================ */
#vr-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:800;display:none;align-items:center;justify-content:center;padding:14px}
#vr-ov.show{display:flex;animation:fadeIn .18s}
.vr-modal{background:#fff;border-radius:var(--r2);max-width:500px;width:100%;animation:fadeUp .22s;box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:hidden;max-height:90vh;overflow-y:auto}
.vr-top{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:18px 22px;display:flex;align-items:center;justify-content:space-between}
.vr-top h3{font-size:17px;font-weight:700;color:#fff}
.vr-stats{display:flex;gap:14px;padding:14px 22px;background:var(--bg);border-bottom:1px solid var(--border)}
.vr-stat{text-align:center;flex:1}
.vr-stat-n{font-size:18px;font-weight:800;color:var(--orange)}
.vr-stat-l{font-size:11px;color:var(--t3)}
.vr-body{padding:18px 22px}
.vr-r{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.vr-inp{width:100%;border:1.5px solid var(--border);outline:none;padding:10px 13px;border-radius:var(--r);font-size:13.5px;color:var(--text);transition:border .15s;margin-bottom:9px}
.vr-inp:focus{border-color:var(--orange)}
.vr-inp::placeholder{color:var(--t4)}
.vr-full{grid-column:span 2}
.vr-sub{width:100%;background:var(--orange);color:#fff;padding:12px;border-radius:var(--r);font-weight:700;font-size:14px;border:none;cursor:pointer;transition:background .2s}
.vr-sub:hover{background:var(--od)}

/* ============================================================
   FOOTER — Fix #8 & #9: Responsive + Equal columns
   ============================================================ */
footer{background:#16213e;color:#fff}

/* Fix #8: Contact section inside footer — fully responsive */
.ft-contact{background:#1a2744;border-bottom:1px solid rgba(255,255,255,.08)}
.ft-contact-inner{
  max-width:1280px;margin:0 auto;padding:24px 16px;
  /* Fix #8: CSS Grid auto-adjusts columns */
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.fc-col{}
.fc-title{
  font-size:11.5px;font-weight:700;color:var(--orange);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;
  display:flex;align-items:center;gap:6px;
}
.fc-row{
  display:flex;align-items:flex-start;gap:7px;
  font-size:12.5px;color:rgba(255,255,255,.75);margin-bottom:7px;
  line-height:1.5;
}
.fc-row a{color:#93C5FD;transition:color .15s}
.fc-row a:hover{color:#fff}

/* Fix #9: Footer main — equal-width equal-height columns via CSS Grid */
.ft-main{
  max-width:1280px;margin:0 auto;
  padding:32px 16px 20px;
  display:grid;
  /* Fix #9: equal columns */
  grid-template-columns:2fr repeat(4,1fr);
  gap:24px;
  /* Equal height achieved by default in grid */
  align-items:start;
}
.ft-brand{}
.ft-brand-name{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:4px}
.ft-brand-name span{color:var(--orange)}
.ft-brand-tag{font-size:10px;letter-spacing:.15em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:12px}
.ft-brand-desc{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.8;margin-bottom:14px;max-width:260px}
.ft-soc{display:flex;gap:8px;flex-wrap:wrap}
.ft-sb{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;cursor:pointer;
  transition:background .15s;text-decoration:none;color:#fff;
}
.ft-sb:hover{background:var(--orange)}
.ft-col{}
.ft-col-t{
  font-size:12.5px;font-weight:700;color:#fff;
  margin-bottom:12px;letter-spacing:.04em;text-transform:uppercase;
  padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1);
}
.ft-col ul{list-style:none}
.ft-col ul li{margin-bottom:6px}
.ft-col ul li a,.ft-link{
  font-size:12.5px;color:rgba(255,255,255,.6);cursor:pointer;
  transition:color .15s;text-decoration:none;display:block;
}
.ft-col ul li a:hover,.ft-link:hover{color:#fff}

.ft-certs{
  max-width:1280px;margin:0 auto;
  padding:14px 16px 22px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.ft-cert{
  background:rgba(255,255,255,.08);border-radius:var(--r);
  padding:5px 12px;font-size:11px;font-weight:700;color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.12);
}
.ft-copy{
  max-width:1280px;margin:0 auto;
  padding:14px 16px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;
}
.ft-copy p{font-size:12px;color:rgba(255,255,255,.45)}
.ft-stats{display:flex;gap:16px;flex-wrap:wrap}
.ft-stat{font-size:11.5px;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:5px}
.ft-stat b{color:var(--orange)}

/* ============================================================
   MISC PAGES (About, Contact, FAQ, How-to, Reviews)
   ============================================================ */
#toast{
  position:fixed;bottom:22px;left:50%;
  transform:translateX(-50%) translateY(70px);
  background:var(--text);color:#fff;padding:11px 22px;
  border-radius:var(--r2);font-size:13.5px;
  display:flex;align-items:center;gap:9px;
  z-index:999;opacity:0;
  transition:all .28s cubic-bezier(.4,0,.2,1);
  box-shadow:0 8px 22px rgba(0,0,0,.24);
  white-space:nowrap;max-width:92vw;font-weight:500;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast .tk{color:var(--orange);font-size:16px}
.page-hero{background:linear-gradient(135deg,var(--orange),var(--od));color:#fff;padding:48px 0;text-align:center}
.page-hero h1{font-size:32px;font-weight:800;margin-bottom:8px}
.page-hero p{font-size:15px;opacity:.85;max-width:560px;margin:0 auto}
.page-body{max-width:1280px;margin:0 auto;padding:24px 16px}
.page-card{background:#fff;border-radius:var(--r2);padding:24px;box-shadow:var(--sh);margin-bottom:16px}
.page-card h2{font-size:18px;font-weight:800;color:var(--text);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--orange)}
.page-card h3{font-size:15px;font-weight:700;color:var(--text);margin:14px 0 6px}
.page-card p{font-size:13.5px;color:var(--t3);line-height:1.8;margin-bottom:10px}
.page-card ul{margin-left:20px;margin-bottom:10px}
.page-card ul li{font-size:13.5px;color:var(--t3);line-height:1.8;margin-bottom:4px}
/* Fix #8: Contact grid responsive */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.contact-block{background:var(--bg);border-radius:var(--r2);padding:16px;border:1px solid var(--border)}
.cb-title{font-size:13px;font-weight:700;color:var(--orange);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.cb-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2);margin-bottom:6px}
.cb-row a{color:var(--blue);font-weight:600}
.cb-row a:hover{color:var(--orange)}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cf-inp{width:100%;border:1.5px solid var(--border);outline:none;padding:10px 13px;border-radius:var(--r);font-size:13.5px;color:var(--text);transition:border .15s}
.cf-inp:focus{border-color:var(--orange)}
.cf-inp::placeholder{color:var(--t4)}
.cf-full{grid-column:span 2}
.cf-ta{min-height:110px;resize:vertical;font-family:var(--font)}
.cf-btn{background:var(--orange);color:#fff;padding:12px 28px;border-radius:var(--r);font-weight:700;font-size:14px;border:none;cursor:pointer;transition:background .2s;grid-column:span 2}
.cf-btn:hover{background:var(--od)}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t4);margin-bottom:16px}
.breadcrumb span{cursor:pointer;color:var(--orange);font-weight:600}
.breadcrumb span:hover{text-decoration:underline}
.breadcrumb i{color:var(--t4)}

/* Mini column (promo mini banner) */
.mini-col{display:flex;flex-direction:column;gap:8px;height:100%}
.mini-card{flex:1}
.mc{background:#fff;border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);cursor:pointer;transition:box-shadow .15s;padding:14px;display:flex;flex-direction:column;gap:6px}
.mc:hover{box-shadow:var(--sh2)}
.mc-t{font-size:13.5px;font-weight:700;color:var(--text)}
.mc-s{font-size:12px;color:var(--t3)}
.mc-p{font-size:15px;font-weight:800;color:var(--orange)}
.mc-img{width:100%;height:90px;overflow:hidden;border-radius:var(--r);margin-bottom:6px}
.mc-img img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Fix #8 & #9: Tablet */
@media(max-width:1100px){
  .hero-row{grid-template-columns:190px 1fr}
  .mini-col{display:none}
  .flash-grid{grid-template-columns:repeat(4,1fr)}
  .g4{grid-template-columns:repeat(3,1fr)}
  .bs-wrap{grid-template-columns:130px 1fr}
  .bs-grid{grid-template-columns:repeat(3,1fr)}
  .vendor-wrap{grid-template-columns:1fr}
  .nl-box{grid-template-columns:1fr;padding:24px}
  /* Fix #9: Tablet footer — 2+3 columns */
  .ft-main{grid-template-columns:1fr repeat(3,1fr);gap:20px}
  /* Fix #8: Contact section — 3 columns on tablet */
  .ft-contact-inner{grid-template-columns:repeat(3,1fr)}
  .trust-row{grid-template-columns:1fr 1fr}
  .promo-row{grid-template-columns:1fr 1fr}
  .reviews-grid{grid-template-columns:1fr 1fr}
}

/* Fix #8 & #9: Mobile */
@media(max-width:768px){
  .hero-row{grid-template-columns:1fr}
  .sidebar{display:none}
  .flash-grid,.g4{grid-template-columns:repeat(2,1fr)}
  .bs-wrap{grid-template-columns:1fr}
  .bs-side{display:none}
  .bs-grid{grid-template-columns:repeat(2,1fr)}
  .na-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .na-card.big{grid-column:span 2;grid-row:span 1}
  .promo-row{grid-template-columns:1fr}
  /* Product detail modal — stack on mobile */
  .pd-grid{grid-template-columns:1fr}
  .pd-left{border-radius:var(--r2) var(--r2) 0 0;border-right:none;border-bottom:1px solid var(--border);min-height:220px}
  /* Fix #8: Footer contact — 2 columns */
  .ft-contact-inner{grid-template-columns:repeat(2,1fr)}
  /* Fix #9: Footer main — 2 columns */
  .ft-main{grid-template-columns:1fr 1fr;gap:18px}
  .hico .l{display:none}
  .sell-hbtn{padding:6px 10px;font-size:11px;min-width:unset}
  .slide{grid-template-columns:1fr}
  .slide-r{height:160px}
  .reviews-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
  .cf-full,.cf-btn{grid-column:span 1}
  .co-r,.vr-r{grid-template-columns:1fr}
  .how-steps{grid-template-columns:1fr;gap:0}
  .how-step:not(:last-child)::after{content:'↓';top:unset;bottom:-1px;right:50%;font-size:18px}
}

/* Small phones */
@media(max-width:480px){
  .flash-grid{grid-template-columns:repeat(2,1fr)}
  .na-grid{grid-template-columns:1fr}
  .na-card.big{grid-column:span 1}
  .trust-row{grid-template-columns:1fr}
  .nl-box{padding:18px 14px}
  .wrap{padding:8px}
  /* Fix #8: Footer contact — single column on phones */
  .ft-contact-inner{grid-template-columns:1fr}
  /* Fix #9: Footer main — single column on phones */
  .ft-main{grid-template-columns:1fr}
  .ft-stats{gap:10px}
  .ft-copy{flex-direction:column;text-align:center}
  .how-steps{grid-template-columns:1fr}
}

/* ============================================================
   CLASS ALIASES — Bridge PHP HTML classes to CSS definitions
   Ensures every element in sparked-home.php renders correctly
   ============================================================ */

/* sec-title/see-all aliases */
.sec-title{font-size:16px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:6px}
.sec-title::after{content:'';display:block;width:36px;height:3px;background:var(--orange);border-radius:99px;margin-left:6px}
.see-all{font-size:12.5px;color:var(--orange);font-weight:600;cursor:pointer}
.see-all:hover{text-decoration:underline}

/* trust section aliases (PHP: tcard/tcard-ico/tcard-title/tcard-sub) */
.tcard{background:#fff;border-radius:var(--r2);padding:14px;box-shadow:var(--sh);display:flex;align-items:center;gap:10px}
.tcard-ico{font-size:26px;flex-shrink:0}
.tcard-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.tcard-sub{font-size:11.5px;color:var(--t3)}

/* flash section aliases (PHP uses: flash-badge, flash-hdr) */
.flash-badge{background:linear-gradient(90deg,var(--red),#c0392b);color:#fff;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.flash-hdr{display:flex;align-items:center;gap:12px;margin-bottom:10px;background:linear-gradient(90deg,#fff5f5,#fff);border-radius:var(--r2);padding:10px 16px;box-shadow:var(--sh);border-left:4px solid var(--red)}
.cd{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.cdb{background:var(--text);border-radius:var(--r);padding:4px 8px;min-width:34px;text-align:center;color:#fff}
.cdn{font-size:15px;font-weight:800}
.cdl{font-size:9px;color:rgba(255,255,255,.7);font-weight:600}
.cdsep{color:var(--text);font-weight:800;font-size:14px}

/* Slider arrow aliases (PHP: sarr, sprev, snext) */
.sarr{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.8);border:none;cursor:pointer;font-size:18px;font-weight:700;color:var(--text);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:5;transition:background .15s;box-shadow:var(--sh)}
.sprev{left:8px}
.snext{right:8px}
.sarr:hover{background:#fff}

/* Category pills row alias (PHP: pills-row → CSS: cat-pills) */
.pills-row{display:flex;gap:10px;padding:4px 0 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pills-row::-webkit-scrollbar{display:none}
.cat-strip{margin-bottom:14px;background:#fff;border-radius:var(--r2);padding:14px 16px;box-shadow:var(--sh);overflow:hidden}

/* mini-card aliases (PHP: mc-title, mc-sub, mc-cta, mc-ico) */
.mini-card{background:#fff;border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);cursor:pointer;transition:box-shadow .15s;padding:14px;display:flex;flex-direction:column;gap:5px}
.mini-card:hover{box-shadow:var(--sh2)}
.mc-ico{font-size:26px}
.mc-title{font-size:13.5px;font-weight:700;color:var(--text)}
.mc-sub{font-size:12px;color:var(--t3)}
.mc-cta{font-size:12px;font-weight:700;color:var(--orange)}

/* footer aliases (PHP: ft-logo, ft-tag, ft-desc) */
.ft-logo{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:4px;color:#fff}
.ft-logo span{color:var(--orange)}
.ft-tag{font-size:10px;letter-spacing:.15em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:12px}
.ft-desc{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.8;margin-bottom:14px;max-width:260px}
.ft-top{max-width:1280px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.08)}
.ft-top span{font-size:12px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:6px}

/* newsletter aliases (PHP: nl-h, nl-r, nl-sub) */
.nl-h{font-size:20px;font-weight:800;color:#fff;margin-bottom:6px}
.nl-r{display:flex;flex-direction:column;gap:8px}

/* vendor section aliases (PHP: vp-ico, vp-title, vp-sub, vp-perks, vp-perk, vp-btn) */
.vp-ico{font-size:36px;margin-bottom:8px}
.vp-title{font-size:20px;font-weight:800;color:#fff;margin-bottom:6px}
.vp-sub{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:12px;line-height:1.6}
.vp-perks{margin-bottom:14px;display:flex;flex-direction:column;gap:5px}
.vp-perk{font-size:12.5px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:6px}
.vp-perk::before{content:'✓';color:var(--orange);font-weight:700}
.vpromo{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:var(--r2);padding:24px;color:#fff;display:flex;flex-direction:column;justify-content:center}

/* sbox alias (PHP uses sbox for section containers) */
.sbox{background:#fff;border-radius:var(--r2);padding:16px;box-shadow:var(--sh);margin-bottom:14px}

/* contact section alias */
.ft-contact-inner a{color:#93C5FD;transition:color .15s;text-decoration:none}
.ft-contact-inner a:hover{color:#fff}

/* Vendor section PHP wrapper */
.vendor-wrap .v-cards,.v-cards{display:flex;flex-direction:column;gap:8px;justify-content:center}

/* Promo row sections used in PHP */
.promo-row .pb-cta{font-size:12.5px;font-weight:700;cursor:pointer}

/* Page section aliases */
#page-about .page-hero,#page-contact .page-hero,#page-faq .page-hero,
#page-how-to-order .page-hero,#page-reviews .page-hero{display:block}

/* Auth/checkout sub-elements */
.co-panel{display:none}
.co-panel.act,.cop1:not([style*="none"]),.cop2:not([style*="none"]),.cop3:not([style*="none"]){display:block}

/* Flash section header fix for PHP structure */
.flash-sec .sec-title{font-size:15px}

/* ============================================================
   FINAL MISSING CLASSES (from PHP audit)
   ============================================================ */

/* Checkout — payment options wrapper */
.pay-opts{display:flex;flex-direction:column;gap:0;margin-bottom:4px}

/* Checkout — order summary box (alias for co-sum) */
.co-sum-box{background:var(--bg);border-radius:var(--r);padding:12px;margin-bottom:12px}
.co-sum-box .co-sr{display:flex;justify-content:space-between;font-size:13px;color:var(--t2);padding:3px 0}
.co-sum-box .co-sr.tot{font-weight:800;color:var(--text);border-top:1px solid var(--border);margin-top:6px;padding-top:6px;font-size:14px}

/* Reviews section wrapper */
.reviews-sec{margin-bottom:14px;background:#fff;border-radius:var(--r2);padding:16px;box-shadow:var(--sh)}
.reviews-sec .sec-hdr{margin-bottom:12px}

/* ============================================================
   BRAND LOGOS SLIDER — Full CSS (was missing from server)
   ============================================================ */
.brands-slider-section {
  background: #fff;
  border-radius: var(--r2);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--sh);
  overflow: hidden;
}
.brands-track-wrap {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.brands-track-wrap::before,
.brands-track-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 50px;
  z-index: 2;
  pointer-events: none;
}
.brands-track-wrap::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.brands-track-wrap::after  { right: 0; background: linear-gradient(to left,  #fff, transparent); }

/* THE KEY FIX: flex row, max-content width, animation */
.brands-track {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: center !important;
  width: max-content !important;
  animation: brandsSlide 30s linear infinite;
}
.brands-track:hover { animation-play-state: paused; }

@keyframes brandsSlide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Each brand item — fixed width, never stretches */
.brand-logo-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}

/* Brand box — fixed size */
.brand-logo-box {
  width: 72px !important;
  height: 52px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Arial, sans-serif !important;
  text-align: center !important;
  padding: 4px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  line-height: 1.2 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.brand-logo-name {
  font-size: 10px !important;
  color: var(--t3) !important;
  font-weight: 600 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  max-width: 80px !important;
}

/* ============================================================
   CERT CARDS — polished equal-height grid
   ============================================================ */
.certs-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin-top: 14px !important;
  align-items: stretch !important;
}
.cert-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 22px 14px !important;
  min-height: 180px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  text-align: center !important;
  text-decoration: none !important;
  color: inherit !important;
  background: #fff !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color .18s, box-shadow .18s, transform .18s !important;
}
.cert-card:hover {
  border-color: var(--orange) !important;
  box-shadow: 0 6px 20px rgba(249,115,22,.12) !important;
  transform: translateY(-3px) !important;
}
.cert-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 3px !important;
  background: var(--orange) !important;
  border-radius: 12px 12px 0 0 !important;
}
.cert-ico  { font-size: 34px !important; line-height: 1 !important; display: block !important; }
.cert-name { font-size: 13.5px !important; font-weight: 800 !important; color: var(--text) !important; margin: 0 !important; }
.cert-sub  { font-size: 11px !important; color: var(--t3) !important; line-height: 1.55 !important; margin: 0 !important; }
.cert-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #d1fae5 !important;
  color: #065f46 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  min-width: 70px !important;
  margin-top: auto !important;
}
.cert-dl { font-size: 11.5px !important; font-weight: 700 !important; color: var(--orange) !important; text-decoration: none !important; }
.cert-dl:hover { text-decoration: underline !important; }

/* ── NAV ANCHOR LINKS ── */
.nav-inner a.nl { display:inline-flex; align-items:center; padding:8px 12px; font-size:13px; font-weight:600; color:var(--t2); white-space:nowrap; border-bottom:2px solid transparent; text-decoration:none; transition:color .15s,border-color .15s; }
.nav-inner a.nl:hover, .nav-inner a.nl.act { color:var(--orange); border-bottom-color:var(--orange); }
.nav-drop-menu a.ndm-item { display:block; padding:9px 14px; font-size:13px; color:var(--t2); text-decoration:none; }
.nav-drop-menu a.ndm-item:hover { background:var(--ol); color:var(--orange); }
a.hico { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:4px 8px; border-radius:6px; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; min-width:48px; height:44px; text-decoration:none; }
a.hico:hover { background:rgba(255,255,255,.22); }
a.sell-hbtn { display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--orange); border:2px solid rgba(255,255,255,.8); border-radius:8px; padding:7px 14px; font-size:12.5px; font-weight:800; text-decoration:none; white-space:nowrap; }
a.sell-hbtn:hover { background:var(--orange); color:#fff; border-color:var(--orange); }

/* ── HIDE FLATSOME TITLE ── */
h1.site-title,.site-title,.site-name,.header-logo-title,h1.page-title,.page-header,.page-title-wrap,.entry-header h1 { display:none!important; }
body.page-template-sparked-home #header, body.page-template-sparked-home .header-bg-container, body.page-template-sparked-home #footer, body.page-template-sparked-home .header-main { display:none!important; }

@media(max-width:900px){ .certs-grid,.brands-slider-section .certs-grid { grid-template-columns:repeat(2,1fr)!important; } }
@media(max-width:480px){ .certs-grid { grid-template-columns:1fr 1fr!important; } }