/* ==========================================================================
   Rawnaq Al-Riaya — catalog archive
   Everything is scoped under .rq-catalog and prefixed .rq-* so it cannot
   collide with Hello Elementor, Elementor or Jeg Kit styles.
   Colours/sizes are CSS variables — override them in the child theme's
   style.css (or Elementor custom CSS) without touching this file.
   ========================================================================== */
.rq-catalog{
  --rq-brand:#8745A0;
  --rq-brand-2:#6E3585;
  --rq-orchid:#C468A5;
  --rq-surface:#FFFFFF;
  --rq-surface-2:#F5F2F8;
  --rq-surface-3:#EDE8F2;
  --rq-border:#E7E1EE;
  --rq-border-2:#D5CBE1;
  --rq-ink:#1F1A26;
  --rq-ink-2:#4A4256;
  --rq-muted:#7A7189;
  --rq-ring:rgba(135,69,160,.38);
  --rq-shadow:0 2px 4px rgba(31,26,38,.05), 0 12px 28px -16px rgba(31,26,38,.35);
  --rq-radius:10px;
  --rq-rail:266px;
  --rq-fit:contain;            /* contain | cover — product image fit inside the square */
  --rq-media-bg:#FFFFFF;
  --rq-gap:18px;
  --rq-card-min:216px;

  color:var(--rq-ink);
  font-size:15px;
  line-height:1.55;
}
.rq-catalog *{box-sizing:border-box}
.rq-catalog h1,.rq-catalog h2,.rq-catalog h3{margin:0; text-wrap:balance; letter-spacing:-.01em; color:var(--rq-ink)}
.rq-catalog a{color:inherit; text-decoration:none; box-shadow:none}
.rq-catalog button{font:inherit; color:inherit; cursor:pointer; background:none; border:none; padding:0}
.rq-catalog :focus-visible{outline:2px solid var(--rq-brand); outline-offset:2px; border-radius:4px}
.rq-catalog img{max-width:100%; height:auto}
.rq-catalog ul{list-style:none; margin:0; padding:0}

.rq-wrap{max-width:1280px; margin-inline:auto; padding-inline:20px}
.rq-mono{font-variant-numeric:tabular-nums}

/* --- breadcrumb + category header ------------------------------------- */
.rq-crumbs{display:flex; gap:7px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--rq-muted); padding-block:16px 0}
.rq-crumbs a:hover{color:var(--rq-brand)}
.rq-crumbs .rq-sep{opacity:.5}
.rq-crumbs [aria-current]{color:var(--rq-ink-2)}
.rq-head{padding-block:14px 22px; border-bottom:1px solid var(--rq-border); margin-bottom:22px}
.rq-head h1{font-size:clamp(26px,3.4vw,36px); line-height:1.15; font-weight:600}
.rq-head .rq-desc{margin:10px 0 0; color:var(--rq-ink-2); max-width:62ch; font-size:15.5px}
.rq-head .rq-desc p{margin:0 0 8px}
.rq-head .rq-desc p:last-child{margin-bottom:0}
.rq-head .rq-count{margin-top:12px; display:inline-block; font-size:12.5px; color:var(--rq-muted)}

