/* עיצוב רובריקת המבצעים. קובץ נפרד, כדי ששינוי במבצעים לא יחייב דחיפה מחדש
   של כל גיליון הסגנון. הטוקנים מוגדרים כאן ומצטרפים לאלה של app.css. */
:root{ --promo:#9A4B12; --promo-soft:#FDF0E6; --promo-ink:#FFFFFF; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --promo:#E8A87C; --promo-soft:#33200F; --promo-ink:#1A0E05;
}}
:root[data-theme="dark"]{ --promo:#E8A87C; --promo-soft:#33200F; --promo-ink:#1A0E05; }

/* ============ מבצעים ============ */
.promobtn{display:flex; align-items:center; gap:7px; border-radius:9px;
  padding:8px 14px; font-weight:800; font-size:13.5px; white-space:nowrap;
  background:var(--promo); color:var(--promo-ink); border:1px solid var(--promo);
  transition:filter .15s}
.promobtn svg{width:15px; height:15px}
.promobtn:hover{filter:brightness(1.12)}

.promostrip{display:flex; align-items:center; gap:12px; width:100%; text-align:start;
  margin:0 0 18px; padding:13px 16px; border-radius:12px; cursor:pointer;
  background:var(--promo-soft); border:1px solid color-mix(in srgb, var(--promo) 28%, transparent);
  transition:border-color .15s}
.promostrip:hover{border-color:var(--promo)}
.ps-tag{flex:none; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--promo-ink); background:var(--promo);
  padding:4px 9px; border-radius:99px}
.ps-list{flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:600; color:var(--strong);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ps-go{flex:none; font-size:12.5px; font-weight:700; color:var(--promo)}

.badge.promo{background:var(--promo); color:var(--promo-ink)}
.was{margin-inline-start:7px; font-size:.72em; font-weight:600; color:var(--faint);
  text-decoration-thickness:1px}
.promoline{margin:10px 0 0; font-size:12px; font-weight:700; color:var(--promo);
  background:var(--promo-soft); border-radius:7px; padding:6px 9px;
  font-variant-numeric:tabular-nums}

.nudge{margin:0 0 12px; padding:10px 12px; border-radius:9px;
  background:var(--promo-soft); border:1px solid color-mix(in srgb, var(--promo) 22%, transparent)}
.nudge p{margin:0; font-size:12.5px; font-weight:700; color:var(--promo)}
.nudge p + p{margin-top:5px}

.pcard{border:1px solid var(--rule); border-radius:14px; padding:20px 22px; margin:0 0 20px;
  background:var(--surface)}
.pcard > header{margin:0 0 16px}
.pcard h3{margin:0 0 5px; font-size:19px; letter-spacing:-.01em}
.pcard header p{margin:0; font-size:13px; color:var(--muted); line-height:1.65; max-width:60ch}
.ptiers{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:9px}
.ptiers li{display:flex; flex-direction:column; gap:2px; padding:9px 14px; border-radius:10px;
  background:var(--promo-soft); min-width:132px}
.ptiers span{font-size:11.5px; color:var(--muted); font-weight:600}
.ptiers b{font-size:16px; color:var(--promo); font-variant-numeric:tabular-nums}
.pprods{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px}
.pprod{display:flex; align-items:center; gap:11px; text-align:start; width:100%;
  padding:9px; border:1px solid var(--rule-soft); border-radius:10px; cursor:pointer;
  background:var(--paper); transition:border-color .15s}
.pprod:hover{border-color:var(--promo)}
.ppix{flex:none; width:52px; height:52px; border-radius:8px; background:var(--plate);
  display:grid; place-items:center; overflow:hidden}
.ppix img{width:100%; height:100%; object-fit:contain}
.pinfo{min-width:0; display:flex; flex-direction:column; gap:5px}
.pinfo b{font-size:13px; line-height:1.35}
.pdots{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.pdots em{font-style:normal; font-size:11px; color:var(--faint); margin-inline-start:3px}
.pdots .sw{width:11px; height:11px}

@media (max-width:640px){
  .promobtn span{display:none}
  .promobtn{padding:10px 12px}
  .promostrip{gap:9px; padding:11px 13px}
  .ps-go{display:none}
  .pcard{padding:16px 15px}
  .pprods{grid-template-columns:1fr}
}