/* TALGRANIT — חנות. עיצוב אחד, בהיר, מובייל-ראשון. */

:root{
  --ground:#EDF1F0; --surface:#fff; --surface-2:#F6F8F7;
  --ink:#14262A; --ink-2:#4A6067; --ink-3:#7B9096;
  --line:#D4DEDC; --line-2:#B4C4C1;
  --accent:#0E7C7B; --accent-ink:#0A5F5E; --accent-soft:#D8EAE7;
  --gold:#9C7A22; --gold-soft:#F0E6CC;
  /* ⛔ 6.4:1 מול הרקע הבהיר — מעל סף AA לטקסט רגיל. */
  --danger:#B3261E;
  --alert:#A6353A;
  --shadow:0 1px 2px rgba(20,38,42,.06), 0 10px 28px -18px rgba(20,38,42,.3);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Assistant","Segoe UI",system-ui,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px}
a{color:var(--accent-ink)}
h1,h2{font-family:"Frank Ruhl Libre",Georgia,serif;text-wrap:balance}

/* ── כותרת ── */
.mast{background:var(--surface);border-bottom:1px solid var(--line-2);padding:52px 0 40px}
.eyebrow{
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;font-weight:600;
}
.mast h1{font-size:clamp(34px,6vw,54px);font-weight:900;line-height:1.05;margin:0 0 18px;letter-spacing:-.015em}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:56ch;font-weight:300;margin:0 0 20px}
.lede strong{color:var(--ink);font-weight:600}
.ship-note{
  display:inline-block;background:var(--gold-soft);color:var(--gold);
  padding:7px 15px;border-radius:999px;font-size:14.5px;font-weight:600;margin:0;
}

/* ── קטלוג ── */
main{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));padding-top:38px;padding-bottom:20px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:24px;box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column;
}
.badge{
  position:absolute;top:-11px;inset-inline-start:22px;
  background:var(--accent);color:#fff;font-size:12px;font-weight:700;
  padding:4px 12px;border-radius:999px;letter-spacing:.03em;
}
.card h2{font-size:23px;margin:0 0 10px;font-weight:700}
.desc{color:var(--ink-2);font-size:15.5px;margin:0 0 16px;flex:1}
.desc em{color:var(--accent-ink);font-style:normal;font-weight:600}
.price{margin:0 0 6px;font-size:15px}
.price .now{font-size:27px;font-weight:700;font-variant-numeric:tabular-nums}
.price s{color:var(--ink-3);margin-inline-start:8px}
.stock{margin:0 0 14px;font-size:14px;min-height:1.4em;color:var(--ink-3)}
.stock.low{color:var(--gold);font-weight:600}
.stock.out{color:var(--alert);font-weight:600}
/*
  ⭐ «תפוס זמנית» ולא «אזל». ⛔ צבע שונה מ-`out` בכוונה: המצב הזה
  אינו סוף הדרך, וצבע האזהרה היה משדר בדיוק את ההפך.
  ⚠️ `tabular-nums` כדי שהספרות לא ירקדו בכל שנייה.
*/
.stock.held{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}

button{font:inherit;cursor:pointer;border-radius:3px;border:1px solid transparent}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.buy{
  width:100%;padding:13px;background:var(--accent);color:#fff;
  font-weight:700;font-size:16px;transition:background .15s;
}
.buy:hover:not(:disabled){background:var(--accent-ink)}
.buy:disabled{background:var(--line);color:var(--ink-3);cursor:not-allowed}

/* ── אמון ── */
.trust{padding:34px 20px 44px;border-top:1px solid var(--line)}
.trust h2{font-size:21px;margin:0 0 12px}
.trust p{color:var(--ink-2);max-width:66ch;margin:0 0 12px}
.fine{font-size:13.5px;color:var(--ink-3)}

