/* ============================================================
   روائع للمجوهرات — صفحة الكتالوج
   تكمّل ورقة components.css (تخطيط القسم والفلاتر والأدوات) بما تحتاجه
   هذه الصفحة تحديدًا: حالة القائمة، الترقيم، درج الفلاتر على الجوال،
   وأسماء الحالات التي يستعملها public/js/pages/lab-grown-diamonds.js.

   ملاحظة: الجافاسكربت يبدّل الصنف `is-active`، بينما ورقة نُور تُنسّق
   `is-on`. تُعرَّف الحالتان معًا هنا بدل تعديل منطق الفلترة المُختبَر.
   ============================================================ */

.catalog{padding:8px 0 0}
.catalog .clayout{scroll-margin-top:calc(var(--header-h, 76px) + 16px)}

/* ---------- 1. مرادفات حالات الجافاسكربت ---------- */
.chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.is-active em{opacity:.85}
.view-btn.is-active{background:#fff;color:var(--brand);box-shadow:var(--sh-sm)}
.slider__dots button.is-active{width:28px;background:var(--brand)}

/* ---------- 2. غلاف عنصر المنتج ----------
   الجافاسكربت يُخفي العنصر ويعيد ترتيبه، فيبقى الغلاف موجودًا في الشجرة.
   display:contents يُخرجه من التخطيط فتصطف البطاقة في الشبكة مباشرة. */
.lab-product-item{display:contents}

/* ---------- 3. عمود النتائج ---------- */
.lab-results{min-width:0}

.catalog-sections{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:0 0 22px;
}
.catalog-section{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:98px;padding:18px 20px;border:1.5px solid var(--line);
  border-radius:var(--r-md);background:#fff;color:var(--ink);
  text-align:inherit;box-shadow:var(--sh-sm);cursor:pointer;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
}
.catalog-section:hover{border-color:rgba(166,111,47,.45);box-shadow:var(--sh-md);transform:translateY(-1px)}
.catalog-section.is-active{border-color:var(--brand);box-shadow:0 14px 34px rgba(166,111,47,.14)}
.catalog-section__icon{
  display:grid;place-items:center;width:58px;height:58px;flex:0 0 58px;
  border-radius:18px;background:var(--brand-50);overflow:hidden;color:var(--brand);
}
.catalog-section__icon img{width:100%;height:100%;object-fit:cover}
.catalog-section__icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
.catalog-section__body{display:grid;gap:6px;min-width:0}
.catalog-section__body b{font-size:18px;line-height:1.35;color:var(--ink)}
.catalog-section__body small{font-size:13px;line-height:1.45;color:var(--mut)}
.chip--category{display:inline-flex;align-items:center;gap:8px}
.chip__icon{
  display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;
  border-radius:9px;background:rgba(255,255,255,.54);overflow:hidden;
}
.chip__icon img{width:100%;height:100%;object-fit:cover}

/* عرض القائمة: يبدّله الجافاسكربت على .lab-shop */
.lab-shop.is-list .products--grid{display:flex;flex-direction:column;gap:14px}
.lab-shop.is-list .card{flex-direction:row;align-items:stretch}
/* aspect-ratio:auto كان يترك ارتفاع الإطار رهن تمدّد الـflex فيختلف من صف لآخر. */
.lab-shop.is-list .card__media{width:210px;flex-shrink:0;aspect-ratio:1/1;align-self:flex-start}
.lab-shop.is-list .card__body{padding:20px 22px}
.lab-shop.is-list .card__name{font-size:17px}
.lab-shop.is-list .add{max-width:220px}

/* ---------- 4. حقل البحث داخل لوحة الفلاتر ---------- */
.lab-search{position:relative;display:block}
.lab-search svg{
  position:absolute;inset-inline-start:12px;top:50%;translate:0 -50%;
  width:16px;height:16px;color:var(--mut);pointer-events:none;
}
.lab-search input{
  width:100%;padding:11px 14px;padding-inline-start:36px;
  border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:#fff;font-size:13.5px;outline:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.lab-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3.5px rgba(166,111,47,.11)}

/* ---------- 5. الترقيم ---------- */
.lab-pagination{
  display:flex;align-items:center;justify-content:center;gap:7px;
  flex-wrap:wrap;margin-top:30px;
}
.lab-pagination[hidden]{display:none}
.lab-pagination button{
  min-width:38px;height:38px;padding:0 12px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:#fff;
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:all .16s var(--ease);
}
.lab-pagination button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.lab-pagination button.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.lab-pagination button:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 6. بطاقة الإثبات بأيقونة ---------- */
.cinfo__ic{
  display:grid;place-items:center;width:64px;height:64px;
  margin-bottom:14px;border-radius:20px;background:var(--brand-50);overflow:hidden;
}
.cinfo__ic img{width:100%;height:100%;object-fit:cover}

/* ---------- 7. الاستجابة ----------
   سلم نقاط الكسر المعتمد بالمشروع: 1180 ← 980 ← 720 ← 560. */
@media (max-width:1180px){
  .clayout{grid-template-columns:236px 1fr;gap:20px}
  .products--grid{grid-template-columns:repeat(2,1fr)}
  .catalog-sections{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:980px){
  /* لوحة الفلاتر تصير درجًا ينزلق من جهة البداية */
  .clayout{grid-template-columns:1fr}
  .fbtn{display:inline-flex}
  .fclose{display:grid}
  .fpanel{
    position:fixed;top:0;inset-inline-start:0;z-index:110;
    width:min(320px,88%);height:100dvh;max-height:none;border-radius:0;
    transform:translateX(-105%);
    transition:transform .32s var(--ease);
  }
  html[dir="rtl"] .fpanel{transform:translateX(105%)}
  .catalog.is-filter-open .fpanel{transform:none !important}
  .catalog.is-filter-open::after{
    content:"";position:fixed;inset:0;z-index:100;
    background:rgba(15,23,42,.45);backdrop-filter:blur(3px);
  }
}

@media (max-width:720px){
  .toolbar{gap:9px}
  .toolbar__count{width:100%;margin-inline-end:0}
  .lab-shop.is-list .card{flex-direction:column}
  .lab-shop.is-list .card__media{width:100%;aspect-ratio:1/1}
  .catalog-sections{grid-template-columns:1fr}
  .catalog-section{min-height:86px;padding:14px 16px}
}

@media (max-width:560px){
  .products--grid{grid-template-columns:1fr}
  .sortwrap>label{display:none}
}