/* --- subcategory strip -------------------------------------------------- */
.rq-subcats{margin-bottom:26px}
.rq-subcats h2{font-size:13px; font-weight:600; color:var(--rq-ink-2); margin-bottom:12px}
.rq-subcat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px}
.rq-subcat{
  display:flex; align-items:center; gap:11px; padding:9px 12px 9px 9px;
  background:var(--rq-surface); border:1px solid var(--rq-border); border-radius:var(--rq-radius);
  transition:border-color .16s, box-shadow .16s, transform .16s;
}
.rq-subcat:hover{border-color:var(--rq-brand); box-shadow:var(--rq-shadow); transform:translateY(-1px)}
.rq-subcat[aria-current="true"]{border-color:var(--rq-brand); background:var(--rq-surface-2)}
.rq-subcat img{width:46px; height:46px; border-radius:7px; object-fit:contain; background:var(--rq-surface-2); flex:none}
.rq-subcat .rq-t{min-width:0}
.rq-subcat .rq-t strong{display:block; font-size:13.5px; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rq-subcat .rq-t span{font-size:11.5px; color:var(--rq-muted)}

/* --- layout ------------------------------------------------------------- */
.rq-layout{display:grid; grid-template-columns:var(--rq-rail) minmax(0,1fr); gap:30px; align-items:start}
@media (max-width:980px){ .rq-layout{grid-template-columns:1fr; gap:0} }

/* --- filter rail -------------------------------------------------------- */
.rq-rail{position:sticky; top:18px}
.rq-rail-inner{background:var(--rq-surface); border:1px solid var(--rq-border); border-radius:12px; overflow:hidden}
.rq-rail-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--rq-border)}
.rq-rail-head h2{font-size:14px; font-weight:600}
.rq-linkish{font-size:12.5px; color:var(--rq-brand); font-weight:500}
.rq-linkish:hover{text-decoration:underline}
.rq-searchbox{padding:14px 16px; border-bottom:1px solid var(--rq-border)}
.rq-searchbox input{
  width:100%; padding:9px 12px; background:var(--rq-surface-2); border:1px solid var(--rq-border);
  border-radius:8px; font-size:13.5px; color:var(--rq-ink);
}
.rq-searchbox input::placeholder{color:var(--rq-muted)}
.rq-searchbox input:focus{outline:none; border-color:var(--rq-brand); box-shadow:0 0 0 3px var(--rq-ring)}
.rq-facet{border-bottom:1px solid var(--rq-border); padding:14px 16px}
.rq-facet:last-child{border-bottom:none}
.rq-facet > h3{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--rq-muted); margin-bottom:10px}
.rq-opts{display:flex; flex-direction:column; gap:1px}
.rq-opt{display:flex; align-items:center; gap:9px; padding:5px 6px; margin-inline:-6px; border-radius:6px; font-size:13.5px; line-height:1.35; cursor:pointer}
.rq-opt:hover{background:var(--rq-surface-2)}
.rq-opt input{
  appearance:none; -webkit-appearance:none; width:15px; height:15px; margin:0; border:1.5px solid var(--rq-border-2);
  border-radius:4px; flex:none; background:var(--rq-surface); display:grid; place-content:center; cursor:pointer;
}
.rq-opt input:checked{background:var(--rq-brand); border-color:var(--rq-brand)}
.rq-opt input:checked::after{content:""; width:8px; height:5px; border:2px solid #fff; border-top:0; border-inline-end:0; transform:rotate(-45deg) translate(1px,-1px)}
.rq-opt .rq-lbl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rq-opt .rq-n{font-size:11.5px; color:var(--rq-muted)}
.rq-opt.rq-is-off{opacity:.42}
.rq-dot{width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.18); flex:none}
.rq-cat-opt{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:6px; margin-inline:-6px; border-radius:6px; font-size:13.5px}
.rq-cat-opt:hover{background:var(--rq-surface-2)}
.rq-cat-opt[aria-current]{color:var(--rq-brand); font-weight:600}
.rq-cat-kids{padding-inline-start:12px; margin-inline-start:4px; border-inline-start:1px solid var(--rq-border); margin-block:2px}
.rq-more{font-size:12.5px; color:var(--rq-brand); font-weight:500; padding-block:6px}
.rq-more:hover{text-decoration:underline}

/* --- toolbar ------------------------------------------------------------ */
.rq-toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.rq-res{font-size:13.5px; color:var(--rq-muted)}
.rq-res b{color:var(--rq-ink); font-weight:600}
.rq-sort{margin-inline-start:auto; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--rq-muted)}
.rq-sort select{
  padding:8px 11px; border:1px solid var(--rq-border); border-radius:8px; background:var(--rq-surface);
  font-size:13.5px; color:var(--rq-ink); max-width:100%;
}
.rq-filters-btn{
  display:none; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--rq-border);
  background:var(--rq-surface); border-radius:8px; font-size:13.5px; font-weight:500;
}
.rq-filters-btn .rq-badge{background:var(--rq-brand); color:#fff; font-size:11px; font-weight:600; border-radius:999px; padding:1px 7px}
@media (max-width:980px){ .rq-filters-btn{display:inline-flex} }
@media (max-width:560px){ .rq-sort{margin-inline-start:0; width:100%} .rq-sort select{flex:1} }
.rq-chips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px}
.rq-chips:empty{display:none}
.rq-chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 8px 5px 11px; font-size:12.5px;
  background:var(--rq-surface); border:1px solid var(--rq-border-2); border-radius:999px; color:var(--rq-ink-2);
}
.rq-chip b{font-weight:600; color:var(--rq-ink)}
.rq-chip a{width:16px; height:16px; border-radius:50%; display:grid; place-content:center; color:var(--rq-muted); font-size:14px; line-height:1}
.rq-chip a:hover{background:var(--rq-surface-3); color:var(--rq-ink)}
.rq-chip.rq-clear{color:var(--rq-brand); border-style:dashed; padding-inline:11px; font-weight:500}

