/* ============================================================================
   Chic — الكتالوج · القسم · نتائج البحث · الماركة · العروض · التصنيفات · الماركات
   لوحتا الكتالوج (ديسكتوب ٦ / جوال ٧) في «Caretti Storefront» + «Storefront 3» (النتائج،
   التصنيفات، صفحة التصنيف، العروض، الحالات) + «Caretti Product Card». Handoff §٣ و§٥.
   ========================================================================= */
.chic-catalog { padding-bottom: var(--chic-space-section); }
.chic-page-pad { padding-inline: var(--chic-page-pad); }

/* ── رأس الصفحة (.chic-page-head / .chic-breadcrumb / .chic-page-title) صار في shell.css — مشترك لكل الصفحات ── */
.chic-catalog-head { padding-top: 22px; padding-inline-start: 26px; padding-inline-end: 24px; text-align: center; }
.chic-catalog-head.is-simple { padding-inline: var(--chic-page-pad); }
.chic-catalog-head.is-simple .chic-page-title { margin-top: 0; }
.chic-theme .chic-catalog-count { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: rgb(var(--chic-ink-soft)); text-align: center; }
.chic-theme .chic-catalog-desc { max-width: 720px; margin: 14px auto 0; font-size: 15px; line-height: 1.9; color: rgb(var(--chic-ink-soft)); text-align: center; }
.chic-brand-logo { display: block; height: 56px; width: auto; max-width: 200px; object-fit: contain; margin: 22px auto 0; }

/* ── العروض: أعلى خصم | أقرب انتهاء ── */
.chic-offers-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 8px; margin-top: 18px; }
.chic-offers-meta-item { padding-inline: 20px; font-size: 15px; line-height: 1.5; color: rgb(var(--chic-ink-soft)); }
.chic-offers-meta-item b { font-weight: var(--chic-fw-semibold); color: rgb(var(--chic-ink)); }
.chic-offers-meta .chic-divider-v { height: 18px; align-self: center; }

/* ── الأقسام الفرعية وصفحة التصنيفات: بطاقات 3:4 ── */
.chic-subcats { margin-top: 26px; padding-inline-start: 26px; padding-inline-end: 24px; }
.chic-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--chic-gutter); }
.chic-cat-grid.is-page { padding: 28px var(--chic-page-pad) 0; }
.chic-cat-card { display: block; color: rgb(var(--chic-ink)); }
.chic-cat-media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: rgb(var(--chic-surface-card)); }
.chic-cat-media img { width: 100%; height: 100%; object-fit: cover; }
.chic-cat-label {
  display: block; padding: 14px 10px; background: rgb(var(--chic-surface-band)); text-align: center;
  font-size: 17px; font-weight: var(--chic-fw-semibold); line-height: 1.4;
}

/* ── الماركات (نفس نمط بطاقة التصنيف) ── */
.chic-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--chic-gutter); padding: 28px var(--chic-page-pad) 0; }
.chic-brand-card { display: block; color: rgb(var(--chic-ink)); }
.chic-brand-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 28px; background: rgb(var(--chic-surface-card)); }
.chic-brand-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.chic-brand-initial { font-size: 44px; font-weight: var(--chic-fw-semibold); color: rgb(var(--chic-muted)); }
.chic-brand-label { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px; background: rgb(var(--chic-surface-band)); text-align: center; }
.chic-brand-name { font-size: 17px; font-weight: var(--chic-fw-semibold); line-height: 1.4; }
.chic-brand-count { font-size: 14px; color: rgb(var(--chic-muted)); }

/* ── التخطيط: عمود فلاتر minmax(0,304) + فاصل 11 + المنتجات ── */
.chic-catalog-layout {
  display: grid; grid-template-columns: minmax(0, 304px) minmax(0, 1fr); gap: var(--chic-filters-gap); align-items: start;
  margin-top: 28px; padding-inline-start: 26px; padding-inline-end: 24px;
}
.chic-catalog-main { min-width: 0; }
.chic-results { position: relative; }

