/* ═══════════════════════════════════════════════════════════════════════
   مُونَتْنا — الميزات الجديدة
   صناديق العينات · خيارات المنتج · خريطة المونة · الهدايا · الوصفات

   بيستعمل نفس المتغيّرات تبع style.css — ولا لون جديد ولا خط جديد،
   حتى تضلّ الصفحات الجديدة تحسّ إنها من نفس الموقع مش ملزوقة عليه.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── رأس قسم مشترك ──────────────────────────────────────────────────── */
.section__head { text-align: center; margin-bottom: var(--s5); }
.section__title {
  font-family: var(--f-head); font-size: var(--t-xl);
  color: var(--green-deep); margin-bottom: var(--s2);
}
.section__sub {
  color: var(--muted); max-width: 56ch; margin-inline: auto; line-height: 1.75;
}

.page__h1 {
  font-family: var(--f-head); font-size: var(--t-xxl);
  color: var(--green-deep); margin-bottom: var(--s2);
}
.page__lead { color: var(--muted); max-width: 62ch; line-height: 1.8; }


/* ═══ ١. صناديق العينات والهدايا ═══════════════════════════════════ */

.kits__grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.kit {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.kit:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }

.kit__media { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); }
.kit__media img { width: 100%; height: 100%; object-fit: cover; }

.kit__save {
  position: absolute; inset-block-start: .7rem; inset-inline-start: .7rem;
  background: var(--red); color: var(--white);
  font-size: var(--t-xs); font-weight: 900;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  box-shadow: var(--sh-red);
}

.kit__body { padding: var(--s3); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.kit__name { font-size: var(--t-md); line-height: 1.4; }
.kit__name a { color: var(--ink); }
.kit__name a:hover { color: var(--green-deep); }
.kit__tag { font-size: var(--t-sm); color: var(--muted); line-height: 1.6; }

.kit__region {
  font-size: var(--t-xs); color: var(--muted);
  display: inline-flex; align-items: center; gap: .3rem;
}
.kit__region svg { width: 14px; height: 14px; }

.kit__foot {
  margin-top: auto; padding-top: var(--s2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
}
.kit__price { font-family: var(--f-head); font-weight: 900; color: var(--green-deep); }
.kit__price s { font-size: var(--t-xs); color: var(--muted); font-weight: 400; margin-inline-start: .35rem; }

.kit--gift { border-color: var(--clay); }


/* ── صفحة الصندوق ───────────────────────────────────────────────────── */

.boxp { padding-block: var(--s5); }
.boxp__grid {
  display: grid; gap: var(--s5); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 860px) { .boxp__grid { grid-template-columns: 1fr; } }

.boxp__media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper-2); box-shadow: var(--sh-2);
}
.boxp__media img { width: 100%; height: auto; display: block; }

.boxp__save {
  position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem;
  background: var(--red); color: var(--white); font-weight: 900;
  padding: .4rem .9rem; border-radius: var(--r-pill); box-shadow: var(--sh-red);
}

.boxp__kind {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--green-soft); color: var(--green-deep);
  font-size: var(--t-xs); font-weight: 800;
  padding: .32rem .8rem; border-radius: var(--r-pill); margin-bottom: var(--s2);
}
.boxp__kind svg { width: 15px; height: 15px; }
.boxp__kind--gift { background: var(--red-soft); color: var(--red-deep); }

.boxp__name { font-family: var(--f-head); font-size: var(--t-xl); margin-bottom: .5rem; }
.boxp__tag { color: var(--muted); line-height: 1.75; margin-bottom: var(--s3); }

.boxp__price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: var(--s3); }
.boxp__price b { font-family: var(--f-head); font-size: var(--t-xl); color: var(--green-deep); }
.boxp__price s { color: var(--muted); }
.boxp__saves {
  font-size: var(--t-xs); color: var(--ok);
  background: var(--ok-bg); padding: .25rem .6rem; border-radius: var(--r-pill);
}

