/* Taste, preserve mode: DESIGN_VARIANCE 4 / MOTION_INTENSITY 3 / VISUAL_DENSITY 5.
   Existing Laravel/Livewire storefront, Vazirmatn and semantic theme tokens.
   Scoped to the two catalog components. Cards use r-lg, controls r.
   No generated product imagery: the actual media and commerce controls stay intact. */
.catalog-list{min-width:0;scroll-margin-top:160px}
.shell-m:has(.catalog-list)>h1{font-size:var(--fs-9);line-height:1.6;letter-spacing:0;
  margin-block:var(--s3) var(--s2);padding-inline-start:var(--s4);border-inline-start:4px solid var(--primary)}
.shell-m:has(.catalog-list)>.shead-sub{font-size:var(--fs-3);color:var(--fg-muted);margin-bottom:var(--s5)}
.catalog-list .lst{gap:var(--s5)}
.catalog-list .lst-f{background:var(--surface);padding:var(--s5);border-radius:var(--r-lg)}
.catalog-list .lst-fh{padding-bottom:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.catalog-list .lst-fh h2{font-size:var(--fs-6)}
.catalog-list .lst-clr{padding-inline:0;font-size:var(--fs-1)}
.catalog-list .fld{margin-bottom:var(--s5);min-width:0}
.catalog-list .fld>label,.catalog-list .lst-pr legend{color:var(--fg);font-size:var(--fs-2)}
.catalog-list .fld select,.catalog-list .fld input{background:var(--bg);min-width:0;width:100%;min-height:48px}
.catalog-list .lst-pr{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:var(--s5)}
.catalog-list .lst-pr .fld{margin-bottom:0}
.catalog-list .lst-pr input{padding-inline:var(--s2);font-size:var(--fs-2)}
.catalog-list .lst-pr input::placeholder{font-size:var(--fs-1);color:var(--fg-muted)}
.catalog-list .lst-bar{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s3) var(--s4);margin-bottom:0;min-height:74px}
.catalog-list .lst-cnt{color:var(--fg);font-size:var(--fs-3);font-weight:700}
.catalog-list .lst-sort{gap:var(--s3);min-width:0}
.catalog-list .lst-sort select{min-height:44px;background:var(--bg);font-size:var(--fs-2)}
.catalog-list .fchips{margin-block:var(--s4) 0}
.catalog-list .fchip{background:var(--primary-subtle);border-color:var(--primary-border);color:var(--primary-text);min-height:44px}
.catalog-status{height:var(--s6);display:flex;align-items:center;color:var(--fg-muted);font-size:var(--fs-1)}
.catalog-list .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.catalog-list .pcard-w{min-width:0}
/* The picker lives inside cadd-w's stacking context. Reuse app.css's modal
   layer (95) while open, so other cards' controls cannot cover the picker. */
.catalog-list .cadd-w:has(.mdl.on){z-index:95}
.catalog-list .pcard{min-width:0;padding:var(--s4);gap:var(--s3);border-radius:var(--r-lg);box-shadow:none;
  transition:transform .2s ease}
.catalog-list .pcard:hover{box-shadow:none;border-color:var(--primary-border)}
.catalog-list .pthumb{aspect-ratio:4/3;background:var(--surface);border:0;display:grid;place-items:center}
.catalog-list .pthumb img{object-fit:contain}
.catalog-list .pthumb:not(:has(img))::after{content:'تصویر ثبت نشده';color:var(--fg-muted);font-size:var(--fs-1)}
.catalog-list .pcard>b{font-size:var(--fs-3);min-height:3.4em;color:var(--fg)}
.catalog-list .pcard>span.n{font-size:var(--fs-4);font-variant-numeric:tabular-nums}
.catalog-list .pcard>span.pv{color:var(--fg-muted);padding-top:var(--s3)}
.catalog-list .blank{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s8) var(--s5);text-align:center}
.catalog-list .blank h3{font-size:var(--fs-6);margin-bottom:var(--s3)}
.catalog-list .blank p{max-width:52ch;margin-inline:auto;line-height:2}
.catalog-pagination{margin-top:var(--s6)}
.catalog-pagination nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding-block:var(--s5);border-top:1px solid var(--border)}
.catalog-pagination .btn{min-height:44px;white-space:nowrap}
.catalog-pages{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.catalog-current{display:grid;place-items:center;min-width:44px;min-height:44px;padding-inline:var(--s3);
  background:var(--primary);color:var(--on-solid);border-radius:var(--r);font-weight:700}
@media(min-width:1280px){
  .catalog-list .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .catalog-list .pcard>span.n{font-size:var(--fs-3)}
}
@media(max-width:1039px){
  .catalog-list .lst-f{border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--bg)}
}
@media(max-width:759px){
  .catalog-list{scroll-margin-top:var(--s5)}
  .shell-m:has(.catalog-list)>h1{font-size:var(--fs-8)}
  .catalog-list .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .catalog-list .pcard{padding:var(--s3);padding-bottom:var(--s8)}
  .catalog-list .pcard>span.n,.catalog-list .pcard>span.pv{padding-inline-start:0}
  .catalog-list .pcard>span.n{font-size:var(--fs-2)}
  .catalog-list .lst-bar{padding:var(--s3)}
  .catalog-list .blank{padding-block:var(--s7)}
  .catalog-pages{order:3;flex-basis:100%;justify-content:center}
}
@media(max-width:519px){
  /* The shared header's base is in app.css; keep every shortcut in view at 320px. */
  body:has(.catalog-list) .catbar-s a{padding-inline:var(--s1)}
  .catalog-list .lst-sort{flex-basis:100%;margin-inline-start:0}
  .catalog-list .lst-sort select{flex:1;min-width:0}
  .catalog-list .lst-cnt{margin-inline-start:auto}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .catalog-list .pcard:active{transform:scale(.99)}
}
@media(prefers-reduced-motion:reduce){
  .catalog-list *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .catalog-list .pcard:hover,.catalog-list .pcard:active{transform:none}
}