/* ── لوح الفلاتر ── */
.chic-filters { border-top: 1px solid rgb(var(--chic-border)); padding-top: 22px; }
.chic-filters-head, .chic-filters-tab { display: none; }
.chic-filters-backdrop { display: none; }
.chic-filters form { margin: 0; }
.chic-filter-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.chic-filter-group + .chic-filter-group { margin-top: 26px; }
.chic-theme .chic-filter-title { display: block; float: none; width: 100%; padding: 0; margin: 0 0 18px; font-size: 15px; font-weight: var(--chic-fw-semibold); line-height: 1.5; color: rgb(var(--chic-ink)); }
.chic-filter-title:lang(en) { letter-spacing: var(--chic-ls-latin-nav); }
.chic-filter-opt { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; font-size: 15px; line-height: 1.5; color: rgb(var(--chic-ink)); cursor: pointer; }
.chic-theme .chic-filter-opt input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
.chic-filter-opt.is-child { padding-inline-start: 26px; color: rgb(var(--chic-ink-soft)); }
.chic-price-row { display: flex; gap: 10px; }
.chic-price-field { flex: 1; min-width: 0; }
.chic-filter-3d { margin-top: 22px; }
.chic-filters-foot { display: flex; align-items: center; gap: 18px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgb(var(--chic-border)); }
.chic-filters-foot .chic-btn-quiet { height: 44px; padding-inline: 30px; }

/* ── شريط الأدوات: رقائق (بادئة) + ترتيب (خاتمة) ── */
.chic-catalog-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 16px; margin-bottom: 22px; }
.chic-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chic-chips-label { font-size: 14px; color: rgb(var(--chic-muted)); }
.chic-chip {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding-inline: 14px;
  background: rgb(var(--chic-surface-card)); border: 1px solid rgb(var(--chic-border)); font-size: 14px; color: rgb(var(--chic-ink));
}
.chic-chip:hover { border-color: rgb(var(--chic-ink)); }
.chic-chip-x { font-size: 17px; line-height: 1; color: rgb(var(--chic-muted)); }
.chic-sort { display: flex; align-items: center; gap: 14px; margin: 0; margin-inline-start: auto; }
.chic-sort-label { font-size: 15px; color: rgb(var(--chic-ink-soft)); white-space: nowrap; }
.chic-sort .chic-select-wrap { display: inline-block; }
.chic-sort .chic-select { width: auto; min-width: 190px; padding-inline: 14px 40px; }

/* ── الشبكة: auto-fill minmax(280px,1fr) داخل 1076 ← ٣ × 348 عند 1440 ── */
.chic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--chic-gutter); max-width: var(--chic-catalog-grid-max); }
.chic-grid.is-centered { margin-inline: auto; }
.chic-static-results { margin-top: 28px; }

/* ── بطاقة المنتج ── */
.chic-card { position: relative; min-width: 0; color: rgb(var(--chic-ink)); }
.chic-card-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: rgb(var(--chic-surface-card)); }
.chic-card-media img { width: 100%; height: 100%; object-fit: cover; }
.chic-card-swatches { display: flex; gap: 6px; margin-top: 8px; }
.chic-card-swatch {
  flex: 0 0 44px; width: 44px; height: 44px; padding: 0; overflow: hidden; cursor: pointer;
  background: rgb(var(--chic-surface-card)); border: 1px solid rgb(var(--chic-border));
}
.chic-card-swatch.is-active { border-color: rgb(var(--chic-ink)); }
.chic-card-swatch img { width: 100%; height: 100%; object-fit: cover; }
.chic-theme .chic-card-title { margin: 9px 0 0; font-size: 15px; font-weight: var(--chic-fw-regular); line-height: 1.5; }
.chic-card-title a { color: rgb(var(--chic-ink)); }
.chic-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.chic-theme .chic-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 3px 0 0; font-size: 15px; line-height: 1.5; color: rgb(var(--chic-ink)); }
.chic-card-old { color: rgb(var(--chic-muted)); text-decoration: line-through; }
.chic-card-now { font-weight: var(--chic-fw-semibold); }
.chic-theme .chic-card-stock { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: rgb(var(--chic-muted)); }

