/* ============================================================
   SIX STAR SUPPLIERS — theme.css
   Jumia-structure homepage, Six Star brand palette.
   ============================================================ */

:root{
  --ink:#15161A;
  --ink-soft:#6B6D78;
  --ink-faint:#9A9CA6;

  --bg-page:#F3F4F8;
  --surface:#FFFFFF;
  --line:#E7E8EE;
  --line-soft:#F0F1F5;

  --brand:#FF5A1F;
  --brand-dark:#E04600;
  --sun:#FFC93C;
  --pop:#7C3AED;
  --price:#12A150;
  --danger:#E23744;

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;

  --shadow-soft:0 8px 24px rgba(21,22,26,.07);
  --shadow-pop:0 16px 34px rgba(255,90,31,.22);
  --shadow-card-hover:0 14px 28px rgba(21,22,26,.12);

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'Space Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-body); background:var(--bg-page); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--sun); color:var(--ink); }
:focus-visible{ outline:2.5px solid var(--pop); outline-offset:2px; border-radius:4px; }

/* ================= LAYOUT UTILITIES ================= */
.wrap{ width:100%; margin:0 auto; padding:0 0px; }
.block{ padding: 0; width:100%; margin:0 auto; }
.block--banner{ padding:20px 240px; }
.block.tint{ background:var(--surface); }

.see-all{ font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; gap:5px; }

/* ================= BUTTONS ================= */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 24px; border-radius:30px; font-weight:700; font-size:14.5px; border:none; cursor:pointer; transition:.22s ease; text-align:center; }
.btn-primary{ background:linear-gradient(90deg,var(--brand),var(--brand-dark)); color:#fff; box-shadow:var(--shadow-pop); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 40px rgba(255,90,31,.32); }
.btn-outline{ background:transparent; border:1.5px solid var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:#fff; }
.btn-sm{ padding:9px 16px; font-size:12.5px; }

/* ================= LOADER ================= */
#pageLoader{ position:fixed; inset:0; z-index:999999; background:var(--bg-page); display:flex; align-items:center; justify-content:center; gap:10px; transition:opacity .3s ease, visibility .3s ease; }
#pageLoader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
#pageLoader .dot{ width:13px; height:13px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--sun)); animation:ssBounce .6s infinite ease-in-out; }
#pageLoader .dot:nth-child(2){ animation-delay:.15s; }
#pageLoader .dot:nth-child(3){ animation-delay:.3s; }
@keyframes ssBounce{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.7); } }

/* ================= HEADER ================= */
.site-header{ position:sticky; top:0; z-index:9998; background:var(--surface); border-bottom:1px solid var(--line); }

