/* ============================================================
   F. BINSABBAR storefront - catalog views (home / collections
   index / PLP / PDP / generic page). MONOCHROME v4.
   Reuses store.css kit classes; only genuinely new, namespaced
   components live here: doorway index, PLP filter drawer + sort,
   page-prep. No gold, no em/en dashes, brand-library icons only.
   ============================================================ */

/* ---------- COLLECTIONS INDEX (doorways) ---------- */
.cidx-title{background:var(--cream);text-align:center;}
.cidx-title .cidx-h1{margin-top:14px;}
.cidx-intro{max-width:56ch;margin:18px auto 0;color:var(--ink-warm);}

/* group divider: eyebrow between two ink hairlines */
.cidx-group{display:flex;align-items:center;justify-content:center;gap:20px;padding-block:clamp(40px,6vw,64px);}
.cidx-group .ln{width:48px;height:1px;background:var(--ink);flex:none;}
.cidx-group .ey{color:var(--grey);}

/* C-DOORWAY-A : full-bleed cinematic */
.door-a{position:relative;display:flex;align-items:flex-end;min-height:clamp(440px,74vh,780px);
  overflow:hidden;color:#fff;background:#0e0e0e;}
.door-a .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 5s ease;}
.door-a:hover .bg{transform:scale(1.05);}
.door-a .sc{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,18,18,.6),rgba(18,18,18,.12) 42%,transparent 62%);}
.door-a .cap{position:relative;z-index:2;padding:clamp(28px,5vw,64px);max-width:640px;}
.door-a .door-ey{display:block;}
.door-a .door-tag{color:#fff;margin:12px 0 10px;max-width:18ch;text-wrap:balance;}
.door-a .door-count{display:block;font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:16px;}

/* C-DOORWAY-B : contained 2-up */
.door-b{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.door-tile{display:block;color:inherit;}
.door-pv{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sand-l);}
.door-pv .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s var(--e1);}
.door-tile:hover .door-pv .bg{transform:scale(1.05);}
.door-cap{padding-top:16px;}
.door-cap .door-ey2{display:block;color:var(--grey);}
.door-cap .door-tag2{margin:8px 0 6px;}
.door-cap .door-count2{display:block;font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey);margin-bottom:12px;}
@media(max-width:820px){.door-b{grid-template-columns:1fr;gap:48px;}}
@media(max-width:768px){
  .door-a{min-height:64vh;justify-content:center;text-align:center;}
  .door-a .cap{max-width:none;}
  .door-a .door-tag{margin-inline:auto;}
}

/* ---------- PLP : floating filter/sort pill + slide-in panel (sort lives inside) ---------- */
/* the sort control now uses the kit .selfield.caps component (store.css) */
.plp-empty{text-align:center;padding-block:clamp(48px,8vw,120px);grid-column:1 / -1;}
.plp-empty .lead{margin-bottom:20px;}

/* floating trigger, centered at the bottom of the collection page */
.filter-fab{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:50;
  display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 26px;border-radius:999px;
  background:var(--ink);color:#fff;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);
  box-shadow:0 10px 30px rgba(18,18,18,.22);transition:opacity .2s,box-shadow .2s;}
.filter-fab:hover{opacity:.92;box-shadow:0 14px 38px rgba(18,18,18,.28);}
.filter-fab .ico{width:16px;height:16px;}
@media(max-width:600px){.filter-fab{bottom:18px;height:46px;padding:0 22px;}}

.fdrawer-scrim{position:fixed;inset:0;background:rgba(18,18,18,.42);opacity:0;visibility:hidden;
  transition:opacity .24s ease,visibility .24s;z-index:95;}
.fdrawer-scrim.open{opacity:1;visibility:visible;}
/* desktop: SIDE panel sliding in from the inline-end */
.fdrawer{position:fixed;top:0;inset-inline-end:0;height:100%;width:min(400px,94vw);z-index:96;
  background:var(--paper);color:var(--ink);border-inline-start:1px solid var(--hair);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s var(--e1);box-shadow:0 0 60px rgba(18,18,18,.14);}
#site.ar .fdrawer{transform:translateX(-100%);}
.fdrawer.open,#site.ar .fdrawer.open{transform:none;}
.fdrawer-top{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid var(--hair-soft);}
.fdrawer-top .ey{margin:0;color:var(--ink);}
.fdrawer-x{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;margin-inline-end:-10px;}
.fdrawer-x .ico{width:18px;height:18px;}
.fdrawer-body{flex:1;overflow-y:auto;padding:6px 26px 24px;}
.fdrawer .facet{border-bottom:1px solid var(--hair-soft);padding-block:20px;}
.fdrawer .facet:last-child{border-bottom:0;}
.fdrawer .facet-sort{padding-top:18px;}
.fdrawer .flabel{display:block;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--grey);margin-bottom:12px;}
.fopt{display:flex;align-items:center;gap:12px;padding-block:9px;min-height:44px;cursor:pointer;font-size:var(--ty-label);line-height:var(--ty-label-lh);transition:color .15s;}
.fopt:hover{color:var(--ink);}
.fopt .chk{flex:none;}   /* the facet checkbox is the kit .chk (store.css) */
.fopt .ftext{flex:1;}
.fopt .fn{color:var(--grey);font-size:var(--ty-help);font-variant-numeric:tabular-nums;}
.fdrawer-foot{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:18px 26px;border-top:1px solid var(--hair);}
.fdrawer-foot .btn.sm{flex:1;}
.fclear{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--grey);white-space:nowrap;}
.fclear:hover{color:var(--ink);}
/* mobile: BOTTOM SHEET */
@media(max-width:640px){
  .fdrawer{top:auto;bottom:0;inset-inline:0;width:auto;height:auto;max-height:86vh;border-inline-start:0;border-top:1px solid var(--hair);
    border-radius:18px 18px 0 0;transform:translateY(100%);box-shadow:0 -12px 40px rgba(18,18,18,.16);}
  #site.ar .fdrawer{transform:translateY(100%);}
  .fdrawer.open,#site.ar .fdrawer.open{transform:none;}
  .fdrawer-top{position:relative;padding-top:26px;}
  .fdrawer-top::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:999px;background:var(--hair);}
}

/* PDP : wishline as a button (kit styles the anchor form) */
.wishline{cursor:pointer;}
.wishline.on{color:var(--ink);font-weight:400;}

/* ---------- generic page fallback ---------- */
.page-prep{text-align:center;}
.page-prep .pp-in{max-width:44ch;margin-inline:auto;padding-block:clamp(20px,6vw,80px);}
.page-prep .pp-h{margin:16px 0 24px;}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .door-a .bg,.door-pv .bg{transition:none !important;}
  .door-a:hover .bg,.door-tile:hover .door-pv .bg{transform:none;}
  .fdrawer,.filter-fab,.fdrawer-scrim{transition:opacity .12s !important;}
}