/* ── زرّ «أضف إلى السلة» على البطاقة + لوح الخيارات داخلها (طلب المالك) ────────
   الزرّ شريط أسود ملاصق للحافة السفلى للصورة. يظهر عند التمرير وعند وصول التركيز
   لأي عنصر داخل البطاقة، ويبقى ظاهرًا دائمًا على الأجهزة اللمسية (hover: none).
   نُخفيه بالشفافية لا بـvisibility/display حتى يبقى قابلاً للوصول بلوحة المفاتيح:
   تركيزه نفسه يُفعّل :focus-within فيظهر. pointer-events تمنع نقرة على صورة شفّافة. */
.chic-card-figure { position: relative; }
.chic-card-add {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 14px;
  background: rgb(var(--chic-ink-max)); color: rgb(var(--chic-on-dark));
  font-size: 14px; font-weight: var(--chic-fw-medium); line-height: 1.2; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity var(--chic-duration-default) ease;
}
/* لا يظهر إلا بعد ترقية catalog.js إلى عنصر إفصاح. صفحتا المفضّلة و«منتجات ذات صلة» تحمّلان
   catalog.css بلا catalog.js، فبدون هذا يظهر زرّ سلة ينقل للصفحة بدل أن يضيف (رصده فحص الوظيفة). */
.chic-card-add:not([aria-expanded]) { display: none; }
.chic-card-add:lang(en) { letter-spacing: var(--chic-ls-btn); }
.chic-card:hover .chic-card-add,
.chic-card:focus-within .chic-card-add { opacity: 1; pointer-events: auto; }
.chic-card-add:hover { opacity: .82; }
.chic-card-add[aria-busy="true"] { opacity: .6; pointer-events: none; }
/* اللمس: يظهر الزرّ بعد أول لمسة على البطاقة فقط (catalog.js يضيف is-touched) — طلب المالك */
.chic-card.is-touched .chic-card-add { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .chic-card-add { transition: none; }
}
/* أثناء فتح اللوح يبقى الزرّ في ترتيب التنقّل (نعيد إليه التركيز عند الإغلاق) لكنه يختفي بصريًا،
   وإلا ظهر شبح الشريط الأسود خلف خلفية اللوح شبه الشفافة. التخصيص أعلى من قاعدتَي
   :hover و(hover: none) فيغلبهما في الحالتين. */
.chic-theme .chic-card .chic-card-add[aria-expanded="true"] { opacity: 0; pointer-events: none; }

/* اللوح يغطّي البطاقة كاملة فوق صورة باهتة — × في الزاوية الخاتمة، ثم الألوان فالمقاسات
   فالخيارات، وشريط الإضافة بعرض كامل في الأسفل. غير نمطي (non-modal): Tab يخرج منه بحرّية. */
/* اللوح نفسه لا يتمرّر: العمود الداخلي (.chic-qa-body) هو الذي يتمرّر، وشريط الإضافة خارجه.
   بـsticky داخل حاوية متمرّرة كان الشريط يطلي فوق أزرار المقاسات (69% منها مغطّاة على 390)
   ويدفع «XL» ورسالة الحالة خارج الصندوق — رصده فحص الوصول، وPlaywright أخفاه لأن click()
   يمرّر العنصر تلقائيًا قبل النقر. خلفية معتمة (لا .97) حتى لا يعتمد تباين النصّ على صورة المنتج. */