/* thin top utility bar, like Jumia's "Sell on Jumia | Pay | Delivery" strip */
.top-bar{ background:var(--bg-page); border-bottom:1px solid var(--line); display:none; }
@media(min-width:860px){ .top-bar{ display:block; } }
.top-bar__row{ max-width:1240px; margin:0 auto; padding:7px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.top-bar a{ font-size:11.5px; font-weight:700; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; }
.top-bar a:hover{ color:var(--brand); }
.top-bar__sell{ color:var(--brand) !important; }
.top-bar__links{ display:flex; gap:22px; }

.ticker{ background:var(--ink); color:#fff; overflow:hidden; white-space:nowrap; }
.ticker__track{ display:inline-flex; gap:42px; padding:6px 0; animation:ssTicker 24s linear infinite; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.ticker__track span{ display:inline-flex; align-items:center; gap:7px; color:white; }
.ticker__track span i{ color:#ffa17c; }
@keyframes ssTicker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }

.header-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; max-width:1240px; margin:0 auto; flex-wrap:wrap; }
.iconbtn{ width:42px; height:42px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font-size:17px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; position:relative; transition:.2s ease; }
.iconbtn:hover{ border-color:var(--brand); color:var(--brand); }
.nav-toggle{ display:flex; }

/* ================= HAMBURGER MENU — animated, brand-aware ================= */
.hamburger-btn{
  width:42px;
  height:42px;
  border-radius:13px;
  border:1.5px solid var(--line);
  background:var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:border-color .28s ease, box-shadow .28s ease, transform .18s ease;
}

/* soft brand-fill that grows in on hover/active instead of a flat color swap */
.hamburger-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  opacity:0;
  transform:scale(.4);
  transition:opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.hamburger-btn:hover{ border-color:var(--brand); box-shadow:0 6px 16px rgba(255,90,31,.18); }
.hamburger-btn:hover::before{ opacity:.08; transform:scale(1); }
.hamburger-btn:active{ transform:scale(.9); }

.hamburger-btn.active{ border-color:transparent; box-shadow:var(--shadow-pop); }
.hamburger-btn.active::before{ opacity:1; transform:scale(1); }

.hamburger-icon{ position:relative; width:19px; height:14px; flex-shrink:0; z-index:1; }
.hamburger-icon span{
  position:absolute;
  left:0;
  width:100%;
  height:2.4px;
  border-radius:3px;
  background:var(--ink);
  transition:all .32s cubic-bezier(.4,0,.2,1);
}
.hamburger-icon span:nth-child(1){ top:0; }
.hamburger-icon span:nth-child(2){ top:50%; transform:translateY(-50%); }
.hamburger-icon span:nth-child(3){ bottom:0; }

/* hover: top/bottom bars taper in, middle stays full — subtle "arrow" motion */
.hamburger-btn:hover .hamburger-icon span{ background:var(--brand); }
.hamburger-btn:hover .hamburger-icon span:nth-child(1),
.hamburger-btn:hover .hamburger-icon span:nth-child(3){ width:65%; }

/* open state: morphs into a clean X, bars turn white against the filled button */
.hamburger-btn.active .hamburger-icon span{ background:#fff; width:100%; }
.hamburger-btn.active .hamburger-icon span:nth-child(1){
  top:50%; transform:translateY(-50%) rotate(45deg);
}
.hamburger-btn.active .hamburger-icon span:nth-child(2){
  opacity:0; transform:translateY(-50%) scale(0);
}
.hamburger-btn.active .hamburger-icon span:nth-child(3){
  bottom:50%; transform:translateY(50%) rotate(-45deg);
}

@media(min-width:860px){ .nav-toggle{ display:none; } }

.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{ width:44px; height:44px; border-radius:12px; overflow:hidden; flex-shrink:0; border:2px solid var(--brand); background:var(--surface); display:flex; align-items:center; justify-content:center; }
.brand-mark img{ width:100%; height:100%; object-fit:cover; }
.brand-name{ font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--ink); line-height:1.15; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 5px; white-space:nowrap; }
.brand-name__line1, .brand-name__line2{ display:inline; }
.brand-tag{ font-size:9px; letter-spacing:1.8px; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }

.header-actions{ display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; }
.action-link{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 10px; border-radius:var(--radius-sm); color:var(--ink-soft); font-size:10.5px; font-weight:700; border:none; background:none; cursor:pointer; position:relative; transition:.2s ease; }
.action-link i{ font-size:18px; color:var(--ink); }
.action-link:hover{ background:var(--bg-page); color:var(--brand); }
.action-link:hover i{ color:var(--brand); }
.action-link .cart-count{ position:absolute; top:0; right:4px; }

.cart-count{ min-width:17px; height:17px; padding:0 4px; background:var(--brand); color:#fff; font-size:9.5px; font-weight:800; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--surface); }

.search-bar{ position:relative; order:5; flex:1 1 100%; }
@media(min-width:860px){ .search-bar{ order:0; flex:1 1 auto; max-width:600px; } }
.search-bar form{ display:flex; align-items:center; background:var(--bg-page); border-radius:30px; border:1.5px solid var(--line); overflow:hidden; }
.search-bar input{ flex:1; border:none; background:transparent; padding:12px 18px; font-size:14px; color:var(--ink); outline:none; font-family:var(--font-body); }
.search-bar button{ width:48px; height:44px; border:none; cursor:pointer; flex-shrink:0; margin:2px; background:linear-gradient(90deg,var(--brand),var(--brand-dark)); color:#fff; border-radius:26px; display:flex; align-items:center; justify-content:center; }

.search-suggestions{ display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--line); box-shadow:var(--shadow-card-hover); z-index:999999; overflow:hidden; max-height:420px; overflow-y:auto; }
.sug-header-bar{ display:flex; justify-content:space-between; align-items:center; padding:10px 16px 8px; border-bottom:1px solid var(--line-soft); }
.sug-header-bar span{ font-size:10px; font-weight:700; color:var(--ink-faint); letter-spacing:1px; text-transform:uppercase; }
.sug-header-bar button{ font-size:11px; color:var(--brand); font-weight:700; border:none; background:none; cursor:pointer; }
.sug-item{ display:flex; align-items:center; gap:11px; padding:9px 16px; cursor:pointer; border-bottom:1px solid var(--line-soft); transition:background .15s; }
.sug-item:last-of-type{ border-bottom:none; }
.sug-item:hover{ background:#FFF6EF; }
.sug-thumb{ width:46px; height:46px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--bg-page); border:1px solid var(--line); }
.sug-info{ flex:1; min-width:0; }
.sug-name{ font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 0 3px; }
.sug-name em{ color:var(--brand); font-style:normal; }
.sug-meta{ display:flex; align-items:center; gap:6px; }
.sug-price{ font-family:var(--font-mono); font-size:12.5px; font-weight:800; color:var(--price); }
.sug-badge{ font-size:10px; background:#FFF3EA; color:var(--brand-dark); padding:1px 7px; border-radius:20px; font-weight:700; }
.sug-badge--hot{ background:#FFE9E9; color:var(--danger); }
.sug-chevron{ color:var(--line); font-size:13px; flex-shrink:0; }
.sug-footer-row{ display:flex; align-items:center; gap:8px; padding:11px 16px; background:var(--bg-page); cursor:pointer; }
.sug-footer-row:hover{ background:#FFF3EA; }
.sug-footer-row span{ font-size:12.5px; color:var(--brand); font-weight:700; }
.sug-empty{ padding:26px 16px; text-align:center; color:var(--ink-faint); font-size:13px; }
.sug-empty strong{ display:block; font-size:14px; color:var(--ink-soft); margin-bottom:4px; }

.main-nav{ display:none; }

/* ---- mobile drawer ---- */
.drawer-overlay{ position:fixed; inset:0; background:rgba(21,22,26,.5); backdrop-filter:blur(4px); z-index:99998; opacity:0; visibility:hidden; transition:.3s ease; }
.drawer-overlay.active{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; left:0; width:290px; height:100vh; background:var(--ink); z-index:99999; transform:translateX(-100%); transition:transform .4s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column; overflow-y:auto; box-shadow:10px 0 40px rgba(0,0,0,.4); }
.drawer.active{ transform:translateX(0); }
.drawer-close{ align-self:flex-end; margin:14px 16px 0; width:34px; height:34px; border:none; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; font-size:20px; cursor:pointer; }
.drawer-links{ padding:10px 0 30px; display:flex; flex-direction:column; }
.drawer-links a{ display:flex; align-items:center; gap:14px; padding:15px 26px; color:#F0F0F2; font-weight:600; border-left:3px solid transparent; transition:.2s ease; }
.drawer-links a i{ width:20px; color:var(--sun); }
.drawer-links a:hover{ background:rgba(255,255,255,.06); border-left-color:var(--brand); padding-left:32px; }

/* ================= HOME TOP ZONE: sidebar + hero + promo column ================= */
.home-top{ max-width:1240px; margin:16px auto 0; padding:0 16px; display:flex; flex-direction:column; gap:14px; }
@media(min-width:1000px){ .home-top{ display:grid; grid-template-columns:250px 1fr 220px; align-items:stretch; gap:16px; } }

/* ---- category sidebar (mega menu) ---- */
.mega-menu{ display:none; position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:visible; }
@media(min-width:1000px){ .mega-menu{ display:block; } }
.mega-menu__sidebar{ padding:8px 0; height:100%; }
.mega-menu__item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 16px; font-size:12.5px; font-weight:600; color:var(--ink-soft); border-left:3px solid transparent; transition:.15s ease; cursor:default; }
.mega-menu__item i.fa-chevron-right{ font-size:10px; color:var(--ink-faint); }
.mega-menu__item:hover, .mega-menu__item.active{ background:var(--bg-page); color:var(--brand); border-left-color:var(--brand); }
.mega-menu__item:hover i, .mega-menu__item.active i{ color:var(--brand); }

.mega-menu__panel{ position:absolute; left:100%; top:0; width:min(640px,60vw); min-height:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card-hover); margin-left:10px; z-index:40; opacity:0; visibility:hidden; transform:translateX(-6px); transition:.18s ease; }
.mega-menu__sidebar:hover ~ .mega-menu__panel, .mega-menu__panel:hover{ opacity:1; visibility:visible; transform:translateX(0); }
.mega-menu__panel-content{ display:none; padding:24px; }
.mega-menu__panel-content.active{ display:block; }
.mega-menu__cols{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:22px 20px; }
.mega-menu__col-head{ display:block; font-size:13px; font-weight:800; color:var(--ink); margin-bottom:10px; padding-bottom:8px; border-bottom:2px solid var(--line-soft); }
.mega-menu__col ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.mega-menu__col a{ font-size:12.5px; color:var(--ink-soft); transition:.15s ease; }
.mega-menu__col a:hover{ color:var(--brand); padding-left:3px; }
.mega-menu__empty{ display:flex; align-items:center; justify-content:center; height:100%; padding:30px; }

/* ---- hero banner slot (center) ---- */
.hero-banner-wrap{ min-height:260px; }
.hero-banner-wrap .ad-slot{ height:100%; min-height:260px; }

/* ---- promo tile column (right) ---- */
.promo-stack{ display:none; flex-direction:column; gap:12px; }
@media(min-width:1000px){ .promo-stack{ display:flex; } }
.promo-card{ flex:1; display:flex; align-items:center; gap:12px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); transition:.2s ease; }
.promo-card:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.promo-card__ico{ width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; }
.promo-card--wa .promo-card__ico{ background:linear-gradient(135deg,#25D366,#1EBE5D); }
.promo-card--sell .promo-card__ico{ background:linear-gradient(135deg,var(--pop),#5b21b6); }
.promo-card--track .promo-card__ico{ background:linear-gradient(135deg,var(--brand),var(--brand-dark)); }
.promo-card__title{ font-size:12.5px; font-weight:800; color:var(--ink); }
.promo-card__sub{ font-size:11px; color:var(--ink-faint); }

/* ================= AD SLOT (rotating carousel) ================= */
.ad-slot{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-soft); aspect-ratio:var(--ad-aspect, 16/6); }
.ad-slot__track{ position:relative; width:100%; height:100%; }
.ad-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; display:block; }
.ad-slide.active{ opacity:1; z-index:1; }
.ad-slide img{ width:100%; height:100%; object-fit:cover; }
.ad-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; background:rgba(21,22,26,.5); color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px); transition:.2s ease; opacity:0; }
.ad-slot:hover .ad-nav{ opacity:1; }
.ad-nav:hover{ background:var(--brand); }
.ad-nav--prev{ left:12px; }
.ad-nav--next{ right:12px; }
.ad-slot__dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:5; }
.ad-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:.25s ease; }
.ad-dot.active{ width:20px; border-radius:5px; background:var(--sun); }

/* ================= CATEGORY TILES (shop by category grid) =================
   Flat, borderless square tiles in a fixed-column grid that wraps to a
   new row when there are more categories than fit — matching the
   reference layout (uniform pastel squares, icon/image centered,
   label below, no shadows or cards). */
.cat-section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.cat-section-head h2{ font-family:var(--font-display); font-size:19px; font-weight:600; }
.cat-section-head .see-all{ color:var(--brand); background:rgba(255,90,31,.08); border:1px solid rgba(255,90,31,.2); padding:7px 14px; border-radius:30px; }
.cat-section-head .see-all:hover{ background:var(--brand); color:#fff; }

.cat-scroll{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px 10px;
}
@media(min-width:560px){ .cat-scroll{ grid-template-columns:repeat(4,1fr); gap:16px 14px; } }
@media(min-width:860px){ .cat-scroll{ grid-template-columns:repeat(5,1fr); } }
@media(min-width:1140px){ .cat-scroll{ grid-template-columns:repeat(6,1fr); gap:20px 18px; } }

.cat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}
.cat-thumb{
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--bg-page);
  border:none;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease, background .18s ease;
}
.cat-thumb img{ width:100%; height:100%; object-fit:cover; }
.cat-item:hover .cat-thumb{ transform:translateY(-3px); }
.cat-item span{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
  line-height:1.3;
  max-width:120px;
}
.cat-item:hover span{ color:var(--brand); }

/* soft pastel rotation, matching the flat-tile look in the reference */
.cat-item:nth-child(6n+1) .cat-thumb{ background:#EDEEF2; }
.cat-item:nth-child(6n+2) .cat-thumb{ background:#F1EAFB; }
.cat-item:nth-child(6n+3) .cat-thumb{ background:#E8F3EC; }
.cat-item:nth-child(6n+4) .cat-thumb{ background:#FBEFE6; }
.cat-item:nth-child(6n+5) .cat-thumb{ background:#FCE9EE; }
.cat-item:nth-child(6n+6) .cat-thumb{ background:#E7EFFB; }

/* ================= PRODUCT RAIL CARD (white card housing a coloured header bar + products) ================= */
.rail{ background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--line); overflow:hidden; width:100%; }

.sec-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:0px; padding:15px 18px; flex-wrap:wrap; background:var(--surface); color:var(--ink); border-bottom:1px solid var(--line); }
.sec-head h2{ font-size:15.5px; font-weight:800; display:flex; align-items:center; gap:10px; }
.sec-head .see-all{ font-weight:800; color:var(--brand); }

/* red flash-sale bar with countdown, like Jumia's "Flash Sales | Live Now" */
.sec-head--hot{ background:linear-gradient(90deg,var(--danger),#c22530); color:#fff; border-bottom:none; }
.sec-head--hot .see-all{ color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); padding:6px 13px; border-radius:20px; }
.sec-head--hot .see-all:hover{ background:#fff; color:var(--danger); }
.sec-head--hot h2 i{ color:var(--sun); }
.deal-timer{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.5px; background:rgba(0,0,0,.2); padding:5px 12px; border-radius:20px; display:flex; align-items:center; gap:6px; }

/* green bar, like Jumia's "These come with free gifts" */
.sec-head--new{ background:linear-gradient(90deg,var(--price),#0e8a43); color:#fff; border-bottom:none; }
.sec-head--new .see-all{ color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); padding:6px 13px; border-radius:20px; }
.sec-head--new .see-all:hover{ background:#fff; color:var(--price); }

/* purple/gold bar for the Top Selling rail — high-stock movers */
.sec-head--topselling{ background:linear-gradient(90deg,var(--pop),#5b21b6); color:#fff; border-bottom:none; }
.sec-head--topselling .see-all{ color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); padding:6px 13px; border-radius:20px; }
.sec-head--topselling .see-all:hover{ background:#fff; color:var(--pop); }
.sec-head--topselling h2 i{ color:var(--sun); }

/* gray bar, like Jumia's "TV Deals" */
.sec-head--catalog{ background:#EEF0F4; color:var(--ink); border-bottom:none; }
.sec-head--catalog .see-all{ color:var(--ink); background:#fff; border:1px solid var(--line); padding:6px 13px; border-radius:20px; }
.sec-head--catalog .see-all:hover{ background:var(--ink); color:#fff; }

.badge-ico{ display:none; }

/* ================= PRODUCT RAILS / GRID ================= */
.p-scroll{ display:flex; gap:1px; background:var(--line-soft); overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.p-scroll::-webkit-scrollbar{ display:none; }
.p-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); }
@media(min-width:560px){ .p-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:860px){ .p-grid{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:1140px){ .p-grid{ grid-template-columns:repeat(6,1fr); } }

/* ---- product card ---- */
.p-card{ position:relative; flex:0 0 168px; background:var(--surface); overflow:hidden; display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease; }
.p-scroll .p-card{ scroll-snap-align:start; }
.p-grid .p-card{ flex:none; width:100%; }
.p-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-hover); position:relative; z-index:2; }

.p-card__badges{ position:absolute; top:9px; left:9px; right:9px; z-index:3; display:flex; justify-content:space-between; align-items:flex-start; }
.p-card__discount{ background:var(--brand); color:#fff; font-family:var(--font-mono); font-size:11px; font-weight:700; padding:3px 8px; border-radius:5px; box-shadow:0 3px 8px rgba(255,90,31,.35); }
.p-card__hot{ margin-left:auto; background:var(--ink); color:var(--sun); font-size:10px; font-weight:800; padding:4px 9px; border-radius:20px; display:flex; align-items:center; gap:4px; }

.p-card__img{ background:var(--surface); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.p-card__img img{ width:100%; height:100%; object-fit:contain; padding:20px; cursor:pointer; transition:transform .3s ease; }
.p-card:hover .p-card__img img{ transform:scale(1.06); }

.p-card__body{ padding:10px 12px 14px; display:flex; flex-direction:column; gap:5px; flex:1; }
.p-card__name{ font-size:12.5px; font-weight:500; color:var(--ink); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:34px; }
.p-card__rating{ font-size:11px; color:var(--sun); display:flex; align-items:center; gap:4px; font-weight:700; }
.p-card__rating span{ color:var(--ink-faint); font-weight:600; }
.p-card__old{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); text-decoration:line-through; }
.p-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.price-tag{ font-family:var(--font-mono); font-size:14.5px; font-weight:800; color:var(--ink); }
.p-card__add{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); cursor:pointer; flex-shrink:0; background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center; transition:.2s ease; }
.p-card__add:hover{ background:var(--brand); border-color:var(--brand); color:#fff; transform:scale(1.08); }

/* skeleton loading */
.skel, .skeleton-card{ height:236px; flex:0 0 168px; background:linear-gradient(100deg, var(--line-soft) 30%, #fff 50%, var(--line-soft) 70%); background-size:200% 100%; animation:ssShimmer 1.3s ease-in-out infinite; }
@keyframes ssShimmer{ 0%{ background-position:150% 0; } 100%{ background-position:-50% 0; } }

.form-hint{ color:var(--ink-faint); font-size:13px; padding:20px 16px; }

/* ================= TRUST ROW ================= */
.trust-row{ display:flex; flex-wrap:wrap; gap:14px 30px; padding:6px 0; }
.trust-row div{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--ink-soft); }
.trust-row i{ width:34px; height:34px; border-radius:10px; background:var(--surface); border:1px solid var(--line); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }

/* ================= FOOTER ================= */
.site-footer{ background:var(--ink); color:#C9C9CE; margin-top:20px; }
.footer-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:32px; padding:44px 16px 30px; }
@media(min-width:720px){ .footer-grid{ grid-template-columns:repeat(4,1fr); } }
.footer-grid h4{ font-family:var(--font-display); color:var(--sun); font-size:14.5px; margin-bottom:14px; font-weight:600; }
.footer-grid a{ display:block; margin:9px 0; color:#B8B9C0; font-size:13px; transition:.2s ease; }
.footer-grid a:hover{ color:#fff; transform:translateX(3px); }
.footer-social{ display:flex; gap:8px; margin-top:12px; }
.footer-social a{ margin:0; width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; transition:.2s ease; }
.footer-social a:hover{ background:var(--brand); transform:translateY(-2px); }
.footer-bottom{ text-align:center; padding:16px; font-size:12px; color:var(--ink-faint); border-top:1px solid rgba(255,255,255,.08); }

/* ================= FLOATING WHATSAPP + TOAST ================= */
.wa-float{ position:fixed; right:18px; bottom:24px; z-index:9999; width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,#25D366,#1EBE5D); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 12px 26px rgba(37,211,102,.4); transition:.25s ease; }
.wa-float:hover{ transform:translateY(-3px) scale(1.06); }

#toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:13px 22px; border-radius:30px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:10px; z-index:999999; opacity:0; pointer-events:none; transition:.3s ease; box-shadow:0 14px 30px rgba(0,0,0,.3); }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#toast i{ color:var(--sun); }

/* ============================================================
   PHONE REFINEMENTS — tightens spacing & polishes visuals so the
   layout reads like a native shopping app on real phone widths
   (matches the reference screenshots: compact header, icon-only
   account/cart, 4-across category tiles, snug deal rails).
   ============================================================ */
@media(max-width:599px){

  .wrap{ padding:0 14px; }
  .block{ padding:18px 0; }

  /* ---- compact header ---- */
  .header-row{ padding:10px 14px; gap:10px; }
  .brand-mark{ width:36px; height:36px; border-radius:10px; border-width:1.5px; }
  .brand-name{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    font-size:14.5px;
    line-height:1.2;
    white-space:normal;
  }
  .brand-name__line1{ font-weight:700; }
  .brand-name__line2{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.7px;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .brand-tag{ display:none; }
  .iconbtn{ width:38px; height:38px; font-size:15px; }


.hamburger-btn{ width:38px; height:38px; border-radius:11px; }
  .hamburger-icon{ width:17px; height:13px; }


  .header-actions{ gap:2px; }
  .action-link{ padding:4px 8px; }
  .action-link span:not(.cart-count){ display:none; } /* icon-only, like the app header */
  .action-link i{ font-size:19px; }
  .search-bar{ margin-top:2px; }
  .search-bar input{ padding:11px 16px; font-size:13.5px; }
  .search-bar button{ width:44px; height:40px; }

  /* ---- hero banner: shorter, phone-proportioned ---- */
  .home-top{ margin-top:12px; gap:12px; }
  .hero-banner-wrap{ min-height:170px; }
  .hero-banner-wrap .ad-slot{ min-height:170px; }
  .ad-slot{ --ad-aspect:16/9; border-radius:var(--radius-md); }
  .ad-slot__dots{ bottom:9px; }

  /* ---- category grid: crisp 4-up tiles, square-edged on phone ---- */
  .cat-section-head{ margin-bottom:12px; }
  .cat-section-head h2{ font-size:16.5px; }
  .cat-section-head .see-all{ padding:6px 11px; font-size:11.5px; }
  .cat-scroll{ gap:10px 8px; }
  .cat-thumb{ border-radius:0; box-shadow:none; }
  .cat-item span{ font-size:11px; max-width:100%; }

  /* ---- deal rail / product section: edge-to-edge, no rounded card ---- */
  .rail{ border-radius:0; border-left:none; border-right:none; box-shadow:none; }
  .sec-head{ padding:13px 14px; gap:8px; }
  .sec-head h2{ font-size:14px; gap:7px; }
  .sec-head h2 i{ font-size:13px; }
  .deal-timer{ font-size:10.5px; padding:4px 9px; }
  .sec-head .see-all{ font-size:11.5px; }

  /* ---- product cards: bigger, breathing room, app-style peek-scroll ---- */
  .p-scroll{ padding:4px 4px 8px; gap:10px; background:transparent; }
  .p-grid{ gap:10px; background:transparent; padding:2px; }
  .p-card{
    flex-basis:172px;
    border:1px solid var(--line-soft);
    box-shadow:0 3px 10px rgba(21,22,26,.05);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .p-card:active{ transform:scale(.97); }
  .p-card__img{ aspect-ratio:1/1; background:linear-gradient(180deg,#FAFAFC,#F3F4F8); }
  .p-card__img img{ padding:18px; }
  .p-card__body{ padding:12px 13px 15px; gap:7px; }
  .p-card__name{ font-size:13px; min-height:35px; line-height:1.4; }
  .p-card__rating{ font-size:11.5px; }
  .price-tag{ font-size:15.5px; font-weight:800; }
  .p-card__old{ font-size:11px; }
  .p-card__add{ width:32px; height:32px; box-shadow:0 2px 6px rgba(21,22,26,.08); }
  .p-card__discount{ font-size:11px; padding:4px 9px; }
  .p-card__hot{ font-size:10px; padding:4px 10px; }

  /* ---- trust row: stack to two columns, icon-led ---- */
  .trust-row{ gap:12px 18px; justify-content:flex-start !important; }
  .trust-row div{ font-size:12px; flex:1 1 44%; }

  /* ---- footer: single column, breathable ---- */
  .footer-grid{ grid-template-columns:1fr 1fr; gap:26px 18px; padding:34px 14px 22px; }
  .footer-grid h4{ font-size:13.5px; margin-bottom:11px; }
  .footer-grid a{ font-size:12.5px; margin:7px 0; }

  .wa-float{ width:50px; height:50px; font-size:22px; right:14px; bottom:18px; }
}

/* ---- extra-small phones (older/small Androids, ~360px and under) ---- */
@media(max-width:374px){
  .cat-scroll{ grid-template-columns:repeat(3,1fr); gap:9px 7px; }
  .p-card{ flex-basis:150px; }
  .p-card__body{ padding:10px 11px 13px; }
  .p-card__name{ font-size:12.5px; min-height:32px; }
  .price-tag{ font-size:14px; }
  .brand-name{ font-size:13px; }
  .brand-name__line2{ font-size:9.5px; }
  .header-row{ gap:8px; }
}

/* ============================================================
   MODERN VISUAL POLISH — applies at every size
   ============================================================ */

/* subtle depth + a hint of brand color on the sticky header */
.site-header{ box-shadow:0 1px 0 rgba(21,22,26,.04), 0 6px 16px rgba(21,22,26,.04); }

/* give the logo mark a soft glow instead of a flat border */
.brand-mark{ box-shadow:0 4px 10px rgba(255,90,31,.18); }

/* rounder, glossier search field with a focus glow */
.search-bar form{ transition:box-shadow .2s ease, border-color .2s ease; }
.search-bar form:focus-within{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(255,90,31,.12); }

/* category tiles: gentle ring + lift on tap/hover for a tactile feel */
.cat-thumb{ box-shadow:inset 0 0 0 1px rgba(21,22,26,.03); }
.cat-item:active .cat-thumb{ transform:scale(.95); }

/* deal rails: soften the flat color bars into a richer gradient + inner glow */
.sec-head--hot{ background:linear-gradient(90deg,#FF3B4E,var(--danger) 55%,#B01E28); }
.sec-head--new{ background:linear-gradient(90deg,#17C36A,var(--price) 60%,#0b7a3a); }
.sec-head--topselling{ background:linear-gradient(90deg,#8B5CF6,var(--pop) 55%,#4c1d95); }

/* product cards: crisper hover state + rounded image well */
.p-card{ border-radius:var(--radius-md); }
.p-card__img{ position:relative; }
.p-card__img::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 15%, rgba(21,22,26,.03), transparent 60%); pointer-events:none; }

/* rail container: soften the border into a floating card */
.rail{ box-shadow:var(--shadow-soft); border-color:var(--line-soft); }

/* trust row icons: brand-tinted background instead of flat white */
.trust-row i{ background:linear-gradient(135deg,#FFF3EA,#FFF); }

/* whatsapp float: gentle pulse to draw the eye without being noisy */
.wa-float{ animation:ssWaPulse 2.6s ease-in-out infinite; }
@keyframes ssWaPulse{ 0%,100%{ box-shadow:0 12px 26px rgba(37,211,102,.4); } 50%{ box-shadow:0 12px 30px rgba(37,211,102,.6), 0 0 0 6px rgba(37,211,102,.12); } }
@media(prefers-reduced-motion:reduce){ .wa-float{ animation:none; } }










/* ============================================================
   PRODUCT CARD — shared styles for ssProductCard() in ui.js.
   Used on index.html, product.html, category.html, and anywhere
   else cards are rendered from the shared helper. Reuses the
   site's existing tokens (--pop, --surface, --line, --ink, etc.)
   ============================================================ */

.p-card { position: relative; }

/* ---- Wholesale tag ---- */
.p-card .wholesale-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, var(--pop), #5B21B6);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 3;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.3);
}


/* ---- Seller line ---- */
.p-card .seller-info {
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.p-card .seller-info i { color: var(--pop); font-size: 10px; }

/* ---- MOQ / bulk pricing / free delivery ---- */
.p-card .wholesale-details {
  margin-top: 5px;
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.p-card .moq-badge { font-weight: 600; color: var(--ink-soft); }
.p-card .moq-badge i { color: var(--pop); }
.p-card .bulk-price {
  display: inline-block;
  background: var(--wholesale-bg, #F5F0FF);
  color: var(--pop);
  font-weight: 700;
  padding: 1px 10px;
  border-radius: 12px;
  font-size: 10.5px;
}
.p-card .free-delivery-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #E8F5E9;
  color: #2E7D32;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 10px;
  border-radius: 12px;
}
.p-card .free-delivery-tag i { font-size: 9px; }
.p-card .tier-more { font-size: 10px; color: var(--ink-faint); font-weight: 600; }

/* ---- Stock states ---- */
.p-card__oos-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--danger, #D64545);
  z-index: 2;
}
.p-card.out-of-stock .p-card__img { position: relative; }
.p-card.out-of-stock .p-card__name,
.p-card.out-of-stock .price-tag { opacity: .55; }
.p-card__stock-note {
  font-size: 10.5px;
  font-weight: 700;
  color: #C77700;
  margin-top: 4px;
}
.p-card__add:disabled {
  opacity: .4;
  cursor: not-allowed;
}





/* ============================================================
   PRODUCT DETAIL — ADD-ON STYLES
   Extends style.css. Reuses the existing brand tokens
   (--pop, --surface, --line, --ink, --radius-*, --shadow-*,
   --font-display/body/mono) already defined globally, so this
   file only ADDS the pieces product-detail.html needs and
   never redefines the base variables.
   ============================================================ */

/* ---- Badge row: Hot Deal / Wholesale tag above the title ---- */
.pd-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.pd-wholesale-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--pop), #5B21B6);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.3);
}
.pd-hotdeal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFF0EC;
  color: #D9480F;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
}

/* ---- Seller line ---- */
.pd-seller-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.pd-seller-line i { color: var(--pop); }
.pd-seller-line .role-chip {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--bg-page);
  border: 1px solid var(--line);
  color: var(--ink-faint);
}

/* ---- Rating summary numeric ---- */
.pd-rating-num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
  margin-right: 4px;
}

/* ---- Stock row ---- */
.pd-stock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0;
}
.pd-stock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pd-stock-dot.in { background: #2E7D32; box-shadow: 0 0 0 3px rgba(46,125,50,0.15); }
.pd-stock-dot.low { background: #C77700; box-shadow: 0 0 0 3px rgba(199,119,0,0.15); }
.pd-stock-dot.out { background: var(--danger, #D64545); box-shadow: 0 0 0 3px rgba(214,69,69,0.15); }
.pd-stock-row.in span { color: #2E7D32; }
.pd-stock-row.low span { color: #C77700; }
.pd-stock-row.out span { color: var(--danger, #D64545); }

/* ---- Wholesale panel ---- */
.pd-wholesale-panel {
  margin: 18px 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.pd-wholesale-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  background: var(--wholesale-bg, #F5F0FF);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.pd-wholesale-panel__head h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--pop);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pd-moq-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: 14px;
}
.pd-wholesale-panel__body { padding: 16px 18px; }

.pd-tier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 14px;
}
.pd-tier-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink-faint);
  font-weight: 700;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--line);
}
.pd-tier-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.pd-tier-table tr:last-child td { border-bottom: none; }
.pd-tier-table tr.active-tier td {
  background: var(--wholesale-bg, #F5F0FF);
  color: var(--pop);
  font-weight: 700;
}
.pd-tier-table td.tier-qty { font-family: var(--font-mono); }
.pd-tier-table td.tier-price { font-family: var(--font-mono); text-align: right; }

.pd-delivery-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.pd-delivery-info i { color: var(--pop); margin-top: 1px; }
.pd-delivery-info strong { color: var(--ink); }
.pd-delivery-info.free { color: #2E7D32; background: #E8F5E9; }
.pd-delivery-info.free i { color: #2E7D32; }

/* ---- Live unit price note ---- */
.pd-unit-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.pd-unit-note strong {
  font-family: var(--font-mono);
  color: var(--pop);
}
.pd-total-line {
  font-size: 13px;
  color: var(--ink);
  margin-top: 4px;
  font-weight: 600;
}
.pd-total-line span {
  font-family: var(--font-mono);
  color: var(--pop);
}

/* ---- Insufficient stock warning ---- */
.pd-stock-warn {
  font-size: 12px;
  font-weight: 600;
  color: var(--danger, #D64545);
  margin-top: 6px;
}

/* ---- Related products ---- */
.pd-related {
  margin-top: 48px;
}
.pd-related .sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.pd-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.pd-related-grid .p-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pd-related-grid .p-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.pd-related-grid .p-card.wholesale { border-top: 3px solid var(--pop); position: relative; }
.pd-related-grid .wholesale-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, var(--pop), #5B21B6);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 3;
}
.pd-related-grid .moq-badge {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 4px;
  display: block;
}
.pd-related-grid .moq-badge i { color: var(--pop); }

@media (max-width: 768px) {
  .pd-related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pd-wholesale-panel__head { flex-direction: column; align-items: flex-start; }
}


.drawer-user {
  padding: 20px 26px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.drawer-user__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}
.drawer-user__welcome {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.drawer-user__email {
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.drawer-links__logout {
  color: #ff6b6b !important;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 8px;
}





/* ============================================================
   PRODUCT CARD — shared styles for ssProductCard() in ui.js.
   Wholesale keeps its violet identity (the one deliberate purple
   accent in the theme). Retail gets an equally professional
   treatment in brand orange, so neither role reads as an
   afterthought.
   ============================================================ */

.p-card { position: relative; }



/* ---- Role tag — sits on the image, bottom-left, out of the
   way of the discount/hot badges which live top-left/top-right ---- */
.p-card__role-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  padding: 4px 10px 4px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.p-card__role-tag i { font-size: 9px; }

.role-tag--wholesale { background: var(--grad-pop); box-shadow: var(--shadow-glow-pop); }
.role-tag--retail { background: var(--grad-brand-deep); box-shadow: 0 4px 12px rgba(255,90,31,.32); }

/* ---- Seller line — one line under the product name, role-aware ---- */
.p-card .seller-info {
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.p-card .seller-info--wholesale i { color: var(--pop); font-size: 10px; }
.p-card .seller-info--retail i { color: var(--brand-dark); font-size: 10px; }

/* ---- MOQ-style badge — shared shape/size for both roles.
   Wholesale: violet, real MOQ number. Retail: orange, always
   "Single unit" since there's no minimum to speak of. ---- */
.p-card .wholesale-details {
  margin-top: 5px;
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.p-card .moq-badge {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.p-card .moq-badge--wholesale { color: var(--ink-soft); }
.p-card .moq-badge--wholesale i { color: var(--pop); }
.p-card .moq-badge--retail { color: var(--brand-dark); }
.p-card .moq-badge--retail i { color: var(--brand-dark); }

.p-card .bulk-price {
  display: inline-block;
  background: var(--wholesale-bg, #F5F0FF);
  color: var(--pop);
  font-weight: 700;
  padding: 1px 10px;
  border-radius: 12px;
  font-size: 10.5px;
}
.p-card .free-delivery-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #E8F5E9;
  color: #2E7D32;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 10px;
  border-radius: 12px;
}
.p-card .free-delivery-tag i { font-size: 9px; }
.p-card .tier-more { font-size: 10px; color: var(--ink-faint); font-weight: 600; }

/* ---- Out-of-stock overlay on the image ---- */
.p-card__oos-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--danger, #D64545);
  z-index: 2;
}
.p-card.out-of-stock .p-card__img { position: relative; }
.p-card.out-of-stock .p-card__name,
.p-card.out-of-stock .price-tag { opacity: .55; }

.p-card__add:disabled {
  opacity: .4;
  cursor: not-allowed;
}




/* ================= WHOLESALE SECTION — distinct from Top Selling =================
   Top Selling stays violet (--pop). Wholesale gets its own identity: a deep
   indigo/blue gradient so the two rails are never confused at a glance,
   while still feeling premium/B2B rather than "just another orange rail". */
.sec-head--wholesale{
  background:linear-gradient(90deg,#1E3A8A,#2563EB 55%,#3B82F6);
  color:#fff;
  border-bottom:none;
}
.sec-head--wholesale .see-all{
  color:#fff;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);
  padding:6px 13px;
  border-radius:20px;
}
.sec-head--wholesale .see-all:hover{ background:#fff; color:#1E3A8A; }
.sec-head--wholesale h2 i{ color:var(--sun); }

/* ================= CATALOG SECTION — light tint behind the rail =================
   Everything else on the page sits on var(--bg-page) already, so the
   Catalog block was blending straight into the page background with
   nothing to set it apart. This gives it a very light, warm backdrop
   (distinct from --bg-page) so the section reads as its own zone. */
.block--catalog{
  background:#FCFAF6;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.block--catalog .rail{
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}

@media(max-width:599px){
  .block--catalog{ border-left:none; border-right:none; }
}




/* ============================================================
   LOAD MORE — used on product.html (loads next 8 in place) and
   on index.html's catalog rail (redirects to product.html).
   Rewritten to only use tokens that exist in theme.css
   (--brand, --brand-dark, --font-body, --ink-faint) — the
   previous version referenced --grad-brand-deep / --ease-out,
   which only exist in style.css, so the button rendered with
   no background at all.
   ============================================================ */

.load-more-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:30px;
  padding-top:6px;
}

.btn-loadmore{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:220px;
  padding:14px 30px;
  border:none;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-dark));
  color:#fff;
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(255,90,31,.5);
  transition:transform .22s ease, box-shadow .22s ease, filter .2s ease;
}

.btn-loadmore__label{
  display:inline-flex;
  align-items:center;
}

/* down-chevron cue, hidden while loading */
.btn-loadmore::after{
  content:"\f078";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:11px;
  transition:transform .25s ease, opacity .2s ease;
}

.btn-loadmore:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 14px 30px -10px rgba(255,90,31,.6);
  filter:brightness(1.06);
}
.btn-loadmore:hover:not(:disabled)::after{ transform:translateY(2px); }
.btn-loadmore:active:not(:disabled){ transform:translateY(0) scale(.97); }

.btn-loadmore:disabled{ cursor:not-allowed; }

/* ---- spinner ---- */
.btn-loadmore__spinner{
  display:none;
  width:16px;
  height:16px;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  flex-shrink:0;
  animation:ssSpin .7s linear infinite;
}
@keyframes ssSpin{ to{ transform:rotate(360deg); } }

/* ---- loading state ---- */
.btn-loadmore.is-loading{
  pointer-events:none;
  filter:brightness(.94);
}
.btn-loadmore.is-loading::after{ opacity:0; }
.btn-loadmore.is-loading .btn-loadmore__spinner{ display:inline-block; }

.load-more-count{
  font-size:12.5px;
  color:var(--ink-faint);
  font-weight:600;
  letter-spacing:.1px;
}

@media(prefers-reduced-motion:reduce){
  .btn-loadmore__spinner{ animation:none; }
  .btn-loadmore, .btn-loadmore::after{ transition:none; }
}

@media(max-width:599px){
  .load-more-wrap{ margin-top:22px; }
  .btn-loadmore{
    min-width:0;
    width:100%;
    max-width:340px;
    padding:13px 24px;
    font-size:13.5px;
  }
}



#toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:var(--navy-deep); color:var(--paper); padding:12px 20px; border-radius:999px; font-size:.85rem; font-weight:600; opacity:0; pointer-events:none; transition:all .25s ease; z-index:200; display:flex; align-items:center; gap:8px; }
#toast.show{ opacity:1; transform:translate(-50%,0); }
#toast i{ color:var(--marigold); }





@media(max-width:599px){

  /* ---- Base: remove padding from all wraps by default ---- */
  .wrap{ padding:0; }
  .block{ padding:8px 0; }

  /* ---- BUT keep padding for the banner section ---- */
  .block--banner .wrap{ padding:0 14px; }
  /* If you don't have a class, target by ID or structure */
  #bannerAd .wrap{ padding:0 14px; }

  /* ---- compact header ---- */
  .header-row{ padding:10px 14px; gap:10px; }
  .brand-mark{ width:36px; height:36px; border-radius:10px; border-width:1.5px; }
  .brand-name{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    font-size:14.5px;
    line-height:1.2;
    white-space:normal;
  }
  .brand-name__line1{ font-weight:700; }
  .brand-name__line2{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.7px;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .brand-tag{ display:none; }
  .iconbtn{ width:38px; height:38px; font-size:15px; }

  .hamburger-btn{ width:38px; height:38px; border-radius:11px; }
  .hamburger-icon{ width:17px; height:13px; }

  .header-actions{ gap:2px; }
  .action-link{ padding:4px 8px; }
  .action-link span:not(.cart-count){ display:none; }
  .action-link i{ font-size:19px; }
  .search-bar{ margin-top:2px; }
  .search-bar input{ padding:11px 16px; font-size:13.5px; }
  .search-bar button{ width:44px; height:40px; }

  /* ---- hero banner: shorter, phone-proportioned ---- */
  .home-top{ margin-top:12px; gap:12px; padding:0 14px; }
  .hero-banner-wrap{ min-height:170px; }
  .hero-banner-wrap .ad-slot{ min-height:170px; }
  .ad-slot{ --ad-aspect:16/9; border-radius:var(--radius-md); }
  .ad-slot__dots{ bottom:9px; }

  /* ---- category grid: crisp 4-up tiles, square-edged on phone ---- */
  .cat-section-head{ margin-bottom:12px; padding:0 14px; }
  .cat-section-head h2{ font-size:16.5px; }
  .cat-section-head .see-all{ padding:6px 11px; font-size:11.5px; }
  .cat-scroll{ gap:10px 8px; padding:0 14px; }
  .cat-thumb{ border-radius:0; box-shadow:none; }
  .cat-item span{ font-size:11px; max-width:100%; }

  /* ---- deal rail / product section: edge-to-edge, no rounded card ---- */
  .rail{ 
    border-radius:0; 
    border-left:none; 
    border-right:none; 
    box-shadow:none; 
  }
  .sec-head{ padding:13px 16px; gap:8px; }
  .sec-head h2{ font-size:14px; gap:7px; }
  .sec-head h2 i{ font-size:13px; }
  .deal-timer{ font-size:10.5px; padding:4px 9px; }
  .sec-head .see-all{ font-size:11.5px; }

  /* ---- product cards: bigger, breathing room, app-style peek-scroll ---- */
  .p-scroll{ padding:4px 14px 8px; gap:10px; background:transparent; }
  .p-grid{ gap:10px; background:transparent; padding:2px 14px; }
  .p-card{
    flex-basis:172px;
    border:1px solid var(--line-soft);
    box-shadow:0 3px 10px rgba(21,22,26,.05);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .p-card:active{ transform:scale(.97); }
  .p-card__img{ aspect-ratio:1/1; background:linear-gradient(180deg,#FAFAFC,#F3F4F8); }
  .p-card__img img{ padding:18px; }
  .p-card__body{ padding:12px 13px 15px; gap:7px; }
  .p-card__name{ font-size:13px; min-height:35px; line-height:1.4; }
  .p-card__rating{ font-size:11.5px; }
  .price-tag{ font-size:15.5px; font-weight:800; }
  .p-card__old{ font-size:11px; }
  .p-card__add{ width:32px; height:32px; box-shadow:0 2px 6px rgba(21,22,26,.08); }
  .p-card__discount{ font-size:11px; padding:4px 9px; }
  .p-card__hot{ font-size:10px; padding:4px 10px; }

  /* ---- trust row: stack to two columns, icon-led ---- */
  .trust-row{ gap:12px 18px; justify-content:flex-start !important; padding:0 14px; }
  .trust-row div{ font-size:12px; flex:1 1 44%; }

  /* ---- footer: single column, breathable ---- */
  .footer-grid{ grid-template-columns:1fr 1fr; gap:26px 18px; padding:34px 14px 22px; }
  .footer-grid h4{ font-size:13.5px; margin-bottom:11px; }
  .footer-grid a{ font-size:12.5px; margin:7px 0; }

  .wa-float{ width:50px; height:50px; font-size:22px; right:14px; bottom:18px; }
  
  /* ---- Catalog block on phone ---- */
  .block--catalog{ border-left:none; border-right:none; }
}












/* ============================================================
   DRAWER — EXPANDABLE CATEGORY ACCORDION
   "Shop by Category" lives inside the mobile drawer between
   "All Products" and "Shops". Tapping it reveals top-level
   categories; tapping a category's own chevron reveals its
   sub-categories; tapping a sub-category's chevron reveals its
   leaf sub-categories. Every name (at any level) is a live link
   straight into product.html?category=ID — only the chevrons
   toggle expand/collapse. Built on the CSS grid-template-rows
   0fr -> 1fr trick for a buttery height animation with no JS
   height math required.
   ============================================================ */

/* ---- top-level toggle row: "Shop by Category" ---- */
.drawer-cat-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 26px;
  background:none;
  border:none;
  border-left:3px solid transparent;
  color:#f0f0f2;
  font-weight:600;
  font-size:15px;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.drawer-cat-toggle span{
  display:flex;
  align-items:center;
  gap:14px;
}
.drawer-cat-toggle span i{
  width:22px;
  font-size:18px;
  color:var(--sun);
  text-align:center;
}
.drawer-cat-toggle:hover{
  background:rgba(255,255,255,.06);
  border-left-color:var(--brand);
}
.drawer-cat-toggle.open{
  background:rgba(255,90,31,.09);
  border-left-color:var(--brand);
}
.drawer-cat-toggle__chevron{
  font-size:12px;
  color:rgba(255,255,255,.45);
  transition:transform .3s var(--ease-out), color .2s ease;
  flex-shrink:0;
}
.drawer-cat-toggle.open .drawer-cat-toggle__chevron{
  transform:rotate(180deg);
  color:var(--brand);
}

/* ---- outer collapsible wrap for the whole category list ---- */
.drawer-cat-list{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .38s var(--ease-out);
  background:rgba(0,0,0,.16);
}
.drawer-cat-list.open{
  grid-template-rows:1fr;
}
.drawer-cat-list__inner{
  overflow:hidden;
  min-height:0;
}

/* ---- skeleton shimmer while the tree loads ---- */
.drawer-cat-skel{
  height:34px;
  margin:8px 26px;
  border-radius:8px;
  background:linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.05) 70%);
  background-size:200% 100%;
  animation:ssShimmerDark 1.3s ease-in-out infinite;
}
@keyframes ssShimmerDark{ 0%{ background-position:150% 0; } 100%{ background-position:-50% 0; } }

.drawer-cat-empty{
  padding:14px 26px 18px 44px;
  color:rgba(255,255,255,.4);
  font-size:12.5px;
  font-weight:500;
}

/* ---- level 1: top-level category row ---- */
.drawer-cat-item{
  border-top:1px solid rgba(255,255,255,.05);
}
.drawer-cat-item:first-child{
  border-top:1px solid rgba(255,255,255,.08);
}
.drawer-cat-item__row{
  display:flex;
  align-items:stretch;
}
.drawer-cat-item__link{
  flex:1;
  min-width:0;
  padding:12px 10px 12px 44px;
  color:#f0f0f2;
  font-weight:600;
  font-size:13.5px;
  display:flex;
  align-items:center;
  transition:color .2s ease, background .2s ease;
}
.drawer-cat-item__link:hover{
  color:var(--sun);
  background:rgba(255,255,255,.04);
}
.drawer-cat-item__expand{
  width:42px;
  flex-shrink:0;
  background:none;
  border:none;
  color:rgba(255,255,255,.45);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color .2s ease, background .2s ease;
}
.drawer-cat-item__expand:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}
.drawer-cat-item__expand i{
  font-size:12px;
  transition:transform .3s var(--ease-out);
}
.drawer-cat-item__expand.rotated{
  color:var(--brand);
}
.drawer-cat-item__expand.rotated i{
  transform:rotate(180deg);
}

/* ---- level 1 sub-panel (holds level 2 rows) ---- */
.drawer-cat-item__sub{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--ease-out);
  background:rgba(0,0,0,.14);
}
.drawer-cat-item__sub.open{
  grid-template-rows:1fr;
}
.drawer-cat-item__sub-inner{
  overflow:hidden;
  min-height:0;
}

/* ---- level 2: sub-category row ---- */
.drawer-subcat-item{
  border-top:1px solid rgba(255,255,255,.04);
}
.drawer-subcat-item__row{
  display:flex;
  align-items:stretch;
}
.drawer-subcat-item__link{
  flex:1;
  min-width:0;
  padding:10px 10px 10px 62px;
  color:rgba(255,255,255,.78);
  font-weight:600;
  font-size:12.5px;
  display:flex;
  align-items:center;
  transition:color .2s ease, background .2s ease;
}
.drawer-subcat-item__link:hover{
  color:var(--sun);
  background:rgba(255,255,255,.04);
}
.drawer-subcat-item__expand{
  width:38px;
  flex-shrink:0;
  background:none;
  border:none;
  color:rgba(255,255,255,.38);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color .2s ease, background .2s ease;
}
.drawer-subcat-item__expand:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}
.drawer-subcat-item__expand i{
  font-size:10.5px;
  transition:transform .3s var(--ease-out);
}
.drawer-subcat-item__expand.rotated{
  color:var(--brand-light);
}
.drawer-subcat-item__expand.rotated i{
  transform:rotate(180deg);
}

/* ---- level 2 sub-panel (holds level 3 leaf links) ---- */
.drawer-subcat-item__leaf{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .28s var(--ease-out);
  background:rgba(0,0,0,.2);
}
.drawer-subcat-item__leaf.open{
  grid-template-rows:1fr;
}
.drawer-subcat-item__leaf-inner{
  overflow:hidden;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* ---- level 3: leaf sub-category link ---- */
.drawer-leaf-link{
  padding:9px 10px 9px 80px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:500;
  transition:color .2s ease, padding-left .2s ease, background .2s ease;
}
.drawer-leaf-link:hover{
  color:var(--sun);
  padding-left:86px;
  background:rgba(255,255,255,.04);
}
.drawer-leaf-link:last-child{
  padding-bottom:12px;
}

/* ---- phone refinements to match the rest of the drawer scale-down ---- */
@media(max-width:599px){
  .drawer-cat-toggle{ padding:13px 20px; font-size:14px; }
  .drawer-cat-toggle span i{ font-size:16px; width:20px; }
  .drawer-cat-item__link{ padding:11px 8px 11px 36px; font-size:13px; }
  .drawer-subcat-item__link{ padding:9px 8px 9px 52px; font-size:12px; }
  .drawer-leaf-link{ padding:8px 8px 8px 68px; font-size:11.5px; }
  .drawer-leaf-link:hover{ padding-left:74px; }
}
@media(max-width:374px){
  .drawer-cat-item__link{ padding-left:30px; }
  .drawer-subcat-item__link{ padding-left:44px; }
  .drawer-leaf-link{ padding-left:58px; }
}






.cat-cascade {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cat-cascade__select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e2e8);
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink, #15161A);
  appearance: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cat-cascade__select:hover { border-color: var(--marigold, #E8A33D); }
.cat-cascade__select:focus {
  outline: none;
  border-color: var(--marigold, #E8A33D);
  box-shadow: 0 0 0 3px rgba(232,163,61,.15);
}

/* Each level nudges in slightly so the drill-down reads visually,
   like breadcrumbs stacked vertically */
.cat-cascade__select:nth-child(2) { margin-left: 10px; width: calc(100% - 10px); }
.cat-cascade__select:nth-child(3) { margin-left: 20px; width: calc(100% - 20px); }
.cat-cascade__select:nth-child(4) { margin-left: 30px; width: calc(100% - 30px); }

.cat-cascade__select--loading { opacity: .6; cursor: wait; }
.cat-cascade__empty { font-size: 13px; color: var(--muted, #777); margin: 0; }






/* ============================================================
   FLASH SALE — live daily event rail (2:00 PM - midnight).
   Now carries the same red gradient identity that used to belong
   to Hot Deals — Hot Deals moved to a plain sticky title above,
   so this rail inherits the red "urgent live event" bar instead.
   ============================================================ */

.rail--flash{ box-shadow:0 10px 30px rgba(226,55,68,.20); }

.sec-head--flash{
  background:linear-gradient(90deg,#FF3B4E,var(--danger) 55%,#B01E28);
  color:#fff;
  border-bottom:none;
}
.sec-head--flash h2{ color:#fff; }
.sec-head--flash h2 i{ color:var(--sun); text-shadow:0 0 8px rgba(255,255,255,.35); }
.sec-head--flash .see-all{
  color:#fff;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);
  padding:6px 13px;
  border-radius:20px;
}
.sec-head--flash .see-all:hover{ background:#fff; color:var(--danger); }

/* countdown badge, "starts in" state (no live sale right now) */
.deal-timer--pending{
  background:rgba(0,0,0,.22);
  color:#fff;
}

/* ---- Flash Sale card add-ons (stock progress bar, urgency labels) ---- */
.fs-card{ border-radius:var(--radius-md); }
.fs-card__discount{ background:linear-gradient(135deg,var(--danger),#B01E28); }
.fs-card__flash-badge{ background:#2A0A0D; color:var(--sun); }
.fs-card__price{ color:var(--danger); }

.fs-card__stockbar{
  height:6px;
  border-radius:6px;
  background:var(--line-soft);
  overflow:hidden;
  margin-top:7px;
}
.fs-card__stockbar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--danger),var(--sun));
  border-radius:6px;
  transition:width .3s ease;
}
.fs-card__stocklabel{
  font-size:10.5px;
  font-weight:700;
  color:var(--ink-faint);
  margin-top:5px;
}
.fs-card__lowstock-label{
  color:var(--danger);
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.fs-card__lowstock-label i{ font-size:9px; }
.fs-card__soldout-label{ color:var(--ink-faint); }

@media(max-width:599px){
  .sec-head--flash{ padding:13px 14px; }
}




/* ---- locked (not-yet-started) Flash Sale card ---- */
.fs-card--locked .p-card__img img{ filter:grayscale(.15) brightness(.92); }
.fs-card--locked .p-card__name,
.fs-card--locked .fs-card__price,
.fs-card--locked .p-card__old{ opacity:.65; }
.fs-card__lock-overlay{
  background:rgba(30,20,0,.5);
  color:#fff;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:7px;
}
.fs-card__lock-overlay i{ color:var(--sun); }
.fs-card__pending-label{
  color:var(--ink-faint);
  display:inline-flex;
  align-items:center;
  gap:4px;
}












/* ============================================================
   SKELETON CARD — modern loading placeholder that mirrors real
   .p-card anatomy (image, two name lines, a meta pill, then a
   price + circular add-button row) instead of one flat gray
   block. Sizing rides entirely on the existing .p-card responsive
   rules (flex-basis in .p-scroll, width:100% in .p-grid, and the
   phone/tiny-phone overrides already in this file) — so it always
   matches whatever size the real card renders at, at every
   breakpoint, with no separate media queries to keep in sync.
   ============================================================ */

.skel-card{
  pointer-events:none;
  cursor:default;
}

/* shared shimmer sweep, reused by every skeleton piece below */
.skel-shimmer{
  position:relative;
  overflow:hidden;
  background:var(--line-soft);
}
.skel-shimmer::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.7),
    transparent);
  transform:translateX(-100%);
  animation:ssSkelSweep 1.6s ease-in-out infinite;
}
@keyframes ssSkelSweep{
  100%{ transform:translateX(100%); }
}
@media(prefers-reduced-motion:reduce){
  .skel-shimmer::after{ animation:none; display:none; }
}

.skel-card__img{
  aspect-ratio:1/1;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}

.skel-card__body{
  padding:10px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.skel-line{
  height:11px;
  border-radius:5px;
}

.skel-pill{
  height:16px;
  width:64px;
  border-radius:20px;
  margin-top:2px;
}

.skel-card__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
}

.skel-price{
  height:17px;
  width:58px;
  border-radius:5px;
}

.skel-btn{
  width:30px;
  height:30px;
  border-radius:50%;
  flex-shrink:0;
}

/* Phone: nudge padding/gaps and piece sizes up slightly to match the
   real card's own phone-only enlargement (see .p-card__body,
   .p-card__add, .price-tag rules under @media(max-width:599px)
   elsewhere in this file), so the transition from skeleton -> real
   content doesn't shift height at all. */
@media(max-width:599px){
  .skel-card__body{ padding:12px 13px 15px; gap:9px; }
  .skel-line{ height:12px; }
  .skel-card__foot{ margin-top:8px; }
  .skel-price{ width:66px; height:18px; }
  .skel-btn{ width:32px; height:32px; }
}

/* Extra-small phones — matches the tighter .p-card__body padding
   already defined for this breakpoint. */
@media(max-width:374px){
  .skel-card__body{ padding:10px 11px 13px; gap:7px; }
  .skel-line{ height:10px; }
}








/* ============================================================
   FIX: Top Selling Categories / Shop by Category grid for phone
   ============================================================ */

@media(max-width:599px){
  /* Increase the category grid to 4 columns on phones 
     (adjusts the gap for better spacing) */
  .cat-scroll {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 8px;
    padding: 0 14px;
  }
  
  /* Make category items slightly more compact on small screens */
  .cat-item {
    gap: 6px;
  }
  
  /* Category thumbnails should be smaller to fit 4 across */
  .cat-thumb {
    border-radius: var(--radius-sm);
  }
  
  /* Category labels need to be readable but compact */
  .cat-item span {
    font-size: 10.5px;
    max-width: 100%;
    line-height: 1.2;
  }
}

/* Extra-small phones (under 375px) — drop to 3 columns */
@media(max-width:374px){
  .cat-scroll {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 6px;
  }
  
  .cat-item span {
    font-size: 10px;
  }
}

/* ============================================================
   "Top selling Categories" grid (#categoryGrid) — pinned to a
   4-across layout on EVERY phone size (home.js now caps this
   grid at 8 items, so 4-across always resolves to a clean two
   rows, never an awkward leftover). #categoryGrid's ID
   specificity beats the plain .cat-scroll rules above/below on
   purpose, including the 3-column extra-small-phone override,
   so this one grid never drops below 4 columns.
   ============================================================ */
@media(max-width:599px){
  #categoryGrid.cat-scroll{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px 8px;
  }
}
@media(max-width:374px){
  #categoryGrid.cat-scroll{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 9px 6px;
  }
}

/* ============================================================
   DRAWER — Chat badge + "Request a Quote" signature row
   Dark, muted palette pulled from theme.css (--ink/--ink-soft/
   --surface) — brand orange & sun-yellow are now accent-only
   highlights, not full-bleed gradients.
   ============================================================ */

/* ---- Chat link's open-quotes count badge ---- */
.drawer-links__chat{ position:relative; }
.drawer-badge{
  margin-left:auto;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#2A2B32;
  border:1px solid rgba(255,255,255,.1);
  color:var(--sun);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,201,60,.15);
  flex-shrink:0;
}

/* ---- "Request a Quote" — set apart with a dark card instead of a
   bright gradient, brand color kept to a thin left rule + icon ---- */
.drawer-links__rfq{
  position:relative;
  margin:6px 14px;
  border-radius:14px;
  background:#1D1E24;
  border:1px solid rgba(255,255,255,.07);
  border-left:3px solid var(--brand) !important;
  padding:14px 16px !important;
  overflow:hidden;
}
.drawer-links__rfq::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px);
  pointer-events:none;
}
.drawer-links__rfq i{ color:var(--sun); font-size:17px; position:relative; }
.drawer-links__rfq:hover{
  background:#24252C;
  border-left-color:var(--sun) !important;
  padding-left:16px !important;
}
.drawer-pill-new{
  margin-left:auto;
  background:rgba(255,201,60,.14);
  color:var(--sun);
  border:1px solid rgba(255,201,60,.35);
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:999px;
  position:relative;
}

/* ============================================================
   RFQ INTRO MODAL — educates buyers about Request-a-Quote
   Dark ink hero instead of a bright orange/purple splash;
   accent colors used sparingly for icons and CTAs only.
   ============================================================ */
.rfq-intro-overlay{
  position:fixed; inset:0; z-index:999998;
  background:rgba(10,10,12,.7);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.rfq-intro-overlay.active{ opacity:1; visibility:visible; }

.rfq-intro-modal{
  position:relative;
  width:100%; max-width:440px;
  background:var(--surface);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  transform:translateY(16px) scale(.97);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  max-height:92vh;
  overflow-y:auto;
}
.rfq-intro-overlay.active .rfq-intro-modal{ transform:translateY(0) scale(1); }

.rfq-intro-modal__close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter:blur(3px);
}
.rfq-intro-modal__close:hover{ background:rgba(255,255,255,.22); }

.rfq-intro-modal__hero{
  padding:34px 26px 26px;
  text-align:center;
  background:linear-gradient(165deg,var(--ink) 0%,#23242B 60%,#1A1B20 100%);
  color:#fff;
  position:relative;
}
.rfq-intro-modal__hero::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(120deg, rgba(255,255,255,.03) 0 2px, transparent 2px 26px);
  pointer-events:none;
}
.rfq-intro-modal__hero-ico{
  width:60px; height:60px; margin:0 auto 14px;
  border-radius:18px;
  background:rgba(255,90,31,.14);
  border:1px solid rgba(255,90,31,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--brand);
  position:relative;
}
.rfq-intro-modal__eyebrow{
  display:inline-block; position:relative;
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,201,60,.12); color:var(--sun);
  border:1px solid rgba(255,201,60,.25);
  padding:4px 12px; border-radius:999px;
  margin-bottom:10px;
}
.rfq-intro-modal__hero h2{
  font-family:var(--font-display); font-size:21px; font-weight:600; line-height:1.25;
  margin-bottom:8px; color:#fff; position:relative;
}
.rfq-intro-modal__hero p{
  font-size:13px; color:#B9BAC2; line-height:1.55; max-width:32ch; margin:0 auto; position:relative;
}

.rfq-intro-modal__features{ padding:22px 24px 4px; display:flex; flex-direction:column; gap:16px; }
.rfq-intro-feature{ display:flex; gap:13px; align-items:flex-start; }
.rfq-intro-feature__ico{
  flex-shrink:0; width:38px; height:38px; border-radius:12px;
  background:var(--bg-page);
  border:1px solid var(--line);
  color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.rfq-intro-feature strong{ display:block; font-size:13.5px; color:var(--ink); margin-bottom:2px; }
.rfq-intro-feature span{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

.rfq-intro-modal__dontshow{
  display:flex; align-items:center; gap:8px;
  margin:18px 24px 0; font-size:12px; color:var(--ink-faint); font-weight:600; cursor:pointer;
}
.rfq-intro-modal__dontshow input{ accent-color:var(--brand); width:15px; height:15px; cursor:pointer; }

.rfq-intro-modal__actions{ display:flex; gap:10px; padding:20px 24px 26px; }
.rfq-intro-modal__actions .btn{ flex:1; }
.rfq-intro-modal__actions .btn-primary{
  background:var(--ink);
  box-shadow:none;
}
.rfq-intro-modal__actions .btn-primary:hover{
  background:#000;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}

@media(max-width:480px){
  .rfq-intro-modal{ border-radius:20px; }
  .rfq-intro-modal__hero{ padding:28px 20px 22px; }
  .rfq-intro-modal__hero h2{ font-size:18.5px; }
  .rfq-intro-modal__features{ padding:18px 18px 2px; gap:14px; }
  .rfq-intro-modal__actions{ flex-direction:column; padding:16px 18px 22px; }
  .rfq-intro-modal__dontshow{ margin:14px 18px 0; }
}









/* ===== Catalog "Browse All" button — dual-bar style to match infinite scroll ===== */
.btn-loadmore{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:220px;
  padding:14px 30px;
  border:none;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-dark));
  color:#fff;
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(255,90,31,.5);
  transition:transform .22s ease, box-shadow .22s ease, filter .2s ease;
}
.btn-loadmore:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 14px 30px -10px rgba(255,90,31,.6);
  filter:brightness(1.06);
}
.btn-loadmore:active:not(:disabled){ transform:translateY(0) scale(.97); }
.btn-loadmore:disabled{ cursor:not-allowed; pointer-events:none; }

.btn-loadmore__label{ display:inline-flex; align-items:center; }
.btn-loadmore__label::after{
  content:"\f078";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:11px;
  margin-left:9px;
  transition:transform .25s ease, opacity .2s ease;
}
.btn-loadmore.is-loading .btn-loadmore__label::after{ opacity:0; }

/* the two small counter-rotating bars, sized down to sit inline in the button */
.btn-loadmore__spinner{
  display:none;
  position:relative;
  width:20px;
  height:20px;
  flex-shrink:0;
}
.btn-loadmore.is-loading .btn-loadmore__spinner{ display:inline-block; }
.btn-loadmore__spinner span{
  position:absolute; top:50%; left:50%;
  width:16px; height:2.5px; margin:-1.25px 0 0 -8px;
  border-radius:3px;
  background:#fff;
  animation:ssDualSpin .8s linear infinite;
}
.btn-loadmore__spinner span:nth-child(2){
  background:rgba(255,255,255,.55);
  animation-direction:reverse;
}

@media(prefers-reduced-motion:reduce){
  .btn-loadmore__spinner span{ animation:none; }
  .btn-loadmore, .btn-loadmore__label::after{ transition:none; }
}









/* ===== Scroll-to-top (left side, mirrors the WhatsApp float on the right) ===== */
.scroll-top-btn{
  position:fixed;
  left:18px;
  bottom:24px;
  z-index:9999;
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  background:var(--ink);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(21,22,26,.25);
  opacity:0;
  transform:translateY(12px) scale(.85);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background .2s ease;
}
.scroll-top-btn.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
/* Only apply hover color on devices with a real pointer (mouse/trackpad) —
   prevents the "stuck orange" issue on touch devices where :hover persists
   after a tap until the user taps elsewhere. */
@media (hover: hover) and (pointer: fine){
  .scroll-top-btn:hover{ background:var(--brand); transform:translateY(-3px) scale(1.05); }
}

/* Touch devices get a brief color change only while actively pressed,
   then it releases back to black the instant the finger lifts. */
.scroll-top-btn:active{ background:var(--brand); transform:translateY(-1px) scale(.96); }

/* Belt-and-suspenders: whenever the button is hidden (i.e. back at the
   top of the page), force it back to black regardless of any lingering
   focus/hover/active state. */
.scroll-top-btn:not(.show){ background:var(--ink) !important; }
@media(max-width:599px){
  .scroll-top-btn{ left:14px; bottom:18px; width:42px; height:42px; font-size:14px; }
}

/* ===== Dual-bar spinner — two small bars rotating in opposite directions ===== */
.dual-spinner{ position:relative; width:32px; height:32px; margin:0 auto; }
.dual-spinner span{
  position:absolute; top:50%; left:50%;
  width:24px; height:3px; margin:-1.5px 0 0 -12px;
  border-radius:3px;
  animation:ssDualSpin .8s linear infinite;
}
.dual-spinner span:nth-child(1){ background:linear-gradient(90deg,var(--brand),var(--brand-dark)); }
.dual-spinner span:nth-child(2){ background:linear-gradient(90deg,var(--pop),#5B21B6); animation-direction:reverse; }
@keyframes ssDualSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .dual-spinner span{ animation:none; } }

/* ===== Infinite-scroll loader (replaces .btn-loadmore) ===== */
.infinite-loader{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:26px 0 14px;
}
.infinite-loader.active{ display:flex; }
.infinite-loader__label{
  font-size:11.5px;
  font-weight:700;
  color:var(--ink-faint);
  letter-spacing:.3px;
}
#loadMoreSentinel{ height:1px; }








/* ============================================================
   SS SPINNER — two curved arcs (reload-icon style), nested,
   spinning opposite directions. Small, fast, no bulk.
   ============================================================ */
.ss-spinner{
  position:relative;
  width:34px;
  height:34px;
  flex-shrink:0;
}
.ss-spinner__arc{
  position:absolute;
  border-radius:50%;
  border-style:solid;
  border-color:transparent;
}
.ss-spinner__arc--outer{
  inset:0;
  border-width:3px;
  border-top-color:var(--brand);
  border-right-color:var(--brand);
  animation:ssArcSpin .85s linear infinite;
}
.ss-spinner__arc--inner{
  inset:9px; /* smaller ring, nested inside the outer one */
  border-width:2.5px;
  border-bottom-color:var(--pop);
  border-left-color:var(--pop);
  animation:ssArcSpinRev .65s linear infinite;
}
@keyframes ssArcSpin{ to{ transform:rotate(360deg); } }
@keyframes ssArcSpinRev{ to{ transform:rotate(-360deg); } }
@media(prefers-reduced-motion:reduce){
  .ss-spinner__arc{ animation:none; border-top-color:var(--brand); border-left-color:var(--brand); }
}

/* ---- Full-screen overlay: barely-there dim, spinner centered,
   products stay visible underneath ---- */
.ss-loading-overlay{
  position:fixed;
  inset:0;
  z-index:999997;
  background:rgba(15,16,20,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
.ss-loading-overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.ss-loading-overlay .ss-spinner{ width:42px; height:42px; }
.ss-loading-overlay .ss-spinner__arc--outer{ border-width:3.5px; }
.ss-loading-overlay .ss-spinner__arc--inner{ inset:10px; border-width:3px; }





/* ---- "Shop by Category" row: toggle button + View All shortcut into
   category.html — sits inline with the toggle, doesn't affect the
   accordion's own open/close behaviour. ---- */
.drawer-cat-viewall{
  flex-shrink:0;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  color:#FF5A1F !important;
}
.drawer-cat-viewall:hover{
  text-decoration:underline;
}





/* ---- Mobile search toggle (phones/tablets only, <860px) ----
   Swaps "Help" for a "Search" icon that toggles the header search
   bar's visibility. At ≥860px the search bar already lives inline
   in the header, so nothing here applies — Help stays put and the
   toggle button stays hidden. */
.action-link--mobile-search{ display:none; }

@media(max-width:859px){
  .action-link--help{ display:none; }
  .action-link--mobile-search{ display:flex; }

  .search-bar{
    display:none;
    order:6;
    margin-top:8px;
  }
  .search-bar.mobile-search-open{
    display:block;
    animation:ssSearchSlideDown .22s ease;
  }
}

@keyframes ssSearchSlideDown{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* toggle button reads as "active" while the bar is open, matching
   the hover/active treatment other icon buttons already get */
.action-link--mobile-search.active{
  background:var(--paper-dim);
  color:var(--brand);
}
.action-link--mobile-search.active i{ color:var(--brand); }




/* ============================================================
   HOT DEALS — plain sticky title (replaces the old red bar) +
   horizontal-scroll arrow controls shared by every product rail.
   ============================================================ */

/* ---- Sticky "Hot Deals" title. Sits right under the header while
   this section is on screen, then unsticks naturally the moment the
   section scrolls past (position:sticky is bound to .rail--hotdeals'
   own box, so there's nothing to it beyond that — no scroll-listener
   math needed). ---- */
.rail--hotdeals{ overflow:visible; }
.hotdeals-sticky-title{
  position:sticky;
  top:var(--siteHeaderH, 96px);
  z-index:45;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:15px 54px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:0 2px 10px rgba(21,22,26,.05);
}
.hotdeals-sticky-title span{
  font-family:var(--font-display);
  font-size:16.5px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:9px;
  text-align:center;
}
.hotdeals-sticky-title span i{
  color:var(--danger);
  font-size:15px;
}
.hotdeals-sticky-title .see-all{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:var(--brand);
}
.rail--hotdeals .p-scroll-wrap{ border-radius:0 0 var(--radius-lg) var(--radius-lg); overflow:hidden; }

@media(max-width:599px){
  .hotdeals-sticky-title{ padding:13px 46px; border-radius:0; }
  .hotdeals-sticky-title span{ font-size:14.5px; gap:7px; }
  .hotdeals-sticky-title .see-all{ right:14px; font-size:11.5px; }
}

/* ---- Reveal-on-touch scroll arrows for every horizontally
   scrollable product rail (Hot Deals, Flash Sale, New Arrivals,
   Wholesale, Top Selling). Hidden by default; ssEnableScrollArrows()
   in ui.js reveals them the moment someone touches/taps/hovers a
   product in that rail, then fades them back out after a short
   idle period — mirrors the reference screenshot's carousel
   controls. ---- */
.p-scroll-wrap{ position:relative; }
.p-scroll-arrow{
  position:absolute;
  top:38%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:rgba(21,22,26,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  z-index:6;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease, background .2s ease, transform .2s ease;
  backdrop-filter:blur(2px);
}
.p-scroll-wrap.show-arrows .p-scroll-arrow{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.p-scroll-arrow:hover{ background:var(--brand); }
.p-scroll-arrow--prev{ left:8px; }
.p-scroll-arrow--next{ right:8px; }
.p-scroll-arrow.is-disabled{ opacity:.25 !important; pointer-events:none; }

@media (hover:hover) and (pointer:fine){
  .p-scroll-wrap:hover .p-scroll-arrow{ opacity:1; visibility:visible; pointer-events:auto; }
}

@media(max-width:599px){
  .p-scroll-arrow{ width:30px; height:30px; font-size:11.5px; }
  .p-scroll-arrow--prev{ left:6px; }
  .p-scroll-arrow--next{ right:6px; }
}




/* ============================================================
   INDEX.HTML ONLY — tighter product cards + no MOQ line.
   Scoped to body[data-page="index.html"], so nothing else on
   the site (product.html, category-explore.html, wholesale.html,
   the "you may also like" grid on product-detail.html, etc.) is
   affected — those keep ssProductCard()'s full output as-is.
   ============================================================ */

/* Remove the "Min: X units" / "Single unit" line — for both
   wholesale and retail cards — and the spacing it took up.
   Targets the FIRST .wholesale-details block specifically (the one
   directly after .seller-info), so the separate tier-pricing row
   that wholesale cards sometimes show underneath is untouched. */
body[data-page="index.html"] .p-card .seller-info + .wholesale-details{
  display:none;
}

/* Tighter card body all around */
body[data-page="index.html"] .p-card__body{
  padding:8px 10px 10px;
  gap:4px;
}
body[data-page="index.html"] .p-card__img img{
  padding:12px;
}
body[data-page="index.html"] .p-card__name{
  font-size:12px;
  min-height:30px;
  line-height:1.3;
}
body[data-page="index.html"] .p-card .seller-info{
  font-size:9.5px;
  margin-top:0;
}
body[data-page="index.html"] .price-tag{
  font-size:13px;
}
body[data-page="index.html"] .p-card__add{
  width:26px;
  height:26px;
}

@media(max-width:599px){
  body[data-page="index.html"] .p-card__body{
    padding:9px 10px 11px;
    gap:5px;
  }
  body[data-page="index.html"] .p-card__img img{
    padding:14px;
  }
  body[data-page="index.html"] .p-card__name{
    font-size:12.5px;
    min-height:32px;
  }
  body[data-page="index.html"] .price-tag{
    font-size:14px;
  }
}