/* Shared fabric catalog UI — filter bar, swatch grid, notes. Used by the
   configurator Fabric step and the standalone /fabric/ library page. */
:root{
  --bg:#f4eee1;
  --bg-2:#efe7d6;
  --surface:#ffffff;
  --surface-2:#fbf8f1;
  --ink:#26342a;
  --ink-soft:#3c4c40;
  --muted:#66756a;  /* was #7c8a7d — darkened to reach WCAG AA (4.5:1) on white for small text */
  --line:#e7dfce;
  --line-2:#efe9db;
  --green:#5d8a2f;
  --green-2:#4c7424;
  --green-ink:#ffffff;
  --green-soft:#eef4e2;
  --green-soft-2:#e3eed2;
  --shadow:0 22px 48px -28px rgba(40,55,35,.45);
  --shadow-sm:0 10px 24px -16px rgba(40,55,35,.35);
  --radius:18px;
  --radius-sm:12px;
}

.fabric-bar{
  /* Stay below the sticky site header (z-index 40) so the open hamburger menu
     never sits under the fabric filter bar. */
  position:sticky;top:0;z-index:25;
  margin:0 0 12px;padding:0;
}
/* Sticky Filters + Search row — one line at every width. Category chips live
   in the Filters sheet (desktop and mobile), so the bar never wraps. */