.chic-card-qa {
  position: absolute; inset-block: 0; inset-inline: 0; z-index: 4;
  display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain;
  padding: 10px; background: rgb(var(--chic-surface-card));
  border: var(--chic-border-width) solid rgb(var(--chic-border));
}
.chic-qa-form { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
.chic-qa-head { display: flex; justify-content: flex-end; }
.chic-qa-close {
  width: 44px; height: 44px; padding: 0; margin-block-end: 2px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: rgb(var(--chic-ink)); font-size: 22px; line-height: 1; cursor: pointer;
}
.chic-qa-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.chic-qa-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chic-qa-fieldset { border: 0; margin: 0; padding: 0; }
.chic-theme .chic-qa-label { display: block; float: none; width: auto; padding: 0; margin: 0; font-size: 13px; line-height: 1.4; color: rgb(var(--chic-ink-soft)); }
.chic-qa-req { color: rgb(var(--chic-muted)); }
.chic-qa-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.chic-qa-swatch {
  width: 44px; height: 44px; padding: 5px; cursor: pointer;
  background: rgb(var(--chic-surface-card)); border: var(--chic-border-width) solid rgb(var(--chic-border));
}
.chic-qa-swatch-fill { display: block; width: 100%; height: 100%; border: var(--chic-border-width) solid rgb(var(--chic-border-soft)); }
.chic-qa-swatch[aria-pressed="true"] { border-color: rgb(var(--chic-ink)); }
.chic-qa-size, .chic-qa-choice > span {
  min-width: 44px; height: 44px; padding-inline: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--chic-surface-card)); color: rgb(var(--chic-ink)); border: var(--chic-border-width) solid rgb(var(--chic-border));
  font-size: 14px; line-height: 1; cursor: pointer;
}
.chic-qa-size[aria-pressed="true"] { background: rgb(var(--chic-ink)); color: rgb(var(--chic-on-dark)); border-color: rgb(var(--chic-ink)); }
.chic-qa-choice { position: relative; display: inline-flex; cursor: pointer; }
.chic-qa-choice > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.chic-qa-choice > input:checked + span { background: rgb(var(--chic-ink)); color: rgb(var(--chic-on-dark)); border-color: rgb(var(--chic-ink)); }
.chic-qa-choice > input:focus-visible + span { outline: 2px solid rgb(var(--chic-ink)); outline-offset: 2px; }
.chic-theme .chic-qa-msg { margin: 0; font-size: 13px; line-height: 1.5; color: rgb(var(--chic-ink-soft)); }
.chic-theme .chic-qa-msg.is-error { color: rgb(var(--chic-danger)); }
/* ملتصق بنهاية اللوح: على البطاقات الضيّقة (عمودان على الجوال) تُمرَّر الخيارات ويبقى الشريط ظاهرًا */
.chic-qa-add {
  flex: 0 0 auto; margin-block-start: 10px; padding: 12px 14px; min-height: 44px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--chic-ink-max)); color: rgb(var(--chic-on-dark)); border: 0;
  font-family: inherit; font-size: 14px; font-weight: var(--chic-fw-medium); line-height: 1.2; cursor: pointer;
}
.chic-qa-add:lang(en) { letter-spacing: var(--chic-ls-btn); }
.chic-qa-add:hover { opacity: .82; }
.chic-qa-add[disabled] { background: rgb(var(--chic-ink-soft)); cursor: not-allowed; }

/* ── التقدّم (بدل أرقام الصفحات) ── */
.chic-progress { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 38px; max-width: var(--chic-catalog-grid-max); }
.chic-progress-track { position: relative; display: block; width: 236px; max-width: 100%; height: 3px; overflow: hidden; background: rgb(var(--chic-border)); }
.chic-progress-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: rgb(var(--chic-ink-max)); }
.chic-progress-text { font-size: 15px; color: rgb(var(--chic-ink)); }
.chic-progress-loading { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgb(var(--chic-muted)); }
.chic-pager { display: flex; justify-content: center; gap: 24px; }
.chic-catalog-empty { max-width: var(--chic-catalog-grid-max); }

