/* Rex-Giddoty Hubs — Jumia-style marketplace interface.
 *
 * Two layout rules learned the hard way and worth keeping:
 *  - every grid/flex child holding arbitrary content gets min-width:0, because
 *    the default (auto) refuses to shrink below its content and pushes the whole
 *    page wider than the phone;
 *  - anything with aspect-ratio also states an explicit width, so the ratio can
 *    only ever derive the height and never run backwards into the width.
 */

:root{
  --brand:#f68b1e;        /* the orange everything hangs off */
  --brandv:#9030d0;       /* purple sampled from the logo artwork */
  --brand-dk:#e07d10;
  --flash:#be1d3e;        /* flash-sale header band */
  --beige:#fce7bb;        /* section header bands */
  --ink:#282828;
  --ink-2:#4a4a4a;
  --mute:#7a7a7a;
  --line:#e6e6e6;
  --paper:#fff;
  --bg:#f1f1f2;
  --dark:#282828;
  --dark-2:#313133;
  --rad:4px;
  --shadow:0 1px 2px rgba(0,0,0,.08);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--ink);
  font-family:Roboto,"Segoe UI",system-ui,Arial,sans-serif;
  font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;border:0;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
h1,h2,h3,h4{margin:0;font-weight:500;}
ul{margin:0;padding:0;list-style:none;}

.wrap{max-width:1200px;margin:0 auto;padding:0 8px;}
.wrap > *{min-width:0;}

/* ─────────────────────────── header ─────────────────────────── */