/* --- product grid ------------------------------------------------------- */
.rq-results{transition:opacity .15s}
.rq-results[aria-busy="true"]{opacity:.45; pointer-events:none}
.rq-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--rq-card-min),1fr)); gap:var(--rq-gap)}
@media (max-width:520px){ .rq-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} }
.rq-card{
  background:var(--rq-surface); border:1px solid var(--rq-border); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .18s, box-shadow .18s, transform .18s;
}
.rq-card:hover{border-color:var(--rq-border-2); box-shadow:var(--rq-shadow); transform:translateY(-2px)}
.rq-card-media{display:block; position:relative; aspect-ratio:1/1; background:var(--rq-media-bg); overflow:hidden}
.rq-card-media img{
  width:100%; height:100%; display:block; object-fit:var(--rq-fit); object-position:center;
  transition:transform .35s ease;
}
.rq-card:hover .rq-card-media img{transform:scale(1.04)}
.rq-card-body{padding:12px 13px 13px; display:flex; flex-direction:column; gap:6px; flex:1}
.rq-card .rq-brand{font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--rq-orchid)}
.rq-card h3{font-size:14px; font-weight:600; line-height:1.35; min-width:0}
.rq-card h3 a{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rq-specs{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px}
.rq-specs li{font-size:11px; color:var(--rq-ink-2); background:var(--rq-surface-2); border-radius:5px; padding:2px 7px}
.rq-card-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:11px}
.rq-card-foot .rq-sku{font-size:11px; color:var(--rq-muted)}
.rq-cta{
  font-size:12.5px; font-weight:600; color:var(--rq-brand); display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border:1px solid var(--rq-border-2); border-radius:7px; transition:.16s; white-space:nowrap;
}
.rq-card:hover .rq-cta{background:var(--rq-brand); border-color:var(--rq-brand); color:#fff}
.rq-cta svg{width:13px; height:13px}
[dir="rtl"] .rq-cta svg{transform:scaleX(-1)}

/* --- pagination / empty state ------------------------------------------- */
.rq-pager{display:flex; gap:6px; justify-content:center; align-items:center; margin-top:34px; flex-wrap:wrap}
.rq-pager a,.rq-pager span{
  min-width:36px; height:36px; padding-inline:10px; border:1px solid var(--rq-border); border-radius:8px;
  background:var(--rq-surface); font-size:13.5px; font-weight:500; display:inline-flex; align-items:center; justify-content:center;
}
.rq-pager .current{background:var(--rq-brand); border-color:var(--rq-brand); color:#fff}
.rq-pager a:hover{border-color:var(--rq-brand); color:var(--rq-brand)}
.rq-empty{grid-column:1/-1; text-align:center; padding:64px 20px; border:1px dashed var(--rq-border-2); border-radius:12px; color:var(--rq-muted)}
.rq-empty strong{display:block; color:var(--rq-ink); font-size:16px; margin-bottom:6px}

/* --- mobile drawer ------------------------------------------------------ */
.rq-scrim{position:fixed; inset:0; background:rgba(20,16,25,.5); z-index:9998; opacity:0; pointer-events:none; transition:opacity .2s}
.rq-scrim.rq-on{opacity:1; pointer-events:auto}
.rq-drawer-close{display:none; width:28px; height:28px; place-content:center; border-radius:6px; font-size:18px; color:var(--rq-muted)}
@media (max-width:980px){
  .rq-rail{
    position:fixed; inset-block:0; inset-inline-start:0; width:min(340px,86vw); z-index:9999; top:0;
    background:var(--rq-surface); transform:translateX(-102%); transition:transform .24s ease; overflow-y:auto;
  }
  [dir="rtl"] .rq-rail{transform:translateX(102%)}
  .rq-rail.rq-on{transform:none}
  .rq-rail-inner{border:none; border-radius:0; min-height:100%}
  .rq-rail-head{position:sticky; top:0; background:var(--rq-surface); z-index:2}
  .rq-drawer-close{display:inline-grid}
}
@media (prefers-reduced-motion:reduce){ .rq-catalog *{transition:none !important; animation:none !important} }