.fabric-bar-inner,
.fabric-bar:not(:has(.fabric-bar-inner)){
  display:flex;flex-wrap:nowrap;align-items:center;gap:6px;
  padding:4px 5px;
  background:var(--surface,#fff);
  border:1.5px solid rgba(93,138,47,.42);
  border-radius:10px;
  box-shadow:0 8px 22px -16px rgba(40,55,35,.35);
}
/* Inline category chips are unused in the bar (sheet-only). Keep the class
   so library pages with old markup don't break until refreshed. */
.fabric-bar-dds{display:none}
.chip{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;font-size:13px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft)}
.chip:hover{border-color:#bcd29a;color:var(--green-2)}
.chip.active{background:var(--green);color:#fff;border-color:var(--green)}
.search{
  display:flex;align-items:center;gap:6px;
  flex:1 1 auto;min-width:0;margin-left:0;
  padding:5px 10px;border-radius:999px;background:#fff;
  border:1.5px solid rgba(93,138,47,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  color:var(--muted);
}
.search:focus-within{border-color:var(--green,#5d8a2f);box-shadow:0 0 0 3px rgba(93,138,47,.18)}
.search input{background:none;border:none;outline:none;color:var(--ink);font-size:13.5px;font-weight:600;width:100%;min-width:0}
.search input::placeholder{color:var(--muted);font-weight:500}

.fab-filter-btn{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:700;
  cursor:pointer;background:var(--green-soft,#eef4e2);border:1.5px solid rgba(93,138,47,.35);
  color:var(--green-2,#4c7424);white-space:nowrap;
}
.fab-filter-btn i{
  font-style:normal;font-weight:800;font-size:11px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--green);color:#fff;
}
.fab-filter-btn.on{background:var(--green);color:#fff;border-color:var(--green)}
.fab-filter-btn.on i{background:rgba(255,255,255,.28)}

.fdd{position:relative}
.fdd-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;font-size:12.5px;font-weight:700;
  cursor:pointer;background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink-soft);white-space:nowrap}
.fdd-btn:hover{border-color:#bcd29a;color:var(--green-2)}
.fdd.applied>.fdd-btn{background:var(--green);color:#fff;border-color:var(--green)}
.fdd-btn i{font-style:normal;font-weight:800;font-size:11px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.28);color:#fff}
.fdd-caret{font-size:9px;opacity:.7;margin-left:1px}
.fdd.open .fdd-caret{transform:rotate(180deg)}
.fdd-menu{position:absolute;z-index:50;top:calc(100% + 6px);left:0;min-width:190px;max-height:300px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm,0 14px 30px -18px rgba(0,0,0,.34));
  padding:6px;display:none}
.fdd.open .fdd-menu{display:block}
.fdd-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:none;background:none;cursor:pointer;
  border-radius:8px;font-size:13px;color:var(--ink);text-align:left}
.fdd-item:hover{background:var(--surface-2)}
.fdd-box{flex:none;width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);background:#fff;position:relative;transition:.12s}
.fdd-item.on .fdd-box{background:var(--green);border-color:var(--green)}
.fdd-item.on .fdd-box::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900}
.fdd-name{flex:1;font-weight:600}
.fdd-ct{flex:none;font-size:11px;color:var(--muted);font-weight:600}
.fdd-clear{align-self:center;border:none;background:none;cursor:pointer;color:var(--green-2);font-size:12px;font-weight:700;
  padding:7px 4px;text-decoration:underline;text-underline-offset:2px;flex:0 0 auto;white-space:nowrap}
.fdd-clear:hover{color:var(--green)}
.fdd-clear:disabled{opacity:.4;cursor:not-allowed;text-decoration:none}

@media (max-width:767px){
  /* top matches step-body padding-top so the stuck bar sits flush under the summary */
  .fabric-bar{margin:0 0 8px;top:-8px}
  .fabric-bar-inner,
  .fabric-bar:not(:has(.fabric-bar-inner)){
    gap:5px;padding:3px 4px;
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
  .fab-filter-btn{padding:4px 9px;font-size:12.5px}
  .search{padding:4px 9px}
  .search input{font-size:13px}
}

/* Mobile filter bottom-sheet (portaled onto .cushion-designer-app). */
.fab-fsheet{
  position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;visibility:hidden;
}
.fab-fsheet.open{pointer-events:auto;visibility:visible}
.fab-fsheet[hidden]{display:none!important}
.fab-fsheet-back{
  position:absolute;inset:0;background:rgba(28,36,28,.48);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .2s ease;
}
.fab-fsheet.open .fab-fsheet-back{opacity:1}
.fab-fsheet-panel{
  position:relative;z-index:1;width:100%;max-width:520px;max-height:min(82vh,640px);
  display:flex;flex-direction:column;
  background:var(--surface,#fff);border-radius:18px 18px 0 0;
  box-shadow:0 -16px 40px -18px rgba(0,0,0,.35);
  transform:translateY(108%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  padding-bottom:max(10px, env(safe-area-inset-bottom));
}
.fab-fsheet.open .fab-fsheet-panel{transform:translateY(0)}
@media (min-width:768px){
  .fab-fsheet{align-items:center;padding:24px}
  .fab-fsheet-panel{
    border-radius:16px;max-height:min(78vh,580px);
    transform:translateY(12px) scale(.98);opacity:0;
    transition:transform .2s ease,opacity .2s ease;
    padding-bottom:0;
  }
  .fab-fsheet.open .fab-fsheet-panel{transform:none;opacity:1}
}
.fab-fsheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 16px 10px;border-bottom:1px solid var(--line-2,#efe9db);
}
.fab-fsheet-head h3{margin:0;font-size:18px;font-weight:800;color:var(--ink)}
.fab-fsheet-x{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);
  font-size:22px;line-height:1;color:var(--muted);cursor:pointer;
}
.fab-fsheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 12px 12px}
.fab-fsheet-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-top:1px solid var(--line-2,#efe9db);background:var(--surface-2,#fbf8f1);
}
.fab-fsheet-done{
  min-width:120px;justify-content:center;padding:12px 18px;
  background:linear-gradient(180deg,var(--green),var(--green-2));color:#fff;border:none;
  box-shadow:0 8px 18px -10px rgba(76,116,36,.85);
}
.fab-fsheet-done:hover{filter:brightness(1.04)}
.fab-facc{border:1px solid var(--line);border-radius:12px;margin:8px 0;background:#fff;overflow:hidden}
.fab-facc.applied{border-color:#bcd29a}
.fab-facc-sum{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:13px 14px;font-size:15px;font-weight:700;color:var(--ink);
}
.fab-facc-sum::-webkit-details-marker{display:none}
.fab-facc-sum i{
  font-style:normal;font-weight:800;font-size:11px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--green);color:#fff;margin-left:2px;
}
.fab-facc-sum .fdd-caret{margin-left:auto;transition:transform .15s ease}
.fab-facc[open] .fab-facc-sum .fdd-caret{transform:rotate(180deg)}
.fab-facc-items{padding:0 8px 10px;max-height:220px;overflow:auto}
html.fab-fsheet-lock,html.fab-fsheet-lock body{overflow:hidden}

.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:14px}
/* Desktop: larger tiles → ~4 columns next to the wider preview rail (matches
   the CPros fabric step). Phone keeps the denser 108px 2–3-up above. */
@media (min-width:768px){
  .swatches{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
}
/* Keep at least one swatch row of height while search results swap in and out,
   so the content below the grid doesn't leap up when a query narrows to a few hits. */
#fabGrid{min-height:172px}
.swatch{text-align:center;cursor:pointer}
.swatch .sw{
  height:92px;border-radius:14px;border:2px solid rgba(0,0,0,.06);position:relative;transition:.16s;
  background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
  overflow:hidden;
}
.sw .sw-img{
  position:absolute;top:50%;left:50%;width:100%;aspect-ratio:1;
  background-size:cover;background-position:center;transform-origin:center;
}
.swatch:hover .sw{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.swatch.sel .sw{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(93,138,47,.34), inset 0 0 0 2px rgba(255,255,255,.45);
}
.swatch.sel .sw::after{display:none}
.swatch-sel-badge{
  position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:2;
  padding:4px 10px;border-radius:999px;background:var(--green);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(0,0,0,.18);pointer-events:none;
}
.swatch .lbl{font-size:12px;margin-top:7px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swatch.sel .lbl{color:var(--green-2);font-weight:800}
.swatch .px{font-size:11px;color:var(--muted)}
.sw-pick{position:absolute;top:7px;right:7px;width:30px;height:30px;border-radius:50%;
  border:2px solid var(--green,#5d8a2f);background:rgba(255,255,255,.93);color:var(--green,#5d8a2f);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.38);
  z-index:3;
  transition:transform .12s ease,background .12s ease,opacity .12s ease,color .12s ease,border-color .12s ease}
.sw-pick-mark{
  width:18px;height:18px;border-radius:50%;border:1.5px solid var(--green,#5d8a2f);
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.95);
}
.sw-pick svg{display:block;stroke:var(--green,#5d8a2f)}
.sw-pick:hover,.sw-pick:focus-visible{
  transform:scale(1.08);
  background:rgba(255,255,255,.98);
  box-shadow:0 0 0 1px rgba(255,255,255,.95), 0 3px 10px rgba(0,0,0,.42);
}
.swatch.sel .sw-pick{display:none}
@media (hover:hover){
  .sw-pick{opacity:0}
  .swatch:hover .sw-pick,.sw-pick:focus-visible{opacity:1}
  .swatch.sel .sw-pick{display:none;opacity:0}
}

.fab-note{grid-column:1/-1;padding:34px 12px;text-align:center;color:var(--muted);font-size:14px}
.fab-searching{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 12px;color:var(--muted);font-size:13px;font-weight:600}
.fab-spin{width:15px;height:15px;flex:0 0 auto;border-radius:50%;border:2px solid var(--line);border-top-color:var(--green-2,#6a8a3f);animation:fab-spin .7s linear infinite}
@keyframes fab-spin{to{transform:rotate(360deg)}}
.fab-more{display:flex;justify-content:center;margin-top:18px}
.fab-count{color:var(--muted);font-size:12px}
.fab-more .btn{min-width:200px}

.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;border-radius:12px;padding:13px 22px;transition:.16s}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink-soft)}
.btn.ghost:hover{border-color:#bcd29a;color:var(--green-2)}
.btn.ghost:disabled{opacity:.4;cursor:not-allowed}