/* Ward Store — Claude Design v2 tokens + base. Loaded first; every other stylesheet builds on these. */

:root{
  /* Color */
  --ward-pink:#ED1761;          /* single primary action per screen, discount badges, active states */
  --ward-pink-2:#C9124F;        /* pink hover / pressed */
  --ward-tint:#FFF0F5;          /* icon tiles, highlights */
  --ward-tint-line:#F8DCE6;
  --ward-ink:#111114;           /* text, dark buttons */
  --ward-ink-2:#55585E;         /* secondary body */
  --ward-ink-3:#3F4247;
  --ward-muted:#6B6F76;         /* captions, meta */
  --ward-subtle:#8A8D94;        /* struck prices, placeholders */
  --ward-disabled:#A7A9AE;
  --ward-line:#E6E6E9;          /* borders, dividers */
  --ward-line-2:#EEEEF0;
  --ward-surface:#F4F4F5;       /* fields, media backgrounds */
  --ward-surface-2:#F7F7F8;     /* panels, footer */
  --ward-surface-3:#F6F6F7;     /* announcement bar, soft buttons */
  --ward-white:#fff;
  --ward-success:#12805C; --ward-success-bg:#E7F5EF;
  --ward-warning:#E08A00; --ward-warning-ink:#A35A00; --ward-warning-bg:#FFF4E0;
  --ward-error:#D92D20;   --ward-error-bg:#FEF3F2;
  --ward-whatsapp:#25D366;

  /* Radius */
  --r-xs:6px;      /* badges */
  --r-sm:10px;     /* icon buttons */
  --r:12px;        /* buttons, fields */
  --r-media:14px;  /* product media */
  --r-lg:20px;     /* banners, panels */
  --r-tile:22px;   /* category tiles */
  --r-pill:999px;

  /* Spacing (4-pt) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px;
  --container:1200px;
  --gutter:clamp(16px,3.2vw,40px);          /* 16 mobile → 40 desktop */
  --section-gap:clamp(32px,4.4vw,56px);     /* 32 mobile → 56 desktop between sections */

  /* Elevation: cards are flat; shadows only for floating UI */
  --shadow-1:0 1px 4px rgba(17,17,20,.08);   /* on-image buttons */
  --shadow-2:0 8px 24px rgba(17,17,20,.10);  /* sticky bars, dropdowns */
  --shadow-3:0 20px 60px rgba(17,17,20,.18); /* drawers, modals */
  --shadow-bar:0 -6px 24px rgba(17,17,20,.08);

  /* Type */
  --font:'Tajawal',system-ui,-apple-system,"Segoe UI",sans-serif;
  --lh-body:1.6;

  /* Height of fixed bottom UI (tab bar / sticky buy bar) so floating buttons and page end clear it */
  --ward-bottom-ui:0px;

  /* v1 aliases kept for page rules not yet migrated */
  --ward-bg:var(--ward-surface);
  --ward-radius:var(--r-lg);
  --ward-shadow:none;
}
html[lang="ar"]{--lh-body:1.75}  /* Arabic body copy gets +10% line-height */

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ward-ink);font-family:var(--font);font-size:16px;line-height:var(--lh-body);-webkit-font-smoothing:antialiased;padding-bottom:var(--ward-bottom-ui)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--ward-pink)}
img,video{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-weight:800;line-height:1.3}
:focus-visible{outline:2px solid var(--ward-ink);outline-offset:2px}


/* Layout */
.ward-wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.ward-sr,.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Icons (local Lucide sprite) */
.ward-i{display:inline-block;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
[dir="rtl"] .ward-i-dir{transform:scaleX(-1)}  /* chevrons / arrows mirror in RTL */

/* Buttons */
.ward-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:var(--r);font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;text-align:center;transition:background-color .15s,color .15s,border-color .15s}
.ward-btn-lg{min-height:52px;padding:0 28px;font-size:16px}
.ward-btn-primary{background:var(--ward-pink);color:#fff;font-weight:800}
.ward-btn-primary:hover{background:var(--ward-pink-2);color:#fff}
.ward-btn-dark{background:var(--ward-ink);color:#fff}
.ward-btn-dark:hover{background:var(--ward-pink);color:#fff}
.ward-btn-outline{background:#fff;color:var(--ward-ink);border:1.5px solid var(--ward-ink)}
.ward-btn-outline:hover{color:var(--ward-ink);background:var(--ward-surface-3)}
.ward-btn-soft{background:var(--ward-surface);color:var(--ward-ink)}
.ward-btn:disabled,.ward-btn.disabled{background:var(--ward-surface);color:var(--ward-disabled);cursor:not-allowed}
.ward-icon-button{width:44px;height:44px;display:inline-grid;place-items:center;border:0;background:none;color:var(--ward-ink);border-radius:var(--r-sm);cursor:pointer;padding:0;position:relative}
.ward-link{color:var(--ward-pink);font-weight:700;display:inline-flex;align-items:center;gap:2px}

/* Badges & chips */
.ward-badge-count{position:absolute;min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-pill);background:var(--ward-pink);color:#fff;font-size:11px;font-weight:700;line-height:1;display:grid;place-items:center}
.ward-chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--r-pill);background:var(--ward-tint);color:var(--ward-pink);font-size:13px;font-weight:700}
.ward-pay{height:26px;padding:0 10px;border-radius:var(--r-xs);background:#fff;border:1px solid var(--ward-line);font-size:11px;font-weight:800;color:var(--ward-ink);display:inline-grid;place-items:center;white-space:nowrap}

/* Prices: Western digits, currency after the number in Arabic and before it in English */
.woocommerce-Price-amount,.woocommerce-Price-amount bdi{white-space:nowrap}
ins{text-decoration:none}
del{color:var(--ward-subtle);font-weight:500}