/* ═══════════════════════════════════════════════════════════════════════════
   STITCHA ENGINE COMPONENTS — shared rich components
   ───────────────────────────────────────────────────────────────────────────
   These components' MARKUP lives in the shared engine (index.html #page2), so
   their CSS must load for EVERY niche — not inside a skin. Promoted out of the
   yachting skin and re-pointed at --dk-* tokens, so each niche themes them via
   the design kit. Loaded after design-kit.css and BEFORE the niche skin (which
   may still override). Verbatim from the yachting skin except --accent →
   --dk-accent, so it's a visual no-op for yachting.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Filter: trigger button (in the #page2 toolbar) ── */
.yh-filter-trigger{display:inline-flex;align-items:center;gap:0.35rem;background:transparent;border:1px solid rgba(0,0,0,0.12);color:#5a5550;font-family:var(--dk-sans);font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;padding:0.35rem 0.7rem;border-radius:2px;cursor:pointer;transition:all 0.15s ease;line-height:1.1;white-space:nowrap;}
.yh-filter-trigger svg{width:11px;height:11px;flex-shrink:0;}
.yh-filter-trigger:hover{border-color:var(--dk-ink);color:var(--dk-ink);background:var(--dk-paper);}

/* ── Filter: slide-over drawer ── */
.yh-filter-backdrop{position:fixed;inset:0;background:rgba(var(--dk-ink-rgb),0.4);z-index:9998;opacity:0;visibility:hidden;transition:opacity 0.25s ease,visibility 0s 0.25s;}
body.yh-filter-open .yh-filter-backdrop{opacity:1;visibility:visible;transition:opacity 0.25s ease,visibility 0s 0s;}
.yh-filters-panel{position:fixed;top:0;right:0;width:min(380px,90vw);height:100vh;background:#fff;z-index:9999;display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,0.25);transform:translateX(100%);transition:transform 0.32s cubic-bezier(.4,0,.2,1);border:none;}
body.yh-filter-open .yh-filters-panel{transform:translateX(0);}
.yh-filters-head{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 1.5rem 1.1rem;border-bottom:1px solid rgba(0,0,0,0.06);flex-shrink:0;}
.yh-filters-head-title{font-family:var(--dk-sans);font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--dk-ink);margin:0;}
.yh-filters-close{background:none;border:none;cursor:pointer;color:var(--dk-ink);padding:6px;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:background 0.15s;}
.yh-filters-close:hover{background:rgba(0,0,0,0.05);}
.yh-filters-scroll{flex:1;overflow-y:auto;padding:1.25rem 1.5rem 1.5rem;}
.yh-filters-scroll::-webkit-scrollbar{width:2px;}
.yh-filters-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:2px;}
.yh-filter-block{padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:1px solid rgba(0,0,0,0.06);}
.yh-filter-block:last-child{border-bottom:none;margin-bottom:0;}
.yh-filters-foot{padding:1rem 1.5rem 1.5rem;border-top:1px solid rgba(0,0,0,0.06);flex-shrink:0;}
.yh-filters-apply{width:100%;background:var(--dk-ink);color:#fff;border:none;font-family:var(--dk-sans);font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:0.95rem 1rem;border-radius:2px;cursor:pointer;transition:all 0.18s;}
.yh-filters-apply:hover{background:#1f2937;}
.yh-filter-title{font-family:var(--dk-sans);font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--dk-ink);margin:0 0 0.85rem;}
.yh-filter-list{display:flex;flex-direction:column;gap:0.1rem;}
.yh-filter-item{display:flex;align-items:center;gap:0.6rem;width:100%;background:none;border:none;padding:0.55rem 0.6rem;border-radius:2px;cursor:pointer;font-family:var(--dk-sans);font-size:13px;color:#5a5550;text-align:left;transition:all 0.15s ease;line-height:1.2;}
.yh-filter-item svg{width:15px;height:15px;flex-shrink:0;opacity:0.6;display:block;}
.yh-filter-name{flex:1;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.yh-filter-count{font-size:11px;color:var(--dk-paper-dim);font-weight:500;letter-spacing:0;flex-shrink:0;}
.yh-filter-item:hover{background:rgba(0,0,0,0.03);color:var(--dk-ink);}
.yh-filter-item.active{background:var(--dk-accent-tint);color:var(--dk-ink);font-weight:500;}
.yh-filter-item.active .yh-filter-count{color:var(--dk-accent);font-weight:600;}
.yh-filter-sublabel{font-family:var(--dk-sans);font-size:11px;font-weight:500;color:var(--dk-paper-dim);margin-bottom:0.55rem;letter-spacing:0.05em;}
.yh-filter-checkbox{display:flex;align-items:center;gap:0.6rem;padding:0.4rem 0;cursor:pointer;font-family:var(--dk-sans);font-size:13px;color:#5a5550;}
.yh-filter-checkbox input{accent-color:var(--dk-ink);width:16px;height:16px;cursor:pointer;flex-shrink:0;}
.yh-filter-checkbox span{line-height:1;}
.yh-filter-swatches{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:0.4rem;}
.yh-filter-swatch{width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;padding:0;transition:all 0.15s ease;outline:1px solid rgba(0,0,0,0.08);outline-offset:1px;}
.yh-filter-swatch:hover{outline-color:var(--dk-ink);outline-width:2px;}
.yh-filter-swatch.active{outline-color:var(--dk-accent);outline-width:2px;}

/* ── Sort: button + dropdown ── */
.yh-sort-wrap{position:relative;}
.yh-sort-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:2px;box-shadow:0 8px 24px rgba(0,0,0,0.1);padding:0.3rem;z-index:200;display:none;flex-direction:column;gap:1px;}
.yh-sort-wrap.yh-sort-open .yh-sort-menu{display:flex;}
.yh-sort-option{display:block;width:100%;text-align:left;background:none;border:none;font-family:var(--dk-sans);font-size:11px;font-weight:500;letter-spacing:0.04em;color:#5a5550;padding:0.55rem 0.7rem;border-radius:2px;cursor:pointer;transition:background 0.12s;white-space:nowrap;}
.yh-sort-option:hover{background:rgba(0,0,0,0.04);color:var(--dk-ink);}
.yh-sort-option.active{background:rgba(var(--dk-accent-rgb),0.1);color:var(--dk-ink);font-weight:600;}