.boxp__desc { line-height: 1.85; margin-bottom: var(--s4); }

.boxp__items {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s3); margin-bottom: var(--s4);
}
.boxp__items h2 { font-size: var(--t-md); margin-bottom: var(--s2); color: var(--green-deep); }

.boxp__list { list-style: none; display: grid; gap: .7rem; }
.boxp__list li { display: flex; align-items: center; gap: .7rem; }
.boxp__list img { width: 52px; height: 52px; border-radius: var(--r-sm); object-fit: cover; flex: none; }

.boxp__dot {
  width: 52px; height: 52px; border-radius: var(--r-sm); flex: none;
  background: var(--sand);
}

.boxp__item-b { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.boxp__item-b b { font-size: var(--t-sm); }
.boxp__item-b b a { color: var(--ink); }
.boxp__item-b b a:hover { color: var(--green-deep); text-decoration: underline; }
.boxp__item-b i { font-style: normal; font-size: var(--t-xs); color: var(--green-deep); font-weight: 700; }
.boxp__item-b em { font-style: normal; font-size: var(--t-xs); color: var(--muted); }

.boxp__once {
  text-align: center; font-size: var(--t-xs); color: var(--muted);
  margin-top: .6rem; display: flex; align-items: center; justify-content: center; gap: .3rem;
}
.boxp__once svg { width: 14px; height: 14px; }

.boxp__taken {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--ok-bg); border: 1px solid var(--ok);
  border-radius: var(--r-md); padding: var(--s3); margin-bottom: var(--s3);
}
.boxp__taken svg { width: 24px; height: 24px; color: var(--ok); flex: none; }
.boxp__taken b { display: block; margin-bottom: .2rem; }
.boxp__taken p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }

.boxp__giftnote {
  font-size: var(--t-sm); color: var(--muted); line-height: 1.7;
  margin-top: var(--s3); padding: var(--s2) var(--s3);
  background: var(--red-soft); border-radius: var(--r-sm);
}

.boxp__trust {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line);
}
.boxp__trust li {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--t-xs); color: var(--muted);
}
.boxp__trust svg { width: 16px; height: 16px; color: var(--green); }


/* ── صفحة الهدايا ───────────────────────────────────────────────────── */

.gifts-hero { text-align: center; }
.gifts__h1 { font-family: var(--f-head); font-size: var(--t-xxl); color: var(--green-deep); }
.gifts__lead {
  color: var(--muted); max-width: 60ch; margin: var(--s2) auto var(--s5);
  line-height: 1.85;
}

.gifts__steps {
  list-style: none; display: grid; gap: var(--s3); text-align: center;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.gifts__steps li {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s3);
}
.gifts__num {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--green-soft); color: var(--green-deep);
  font-family: var(--f-head); font-weight: 900; margin: 0 auto .6rem;
}
.gifts__steps b { display: block; margin-bottom: .2rem; }
.gifts__steps p { font-size: var(--t-xs); color: var(--muted); }


/* ═══ ٢. خيارات المنتج ═════════════════════════════════════════════ */

.popt {
  display: grid; gap: var(--s3);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s3); margin-bottom: var(--s3);
}

.popt__g { border: 0; padding: 0; margin: 0; }

.popt__lg {
  font-family: var(--f-head); font-weight: 800; font-size: var(--t-sm);
  color: var(--ink); margin-bottom: .45rem; padding: 0;
  display: flex; align-items: center; gap: .35rem;
}
.popt__req { color: var(--red); }
.popt__opt {
  font-size: var(--t-xs); font-weight: 400; color: var(--muted);
  background: var(--white); padding: .1rem .5rem; border-radius: var(--r-pill);
}
.popt__hint { font-size: var(--t-xs); color: var(--muted); margin-bottom: .5rem; }

.popt__row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* المدخل نفسه مخفي بصرياً بس لسّا موجود للوحة المفاتيح والقارئ الصوتي */
.popt__c input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.popt__c { cursor: pointer; }
.popt__c-b {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--r-pill); padding: .5rem .95rem;
  font-size: var(--t-sm); transition: all .18s ease;
}
.popt__c:hover .popt__c-b { border-color: var(--clay); }

