/* =========================================================
   WOOTZ — OFFER KIT (طقم العرض) · إعادة تصميم افتتاحية
   يُحمَّل بعد home.css. يعتمد نفس tokens في site.css.

   البنية (ثلاثة أشرطة رأسية — كلها آمنة الارتفاع):
     kit-top   → العنوان مقابل دفتر السعر على خطّ قاعدة مشترك
     kit-strip → صور المنتجات كبطاقات متساوية (aspect-ratio يحكم الارتفاع)
     kit-foot  → شارات الثقة + زر الإضافة
   التوقيع: حجم العنوان الكبير × رقم السعر يتقابلان أفقيًا.
   ========================================================= */

#bundles.section{padding-block:72px}

.kit{position:relative;isolation:isolate;
  border:1px solid var(--line);border-radius:calc(var(--r) + 4px);overflow:hidden;
  background:
    radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 55%),
    linear-gradient(180deg,var(--surface),var(--surface-2))}
/* خيط ضوئي علوي رفيع — لمسة رقيّ بلا ضجيج */
.kit::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 70%,transparent),transparent)}

/* ============ الشريط العلوي ============ */
.kit-top{display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px;
  padding:34px 38px 26px;border-block-end:1px solid var(--line)}

.kit-eyebrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-block-end:14px}
.kit-eyebrow .kicker{margin-block-end:0}
.kit-ends{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.4px;
  color:var(--rec);border:1px solid color-mix(in srgb,var(--rec) 40%,transparent);
  background:color-mix(in srgb,var(--rec) 10%,transparent);padding:4px 10px;border-radius:100px}
.kit-ends i{width:6px;height:6px;border-radius:50%;background:var(--rec);
  box-shadow:0 0 7px var(--rec);animation:blink 1.4s steps(1) infinite}

.kit-title{font-family:var(--ff-disp,var(--ff-ar));font-weight:800;
  font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.2;letter-spacing:-.5px;color:var(--text)}
.kit-note{max-width:52ch;margin-block-start:12px;
  color:var(--text-2);font-size:.96rem;line-height:1.8}

/* دفتر السعر — منظّم: تسمية · رقم كبير · سطر مقارنة (بدل + توفير) */
.kit-ledger{display:flex;flex-direction:column;align-items:flex-end;text-align:end;gap:10px;
  padding-inline-start:32px;border-inline-start:1px solid var(--line)}
.kit-ledger-lbl{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-3)}
.kit-ledger-now{font-size:clamp(2.6rem,4.6vw,3.5rem);font-weight:600;line-height:.95;
  letter-spacing:-1.5px;color:var(--text)}
/* سطر واحد منظّم: السعر المفرد مشطوب + شارة التوفير */
.kit-ledger-cmp{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.kit-ledger-was{font-size:.9rem;color:var(--text-3);text-decoration:line-through}
.kit-ledger-save{font-size:11.5px;letter-spacing:.3px;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);padding:5px 12px;border-radius:100px}

/* ============ شريط المنتجات ============ */
.kit-strip{display:flex;align-items:stretch;gap:14px;padding:28px 38px}

/* علامة الجمع بين البطاقات — رمز هادئ، معادلة تنتهي عند السعر */
.kit-plus{flex:0 0 auto;align-self:center;
  font-family:var(--ff-mono);font-weight:300;font-size:1.7rem;line-height:1;
  color:color-mix(in srgb,var(--text) 34%,transparent);user-select:none}

.kit-cell{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.kit-cell:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--shadow)}
.kit-cell:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* الأساسي مميّز بحلقة أكسنت خفيفة */
.kit-cell.main{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent) inset}
.kit-cell.main:hover{border-color:var(--accent)}

.kit-cell-top{position:absolute;inset-block-start:0;inset-inline:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;
  pointer-events:none}
.kit-cell-code{font-size:10px;letter-spacing:1.4px;color:var(--text-3);
  border:1px solid var(--line);border-radius:5px;padding:3px 7px;
  background:color-mix(in srgb,var(--bg) 68%,transparent);backdrop-filter:blur(6px)}
.kit-cell-tag{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.8px;color:#fff;
  padding:4px 9px;border-radius:100px;background:var(--text-3);white-space:nowrap}
.kit-cell.main .kit-cell-tag{background:var(--brand);color:#fff}
.kit-cell.gift .kit-cell-tag{background:var(--accent);color:#fff}

/* الوسائط: نسبة ثابتة تحكم الارتفاع — لا انهيار ولا تمدّد */
.kit-cell-media{position:relative;display:block;aspect-ratio:4/3;
  background:
    radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 62%),
    linear-gradient(160deg,var(--surface-2),var(--bg-2))}
.kit-cell-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:20px;
  transition:transform .5s var(--ease)}
.kit-cell:hover .kit-cell-media img{transform:scale(1.05)}

.kit-cell-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-block-start:1px solid var(--line)}
.kit-cell-name{font-size:.9rem;line-height:1.4;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kit-cell-qty{font-size:11px;color:var(--text-3)}
.kit-cell-price{flex:0 0 auto;font-size:.92rem;color:var(--text-2)}
.kit-cell-price.free{color:var(--accent);letter-spacing:.5px}

/* ============ التذييل ============ */
.kit-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:22px 38px 30px;border-block-start:1px solid var(--line);
  background:color-mix(in srgb,var(--bg-2) 60%,transparent)}
.kit-perks{list-style:none;display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:0;margin:0}
.kit-perks li{display:inline-flex;align-items:center;gap:9px;
  font-size:.86rem;color:var(--text-2)}
.kit-perks svg{width:19px;height:19px;flex:0 0 auto;color:var(--accent)}

.kit-cta{flex:0 0 auto;min-width:240px;justify-content:center}
.kit-cta svg{width:18px;height:18px;flex:0 0 auto}
.kit-cta[disabled]{opacity:.55;cursor:not-allowed}

/* علامات إطار الرؤية (.vf من site.css) — ثابتة */
.kit>.vf{opacity:.3;z-index:3}

/* ---------- استجابة ---------- */
@media (max-width:900px){
  .kit-top{grid-template-columns:1fr;gap:20px;padding:28px 24px 22px}
  .kit-ledger{align-items:flex-start;text-align:start;padding-inline-start:0;
    border-inline-start:0;border-block-start:1px solid var(--line);padding-block-start:18px}
  .kit-strip{padding:22px 24px}
  .kit-foot{padding:20px 24px 26px}
}
@media (max-width:680px){
  /* الشريط يتحوّل لتمرير أفقي بدل الانضغاط */
  .kit-strip{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-block:22px}
  .kit-cell{flex:0 0 62%;scroll-snap-align:start}
  .kit-plus{font-size:1.4rem}
  .kit-foot{flex-direction:column;align-items:stretch}
  .kit-cta{min-width:0;width:100%}
  .kit-perks{justify-content:center;gap:18px}
}
@media (max-width:420px){
  .kit-title{font-size:1.5rem}
  .kit-ledger-now{font-size:2.2rem}
}

@media (prefers-reduced-motion:reduce){
  .kit-cell,.kit-cell-media img{transition:none}
  .kit-cell:hover{transform:none}
  .kit-cell:hover .kit-cell-media img{transform:none}
  .kit-ends i{animation:none}
}