.promo{background:#009afd;color:#fff;text-align:center;font-size:13px;font-weight:500;padding:7px 12px;}

.vbar{background:#eaeaea;border-bottom:1px solid #ddd;font-size:12px;color:var(--ink-2);}
.vbar__in{
  max-width:1200px;margin:0 auto;padding:6px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.vbar__in > *{min-width:0;}
.vbar a{color:var(--brand);font-weight:500;display:inline-flex;align-items:center;gap:5px;}
.vbar a:hover{text-decoration:underline;}
.vbar a svg{width:15px;height:15px;}
.vbar__mid{font-weight:700;letter-spacing:.5px;color:var(--mute);text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.hdr{background:var(--paper);position:sticky;top:0;z-index:70;box-shadow:var(--shadow);}
.hdr__main{max-width:1200px;margin:0 auto;padding:10px;display:flex;align-items:center;gap:12px;}
.hdr__main > *{min-width:0;}

.burger{display:none;background:none;border:0;padding:6px;color:var(--ink);}
.burger svg{width:24px;height:24px;}

/* The supplied logo has a white wordmark, so on the light header we show the
   purple mark only and set the name in type beside it. The full artwork is used
   in the footer, where the dark panel it was drawn for lets it read properly. */
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0;line-height:1;}
.logo__mark{height:40px;width:auto;flex-shrink:0;}
.logo__txt{display:flex;flex-direction:column;gap:3px;white-space:nowrap;}
.logo__txt b{font-size:19px;font-weight:800;letter-spacing:-.5px;color:var(--brandv);}
.logo__txt b em{font-style:normal;color:var(--ink);}
.logo__txt i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--mute);}

.search{
  flex:1;min-width:0;display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:24px;background:var(--paper);
  padding:3px 3px 3px 12px;
}
.search svg{width:20px;height:20px;color:var(--mute);flex-shrink:0;}
.search input{flex:1;min-width:0;border:0;outline:0;background:none;padding:9px 0;font-size:14px;}
.search input::placeholder{color:#9a9a9a;}
.search button{
  border:0;border-radius:24px;background:var(--brand);color:#fff;
  font-weight:500;padding:9px 20px;flex-shrink:0;
}
.search button:hover{background:var(--brand-dk);}

.hdr__acts{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.hact{display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:var(--rad);
  position:relative;white-space:nowrap;font-size:15px;}
.hact:hover{color:var(--brand);}
.hact svg{width:22px;height:22px;flex-shrink:0;}
.hact .caret{width:15px;height:15px;opacity:.7;}
.cart-badge{
  position:absolute;top:2px;left:24px;min-width:17px;height:17px;padding:0 4px;
  background:var(--brand);color:#fff;border-radius:9px;
  font-size:11px;font-weight:700;line-height:17px;text-align:center;
}

/* hover menus — pure CSS, so there is no open/closed state to get out of sync */
.dpdw{position:relative;}
.dpdw__box{
  position:absolute;right:0;top:100%;min-width:212px;background:var(--paper);
  border-radius:var(--rad);box-shadow:0 6px 18px rgba(0,0,0,.16);
  padding:6px 0;display:none;z-index:80;
}
.dpdw:hover .dpdw__box,.dpdw:focus-within .dpdw__box{display:block;}
.dpdw__box a{display:block;padding:9px 16px;font-size:13.5px;white-space:nowrap;}
.dpdw__box a:hover{background:#f6f6f6;color:var(--brand);}
.dpdw__box .lead{padding:12px 14px;border-bottom:1px solid var(--line);}
.dpdw__box .lead .btn{width:100%;}

/* ─────────────────────────── shell ─────────────────────────── */

.shell{
  max-width:1200px;margin:8px auto;padding:0 8px;
  display:grid;grid-template-columns:200px 1fr;gap:8px;align-items:start;
}
.shell > *{min-width:0;}
.shell--full{grid-template-columns:1fr;}

.box{background:var(--paper);border-radius:var(--rad);box-shadow:var(--shadow);}
.box__hd{padding:11px 14px;font-weight:600;border-bottom:1px solid var(--line);}

.rail-box{padding:6px 0;overflow:hidden;}
.rail{display:flex;flex-direction:column;}
.rail a{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13.5px;
  color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rail a:hover{background:#f6f6f6;color:var(--brand);}
.rail a.on{color:var(--brand);font-weight:600;}
.rail a svg{width:19px;height:19px;flex-shrink:0;}

/* expandable group (Collection ▾ Tops, Bottoms, …) */
.rail__row{display:flex;align-items:center;}
.rail__row > a{flex:1;min-width:0;}
.rail__tog{border:0;background:none;padding:8px 12px;color:var(--mute);
  display:grid;place-items:center;flex-shrink:0;}
.rail__tog:hover{color:var(--brand);}
.rail__tog svg{width:15px;height:15px;transition:transform .18s ease;}
.rail__grp.open > .rail__row .rail__tog svg{transform:rotate(180deg);}
.rail__sub{display:none;background:#fafafa;}
.rail__grp.open > .rail__sub{display:block;}
.rail__sub a{padding-left:34px;font-size:13px;}

/* same markup inside the mobile drawer, with the drawer's spacing */
.drawer__panel .rail__row > a{border-bottom:1px solid #f2f2f2;}
.drawer__panel .rail__tog{padding:12px 16px;border-bottom:1px solid #f2f2f2;}
.drawer__panel .rail__tog svg{width:18px;height:18px;}
.drawer__panel .rail__sub a{padding-left:46px;background:#fafafa;font-size:13.5px;}

/* ───────────────────── top block: slider + services ───────────────────── */

.topblock{display:grid;grid-template-columns:1fr 210px;gap:8px;align-items:stretch;}
.topblock > *{min-width:0;}

.slider{
  position:relative;width:100%;max-width:100%;
  aspect-ratio:712/384;min-height:150px;
  border-radius:var(--rad);overflow:hidden;background:#dfe3e6;
}
.slider__track{display:flex;height:100%;transition:transform .45s ease;}
.slider__slide{flex:0 0 100%;width:100%;height:100%;position:relative;min-width:0;}
.slider__slide img{width:100%;height:100%;object-fit:cover;}
.slider__cap{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:8px;padding:6% 7%;color:#fff;
  background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.14) 62%,transparent);
}
.slider__cap h2{font-size:clamp(17px,2.6vw,30px);font-weight:800;line-height:1.15;}
.slider__cap p{margin:0;font-size:clamp(12px,1.5vw,15px);opacity:.92;}
.slider__cap .btn{align-self:flex-start;}
.slider__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:32px;height:44px;border:0;background:rgba(0,0,0,.35);color:#fff;
  display:grid;place-items:center;
}
.slider__nav svg{width:22px;height:22px;}
.slider__nav._p{left:0;border-radius:0 4px 4px 0;}
.slider__nav._n{right:0;border-radius:4px 0 0 4px;}
.slider__dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;}
.slider__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;}
.slider__dots i.on{background:#fff;width:18px;border-radius:4px;}

.svc{display:flex;flex-direction:column;gap:8px;}
.svc > *{min-width:0;}
.svc__card{background:var(--paper);border-radius:var(--rad);box-shadow:var(--shadow);padding:8px 12px;flex:0 0 auto;}
.svc__item{display:flex;align-items:center;gap:10px;padding:7px 0;}
.svc__item + .svc__item{border-top:1px solid #f2f2f2;}
.svc__item svg{width:26px;height:26px;color:var(--brand);flex-shrink:0;}
.svc__item > div{min-width:0;}
.svc__t{font-size:13px;font-weight:600;line-height:1.2;}
.svc__s{font-size:11.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.svc__promo{
  border-radius:var(--rad);overflow:hidden;background:var(--brand);color:#fff;
  padding:14px 12px;text-align:center;box-shadow:var(--shadow);
  flex:1;display:grid;align-content:center;
}
.svc__promo b{display:block;font-size:15px;font-weight:800;}
.svc__promo span{font-size:11.5px;opacity:.92;}

/* ───────────────────── sections ───────────────────── */

.sect{background:var(--paper);border-radius:var(--rad);box-shadow:var(--shadow);
  margin-top:8px;overflow:hidden;}

.sect__hd{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;background:var(--beige);}
.sect__hd > *{min-width:0;}
.sect__hd h2{font-size:19px;font-weight:500;flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.sect__hd h2 .sub{font-weight:400;font-size:14px;color:var(--ink-2);}
.sect__hd a{font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:3px;}
.sect__hd a:hover{text-decoration:underline;}
.sect__hd--plain{background:var(--paper);border-bottom:1px solid var(--line);}
.sect__hd--flash{background:var(--flash);color:#fff;}
.sect__hd--flash a{color:#fff;}
.sect__hd--dark{background:#276076;color:#fff;}
.sect__hd--dark a{color:#fff;}

.countdown{font-size:15px;white-space:nowrap;display:flex;align-items:center;gap:5px;}
.countdown b{background:rgba(0,0,0,.25);border-radius:3px;padding:2px 6px;
  font-variant-numeric:tabular-nums;font-weight:700;}

/* ───────────────────── product grid & cards ───────────────────── */

/* Separators are drawn on the cards, not as a coloured gap behind them: a row
   that is only part full then shows white space rather than grey slabs. */
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);background:var(--paper);}
.pgrid > *{min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}

.pcard{background:var(--paper);padding:9px;display:flex;flex-direction:column;position:relative;}
.pcard:hover{box-shadow:0 2px 12px rgba(0,0,0,.14);z-index:2;}
.pcard > a{display:block;min-width:0;}

.pcard__media{position:relative;width:100%;max-width:100%;aspect-ratio:1/1;
  background:#fff;overflow:hidden;border-radius:2px;}
.pcard__media img{width:100%;height:100%;object-fit:contain;}
.pcard__badge{position:absolute;top:0;left:0;background:var(--ink);color:#fff;
  font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:0 0 3px 0;
  text-transform:uppercase;letter-spacing:.3px;}
.pcard__off{position:absolute;top:0;right:0;background:var(--brand);color:#fff;
  font-size:11.5px;font-weight:700;padding:2px 6px;border-radius:0 0 0 3px;}
.pcard__out{position:absolute;inset:auto 0 0 0;background:rgba(40,40,40,.78);color:#fff;
  font-size:11.5px;text-align:center;padding:4px;}
.pcard__name{font-size:13px;color:var(--ink-2);margin-top:7px;line-height:1.3;
  height:34px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.pcard__price{font-size:15px;font-weight:700;color:var(--ink);}
.pcard__was{font-size:12px;color:var(--mute);text-decoration:line-through;margin-left:5px;}
.stars{font-size:11.5px;color:var(--mute);display:flex;align-items:center;gap:4px;}
.stars i{color:#f9a825;font-style:normal;letter-spacing:.5px;}

/* stock meter — the Jumia "N items left" treatment */
.bar{height:4px;border-radius:2px;background:#e0e0e0;overflow:hidden;margin-top:5px;}
.bar span{display:block;height:100%;background:var(--brand);}
.left-note{font-size:11.5px;color:var(--ink-2);margin-top:3px;}

.pcard__add{margin-top:8px;width:100%;border:1px solid var(--brand);border-radius:3px;
  background:#fff;color:var(--brand);font-weight:500;font-size:12.5px;padding:7px 6px;}
.pcard__add:hover:not(:disabled){background:var(--brand);color:#fff;}
.pcard__add:disabled{border-color:var(--line);color:#aaa;cursor:not-allowed;}

/* ───────────────────── carousels ───────────────────── */

.crs{position:relative;}
.crs__track{
  display:flex;background:var(--paper);
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.crs__track::-webkit-scrollbar{display:none;}
.crs__track > *{flex:0 0 16.666%;scroll-snap-align:start;min-width:0;
  border-right:1px solid var(--line);}
.crs__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:52px;border:0;z-index:3;
  background:rgba(255,255,255,.95);box-shadow:0 1px 6px rgba(0,0,0,.22);
  display:grid;place-items:center;color:var(--ink);
}
.crs__nav svg{width:22px;height:22px;}
.crs__nav._p{left:0;border-radius:0 4px 4px 0;}
.crs__nav._n{right:0;border-radius:4px 0 0 4px;}
.crs--static .crs__nav{display:none;}   /* nothing to scroll, so nothing to press */
@media (hover:none){.crs__nav{display:none;}}

/* thumbnail strip */
.thumbs{display:flex;gap:8px;padding:10px;overflow-x:auto;scrollbar-width:none;}
.thumbs::-webkit-scrollbar{display:none;}
.thumb{flex:0 0 108px;min-width:0;text-align:center;}
.thumb__img{width:100%;max-width:100%;aspect-ratio:1/1;border-radius:var(--rad);
  background:#f5f5f5;overflow:hidden;display:grid;place-items:center;}
.thumb__img img{width:100%;height:100%;object-fit:cover;}
.thumb__img span{font-size:26px;}
/* stand-in when a category has no card image yet: its own icon on a tinted
   panel, which beats borrowing an unrelated photo */
.thumb__img .ico{display:grid;place-items:center;width:100%;height:100%;
  color:var(--brandv);background:linear-gradient(#faf6ff,#f2e6fb);}
.thumb__img .ico svg{width:44%;height:44%;}
.thumb p{margin:6px 0 0;font-size:12.5px;line-height:1.25;color:var(--ink-2);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.thumb:hover p{color:var(--brand);}

/* six-across 3:4 promo tiles */
.freelinks{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:10px;}
.freelinks > *{min-width:0;}
.fl{position:relative;width:100%;max-width:100%;aspect-ratio:3/4;
  border-radius:var(--rad);overflow:hidden;background:#f5f5f5;}
.fl img{width:100%;height:100%;object-fit:cover;}
.fl__ico{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--brandv);background:linear-gradient(#faf6ff,#f2e6fb);}
.fl__ico svg{width:38%;height:38%;}
.fl__cap{position:absolute;inset:auto 0 0 0;padding:8px 9px;color:#fff;font-size:12.5px;
  font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.72));}
/* the caption sits on a dark scrim; over the pale icon panel it needs its own */
.fl:has(.fl__ico) .fl__cap{color:var(--ink);background:linear-gradient(transparent,rgba(255,255,255,.92));}

/* ───────────────────── bits ───────────────────── */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--brand);color:#fff;border:0;border-radius:3px;
  padding:11px 18px;font-weight:500;font-size:14px;}
.btn:hover{background:var(--brand-dk);}
.btn:disabled{background:#d4d4d4;color:#fff;cursor:not-allowed;}
.btn--ghost{background:#fff;color:var(--brand);border:1px solid var(--brand);}
.btn--ghost:hover{background:#fff5eb;}

.chips{display:flex;flex-wrap:wrap;gap:7px;flex:1 0 100%;}
.chips a{border:1px solid var(--line);border-radius:16px;padding:6px 13px;
  font-size:12.5px;color:var(--ink-2);background:#fff;white-space:nowrap;}
.chips a:hover{border-color:var(--brand);color:var(--brand);}
.chips a.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:500;}

.note{font-size:12.5px;color:var(--mute);}
.empty{padding:44px 18px;text-align:center;}
.empty p{color:var(--mute);}
.skeleton{background:linear-gradient(90deg,#f2f2f2,#e8e8e8,#f2f2f2);
  background-size:200% 100%;animation:sk 1.2s infinite;}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

.seo{padding:16px 18px;font-size:12.5px;color:var(--ink-2);line-height:1.7;}
.seo h1{font-size:17px;margin-bottom:8px;}
.seo h2{font-size:15px;margin:14px 0 6px;}
.seo a{color:var(--brand);font-weight:500;}

.b2top{position:fixed;right:14px;bottom:80px;z-index:50;
  width:42px;height:42px;border-radius:50%;border:0;
  background:var(--ink);color:#fff;display:none;place-items:center;
  box-shadow:0 3px 10px rgba(0,0,0,.3);}
.b2top.on{display:grid;}
.b2top svg{width:22px;height:22px;}

.toast{position:fixed;left:50%;bottom:86px;transform:translate(-50%,14px);
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:4px;
  font-size:13.5px;z-index:200;opacity:0;pointer-events:none;transition:.22s;}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ───────────────────── product page ───────────────────── */

.pdp{display:grid;grid-template-columns:1fr 320px;gap:8px;align-items:start;}
.pdp > *{min-width:0;}
.pdp__main{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:14px;}
.pdp__main > *{min-width:0;}

.gal__big{width:100%;max-width:100%;aspect-ratio:1/1;background:#fff;
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;}
.gal__big img{width:100%;height:100%;object-fit:contain;}
.gal__thumbs{display:flex;gap:7px;margin-top:9px;overflow-x:auto;scrollbar-width:none;}
.gal__thumbs::-webkit-scrollbar{display:none;}
.gal__thumbs img{flex:0 0 62px;width:62px;height:62px;object-fit:contain;
  border:1px solid var(--line);border-radius:3px;cursor:pointer;background:#fff;}
.gal__thumbs img.on{border-color:var(--brand);}

.price-now{font-size:26px;font-weight:700;}
.price-was{font-size:14px;color:var(--mute);text-decoration:line-through;margin-left:8px;}
.off-tag{background:#fdeee0;color:var(--brand);font-size:12px;font-weight:700;
  padding:2px 7px;border-radius:2px;margin-left:8px;}

.opt{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px;}
.opt button{border:1px solid var(--line);background:#fff;border-radius:3px;
  padding:8px 14px;font-size:13px;}
.opt button[aria-pressed="true"]{border-color:var(--brand);color:var(--brand);font-weight:600;}
.opt button:disabled{color:#bbb;text-decoration:line-through;cursor:not-allowed;}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:3px;overflow:hidden;}
.qty button{width:38px;height:38px;border:0;background:#fafafa;font-size:18px;}
.qty span{min-width:42px;text-align:center;font-weight:600;}

/* ───────────────────── footer ───────────────────── */

.foot{background:var(--dark-2);color:#dcdcdc;font-size:12.5px;margin-top:10px;padding-bottom:70px;}
.foot a{color:#dcdcdc;}
.foot a:hover{color:var(--brand);}

.foot__news{background:var(--dark);padding:22px 0;}
.foot__news .in{max-width:1200px;margin:0 auto;padding:0 10px;
  display:grid;grid-template-columns:1fr 1.4fr;gap:26px;align-items:start;}
.foot__news .in > *{min-width:0;}
.foot__t{color:#fff;font-weight:700;font-size:13.5px;margin-bottom:8px;}
.foot__form{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.foot__form input{flex:1;min-width:180px;border:1px solid #4a4a4c;background:#3a3a3c;
  color:#fff;border-radius:3px;padding:11px 12px;outline:0;}
.foot__form input::placeholder{color:#9a9a9a;}
.foot__form button{border:1px solid var(--brand);background:none;color:var(--brand);
  border-radius:3px;padding:11px 22px;font-weight:500;}
.foot__form button:hover{background:var(--brand);color:#fff;}

.foot__grid{max-width:1200px;margin:0 auto;padding:26px 10px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.foot__grid > *{min-width:0;}
.foot__grid h4{color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.3px;margin-bottom:11px;}
.foot__grid a{display:block;padding:4px 0;}
.foot__grid p{margin:0;}

.foot__pay{max-width:1200px;margin:0 auto;padding:0 10px 22px;
  display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.foot__pay > *{min-width:0;}
.foot__ic{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.foot__ic span{background:#3d3d3f;border-radius:3px;padding:6px 10px;font-size:11.5px;color:#e8e8e8;}
.foot__ic a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#3d3d3f;}
.foot__ic a svg{width:18px;height:18px;}

.foot__base{border-top:1px solid #444;text-align:center;padding:16px 10px;
  color:#a9a9a9;font-size:12px;}

/* ───────────────────── mobile tab bar ───────────────────── */

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:var(--paper);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);}
.tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 2px 6px;font-size:10.5px;color:var(--mute);position:relative;}
.tabbar a.on{color:var(--brand);}
.tabbar a svg{width:22px;height:22px;}
.tabbar .cart-badge{left:auto;right:calc(50% - 20px);top:2px;}

/* ───────────────────── drawer ───────────────────── */

.drawer{position:fixed;inset:0;z-index:120;display:none;}
.drawer.open{display:block;}
.drawer__bg{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.drawer__panel{position:absolute;left:0;top:0;bottom:0;width:82%;max-width:310px;
  background:var(--paper);overflow-y:auto;padding-bottom:24px;animation:slidein .2s ease;}
@keyframes slidein{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.drawer__panel .hd{background:var(--brand);color:#fff;font-weight:700;font-size:16px;padding:16px;}
.drawer__panel a{display:flex;align-items:center;gap:9px;padding:12px 16px;
  border-bottom:1px solid #f2f2f2;font-size:14px;}
.drawer__panel a svg{width:20px;height:20px;color:var(--mute);flex-shrink:0;}

/* ───────────────────── responsive ───────────────────── */

@media (max-width:1024px){
  .pgrid{grid-template-columns:repeat(4,1fr);}
  .crs__track > *{flex:0 0 25%;}
  .freelinks{grid-template-columns:repeat(4,1fr);}
  .topblock{grid-template-columns:1fr;}
  .svc{flex-direction:row;}
  .svc__card,.svc__promo{flex:1;min-width:0;}
}

@media (max-width:860px){
  .shell{grid-template-columns:1fr;}
  .rail-box{display:none;}
  .pdp{grid-template-columns:1fr;}
  .foot__news .in{grid-template-columns:1fr;}
  .foot__grid{grid-template-columns:repeat(2,1fr);}
  .foot__pay{grid-template-columns:1fr;}
}

@media (max-width:720px){
  .vbar{display:none;}
  .burger{display:block;}
  .hdr__main{gap:8px;padding:8px 10px;flex-wrap:wrap;}
  .logo__mark{height:32px;}
  .logo__txt b{font-size:16px;}
  .logo__txt i{display:none;}
  .search{order:3;flex:1 0 100%;}
  .search button{padding:9px 14px;}
  .hact--label,.hact .caret{display:none;}
  .hact{padding:8px 6px;}
  .dpdw__box{display:none !important;}   /* touch has no hover; the drawer covers this */
  .hdr__acts{margin-left:auto;}

  .pgrid{grid-template-columns:repeat(2,1fr);}
  .crs__track > *{flex:0 0 50%;}
  .freelinks{grid-template-columns:repeat(3,1fr);gap:6px;}
  .pdp__main{grid-template-columns:1fr;gap:14px;padding:12px;}
  .sect__hd{padding:0 11px;gap:8px;}
  .sect__hd h2{font-size:16px;}
  .sect__hd a{font-size:12.5px;}
  .countdown{font-size:12.5px;}
  .price-now{font-size:22px;}
  .tabbar{display:flex;}
  .b2top{bottom:74px;}
  .thumb{flex:0 0 88px;}
  .slider{min-height:130px;}
  .svc{flex-direction:column;}
  .foot__grid{grid-template-columns:1fr;gap:14px;}
}

@media (max-width:380px){
  .logo__mark{height:28px;}
  .logo__txt b{font-size:14px;}
  .pcard{padding:7px;}
  .freelinks{grid-template-columns:repeat(2,1fr);}
}