.popt__c input:checked + .popt__c-b {
  border-color: var(--green); background: var(--green-soft); color: var(--green-deep);
  font-weight: 700;
}
/* حلقة التركيز لازم تبيّن — الناس بتتنقّل بالتاب */
.popt__c input:focus-visible + .popt__c-b {
  outline: 3px solid var(--gold); outline-offset: 2px;
}

.popt__c-p { font-size: var(--t-xs); font-weight: 800; color: var(--gold); }
.popt__c input:checked + .popt__c-b .popt__c-p { color: var(--green-deep); }


/* ═══ ٣. خريطة المونة ══════════════════════════════════════════════ */

.omap {
  display: grid; gap: var(--s4); align-items: start;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
}
@media (max-width: 900px) { .omap { grid-template-columns: 1fr; } }

.omap__stage {
  position: relative; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3);
}

.omap__svg { width: 100%; height: auto; display: block; max-height: 62vh; }

.omap__area {
  fill: var(--sand); stroke: var(--paper); stroke-width: 2.5;
  cursor: pointer; transition: fill .2s ease, transform .2s ease;
  transform-origin: center;
}
.omap__area:hover { fill: var(--clay); }
.omap__area:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.omap__area.is-on { fill: var(--green); }

.omap__label {
  font-family: var(--f-head); font-size: 11px; font-weight: 700;
  fill: var(--ink-2); pointer-events: none;
}
.omap__area.is-on + .omap__label { fill: var(--white); }

.omap__hint {
  position: absolute; inset-block-end: var(--s3); inset-inline-start: 50%;
  transform: translateX(50%);
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .35rem .9rem;
  font-size: var(--t-xs); color: var(--muted); box-shadow: var(--sh-1);
}
.omap__hint svg { width: 14px; height: 14px; }

.omap__panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4); min-height: 220px;
}

.omap__head h3 { font-family: var(--f-head); font-size: var(--t-lg); color: var(--green-deep); }
.omap__head p { color: var(--muted); font-size: var(--t-sm); line-height: 1.7; margin-top: .3rem; }

.omap__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s2); }
.omap__tag {
  background: var(--green-soft); color: var(--green-deep);
  font-size: var(--t-xs); font-weight: 700;
  padding: .25rem .7rem; border-radius: var(--r-pill);
}

.omap__prods {
  display: grid; gap: var(--s2); margin-top: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}
.omap__prod {
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .5rem; text-align: center;
  transition: transform .2s ease;
}
.omap__prod:hover { transform: translateY(-2px); border-color: var(--clay); }
.omap__prod img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }
.omap__prod-n { font-size: var(--t-xs); font-weight: 700; color: var(--ink); line-height: 1.35; }
.omap__prod-s { font-size: 11px; color: var(--muted); }
.omap__prod-p { font-size: var(--t-xs); font-weight: 900; color: var(--green-deep); }

.omap__shops { margin-top: var(--s4); }
.omap__shops h4 { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s2); }
.omap__shop {
  display: flex; align-items: center; gap: .6rem; padding: .5rem;
  border-radius: var(--r-sm); transition: background .2s ease;
}
.omap__shop:hover { background: var(--paper-2); }
.omap__shop-a {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--green-soft); color: var(--green-deep);
  display: grid; place-items: center; font-family: var(--f-head); font-weight: 900;
}
.omap__shop-b { display: flex; flex-direction: column; min-width: 0; }
.omap__shop-b b { font-size: var(--t-sm); color: var(--ink); }
.omap__shop-b i { font-style: normal; font-size: var(--t-xs); color: var(--muted); }

.omap__loading, .omap__empty {
  color: var(--muted); text-align: center; padding: var(--s5) var(--s3);
}

.omap__fallback { list-style: none; display: grid; gap: .5rem; margin-top: var(--s3); }
.omap__fallback a { color: var(--green-deep); }


