/* =========================================================
   Wokin homepage sections (built on the header's tokens/font)
   ========================================================= */
.wk-hero{
  --wk-o:#FF7A00; --wk-ink:#101828;
  --wk-ease:cubic-bezier(.2,.7,.2,1);
  font-family:"Estedad", Vazir, Tahoma, sans-serif;
}
.wk-hero *{ box-sizing:border-box }

/* ---------- slider: 1911×430 like the reference (≈4.44:1). Upload desktop banners at 1920×430. ---------- */
.wk-hero{ padding:16px 32px 4px; background:#fff }
.wk-hero__slider{ position:relative; width:100%; height:calc((100vw - 64px) * 430 / 1911) !important; min-height:0; overflow:hidden; border-radius:16px; transform:translateZ(0); background:#E9EBEF; isolation:isolate; margin:0 }
.wk-hero__slider .swiper-wrapper, .wk-hero__slider .swiper-slide{ height:100% !important }
.wk-hero__slider .swiper-slide{ overflow:hidden; background:#E9EBEF }
.wk-hero__link{ display:block; height:100% }
.wk-hero__slider picture, .wk-hero__slider img{ display:block; width:100%; height:100% }
.wk-hero__slider img{ object-fit:cover; object-position:center }
/* smooth, eased slide between images */
.wk-hero__slider .swiper-wrapper{ transition-timing-function:cubic-bezier(.65,0,.35,1) !important }

/* progress bars + counter (bottom, start side) */
.wk-hero__ui{ position:absolute; z-index:5; right:32px; bottom:22px; display:flex; align-items:center; gap:14px; padding:8px 12px; border-radius:999px;
  background:rgba(16,16,18,.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
.wk-hero__bars{ display:flex; gap:6px }
.wk-hero__bar{ position:relative; width:22px; height:4px; padding:0; margin:0; border:0; border-radius:4px; background:rgba(255,255,255,.4); overflow:hidden; cursor:pointer; transition:width .4s var(--wk-ease) }
.wk-hero__bar::before{ content:""; position:absolute; inset:-8px 0 }
.wk-hero__bar i{ position:absolute; inset:0; border-radius:inherit; background:#fff; transform:scaleX(0); transform-origin:right }
.wk-hero__bar.is-done i{ transform:scaleX(1) }
.wk-hero__bar.is-on{ width:48px }
.wk-hero__bar.is-on i{ animation:wk-hero-fill var(--wk-delay, 5500ms) linear forwards; background:var(--wk-o) }
.wk-hero__slider.is-paused .wk-hero__bar.is-on i{ animation-play-state:paused }
@keyframes wk-hero-fill{ to{ transform:scaleX(1) } }
.wk-hero__count{ color:rgba(255,255,255,.75); font-size:12px; font-weight:500; letter-spacing:.04em; white-space:nowrap }
.wk-hero__count b{ color:#fff; font-weight:800 }

/* prev / next: appear on hover */
.wk-hero__nav{ position:absolute; z-index:5; top:50%; width:44px; height:44px; margin-top:-22px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.85); color:var(--wk-ink); box-shadow:0 4px 14px rgba(16,24,40,.18);
  cursor:pointer; opacity:0; transition:opacity .3s, transform .3s var(--wk-ease), background .2s }
.wk-hero__nav svg{ width:22px; height:22px }
.wk-hero__nav--prev{ right:24px; transform:translateX(10px) }
.wk-hero__nav--next{ left:24px; transform:translateX(-10px) }
.wk-hero__slider:hover .wk-hero__nav{ opacity:1; transform:none }
.wk-hero__nav:hover{ background:#fff }

/* ---------- mobile: taller ratio so images stay readable ---------- */
@media (max-width:767px){
  .wk-hero{ padding:10px 12px 2px }
  .wk-hero__slider{ height:calc((100vw - 24px) / 3) !important; border-radius:12px }
  .wk-hero__nav, .wk-hero__count{ display:none }
  .wk-hero__ui{ right:50%; translate:50% 0; bottom:10px; padding:6px 10px }
  .wk-hero__bar{ width:14px; height:3px } .wk-hero__bar.is-on{ width:32px }
}
@media (prefers-reduced-motion:reduce){
  .wk-hero *{ transition:none !important; animation:none !important }
}

/* =========================================================
   Category stories
   ========================================================= */
.wk-stories{ --wk-o:#FF7A00; --wk-ink:#101828; --wk-muted:#667085; --wk-ease:cubic-bezier(.2,.7,.2,1);
  background:#fff; font-family:"Estedad", Vazir, Tahoma, sans-serif; padding:22px 32px 26px }
.wk-stories *{ box-sizing:border-box }
.wk-stories__wrap{ position:relative }
.wk-stories__track{ display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:6px 4px 4px; scrollbar-width:none;
  --fs:48px; --fe:48px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--fe), #000 calc(100% - var(--fs)), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 var(--fe), #000 calc(100% - var(--fs)), transparent 100%) }
.wk-stories__track.at-start{ --fs:0px } .wk-stories__track.at-end{ --fe:0px }
.wk-stories__track::-webkit-scrollbar{ display:none }

.wk-story{ flex:none; width:104px; display:flex; flex-direction:column; align-items:center; gap:10px; scroll-snap-align:start; text-decoration:none !important }
/* gradient ring like a story; it turns slowly on hover */
.wk-story__ring{ position:relative; width:96px; height:96px; border-radius:50%; padding:3px; isolation:isolate }
.wk-story__ring::before{ content:""; position:absolute; inset:0; border-radius:50%; z-index:-1;
  background:conic-gradient(from 210deg, #FF5E00, #FF9A1F, #FFC04D, #FF9A1F, #FF5E00) }
.wk-story:hover .wk-story__ring::before{ animation:wk-ring 2.4s linear infinite }
@keyframes wk-ring{ to{ transform:rotate(360deg) } }
.wk-story__img{ display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:#F4F5F7; border:3px solid #fff; overflow:hidden; transition:background .3s }
.wk-story__img img{ width:78%; height:78%; object-fit:contain; mix-blend-mode:multiply; transition:transform .45s var(--wk-ease) }
.wk-story:hover .wk-story__img{ background:#FFF4EA }
.wk-story:hover .wk-story__img img{ transform:scale(1.1) }
.wk-story__name{ font-size:13px; font-weight:600; color:var(--wk-ink); text-align:center; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s }
.wk-story:hover .wk-story__name{ color:#E96A00 }

/* arrows */
.wk-stories__nav{ position:absolute; z-index:3; top:42px; width:38px; height:38px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
  background:#fff; color:var(--wk-ink); box-shadow:0 4px 14px rgba(16,24,40,.14), 0 0 0 1px #EAECF0; cursor:pointer; transition:opacity .25s, transform .25s var(--wk-ease) }
.wk-stories__nav svg{ width:20px; height:20px }
.wk-stories__nav--prev{ right:-14px }
.wk-stories__nav--next{ left:-14px }
.wk-stories__nav:hover{ transform:scale(1.08) }
.wk-stories__nav:disabled{ opacity:0; pointer-events:none }

@media (max-width:991px){
  .wk-stories{ padding:16px 12px 18px }
  .wk-stories__track{ gap:16px; -webkit-mask-image:none; mask-image:none }
  .wk-story{ width:78px; gap:8px }
  .wk-story__ring{ width:72px; height:72px; padding:2.5px }
  .wk-story__img{ border-width:2.5px }
  .wk-story__name{ font-size:11.5px }
  .wk-stories__nav{ display:none }
}
@media (prefers-reduced-motion:reduce){ .wk-stories *{ animation:none !important; transition:none !important } }

/* 12 compact stories: one row on desktop, swipe on mobile */
.wk-stories__track{ justify-content:space-between; gap:12px }
.wk-story{ width:96px; gap:8px }
.wk-story__ring{ width:84px; height:84px; padding:2.5px }
.wk-story__img{ border-width:3px }
.wk-story__name{ font-size:12.5px }
@media (max-width:1199px){
  .wk-stories__track{ justify-content:flex-start; gap:18px }
}
@media (max-width:991px){
  .wk-stories__track{ gap:14px }
  .wk-story{ width:72px }
  .wk-story__ring{ width:66px; height:66px }
  .wk-story__name{ font-size:11px }
}

/* ---- reference style: section heading + thin single-colour rings ---- */
.wk-stories{ padding:30px 32px 30px }
.wk-sec-head{ max-width:1360px; margin:0 auto 22px; display:flex; flex-direction:column; gap:4px }
.wk-sec-head small{ font-size:13px; font-weight:600; color:#E96A00 }
.wk-sec-head h2{ margin:0; font-size:24px; font-weight:800; color:#101828; letter-spacing:-.01em; font-family:inherit }
.wk-stories__wrap{ max-width:1360px; margin-inline:auto }
.wk-stories__track{ justify-content:space-between; gap:8px; padding-block:4px }
.wk-story{ width:96px; gap:10px }
.wk-story__ring{ width:86px; height:86px; padding:4px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px var(--wk-o); transition:box-shadow .3s var(--wk-ease) }
.wk-story__ring::before{ display:none }
.wk-story__img{ border:0; background:#fff }
.wk-story__img img{ width:80%; height:80%; mix-blend-mode:normal }
.wk-story:hover .wk-story__ring{ box-shadow:inset 0 0 0 2.5px var(--wk-o), 0 8px 20px -10px rgba(255,122,0,.6) }
.wk-story:hover .wk-story__img{ background:#fff }
.wk-story:hover .wk-story__img img{ transform:scale(1.08) }
.wk-story__name{ font-size:13px; font-weight:500; color:#344054 }
.wk-story:hover .wk-story__name{ color:#E96A00 }
@media (max-width:1199px){ .wk-stories__track{ justify-content:flex-start; gap:20px } }
@media (max-width:991px){
  .wk-stories{ padding:20px 12px 20px }
  .wk-sec-head{ margin-bottom:14px } .wk-sec-head h2{ font-size:18px } .wk-sec-head small{ font-size:12px }
  .wk-stories__track{ gap:14px }
  .wk-story{ width:74px; gap:8px }
  .wk-story__ring{ width:68px; height:68px; padding:3px }
  .wk-story__name{ font-size:11.5px }
}

/* layered (parallax) slide: dark backdrop shows through the dimming banner */
.wk-hero__slider{ background:#0E0E10 }
.wk-hero__slider .swiper-slide{ background:#0E0E10 }

/* =========================================================
   WOKIN special offers
   ========================================================= */
.wk-offers{ --wk-o:#FF7A00; --wk-ink:#101828; --wk-text:#344054; --wk-muted:#98A2B3; --wk-ease:cubic-bezier(.2,.7,.2,1);
  background:#fff; padding:10px 32px 34px; font-family:"Estedad", Vazir, Tahoma, sans-serif }
.wk-offers *{ box-sizing:border-box }
.wk-offers__panel{ position:relative; max-width:1360px; margin-inline:auto; display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; align-items:stretch;
  padding:22px; border-radius:24px; overflow:hidden; isolation:isolate; color:#fff;
  background:radial-gradient(60% 120% at 100% 0%, #FFA53A 0%, transparent 60%), linear-gradient(135deg, #FF7A00 0%, #F25F00 60%, #E04F00 100%) }
/* faint big "%" watermark + soft grid texture */
.wk-offers__panel::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:28px 28px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 70%); mask-image:linear-gradient(90deg, transparent, #000 70%) }
.wk-offers__panel::after{ content:"%"; position:absolute; z-index:-1; right:40px; bottom:-70px; font-size:260px; font-weight:800; line-height:1; color:rgba(255,255,255,.08); font-family:inherit }

.wk-offers__intro{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:10px 6px }
.wk-offers__badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 12px; border-radius:999px; background:rgba(255,255,255,.18); font-size:12px; font-weight:700; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3) }
.wk-offers__badge svg{ width:16px; height:16px }
.wk-offers__intro h2{ margin:4px 0 0; font-size:30px; font-weight:800; line-height:1.35; color:#fff; font-family:inherit }
.wk-offers__intro p{ margin:0; font-size:13px; opacity:.85; line-height:1.8 }
.wk-offers__all{ display:inline-flex; align-items:center; gap:4px; margin-top:6px; height:40px; padding-inline:16px 12px; border-radius:12px; background:#fff; color:#E05A00 !important; font-size:13px; font-weight:700; text-decoration:none !important; transition:transform .2s var(--wk-ease), box-shadow .2s }
.wk-offers__all svg{ width:16px; height:16px }
.wk-offers__all:hover{ transform:translateY(-1px); box-shadow:0 10px 20px -10px rgba(80,20,0,.6) }
.wk-offers__arrows{ display:flex; gap:8px; margin-top:auto }
.wk-offers__nav{ width:38px; height:38px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); transition:background .2s, opacity .2s }
.wk-offers__nav svg{ width:18px; height:18px }
.wk-offers__nav:hover{ background:#fff; color:#E05A00 }
.wk-offers__nav:disabled{ opacity:.35; pointer-events:none }

.wk-offers__track{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding:2px; margin:-2px; min-width:0 }
.wk-offers__track::-webkit-scrollbar{ display:none }

/* product card */
.wk-pcard{ flex:none; width:200px; display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:16px; background:#fff; color:var(--wk-ink) !important;
  text-decoration:none !important; scroll-snap-align:start; transition:transform .3s var(--wk-ease), box-shadow .3s }
.wk-pcard:hover{ transform:translateY(-4px); box-shadow:0 18px 30px -16px rgba(80,20,0,.55) }
.wk-pcard__img{ position:relative; display:grid; place-items:center; aspect-ratio:1 / 1; border-radius:12px; background:#F7F7F8; overflow:hidden }
.wk-pcard__img img{ width:84%; height:84%; object-fit:contain; mix-blend-mode:multiply; transition:transform .45s var(--wk-ease) }
.wk-pcard:hover .wk-pcard__img img{ transform:scale(1.06) }
.wk-pcard__off{ position:absolute; top:8px; right:8px; padding:3px 8px; border-radius:8px; background:#E53935; color:#fff; font-size:12px; font-weight:800; font-style:normal }
.wk-pcard__name{ font-size:13px; font-weight:500; line-height:1.8; color:var(--wk-text); min-height:3.6em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.wk-pcard__price{ margin-top:auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px }
.wk-pcard__price del{ font-size:12px; color:var(--wk-muted) }
.wk-pcard__price b{ font-size:15px; font-weight:800; color:var(--wk-ink) }
.wk-pcard__price small{ font-size:11px; font-weight:500; color:var(--wk-muted) }

@media (max-width:991px){
  .wk-offers{ padding:6px 12px 24px }
  .wk-offers__panel{ grid-template-columns:minmax(0,1fr); padding:18px 14px; border-radius:20px; gap:14px }
  .wk-offers__intro{ flex-direction:row; flex-wrap:wrap; align-items:center; padding:0 4px; gap:8px 12px }
  .wk-offers__intro h2{ font-size:20px; margin:0 } .wk-offers__intro h2 br{ display:none }
  .wk-offers__intro p, .wk-offers__arrows, .wk-offers__badge{ display:none }
  .wk-offers__all{ margin:0 auto 0 0; height:34px; font-size:12px }
  .wk-pcard{ width:156px; padding:10px }
  .wk-pcard__price b{ font-size:14px }
}
@media (prefers-reduced-motion:reduce){ .wk-offers *{ transition:none !important } }

/* ---- offers intro v2 ---- */
.wk-offers__panel{ grid-template-columns:250px minmax(0,1fr) }
.wk-offers__intro{ position:relative; gap:12px; padding:8px 6px 4px }
.wk-offers__title{ margin:2px 0 0; display:flex; flex-direction:column; line-height:1.2; color:#fff; font-family:inherit }
.wk-offers__title span:first-child{ font-size:22px; font-weight:600; opacity:.9 }
.wk-offers__title-hl{ position:relative; font-size:34px; font-weight:800; letter-spacing:-.02em; white-space:nowrap }
.wk-offers__title-hl svg{ position:absolute; right:0; bottom:-10px; width:100%; height:12px; color:#FFD27A }
.wk-offers__hero{ position:relative; align-self:center; margin:18px 0 6px; width:150px; height:150px; border-radius:50%; display:grid; place-items:center;
  background:#fff; box-shadow:0 0 0 10px rgba(255,255,255,.14), 0 0 0 22px rgba(255,255,255,.07), 0 24px 40px -16px rgba(90,25,0,.6); transform:rotate(-6deg); transition:transform .5s var(--wk-ease) }
.wk-offers__hero img{ width:78%; height:78%; object-fit:contain; mix-blend-mode:multiply }
.wk-offers__hero:hover{ transform:rotate(0) scale(1.04) }
.wk-offers__foot{ margin-top:auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px }
.wk-offers__foot .wk-offers__all{ margin:0 }
.wk-offers__foot .wk-offers__arrows{ margin:0 }
@media (max-width:991px){
  .wk-offers__hero, .wk-offers__badge{ display:none }
  .wk-offers__title{ flex-direction:row; gap:6px; align-items:baseline }
  .wk-offers__title span:first-child{ font-size:20px; font-weight:800; opacity:1 }
  .wk-offers__title-hl{ font-size:20px } .wk-offers__title-hl svg{ bottom:-7px; height:8px }
  .wk-offers__foot{ width:auto; margin:0 auto 0 0 }
}
.wk-offers__hero{ width:124px; height:124px; margin:14px 0 4px }
.wk-offers__track{ align-items:flex-start }
@media (max-width:991px){
  .wk-offers__panel{ grid-template-columns:minmax(0,1fr) }
  .wk-offers__intro{ flex-direction:row; align-items:center; justify-content:space-between }
  .wk-offers__foot{ width:auto; margin:0 }
}

/* =========== offers in deep, calm red (not neon) =========== */
.wk-offers__panel{ background:radial-gradient(60% 120% at 100% 0%, rgba(255,120,120,.28) 0%, transparent 60%), linear-gradient(135deg, #C62839 0%, #A91E30 55%, #8E1828 100%) }
.wk-offers__all{ color:#A91E30 !important }
.wk-offers__nav:hover{ color:#A91E30 }
.wk-offers__hero{ box-shadow:0 0 0 10px rgba(255,255,255,.12), 0 0 0 22px rgba(255,255,255,.06), 0 24px 40px -16px rgba(60,0,10,.6) }
.wk-offers__title-hl svg{ color:#FFC9A3 }
.wk-pcard:hover{ box-shadow:0 18px 30px -16px rgba(60,0,10,.55) }
.wk-pcard__off{ background:#C62839 }

/* ---- featured "deal of the day" card (replaces the circle) ---- */
.wk-offers__hero{ position:relative; align-self:stretch; width:auto; height:auto; margin:16px 6px 8px; padding:10px 10px 12px; border-radius:18px; background:#fff;
  display:flex; flex-direction:column; gap:8px; color:#101828 !important; text-decoration:none !important;
  box-shadow:0 22px 40px -18px rgba(60,0,10,.65); transform:rotate(-3deg); transition:transform .45s var(--wk-ease), box-shadow .45s; isolation:isolate }
/* translucent card behind, for a stacked look */
.wk-offers__hero::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:rgba(255,255,255,.22); transform:rotate(7deg) translate(-6px, 4px); transition:transform .45s var(--wk-ease) }
.wk-offers__hero:hover{ transform:rotate(0) translateY(-4px); box-shadow:0 28px 46px -18px rgba(60,0,10,.7) }
.wk-offers__hero:hover::before{ transform:rotate(10deg) translate(-10px, 6px) }
.wk-offers__hero-tag{ position:absolute; z-index:2; top:-10px; right:12px; display:inline-flex; align-items:center; gap:4px; padding:4px 10px 4px 9px; border-radius:999px;
  background:#101828; color:#fff; font-size:11px; font-weight:700; box-shadow:0 6px 14px -6px rgba(0,0,0,.5) }
.wk-offers__hero-tag svg{ width:13px; height:13px; color:#FFB37A }
.wk-offers__hero-img{ display:grid; place-items:center; aspect-ratio:16 / 10; border-radius:12px; background:#F7F7F8; overflow:hidden }
.wk-offers__hero-img img{ width:86%; height:86%; object-fit:contain; mix-blend-mode:multiply; transition:transform .45s var(--wk-ease) }
.wk-offers__hero:hover .wk-offers__hero-img img{ transform:scale(1.06) }
.wk-offers__hero-name{ font-size:12.5px; font-weight:600; line-height:1.7; color:#344054; padding-inline:2px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden }
.wk-offers__hero-price{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; padding-inline:2px }
.wk-offers__hero-price del{ font-size:11px; color:#98A2B3 }
.wk-offers__hero-price b{ margin-inline-start:auto; font-size:15px; font-weight:800; color:#A91E30 }
.wk-offers__hero-price small{ font-size:10.5px; font-weight:500; color:#98A2B3 }
@media (max-width:991px){ .wk-offers__hero{ display:none } }

/* ---- compact intro column ---- */
.wk-offers__panel{ grid-template-columns:190px minmax(0,1fr); gap:16px; padding:18px }
.wk-offers__intro{ gap:8px; padding:6px 2px 2px }
.wk-offers__title span:first-child{ font-size:17px }
.wk-offers__title-hl{ font-size:26px }
.wk-offers__title-hl svg{ bottom:-8px; height:9px }
.wk-offers__hero{ margin:16px 4px 6px; padding:8px 8px 10px; border-radius:14px; gap:6px; transform:rotate(-2deg) }
.wk-offers__hero-img{ aspect-ratio:4 / 3; border-radius:10px }
.wk-offers__hero-name{ display:none }
.wk-offers__hero-price{ justify-content:flex-end }
.wk-offers__hero-price b{ font-size:13.5px }
.wk-offers__hero-tag{ top:-9px; font-size:10.5px; padding:3px 8px }
.wk-offers__foot{ flex-direction:column; align-items:stretch; gap:8px }
.wk-offers__foot .wk-offers__all{ justify-content:center; height:38px }
.wk-offers__foot .wk-offers__arrows{ justify-content:center }
.wk-offers__nav{ width:34px; height:34px }
.wk-offers__panel::after{ font-size:200px; bottom:-56px; right:20px }
@media (max-width:991px){
  .wk-offers__panel{ grid-template-columns:minmax(0,1fr) }
  .wk-offers__foot{ flex-direction:row }
}

/* featured card removed: intro = title on top, actions at the bottom */
.wk-offers__intro{ justify-content:space-between; padding:10px 4px 4px }
.wk-offers__title span:first-child{ font-size:18px }
.wk-offers__title-hl{ font-size:28px }

/* =========================================================
   Store features strip
   ========================================================= */
.wk-features{ background:#fff; padding:6px 32px 34px; font-family:"Estedad", Vazir, Tahoma, sans-serif }
.wk-features *{ box-sizing:border-box }
.wk-features__list{ max-width:1360px; margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  background:#F9FAFB; border:1px solid #EAECF0; border-radius:20px }
.wk-feat{ position:relative; display:flex; align-items:center; justify-content:center; gap:14px; padding:22px 18px; margin:0 }
.wk-feat + .wk-feat::before{ content:""; position:absolute; right:0; top:24%; bottom:24%; width:1px; background:#EAECF0 }
.wk-feat__ic{ width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius:14px; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.05), 0 0 0 1px #EAECF0;
  transition:background .3s, box-shadow .3s, transform .3s cubic-bezier(.2,.7,.2,1) }
.wk-feat__ic svg{ width:26px; height:26px; color:#E96A00; transition:color .3s }
.wk-feat:hover .wk-feat__ic{ background:#FF7A00; box-shadow:0 10px 20px -10px rgba(255,122,0,.8); transform:translateY(-2px) }
.wk-feat:hover .wk-feat__ic svg{ color:#fff }
.wk-feat__txt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.wk-feat__txt b{ font-size:15px; font-weight:700; color:#101828 }
.wk-feat__txt small{ font-size:12.5px; color:#667085 }
@media (max-width:991px){
  .wk-features{ padding:4px 12px 24px }
  .wk-features__list{ grid-template-columns:repeat(2, minmax(0,1fr)); border-radius:16px }
  .wk-feat{ justify-content:flex-start; padding:16px 14px; gap:10px }
  .wk-feat + .wk-feat::before{ display:none }
  .wk-feat:nth-child(-n+2){ border-bottom:1px solid #EAECF0 }
  .wk-feat:nth-child(odd){ border-left:1px solid #EAECF0 }
  .wk-feat__ic{ width:42px; height:42px; border-radius:12px }
  .wk-feat__ic svg{ width:22px; height:22px }
  .wk-feat__txt b{ font-size:13.5px } .wk-feat__txt small{ font-size:11.5px }
}

/* =========================================================
   Promo banners row (3 cards)
   ========================================================= */
.wk-promos{ background:#fff; padding:4px 32px 34px }
.wk-promos__grid{ max-width:1360px; margin:0 auto; display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0,1fr)); gap:20px }
.wk-promo-card{ position:relative; display:block; aspect-ratio:1032 / 476; border-radius:20px; overflow:hidden; isolation:isolate; background:#F2F4F7;
  box-shadow:0 1px 2px rgba(16,24,40,.06); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s }
.wk-promo-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1) }
/* light sweep on hover */
.wk-promo-card::after{ content:""; position:absolute; inset:-20% auto -20% -60%; width:40%; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); transition:left .8s cubic-bezier(.2,.7,.2,1) }
.wk-promo-card:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -20px rgba(16,24,40,.35) }
.wk-promo-card:hover img{ transform:scale(1.04) }
.wk-promo-card:hover::after{ left:120% }
@media (max-width:991px){
  .wk-promos{ padding:0 12px 24px }
  .wk-promos__grid{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none }
  .wk-promos__grid::-webkit-scrollbar{ display:none }
  .wk-promo-card{ flex:none; width:82%; scroll-snap-align:start; border-radius:16px }
  .wk-promo-card:only-child{ width:100% }
}
@media (prefers-reduced-motion:reduce){ .wk-promo-card, .wk-promo-card img, .wk-promo-card::after{ transition:none } }

/* ---- coded promo banners ---- */
.wk-promos__grid{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.wk-promo-card{ display:flex; align-items:stretch; color:#fff !important; text-decoration:none !important; font-family:"Estedad", Vazir, Tahoma, sans-serif }
.wk-promo-card::before{ content:""; position:absolute; z-index:-1; width:62%; aspect-ratio:1; left:-8%; top:50%; translate:0 -50%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.22), transparent 68%); transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.wk-promo-card:hover::before{ transform:scale(1.12) }
.wk-promo-card--blue{ background:radial-gradient(80% 120% at 15% 100%, rgba(255,122,0,.35), transparent 60%), linear-gradient(135deg, #12357F 0%, #0B1F4D 100%) }
.wk-promo-card--orange{ background:radial-gradient(80% 120% at 15% 100%, rgba(255,214,140,.55), transparent 60%), linear-gradient(135deg, #FF8A1F 0%, #F05A00 100%) }
.wk-promo-card--dark{ background:
  linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 22px 22px,
  linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 22px 22px,
  radial-gradient(80% 120% at 15% 100%, rgba(255,122,0,.3), transparent 60%), #16171B }
.wk-promo-card__txt{ position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:6px; padding:22px 26px; max-width:58% }
.wk-promo-card__chip{ font-style:normal; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28) }
.wk-promo-card--blue .wk-promo-card__chip{ color:#FFB46B }
.wk-promo-card__txt b{ font-size:clamp(20px, 1.9vw, 28px); font-weight:800; line-height:1.35; letter-spacing:-.02em; text-wrap:balance }
.wk-promo-card__txt small{ font-size:12.5px; opacity:.82; line-height:1.7 }
.wk-promo-card__cta{ display:inline-flex; align-items:center; gap:4px; margin-top:8px; height:36px; padding-inline:14px 10px; border-radius:10px; background:#fff; font-size:12.5px; font-weight:700; transition:box-shadow .3s }
.wk-promo-card--blue .wk-promo-card__cta{ color:#12357F }
.wk-promo-card--orange .wk-promo-card__cta{ color:#E05200 }
.wk-promo-card--dark .wk-promo-card__cta{ color:#16171B }
.wk-promo-card__cta svg{ width:15px; height:15px; transition:transform .3s cubic-bezier(.2,.7,.2,1) }
.wk-promo-card:hover .wk-promo-card__cta svg{ transform:translateX(-4px) }
.wk-promo-card__art{ position:absolute; z-index:2; left:2%; top:50%; translate:0 -50%; width:50%; height:92%; display:grid; place-items:center; pointer-events:none }
.wk-promo-card__art img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 18px 22px rgba(0,0,0,.4)); transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.wk-promo-card:hover .wk-promo-card__art img{ transform:scale(1.07) rotate(-3deg) }
.wk-promo-card:hover img{ }
@media (max-width:991px){
  .wk-promos__grid{ display:flex }
  .wk-promo-card__txt{ padding:18px 18px; max-width:60% }
  .wk-promo-card__txt b{ font-size:20px }
}

/* ---- unified brand palette for the 3 promos: charcoal / orange / cream ---- */
.wk-promo-card--dark{ background:radial-gradient(70% 110% at 18% 100%, rgba(255,122,0,.38), transparent 62%), linear-gradient(135deg, #1D1E22 0%, #111215 100%) }
.wk-promo-card--dark .wk-promo-card__chip{ color:#FFB46B }
.wk-promo-card--dark .wk-promo-card__cta{ color:#111215 }
.wk-promo-card--orange{ background:radial-gradient(70% 110% at 18% 100%, rgba(255,214,150,.5), transparent 62%), linear-gradient(135deg, #FF8A1F 0%, #F26300 100%) }
.wk-promo-card--orange .wk-promo-card__cta{ color:#E05A00 }
.wk-promo-card--light{ color:#16171B !important; background:radial-gradient(70% 110% at 18% 100%, rgba(255,122,0,.18), transparent 62%), linear-gradient(135deg, #FFF6EC 0%, #FBE9D7 100%); box-shadow:inset 0 0 0 1px #F3DCC4 }
.wk-promo-card--light::before{ background:radial-gradient(circle, rgba(255,255,255,.9), transparent 68%) }
.wk-promo-card--light .wk-promo-card__chip{ color:#E05A00; background:#fff; box-shadow:inset 0 0 0 1px #F3DCC4 }
.wk-promo-card--light .wk-promo-card__txt small{ color:#5B5148; opacity:1 }
.wk-promo-card--light .wk-promo-card__cta{ background:#16171B; color:#fff }
.wk-promo-card--light .wk-promo-card__art img{ filter:drop-shadow(0 16px 18px rgba(120,60,10,.28)) }

/* =========================================================
   Promo banners v3: light pastel cards (reference style)
   ========================================================= */
.wk-promos{ padding:8px 32px 30px }
.wk-promos__grid{ gap:18px }
.wk-promo-card{ --tint:#FFE9D9; --tint2:#FFD9BF; --acc:#E8590C; --ink:#4A2306;
  color:var(--ink) !important; border-radius:20px; box-shadow:none !important; aspect-ratio:auto; min-height:220px;
  background:linear-gradient(160deg, #fff 0%, var(--tint) 55%, var(--tint2) 100%) !important }
.wk-promo-card--peach{ --tint:#FFEADB; --tint2:#FFD5B8; --acc:#E8590C; --ink:#4A2306 }
.wk-promo-card--sky{   --tint:#E3EDFF; --tint2:#CFDFFF; --acc:#2F6BEA; --ink:#13254F }
.wk-promo-card--sand{  --tint:#FFF3D6; --tint2:#FFE4A8; --acc:#C27A06; --ink:#4A3305 }
.wk-promo-card::before{ display:none }
.wk-promo-card::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent) }
.wk-promo-card:hover{ transform:translateY(-3px) }

.wk-promo-card__txt{ max-width:55%; padding:26px 26px 22px; gap:10px; justify-content:space-between }
.wk-promo-card__chip{ background:#fff !important; color:var(--acc) !important; box-shadow:0 1px 2px rgba(0,0,0,.05) !important; font-size:12px; padding:5px 11px }
.wk-promo-card__txt b{ font-size:clamp(18px, 1.55vw, 23px); line-height:1.6; color:var(--ink) }
.wk-promo-card__txt small{ display:none }
.wk-promo-card__cta{ margin-top:6px; height:42px; padding-inline:18px 14px; border-radius:999px; background:var(--acc) !important; color:#fff !important; font-size:13px;
  box-shadow:0 10px 20px -10px var(--acc) }
.wk-promo-card__cta svg{ color:#fff }

/* product on a soft white pedestal */
.wk-promo-card__art{ left:4%; width:44%; height:84% }
.wk-promo-card__art::after{ content:""; position:absolute; left:8%; right:8%; bottom:4%; height:16%; border-radius:50%; z-index:-1;
  background:radial-gradient(ellipse at center, #fff 0%, rgba(255,255,255,.85) 45%, transparent 72%) }
.wk-promo-card__art img{ height:88%; filter:drop-shadow(0 14px 14px rgba(0,0,0,.18)) !important; margin-bottom:8% }

@media (max-width:991px){
  .wk-promos{ padding:0 12px 22px }
  .wk-promo-card{ min-height:190px }
  .wk-promo-card__txt{ padding:20px 18px }
}

/* =========================================================
   Representative strip
   ========================================================= */
.wk-rep-strip{ background:#fff; padding:0 32px 34px; font-family:"Estedad", Vazir, Tahoma, sans-serif }
.wk-rep-strip *{ box-sizing:border-box }
.wk-rep-strip__box{ max-width:1360px; margin:0 auto; display:flex; align-items:center; gap:18px; padding:22px 28px; border-radius:20px;
  background:linear-gradient(90deg, #FFF4EA 0%, #FFFAF5 60%, #fff 100%); border:1px solid #FBE1CA }
.wk-rep-strip__ic{ width:56px; height:56px; flex:none; display:grid; place-items:center; border-radius:50%; background:#FF7A00; box-shadow:0 10px 22px -10px rgba(255,122,0,.9) }
.wk-rep-strip__ic svg{ width:26px; height:26px; color:#fff }
.wk-rep-strip__txt{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.wk-rep-strip__txt b{ font-size:17px; font-weight:800; color:#101828 }
.wk-rep-strip__txt small{ font-size:13px; color:#667085; line-height:1.8 }
.wk-rep-strip__btn{ margin-inline-start:auto; flex:none; display:inline-flex; align-items:center; gap:6px; height:46px; padding-inline:22px 16px; border-radius:999px;
  background:#FF7A00; color:#fff !important; font-size:14px; font-weight:700; text-decoration:none !important; box-shadow:0 10px 22px -10px rgba(255,122,0,.9); transition:background .2s, transform .2s }
.wk-rep-strip__btn svg{ width:16px; height:16px }
.wk-rep-strip__btn:hover{ background:#E96A00; transform:translateY(-1px) }
@media (max-width:767px){
  .wk-rep-strip{ padding:0 12px 24px }
  .wk-rep-strip__box{ flex-wrap:wrap; padding:18px; gap:12px }
  .wk-rep-strip__ic{ width:46px; height:46px } .wk-rep-strip__ic svg{ width:22px; height:22px }
  .wk-rep-strip__txt{ flex:1 }
  .wk-rep-strip__btn{ width:100%; justify-content:center; margin:0 }
}

/* =========================================================
   Rails: bordered panel + horizontal row with dividers
   ========================================================= */
.wk-rail{ background:#fff; padding:0 32px 28px; font-family:"Estedad", Vazir, Tahoma, sans-serif }
.wk-rail *{ box-sizing:border-box }
.wk-rail__box{ max-width:1360px; margin:0 auto; border:1px solid #E4E7EC; border-radius:24px; padding:22px 24px 18px; background:#fff }
.wk-rail__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding-inline:6px }
.wk-rail__head h2{ margin:0; font-size:20px; font-weight:800; color:#101828; font-family:inherit }
.wk-rail__all{ display:inline-flex; align-items:center; gap:4px; font-size:13.5px; font-weight:600; color:#E96A00 !important; text-decoration:none !important }
.wk-rail__all svg{ width:16px; height:16px; transition:transform .2s }
.wk-rail__all:hover svg{ transform:translateX(-3px) }

.wk-rail__body{ position:relative }
.wk-rail__track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none }
.wk-rail__track::-webkit-scrollbar{ display:none }
.wk-rail__item{ position:relative; flex:none; width:calc(100% / 6); scroll-snap-align:start; padding:4px 6px }
.wk-rail__item + .wk-rail__item::before{ content:""; position:absolute; right:0; top:12%; bottom:12%; width:1px; background:#EAECF0 }

/* product card inside a rail: flat, no box */
.wk-rail .wk-pcard{ width:100%; padding:8px 12px; background:transparent; border-radius:14px; box-shadow:none !important; transform:none !important }
.wk-rail .wk-pcard:hover{ background:#FFFAF5 }
.wk-rail .wk-pcard__img{ background:transparent }
.wk-rail .wk-pcard__name{ text-align:right }

/* category tile inside a rail */
.wk-rail__cat{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px 8px 12px; border-radius:14px; text-decoration:none !important; transition:background .25s }
.wk-rail__cat-img{ width:100%; aspect-ratio:1 / 1; display:grid; place-items:center }
.wk-rail__cat-img img{ width:86%; height:86%; object-fit:contain; transition:transform .45s cubic-bezier(.2,.7,.2,1) }
.wk-rail__cat-name{ font-size:14px; font-weight:600; color:#344054; text-align:center; line-height:1.7 }
.wk-rail__cat:hover{ background:#FFFAF5 }
.wk-rail__cat:hover img{ transform:scale(1.06) }
.wk-rail__cat:hover .wk-rail__cat-name{ color:#E96A00 }

/* round arrows on the edges */
.wk-rail__nav{ position:absolute; z-index:3; top:38%; width:40px; height:40px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
  background:#fff; color:#101828; box-shadow:0 4px 14px rgba(16,24,40,.14), 0 0 0 1px #EAECF0; cursor:pointer; transition:opacity .25s, transform .2s }
.wk-rail__nav svg{ width:20px; height:20px }
.wk-rail__nav--prev{ right:-14px } .wk-rail__nav--next{ left:-14px }
.wk-rail__nav:hover{ transform:scale(1.08) }
.wk-rail__nav:disabled{ opacity:0; pointer-events:none }

@media (max-width:1199px){ .wk-rail__item{ width:calc(100% / 4) } }
@media (max-width:767px){
  .wk-rail{ padding:0 12px 20px }
  .wk-rail__box{ border-radius:18px; padding:16px 10px 10px }
  .wk-rail__head h2{ font-size:16px }
  .wk-rail__item{ width:44% }
  .wk-rail__nav{ display:none }
}

/* ---- category rail: soft warm cards ---- */
.wk-rail--cats .wk-rail__box{ background:linear-gradient(180deg, #FFFBF6 0%, #fff 70%) }
.wk-rail--cats .wk-rail__track{ gap:14px; padding:4px 2px 8px }
.wk-rail--cats .wk-rail__item{ width:calc((100% - 5 * 14px) / 6); padding:0 }
.wk-rail--cats .wk-rail__item + .wk-rail__item::before{ display:none }
.wk-rail--cats .wk-rail__cat{ height:100%; gap:6px; padding:12px 12px 16px; border-radius:20px; background:linear-gradient(160deg, #FFF4E8 0%, #FFE6CF 100%);
  box-shadow:inset 0 0 0 1px rgba(255,138,31,.12); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .35s }
.wk-rail--cats .wk-rail__item:nth-child(3n+2) .wk-rail__cat{ background:linear-gradient(160deg, #F4F5F7 0%, #E9EBEF 100%); box-shadow:inset 0 0 0 1px rgba(16,24,40,.06) }
.wk-rail--cats .wk-rail__item:nth-child(3n) .wk-rail__cat{ background:linear-gradient(160deg, #FFF7E0 0%, #FFEDB8 100%); box-shadow:inset 0 0 0 1px rgba(194,122,6,.12) }
.wk-rail--cats .wk-rail__cat-img{ aspect-ratio:5 / 4 }
.wk-rail--cats .wk-rail__cat-img img{ width:92%; height:92%; filter:drop-shadow(0 12px 12px rgba(80,40,0,.18)) }
.wk-rail--cats .wk-rail__cat-name{ font-size:14.5px; font-weight:800; color:#101828 }
.wk-rail--cats .wk-rail__cat-meta{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:600; color:#98A2B3; transition:color .25s }
.wk-rail--cats .wk-rail__cat-meta svg{ width:13px; height:13px; transition:transform .25s }
.wk-rail--cats .wk-rail__cat:hover{ transform:translateY(-5px); box-shadow:inset 0 0 0 2px #FF7A00, 0 18px 30px -18px rgba(255,122,0,.7) }
.wk-rail--cats .wk-rail__cat:hover img{ transform:scale(1.08) rotate(-4deg) }
.wk-rail--cats .wk-rail__cat:hover .wk-rail__cat-name{ color:#101828 }
.wk-rail--cats .wk-rail__cat:hover .wk-rail__cat-meta{ color:#E96A00 }
.wk-rail--cats .wk-rail__cat:hover .wk-rail__cat-meta svg{ transform:translateX(-3px) }
@media (max-width:1199px){ .wk-rail--cats .wk-rail__item{ width:calc((100% - 3 * 14px) / 4) } }
@media (max-width:767px){ .wk-rail--cats .wk-rail__track{ gap:10px } .wk-rail--cats .wk-rail__item{ width:42% } }

/* ---- category cards: neutral white, no repeating pastels ---- */
.wk-rail--cats .wk-rail__box{ background:#fff }
.wk-rail--cats .wk-rail__cat,
.wk-rail--cats .wk-rail__item:nth-child(3n+2) .wk-rail__cat,
.wk-rail--cats .wk-rail__item:nth-child(3n) .wk-rail__cat{ background:#fff; box-shadow:inset 0 0 0 1px #EAECF0 }
.wk-rail--cats .wk-rail__cat-img{ position:relative; width:78%; margin:6px auto 4px; aspect-ratio:1 / 1; border-radius:50%; background:#F4F5F7; transition:background .35s }
.wk-rail--cats .wk-rail__cat-img img{ width:84%; height:84%; filter:none }
.wk-rail--cats .wk-rail__cat:hover{ box-shadow:inset 0 0 0 1.5px #FF7A00, 0 18px 30px -20px rgba(255,122,0,.65) }
.wk-rail--cats .wk-rail__cat:hover .wk-rail__cat-img{ background:#FFF1E4 }

/* ---- rail header: accent bar + pill "show all" ---- */
.wk-rail__head h2{ display:flex; align-items:center; gap:10px }
.wk-rail__bar{ display:block; width:4px; height:22px; border-radius:3px; background:#FF7A00 }
.wk-rail__all{ height:40px; padding-inline:16px 12px; border-radius:999px; border:1px solid #E4E7EC; color:#101828 !important; font-weight:700; transition:border-color .2s, background .2s }
.wk-rail__all:hover{ border-color:#FF7A00; background:#FFFAF5 }

/* ---- product tag row: label + brand, orange underline ---- */
.wk-pcard__tag{ display:flex; align-items:center; justify-content:space-between; padding-bottom:7px; border-bottom:2px solid #FF7A00; font-size:12px; line-height:1 }
.wk-pcard__tag b{ font-weight:800; color:#E96A00 }
.wk-pcard__tag i{ font-style:normal; font-weight:600; color:#98A2B3; letter-spacing:.02em }

/* =========================================================
   Wide promo banner (before flagships)
   ========================================================= */
.wk-wide{ background:#fff; padding:0 32px 28px; font-family:"Estedad", Vazir, Tahoma, sans-serif }
.wk-wide *{ box-sizing:border-box }
.wk-wide__box{ position:relative; max-width:1360px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:270px;
  padding:26px 44px; border-radius:28px; overflow:hidden; isolation:isolate; color:#fff !important; text-decoration:none !important;
  background:radial-gradient(60% 140% at 20% 110%, rgba(255,196,120,.55), transparent 60%), linear-gradient(110deg, #FF8A1F 0%, #F26A00 55%, #D95400 100%) }
.wk-wide__box::before{ content:""; position:absolute; z-index:-1; left:4%; right:44%; bottom:-30px; height:110px; border-radius:24px; background:rgba(255,255,255,.12) }
.wk-wide__txt{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; max-width:46% }
.wk-wide__txt b{ font-size:clamp(22px, 2.3vw, 34px); font-weight:800; line-height:1.4; text-wrap:balance }
.wk-wide__txt small{ font-size:14px; opacity:.88 }
.wk-wide__cta{ margin-top:6px; display:inline-flex; align-items:center; gap:8px; height:46px; padding-inline:22px 18px; border-radius:999px; background:#fff; color:#101828; font-size:14px; font-weight:700;
  box-shadow:0 10px 22px -12px rgba(90,30,0,.6); transition:transform .25s }
.wk-wide__cta svg{ width:17px; height:17px; transition:transform .25s }
.wk-wide__box:hover .wk-wide__cta svg{ transform:translateX(-4px) }
.wk-wide__tiles{ display:flex; gap:16px; align-items:center }
.wk-wide__tile{ width:190px; aspect-ratio:1 / 1; display:grid; place-items:center; border-radius:22px; background:#fff; box-shadow:0 18px 34px -20px rgba(90,30,0,.7);
  transition:transform .45s cubic-bezier(.2,.7,.2,1) }
.wk-wide__tile:nth-child(2){ transform:translateY(-12px) }
.wk-wide__tile img{ width:82%; height:82%; object-fit:contain }
.wk-wide__box:hover .wk-wide__tile:nth-child(1){ transform:translateY(-6px) rotate(-2deg) }
.wk-wide__box:hover .wk-wide__tile:nth-child(2){ transform:translateY(-18px) }
.wk-wide__box:hover .wk-wide__tile:nth-child(3){ transform:translateY(-6px) rotate(2deg) }
@media (max-width:1199px){ .wk-wide__tile{ width:150px } }
@media (max-width:991px){
  .wk-wide{ padding:0 12px 20px }
  .wk-wide__box{ flex-direction:column; align-items:stretch; padding:22px 18px; min-height:0; border-radius:20px }
  .wk-wide__txt{ max-width:none }
  .wk-wide__tiles{ justify-content:center; gap:10px }
  .wk-wide__tile{ width:31%; border-radius:16px }
  .wk-wide__tile:nth-child(2){ transform:none }
}
/* missing product image: hide alt text, keep the empty tile tidy */
.wk-pcard__img img, .wk-wide__tile img{ font-size:0; color:transparent }

/* =========================================================
   New products: showcase grid
   ========================================================= */
.wk-newgrid{ background:#fff; padding:0 32px 28px; font-family:"Estedad", Vazir, Tahoma, sans-serif }
.wk-newgrid *{ box-sizing:border-box }
.wk-newgrid__box{ max-width:1360px; margin:0 auto; border:1px solid #E4E7EC; border-radius:24px; padding:22px 24px 24px }
.wk-newgrid__body{ display:grid; grid-template-columns:330px minmax(0,1fr); gap:18px }

.wk-newgrid__hero{ position:relative; display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:20px; text-decoration:none !important; color:#101828 !important;
  background:linear-gradient(170deg, #FFF6EC 0%, #fff 60%); box-shadow:inset 0 0 0 1px #FBE1CA; transition:box-shadow .3s }
.wk-newgrid__hero:hover{ box-shadow:inset 0 0 0 1.5px #FF7A00, 0 20px 36px -24px rgba(255,122,0,.7) }
.wk-newgrid__badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:5px; padding:5px 11px 5px 10px; border-radius:999px; background:#FF7A00; color:#fff; font-size:12px; font-weight:700 }
.wk-newgrid__badge svg{ width:14px; height:14px }
.wk-newgrid__hero-img{ flex:1; min-height:220px; display:grid; place-items:center }
.wk-newgrid__hero-img img{ width:86%; max-height:260px; object-fit:contain; font-size:0; color:transparent; transition:transform .5s cubic-bezier(.2,.7,.2,1) }
.wk-newgrid__hero:hover .wk-newgrid__hero-img img{ transform:scale(1.06) rotate(-2deg) }
.wk-newgrid__hero-name{ font-size:15px; font-weight:700; line-height:1.8; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.wk-newgrid__hero-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px dashed #F3D3B5 }
.wk-newgrid__hero-price{ display:flex; flex-direction:column; gap:2px }
.wk-newgrid__hero-price del{ font-size:12px; color:#98A2B3 }
.wk-newgrid__hero-price b{ font-size:18px; font-weight:800 }
.wk-newgrid__hero-price small{ font-size:11px; font-weight:500; color:#98A2B3 }
.wk-newgrid__hero-btn{ height:40px; padding-inline:16px; display:inline-flex; align-items:center; border-radius:999px; background:#101828; color:#fff; font-size:13px; font-weight:700; transition:background .2s }
.wk-newgrid__hero:hover .wk-newgrid__hero-btn{ background:#FF7A00 }

.wk-newgrid__grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:1fr; gap:12px }
.wk-mini{ display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:16px; border:1px solid #EAECF0; text-decoration:none !important; color:#101828 !important; transition:border-color .25s, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s }
.wk-mini:hover{ border-color:#FFC594; transform:translateY(-3px); box-shadow:0 14px 26px -18px rgba(255,122,0,.6) }
.wk-mini__img{ aspect-ratio:4 / 3; display:grid; place-items:center }
.wk-mini__img img{ width:80%; height:80%; object-fit:contain; font-size:0; color:transparent; transition:transform .4s }
.wk-mini:hover .wk-mini__img img{ transform:scale(1.06) }
.wk-mini__txt{ display:flex; flex-direction:column; gap:6px; margin-top:auto }
.wk-mini__name{ font-size:12.5px; line-height:1.75; color:#344054; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.wk-mini__price{ font-size:14px; font-weight:800 }
.wk-mini__price small{ font-size:10.5px; font-weight:500; color:#98A2B3 }

@media (max-width:1199px){ .wk-newgrid__body{ grid-template-columns:280px minmax(0,1fr) } .wk-newgrid__grid{ grid-template-columns:repeat(3, minmax(0,1fr)) } .wk-mini:nth-child(n+7){ display:none } }
@media (max-width:767px){
  .wk-newgrid{ padding:0 12px 20px }
  .wk-newgrid__box{ padding:16px 12px; border-radius:18px }
  .wk-newgrid__body{ grid-template-columns:minmax(0,1fr) }
  .wk-newgrid__grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .wk-mini:nth-child(n+7){ display:flex } .wk-mini:nth-child(n+5){ display:none }
}

/* =========================================================
   Wide banner v2: watermark, dots, glass-framed floating tiles
   ========================================================= */
.wk-wide__box{ background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.22) 1px, transparent 1.6px) 0 0 / 18px 18px,
    radial-gradient(55% 130% at 22% 110%, rgba(255,205,130,.6), transparent 60%),
    radial-gradient(40% 90% at 100% 0%, rgba(160,30,0,.35), transparent 70%),
    linear-gradient(110deg, #FF8F26 0%, #F46A00 55%, #D24E00 100%) }
.wk-wide__box::before{ display:none }
.wk-wide__mark{ position:absolute; z-index:-1; left:-1%; bottom:-34%; font-family:"Estedad", sans-serif; font-weight:900; font-size:clamp(120px, 14vw, 210px); letter-spacing:-.03em; line-height:1;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.18); direction:ltr; pointer-events:none; user-select:none }
.wk-wide__chip{ font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:.14em; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); direction:ltr }
.wk-wide__tiles{ gap:20px }
.wk-wide__tile{ width:200px; padding:8px; border-radius:28px; background:rgba(255,255,255,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 24px 40px -24px rgba(90,25,0,.8);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:wk-float 6s ease-in-out infinite }
.wk-wide__tile:nth-child(2){ transform:none; animation-delay:-2s; margin-top:-28px }
.wk-wide__tile:nth-child(3){ animation-delay:-4s }
.wk-wide__tile-in{ width:100%; height:100%; display:grid; place-items:center; border-radius:22px; background:#fff }
.wk-wide__tile-in img{ width:82%; height:82%; object-fit:contain; transition:transform .45s cubic-bezier(.2,.7,.2,1) }
@keyframes wk-float{ 0%,100%{ translate:0 0 } 50%{ translate:0 -8px } }
.wk-wide__box:hover .wk-wide__tile:nth-child(n){ transform:none }
.wk-wide__box:hover .wk-wide__tile-in img{ transform:scale(1.06) }
@media (max-width:1199px){ .wk-wide__tile{ width:160px } }
@media (max-width:991px){ .wk-wide__tile{ width:31%; padding:5px; border-radius:18px } .wk-wide__tile-in{ border-radius:14px } .wk-wide__tile:nth-child(2){ margin-top:0 } .wk-wide__mark{ font-size:110px; bottom:-14% } }
@media (prefers-reduced-motion:reduce){ .wk-wide__tile{ animation:none } }

/* hero image on cream: blend away the JPG's white box */
.wk-newgrid__hero-img img{ mix-blend-mode:multiply }

/* =========================================================
   Product card v2 (rails): soft image well, pill tag, buy button
   ========================================================= */
.wk-rail .wk-pcard{ position:relative; gap:10px; padding:10px 10px 12px; border-radius:18px; background:#fff; box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .3s, transform .35s cubic-bezier(.2,.7,.2,1) !important }
.wk-rail .wk-pcard:hover{ background:#fff; transform:translateY(-4px) !important; box-shadow:inset 0 0 0 1px #FFD3AE, 0 18px 32px -22px rgba(255,122,0,.7) !important }

/* tag row: small pill + brand, no heavy underline */
.wk-rail .wk-pcard__tag{ border-bottom:0; padding:0 2px }
.wk-rail .wk-pcard__tag b{ padding:4px 9px; border-radius:999px; background:#FFF1E4; color:#E05A00; font-size:11px }
.wk-rail .wk-pcard__tag i{ font-size:11px; color:#B0B7C3 }

/* image well */
.wk-rail .wk-pcard__img{ aspect-ratio:1 / 1; border-radius:14px; background:#F6F7F9 }
.wk-rail .wk-pcard__img img{ width:80%; height:80%; mix-blend-mode:multiply; transition:transform .5s cubic-bezier(.2,.7,.2,1) }
.wk-rail .wk-pcard:hover .wk-pcard__img img{ transform:scale(1.07) }

.wk-rail .wk-pcard__name{ font-size:13px; font-weight:500; color:#344054; min-height:3.5em; padding-inline:2px }

/* footer: price + round go button */
.wk-rail .wk-pcard__price{ flex-direction:row; align-items:center; justify-content:space-between; padding:10px 2px 0; border-top:1px dashed #EAECF0 }
.wk-rail .wk-pcard__price del{ display:none }
.wk-rail .wk-pcard__price b{ font-size:15.5px; order:1 }
.wk-rail .wk-pcard__price::after{ content:""; order:2; width:34px; height:34px; flex:none; border-radius:50%; background:#101828 center / 16px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");
  transition:background-color .25s, transform .25s }
.wk-rail .wk-pcard:hover .wk-pcard__price::after{ background-color:#FF7A00; transform:translateX(-3px) }

/* discount badge sits on the image well */
.wk-rail .wk-pcard__off{ top:8px; right:8px; border-radius:999px; padding:3px 8px }

/* softer dividers between cards */
.wk-rail__item + .wk-rail__item::before{ top:18%; bottom:18% }
.wk-rail__item:hover::before, .wk-rail__item:hover + .wk-rail__item::before{ opacity:0 }

/* =========================================================
   Payment methods (cash → instalment)
   ========================================================= */
.wk-pay{ background:#fff; padding:6px 32px 34px; font-family:"Estedad", Vazir, Tahoma, sans-serif }
.wk-pay *{ box-sizing:border-box }
.wk-pay__box{ position:relative; max-width:1360px; margin:0 auto; padding:34px 36px 26px; border-radius:28px; overflow:hidden; isolation:isolate; color:#fff;
  background:
    radial-gradient(50% 80% at 100% 0%, rgba(255,122,0,.28), transparent 60%),
    radial-gradient(40% 70% at 0% 100%, rgba(255,122,0,.16), transparent 60%),
    linear-gradient(160deg, #1C1D21 0%, #121316 100%) }
.wk-pay__box::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:32px 32px }

.wk-pay__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:26px }
.wk-pay__head small{ display:block; font-size:13px; font-weight:700; color:#FF9A3D; margin-bottom:8px }
.wk-pay__head h2{ margin:0; font-size:clamp(22px, 2.4vw, 32px); font-weight:800; line-height:1.45; color:#fff; font-family:inherit }
.wk-pay__head h2 span{ color:#FF8A1F }
.wk-pay__head p{ margin:8px 0 0; font-size:14px; color:#A9AEB8 }
.wk-pay__mark{ font-weight:900; font-size:56px; line-height:1; letter-spacing:.02em; direction:ltr; color:transparent; -webkit-text-stroke:1.5px rgba(255,138,31,.55); align-self:center }

.wk-pay__groups{ display:grid; grid-template-columns:2fr 5fr; gap:22px }
.wk-pay__group{ display:flex; flex-direction:column; gap:12px; min-width:0 }
.wk-pay__group + .wk-pay__group{ padding-right:22px; border-right:1px dashed rgba(255,255,255,.14) }
.wk-pay__group-head{ display:flex; align-items:center; gap:10px }
.wk-pay__group-num{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:10px; background:#FF7A00; color:#fff; font-size:14px; font-weight:800 }
.wk-pay__group-head b{ display:block; font-size:15px; font-weight:800 }
.wk-pay__group-head small{ display:block; font-size:12px; color:#A9AEB8 }

.wk-pay__grid{ display:grid; grid-template-columns:repeat(var(--cols), minmax(0,1fr)); gap:12px }
.wk-pay__card{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px 16px; border-radius:18px; background:#fff; color:#101828; text-align:center;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s }
.wk-pay__card:hover{ transform:translateY(-4px); box-shadow:0 18px 30px -18px rgba(255,122,0,.8) }
.wk-pay__status{ align-self:flex-start; display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:#ECFDF3; color:#067647; font-size:10.5px; font-weight:800 }
.wk-pay__status::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
.wk-pay__logo{ width:100%; height:64px; display:grid; place-items:center; margin:4px 0 2px }
.wk-pay__logo img{ max-width:76%; max-height:58px; object-fit:contain }
.wk-pay__card b{ font-size:15px; font-weight:800 }
.wk-pay__card small{ font-size:11.5px; color:#667085 }

.wk-pay__card.is-soon{ background:#F2F4F7 }
.wk-pay__card.is-soon .wk-pay__status{ background:#FFF4E5; color:#B54708 }
.wk-pay__card.is-soon .wk-pay__logo img{ filter:grayscale(1); opacity:.55 }
.wk-pay__card.is-soon b{ color:#475467 }
.wk-pay__card.is-soon:hover{ box-shadow:none; transform:none }

.wk-pay__note{ margin:22px 0 0; font-size:12.5px; color:#8A909B }

@media (max-width:1199px){
  .wk-pay__groups{ grid-template-columns:minmax(0,1fr) }
  .wk-pay__group + .wk-pay__group{ padding-right:0; border-right:0; padding-top:20px; border-top:1px dashed rgba(255,255,255,.14) }
  .wk-pay__group:first-child .wk-pay__grid{ grid-template-columns:repeat(2, minmax(0, 220px)) }
}
@media (max-width:767px){
  .wk-pay{ padding:0 12px 24px }
  .wk-pay__box{ padding:24px 16px 18px; border-radius:20px }
  .wk-pay__mark{ display:none }
  .wk-pay__grid, .wk-pay__group:first-child .wk-pay__grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
.wk-pay__logo img[src*="sadad"]{ transform:scale(1.6) }

/* =========================================================
   Payment methods v2: frameless, moving logo strip
   ========================================================= */
.wk-pay{ background:#fff; padding:10px 0 40px; font-family:"Estedad", Vazir, Tahoma, sans-serif; overflow:hidden }
.wk-pay__head{ max-width:1360px; margin:0 auto 26px; padding-inline:32px; text-align:center }
.wk-pay__head small{ display:block; font-size:13px; font-weight:700; color:#E96A00; margin-bottom:8px }
.wk-pay__head h2{ margin:0; font-size:clamp(22px, 2.4vw, 32px); font-weight:800; line-height:1.45; color:#101828; font-family:inherit }
.wk-pay__head h2 span{ color:#FF7A00 }
.wk-pay__head p{ margin:8px 0 0; font-size:14px; color:#667085 }

.wk-pay__marquee{ position:relative; overflow:hidden; padding-block:10px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.wk-pay__track{ display:flex; width:max-content; animation:wk-pay-run 34s linear infinite }
.wk-pay__marquee:hover .wk-pay__track{ animation-play-state:paused }
.wk-pay__run{ display:flex; align-items:center; gap:56px; padding-inline-end:56px; flex:none }
/* RTL: content travels left → right so the first item (cash) leads */
@keyframes wk-pay-run{ from{ transform:translateX(0) } to{ transform:translateX(50%) } }

.wk-pay__label{ flex:none; padding:6px 14px; border-radius:999px; background:#FFF1E4; color:#E05A00; font-size:12.5px; font-weight:800 }
.wk-pay__item{ flex:none; width:130px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; transition:transform .3s cubic-bezier(.2,.7,.2,1) }
.wk-pay__item:hover{ transform:translateY(-4px) }
.wk-pay__logo{ height:70px; width:100%; display:grid; place-items:center }
.wk-pay__logo img{ max-width:100%; max-height:64px; object-fit:contain; mix-blend-mode:multiply }
.wk-pay__item b{ font-size:14.5px; font-weight:800; color:#101828 }
.wk-pay__item small{ font-size:11.5px; color:#667085 }
.wk-pay__item.is-soon .wk-pay__logo img{ filter:grayscale(1); opacity:.45 }
.wk-pay__item.is-soon b{ color:#98A2B3 }
.wk-pay__item.is-soon small{ color:#B54708; font-weight:700 }

.wk-pay__note{ max-width:1360px; margin:22px auto 0; padding-inline:32px; text-align:center; font-size:12.5px; color:#98A2B3 }

@media (max-width:767px){
  .wk-pay__head{ padding-inline:16px }
  .wk-pay__run{ gap:34px; padding-inline-end:34px }
  .wk-pay__item{ width:100px }
  .wk-pay__logo{ height:56px } .wk-pay__logo img{ max-height:50px }
}
@media (prefers-reduced-motion:reduce){ .wk-pay__track{ animation:none } }
.wk-pay__head{ display:block }

/* =========================================================
   Magazine: featured article + list
   ========================================================= */
.wk-mag{ max-width:1424px; margin:0 auto; background:#fff; padding:6px 32px 40px; font-family:"Estedad", Vazir, Tahoma, sans-serif }
.wk-mag *{ box-sizing:border-box }
.wk-mag__head{ max-width:1360px; margin:0 auto 16px }
.wk-mag__body{ max-width:1360px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px }

.wk-mag__feature{ position:relative; display:block; min-height:420px; border-radius:24px; overflow:hidden; isolation:isolate; background:#1D1E22; color:#fff !important; text-decoration:none !important }
.wk-mag__feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s cubic-bezier(.2,.7,.2,1) }
.wk-mag__feature::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(10,10,12,.88) 0%, rgba(10,10,12,.35) 50%, transparent 75%) }
.wk-mag__feature:hover img{ transform:scale(1.05) }
.wk-mag__feature-txt{ position:absolute; inset:auto 0 0 0; padding:28px; display:flex; flex-direction:column; align-items:flex-start; gap:8px }
.wk-mag__feature-txt em, .wk-mag__item-txt em{ font-style:normal; font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px; background:#FF7A00; color:#fff }
.wk-mag__feature-txt b{ font-size:clamp(20px, 1.9vw, 27px); font-weight:800; line-height:1.5; text-wrap:balance }
.wk-mag__feature-txt small{ font-size:13.5px; line-height:1.9; color:rgba(255,255,255,.8); max-width:60ch }
.wk-mag__meta{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:#98A2B3 }
.wk-mag__feature .wk-mag__meta{ color:rgba(255,255,255,.7) }
.wk-mag__meta i{ width:4px; height:4px; border-radius:50%; background:currentColor }

.wk-mag__list{ display:flex; flex-direction:column; gap:12px }
.wk-mag__item{ flex:1; display:flex; gap:16px; align-items:center; padding:12px; border-radius:20px; border:1px solid #EAECF0; text-decoration:none !important; color:#101828 !important;
  transition:border-color .25s, box-shadow .3s, transform .3s cubic-bezier(.2,.7,.2,1) }
.wk-mag__item:hover{ border-color:#FFD3AE; transform:translateX(-4px); box-shadow:0 14px 26px -20px rgba(255,122,0,.6) }
.wk-mag__thumb{ width:150px; flex:none; align-self:stretch; min-height:110px; border-radius:14px; overflow:hidden; background:#F2F4F7 }
.wk-mag__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.wk-mag__item:hover .wk-mag__thumb img{ transform:scale(1.07) }
.wk-mag__item-txt{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0 }
.wk-mag__item-txt em{ background:#FFF1E4; color:#E05A00 }
.wk-mag__item-txt b{ font-size:15px; font-weight:800; line-height:1.6 }
.wk-mag__item-txt small{ font-size:12.5px; line-height:1.8; color:#667085; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

@media (max-width:991px){
  .wk-mag{ padding:0 12px 28px }
  .wk-mag__body{ grid-template-columns:minmax(0,1fr) }
  .wk-mag__feature{ min-height:300px; border-radius:20px }
  .wk-mag__feature-txt{ padding:20px }
  .wk-mag__thumb{ width:110px; min-height:90px }
  .wk-mag__item-txt small{ display:none }
}
.wk-mag{ max-width:none }

/* =========================================================
   Magazine v2: white bento
   ========================================================= */
.wk-mag{ background:#fff !important }
.wk-mag__bento{ max-width:1360px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto; gap:18px }
.wk-mag__card{ display:flex; flex-direction:column; border-radius:24px; overflow:hidden; background:#fff; border:1px solid #EAECF0; color:#101828 !important; text-decoration:none !important;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .3s }
.wk-mag__card:hover{ transform:translateY(-5px); border-color:#FFD3AE; box-shadow:0 24px 40px -26px rgba(255,122,0,.55) }

.wk-mag__img{ position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden; background:#fff; border-bottom:1px solid #F2F4F7 }
.wk-mag__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1) }
.wk-mag__card:hover .wk-mag__img img{ transform:scale(1.06) }

.wk-mag__txt{ display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; flex:1 }
.wk-mag__top{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.wk-mag__top em{ font-style:normal; font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; background:#FFF1E4; color:#E05A00 }
.wk-mag__date{ font-size:11.5px; color:#98A2B3 }
.wk-mag__txt b{ font-size:15.5px; font-weight:800; line-height:1.65 }
.wk-mag__txt small{ font-size:13px; line-height:1.9; color:#667085 }
.wk-mag__more{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#E96A00 }
.wk-mag__more svg{ width:15px; height:15px; transition:transform .25s }
.wk-mag__card:hover .wk-mag__more svg{ transform:translateX(-4px) }

/* feature: tall, spans both rows */
.wk-mag__card--feature{ grid-row:1 / span 2 }
.wk-mag__card--feature .wk-mag__img{ aspect-ratio:auto; flex:1; min-height:300px }
.wk-mag__card--feature .wk-mag__txt{ flex:none; padding:22px 24px 24px }
.wk-mag__card--feature .wk-mag__txt b{ font-size:22px; line-height:1.55 }
.wk-mag__card--feature .wk-mag__more{ align-self:flex-start; height:42px; padding:0 18px; border-radius:999px; background:#101828; color:#fff; transition:background .25s }
.wk-mag__card--feature:hover .wk-mag__more{ background:#FF7A00 }

/* wide: horizontal, spans the two small columns */
.wk-mag__card--wide{ grid-column:2 / span 2; flex-direction:row }
.wk-mag__card--wide .wk-mag__img{ width:44%; flex:none; aspect-ratio:auto; border-bottom:0; border-left:1px solid #F2F4F7 }
.wk-mag__card--wide .wk-mag__txt{ justify-content:center }

@media (max-width:991px){
  .wk-mag__bento{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .wk-mag__card--feature{ grid-row:auto; grid-column:1 / -1 }
  .wk-mag__card--feature .wk-mag__img{ min-height:220px }
  .wk-mag__card--wide{ grid-column:1 / -1 }
}
@media (max-width:600px){
  .wk-mag__bento{ grid-template-columns:minmax(0,1fr); gap:14px }
  .wk-mag__card--wide{ flex-direction:column }
  .wk-mag__card--wide .wk-mag__img{ width:100%; aspect-ratio:16 / 10; border-left:0; border-bottom:1px solid #F2F4F7 }
}

/* ---- magazine: compact + uncropped images (source images are 1024×692) ---- */
.wk-mag__bento{ max-width:1180px; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); gap:14px }
.wk-mag__head{ max-width:1180px }
.wk-mag__card{ border-radius:18px }
.wk-mag__img{ aspect-ratio:1024 / 692 }
.wk-mag__img img{ object-fit:contain }
.wk-mag__txt{ padding:12px 14px 14px; gap:6px }
.wk-mag__txt b{ font-size:14px; line-height:1.6 }
.wk-mag__txt small{ font-size:12px; line-height:1.8 }
.wk-mag__top em{ font-size:10.5px; padding:3px 8px }
.wk-mag__date{ font-size:11px }
.wk-mag__more{ font-size:12px }

.wk-mag__card--feature .wk-mag__img{ flex:none; min-height:0; aspect-ratio:1024 / 692 }
.wk-mag__card--feature .wk-mag__txt{ flex:1; padding:16px 18px 18px; justify-content:flex-start }
.wk-mag__card--feature .wk-mag__txt b{ font-size:18px }
.wk-mag__card--feature .wk-mag__more{ margin-top:auto; height:38px; padding:0 16px }

.wk-mag__card--wide .wk-mag__img{ width:42%; aspect-ratio:1024 / 692; align-self:center; border-left:1px solid #F2F4F7 }
@media (max-width:991px){ .wk-mag__card--feature .wk-mag__img{ min-height:0 } }
/* feature fills its height; letterbox colour matches the article images */
.wk-mag__img{ background:#F8F7FD }
.wk-mag__card--feature .wk-mag__img{ flex:1; aspect-ratio:auto; min-height:260px }
.wk-mag__card--feature .wk-mag__txt{ flex:none }
/* feature image back to its native ratio; wider feature column balances the heights */
.wk-mag__bento{ grid-template-columns:minmax(0,1.65fr) minmax(0,1fr) minmax(0,1fr) }
.wk-mag__card--feature .wk-mag__img{ flex:none; aspect-ratio:1024 / 692; min-height:0 }
.wk-mag__card--feature .wk-mag__txt{ flex:1 }
@media (max-width:991px){ .wk-mag__bento{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:600px){ .wk-mag__bento{ grid-template-columns:minmax(0,1fr) } }
.site__body{ background:#fff }

/* =========================================================
   Mobile sizing pass (≤767px): keep every section compact
   ========================================================= */
@media (max-width:767px){
  /* section titles */
  .wk-rail__head h2, .wk-sec-head h2{ font-size:16px }
  .wk-rail__all{ height:34px; padding-inline:12px 9px; font-size:12px }

  /* special offers */
  .wk-offers__panel{ padding:14px 12px; gap:12px; border-radius:18px }
  .wk-offers__title span:first-child, .wk-offers__title-hl{ font-size:17px }
  .wk-offers__all{ height:32px; font-size:11.5px; padding-inline:12px 8px }
  .wk-pcard{ width:136px; padding:8px; gap:6px; border-radius:14px }
  .wk-pcard__name{ font-size:11.5px; min-height:3.4em; line-height:1.7 }
  .wk-pcard__price b{ font-size:13px }
  .wk-pcard__price small{ font-size:10px }

  /* promo banners */
  .wk-promo-card{ min-height:0; height:132px; width:84% !important; border-radius:16px }
  .wk-promo-card__txt{ max-width:58%; padding:14px 14px; gap:6px }
  .wk-promo-card__chip{ font-size:10.5px !important; padding:3px 8px !important }
  .wk-promo-card__txt b{ font-size:15px !important; line-height:1.5 }
  .wk-promo-card__cta{ height:32px; padding-inline:12px 9px; font-size:11.5px; margin-top:2px }
  .wk-promo-card__art{ width:40%; height:80% }

  /* features + representative strip */
  .wk-feat{ padding:12px 10px; gap:8px }
  .wk-feat__ic{ width:36px; height:36px; border-radius:10px } .wk-feat__ic svg{ width:19px; height:19px }
  .wk-feat__txt b{ font-size:12.5px } .wk-feat__txt small{ font-size:10.5px }
  .wk-rep-strip__box{ padding:14px; gap:10px }
  .wk-rep-strip__ic{ width:40px; height:40px } .wk-rep-strip__ic svg{ width:20px; height:20px }
  .wk-rep-strip__txt b{ font-size:14.5px } .wk-rep-strip__txt small{ font-size:11.5px; line-height:1.7 }
  .wk-rep-strip__btn{ height:40px; font-size:13px }

  /* rails */
  .wk-rail__item{ width:40% }
  .wk-rail .wk-pcard{ width:100% }
  .wk-rail .wk-pcard__price::after{ width:28px; height:28px; background-size:13px }

  /* wide banner */
  .wk-wide__box{ padding:18px 14px; gap:14px }
  .wk-wide__txt b{ font-size:19px } .wk-wide__txt small{ font-size:12px }
  .wk-wide__cta{ height:38px; font-size:12.5px; padding-inline:16px 12px }
  .wk-wide__chip{ font-size:10px }

  /* new products: featured card becomes a compact horizontal card */
  .wk-newgrid__hero{ display:grid; grid-template-columns:42% minmax(0,1fr); grid-template-areas:"img badge" "img name" "img foot"; gap:6px 12px; padding:12px; align-items:center }
  .wk-newgrid__badge{ grid-area:badge; font-size:10.5px; padding:3px 8px }
  .wk-newgrid__hero-img{ grid-area:img; min-height:0; aspect-ratio:1 / 1 }
  .wk-newgrid__hero-img img{ max-height:none; width:100% }
  .wk-newgrid__hero-name{ grid-area:name; font-size:13px; line-height:1.7 }
  .wk-newgrid__hero-foot{ grid-area:foot; flex-direction:column; align-items:stretch; gap:8px; padding-top:8px }
  .wk-newgrid__hero-price b{ font-size:15px }
  .wk-newgrid__hero-btn{ height:34px; justify-content:center; font-size:12px }
  .wk-mini{ padding:8px; border-radius:14px }
  .wk-mini__name{ font-size:11.5px }
  .wk-mini__price{ font-size:12.5px }

  /* payment strip */
  .wk-pay__head h2{ font-size:19px }
  .wk-pay__item{ width:84px } .wk-pay__logo{ height:44px } .wk-pay__logo img{ max-height:40px }
  .wk-pay__item b{ font-size:12.5px } .wk-pay__item small{ font-size:10.5px }

  /* magazine: feature stays on top, others become compact horizontal rows */
  .wk-mag__bento{ gap:10px }
  .wk-mag__card--feature .wk-mag__txt{ padding:12px 14px 14px }
  .wk-mag__card--feature .wk-mag__txt b{ font-size:15px }
  .wk-mag__card--feature .wk-mag__more{ height:34px; font-size:12px }
  .wk-mag__card--small, .wk-mag__card--wide{ flex-direction:row; align-items:stretch }
  .wk-mag__card--small .wk-mag__img, .wk-mag__card--wide .wk-mag__img{ width:120px; flex:none; aspect-ratio:auto; border-bottom:0; border-left:1px solid #F2F4F7 }
  .wk-mag__card--small .wk-mag__txt, .wk-mag__card--wide .wk-mag__txt{ padding:10px 12px; justify-content:center }
  .wk-mag__card--small .wk-mag__txt b, .wk-mag__card--wide .wk-mag__txt b{ font-size:13px }
  .wk-mag__card--wide .wk-mag__txt small{ display:none }
}

/* ---- mobile pass 2 ---- */
@media (max-width:767px){
  /* rail cards: price on one line, no round button, lighter tag row */
  .wk-rail .wk-pcard{ padding:6px 6px 10px; gap:6px }
  .wk-rail .wk-pcard__tag i{ display:none }
  .wk-rail .wk-pcard__tag{ justify-content:flex-start }
  .wk-rail .wk-pcard__tag b{ font-size:10px; padding:3px 8px }
  .wk-rail .wk-pcard__name{ font-size:11.5px; min-height:3.4em }
  .wk-rail .wk-pcard__price{ padding-top:8px; justify-content:flex-start }
  .wk-rail .wk-pcard__price::after{ display:none }
  .wk-rail .wk-pcard__price b{ font-size:13px; white-space:nowrap }
  .wk-rail .wk-pcard__price small{ font-size:9.5px }
  .wk-rail__item{ width:38%; padding:2px 4px }

  /* representative strip: compact inline button */
  .wk-rep-strip__btn{ width:auto; height:36px; padding-inline:16px 12px; font-size:12.5px; margin-inline-start:auto }

  /* payment strip: keep captions on one line */
  .wk-pay__item small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
  .wk-pay__note{ font-size:11.5px }

  /* new products featured card */
  .wk-newgrid__hero-name{ font-size:12.5px }
  .wk-newgrid__hero-price b{ font-size:14px }

  /* magazine feature image a bit shorter */
  .wk-mag__card--feature .wk-mag__img{ aspect-ratio:16 / 9 !important }
  .wk-mag__img img{ object-fit:cover }
}

/* =========================================================
   Product listing pages (special / discount)
   ========================================================= */
.wk-list{ max-width:1360px; margin:0 auto; padding:28px 32px 48px; font-family:"Estedad", Vazir, Tahoma, sans-serif; background:#fff }
.wk-list *{ box-sizing:border-box }
.wk-list__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid #EAECF0 }
.wk-list__head h1{ display:flex; align-items:center; gap:10px; margin:0; font-size:24px; font-weight:800; color:#101828; font-family:inherit }
.wk-list__head p{ margin:6px 0 0; font-size:13.5px; color:#667085 }
.wk-list__count{ padding:6px 14px; border-radius:999px; background:#FFF1E4; color:#E05A00; font-size:13px; font-weight:700 }
.wk-list__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px }
.wk-list__grid .wk-pcard{ width:auto; border:1px solid #EAECF0 }
.wk-list__grid .wk-pcard:hover{ border-color:#FFD3AE; box-shadow:0 18px 32px -22px rgba(255,122,0,.65) }
.wk-list__pages{ display:flex; justify-content:center; margin-top:28px }
.wk-list__pages .pagination{ gap:6px; margin:0 }
.wk-list__pages .page-link{ border-radius:10px !important; border:1px solid #EAECF0; color:#344054; min-width:40px; text-align:center }
.wk-list__pages .page-item.active .page-link{ background:#FF7A00; border-color:#FF7A00; color:#fff }
.wk-list__empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:60px 16px; text-align:center; border-radius:24px; background:#FFF8F1 }
.wk-list__empty svg{ width:52px; height:52px; color:#FF7A00 }
.wk-list__empty b{ font-size:17px; color:#101828 }
.wk-list__empty p{ margin:0; font-size:13.5px; color:#667085 }
.wk-list__empty a{ margin-top:8px; padding:10px 20px; border-radius:999px; background:#FF7A00; color:#fff !important; font-weight:700; text-decoration:none !important }
@media (max-width:767px){
  .wk-list{ padding:18px 12px 32px }
  .wk-list__head h1{ font-size:18px }
  .wk-list__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px }
  .wk-list__grid .wk-pcard{ width:auto }
}