/* Ward Store — homepage (Claude Design v2). Flat surfaces only; logical properties for RTL/LTR. */
:root{--ward-build-home:"2.6.0"}   /* TEMPORARY delivery marker, read by the console check in functions.php */

.ward-home-sec{padding-top:var(--section-gap)}
.ward-home-sec-tight{padding-top:clamp(24px,3.2vw,40px)}
.ward-sec-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.ward-sec-head h2{margin:0;flex:1;font-size:clamp(19px,1.9vw,24px);font-weight:800}
.ward-sec-head .ward-link{font-size:14px;white-space:nowrap}
.ward-btn-white{background:#fff;color:var(--ward-ink)}
.ward-btn-white:hover{background:var(--ward-surface-3);color:var(--ward-ink)}
.ward-btn-hero{min-height:48px;padding:0 24px;font-size:15px}

/* ---------- Hero · banner slider (v3.1.0 data; v3.1.1 card presentation; v3.1.2 shorter card, arrows nearer the edges) ----------
   A large rounded card inside the page content width. The card sets its own shape — 8:3 from tablets up (12:5 before
   v3.1.2: same width, about 10% less height), 1:1 on phones
   (≤767px, the mobile image) — and every banner fills it (object-fit:cover), so all slides have exactly the same size and
   nothing moves when the slide changes. Previous / next arrows sit inside at the sides (hidden on small phones, where swipe
   is the gesture), the dots inside at the bottom centre. A phone banner without a square-ish image is shown whole over a
   blurred copy of itself (fit-m-contain). Recommended artwork: desktop 1920×720, mobile 1080×1080. The arrows sit close to
   the card's outer edges (10px in), away from the area where banner text usually is. */
.ward-hb{padding-top:clamp(10px,1.9vw,24px)}
.ward-hb-stage{position:relative;aspect-ratio:8/3;border-radius:24px;overflow:hidden;background:var(--ward-surface-2);isolation:isolate}
.ward-hb .ward-hb-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ward-hb .ward-hb-track::-webkit-scrollbar{display:none}
.ward-hb .ward-hb-track:focus{outline:0}
.ward-hb-slide{position:relative;flex:0 0 100%;min-width:0;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.ward-hb-link,.ward-hb-link picture{display:block;width:100%;height:100%}
.ward-hb-slide img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
a.ward-hb-link:focus-visible{outline:3px solid var(--ward-pink);outline-offset:-3px;border-radius:24px}
.ward-hb-arrow{position:absolute;top:50%;z-index:2;width:42px;height:42px;margin-top:-21px;border:0;padding:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ward-ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 2px 10px rgba(17,17,20,.16);transition:background-color .2s,transform .2s}
.ward-hb-arrow.is-prev{inset-inline-start:10px}
.ward-hb-arrow.is-next{inset-inline-end:10px}
.ward-hb-arrow:hover{background:#fff;transform:scale(1.06)}
.ward-hb-arrow:focus-visible{outline:2px solid var(--ward-pink);outline-offset:2px}
.ward-hb-dots{position:absolute;inset-inline:0;bottom:14px;z-index:2;margin-inline:auto;width:max-content;display:flex;align-items:center;gap:2px;
  padding:0 6px;border-radius:999px;background:rgba(17,17,20,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ward-hb-dot{width:18px;height:24px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.ward-hb-dot::before{content:"";width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.62);transition:width .2s,background-color .2s}
.ward-hb-dot.is-active{width:30px}
.ward-hb-dot.is-active::before{width:22px;background:#fff}
.ward-hb-dot:focus-visible{outline:2px solid #fff;outline-offset:-3px;border-radius:6px}
@media (max-width:767px){
  .ward-hb{padding-top:12px}
  .ward-hb-stage{aspect-ratio:1/1;border-radius:18px}
  a.ward-hb-link:focus-visible{border-radius:18px}
  .ward-hb-slide.fit-m-contain{background:var(--hb-bg) center/cover no-repeat}
  .ward-hb-slide.fit-m-contain::before{content:"";position:absolute;inset:0;-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);background:rgba(255,255,255,.18)}
  .ward-hb-slide.fit-m-contain .ward-hb-link{position:relative}
  .ward-hb-slide.fit-m-contain img{object-fit:contain}
  .ward-hb-arrow{width:36px;height:36px;margin-top:-18px}
  .ward-hb-arrow.is-prev{inset-inline-start:6px}
  .ward-hb-arrow.is-next{inset-inline-end:6px}
  .ward-hb-dots{bottom:10px}
}
@media (max-width:599px){ .ward-hb-arrow{display:none} }
@media (prefers-reduced-motion:reduce){ .ward-hb-dot::before,.ward-hb-arrow{transition:none} }

/* Shared tile pieces kept from v2.0.0 (promo chip, spotlight body / link / sub-text) */
.ward-tile-chip{align-self:flex-start;background:var(--ward-pink);color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:var(--r-xs)}
.ward-tile-link{font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.ward-tile-tint-body,.ward-spot-body{display:flex;flex-direction:column;gap:6px}
.ward-tile-sub{font-size:13px;color:var(--ward-ink-2)}

/* ---------- Category tiles · Option 1 "Icon Panel" ----------
   Soft full-width panel, white tiles with pink outline icons, name under the icon, ink "All categories" tile.
   Phones and tablets: the panel runs edge to edge and the tiles form a 2-row horizontal swipe strip. */
.ward-cat-panel{background:var(--ward-surface-2);border-radius:22px;padding:26px 24px 22px}
.ward-cat-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cat-n,12),minmax(0,1fr));gap:12px}   /* --cat-n = shown tiles incl. "All" (v2.12.0) */
.ward-cat-tile{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--ward-ink)}
.ward-cat-tile:hover{color:var(--ward-ink)}
.ward-cat-tile-icon{width:100%;max-width:84px;aspect-ratio:1/1;border-radius:22px;background:#fff;color:var(--ward-pink-2);display:grid;place-items:center;box-shadow:0 0 0 1px var(--ward-line-2),0 6px 16px rgba(17,17,20,.04);transition:background-color .2s,color .2s}
.ward-cat-tile:hover .ward-cat-tile-icon,.ward-cat-tile:focus-visible .ward-cat-tile-icon{background:var(--ward-pink);color:#fff}
.ward-cat-tile-name{font-size:13px;font-weight:600;line-height:1.35;min-height:2.7em}
.ward-cat-tile.is-all .ward-cat-tile-icon{background:var(--ward-ink);color:#fff;box-shadow:none}
.ward-cat-progress{display:none}
@media (max-width:1023px){
  .ward-cat-panel{margin-inline:calc(-1 * var(--gutter));border-radius:0;padding:20px 0 14px}
  /* 2-row swipe rail: columns sized so ~4.4 fit, the cut-off column says "more this way"; one column per snap */
  .ward-cat-tiles{--cat-col:calc((100vw - var(--gutter) - 4 * 10px) / 4.4);grid-auto-flow:column;grid-template-columns:none;grid-template-rows:auto auto;grid-auto-columns:var(--cat-col);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);gap:14px 10px}
  .ward-cat-tiles::-webkit-scrollbar{display:none}
  .ward-cat-tiles > li{scroll-snap-align:start;min-width:0}
  .ward-cat-tile{gap:8px}
  .ward-cat-tile-icon{max-width:none;border-radius:20px}
  .ward-cat-tile-name{font-size:12.5px;line-height:1.3;min-height:2.6em;text-wrap:balance}
  /* Position indicator: thumb width = visible share of the rail, moves with the swipe (mirrored in RTL by theme.js) */
  .ward-cat-progress{display:block;position:relative;width:56px;height:4px;margin:14px auto 0;border-radius:4px;background:var(--ward-line);overflow:hidden}
  .ward-cat-progress[hidden]{display:none}
  .ward-cat-progress span{position:absolute;inset-block:0;inset-inline-start:0;width:40%;border-radius:inherit;background:var(--ward-ink);will-change:transform}
}
/* Phones: pages of 3 x 2 whole tiles; each swipe snaps to the next group of six. The column gap is 2px wider than the
   side gutter, so the neighbouring pages sit 2px beyond the screen edges (no sliver even when the browser rounds the
   scroll position to a whole pixel); one page = 3 columns + 3 gaps = the full scroll distance per swipe. */
/* Tablets and small laptops (768–1179px): the homepage shows 11 categories + "All categories" = 12 tiles, so a calm
   6 x 2 grid fits without swiping, oversized tiles or cut-off columns (12 columns would squeeze tiles below ~70px). */
@media (min-width:768px) and (max-width:1179.98px){
  .ward-cat-tiles{grid-auto-flow:row;grid-template-columns:repeat(var(--cat-half,6),minmax(0,1fr));grid-template-rows:none;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;gap:18px 12px}
  .ward-cat-tile-icon{max-width:84px}
}
@media (max-width:767px){
  .ward-cat-tiles{--cat-gap:calc(var(--gutter) + 2px);--cat-col:calc((100vw - 2 * var(--gutter) - 2 * var(--cat-gap)) / 3);column-gap:var(--cat-gap)}
  .ward-cat-tiles > li{scroll-snap-align:none}
  .ward-cat-tiles > li:nth-child(6n+1){scroll-snap-align:start;scroll-snap-stop:always}
  .ward-cat-tile-icon{width:100%;max-width:88px}
}

/* ---------- Promo banner «اكتشف عروض ورد ستور» · full-image banner (v2.12.0) ----------
   One image fills the whole box (cover); the copy sits on the inline-start side over a soft scrim. tone-dark = white
   text on a dark scrim, tone-light = ink text on a light scrim (ward_store_banner_tone). The bundled artwork keeps its
   subject on the inline-end side, so it is mirrored in RTL. Phones: copy at the bottom, scrim from below. */
.ward-promo-banner{position:relative;isolation:isolate;border-radius:var(--r-lg);background:var(--ward-ink);color:#fff;overflow:clip;display:flex;align-items:center;min-height:clamp(280px,24vw,340px)}
.ward-promo-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.ward-promo-banner.is-default .ward-promo-bg{object-position:100% 50%}
[dir="rtl"] .ward-promo-banner.is-default .ward-promo-bg{transform:scaleX(-1)}
.ward-promo-banner::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(17,17,20,.86) 0%,rgba(17,17,20,.62) 34%,rgba(17,17,20,.12) 66%,rgba(17,17,20,0) 82%)}
[dir="rtl"] .ward-promo-banner::before{background:linear-gradient(270deg,rgba(17,17,20,.86) 0%,rgba(17,17,20,.62) 34%,rgba(17,17,20,.12) 66%,rgba(17,17,20,0) 82%)}
.ward-promo-banner.tone-light{color:var(--ward-ink)}
.ward-promo-banner.tone-light::before{background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.7) 34%,rgba(255,255,255,.12) 66%,rgba(255,255,255,0) 82%)}
[dir="rtl"] .ward-promo-banner.tone-light::before{background:linear-gradient(270deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.7) 34%,rgba(255,255,255,.12) 66%,rgba(255,255,255,0) 82%)}
.ward-promo-copy{position:relative;width:min(100%,560px);padding:clamp(26px,3.6vw,52px);display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.ward-promo-copy h2{margin:0;font-size:clamp(24px,2.5vw,34px);line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.ward-promo-copy p{margin:0;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.82);max-width:42ch}
.ward-promo-banner.tone-light .ward-promo-copy p{color:var(--ward-ink-2)}
.ward-promo-copy .ward-btn{align-self:flex-start;margin-top:6px}
.ward-promo-btn{background:#fff;color:var(--ward-ink);min-height:48px;padding-inline:24px;border-radius:var(--r-pill)}
.ward-promo-btn:hover{background:var(--ward-pink);color:#fff}
.ward-promo-banner.tone-light .ward-promo-btn{background:var(--ward-ink);color:#fff}
.ward-promo-banner.tone-light .ward-promo-btn:hover{background:var(--ward-pink)}
.ward-promo-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.ward-promo-banner.tone-light .ward-timer{color:var(--ward-ink-2)}
.ward-promo-banner.tone-light .ward-timer-box{background:rgba(17,17,20,.08)}
.ward-promo-banner.tone-light .ward-timer-box b{color:var(--ward-ink)}
@media (max-width:640px){
  .ward-promo-banner{align-items:flex-end;min-height:0;aspect-ratio:4/5;max-height:440px}
  .ward-promo-banner.is-default .ward-promo-bg{object-position:88% 50%}
  .ward-promo-banner::before,[dir="rtl"] .ward-promo-banner::before{background:linear-gradient(0deg,rgba(17,17,20,.9) 0%,rgba(17,17,20,.66) 38%,rgba(17,17,20,.1) 70%,rgba(17,17,20,0) 86%)}
  .ward-promo-banner.tone-light::before,[dir="rtl"] .ward-promo-banner.tone-light::before{background:linear-gradient(0deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.74) 40%,rgba(255,255,255,.1) 72%,rgba(255,255,255,0) 86%)}
  .ward-promo-copy{width:100%;padding:22px 20px 22px;gap:10px}
  .ward-promo-copy h2{font-size:23px}
  .ward-promo-copy p{font-size:14.5px}
  .ward-promo-copy .ward-btn{align-self:stretch}
}
@media (max-width:359px){ .ward-promo-banner{aspect-ratio:3/4} }
.ward-timer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:#B9BBC0}
.ward-timer-box{display:flex;flex-direction:column;align-items:center;min-width:50px;padding:7px 0;border-radius:var(--r-sm);background:rgba(255,255,255,.1)}
.ward-timer-box b{font-size:19px;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
.ward-timer-box span{font-size:11px}

/* ---------- Trust / service bar ---------- */

/* ---------- Spotlight tiles ---------- */
.ward-spots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.ward-spot{border-radius:var(--r-lg);background:var(--ward-surface-3);color:var(--ward-ink);display:grid;grid-template-columns:minmax(0,1fr) clamp(120px,17vw,220px);align-items:center;gap:20px;padding:clamp(18px,2.2vw,28px)}
.ward-spot:hover{color:var(--ward-ink)}
.ward-spot b{font-size:clamp(17px,1.7vw,22px);line-height:1.35}
.ward-spot .ward-tile-sub{font-size:14px}
.ward-spot .ward-tile-link{margin-top:6px}
.ward-spot-media{aspect-ratio:1/1;border-radius:var(--r-media);background:#EEEEF0;color:#E7A3BB;display:grid;place-items:center;overflow:hidden}
.ward-spot-media img{width:100%;height:100%;object-fit:cover}

.ward-home-last{padding-bottom:clamp(8px,1vw,8px)}