/* ============================================================
   Deepa Shop — main.css (Phase 1)
   Brand: Deepa Red / Black / White automotive e-commerce
   ============================================================ */
:root{
  --color-brand-primary:#E60000;
  --color-brand-primary-hover:#CC0000;
  --color-brand-secondary:#000000;
  --color-brand-dark:#111111;
  --color-brand-light:#FFFFFF;
  --color-brand-muted:#F5F6F8;
  --color-brand-border:#E5E7EB;
  --color-text-main:#15171C;
  --color-text-muted:#6B7280;
  --color-success:#16A34A;
  --color-warning:#F59E0B;
  --color-error:#DC2626;

  --font-en:'Manrope',system-ui,Segoe UI,Roboto,sans-serif;
  --font-ar:'Cairo',system-ui,Tahoma,sans-serif;

  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow:0 6px 18px rgba(16,24,40,.08);
  --shadow-lg:0 18px 48px rgba(16,24,40,.16);
  --container:1240px;
  --header-h:118px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-en);color:var(--color-text-main);
  background:var(--color-brand-light);line-height:1.55;font-size:15px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.lang-ar{font-family:var(--font-ar)}
/* The `hidden` attribute must always win over class-level display rules
   (overlays/modals toggle via [hidden]; without this they'd render on load). */
[hidden]{display:none!important}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:800;letter-spacing:-.01em}
ul{margin:0;padding:0;list-style:none}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:18px}
.ic{width:20px;height:20px;flex:0 0 auto}
.ic.flip{transform:scaleX(-1)}
.lang-ar .ic.end{transform:scaleX(-1)}

