/* ===== HOME: hero ===== */
.hero{display:grid; grid-template-columns:1fr 296px; gap:14px; margin-bottom:8px}
.hero__slider{position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:308px; box-shadow:var(--shadow)}
.slide{position:absolute; inset:0; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:10px; padding:26px 32px; opacity:0; visibility:hidden; transition:opacity .55s ease, visibility .55s}
.slide.is-active{opacity:1; visibility:visible}
.slide__t{font-size:1.75rem; font-weight:800; color:#fff; margin:0 0 8px; line-height:1.5}
.slide__s{color:rgba(255,255,255,.88); margin-bottom:16px; font-size:.92rem; max-width:34ch}
.slide__cta{display:inline-flex; align-items:center; gap:8px; background:#fff; color:#111827; padding:11px 20px; border-radius:12px; font-weight:800; font-size:.9rem}
.slide__cta:hover{transform:translateY(-2px)}
.slide__art{display:grid; place-items:center; height:100%}
.slide__art svg{max-height:250px; width:auto; filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
.slide__tag{display:inline-block; background:rgba(255,255,255,.2); color:#fff; font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:99px; margin-bottom:10px}
.hero__dots{position:absolute; bottom:14px; inset-inline-start:32px; display:flex; gap:6px; z-index:3}
.hero__dots button{width:9px; height:9px; padding:0; border-radius:99px; border:0; background:rgba(255,255,255,.45)}
.hero__dots button[aria-current="true"]{width:26px; background:#fff}
.hero__side{display:grid; grid-template-rows:1fr 1fr; gap:14px}
.promo{border-radius:var(--r); padding:16px 18px; color:#fff; display:flex; flex-direction:column; justify-content:center; box-shadow:var(--shadow); position:relative; overflow:hidden}
.promo b{font-size:1.02rem; display:block}
.promo small{opacity:.9; font-size:.78rem}
.promo span{margin-top:auto; font-size:.78rem; font-weight:700; text-decoration:underline}
.promo__emo{position:absolute; inset-inline-end:12px; bottom:6px; font-size:2.6rem; opacity:.35}

/* ===== HOME: strips ===== */
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px}
.trust__i{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px}
.trust__i span{font-size:1.5rem}
.trust__i b{display:block; font-size:.85rem}
.trust__i small{color:var(--text-2); font-size:.74rem}

.deal{background:linear-gradient(120deg,#4f46e5,#7c3aed 55%,#0d9488); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow)}
.deal__head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; color:#fff}
.deal__head h2{margin:0; color:#fff; font-size:1.15rem}
.deal__head .linkish{margin-inline-start:auto; color:#fff}
.cd{display:flex; align-items:center; gap:5px; direction:ltr; font-weight:800; font-size:.86rem; color:#fff}
.cd b{background:rgba(255,255,255,.22); border-radius:8px; padding:2px 7px; min-width:32px; text-align:center}
.deal .row-scroll{padding-bottom:2px}
.deal .pcard{border-color:transparent}

.brands{display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:12px}
.brandcard{display:grid; place-items:center; gap:2px; padding:16px 8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); transition:.18s}
.brandcard:hover{border-color:var(--brand); transform:translateY(-3px)}
.brandcard b{font-size:1.05rem; letter-spacing:-.02em}
.brandcard small{color:var(--text-2); font-size:.72rem}

.banners{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.banner{border-radius:var(--r-lg); padding:22px 24px; color:#fff; min-height:150px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; box-shadow:var(--shadow)}
.banner h3{color:#fff; font-size:1.2rem; margin-bottom:4px}
.banner p{color:rgba(255,255,255,.88); font-size:.85rem; margin-bottom:12px; max-width:32ch}
.banner .slide__cta{align-self:flex-start; padding:9px 16px; font-size:.84rem}
.banner__emo{position:absolute; inset-inline-end:16px; bottom:-6px; font-size:5rem; opacity:.28}

.tabs{display:flex; gap:6px; margin-inline-start:auto; background:var(--surface-2); padding:4px; border-radius:12px}
.tabs button{border:0; background:transparent; padding:7px 14px; border-radius:9px; font-size:.83rem; font-weight:700; color:var(--text-2)}
.tabs button.is-active{background:var(--surface); color:var(--brand); box-shadow:var(--shadow)}

.seo-box{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; font-size:.85rem; color:var(--text-2); line-height:2}
.seo-box h2{color:var(--text); font-size:1.05rem}

/* ===== CATALOG ===== */
.catalog{display:grid; grid-template-columns:258px 1fr; gap:16px; align-items:start}
.filters{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; position:sticky; top:124px; max-height:calc(100vh - 150px); overflow-y:auto}
.filters__head{display:flex; align-items:center; margin-bottom:6px}
.filters__head h2{margin:0; font-size:.98rem}
.filters__head button{margin-inline-start:auto; border:0; background:none; color:var(--rose); font-size:.78rem; font-weight:700}
.fgroup{border-top:1px solid var(--border); padding:12px 0}
.fgroup h3{font-size:.85rem; margin-bottom:8px}
.price-in{display:flex; align-items:center; gap:8px}
.price-in .input{padding:8px 10px; font-size:.82rem; text-align:center}
.pillset{display:flex; flex-wrap:wrap; gap:6px}
.pill{border:1.5px solid var(--border); background:var(--surface-2); border-radius:9px; padding:6px 11px; font-size:.78rem; font-weight:600; color:var(--text-2)}
.pill.is-active{border-color:var(--brand); background:var(--brand-soft); color:var(--brand)}
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:10px 14px; margin-bottom:14px}
.toolbar__sort{display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text-2)}
.toolbar__sort .select{width:auto; padding:8px 12px; padding-inline-start:32px; font-size:.82rem; background-position:left 12px top 18px,left 17px top 18px}
.toolbar__count{margin-inline-start:auto; font-size:.8rem; color:var(--text-2)}
.actives{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.fdrawer-btn{display:none}
.fclose{display:none; width:34px; height:34px}
@media(max-width:980px){.fclose{display:grid}}

/* ===== responsive: home + catalog ===== */
@media(max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero__side{grid-template-rows:none; grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr 1fr}
  .catalog{grid-template-columns:1fr}
  .filters{position:fixed; inset-block:0; inset-inline-start:0; width:min(320px,86vw); max-height:none; border-radius:0; z-index:60; transform:translateX(-100%); transition:transform .25s; box-shadow:var(--shadow-lg)}
  [dir="rtl"] .filters{transform:translateX(100%)}
  .filters.is-open{transform:none!important}
  .fdrawer-btn{display:inline-flex}
}
@media(max-width:720px){
  .slide{grid-template-columns:1fr; padding:20px}
  .slide__art{display:none}
  .slide__t{font-size:1.25rem}
  .hero__slider{min-height:220px}
  .banners{grid-template-columns:1fr}
  .hero__side{grid-template-columns:1fr}
  .tabs{width:100%; margin:8px 0 0}
  .tabs button{flex:1}
}
/* ===== PDP (product detail) ===== */
.pdp{display:grid; grid-template-columns:360px 1fr 292px; gap:18px; align-items:start}
.gallery{position:sticky; top:124px}
.gallery__main{aspect-ratio:1/1; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px}
.gallery__main img,.gallery__main svg{width:100%; height:100%; object-fit:contain}
.gallery__thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px}
.thumb{width:66px; height:66px; flex:none; border-radius:12px; border:1.5px solid var(--border); background:var(--surface-2); padding:5px; display:grid; place-items:center}
.thumb.is-active{border-color:var(--brand)}
.thumb svg,.thumb img{width:100%; height:100%; object-fit:contain}
.pdp__brandline{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-2); margin-bottom:6px}
.pdp h1{font-size:1.3rem; margin-bottom:4px}
.pdp__en{color:var(--text-2); font-size:.84rem; direction:ltr; text-align:start; margin-bottom:12px}
.pdp__ratingrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 0; border-block:1px solid var(--border); margin-bottom:14px; font-size:.82rem; color:var(--text-2)}
.colors{display:flex; gap:8px; flex-wrap:wrap}
.color{display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--border); background:var(--surface); border-radius:11px; padding:7px 12px; font-size:.8rem; font-weight:600}
.color.is-active{border-color:var(--brand); color:var(--brand); background:var(--brand-soft)}
.color__dot{width:15px; height:15px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.specs{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:9px; margin-top:8px}
.spec{display:flex; align-items:center; gap:8px; background:var(--surface-2); border-radius:11px; padding:9px 13px; font-size:.82rem; color:var(--text-2)}
.spec b{margin-inline-start:auto; color:var(--text); font-weight:700; direction:ltr}
.feat{margin-top:10px; display:grid; gap:7px}
.feat li{display:flex; gap:8px; font-size:.85rem; color:var(--text-2)}
.feat li::before{content:"✔"; color:var(--green); font-weight:800}
.buybox{position:sticky; top:124px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow)}
.buybox__seller{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-2); padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:12px}
.buybox__price{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:4px}
.buybox__price b{font-size:1.4rem; font-weight:800}
.buybox__price small{font-size:.78rem; color:var(--text-2); font-weight:600}
.buybox__old{display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--text-2); margin-bottom:12px}
.buybox__old s{opacity:.8}
.buybox__save{color:var(--rose); font-weight:700}
.buybox__note{display:flex; gap:8px; align-items:flex-start; font-size:.78rem; color:var(--text-2); margin-top:12px; line-height:1.7}
.buybox__row{display:flex; align-items:center; gap:10px; margin-bottom:12px}

/* ===== CART ===== */
.cartlay{display:grid; grid-template-columns:1fr 318px; gap:16px; align-items:start}
.citem{display:grid; grid-template-columns:96px 1fr auto; gap:14px; padding:14px 0; border-bottom:1px solid var(--border)}
.citem:last-child{border-bottom:0}
.citem__img{width:96px; height:96px; display:grid; place-items:center; background:var(--surface-2); border-radius:12px; padding:8px}
.citem__img svg,.citem__img img{width:100%; height:100%; object-fit:contain}
.citem__t{font-weight:700; font-size:.92rem; line-height:1.6}
.citem__meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.78rem; color:var(--text-2); margin-top:6px}
.citem__side{display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:10px}
.citem__price{font-weight:800; white-space:nowrap}
.sumbox{position:sticky; top:124px}
.sumline{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0; font-size:.86rem; color:var(--text-2)}
.sumline b{color:var(--text); font-weight:700}
.sumline--off b{color:var(--rose)}
.sumline--total{border-top:1px dashed var(--border); margin-top:10px; padding-top:12px; font-size:1rem; color:var(--text)}
.sumline--total b{font-size:1.15rem}
.coupon{display:flex; gap:8px; margin:12px 0}
.coupon .input{padding:9px 12px; font-size:.82rem}
/* ===== CHECKOUT ===== */
.steps{display:flex; align-items:center; gap:8px; margin-bottom:20px; flex-wrap:wrap}
.step{display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--text-2)}
.step__n{width:29px; height:29px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); border:1.5px solid var(--border); font-weight:800; font-size:.78rem}
.step.is-active{color:var(--brand); font-weight:700}
.step.is-active .step__n{background:var(--brand); color:#fff; border-color:var(--brand)}
.step.is-done .step__n{background:var(--green); color:#fff; border-color:var(--green)}
.step__line{flex:1; min-width:18px; height:2px; background:var(--border)}
.colay{display:grid; grid-template-columns:1fr 318px; gap:16px; align-items:start}
.radio-card{display:flex; align-items:flex-start; gap:10px; border:1.5px solid var(--border); border-radius:13px; padding:13px; cursor:pointer; margin-bottom:10px; transition:.18s}
.radio-card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--border))}
.radio-card.is-active{border-color:var(--brand); background:var(--brand-soft)}
.radio-card input{margin-top:5px; width:17px; height:17px; accent-color:var(--brand); flex:none}
.radio-card b{display:block; font-size:.9rem}
.radio-card small{color:var(--text-2); font-size:.78rem; line-height:1.7}
.gateway{width:min(520px,100%); margin-inline:auto; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--border)}
.gateway__head{background:#1e293b; color:#fff; padding:14px 18px; display:flex; align-items:center; gap:10px; font-size:.86rem}
.gateway__head b{margin-inline-start:auto; direction:ltr; font-size:.8rem; opacity:.85}
.gateway__body{background:var(--surface); padding:20px}
.gateway__warn{background:color-mix(in srgb,var(--amber) 15%,var(--surface)); color:color-mix(in srgb,var(--amber) 70%,var(--text)); border:1px solid color-mix(in srgb,var(--amber) 35%,transparent); border-radius:11px; padding:10px 13px; font-size:.78rem; line-height:1.8; margin-bottom:16px}
.cardnum .input{direction:ltr; text-align:center; letter-spacing:.16em; font-weight:700; font-size:1.02rem}
.gateway__amt{display:flex; justify-content:space-between; align-items:center; background:var(--surface-2); border-radius:11px; padding:11px 14px; font-size:.86rem; margin-bottom:16px}
.gateway__amt b{font-size:1.05rem}
.spinner{width:17px; height:17px; border-radius:50%; border:2.4px solid rgba(255,255,255,.45); border-top-color:#fff; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== ORDER / TRACK ===== */
.okwrap{width:min(680px,100%); margin-inline:auto; text-align:center; padding:8px 0}
.okico{width:78px; height:78px; margin:6px auto 14px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb,var(--green) 18%,var(--surface)); color:var(--green); font-size:2.3rem; animation:pop .4s ease}
@keyframes pop{from{transform:scale(.6); opacity:0}}
.codebox{display:inline-flex; align-items:center; gap:10px; background:var(--surface-2); border:1.5px dashed var(--border); border-radius:12px; padding:10px 16px; font-weight:800; direction:ltr; font-size:1.05rem; margin:6px 0 18px}
.timeline{display:grid; text-align:start; margin-top:6px}
.tl{display:grid; grid-template-columns:26px 1fr; gap:12px; padding-bottom:20px; position:relative}
.tl:not(:last-child)::before{content:""; position:absolute; inset-inline-start:12px; top:26px; bottom:0; width:2px; background:var(--border)}
.tl__dot{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); border:1.5px solid var(--border); font-size:.8rem; z-index:1}
.tl.is-done .tl__dot{background:var(--green); border-color:var(--green); color:#fff}
.tl.is-now .tl__dot{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--ring)}
.tl b{font-size:.9rem}
.tl small{display:block; color:var(--text-2); font-size:.78rem}
/* ===== ADMIN ===== */
.adm{display:grid; grid-template-columns:206px 1fr; gap:16px; align-items:start}
.adm__nav{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:10px; position:sticky; top:124px; display:grid; gap:3px}
.adm__nav button{display:flex; align-items:center; gap:9px; width:100%; text-align:start; border:0; background:transparent; border-radius:11px; padding:10px 12px; font-size:.86rem; font-weight:600; color:var(--text-2)}
.adm__nav button:hover{background:var(--surface-2); color:var(--text)}
.adm__nav button.is-active{background:var(--brand); color:#fff}
.adm__out{min-width:0}
.adm__bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.adm__bar h1{margin:0; font-size:1.2rem}
.adm__bar .spacer{flex:1}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px; margin-bottom:18px}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px}
.stat small{color:var(--text-2); font-size:.78rem}
.stat b{display:block; font-size:1.35rem; font-weight:800; margin-top:2px}
.stat--warn b{color:var(--rose)}
.gate{width:min(420px,100%); margin:36px auto}
.gate__ico{font-size:2.4rem; text-align:center}
.status{display:inline-block; padding:3px 10px; border-radius:99px; font-size:.74rem; font-weight:700; white-space:nowrap}
.status--pending{background:color-mix(in srgb,var(--amber) 18%,var(--surface)); color:color-mix(in srgb,var(--amber) 75%,var(--text))}
.status--paid{background:color-mix(in srgb,var(--brand) 16%,var(--surface)); color:var(--brand)}
.status--sent{background:color-mix(in srgb,var(--brand-2) 18%,var(--surface)); color:var(--brand-2)}
.status--done{background:color-mix(in srgb,var(--green) 18%,var(--surface)); color:var(--green)}
.status--cancel{background:color-mix(in srgb,var(--rose) 16%,var(--surface)); color:var(--rose)}
.tbl__img{width:40px; height:40px; border-radius:8px; background:var(--surface-2); display:grid; place-items:center; padding:3px}
.tbl__img svg,.tbl__img img{width:100%; height:100%; object-fit:contain}
.tbl__acts{display:flex; gap:5px}
.warnbox{background:color-mix(in srgb,var(--amber) 12%,var(--surface)); border:1px solid color-mix(in srgb,var(--amber) 32%,transparent); border-radius:12px; padding:11px 14px; font-size:.79rem; line-height:1.9; color:var(--text-2); margin-bottom:14px}
.prose{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:20px 22px; line-height:2; font-size:.88rem}
.prose h1{font-size:1.25rem} .prose h2{font-size:1rem; margin-top:1.2rem}
.prose p,.prose li{color:var(--text-2)}
.prose ul li{padding-inline-start:16px; position:relative}
.prose ul li::before{content:"•"; position:absolute; inset-inline-start:0; color:var(--brand)}

@media(max-width:1080px){
  .pdp{grid-template-columns:300px 1fr}
  .buybox{grid-column:1/-1; position:static}
  .gallery{position:static}
}
@media(max-width:980px){
  .cartlay,.colay{grid-template-columns:1fr}
  .sumbox{position:static}
  .adm{grid-template-columns:1fr}
  .adm__nav{position:static; display:flex; overflow-x:auto}
  .adm__nav button{white-space:nowrap}
}
@media(max-width:720px){
  .pdp{grid-template-columns:1fr}
  .citem{grid-template-columns:76px 1fr; gap:10px}
  .citem__img{width:76px; height:76px}
  .citem__side{grid-column:1/-1; flex-direction:row; align-items:center}
  .specs{grid-template-columns:1fr}
}