/* ═══ ٤. حقول الهدية بصفحة الدفع ═══════════════════════════════════ */

.gift-panel { border-color: var(--clay) !important; }

.gift-toggle { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.gift-toggle input { width: 22px; height: 22px; flex: none; margin-top: .15rem; accent-color: var(--green); }
.gift-toggle__b b {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--f-head); font-size: var(--t-md); color: var(--green-deep);
}
.gift-toggle__b b svg { width: 20px; height: 20px; }
.gift-toggle__b i { font-style: normal; font-size: var(--t-xs); color: var(--muted); }

.gift-fields { margin-top: var(--s3); display: grid; gap: var(--s3); }
.gift-fields[hidden] { display: none; }

.wrap-opts { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wrap-opt { cursor: pointer; }
.wrap-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.wrap-opt span {
  display: flex; flex-direction: column; gap: .1rem;
  border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: .6rem .8rem; transition: all .18s ease; background: var(--white);
}
.wrap-opt input:checked + span { border-color: var(--green); background: var(--green-soft); }
.wrap-opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.wrap-opt b { font-size: var(--t-sm); }
.wrap-opt i { font-style: normal; font-size: var(--t-xs); color: var(--muted); }

.gift-abroad {
  border-top: 1px dashed var(--line); padding-top: var(--s3);
}
.field-row { display: grid; gap: var(--s2); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* الخيارات المختارة بسطر السلة */
.cart-item__opts {
  font-size: var(--t-xs); color: var(--green-deep); font-weight: 700;
  background: var(--green-soft); border-radius: var(--r-pill);
  padding: .1rem .55rem; display: inline-block; margin-block: .15rem;
}
.cart-item--box { border-inline-start: 3px solid var(--gold); padding-inline-start: .5rem; }


/* ═══ ٥. الوصفات ═══════════════════════════════════════════════════ */

.rec__grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.rec {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.rec:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }

.rec__media { display: block; aspect-ratio: 10 / 7; background: var(--paper-2); }
.rec__media img { width: 100%; height: 100%; object-fit: cover; }

.rec__body { padding: var(--s3); }
.rec__name { font-size: var(--t-md); margin-bottom: .4rem; }
.rec__name a { color: var(--ink); }
.rec__name a:hover { color: var(--green-deep); }
.rec__ex { font-size: var(--t-sm); color: var(--muted); line-height: 1.65; }

.rec__meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s2); font-size: var(--t-xs); color: var(--muted);
}
.rec__meta li { display: inline-flex; align-items: center; gap: .25rem; }
.rec__meta svg { width: 14px; height: 14px; }


/* ── صفحة الوصفة ────────────────────────────────────────────────────── */

.recp { padding-block: var(--s4); }

.recp__head {
  display: grid; gap: var(--s4); align-items: center; margin-block: var(--s4);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
@media (max-width: 860px) { .recp__head { grid-template-columns: 1fr; } }

.recp__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); }
.recp__media img { width: 100%; height: auto; display: block; }

.recp__intro h1 { font-family: var(--f-head); font-size: var(--t-xl); color: var(--green-deep); }
.recp__ex { color: var(--muted); line-height: 1.8; margin-block: var(--s2); }
.recp__meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3);
  font-size: var(--t-sm); color: var(--muted);
}
.recp__meta li { display: inline-flex; align-items: center; gap: .3rem; }
.recp__meta svg { width: 16px; height: 16px; }

.recp__grid {
  display: grid; gap: var(--s5); align-items: start;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
}
@media (max-width: 860px) { .recp__grid { grid-template-columns: 1fr; } }

.recp__card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s3);
  position: sticky; top: var(--s3);
}
@media (max-width: 860px) { .recp__card { position: static; } }

.recp__card h2 { font-size: var(--t-md); color: var(--green-deep); margin-bottom: var(--s2); }

.recp__ing { list-style: none; display: grid; gap: .3rem; }