/* ============================================================================
   الجوال/التابلت (< 992): عمود الفلاتر ← تبويب رأسي أسود ملتصق بالحافة البادئة + لوح منزلق
   ========================================================================= */
@media (max-width: 991.98px) {
  .chic-catalog-layout { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 18px; padding-inline: 16px; }
  .chic-subcats { padding-inline: 16px; }
  /* writing-mode العمودي يقلب المحاور المنطقية: لو وُضع على الزرّ نفسه لأصبحت inset-inline-start
     حافةً سفلية، فتجتمع مع top:0 ويمتدّ الزرّ على كامل ارتفاع .chic-results (شريط أسود بطول الصفحة).
     لذلك يبقى الزرّ بمحاور طبيعية ويُدار النصّ وحده داخل <span>. */
  .chic-filters-tab {
    /* طلب المالك: ثابت على حافة الشاشة أثناء التمرير (لا يتحرّك مع الصفحة) — تحت الهيدر (60) والألواح (1055+) */
    display: block; position: fixed; top: 50%; transform: translateY(-50%); inset-inline-start: 0; z-index: 55;
    padding: 16px 8px; border: 0; cursor: pointer;
    background: rgb(var(--chic-ink-max)); color: rgb(var(--chic-on-dark)); font-size: 13px; line-height: 1;
  }
  .chic-filters-tab > span { display: block; writing-mode: vertical-rl; }
  .chic-filters-tab:lang(en) > span { letter-spacing: var(--chic-ls-btn); }
  .chic-filters { display: none; }
  .chic-filters.is-open {
    display: block; position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1065; width: min(340px, 88vw);
    overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 24px; border-top: 0;
    background: rgb(var(--chic-surface-card)); box-shadow: var(--chic-drawer-shadow);
  }
  .chic-filters.is-open .chic-filters-head {
    display: flex; align-items: center; justify-content: space-between; height: 56px;
    margin: 0 -16px 18px; padding-inline: 16px 4px; border-bottom: 1px solid rgb(var(--chic-border-drawer));
  }
  .chic-filters-head-title { font-size: 16px; font-weight: var(--chic-fw-semibold); }
  .chic-filters-close {
    width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: rgb(var(--chic-ink));
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .chic-filters-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1064; background: var(--chic-modal-backdrop); }
  .chic-filter-opt { min-height: 32px; }
  .chic-theme .chic-filter-opt input { width: 20px; height: 20px; }
  .chic-catalog-bar { margin-bottom: 18px; }
  .chic-grid { max-width: none; }
  .chic-progress, .chic-catalog-empty { max-width: none; }
}

@media (max-width: 767px) {
  .chic-catalog-head { padding: 18px 16px 0; }
  .chic-catalog-head .chic-breadcrumb { display: none; } /* لوحة الجوال ٧: بلا مسار تنقّل */
  .chic-catalog-head .chic-page-title { margin-top: 0; }
  .chic-theme .chic-catalog-count { margin-top: 10px; font-size: 14px; }
  .chic-sort { gap: 10px; }
  .chic-sort-label { font-size: 14px; }
  .chic-sort .chic-select { min-width: 0; padding-inline: 12px 34px; font-size: 14px; }
  /* طلب المالك: بطاقتان في الصف على الجوال — لوح الخيارات يمتدّ فوق البطاقة كاملة (catalog.js) */
  .chic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* أهداف اللمس على الجوال: الشريط والحقول 48 */
  .chic-card-add { min-height: 48px; font-size: 13px; }
  .chic-qa-add { min-height: 48px; font-size: 13px; }
  .chic-progress { margin-top: 30px; gap: 12px; }
  .chic-progress-track { width: 180px; }
  .chic-progress-text { font-size: 14px; }
  .chic-cat-grid, .chic-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chic-cat-grid.is-page, .chic-brand-grid { padding: 18px 16px 0; }
  .chic-cat-label { padding: 12px 8px; font-size: 15px; }
  .chic-brand-label { padding: 12px 8px; }
  .chic-brand-name { font-size: 15px; }
  .chic-brand-media { padding: 18px; }
}