/* ---------------- Buttons ---------------- */
.btn{
  --bg:var(--color-brand-primary);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--bg);color:var(--fg);border:none;border-radius:999px;
  padding:11px 20px;font-weight:700;font-size:14px;line-height:1;
  transition:transform .08s ease,filter .15s ease,background .15s ease;white-space:nowrap;
}
.btn:hover{filter:brightness(.96)}
.btn:active{transform:translateY(1px)}
.btn .ic{width:18px;height:18px}
.btn--primary{--bg:var(--color-brand-primary)}
.btn--primary:hover{background:var(--color-brand-primary-hover)}
.btn--dark{--bg:var(--color-brand-secondary)}
.btn--light{--bg:#fff;--fg:var(--color-brand-secondary)}
.btn--whatsapp{--bg:#25D366;--fg:#06231a}
.btn--outline{--bg:#fff;--fg:var(--color-text-main);border:1.5px solid var(--color-brand-border)}
.btn--outline:hover{border-color:var(--color-brand-secondary)}
.btn--outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn--lg{padding:14px 26px;font-size:15px}
.btn--block{width:100%}

/* ---------------- Badges / chips / tags ---------------- */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;
  padding:4px 9px;border-radius:999px;line-height:1;letter-spacing:.02em}
.badge--red{background:var(--color-brand-primary);color:#fff}
.badge--dark{background:var(--color-brand-secondary);color:#fff}
.badge--amber{background:#FEF3C7;color:#92400E}
.badge--green{background:#16a34a;color:#fff}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--color-brand-muted);
  border:1px solid var(--color-brand-border);color:var(--color-text-main);
  font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px}
.chip--red{background:#FEECEC;border-color:#F7C9C9;color:var(--color-brand-primary)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;
  color:var(--color-text-muted)}
.tag .ic{width:14px;height:14px;color:var(--color-brand-primary)}

/* ---------------- Stars ---------------- */
.stars{display:inline-flex;align-items:center;gap:1px;font-size:13px;color:#E5E7EB}
.stars .star.on{color:#F5B301}
.stars-count{color:var(--color-text-muted);font-size:11px;margin-inline-start:4px}

/* ============================================================
   Announcement bar
   ============================================================ */
.announce{background:var(--color-brand-secondary);color:#fff;font-size:13px}
.announce__inner{display:flex;align-items:center;gap:10px;height:38px}
.announce__track{flex:1;position:relative;height:38px;overflow:hidden}
.announce__item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:8px;opacity:0;transition:opacity .4s ease;font-weight:600}
.announce__item.is-active{opacity:1}
.announce__item .ic{width:15px;height:15px;color:var(--color-brand-primary)}
.announce__nav{background:transparent;border:none;color:#fff;opacity:.7;display:flex;padding:4px}
.announce__nav:hover{opacity:1}

/* ============================================================
   Header
   ============================================================ */
.header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--color-brand-border);
  box-shadow:var(--shadow-sm)}
.header__inner{display:flex;align-items:center;gap:16px;height:74px}
.header__burger{display:none;background:transparent;border:none;color:var(--color-text-main)}
.header__logo img{height:42px;width:auto;max-width:128px;object-fit:contain}
.header__search{flex:1;display:flex;align-items:center;background:var(--color-brand-muted);
  border:1.5px solid transparent;border-radius:999px;padding:0 6px 0 16px;max-width:560px}
.header__search:focus-within{border-color:var(--color-brand-primary);background:#fff}
.header__search input{flex:1;border:none;background:transparent;outline:none;height:44px;font-size:14px;
  color:var(--color-text-main)}
.header__search button{background:var(--color-brand-primary);color:#fff;border:none;width:40px;height:36px;
  border-radius:999px;display:flex;align-items:center;justify-content:center}
.header__mobile-search{display:none}
.header__search,.header__mobile-search{position:relative}
.searchsuggest{position:absolute;z-index:80;top:calc(100% + 8px);inset-inline:0;background:#fff;border:1px solid var(--color-brand-border);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;text-align:start}
.searchsuggest__item{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--color-brand-border)}
.searchsuggest__item:last-child{border-bottom:0}
.searchsuggest__item:hover{background:var(--color-brand-muted)}
.searchsuggest__item img,.searchsuggest__ph{width:46px;height:40px;border-radius:8px;background:#f3f4f6;object-fit:contain}
.searchsuggest__item strong{display:block;font-size:13px;line-height:1.25;color:var(--color-text-main)}
.searchsuggest__item small{display:block;margin-top:2px;color:var(--color-text-muted);font-size:11px;text-transform:uppercase}
.searchsuggest__item b{font-size:12px;color:var(--color-brand-primary);white-space:nowrap}
.header__actions{display:flex;align-items:center;gap:6px}
.header__lang{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1.5px solid var(--color-brand-border);
  border-radius:999px;font-weight:700;font-size:13px}
.header__lang .ic{width:17px;height:17px}
.header__lang:hover{border-color:var(--color-brand-secondary)}
.header__icon{position:relative;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;color:var(--color-text-main)}
.header__icon:hover{background:var(--color-brand-muted)}
.header__cart-badge{position:absolute;top:4px;inset-inline-end:4px;background:var(--color-brand-primary);
  color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 4px}
.header__hotline{display:flex;align-items:center;gap:8px;background:var(--color-brand-muted);
  padding:7px 14px;border-radius:12px}
.header__hotline .ic{color:var(--color-brand-primary)}
.header__hotline-text{display:flex;flex-direction:column;line-height:1.15}
.header__hotline-text small{font-size:10px;color:var(--color-text-muted)}
.header__hotline-text strong{font-size:14px;font-weight:800}

.loc-chip{background:var(--color-brand-muted);border:1px solid var(--color-brand-border);border-radius:10px;
  padding:10px;font-weight:600;font-size:13px;text-align:center}
.loc-chip:hover{border-color:var(--color-brand-primary);color:var(--color-brand-primary)}

/* ============================================================
   Main navigation
   ============================================================ */
.mainnav{background:#fff;border-bottom:1px solid var(--color-brand-border);position:sticky;top:74px;z-index:55}
.mainnav__inner{display:flex;align-items:center;gap:14px;height:46px}
.mainnav__all{display:inline-flex;align-items:center;gap:7px;background:var(--color-brand-secondary);color:#fff;
  padding:9px 16px;border-radius:10px;font-weight:700;font-size:13px}
.mainnav__all .ic{width:16px;height:16px}
.mainnav__list{display:flex;align-items:center;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.mainnav__list::-webkit-scrollbar{display:none}
.mainnav__list a{display:inline-flex;align-items:center;padding:8px 12px;font-weight:600;font-size:14px;
  color:var(--color-text-main);border-radius:8px;white-space:nowrap;position:relative}
.mainnav__list a:hover{background:var(--color-brand-muted)}
.mainnav__list a.is-active{color:var(--color-brand-primary)}
.mainnav__list a.is-active::after{content:"";position:absolute;inset-inline:12px;bottom:-1px;height:3px;
  background:var(--color-brand-primary);border-radius:3px}
.mainnav__list a.is-hot{color:var(--color-brand-primary)}
.mainnav__wa{display:inline-flex;align-items:center;gap:6px;color:#1FA855;font-weight:700;font-size:13px;white-space:nowrap}

/* ============================================================
   Generic section
   ============================================================ */
.section{padding:42px 0}
.section--tight{padding:26px 0}
.section--muted{background:var(--color-brand-muted)}
.section--dark{background:var(--color-brand-secondary);color:#fff}
.section__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.section__head--center{justify-content:center;text-align:center}
.section__title{font-size:24px;display:inline-flex;align-items:center;gap:9px}
.section__title .ic{color:var(--color-brand-primary)}
.section__link{display:inline-flex;align-items:center;gap:4px;color:var(--color-brand-primary);font-weight:700;font-size:14px}
.page-title{font-size:28px;margin-bottom:22px}

/* ============================================================
   Hero
   ============================================================ */
.hero{background:
  radial-gradient(1100px 380px at 85% -10%,rgba(230,0,0,.10),transparent 60%),
  linear-gradient(180deg,#fff, #fafbfc);
  padding:40px 0 36px;border-bottom:1px solid var(--color-brand-border)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero__eyebrow{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--color-brand-border);
  color:var(--color-brand-primary);font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px;box-shadow:var(--shadow-sm)}
.hero__eyebrow .ic{width:15px;height:15px}
.hero__title{font-size:42px;line-height:1.12;margin:16px 0 12px;letter-spacing:-.02em}
.hero__sub{font-size:17px;color:var(--color-text-muted);max-width:540px;margin:0 0 22px}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px}
.hero__points{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px}
.hero__points li{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;color:var(--color-text-main)}
.hero__points .ic{width:16px;height:16px;color:var(--color-success)}

.hero__finder{background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:22px}
.hero__finder-head{margin-bottom:14px}
.hero__finder-head h2{font-size:20px}
.hero__finder-head p{margin:4px 0 0;color:var(--color-text-muted);font-size:13px}

/* ============================================================
   Home finder hub
   ============================================================ */
.homefinder{background:#050505;color:#fff;padding:34px 0 28px;border-bottom:1px solid #1f1f1f}
.homefinder__inner{display:grid;gap:20px;max-width:980px}
.homefinder__head{text-align:center;display:grid;gap:8px}
.homefinder__head span{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#f3f4f6;font-weight:800;font-size:13px}
.homefinder__head span .ic{width:16px;height:16px;color:var(--color-brand-primary)}
.homefinder__head h1{font-size:32px}
.homefinder__head p{margin:0;color:#a1a1aa}
.homefinder .finder{background:#171719;border:1px solid #2a2a2d;border-radius:14px;padding:18px;box-shadow:0 18px 42px rgba(0,0,0,.28)}
.homefinder .finder__tab{background:#26262a;color:#fff;border-color:#303036}
.homefinder .finder__tab.is-active{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:#fff;box-shadow:none}
.homefinder .finder__mode{border-color:#3a3a40;color:#d1d5db}
.homefinder .finder__mode.is-active{background:#fff;color:#111;border-color:#fff}
.homefinder .finder select{background-color:#242428;border-color:#33343a;color:#fff}
.homefinder .finder__go{background:var(--color-brand-primary);color:#fff}
.finder--compact .finder__form.is-active{grid-template-columns:repeat(3,1fr) auto;align-items:center}
.finder--compact .finder__form--car-size.is-active{grid-template-columns:repeat(3,1fr)}
.finder--compact .finder__form--car-size select[name="battery_size"]{grid-column:1 / -1}
.finder--compact .finder__form--car-size .finder__go{grid-column:auto}
.finder--compact .finder__go{grid-column:auto;margin:0;min-height:46px}
.homefinder__brands{display:flex;gap:18px;align-items:center;overflow:hidden;white-space:nowrap;border-top:1px solid #1f1f1f;padding-top:16px;color:#fff}
.homefinder__brands a{min-width:82px;height:38px;font-weight:900;font-size:13px;text-transform:uppercase;opacity:.86;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.homefinder__brands img{width:74px;height:30px;object-fit:contain;background:#fff;border-radius:8px;padding:4px}
.homefinder__brands span{display:block;max-width:82px;overflow:hidden;text-overflow:ellipsis;text-align:center}
.homefinder__brands a:hover{color:var(--color-brand-primary);opacity:1}

/* ---------------- Finder ---------------- */
.finder__tabs{display:flex;gap:8px;margin-bottom:14px}
.finder__tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--color-brand-muted);border:1.5px solid transparent;border-radius:12px;padding:12px;
  font-weight:700;font-size:14px;color:var(--color-text-main)}
.finder__tab .ic{width:18px;height:18px}
.finder__tab.is-active{background:#fff;border-color:var(--color-brand-primary);color:var(--color-brand-primary);
  box-shadow:0 0 0 3px rgba(230,0,0,.08)}
.finder__panel{display:none}
.finder__panel.is-active{display:block}
.finder__modes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.finder__mode{background:transparent;border:1px solid var(--color-brand-border);border-radius:999px;
  padding:7px 13px;font-weight:600;font-size:12.5px;color:var(--color-text-muted)}
.finder__mode.is-active{background:var(--color-brand-secondary);border-color:var(--color-brand-secondary);color:#fff}
.finder__form{display:none;grid-template-columns:1fr 1fr;gap:10px}
.finder__form.is-active{display:grid}
.finder__form select{grid-column:span 1}
.finder__go{grid-column:1 / -1;margin-top:2px}
.finder select,.field input,.field select,.field textarea,.cattoolbar__sort select,
.cartsummary__coupon input,.filters__price input{
  width:100%;height:46px;border:1.5px solid var(--color-brand-border);border-radius:12px;padding:0 14px;
  font-family:inherit;font-size:14px;background:#fff;color:var(--color-text-main);outline:none;appearance:none}
.field textarea{height:auto;padding:12px 14px}
.finder select:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-brand-primary)}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-inline-end:34px}
.lang-ar select{background-position:left 14px center;padding-inline-end:14px;padding-inline-start:34px}

/* ============================================================
   Category cards (homepage)
   ============================================================ */
.homepromos{padding:28px 0 4px;background:#fff}
.promo-carousel{position:relative}
.promo-carousel__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:10px}
.promo-carousel__track::-webkit-scrollbar,.pgrid--rail::-webkit-scrollbar,.catgrid--rail::-webkit-scrollbar{display:none}
.promo-slide{flex:0 0 100%;scroll-snap-align:center;display:block;border-radius:10px;overflow:hidden;background:#fff}
.promo-slide img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.promo-carousel__dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.promo-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--color-brand-border);cursor:pointer;transition:width .2s,background .2s}
.promo-dot.is-active{background:var(--color-brand-primary);width:26px;border-radius:5px}
.homebanners{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.homebanner{min-height:210px;border-radius:14px;overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:22px;color:#fff;background:
  linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.18)),
  var(--bg, linear-gradient(135deg,#111,#333));background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.12)}
.homebanner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35));pointer-events:none}
.homebanner span,.homebanner b{position:relative;z-index:1}
.homebanner strong{display:block;font-size:22px;line-height:1.2}
.homebanner small{display:block;margin-top:4px;color:rgba(255,255,255,.82);font-weight:800}
.homebanner b{display:inline-flex;align-items:center;gap:6px;width:max-content;background:#fff;color:#111;border-radius:8px;padding:10px 13px;font-size:13px}
.homebanner b .ic{width:15px;height:15px}
.catgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.catgrid--rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}
.catgrid--rail .catcard{flex:0 0 180px;scroll-snap-align:start}
.catcard{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--color-brand-border);
  border-radius:var(--radius);padding:18px 16px;transition:.15s;position:relative;overflow:hidden}
.catcard:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow);transform:translateY(-2px)}
.catcard__ic{width:48px;height:48px;border-radius:12px;background:#FEECEC;color:var(--color-brand-primary);
  display:flex;align-items:center;justify-content:center}
.catcard__ic .ic{width:26px;height:26px}
.catcard__name{font-weight:800;font-size:15px}
.catcard__sub{font-size:12px;color:var(--color-text-muted);flex:1}
.catcard__go{display:inline-flex;align-items:center;gap:4px;color:var(--color-brand-primary);font-weight:700;font-size:12px}
.catcard__go .ic{width:14px;height:14px}

/* ---------------- Promise strip ---------------- */
.promise-strip{background:var(--color-brand-secondary);color:#fff;padding:20px 0}
.promise-strip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ps{display:flex;align-items:center;gap:12px}
.ps span{width:42px;height:42px;flex:0 0 auto;border-radius:12px;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;color:var(--color-brand-primary)}
.ps strong{display:block;font-size:14px}
.ps small{color:rgba(255,255,255,.65);font-size:12px}

/* ---------------- Why Deepa ---------------- */
.whydeepa{background:#fff}
.whydeepa__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.whydeepa__grid article{display:grid;justify-items:center;gap:10px;padding:10px 14px}
.whydeepa__grid .ic{width:46px;height:46px;color:var(--color-brand-primary);background:#fff5f5;border:1px solid #fee2e2;border-radius:14px;padding:10px}
.whydeepa__grid strong{font-size:15px}
.whydeepa__grid p{margin:0;color:var(--color-text-muted);font-size:13px;line-height:1.6}

/* ============================================================
   Product grid + card
   ============================================================ */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pgrid--3{grid-template-columns:repeat(3,1fr)}
.pgrid--4{grid-template-columns:repeat(4,1fr)}
.pgrid--rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.pgrid--rail .card{flex:0 0 260px;scroll-snap-align:start}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--color-brand-border);
  border-radius:var(--radius);overflow:hidden;transition:.16s}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:#dfe3e9}
.card__media{position:relative;background:#fff}
.card__imglink{display:block}
.prod-img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}
.card__badges{position:absolute;top:10px;inset-inline-start:10px;display:flex;flex-direction:column;gap:5px}
.card__hover{position:absolute;inset-inline:10px;bottom:10px;opacity:0;transform:translateY(8px);transition:.16s}
.card:hover .card__hover{opacity:1;transform:none}
.card__hover-btn{width:100%;background:rgba(17,17,17,.92);color:#fff;border:none;border-radius:10px;padding:9px;
  font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.card__hover-btn .ic{width:15px;height:15px}
.card__body{display:flex;flex-direction:column;gap:8px;padding:14px;flex:1}
.card__brandrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card__brand{font-size:12px;font-weight:700;color:var(--color-brand-primary);text-transform:uppercase;letter-spacing:.03em;display:inline-flex;align-items:center;gap:6px;min-width:0}
.card__brandlogo{width:36px;height:18px;object-fit:contain;background:#fff;border:1px solid var(--color-brand-border);border-radius:5px;padding:2px;flex:0 0 auto}
.card__title{font-size:14.5px;font-weight:700;line-height:1.35;min-height:38px}
.card__title a:hover{color:var(--color-brand-primary)}
.card__desc{font-size:12.5px;color:var(--color-text-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.card__tags{display:flex;flex-wrap:wrap;gap:8px}
.card__stock{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.card__stock i{width:7px;height:7px;border-radius:999px;background:currentColor}
.stock--in_stock{color:var(--color-success)}
.stock--low_stock{color:var(--color-warning)}
.stock--out_of_stock{color:var(--color-text-muted)}
.card__exchange{display:flex;align-items:center;gap:8px;margin:2px 0 4px;padding:8px 10px;border:1px solid #fee2e2;background:#fff5f5;border-radius:8px;font-size:12px;font-weight:800;color:#374151}
.card__exchange input{accent-color:var(--color-brand-primary)}
.card__exchange strong{margin-inline-start:auto;color:var(--color-brand-primary);white-space:nowrap}
.card__exchange-pill{border:0;background:rgba(17,17,17,.92);color:#fff;border-radius:9px;padding:9px 10px;margin:-2px 0 4px}
.card__exchange-pill input{appearance:none;width:38px;height:22px;border-radius:999px;background:#e5e7eb;position:relative;flex:0 0 auto;accent-color:unset}
.card__exchange-pill input::after{content:"";position:absolute;width:18px;height:18px;border-radius:999px;background:#fff;top:2px;inset-inline-start:2px;transition:.16s}
.card__exchange-pill input:checked{background:var(--color-brand-primary)}
.card__exchange-pill input:checked::after{inset-inline-start:18px}
.card__exchange-pill strong{color:#fff}
.card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.card__price{display:flex;flex-direction:column;line-height:1.1}
.price{font-size:18px;font-weight:900;color:var(--color-brand-secondary)}
.price small{font-size:11px;font-weight:700;color:var(--color-text-muted)}
.price-old{font-size:13px;color:var(--color-text-muted);text-decoration:line-through}
.card__add{width:44px;height:44px;border-radius:12px;background:var(--color-brand-primary);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.card__add:hover{background:var(--color-brand-primary-hover)}
.card__cartctl{display:flex;align-items:center;justify-content:flex-end;min-width:92px}
.card__stepper{display:grid;grid-template-columns:30px 32px 30px;align-items:center;border:1px solid var(--color-brand-primary);border-radius:12px;overflow:hidden;background:#fff;color:var(--color-brand-primary);font-weight:900}
.card__stepper button{width:30px;height:34px;border:none;background:#fff;color:inherit;display:flex;align-items:center;justify-content:center}
.card__stepper span{text-align:center;font-size:13px}
.card__stepper .ic{width:14px;height:14px}
.card__buy-now{width:100%;border:1px solid var(--color-brand-secondary);background:var(--color-brand-secondary);color:#fff;border-radius:10px;padding:9px 10px;font-weight:900;font-size:13px}
.card__buy-now:hover{background:#000}
.card__unavailable{display:flex;align-items:center;justify-content:center;width:100%;border:1px solid var(--color-brand-border);background:#f3f4f6;color:var(--color-text-muted);border-radius:10px;padding:9px 10px;font-weight:900;font-size:13px}
.btn--disabled,.btn--disabled:hover{background:#e5e7eb!important;border-color:#e5e7eb!important;color:#6b7280!important;cursor:not-allowed!important;box-shadow:none!important}

/* ---------------- Deals banner ---------------- */
.deals-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(100deg,var(--color-brand-secondary),#2a2a2a);color:#fff;
  border-radius:var(--radius-lg);padding:18px 24px;margin-bottom:20px}
.deals-banner__text{display:flex;align-items:center;gap:14px}
.deals-banner__text .ic{width:34px;height:34px;color:var(--color-brand-primary)}
.deals-banner__text strong{display:block;font-size:19px}
.deals-banner__text span{color:rgba(255,255,255,.7);font-size:13px}

/* ---------------- Brand row / chips ---------------- */
.brandrow{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.brandchip{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;
  border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:16px 10px;text-align:center;transition:.15s}
.brandchip:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow);transform:translateY(-2px)}
.brandchip__logo{width:50px;height:50px;border-radius:12px;background:var(--color-brand-secondary);color:#fff;
  font-weight:900;font-size:17px;display:flex;align-items:center;justify-content:center}
.brandchip__logo--img{background:#fff;border:1px solid var(--color-brand-border);object-fit:contain;padding:7px}
.brandchip__name{font-weight:700;font-size:13px}
.brandchip__count{font-size:11px;color:var(--color-text-muted)}

/* ---------------- Steps (how install) ---------------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;position:relative}
.step__num{width:46px;height:46px;border-radius:999px;background:var(--color-brand-primary);color:#fff;
  font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px rgba(230,0,0,.15)}
.step__label{font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}

/* ---------------- Services cards ---------------- */
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svcgrid--lg{grid-template-columns:repeat(3,1fr)}
.svccard{display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--color-brand-border);
  border-radius:var(--radius);padding:20px;transition:.15s}
.svccard:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow);transform:translateY(-2px)}
.svccard>.prod-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;margin-bottom:8px}
.svccard__ic{width:52px;height:52px;border-radius:14px;background:#FEECEC;color:var(--color-brand-primary);
  display:flex;align-items:center;justify-content:center}
.svccard__ic .ic{width:28px;height:28px}
.svccard strong{font-size:16px}
.svccard p{margin:0;font-size:13px;color:var(--color-text-muted);flex:1}
.svccard__price{font-weight:800;color:var(--color-brand-primary);font-size:14px}
.svccard__go{display:inline-flex;align-items:center;gap:4px;color:var(--color-text-main);font-weight:700;font-size:13px}
.svccard__go .ic{width:14px;height:14px}

/* ---------------- Testimonials ---------------- */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testi__card{margin:0;background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:20px}
.testi__card blockquote{margin:12px 0 16px;font-size:14.5px;line-height:1.6;color:var(--color-text-main)}
.testi__card figcaption{display:flex;align-items:center;gap:11px}
.testi__avatar{width:42px;height:42px;border-radius:999px;background:var(--color-brand-secondary);color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center}
.testi__card figcaption strong{display:block;font-size:14px}
.testi__card figcaption small{color:var(--color-text-muted);font-size:12px}

/* ---------------- Help CTA ---------------- */
.helpcta{background:
  radial-gradient(700px 300px at 12% 0,rgba(230,0,0,.22),transparent 60%),var(--color-brand-secondary);
  color:#fff;padding:40px 0}
.helpcta__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.helpcta h2{font-size:26px}
.helpcta p{margin:6px 0 0;color:rgba(255,255,255,.7)}
.helpcta__btns{display:flex;flex-wrap:wrap;gap:10px}

/* ---------------- Blog cards ---------------- */
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.blogcard{background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius);overflow:hidden;transition:.15s}
.blogcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.blogcard__media .prod-img{aspect-ratio:16/9}
.blogcard__body{padding:16px;display:flex;flex-direction:column;gap:8px}
.blogcard__cat{align-self:flex-start;background:#FEECEC;color:var(--color-brand-primary);font-weight:700;
  font-size:11px;padding:4px 10px;border-radius:999px}
.blogcard__body h3{font-size:16px;line-height:1.35}
.blogcard__body h3 a:hover{color:var(--color-brand-primary)}
.blogcard__body p{margin:0;font-size:13px;color:var(--color-text-muted)}
.blogcard__meta{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--color-text-muted)}
.blogcard__meta .ic{width:14px;height:14px}
.installment-strip{padding-top:8px}
.installment-banner{height:clamp(120px, 16vw, 180px);overflow:hidden;border:1px solid var(--color-brand-border);border-radius:8px;background:#fff}
.installment-banner img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#fff}

/* ============================================================
   Footer
   ============================================================ */
.footer{background:var(--color-brand-dark);color:#cdd1d8;margin-top:10px}
.footer__promise{background:#0c0c0c;border-bottom:1px solid rgba(255,255,255,.07)}
.footer__promise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:22px 0}
.fp{display:flex;align-items:center;gap:12px}
.fp__ic{width:42px;height:42px;border-radius:12px;background:rgba(230,0,0,.12);color:var(--color-brand-primary);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fp strong{display:block;color:#fff;font-size:14px}
.fp small{font-size:12px;color:#9aa0a8}
.footer__main{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:28px;padding:38px 0}
.footer__logo{margin-bottom:14px;background:#fff;border-radius:8px;padding:4px 8px;max-width:140px;object-fit:contain}
.footer__about p{font-size:13px;line-height:1.7;color:#9aa0a8;max-width:300px}
.footer__social{display:flex;gap:10px;margin-top:16px}
.footer__social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.07);color:#fff;
  display:flex;align-items:center;justify-content:center}
.footer__social a:hover{background:var(--color-brand-primary)}
.footer__col h4{color:#fff;font-size:14px;margin-bottom:14px}
.footer__col ul{display:flex;flex-direction:column;gap:9px}
.footer__col ul a{font-size:13px;color:#9aa0a8}
.footer__col ul a:hover{color:#fff}
.footer__contact li{display:flex;align-items:center;gap:9px;font-size:13px;color:#9aa0a8;margin-bottom:9px}
.footer__contact .ic{width:16px;height:16px;color:var(--color-brand-primary);flex:0 0 auto}
.footer__pay{border-top:1px solid rgba(255,255,255,.07)}
.footer__pay-inner{display:flex;align-items:center;gap:14px;padding:16px 0;flex-wrap:wrap}
.footer__pay-inner>span{font-size:13px;color:#9aa0a8}
.footer__pay-list{display:flex;flex-wrap:wrap;gap:8px}
.paychip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:8px;
  padding:6px 12px;font-size:12px;font-weight:600;color:#e5e7eb}
.footer__bottom{background:#0a0a0a;padding:16px 0;font-size:12.5px;color:#8a909a;text-align:center}

/* ============================================================
   Mobile bottom nav + floaters
   ============================================================ */
.botnav{display:none;position:fixed;bottom:0;inset-inline:0;z-index:70;background:#fff;
  border-top:1px solid var(--color-brand-border);box-shadow:0 -4px 16px rgba(16,24,40,.08);
  padding:6px 4px env(safe-area-inset-bottom)}
.botnav__item{flex:1;background:transparent;border:none;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:6px 2px;color:var(--color-text-muted);font-size:10.5px;font-weight:600;position:relative}
.botnav__item .ic{width:22px;height:22px}
.botnav__item.is-active{color:var(--color-brand-primary)}
.botnav__wa{color:#1FA855}
.botnav__badge{position:absolute;top:2px;inset-inline-end:50%;transform:translateX(50%) translateX(14px);
  background:var(--color-brand-primary);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;
  border-radius:999px;display:flex;align-items:center;justify-content:center;font-style:normal}

.floaters{position:fixed;inset-inline-end:16px;bottom:22px;z-index:65;display:flex;flex-direction:column;gap:10px}
.floaters a{width:54px;height:54px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:var(--shadow-lg)}
.floaters__wa{background:#25D366}
.floaters__call{background:var(--color-brand-primary)}
.floaters a .ic{width:26px;height:26px}

/* ============================================================
   Mobile drawer + search overlay
   ============================================================ */
.drawer{position:fixed;inset:0;z-index:90}
.drawer[hidden]{display:none!important}
.drawer__scrim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.drawer__panel{position:absolute;inset-block:0;inset-inline-start:0;width:min(86vw,340px);background:#fff;
  display:flex;flex-direction:column;animation:slideIn .2s ease;overflow-y:auto}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}
.lang-ar .drawer__panel{animation-name:slideInR}
@keyframes slideInR{from{transform:translateX(100%)}to{transform:none}}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--color-brand-border)}
.drawer__close,.searchov__close,.qv__close,.filters__close{background:var(--color-brand-muted);border:none;
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--color-text-main)}
.drawer__lang{display:flex;align-items:center;gap:8px;padding:14px 16px;font-weight:700;border-bottom:1px solid var(--color-brand-border)}
.drawer__lang .ic{color:var(--color-brand-primary)}
.drawer__nav{padding:8px 0;flex:1}
.drawer__nav a{display:flex;align-items:center;gap:12px;padding:13px 16px;font-weight:600;font-size:14.5px}
.drawer__nav a:hover{background:var(--color-brand-muted)}
.drawer__nav a .ic:first-child{color:var(--color-brand-primary)}
.drawer__nav a .ic.end{margin-inline-start:auto;width:16px;height:16px;color:var(--color-text-muted)}
.drawer__cta{padding:16px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--color-brand-border)}

.searchov{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;padding-top:80px}
.searchov__form{display:flex;gap:10px;align-items:center;background:#fff;border-radius:var(--radius);padding:14px}
.searchov__form input{flex:1;height:48px;border:1.5px solid var(--color-brand-border);border-radius:12px;padding:0 14px;font-size:15px;outline:none}

/* ============================================================
   Breadcrumb
   ============================================================ */
.crumbs{background:var(--color-brand-muted);border-bottom:1px solid var(--color-brand-border)}
.crumbs__inner{display:flex;align-items:center;gap:7px;padding:11px 0;font-size:13px;color:var(--color-text-muted);flex-wrap:wrap}
.crumbs__inner a:hover{color:var(--color-brand-primary)}
.crumbs .sep{width:14px;height:14px;opacity:.6}
.crumbs span{color:var(--color-text-main);font-weight:600}

/* ============================================================
   Category page
   ============================================================ */
.cathead{background:#fff;border-bottom:1px solid var(--color-brand-border);padding:24px 0}
.cathead__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cathead__title{font-size:26px;display:flex;align-items:center;gap:10px}
.cathead__title .ic{color:var(--color-brand-primary)}
.cathead__desc{margin:8px 0 0;color:var(--color-text-muted);max-width:680px;font-size:14px}
.cathead__count{background:var(--color-brand-muted);border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px;white-space:nowrap}
.catlayout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.filters{background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:18px;position:sticky;top:130px}
.filters__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.filters__head strong{display:inline-flex;align-items:center;gap:7px;font-size:15px}
.filters__head .ic{color:var(--color-brand-primary)}
.filters__close{display:none}
.filters__group{padding:14px 0;border-bottom:1px solid var(--color-brand-border)}
.filters__group h4{font-size:13.5px;margin-bottom:10px}
.check{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--color-brand-primary)}
.check--brand img{width:42px;height:24px;object-fit:contain;background:#fff;border:1px solid var(--color-brand-border);border-radius:6px;padding:3px}
.filters__price{display:flex;align-items:center;gap:8px}
.filters__price input{height:40px}
.filters__clear{margin-top:10px}
.catmain{min-width:0}
.cattoolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.cattoolbar__filterbtn{display:none}
.cattoolbar__sort{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.cattoolbar__sort label{font-size:13px;color:var(--color-text-muted);font-weight:600}
.cattoolbar__sort select{height:40px;min-width:180px}

/* ---------------- Empty state ---------------- */
.empty{text-align:center;padding:40px 20px;background:#fff;border:1px dashed var(--color-brand-border);border-radius:var(--radius)}
.empty--lg{padding:60px 20px}
.empty__ic{width:64px;height:64px;border-radius:999px;background:var(--color-brand-muted);color:var(--color-text-muted);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.empty__ic .ic{width:30px;height:30px}
.empty h3{font-size:20px;margin-bottom:8px}
.empty p{color:var(--color-text-muted);margin:0 0 16px}
.empty__cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   Product detail
   ============================================================ */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.pd__gallery{position:sticky;top:130px}
.pd__main{position:relative;background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius-lg);overflow:hidden}
.pd__main .prod-img{transition:transform .22s ease;transform-origin:center}
.pd__main:hover .prod-img{transform:scale(1.65)}
.pd__discount{position:absolute;top:14px;inset-inline-start:14px;z-index:2;font-size:13px;padding:6px 12px}
.pd__thumbs{display:flex;gap:10px;margin-top:12px}
.pd__thumb{width:78px;height:64px;border:1.5px solid var(--color-brand-border);border-radius:10px;overflow:hidden;background:#fff;padding:0}
.pd__thumb.is-active{border-color:var(--color-brand-primary)}
.pd__thumb .prod-img{aspect-ratio:auto;height:100%}
.pd__brandrow{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pd__brand{font-weight:800;color:var(--color-brand-primary);text-transform:uppercase;font-size:13px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:8px}
.pd__brandlogo{width:54px;height:28px;object-fit:contain;background:#fff;border:1px solid var(--color-brand-border);border-radius:7px;padding:3px}
.pd__title{font-size:27px;line-height:1.25;margin-bottom:8px}
.pd__sku{color:var(--color-text-muted);font-size:13px;margin:0 0 16px}
.pd__pricebox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pd__price{font-size:30px;font-weight:900}
.pd__price small{font-size:14px;color:var(--color-text-muted);font-weight:700}
.pd__old{font-size:18px;color:var(--color-text-muted);text-decoration:line-through}
.pd__save{background:#FEECEC;color:var(--color-brand-primary);font-weight:800;font-size:13px;padding:5px 11px;border-radius:999px}
.pd__stock{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;margin-bottom:16px}
.pd__stock i{width:9px;height:9px;border-radius:999px;background:currentColor}
.pd__perks{display:flex;flex-wrap:wrap;gap:16px;padding:16px 0;border-block:1px solid var(--color-brand-border);margin-bottom:16px}
.pd__perks li{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px}
.pd__perks .ic{width:18px;height:18px;color:var(--color-brand-primary)}
.pd__fitment{background:var(--color-brand-muted);border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:14px;margin-bottom:18px}
.pd__fitment>strong{display:inline-flex;align-items:center;gap:7px;font-size:14px;margin-bottom:10px}
.pd__fitment>strong .ic{color:var(--color-success)}
.pd__fits{display:flex;flex-wrap:wrap;gap:7px}
.pd__buy{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.exchangebox{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--color-brand-border);
  border-radius:var(--radius);padding:14px;margin:16px 0}
.exchangebox>strong{font-size:14px}
.exchangebox .optcard{display:flex;align-items:center;gap:10px;border:1px solid var(--color-brand-border);
  border-radius:12px;padding:11px 12px;background:var(--color-brand-muted);font-weight:700}
.exchangebox .optcard input{accent-color:var(--color-brand-primary)}
.exchangebox .optcard small{display:block;color:var(--color-brand-primary);font-size:12px;margin-top:2px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--color-brand-border);border-radius:999px;overflow:hidden}
.qty button{width:42px;height:46px;border:none;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--color-text-main)}
.qty button:hover{background:var(--color-brand-muted);color:var(--color-brand-primary)}
.qty input{width:42px;height:46px;border:none;text-align:center;font-weight:800;font-size:15px;outline:none}
.pd__buy .btn{flex:1;min-width:130px}
.pd__contact{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pd__tabs-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.pd__tabs{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px solid var(--color-brand-border);border-radius:999px;padding:6px;width:max-content;max-width:100%;margin-inline:auto}
.pd__tab{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 18px;border-radius:999px;color:var(--color-text-main);font-weight:900;font-size:13px;white-space:nowrap}
.pd__tab.is-active{background:var(--color-brand-secondary);color:#fff}
.pd__panel{background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:22px}
.pd__panel[hidden]{display:none}
.pd__panel.is-active{grid-column:1 / -1}
.pd__h2{font-size:19px;margin-bottom:14px}
.pd__h3{font-size:15px;margin:18px 0 10px}
.spectable{width:100%;border-collapse:collapse}
.spectable tr{border-bottom:1px solid var(--color-brand-border)}
.spectable tr:last-child{border-bottom:none}
.spectable th,.spectable td{text-align:start;padding:11px 4px;font-size:13.5px}
.spectable th{color:var(--color-text-muted);font-weight:600;width:46%}
.spectable td{font-weight:700}
.pd__longdesc{font-size:14px;color:var(--color-text-main);line-height:1.7;margin:0}
.pd__fitlist li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px}
.pd__fitlist .ic{width:16px;height:16px;color:var(--color-success)}

.pdbar{display:none;position:fixed;bottom:0;inset-inline:0;z-index:68;background:#fff;
  border-top:1px solid var(--color-brand-border);box-shadow:0 -4px 16px rgba(16,24,40,.1);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));align-items:center;gap:10px}
.pdbar__price{display:flex;flex-direction:column;line-height:1.1}
.pdbar__price strong{font-size:17px;font-weight:900}
.pdbar__price small{font-size:12px;color:var(--color-text-muted);text-decoration:line-through}
.pdbar__wa{width:46px;height:46px;border-radius:12px;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pdbar__add{flex:1;height:46px}
.pdbar__buy{flex:1;height:46px}

/* ============================================================
   Finder page
   ============================================================ */
.finderpage{background:linear-gradient(180deg,#fff,#fafbfc);padding:32px 0;border-bottom:1px solid var(--color-brand-border)}
.finderpage__head{text-align:center;margin-bottom:20px}
.finderpage__head h1{font-size:30px}
.finderpage__head p{color:var(--color-text-muted);margin:8px 0 0}
.finderpage .finder{max-width:760px;margin-inline:auto;background:#fff;border:1px solid var(--color-brand-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:22px}
.finderpage__crit{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}

/* ============================================================
   Cart
   ============================================================ */
.cartlayout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.cartitems{background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius);overflow:hidden}
.cartitems__head{display:grid;grid-template-columns:1fr 120px 140px 120px 40px;gap:12px;padding:14px 18px;
  background:var(--color-brand-muted);font-size:12px;font-weight:700;color:var(--color-text-muted);text-transform:uppercase}
.citem{display:grid;grid-template-columns:1fr 120px 140px 120px 40px;gap:12px;align-items:center;
  padding:16px 18px;border-top:1px solid var(--color-brand-border)}
.citem__prod{display:flex;align-items:center;gap:12px}
.citem__img{width:74px;height:60px;border:1px solid var(--color-brand-border);border-radius:10px;overflow:hidden;flex:0 0 auto}
.citem__img .prod-img{height:100%;aspect-ratio:auto}
.citem__name{font-weight:700;font-size:14px}
.citem__name:hover{color:var(--color-brand-primary)}
.citem__sku{display:block;color:var(--color-text-muted);font-size:12px;margin-top:3px}
.citem__price,.citem__sub{font-weight:700;font-size:14px}
.citem__sub{color:var(--color-brand-primary)}
.citem__remove{width:34px;height:34px;border-radius:10px;border:1px solid var(--color-brand-border);background:#fff;
  color:var(--color-text-muted);display:flex;align-items:center;justify-content:center}
.citem__remove:hover{color:var(--color-error);border-color:var(--color-error)}
.citem .qty button{width:34px;height:38px}
.citem .qty input{width:34px;height:38px}
.qtyform{display:inline-flex;align-items:center}
.cartitems__foot{display:flex;justify-content:space-between;gap:12px;padding:16px 18px;border-top:1px solid var(--color-brand-border);flex-wrap:wrap}
.cartsummary{background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:20px;position:sticky;top:130px}
.cartsummary h3{font-size:18px;margin-bottom:16px}
.cartsummary__coupon{display:flex;gap:8px;margin-bottom:16px}
.cartsummary__coupon input{flex:1}
.cartsummary__opt{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-block:1px solid var(--color-brand-border);margin-bottom:14px}
.radio{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;cursor:pointer}
.radio input{width:18px;height:18px;accent-color:var(--color-brand-primary)}
.cartsummary__totals{margin:0 0 16px}
.cartsummary__totals>div{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:14px}
.cartsummary__totals dt{color:var(--color-text-muted)}
.cartsummary__totals dd{margin:0;font-weight:700}
.cartsummary__grand{border-top:1px solid var(--color-brand-border);margin-top:6px;padding-top:12px!important}
.cartsummary__grand dt{color:var(--color-text-main)!important;font-weight:800;font-size:16px!important}
.cartsummary__grand dd{font-size:19px!important;font-weight:900;color:var(--color-brand-primary)}

/* ============================================================
   Checkout
   ============================================================ */
.costeps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;counter-reset:s}
.costeps__item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--color-text-muted);
  background:#fff;border:1px solid var(--color-brand-border);border-radius:999px;padding:8px 14px}
.costeps__item span{width:22px;height:22px;border-radius:999px;background:var(--color-brand-muted);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.costeps__item.is-active{border-color:var(--color-brand-primary);color:var(--color-brand-primary)}
.costeps__item.is-active span{background:var(--color-brand-primary);color:#fff}
.checkout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.checkout__main{display:flex;flex-direction:column;gap:16px}
.cobox{border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:20px;margin:0;background:#fff}
.cobox legend{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;padding:0 8px}
.cobox legend .ic{color:var(--color-brand-primary)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1 / -1}
.field>span{font-size:13px;font-weight:600;color:var(--color-text-main)}
.coradios{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.coradios--pay{grid-template-columns:repeat(2,1fr)}
.optcard{display:flex;align-items:center;gap:9px;border:1.5px solid var(--color-brand-border);border-radius:12px;
  padding:13px 14px;font-weight:600;font-size:13.5px;cursor:pointer;position:relative}
.optcard .ic{width:18px;height:18px;color:var(--color-text-muted)}
.optcard input{accent-color:var(--color-brand-primary)}
.optcard:has(input:checked){border-color:var(--color-brand-primary);background:#FEF6F6}
.optcard:has(input:checked) .ic{color:var(--color-brand-primary)}
.checkout__summary{background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:20px;position:sticky;top:130px}
.checkout__summary h3{font-size:18px;margin-bottom:14px}
.cosum-items{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--color-brand-border)}
.cosum-items li{display:flex;align-items:center;gap:10px}
.cosum-thumb{width:48px;height:42px;border:1px solid var(--color-brand-border);border-radius:8px;overflow:hidden;flex:0 0 auto}
.cosum-thumb .prod-img{height:100%;aspect-ratio:auto}
.cosum-name{flex:1;font-size:13px;font-weight:600}
.cosum-name small{display:block;color:var(--color-text-muted);font-weight:500}
.cosum-price{font-weight:800;font-size:13px}

/* ============================================================
   Order success
   ============================================================ */
.ordersuccess{max-width:620px;margin-inline:auto;text-align:center}
.ordersuccess__check{width:76px;height:76px;border-radius:999px;background:#DCFCE7;color:var(--color-success);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.ordersuccess__check .ic{width:40px;height:40px;stroke-width:2.4}
.ordersuccess h1{font-size:28px;margin-bottom:8px}
.ordersuccess__msg{color:var(--color-text-muted);margin:0 0 16px}
.ordersuccess__no{background:var(--color-brand-muted);border-radius:12px;padding:12px;font-size:15px;margin-bottom:20px}
.ordersuccess__no strong{color:var(--color-brand-primary)}
.ordersuccess__card{background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:20px;text-align:start;margin-bottom:20px}
.ordersuccess__card h3{font-size:17px;margin-bottom:14px}
.ordersuccess__cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.narrow{max-width:640px}
.siteflash{padding:12px 14px;border-radius:10px;margin:0 0 14px;font-weight:800}
.siteflash--error{background:#fee2e2;color:#991b1b}.siteflash--success{background:#dcfce7;color:#166534}
.form-public{display:grid;gap:14px}
.trackhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.trackgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.timeline{display:grid;gap:12px;counter-reset:step}
.timeline li{position:relative;border:1px solid var(--color-brand-border);border-radius:12px;padding:12px 14px;background:#fff}
.timeline li.is-active{border-color:var(--color-brand-primary);box-shadow:0 0 0 3px rgba(230,0,0,.08)}
.timeline small,.timeline span{display:block;color:var(--color-text-muted);font-size:12px;margin-top:3px}
.trackorders{display:grid;gap:12px}
.trackorder{display:grid;gap:16px;padding:16px;border:1px solid var(--color-brand-border);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm)}
.trackorder__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.trackorder__main,.trackorder__meta{display:flex;align-items:center;gap:12px}
.trackorder__main{flex-direction:column;align-items:flex-start}
.trackorder__main strong{font-size:18px}
.trackorder__main small{color:var(--color-text-muted);font-weight:700}
.trackorder__meta b{color:var(--color-text)}
.trackorder__details{display:grid;gap:12px}
.trackorder__details h2{font-size:16px;margin:0}
.trackorder__details dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.trackorder__details dl div{border:1px solid var(--color-brand-border);border-radius:10px;padding:10px;background:#fafafa}
.trackorder__details dt{font-size:12px;color:var(--color-text-muted);font-weight:800}
.trackorder__details dd{margin:3px 0 0;font-weight:900}
.trackorder__items{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.trackorder__items li{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--color-brand-border);padding-bottom:8px}
.trackorder__items li:last-child{border-bottom:0;padding-bottom:0}
.trackorder__items span{font-weight:800}
.trackorder__items small{color:var(--color-text-muted);font-weight:800;white-space:nowrap}
.trackstages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.trackstages li{display:flex;gap:10px;align-items:center;border:1px solid var(--color-brand-border);border-radius:12px;padding:12px;background:#fff}
.trackstages li.is-done{border-color:rgba(22,163,74,.35);background:#f0fdf4}
.trackstages li.is-current{border-color:var(--color-brand-primary);box-shadow:0 0 0 3px rgba(230,0,0,.08)}
.trackstage__dot{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#f3f4f6;color:var(--color-text);font-weight:900}
.trackstages li.is-done .trackstage__dot{background:#16a34a;color:#fff}
.trackstages li.is-done .trackstage__body strong{color:#166534}
.trackstages li.is-current .trackstage__dot{background:var(--color-brand-primary);color:#fff}
.trackstage__body{display:grid;gap:2px}
.trackstage__body strong{font-size:15px}
.trackstage__body small,.trackcancel span{color:var(--color-text-muted);font-weight:700}
.trackcancel{display:grid;gap:6px;border:1px solid #fecaca;background:#fff1f2;color:#991b1b;border-radius:12px;padding:14px}
.receipthead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.receipthead h2{margin:0}

/* ============================================================
   Brands page
   ============================================================ */
.brandgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.brandcard{display:flex;flex-direction:column;align-items:flex-start;gap:9px;background:#fff;
  border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:20px;transition:.15s}
.brandcard:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow);transform:translateY(-2px)}
.brandcard__logo{width:56px;height:56px;border-radius:14px;background:var(--color-brand-secondary);color:#fff;
  font-weight:900;font-size:19px;display:flex;align-items:center;justify-content:center}
.brandcard__logo--img{background:#fff;border:1px solid var(--color-brand-border);object-fit:contain;padding:8px}
.brandcard__name{font-size:17px}
.brandcard__tier{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.tier--premium{background:#FEF3C7;color:#92400E}
.tier--midrange{background:#E0E7FF;color:#3730A3}
.tier--budget{background:#DCFCE7;color:#166534}
.brandcard__desc{font-size:13px;color:var(--color-text-muted);margin:0;flex:1}
.brandcard__count{font-size:12px;font-weight:700;color:var(--color-brand-primary)}
.branddetailhead{background:#fff;border-bottom:1px solid var(--color-brand-border);padding:30px 0}
.branddetailhead__inner{display:flex;align-items:center;gap:20px}
.branddetailhead__logo{width:84px;height:84px;border-radius:18px;background:var(--color-brand-secondary);color:#fff;
  font-weight:900;font-size:30px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.branddetailhead__logo--img{background:#fff;border:1px solid var(--color-brand-border);object-fit:contain;padding:12px}
.branddetailhead h1{font-size:28px}
.branddetailhead p{color:var(--color-text-muted);margin:6px 0 12px}
.branddetailhead__meta{display:flex;flex-wrap:wrap;gap:8px}

/* ============================================================
   Service detail
   ============================================================ */
.svcdetail{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}
.svcdetail__ic{width:64px;height:64px;border-radius:16px;background:#FEECEC;color:var(--color-brand-primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.svcdetail__ic .ic{width:34px;height:34px}
.svcdetail h1{font-size:28px;margin-bottom:10px}
.svcdetail__lead{font-size:16px;color:var(--color-text-muted);margin:0 0 8px}
.svcdetail__steps{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.svcdetail__steps li{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--color-brand-border);
  border-radius:12px;padding:14px 16px;font-weight:600;font-size:14.5px}
.svcdetail__steps span{width:32px;height:32px;border-radius:999px;background:var(--color-brand-primary);color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.svcdetail__side{background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:22px;position:sticky;top:130px}
.svcdetail__price{font-size:22px;font-weight:900;color:var(--color-brand-primary);margin-bottom:14px;text-align:center}
.svcdetail__side .btn{margin-bottom:10px}
.svcdetail__perks{margin-top:10px;display:flex;flex-direction:column;gap:9px}
.svcdetail__perks li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.svcdetail__perks .ic{width:16px;height:16px;color:var(--color-success)}

/* ============================================================
   Article / prose / faq / contact / about
   ============================================================ */
.article{max-width:760px;margin-inline:auto}
.article__title{font-size:32px;line-height:1.2;margin:10px 0}
.article__meta{display:inline-flex;align-items:center;gap:6px;color:var(--color-text-muted);font-size:13px;margin-bottom:18px}
.article__hero{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:22px}
.article__body p{font-size:16px;line-height:1.8;margin:0 0 16px;color:#2a2e36}
.article__cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--color-brand-muted);border-radius:var(--radius);padding:18px 22px;margin-top:24px}
.article__cta strong{font-size:17px}
.prose{max-width:820px;margin-inline:auto}
.prose h2{font-size:20px;margin:24px 0 10px}
.prose p{font-size:15px;line-height:1.8;color:#2a2e36;margin:0 0 14px}
.prose__note{background:#FEF6F6;border:1px solid #F7C9C9;border-radius:12px;padding:14px;color:#7a1f1f;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}
.stat{background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:20px;text-align:center}
.stat strong{display:block;font-size:28px;color:var(--color-brand-primary)}
.stat span{font-size:13px;color:var(--color-text-muted)}
.checklist{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.checklist li{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600}
.checklist .ic{width:18px;height:18px;color:var(--color-success)}

.faqwrap{max-width:820px;margin-inline:auto}
.faqlist{display:flex;flex-direction:column;gap:10px}
.faqitem{background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius);overflow:hidden}
.faqitem__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:transparent;
  border:none;padding:18px 20px;font-weight:700;font-size:15px;text-align:start;color:var(--color-text-main)}
.faqitem__q .ic{flex:0 0 auto;transition:transform .2s;color:var(--color-brand-primary)}
.faqitem.is-open .faqitem__q .ic.acc{transform:rotate(90deg)}
.faqitem__a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faqitem__a p{margin:0;padding:0 20px 18px;color:var(--color-text-muted);font-size:14px;line-height:1.7}

.contactlayout{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:start}
.contactinfo__lead{color:var(--color-text-muted);margin:0 0 20px}
.contactinfo__list{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.contactinfo__list li{display:flex;align-items:center;gap:13px}
.contactinfo__list .ic{width:22px;height:22px;color:var(--color-brand-primary);flex:0 0 auto}
.contactinfo__list small{display:block;font-size:12px;color:var(--color-text-muted)}
.contactinfo__list a,.contactinfo__list span{font-weight:700;font-size:15px}
.contactinfo__areas h4{margin-bottom:10px}
.contactinfo__areas>div{display:flex;flex-wrap:wrap;gap:8px}
.contactform{background:#fff;border:1px solid var(--color-brand-border);border-radius:var(--radius);padding:24px}
.contactform .btn{margin-top:16px}

/* ============================================================
   Error pages
   ============================================================ */
.errpage{text-align:center;padding:50px 20px;max-width:520px;margin-inline:auto}
.errpage__code{font-size:90px;font-weight:900;color:var(--color-brand-primary);line-height:1;display:block}
.errpage h1{font-size:26px;margin:8px 0}
.errpage p{color:var(--color-text-muted);margin:0 0 22px}

/* ============================================================
   Quick-view modal
   ============================================================ */
.qv{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.qv__scrim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.qv__panel{position:relative;background:#fff;border-radius:16px;width:100%;max-width:640px;
  box-shadow:var(--shadow-lg);animation:pop .18s ease;max-height:86vh;overflow:auto}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.qv__close{position:absolute;top:12px;inset-inline-end:12px;z-index:2}
.qv__body{display:grid;grid-template-columns:260px 1fr}
.qv__media{background:var(--color-brand-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;gap:8px}
.qv__media .prod-img{aspect-ratio:1/1;object-fit:contain;max-height:260px}
.qv__mainimg{width:100%;background:#fff;border-radius:10px;overflow:hidden}
.qv__thumbs{display:flex;gap:8px;max-width:100%;overflow:auto}
.qv__thumb{width:52px;height:42px;border:1px solid var(--color-brand-border);background:#fff;border-radius:8px;padding:2px;opacity:.72}
.qv__thumb.is-active{border-color:var(--color-brand-primary);opacity:1}
.qv__thumb img{width:100%;height:100%;object-fit:contain;border-radius:6px}
.qv__info{padding:20px}
.qv__title{font-size:18px;margin:5px 0 8px;line-height:1.3}
.qv__desc{font-size:13px;color:var(--color-text-muted);margin:0 0 10px}
.qv__price{margin-bottom:12px}
.qv__price .price{font-size:22px}
.qv__meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.qv__meta span{border:1px solid var(--color-brand-border);border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;color:var(--color-text-muted);background:#fafafa}
.qv__exchange{margin:0 0 10px}
.qv__total{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-brand-border);border-radius:10px;padding:9px 11px;margin:0 0 10px;font-weight:900}
.qv__actions{display:flex;flex-direction:column;gap:8px}
@media (max-width:620px){
  .qv{padding:14px}
  .qv__panel{max-width:420px;max-height:88dvh;border-radius:14px}
  .qv__body{grid-template-columns:1fr}
  .qv__media{padding:10px}
  .qv__media .prod-img{aspect-ratio:16/10;max-height:180px}
  .qv__info{padding:14px}
  .qv__title{font-size:16px}
  .qv__price .price{font-size:20px}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .catgrid{grid-template-columns:repeat(3,1fr)}
  .brandrow{grid-template-columns:repeat(4,1fr)}
  .pgrid,.pgrid--4{grid-template-columns:repeat(3,1fr)}
  .footer__main{grid-template-columns:1fr 1fr 1fr;gap:24px}
  .footer__about{grid-column:1 / -1}
}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__title{font-size:34px}
  .pd{grid-template-columns:1fr;gap:24px}
  .pd__gallery{position:static}
  .pd__tabs-wrap{grid-template-columns:1fr}
  .cartlayout,.checkout,.svcdetail,.contactlayout{grid-template-columns:1fr}
  .cartsummary,.checkout__summary,.svcdetail__side,.filters{position:static}
  .testi,.bloggrid,.bloggrid--3,.svcgrid,.svcgrid--lg,.brandgrid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);gap:22px 14px}
  .homebanners{grid-template-columns:1fr}
  .whydeepa__grid{grid-template-columns:repeat(2,1fr)}
  .finder--compact .finder__form.is-active{grid-template-columns:1fr 1fr}
  .finder--compact .finder__form--car-size.is-active{grid-template-columns:1fr 1fr}
  .finder--compact .finder__form--car-size select[name="battery_size"]{grid-column:1 / -1}
  .finder--compact .finder__go{grid-column:1 / -1}
  .promise-strip__grid,.footer__promise-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  :root{--header-h:64px}
  .announce{display:none}
  .header{background:#050505;border-bottom:1px solid #1f1f1f;box-shadow:none}
  .header__inner{height:62px;gap:10px;padding-inline:14px}
  .header__logo{margin-inline:auto}
  .header__logo img{height:36px;max-width:104px;background:#fff;border-radius:8px;padding:3px 7px}
  .header__search{display:none}
  .header__mobile-search{display:flex;align-items:center;margin:0 14px 14px;background:#242426;border:1px solid #333;border-radius:8px;overflow:visible}
  .header__mobile-search input{flex:1;border:0;background:transparent;color:#fff;height:48px;padding:0 14px;font:inherit;outline:none}
  .header__mobile-search input::placeholder{color:#9ca3af}
  .header__mobile-search button{width:64px;height:48px;border:0;background:var(--color-brand-primary);color:#fff;display:flex;align-items:center;justify-content:center;border-start-end-radius:8px;border-end-end-radius:8px}
  .header__mobile-search .ic{width:22px;height:22px}
  .header__mobile-search .searchsuggest{top:calc(100% + 6px);border-radius:10px;max-height:320px;overflow:auto}
  .header__burger{display:flex;color:#fff;width:42px;height:42px;align-items:center;justify-content:center}
  .header__hotline{display:none}
  .header__actions{gap:8px}
  .header__lang,.header__icon{display:flex;color:#fff;border-color:#333;background:transparent}
  .header__burger .ic,.header__icon .ic,.header__lang .ic{color:#fff;stroke:currentColor}
  .header__lang{width:42px;height:42px;padding:0;justify-content:center;border-radius:12px}
  .header__lang .ic{width:22px;height:22px}
  .header__lang-text{display:none}
  .header__wa{color:#fff}
  .header__cart-badge{background:var(--color-brand-primary);color:#fff;top:0;inset-inline-end:0}
  .mainnav{display:none}
  .header{position:sticky}
  .botnav{display:flex}
  .floaters{display:none}
  body{padding-bottom:64px}
  .pgrid,.pgrid--3,.pgrid--4{grid-template-columns:repeat(2,1fr);gap:12px}
  .pgrid--rail .card{flex-basis:46vw}
  .card{border-radius:12px;box-shadow:none}
  .card:hover{transform:none;box-shadow:var(--shadow-sm)}
  .card__media{padding:10px 10px 0;min-height:180px;display:flex;align-items:flex-start;justify-content:center}
  .card__imglink{width:100%}
  .card__media .prod-img{aspect-ratio:1/1;object-fit:contain}
  .card__badges{top:10px;inset-inline-start:10px}
  .card__badges .badge{background:var(--color-brand-primary);color:#fff;border-radius:999px;font-weight:900}
  .card__hover,.card__tags,.card__stock,.card__desc,.card__brandrow .stars{display:none}
  .card__body{padding:12px;gap:8px}
  .card__brand{font-size:11px;color:#6b7280;letter-spacing:.08em}
  .card__brandrow{justify-content:flex-start}
  .card__title{font-size:13.5px;line-height:1.35;min-height:54px;text-transform:uppercase}
  .card__exchange-pill{padding:8px 9px;border-radius:8px;font-size:11px}
  .card__exchange-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card__exchange-pill strong{display:none}
  .card__foot{align-items:center;padding-top:0}
  .price{font-size:18px}
  .price small{font-size:11px;color:#111}
  .price-old{font-size:14px}
  .card__cartctl{min-width:auto}
  .card__add{width:44px;height:44px;border-radius:999px;background:var(--color-brand-primary);color:#fff}
  .card__stepper{border-color:var(--color-brand-primary);color:var(--color-brand-primary);border-radius:999px}
  .card__buy-now{padding:8px;border-radius:8px;background:#111;font-size:12px}
  .catgrid{grid-template-columns:repeat(2,1fr)}
  .brandrow{grid-template-columns:repeat(3,1fr)}
  .footer__main{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .formgrid,.coradios,.coradios--pay{grid-template-columns:1fr}
  .trackgrid{grid-template-columns:1fr}
  .receipthead{align-items:stretch;flex-direction:column}
  .trackorder__top,.trackorder__meta{align-items:flex-start}
  .trackorder__top{flex-direction:column}
  .trackorder__meta{width:100%;justify-content:space-between}
  .trackorder__details dl,.trackstages{grid-template-columns:1fr}
  .trackorder__items li{align-items:flex-start;flex-direction:column}
  .trackorder__items small{white-space:normal}
  .cattoolbar__filterbtn{display:inline-flex}
  .catlayout{grid-template-columns:1fr}
  .filters{position:fixed;inset-block:0;inset-inline-start:0;z-index:92;width:min(86vw,340px);
    max-height:100dvh;border-radius:0;transform:translateX(-120%);transition:transform .22s ease;
    overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--shadow-lg);padding-bottom:24px}
  .lang-ar .filters{inset-inline-start:auto;inset-inline-end:0;transform:translateX(120%)}
  .filters:not(.is-open){pointer-events:none;visibility:hidden}
  .filters.is-open{transform:none;visibility:visible}
  .filters__close{display:flex}
  .cartitems__head{display:none}
  .citem{grid-template-columns:1fr;gap:10px;position:relative}
  .citem__price,.citem__sub{display:flex;justify-content:space-between}
  .citem__price::before,.citem__sub::before{content:attr(data-label);color:var(--color-text-muted);font-weight:600}
  .citem__remove{position:absolute;top:14px;inset-inline-end:14px}
  .section__title{font-size:20px}
  .page-title{font-size:24px;line-height:1.25;margin-bottom:16px;font-weight:800}
  .prose h2{font-size:18px}
  .prose p{font-size:14px;line-height:1.75}
  .faqitem__q{font-size:14px;font-weight:700}
  .hero__title{font-size:28px}
  .pd__title{font-size:22px}
  .pd{gap:16px}
  .pd__main{border-radius:14px}
  .pd__main .prod-img{aspect-ratio:1/1;object-fit:contain}
  .pd__thumbs{overflow:auto;padding-bottom:4px}
  .pd__info{background:#fff;border:1px solid var(--color-brand-border);border-radius:14px;padding:16px}
  .pd__price{font-size:26px}
  .pd__perks,.pd__fitment{display:none}
  .exchangebox{border-radius:12px}
  .exchangebox .optcard{padding:10px}
  .pd__buy{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pd__buy .qty{grid-column:1 / -1;justify-content:center}
  .pd__buy .btn{min-width:0}
  .pd__tabs-wrap{gap:12px}
  .pd__tabs{width:100%;justify-content:flex-start;overflow:auto;border-radius:14px}
  .pd__tab{flex:0 0 auto;font-size:12px;padding:0 14px}
  .pd__contact{grid-template-columns:1fr}
  .pdbar{display:flex}
  .pdbar__price{display:none}
  .pdbar__wa{width:42px;height:42px}
  .pdbar__add,.pdbar__buy{height:42px;font-size:12px;padding-inline:10px}
  .section{padding:30px 0}
  .homefinder{padding:24px 0 22px}
  .homefinder__head h1{font-size:24px}
  .homefinder .finder{padding:14px}
  .finder--compact .finder__form.is-active{grid-template-columns:1fr}
  .finder--compact .finder__form--car-size.is-active{grid-template-columns:1fr}
  .homefinder__brands{gap:20px;overflow-x:auto;scrollbar-width:none}
  .homefinder__brands::-webkit-scrollbar{display:none}
  .homebanner{min-height:150px;padding:18px}
  .homebanner strong{font-size:18px}
  .whydeepa__grid{gap:8px}
  .whydeepa__grid article{border:1px solid var(--color-brand-border);border-radius:12px;padding:12px 8px}
  .whydeepa__grid .ic{width:38px;height:38px;padding:8px}
  .whydeepa__grid strong{font-size:13px}
  .whydeepa__grid p{font-size:11.5px}
  .section--dark .steps{grid-template-columns:repeat(2,1fr);gap:10px}
  .section--dark .step{background:#111;border:1px solid #242424;border-radius:12px;padding:10px;flex-direction:row;text-align:start;justify-content:flex-start}
  .section--dark .step__num{width:34px;height:34px;font-size:14px;box-shadow:0 0 0 4px rgba(230,0,0,.13)}
  .section--dark .step__label{font-size:12px}
  .cobox{padding:16px;border-radius:14px}
  .cobox legend{font-size:14px;font-weight:700}
  .field>span{font-size:12.5px;font-weight:600}
  .field input,.field select,.field textarea{min-height:46px}
  .drawer__nav a{font-weight:600}
}
@media (max-width:420px){
  .pgrid,.pgrid--3,.pgrid--4,.catgrid{grid-template-columns:1fr 1fr;gap:10px}
  .testi,.bloggrid,.bloggrid--3,.svcgrid,.svcgrid--lg,.brandgrid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .hero__cta .btn{flex:1}
}