.recp__pick {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem; border-radius: var(--r-sm); cursor: pointer;
  transition: background .18s ease;
}
.recp__pick:hover { background: var(--paper-2); }
.recp__pick input { width: 20px; height: 20px; flex: none; accent-color: var(--green); }

.recp__ing-b { display: flex; flex-direction: column; gap: .05rem; flex: 1; min-width: 0; }
.recp__ing-b b { font-size: var(--t-sm); }
.recp__ing-b i { font-style: normal; font-size: var(--t-xs); color: var(--green-deep); font-weight: 700; }
.recp__ing-b em { font-style: normal; font-size: 11px; color: var(--muted); }
.recp__ing-p { font-weight: 800; font-size: var(--t-sm); color: var(--green-deep); }

.recp__total {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s2) .5rem; margin-block: var(--s2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.recp__total b { font-family: var(--f-head); font-size: var(--t-md); color: var(--green-deep); }

.recp__pantry, .recp__missing {
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line);
}
.recp__pantry h3, .recp__missing h3 { font-size: var(--t-sm); margin-bottom: .3rem; }
.recp__pantry p { font-size: var(--t-xs); color: var(--muted); margin-bottom: .4rem; }
.recp__pantry ul, .recp__missing ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: .35rem;
}
.recp__pantry li, .recp__missing li {
  font-size: var(--t-xs); background: var(--paper-2);
  padding: .2rem .6rem; border-radius: var(--r-pill); color: var(--ink-2);
}
.recp__missing li { background: var(--warn-bg); color: var(--warn); }
.recp__missing a { font-size: var(--t-xs); color: var(--green-deep); display: inline-block; margin-top: .4rem; }
.recp__none { color: var(--muted); font-size: var(--t-sm); }

.recp__body h2 { font-family: var(--f-head); font-size: var(--t-lg); color: var(--green-deep); margin-bottom: var(--s3); }

.recp__steps { display: grid; gap: var(--s3); counter-reset: step; list-style: none; }
.recp__steps li {
  position: relative; padding-inline-start: 3rem; line-height: 1.9; counter-increment: step;
}
.recp__steps li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: -.1rem;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-deep);
  display: grid; place-items: center;
  font-family: var(--f-head); font-weight: 900; font-size: var(--t-sm);
}


/* ═══ ٦. الفلترة ═══════════════════════════════════════════════════ */

/* ── الشريط فوق النتائج ─────────────────────────────────────────── */

.fbar { margin-bottom: var(--s4); }

.fbar__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
}
.fbar__count { color: var(--muted); font-size: var(--t-sm); }
.fbar__count b { color: var(--ink); font-family: var(--f-head); font-size: var(--t-md); }

.fbar__actions { display: flex; align-items: center; gap: .6rem; }
.fbar__sort { display: flex; align-items: center; }

.fbar__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--r-pill); padding: .55rem 1.1rem;
  font-family: var(--f-head); font-weight: 800; font-size: var(--t-sm);
  color: var(--ink); cursor: pointer; transition: all .18s ease;
}
.fbar__btn:hover { border-color: var(--clay); }
.fbar__btn svg { width: 17px; height: 17px; }
.fbar__btn.is-on { border-color: var(--green); background: var(--green-soft); color: var(--green-deep); }

.fbar__n {
  background: var(--green); color: var(--white);
  min-width: 20px; height: 20px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 11px; padding-inline: .3rem;
}

/* شرائح الفلاتر المطبّقة */
.fbar__chips {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s2);
  padding-top: var(--s2); border-top: 1px solid var(--line);
}
.fbar__chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--green-soft); color: var(--green-deep);
  border: 0; border-radius: var(--r-pill); padding: .28rem .7rem;
  font-size: var(--t-xs); font-weight: 700; cursor: pointer;
  transition: background .18s ease;
}
.fbar__chip:hover { background: var(--sand); }
.fbar__chip svg { width: 13px; height: 13px; opacity: .7; }
.fbar__clear {
  font-size: var(--t-xs); color: var(--muted);
  text-decoration: underline; align-self: center; margin-inline-start: .3rem;
}