/* ── مطابقة صور المالك المرجعية للإضافة السريعة: شريط فاتح بحدّ 1px وأيقونة سلة، وخيارات متمركزة ── */
.chic-card-add, .chic-qa-add {
  gap: 8px;
  background: rgb(var(--chic-surface-band)); color: rgb(var(--chic-ink));
  border: var(--chic-border-width) solid rgb(var(--chic-border));
}
.chic-card-add:hover, .chic-qa-add:hover { opacity: 1; border-color: rgb(var(--chic-ink)); }
.chic-qa-add[disabled] { background: rgb(var(--chic-surface-band)); color: rgb(var(--chic-muted)); }
.chic-card-add svg, .chic-qa-add svg { flex: 0 0 auto; }
.chic-qa-group { align-items: center; text-align: center; }
.chic-theme .chic-qa-label { text-align: center; }
.chic-qa-opts { justify-content: center; }
.chic-theme .chic-qa-msg { text-align: center; }

/* ── مطابقة الصور المرجعية (٢٠٢٦-٠٩-١٦ ب): اللوح يغطّي الصورة فقط فوق نسخة باهتة منها ──
   × في الزاوية، «اللون:» و«المقاس:» في الوسط بمربّعات صغيرة، وشريط «أضف إلى السلة» في
   مكانه أسفل الصورة يصير زرّ الإرسال. المصغّرات حتى ٦ بتمرير أفقي وسهم «التالي». */
.chic-card-qa {
  position: absolute; inset: 0; z-index: 4; padding: 0; border: 0;
  background: rgba(var(--chic-surface-card), .86);
}
.chic-qa-head { position: absolute; top: 0; inset-inline-end: 0; z-index: 1; }
.chic-qa-close { width: 40px; height: 40px; margin: 0; font-size: 26px; font-weight: 300; }
.chic-qa-body { gap: 14px; align-items: center; text-align: center; padding: 40px 14px 12px; }
.chic-qa-body > :first-child { margin-block-start: auto; }
.chic-qa-body > :last-child { margin-block-end: auto; }
.chic-qa-group { width: 100%; gap: 8px; }
.chic-theme .chic-qa-label { font-size: 14px; font-weight: var(--chic-fw-medium); color: rgb(var(--chic-ink)); }
.chic-qa-opts { gap: 8px; }
.chic-qa-swatch { width: 30px; height: 30px; padding: 3px; background: transparent; border-color: transparent; }
.chic-qa-swatch-fill { border-color: rgba(var(--chic-ink), .15); }
.chic-qa-swatch[aria-pressed="true"] { border-color: rgb(var(--chic-ink)); }
.chic-qa-size, .chic-qa-choice > span { min-width: 34px; height: 30px; padding-inline: 8px; font-size: 13px; }
.chic-qa-body .chic-select-wrap, .chic-qa-body .chic-input { width: 100%; max-width: 240px; }
.chic-qa-add { margin: 0; min-height: 44px; border-inline: 0; border-block-end: 0; }
@media (hover: none) {
  .chic-qa-swatch { width: 38px; height: 38px; padding: 4px; }
  .chic-qa-size, .chic-qa-choice > span { min-width: 40px; height: 38px; font-size: 14px; }
}