/* ── עגלה ── */
.cart-fab{
  position:fixed;inset-block-end:18px;inset-inline-end:18px;z-index:20;
  background:var(--ink);color:#fff;padding:14px 22px;font-weight:700;
  box-shadow:0 6px 22px rgba(20,38,42,.34);border-radius:999px;
}
.cart-fab span{
  background:var(--accent);border-radius:999px;padding:1px 9px;
  margin-inline-start:7px;font-variant-numeric:tabular-nums;
}
.cart{
  position:fixed;inset-block:0;inset-inline-end:0;width:min(390px,100%);z-index:30;
  background:var(--surface);border-inline-start:1px solid var(--line-2);
  box-shadow:-12px 0 40px -22px rgba(20,38,42,.5);
  padding:26px 24px;overflow-y:auto;
}
.cart h2{font-size:22px;margin:0 0 18px}
.cart-close{
  position:absolute;top:14px;inset-inline-start:14px;
  background:none;font-size:26px;line-height:1;color:var(--ink-3);padding:5px 10px;
}
.line{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;
}
.qty{display:flex;align-items:center;gap:10px}
.qty span{min-width:1.4em;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.step{
  width:30px;height:30px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--ink);font-size:17px;line-height:1;
}
.step:hover{background:var(--accent-soft);border-color:var(--accent)}
.nudge{
  background:var(--gold-soft);color:var(--gold);padding:11px 14px;
  border-radius:3px;font-size:14.5px;font-weight:600;margin:16px 0 0;
}
/* ── ⭐ שמירת המלאי של הקונה ── */
.hold{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--gold-soft);color:var(--gold);
  padding:11px 14px;border-radius:3px;margin:16px 0 0;
}
.hold[hidden]{display:none}
.hold__text{margin:0;font-size:14.5px;font-weight:600;flex:1;min-width:0}
/* ⭐ `tabular-nums` כדי שהספרות לא ירקדו בכל שנייה. */
.hold__clock{font-variant-numeric:tabular-nums}
.hold__extend{
  padding:7px 14px;font:inherit;font-size:14px;font-weight:600;
  background:var(--surface);border:1px solid var(--gold);border-radius:3px;
  color:var(--gold);cursor:pointer;white-space:nowrap;
}
.hold__extend[hidden]{display:none}
.hold__extend:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── קוד הנחה ── */
.coupon{margin:18px 0 0}
.coupon label{
  display:block;font-size:13.5px;color:var(--ink-2);margin:0 0 6px;font-weight:600;
}
/* ⭐ `gap` ולא `margin`: עובד זהה ב-RTL וב-LTR בלי כלל נפרד. */
.coupon-row{display:flex;gap:8px}
.coupon-row input{
  flex:1;min-width:0;padding:9px 11px;font-family:inherit;
  background:var(--surface-2);border:1px solid var(--line);border-radius:3px;
  color:var(--ink);
  /* ⛔ 16px ולא פחות: מתחת לזה iOS מזום על הדף בכל מיקוד בשדה. */
  font-size:16px;
}
.coupon-row input:focus-visible,
.coupon-row button:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.coupon-row button{
  padding:9px 16px;font-size:15px;font-family:inherit;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);border-radius:3px;
  color:var(--ink);cursor:pointer;white-space:nowrap;
}
.coupon-row button:hover{background:var(--accent-soft);border-color:var(--accent)}
.coupon-msg{margin:8px 0 0;font-size:14px;color:var(--ink-2)}
/*
  ⚠️ הצבע אינו הסימן היחיד: הטקסט עצמו אומר אם הקוד התקבל או נדחה.
  ⛔ הסתמכות על צבע בלבד נכשלת ב-WCAG 1.4.1 ואצל עיוורי צבעים.
*/
.coupon-msg.good{color:var(--gold);font-weight:600}
.coupon-msg.bad{color:var(--danger);font-weight:600}

.totals{
  display:grid;grid-template-columns:1fr auto;gap:9px 12px;
  margin:20px 0;padding-top:16px;border-top:1px solid var(--line-2);
}
.totals dt{color:var(--ink-2);font-size:15px;margin:0}
.totals dd{margin:0;text-align:start;font-variant-numeric:tabular-nums;font-size:15px}
.totals .sum{font-weight:700;font-size:19px;color:var(--ink)}
.checkout{
  width:100%;padding:15px;background:var(--accent);color:#fff;
  font-weight:700;font-size:17px;
}
.checkout:hover{background:var(--accent-ink)}

/* ── צ׳קאאוט ── */
dialog{
  border:1px solid var(--line-2);border-radius:4px;padding:0;
  max-width:440px;width:calc(100% - 32px);background:var(--surface);color:var(--ink);
}
dialog::backdrop{background:rgba(20,38,42,.5)}
dialog form{padding:26px}
dialog h2{font-size:22px;margin:0 0 18px}
dialog label{display:block;margin-bottom:13px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
dialog input,dialog textarea{
  display:block;width:100%;margin-top:5px;padding:11px 12px;
  border:1px solid var(--line-2);border-radius:3px;font:inherit;
  background:var(--surface-2);color:var(--ink);
}
dialog input:focus,dialog textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;background:var(--surface)}
.actions{display:flex;gap:10px;margin-top:20px}
.actions .checkout{flex:1}
.ghost{background:none;border:1px solid var(--line-2);color:var(--ink-2);padding:15px 20px}
.err{background:#F4DEDE;color:var(--alert);padding:11px 14px;border-radius:3px;font-size:14.5px;margin:14px 0 0}

@media (max-width:640px){
  body{font-size:16px}
  .mast{padding:36px 0 30px}
  .cart{width:100%;border-inline-start:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── נגישות. נוסף בשער P1. ────────────────────────────────────── */

/**
 * ⭐ דילוג לתוכן: מוסתר עד שהוא מקבל מיקוד.
 * ⛔ `display:none` היה מסתיר אותו גם מהמקלדת, כלומר הורג את התכלית.
 */
.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: #fff;
  color: #1a1a1a;
  border: 2px solid currentColor;
}
.skip:focus { inset-inline-start: 0; }

/* ⭐ מיקוד נראה תמיד. ⛔ אל תסירו — זו הדרך היחידה לנווט בלי עכבר. */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* ⚠️ `main` מקבל מיקוד רק כיעד הדילוג, ולכן בלי מסגרת משלו. */
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}