/* ── اللوحة ─────────────────────────────────────────────────────── */

.fdrawer { position: fixed; inset: 0; z-index: 9995; }
.fdrawer[hidden] { display: none; }

.fdrawer__scrim { position: absolute; inset: 0; background: rgba(34,27,21,.5); }

/* الموقع RTL: inset-inline-start = يمين الشاشة، واللوحة بتطلع من هونيك */
.fdrawer__box {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: min(100%, 560px); background: var(--paper);
  display: flex; flex-direction: column; box-shadow: var(--sh-3);
  animation: fslide .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes fslide { from { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) { .fdrawer__box { animation: none; } }

.fdrawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3); border-bottom: 1px solid var(--line);
  background: var(--white); flex: none;
}
.fdrawer__head h2 { font-family: var(--f-head); font-size: var(--t-lg); color: var(--green-deep); }
.fdrawer__x {
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--paper-2); display: grid; place-items: center; cursor: pointer;
}
.fdrawer__x svg { width: 20px; height: 20px; }

/* عمودان: الأقسام + الخيارات */
.fdrawer__body { flex: 1; display: grid; grid-template-columns: 132px 1fr; min-height: 0; }

.fdrawer__tabs {
  background: var(--paper-2); border-inline-end: 1px solid var(--line);
  overflow-y: auto; display: flex; flex-direction: column;
}
.fdrawer__tab {
  border: 0; background: transparent; cursor: pointer;
  padding: .95rem .7rem; text-align: start;
  font-size: var(--t-sm); color: var(--ink-2);
  border-inline-start: 3px solid transparent;
  display: flex; align-items: center; justify-content: space-between; gap: .3rem;
}
.fdrawer__tab:hover { background: var(--sand); }
.fdrawer__tab.is-on {
  background: var(--paper); color: var(--green-deep); font-weight: 800;
  border-inline-start-color: var(--green);
}
.fdrawer__dot {
  background: var(--green); color: var(--white);
  min-width: 18px; height: 18px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 10px; padding-inline: .25rem;
}

.fdrawer__panes { overflow-y: auto; padding: var(--s3); }
.fdrawer__pane { display: none; }
.fdrawer__pane.is-on { display: block; }
.fdrawer__pane h3 {
  font-family: var(--f-head); font-size: var(--t-sm);
  color: var(--muted); margin-bottom: var(--s2);
}

.fdrawer__chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.fchip { cursor: pointer; }
.fchip input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fchip span {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--r-pill); padding: .5rem .9rem;
  font-size: var(--t-sm); transition: all .16s ease;
}
.fchip:hover span { border-color: var(--clay); }
.fchip input:checked + span {
  border-color: var(--green); background: var(--green-soft);
  color: var(--green-deep); font-weight: 700;
}
.fchip input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.fchip i { font-style: normal; font-size: var(--t-xs); color: var(--muted); }
.fchip input:checked + span i { color: var(--green-deep); }

/* خانات السعر */
.fdrawer__range { display: flex; align-items: end; gap: .6rem; margin-top: var(--s3); }
.fdrawer__range label { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.fdrawer__range span { font-size: var(--t-xs); color: var(--muted); }
.fdrawer__range input {
  width: 100%; border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: .55rem .7rem; font: inherit; background: var(--white);
}
.fdrawer__range input:focus { border-color: var(--green); outline: 0; }
.fdrawer__dash { color: var(--muted); padding-bottom: .7rem; }

.fdrawer__foot {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: .6rem;
  padding: var(--s3); border-top: 1px solid var(--line);
  background: var(--white); flex: none;
  padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
}
#fApply.is-empty { opacity: .55; }

@media (max-width: 560px) {
  .fdrawer__box { width: 100%; }
  .fdrawer__body { grid-template-columns: 108px 1fr; }
  .fdrawer__tab { padding: .85rem .5rem; font-size: var(--t-xs); }
}