.chic-card-thumbs { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.chic-card-thumbs .chic-card-swatches {
  flex: 1 1 auto; min-width: 0; margin: 0; overflow-x: auto; scrollbar-width: none;
}
.chic-card-thumbs .chic-card-swatches::-webkit-scrollbar { display: none; }
.chic-card-thumbs-next {
  flex: 0 0 28px; width: 28px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--chic-ink));
}
.chic-card-thumbs-next[hidden] { display: none; }
[dir="rtl"] .chic-card-thumbs-next svg { transform: scaleX(-1); }
/* ── الجوال بعمودين: البطاقة ~173px، فاللوح يغطّي البطاقة كلها (ارتفاعه يضبطه catalog.js)
   بأزرار أصغر حتى تتّسع المقاسات بلا تمرير داخلي ── */
@media (max-width: 767px) {
  .chic-card-qa { background: rgba(var(--chic-surface-card), .93); }
  .chic-qa-close { width: 36px; height: 36px; font-size: 24px; }
  .chic-qa-body { gap: 10px; padding: 34px 6px 8px; }
  .chic-qa-group { gap: 6px; }
  .chic-theme .chic-qa-label { font-size: 13px; }
  .chic-qa-opts { gap: 5px; }
  .chic-qa-swatch { width: 32px; height: 32px; padding: 3px; }
  .chic-qa-size, .chic-qa-choice > span { min-width: 32px; height: 32px; padding-inline: 6px; font-size: 13px; }
  .chic-theme .chic-qa-msg { font-size: 12px; }
  .chic-qa-add { min-height: 44px; font-size: 13px; }
}
/* ── طلب المالك: «الفلاتر النشطة» ورقائقها + «ترتيب حسب» وحقله في صفّ واحد دائمًا ──
   الرقائق تأخذ المساحة المتبقية وتتمرّر أفقيًا إن زادت، والترتيب لا ينكمش. */
.chic-catalog-bar { flex-wrap: nowrap; }
.chic-chips { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chic-chips::-webkit-scrollbar { display: none; }
.chic-chips-label, .chic-chip { flex: 0 0 auto; white-space: nowrap; }
.chic-sort { flex: 0 0 auto; }
@media (max-width: 767px) {
  .chic-catalog-bar { gap: 10px; }
  .chic-chips { gap: 6px; }
  .chic-chips-label { font-size: 13px; }
  .chic-chip { height: 34px; gap: 6px; padding-inline: 10px; font-size: 13px; }
  .chic-sort { gap: 6px; }
  .chic-sort-label { font-size: 13px; }
  .chic-sort .chic-select { width: 124px; padding-inline: 8px 28px; font-size: 13px; text-overflow: ellipsis; }
}
/* ── طلب المالك: حقول الاختيار في شريط الأدوات بحجم موحّد — رقائق الفلاتر وحقل الترتيب بنفس
   الارتفاع والحدّ والخطّ (44px على كل المقاسات بدل 36/44 على الكمبيوتر و34/48 على الجوال) ── */
.chic-catalog-bar .chic-chip,
.chic-catalog-bar .chic-sort .chic-select { height: 44px; font-size: 14px; border: var(--chic-border-width) solid rgb(var(--chic-border)); border-radius: var(--chic-radius); }
.chic-catalog-bar .chic-chip { padding-inline: 14px; }
@media (max-width: 767px) {
  .chic-catalog-bar .chic-chip,
  .chic-catalog-bar .chic-sort .chic-select { height: 44px; font-size: 13px; }
  .chic-catalog-bar .chic-chip { padding-inline: 10px; }
}

/* ── طلب المالك: زرّ الفلاتر لا يتحرّك إطلاقًا أثناء السحب ──
   top:50% يُحسب من ارتفاع الشاشة الذي يتغيّر في متصفحات الجوال عند ظهور/اختفاء شريط العنوان
   أثناء التمرير، فيقفز الزرّ. 50svh ثابت (أصغر ارتفاع للشاشة) ولا يتغيّر مع شريط العنوان. */
@media (max-width: 991.98px) {
  .chic-filters-tab { top: 50%; top: 50svh; transition: none; will-change: transform; }
}