/* ==========================================================================
   CRS Inventory UI — style.css (SUPER CLEAN MERGE)
   - Duplicates merged (notably :root, body, .action-bar, .card, .btn-gold, etc.)
   - Final cascade/visual result preserved (last-wins behavior kept in merged values)
   - Nothing removed; rules consolidated + syntax cleaned (incl. missing semicolon)
   ========================================================================== */


/* =========================================================
   1) TOKENS / ROOT
   ========================================================= */
:root{
  --bs-font-sans-serif: var(--font-ui);
  --bs-body-font-family: var(--font-ui);

  /* Theme — mapped to design-system tokens so the Hub palette/accent drives
     these (set the tenant's accent in Hub → Appearance to control the gold).
     Fallbacks preserve the original look if a token is ever missing. */
  --gold: var(--color-accent, #c9a227);
  --ink: var(--color-text-primary, #0b1220);
  --muted: var(--color-text-tertiary, #6c757d);
  --terra:#d97706;      /* warm orange */
  --cream:#fff8e8;

  /* Display font */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Layout */
  --card-radius:16px;   /* used by some older blocks; card now uses 18px below */
  --sticky-h:56px;      /* JS will update this dynamically */

  /* Shadows */
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow-soft:0 6px 18px rgba(0,0,0,.06);
  --shadow-hover:0 12px 28px rgba(0,0,0,.1);

  /* Inventory overlays */
  --overlay-top: 56px;
  --overlay-gap: 10px;
}


/* =========================================================
   2) GLOBAL RESETS / BASE
   ========================================================= */
*{ box-sizing:border-box; }

html{
  font-size:16px; /* keep bootstrap baseline */
  font-family:var(--font-ui);
  font-weight:300;
  letter-spacing:0;
}

body{
  background: var(--color-bg, #f7f4f0);
  color: var(--color-text-primary, #111827);
  font-family:var(--font-ui);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ text-decoration:none; }


/* Subtle grain texture */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  opacity:.08;
  mix-blend-mode:multiply;
}


/* =========================================================
   3) TYPOGRAPHY / READABILITY HELPERS
   ========================================================= */
.small, small{
  font-size:0.95rem !important;
  line-height:1.35;
}

.text-muted,
.text-muted-2,
.form-text{
  color:var(--color-text-tertiary) !important;
}

label.form-label{
  font-weight:600;
  color:var(--color-text-primary);
}

h4, h5, h6{ letter-spacing:-.025em; }
h4{ font-weight:900; font-size:1.35rem; color:var(--color-text-primary); }
h5{ font-weight:800; font-size:1.15rem; }
h6{ font-weight:700; }


/* =========================================================
   4) UTILITIES
   ========================================================= */
.caps{ text-transform:capitalize; }
.text-ink{ color:var(--ink); }
.text-muted-2{ color:#6b7280; }
.hidden{ display:none !important; }

.rounded-xl{ border-radius:18px; }
.rounded-2xl{ border-radius:22px; }


/* =========================================================
   5) GLOBAL UI (progress, action bar, brand, toggles, chips)
   ========================================================= */

/* Progress bar (scroll) */
.scroll-progress{
  position:fixed; top:0; left:0;
  height:3px; width:0%;
  background:linear-gradient(90deg, #f5e6a2, var(--gold));
  z-index:2000;
  transition:width .1s linear;
  box-shadow:0 0 6px var(--color-accent-60);
}

/* Sticky action bar */
.action-bar{
  position:sticky; top:0; z-index:1050;
  background:var(--color-surface-raised);
  border-bottom:var(--border-hairline);
  box-shadow:0 1px 0 rgba(17,24,39,.04), 0 4px 20px rgba(0,0,0,.05);
}

.action-bar::after{
  content:"";
  display:block;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--color-accent-70), transparent);
  opacity:.6;
}

.action-bar .container-fluid{
  margin:0;
  padding:14px 24px !important;
  border:none;
  background:transparent;
  border-radius:0;
}

/* Brand row helpers */
.brand-mark{
  display:flex; align-items:center; gap:.65rem;
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:-.025em;
  color:var(--ink);
}
.brand-icon{
  width:34px; height:34px; border-radius:10px;
  background:var(--color-accent);
  display:inline-flex; align-items:center; justify-content:center;
  color:#1a0f00; font-size:1rem;
  box-shadow:0 4px 12px var(--color-accent-35);
  flex-shrink:0;
}
.brand-logo{
  width:32px; height:32px; border-radius:8px; background:var(--gold);
  display:inline-flex; align-items:center; justify-content:center;
  color:#111; font-weight:900;
  box-shadow:0 6px 18px var(--color-accent-20);
}
.brand-logo-img{
  width:36px; height:36px; object-fit:contain; border-radius:8px;
  box-shadow:0 6px 18px var(--color-accent-20);
}
.tile-title{ letter-spacing:-.01em; }
.tile-title i,
.brand-mark i{ color:var(--color-accent-95); }

/* Ghost toggles (Filters / Stone Match) */
.ghost-toggle{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  width:100%;
  background:var(--color-surface-raised); color:var(--color-text-primary);
  border:var(--border-standard);
  border-radius:var(--radius-md);
  height:44px;
  padding:0 var(--space-4);
  font-family:var(--font-ui);
  font-weight:500; font-size:var(--text-ui-md); line-height:1;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ghost-toggle:hover{
  background:var(--color-surface);
  border-color:var(--color-border-strong);
  box-shadow:0 2px 10px rgba(0,0,0,.07);
}
.ghost-toggle:focus{ outline:none; box-shadow:0 0 0 3px var(--color-accent-15); }
.ghost-toggle .chev{ font-size:.9rem; color:var(--color-text-tertiary); transition:transform .2s ease; margin-left:auto; }
.ghost-toggle[aria-expanded="true"]{
  background:var(--color-surface);
  border-color:var(--color-accent-55);
  box-shadow:0 0 0 3px var(--color-accent-10);
}
.ghost-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.ghost-toggle .badge{
  background:var(--color-text-primary); color:var(--color-surface); border-radius:var(--radius-full);
  padding:.2rem .48rem; font-size:.71rem; font-weight:800;
}
.ghost-toggle .thumb{ width:20px; height:20px; border-radius:5px; object-fit:cover; display:none; }
.ghost-toggle.has-thumb .thumb{ display:inline-block; }

/* Search pill */
.search-wrap{ position:relative; width:100%; max-width:560px; }
.search-wrap .icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#9aa1ac; font-size:1rem; pointer-events:none;
}
.search-wrap .clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:#9aa1ac; padding:.25rem;
  display:none; line-height:1; border-radius:6px;
}
.search-wrap .clear:hover{ color:#6b7280; background:#eef0f3; }

/* Legacy search id */
#q{
  border-radius:var(--radius-md);
  padding:.6rem 2.4rem .6rem 2.2rem;
  border:1px solid #e5e7eb;
  background:#f6f7f9;
  outline:none; box-shadow:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
#q:focus{
  background:#fff;
  border-color:#d1d5db;
  box-shadow:0 0 0 .18rem rgba(17,24,39,.06);
}
#q::placeholder{ color:#9aa1ac; }

/* New search ids (final) */
#qName, #qNLQ{
  border-radius:var(--radius-md);
  height:44px;
  padding:0 2.6rem 0 2.35rem;
  border:var(--border-standard);
  background:var(--color-surface-raised);
  outline:none; box-shadow:none;
  font-family:var(--font-ui);
  font-size:var(--text-ui-lg);
  transition:border-color .15s, box-shadow .15s, background .15s, transform .15s;
}
#qName:focus, #qNLQ:focus{
  border-color:var(--color-accent-95);
  box-shadow:0 0 0 .22rem var(--color-accent-20);
  transform:translateY(-1px);
}

/* Search input gold border override */
.search-wrap input.form-control{
  padding-left:2.4rem !important;
  padding-right:2.4rem !important;
  border:1px solid var(--gold) !important;
  background:var(--color-surface-raised);
}
.search-wrap input.form-control:focus{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 .2rem var(--color-accent-15) !important;
}

/* Hide native clear x */
.search-wrap input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.search-wrap input[type="search"]::-ms-clear,
.search-wrap input[type="search"]::-ms-reveal{ display:none; width:0; height:0; }

/* Loading indicator */
.search-wrap.loading .icon{ color:#6b7280; }
.search-wrap.loading .icon::after{
  content:"";
  margin-left:.45rem;
  display:inline-block;
  width:.9rem; height:.9rem;
  border:2px solid #cbd5e1;
  border-top-color:#6b7280;
  border-radius:50%;
  animation:spin .9s linear infinite;
  vertical-align:-2px;
}
@keyframes spin{
  to{ transform:translateY(-50%) rotate(360deg); }
}

/* Toolbar buttons */
.toolbar .btn,
.toolbar .form-select{ height:38px; }

.btn-ghost{ background:var(--color-surface-raised); border:var(--border-standard); color:var(--color-text-primary); }
.btn-ghost:hover{ background:var(--color-surface); }

/* Chips */
.chip{
  background:var(--color-surface-raised);
  border:var(--border-standard);
  padding:.375rem .5rem;
  border-radius:var(--radius-full);
  font-size:.875rem;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
}
.chip .x{
  font-size:1.25rem;
  cursor:pointer;
  line-height:1;
  display:inline-block;
  margin-left:.25rem;
}
.chip-clear{
  background:var(--color-surface-raised);
  border:1px dashed var(--color-text-tertiary);
}
.chip-clear i{ margin-right:.25rem; }

.chip-cta{
  background:var(--gold);
  color:#fff;
  border:1px solid var(--gold);
  font-weight:700;
  padding:.45rem .7rem;
}
.chip-cta:hover{ filter:brightness(.95); color:#fff; }

/* Pills */
.pill{
  appearance:none;
  border:var(--border-standard);
  background:var(--color-surface-raised);
  color:var(--color-text-primary);
  padding:.32rem .7rem;
  border-radius:var(--radius-full);
  font-family:var(--font-ui);
  font-size:var(--text-ui-sm);
  font-weight:500;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.pill:hover{ border-color:var(--color-accent-55); background:var(--color-accent-10); color:var(--color-text-primary); }
.pill:focus{ outline:none; box-shadow:0 0 0 .2rem var(--color-accent-20); }
.pill.active{
  background:var(--color-accent);
  color:#161616;
  border-color:var(--color-accent-55);
  box-shadow:0 6px 18px var(--color-accent-25);
  font-weight:700;
}


/* =========================================================
   6) BUTTONS (final merged)
   ========================================================= */
.btn-gold{
  background:var(--color-accent);
  color:#161616;
  font-weight:900;
  border:1px solid var(--color-accent-55);
  border-radius:999px;
  box-shadow:0 12px 26px var(--color-accent-20), 0 0 0 3px var(--color-accent-10);
}
.btn-gold:hover{
  filter:saturate(1.05) brightness(1.02);
  color:#161616;
}

.btn-outline-secondary{
  border-radius:var(--radius-md);
  border-color:var(--color-border);
}
.btn-outline-secondary:hover{ background:var(--color-surface-raised); }


/* =========================================================
   7) CARDS / GRID / SKELETONS / VIEW MODES
   ========================================================= */
.card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  content-visibility:auto;
  contain-intrinsic-size:300px 440px;
  background:#fff;
  border:1px solid rgba(17,24,39,.07);
  box-shadow:0 2px 8px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.04);
  border-color:var(--color-accent-25);
}

.card::before{
  display:none;
}

.card-img-top{
  height:260px;
  object-fit:cover;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  transition:transform .3s ease;
  filter:saturate(1.04) contrast(1.02);
}
.card:hover .card-img-top{ transform:scale(1.03); }

.badge-soft{
  background:#fff7db;
  color:#8a6a00;
  border:1px solid #f0e1a5;
  font-weight:600;
}

.overlay-tools{
  position:absolute; top:10px; right:10px;
  display:flex; gap:.4rem;
  z-index:2;
}

/* bigger buttons */
.tool-btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  line-height: 1;

  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.tool-btn:hover{
  background: #fff;
}

.tool-btn:active{
  transform: translateY(1px);
}

/* GOLD star when compare is active */
.tool-btn.btn-cmp.active{
  border-color: rgba(255,193,7,.75);
}

/* make the STAR ICON gold when active */
.tool-btn.btn-cmp.active i{
  color: #ffc107; /* Bootstrap warning/gold */
}

/* optional: keep it gold on hover/focus too */
.tool-btn.btn-cmp.active:hover i,
.tool-btn.btn-cmp.active:focus i{
  color: #ffc107;
}

.tool-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* Skeletons */
.skeleton{
  border-radius:12px;
  background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size:400% 100%;
  animation:skeleton 1.2s ease-in-out infinite;
}
@keyframes skeleton{
  0%{ background-position:100% 50%; }
  100%{ background-position:0 50%; }
}

/* Grid helper */
@media (min-width:992px){
  .col-lg-4-3{ flex:0 0 auto; width:33.333333%; }
}

/* View modes */
.list-mode .card{ display:flex; flex-direction:row; }
.list-mode .card-img-top{
  width:280px; height:100%; max-height:180px;
  border-radius:12px 0 0 12px;
}
.list-mode .card-body{ display:flex; flex-direction:column; justify-content:center; }

.compact .card .card-img-top{ height:200px; }
.compact.list-mode .card-img-top{ width:220px; max-height:160px; }

.list-mode .card{ contain-intrinsic-size:220px 220px; }

/* --- LIST VIEW MOBILE LAYOUT --- */
@media (max-width:576px){
  .list-mode .card{ flex-direction:column; }
  .list-mode .card-img-top{
    width:100%; height:180px; max-height:none;
    border-radius:12px 12px 0 0;
  }
  .list-mode .card-body{ padding-top:.75rem; }
  .list-mode .card .d-flex.align-items-start{
    flex-direction:column; align-items:stretch; gap:.5rem;
  }
}

/* Density mode (compact) */
body.compact .row.g-3{ --bs-gutter-x:.5rem; --bs-gutter-y:.75rem; }
body.compact .card{ box-shadow:0 10px 28px rgba(0,0,0,.06); }
body.compact .card-body{ padding:.55rem .7rem; }
body.compact .card-footer{ padding:.55rem .7rem; }
body.compact .card-title{ font-size:.92rem; margin-bottom:.15rem !important; }
body.compact .small,
body.compact .card .small{ font-size:.74rem; }
body.compact .badge{ transform:scale(.9); transform-origin:left; }
body.compact .card .card-img-top{ height:160px; }
body.compact.list-mode .card-img-top{ width:180px; max-height:140px; }
body.compact .chip{ padding:.15rem .4rem; font-size:.76rem; }
body.compact .tool-btn{ width:30px; height:30px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .card, .card:hover, .card .card-img-top{ transition:none !important; transform:none !important; }
  .collapse, .collapsing{ transition:none !important; }
}


/* =========================================================
   8) INVENTORY: FILTERS / OVERLAYS / MATCH / COMPARE / RV / FAB
   ========================================================= */
.fly-card{ border:0 !important; border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,.08) !important; background:#fff !important; }

.facet-grid{ display:grid; gap:.25rem .75rem; }
@media (min-width:576px){ .facet-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:992px){ .facet-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

.filter-tile{
  border:var(--border-hairline);
  border-radius:var(--radius-xl);
  background:var(--color-surface-raised);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  padding:1.1rem 1.1rem;
}
.filter-tile .tile-title{
  font-weight:700; font-size:.95rem; color:var(--color-text-primary);
  display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem;
}
.filter-tile .tile-title i{ color:var(--color-accent-95); }

/* Dimensions inputs */
.input-with-unit{ display:flex; align-items:center; gap:.5rem; }
.input-with-unit .unit{ color:#6b7280; font-size:.85rem; white-space:nowrap; }

/* Drag/drop */
.dropzone{
  border:2px dashed #e0e2e8; border-radius:14px; background:#f9fafb;
  padding:28px 16px; text-align:center; cursor:pointer;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.dropzone:hover, .dropzone.drag{
  border-color:var(--color-accent);
  background:var(--color-accent-10);
  box-shadow:0 0 0 4px var(--color-accent-10);
}
.dz-label{
  display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
}
.dz-icon{
  font-size:2rem; color:var(--color-accent);
  transition:transform .2s;
}
.dropzone:hover .dz-icon, .dropzone.drag .dz-icon{ transform:translateY(-4px); }
.dz-primary{ font-weight:600; font-size:.9rem; color:#1f2937; }
.dz-browse{ color:var(--color-accent); text-decoration:underline; text-underline-offset:2px; }
.dz-hint{ font-size:.76rem; color:#9ca3af; }

/* Compare drawer */
.compare-drawer{
  position:fixed; right:16px; bottom:16px; z-index:1045;
  width:min(420px, 92vw);
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  overflow:hidden;
  display:none;
}
.compare-drawer.show{ display:block; }
.compare-list{ max-height:300px; overflow:auto; }
.compare-item{
  display:flex; gap:.6rem; padding:.6rem .8rem;
  border-bottom:1px dashed #eee;
  align-items:center;
}
.compare-thumb{ width:56px; height:44px; object-fit:cover; border-radius:8px; background:#f4f5f7; }

/* FABs */
.fab{
  position:fixed; bottom:20px; right:20px; z-index:1030;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border:1px solid #e7e7e9;
  color:#111;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.fab:hover{ background:#fafafa; }
.back-to-top{ right:80px; }

/* Universal Collection Button */
.cmp-fab{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:1060;

  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:12px 14px;
  border-radius:999px;

  background:#111;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 34px rgba(0,0,0,.22);

  font-weight:900;
}

.cmp-fab .badge{
  background: var(--gold);
  color:#111;
  border-radius:999px;
  padding:.25rem .5rem;
  font-weight:900;
}

@media (max-width:576px){
  .cmp-fab{
    padding:10px 12px;
    gap:8px;
    right:12px;
    bottom:12px;
  }
  .cmp-fab .label{ display:none; } /* compact on mobile */
}


/* Toasts container */
#toastWrap{ position:fixed; bottom:20px; left:20px; z-index:3000; }

/* Recently Viewed rail */
.h-scroll{
  display:flex; gap:12px; overflow:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.rv-card{
  min-width:220px; scroll-snap-align:start;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease, box-shadow .15s ease;
}
.rv-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.rv-img{ width:100%; height:120px; object-fit:cover; border-radius:12px 12px 0 0; }
.rv-body{ padding:.5rem .6rem; }
.rv-title{ font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* RV panel look */
.rv-toggle{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  min-height:46px; padding:.55rem .9rem;
  border-radius:14px;
  border:1.5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg, var(--color-accent-25), var(--color-accent-10)) border-box;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  backdrop-filter:saturate(1.1) blur(4px);
  transition:transform .15s ease, box-shadow .15s ease;
}
.rv-toggle:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.10); }
.rv-toggle-left{ display:flex; align-items:center; gap:.55rem; min-width:0; color:var(--ink); }
.rv-toggle i.bi-clock-history{ color:#8b8f97; }
.rv-toggle-kicker{ font-weight:700; font-size:.9rem; letter-spacing:.15px; color:#111827; }
.rv-toggle-title{ font-weight:800; letter-spacing:.2px; }
.rv-count{ margin-left:.25rem; font-size:.85rem; color:#6b7280; }
.rv-arrow{ font-size:1.05rem; color:#6b7280; transition:transform .18s ease, opacity .18s ease; }
.rv-toggle[aria-expanded="true"] .rv-arrow{ transform:rotate(180deg); opacity:.6; }

.rv-panel{
  position:relative;
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow);
  border:1px solid #eceef2;
  padding:.9rem .9rem 3rem .9rem;
}
.rv-header h6{ font-weight:800; letter-spacing:.2px; }
.rv-header .badge{ font-weight:600; }

.rv-bottom-toggle{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:.6rem; width:42px; height:42px; border-radius:999px;
  border:1px solid #eceef2; background:#fff; color:#111;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, box-shadow .12s ease;
}
.rv-bottom-toggle:hover{
  transform:translateX(-50%) translateY(-1px);
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}
@media (max-width:576px){
  .rv-toggle-title{ display:inline; }
  .rv-panel{ padding-left:.65rem; padding-right:.65rem; }
  #recentRail.h-scroll{ gap:14px; padding-bottom:8px; }
  .rv-card{ border:1px solid #eceef2; }
}

/* Inventory shell + gutters */
.inv-shell{
  max-width:1440px;
  margin-left:auto; margin-right:auto;
  padding-left:50px; padding-right:50px;
}
@media (max-width:576px){
  .inv-shell{ padding-left:12px; padding-right:12px; }
}

/* Page gutters (utility) */
.page-gutter{
  padding-left:clamp(12px, 4vw, 48px);
  padding-right:clamp(12px, 4vw, 48px);
}
@media (max-width:575px){
  .page-gutter{ padding-left:12px; padding-right:12px; }
}

/* Page header area */
.page-gutter > .d-flex.flex-column.flex-lg-row{
  padding: 28px 0 20px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 24px !important;
}

/* Desktop filters helper grid */
.lg-grid{ display:none; }
@media (min-width:992px){
  .lg-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:1rem;
  }
}

/* Overlay collapses */
.collapse-overlay{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  top:calc(var(--overlay-top) + var(--overlay-gap)) !important;
  max-height:calc(100vh - var(--overlay-top) - var(--overlay-gap)) !important;
  overflow:auto !important;
  z-index:1045 !important;
  background:var(--bs-body-bg, #fff);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  border-bottom-left-radius:.75rem;
  border-bottom-right-radius:.75rem;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.collapse-overlay > .container,
.collapse-overlay > .container-fluid{
  padding-top:.5rem;
  padding-bottom:.75rem;
}
.collapse-overlay .fly-card{
  max-height:calc(100vh - var(--overlay-top) - var(--overlay-gap));
  overflow:auto;
}

/* Optional body lock */
body.no-scroll{
  overflow:hidden;
  padding-right:var(--scrollbar-comp, 0px);
}

/* Scrim */
#filterScrim.filter-scrim{
  position:fixed !important;
  inset:0 !important;
  top:calc(var(--overlay-top) + var(--overlay-gap)) !important;
  background:rgba(0,0,0,.2);
  z-index:1040 !important;
  display:none;
}
#filterScrim.filter-scrim.show{ display:block; }

/* Filter topbar (legacy kill-switch) */
.filter-topbar{ display:none; }

/* Filters: mobile bottom bar */
@media (max-width:991.98px){
  #filtersCollapse .fly-card.card-body{ padding-bottom:72px; }
  .filter-bottombar{
    position:fixed;
    left:0; right:0; bottom:0;
    background:#fff;
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 -6px 12px rgba(0,0,0,.08);
    padding:.5rem .75rem;
    z-index:1065;
  }
}

/* Compare modal sizing */
#compareModal .modal-dialog{ width:80vw; max-width:80vw; }
@media (max-width:768px){
  #compareModal .modal-dialog{ width:96vw; max-width:96vw; }
}

@media (max-width:576px){
  #compareModal .modal-dialog{
    margin:0;
    position:fixed;
    left:0; right:0; bottom:0;
    width:100vw;
    max-width:100vw;
  }
  #compareModal .modal-content{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
  }
}



/* =========================================================
   9) QUICK VIEW (modal media + lots)
   ========================================================= */
.qv-media{ position:relative; }

.qv-lots-rail{ display:flex; gap:.5rem; overflow:auto; padding-top:.5rem; }
.qv-lot{
  min-width:120px;
  border:1px solid #eee;
  border-radius:8px;
  padding:.35rem;
  background:#fff;
  cursor:pointer;
}
.qv-lot.active{ outline:2px solid var(--gold); }
.qv-lot img{ width:100%; height:70px; object-fit:cover; border-radius:6px; }
.qv-lot .name{ font-weight:600; font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qv-lot .meta{ font-size:.75rem; color:#6b7280; }


/* Unified qv image style */
.qv-img{
  width:100%;
  max-height:460px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.qv-media:hover .qv-img{
  transform:scale(1.015);
  box-shadow:0 16px 40px rgba(0,0,0,.13);
}


/* =========================================================
   10) SITE HEADER + MOBILE OFFCANVAS NAV
   ========================================================= */
.navbar-toggler{ border:none; }
.navbar-toggler:focus{ box-shadow:none; }

.navbar .dropdown-menu{ border-radius:12px; padding:.5rem; }
.navbar .dropdown-item{
  font-family:var(--font-ui);
  font-weight:300;
  font-size:var(--text-ui-md);
}
.navbar .dropdown-item:hover{ background:#f2f2f2; }

/* Mobile offcanvas menu */
.offcanvas.text-bg-dark{ background-color:#232323 !important; }
.offcanvas .offcanvas-title{ display:none; }

.mobile-menu{ margin:0; padding:0; }
.mobile-menu > li{ border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-menu .mm-link,
.mobile-menu .mm-submenu a{ color:#aaaaaa; }
.mobile-menu .mm-link:hover,
.mobile-menu .mm-submenu a:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}

.mm-link{
  width:100%;
  text-align:left;
  display:flex; justify-content:space-between; align-items:center;
  gap:.5rem;
  padding:1rem 1.25rem;
  color:#e9ecef;
  background:transparent;
  border:0;
  text-decoration:none;
}
.mm-link:hover{ background:rgba(255,255,255,.05); color:#fff; }

.mm-toggle i{ transition:transform .2s ease; }
.mm-toggle[aria-expanded="true"] i{ transform:rotate(180deg); }

.mm-submenu{ display:none; list-style:none; margin:0; padding:0 .75rem 1rem 1.75rem; }
.mm-submenu.show{ display:block; }
.mm-submenu a{
  display:block; padding:.5rem 0;
  color:#cfd3da;
  text-decoration:none;
}
.mm-submenu a:hover{ color:#fff; }

/* Header sizing + layering */
.site-header .navbar{
  min-height:74px;
  padding-top:0 !important;
  padding-bottom:0 !important;
  position:relative;
  z-index:1080;
}
.site-header .dropdown-menu{ z-index:1085; }

/* Dark luxury nav */
.crs-nav{
  background: #0a0f1e !important;
  border-bottom: 1px solid var(--color-accent-20) !important;
}
.crs-nav .nav-link{
  font-weight:600;
  font-size:14px;
  color:rgba(255,255,255,.65) !important;
  transition: color .15s ease;
}
.crs-nav .nav-link:hover,
.crs-nav .nav-link:focus,
.crs-nav .nav-link.show{
  color: var(--gold) !important;
}
.crs-nav .dropdown-menu{
  background: #111827;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}
.crs-nav .dropdown-item{
  font-weight:500;
  font-size:14px;
  color:rgba(255,255,255,.65) !important;
  border-radius: 8px;
}
.crs-nav .dropdown-item:hover{
  background: rgba(255,255,255,.06) !important;
  color:#fff !important;
}
.crs-nav .navbar-toggler{
  border-color: rgba(255,255,255,.18);
}

.site-header .navbar-brand span{ font-weight:800; }
.navbar-brand{ padding:.25rem 0; }

/* Dark premium footer */
.crs-footer{
  background: #0a0f1e;
  border-top: 1px solid var(--color-accent-15);
  color: rgba(255,255,255,.5);
}
.crs-footer .text-muted{
  color:rgba(255,255,255,.45) !important;
}
.crs-footer .link-secondary{
  color:rgba(255,255,255,.5) !important;
  text-decoration:none;
  transition: color .15s ease;
}
.crs-footer .link-secondary:hover{
  color: var(--gold) !important;
}

.site-logo{ height:54px; width:auto; display:block; }
.site-logo.small{ width:40px; height:40px; }

/* ── AI ring animation on nav logo ───────────────────────────────── */
@property --logo-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.logo-ai-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  /* outer breathing glow */
  animation: logo-breathe 4s ease-in-out infinite;
}

/* spinning conic-gradient ring */
.logo-ai-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  background: conic-gradient(
    from var(--logo-angle),
    var(--color-accent) 0%,
    #8b5cf6 28%,
    #06b6d4 55%,
    #22d3ee 70%,
    var(--color-accent) 100%
  );
  animation: logo-spin 5s linear infinite;
}

/* dark fill that turns the ring into a border */
.logo-ai-wrap::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  background: #0a0f1e;
}

/* logo sits above both pseudo-elements */
.logo-ai-wrap .site-logo {
  position: relative;
  z-index: 1;
}

@keyframes logo-spin {
  to { --logo-angle: 1turn; }
}

@keyframes logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 6px var(--color-accent-45)) drop-shadow(0 0 14px rgba(139,92,246,.2)); }
  50%       { filter: drop-shadow(0 0 10px rgba(6,182,212,.55)) drop-shadow(0 0 22px rgba(139,92,246,.3)); }
}

@media (min-width:992px){
  #mainNav.offcanvas{
    display:none !important;
    visibility:hidden !important;
    transform:none !important;
  }
  .navbar .navbar-toggler{ display:none !important; }
  .site-header .navbar{ padding-top:1rem; padding-bottom:1rem; }
}

.offcanvas{ z-index:1100 !important; }
.offcanvas-backdrop{ z-index:1090 !important; }

.mobile-offcanvas.offcanvas-top{
  top:0 !important;
  height:100vh !important;
  max-height:100vh !important;
  border-top:0 !important;
}

.site-footer{ font-size:.95rem; }


/* =========================================================
   11) SPECIALS (inventory + product)
   ========================================================= */
.special-toggle{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  padding-left:.75rem;
  gap:.75rem;
  border:1px solid var(--color-accent-35);
  background:linear-gradient(180deg, var(--color-accent-15), rgba(0,0,0,0));
  color:var(--color-text-primary);
  border-radius:var(--radius-md);
  padding:.6rem .85rem;
  font-weight:700;
}
.special-toggle .special-toggle-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center; /* fixed missing semicolon */
  min-width:28px; height:22px;
  padding:0 .4rem;
  border-radius:999px;
  font-size:.8rem;
  border:1px solid var(--color-accent-45);
  background:var(--color-accent-20);
}
.special-toggle.is-on{
  border-color:var(--color-accent-95);
  background:linear-gradient(180deg, var(--color-accent-30), var(--color-accent-10));
  box-shadow:0 0 0 3px var(--color-accent-15), 0 10px 30px var(--color-accent-20);
}

.inv-card.is-special,
.inv-row.is-special{
  position:relative;
  border:2px solid var(--color-accent-95) !important;
  box-shadow:0 0 0 3px var(--color-accent-15), 0 18px 40px rgba(0,0,0,.10);
  transform:translateY(-1px);
}

/* Special glow animation (shared) */
@keyframes specialGlow{
  0%,100%{
    box-shadow:
      0 0 0 1px var(--color-accent-35),
      0 10px 28px var(--color-accent-25),
      0 0 18px var(--color-accent-30);
  }
  50%{
    box-shadow:
      0 0 0 1px var(--color-accent-55),
      0 12px 32px var(--color-accent-35),
      0 0 26px var(--color-accent-55);
  }
}

/* Special ribbon */
.special-ribbon{
  position:absolute;
  top:14px;
  left:-6px;
  padding:6px 14px 6px 12px;
  font-family:var(--font-ui);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#1a1a1a;
  background:var(--color-accent);
  border-radius:0 6px 6px 0;
  box-shadow:0 6px 16px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.15);
  z-index:5;
  display:inline-flex; align-items:center; gap:6px;
  pointer-events:none;
  overflow:hidden;
}
.special-ribbon::before{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0; height:0;
  border-top:6px solid #8f7217;
  border-left:6px solid transparent;
}
.special-ribbon::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.45) 45%, transparent 70%);
  transform:translateX(-120%);
  animation:ribbonShimmer 4.5s ease-in-out infinite;
}
@keyframes ribbonShimmer{
  0%,65%{ transform:translateX(-120%); }
  100%{ transform:translateX(120%); }
}
.special-ribbon .dot{
  width:8px; height:8px;
  background:#1a1a1a;
  border-radius:50%;
  box-shadow:0 0 0 rgba(0,0,0,0.5);
  animation:dotPulse 2s infinite;
}
@keyframes dotPulse{
  0%{ box-shadow:0 0 0 0 rgba(0,0,0,0.45); }
  70%{ box-shadow:0 0 0 6px rgba(0,0,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,0,0,0); }
}

/* Special glow on .card.is-special */
.card.is-special{
  position:relative;
  border-color:var(--color-accent-45);
  box-shadow:
    0 0 0 1px var(--color-accent-35),
    0 10px 28px var(--color-accent-25),
    0 0 18px var(--color-accent-35);
  animation:specialGlow 3.8s ease-in-out infinite;
  z-index:2;
}
.card.is-special:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px var(--color-accent-60),
    0 16px 38px var(--color-accent-45),
    0 0 32px var(--color-accent-60);
}

/* Quick view special badge */
.qv-special-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:.45rem .6rem;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:linear-gradient(135deg, var(--color-accent-20), var(--color-accent-10));
  border:1px solid var(--color-accent-55);
  color:#3b2f05;
  box-shadow:0 8px 22px var(--color-accent-20);
}
.qv-special-badge .dot{
  width:8px; height:8px; border-radius:999px;
  background:var(--color-accent);
  box-shadow:0 0 0 4px var(--color-accent-20);
}

/* Product page special pill */
.special-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:.45rem .65rem;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:linear-gradient(135deg, var(--color-accent-20), var(--color-accent-10));
  border:1px solid var(--color-accent-60);
  color:#3b2f05;
  box-shadow:0 10px 26px var(--color-accent-20);
  white-space:nowrap;
}
.special-pill .dot{
  width:8px; height:8px; border-radius:999px;
  background:var(--gold);
  box-shadow:0 0 0 4px var(--color-accent-20);
}
.special-pill.compact{
  padding:.28rem .5rem;
  font-size:.78rem;
  letter-spacing:.06em;
  box-shadow:0 8px 18px var(--color-accent-20);
}


/* =========================================================
   12) PRODUCT + QUICK VIEW: premium frame system
   ========================================================= */
.gallery,
.qv-media,
.modal-content{
  position:relative;
  border:1px solid rgba(17,24,39,.08);
  border-radius:18px;
  background:#fff;
}

.gallery::before,
.modal-content::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    0 0 0 1px var(--color-accent-20) inset,
    0 10px 30px rgba(0,0,0,.06);
}

@supports selector(:has(*)){
  .gallery:has(.special-ribbon),
  .gallery:has(.special-pill),
  .modal-content:has(.special-ribbon),
  .modal-content:has(.qv-special-badge),
  .qv-media:has(.special-ribbon){
    border-color:var(--color-accent-45) !important;
    box-shadow:
      0 0 0 1px var(--color-accent-35),
      0 10px 28px var(--color-accent-25),
      0 0 18px var(--color-accent-35);
    animation:specialGlow 3.8s ease-in-out infinite;
    z-index:2;
  }

  .gallery:has(.special-ribbon)::before,
  .gallery:has(.special-pill)::before,
  .modal-content:has(.special-ribbon)::before,
  .modal-content:has(.qv-special-badge)::before{
    box-shadow:
      0 0 0 1px var(--color-accent-35) inset,
      0 16px 44px var(--color-accent-15),
      0 12px 30px rgba(0,0,0,.10);
  }

  body:has(.special-pill) .gallery,
  body:has(.special-pill) .spec-card{
    border-color:var(--color-accent-45) !important;
    box-shadow:
      0 0 0 1px var(--color-accent-35),
      0 10px 28px var(--color-accent-25),
      0 0 18px var(--color-accent-35) !important;
    animation:specialGlow 3.8s ease-in-out infinite;
  }
  body:has(.special-pill) .gallery::before,
  body:has(.special-pill) .spec-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    box-shadow:
      0 0 0 1px var(--color-accent-35) inset,
      0 16px 44px var(--color-accent-15),
      0 12px 30px rgba(0,0,0,.10);
  }
}


/* =========================================================
   13) PRINT
   ========================================================= */
@media print{
  body *{ visibility:hidden !important; }
  #compareModal, #compareModal *{ visibility:visible !important; }
  #compareModal{ position:absolute; left:0; top:0; width:100% !important; }
  .modal-backdrop{ display:none !important; }
  #cmpTableWrap{ overflow:visible !important; }
  #compareModal .modal-dialog{ max-width:none !important; width:auto !important; }
}


/* =========================================================
   14) FLIP LOTS ON HOVER
   ========================================================= */
.flip-tile{
  position:relative;
  perspective:1200px;
  width:100%;
}

.flip-inner{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  transform-style:preserve-3d;
  transition:transform .45s ease;
  border-radius:12px;
  overflow:hidden;
}

.card:hover .flip-inner,
.card.is-flipped .flip-inner{
  transform:rotateY(180deg);
}

.flip-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
}

.flip-front img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.flip-back{
  transform:rotateY(180deg);
  background:#0f1114;
  color:#fff;
}

.lot-grid{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(var(--cols, 1), 1fr);
  grid-auto-rows:1fr;
  gap:1px;
  background:rgba(255,255,255,.08);
}

.lot-cell{
  position:relative;
  overflow:hidden;
  background:#111;
}

.lot-cell img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.92;
  display:block;
  transform:scale(1.02);
}

.lot-meta{
  position:absolute;
  inset:auto 8px 8px 8px;
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  line-height:1.15;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.10);
}

.lot-meta .top{ font-weight:600; margin-bottom:4px; }
.lot-meta .sub{ opacity:.9; }

.lot-loading, .lot-empty{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.85);
  font-size:13px;
}

.lot-loading .spinner-border{
  width:1.25rem;
  height:1.25rem;
}

.lot-grid.is-slices{
  grid-auto-flow:column;
  grid-template-rows:1fr;
}

@media (hover:none){
  .card:hover .flip-inner{ transform:none; }
}


/* =========================================================
   15) COMPARE AI: better readability + shiny CTA
   ========================================================= */
.cmp-ai-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:12px 12px;
  border-radius:16px;

  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(90deg, var(--color-accent-35), rgba(0,0,0,0), var(--color-accent-20)) border-box;
  border:1px solid transparent;

  box-shadow:0 10px 26px rgba(0,0,0,.06);
}

.cmp-ai-text{ min-width:0; }

.cmp-ai-title{
  font-weight:800;
  letter-spacing:.2px;
  color:var(--ink);
  line-height:1.15;
}
.cmp-ai-sub{
  font-size:.9rem;
  color:#6b7280;
  line-height:1.25;
}

.cmp-ai-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.5rem;

  padding:.55rem .9rem;
  border-radius:999px;
  border:1px solid var(--color-accent-55);

  background:var(--color-accent);
  color:#1a1a1a;
  font-weight:900;
  letter-spacing:.02em;

  box-shadow:
    0 10px 26px var(--color-accent-20),
    0 0 0 3px var(--color-accent-10);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  overflow:hidden;
  white-space:nowrap;
}

.cmp-ai-btn i{
  font-size:1rem;
  transform:translateY(-.5px);
}

.cmp-ai-btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(120deg,
    transparent 20%,
    rgba(255,255,255,.55) 45%,
    transparent 70%);
  transform:translateX(-140%);
  animation:cmpShimmer 2.6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes cmpGlow{
  0%,100%{
    box-shadow:
      0 10px 26px var(--color-accent-20),
      0 0 0 3px var(--color-accent-10),
      0 0 18px var(--color-accent-30);
  }
  50%{
    box-shadow:
      0 12px 30px var(--color-accent-30),
      0 0 0 3px var(--color-accent-15),
      0 0 26px var(--color-accent-45);
  }
}

@keyframes cmpShimmer{
  0%,60%{ transform:translateX(-140%); }
  100%{ transform:translateX(140%); }
}

.cmp-ai-btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.05) brightness(1.02);
  animation:cmpGlow 1.9s ease-in-out infinite;
  color:#141414;
}

.cmp-ai-btn:active{
  transform:translateY(0px);
  filter:brightness(.98);
}

.cmp-ai-btn:focus{
  outline:none;
  box-shadow:
    0 0 0 4px var(--color-accent-20),
    0 14px 36px var(--color-accent-30);
}

.cmp-ai-btn:disabled{
  opacity:.72;
  cursor:not-allowed;
  filter:saturate(.9);
  animation:none;
}

.cmp-ai-out{
  border-radius:16px;
  border:1px solid #eceef2;
  background:#ffffff;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding:14px;
}

/* Improve the cards your JS renders inside cmpAIOut */
#cmpAIOut .card{
  box-shadow:none;
  border:1px solid #eef0f3;
}
#cmpAIOut .card:hover{
  transform:none;
  box-shadow:none;
}

#cmpAIOut .fw-semibold{ letter-spacing:.1px; }
#cmpAIOut .small{
  color:#4b5563;
  font-size:.98rem !important;
}
#cmpAIOut ul{
  margin-bottom:0;
  padding-left:1.1rem;
}
#cmpAIOut li{
  margin-bottom:.35rem;
  line-height:1.25;
  font-size:.98rem;
}

@media (max-width:576px){
  .cmp-ai-bar{
    flex-direction:column;
    align-items:stretch;
  }
  .cmp-ai-btn{
    width:100%;
    justify-content:center;
  }
}


/* =========================================================
   16) COMPARE MODAL READABILITY
   ========================================================= */
#compareModal .modal-title{ font-weight:800; }

#compareModal table.table{ font-size:1rem; }

#compareModal td,
#compareModal th{
  padding:.85rem .85rem;
  vertical-align:top;
}

#compareModal tbody tr:nth-child(odd){ background:#fafafa; }

#compareModal thead th{
  position:sticky;
  top:0;
  background:#fff;
  z-index:1;
  border-bottom:1px solid #e5e7eb;
}

/* Collection modal: left-align header (names) to match specs */
#compareModal thead th{
  text-align: left !important;
}

/* Optional: also left-align the header row container cells if Bootstrap adds centering */
#compareModal #cmpHead th{
  text-align: left !important;
}

/* Optional (recommended): make ALL table cells left, except images if you have any */
#compareModal table.table td,
#compareModal table.table th{
  text-align: left;
}



/* =========================================================
   17) MATCH BUSY OVERLAY + DRAWER MOBILE ACCORDION
   ========================================================= */

/* Full-card loader: covers the match panel while AI is running */
.match-busy-overlay{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:16px;
  padding:40px 24px;
}
.match-busy-overlay[hidden]{ display:none !important; }

/* Spinning ring */
.match-busy-ring{
  width:56px; height:56px; border-radius:50%;
  border:3px solid var(--color-accent-20);
  border-top-color:var(--color-accent);
  animation:mbSpin .85s linear infinite;
  flex-shrink:0;
}
@keyframes mbSpin{ to{ transform:rotate(360deg); } }

/* Step list */
.match-busy-steps{
  display:flex; flex-direction:column; gap:11px; min-width:210px;
}
.match-busy-step{
  display:flex; align-items:center; gap:10px;
  font-size:.86rem; color:#9ca3af;
  transition:color .3s ease;
}
.match-busy-step.is-done{ color:#059669; }
.match-busy-step.is-active{ color:#111827; font-weight:600; }

/* Step indicator dot */
.match-busy-dot{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  border:2px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; transition:all .3s ease;
}
.match-busy-step.is-done .match-busy-dot{
  background:#059669; border-color:#059669; color:#fff;
}
.match-busy-step.is-done .match-busy-dot::before{ content:'✓'; }
.match-busy-step.is-active .match-busy-dot{
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px var(--color-accent-10);
  animation:mbDotPulse 1.4s ease-in-out infinite;
}
@keyframes mbDotPulse{
  0%,100%{ box-shadow:0 0 0 3px var(--color-accent-10); }
  50%{ box-shadow:0 0 0 7px var(--color-accent-10); }
}

/* Footer note */
.match-busy-note{
  font-size:.76rem; color:#9ca3af;
  text-align:center; max-width:240px; line-height:1.55; margin:0;
}

@media (max-width:768px){
  #compareDrawer.is-collapsed #cmpList{ display:none; }
  #compareDrawer.is-collapsed{
    height:auto;
    max-height:none;
  }
  #compareDrawer.is-collapsed .compare-list{ padding:0 !important; }
}


/* =========================================================
   18) RESPONSIVE HIDES
   ========================================================= */
@media (max-width:767.98px){
  #btnMatch,
  #matchCollapse,
  #matchView,
  #exitMatchBtn,
  #exitMatchTop{
    display:none !important;
  }
}


/* =========================================================
   19) Inventory Product Tiles — image-first gallery design
   ========================================================= */

.inv-card{
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: none !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.09);
  transition: transform .24s cubic-bezier(.22,.68,0,1.2), box-shadow .24s ease;
  will-change: transform;
}

.inv-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 56px rgba(0,0,0,.16), 0 4px 16px rgba(0,0,0,.06);
  border-color: transparent !important;
}

.inv-card:focus-within{
  box-shadow: 0 0 0 3px var(--color-accent-30), 0 20px 56px rgba(0,0,0,.14);
}

/* ——— Image ——— */
.inv-media-wrap{ position: relative; }

.inv-media{
  position: relative;
  display: block;
  height: 340px;
  overflow: hidden;
  background: #e8eaed;
}

@media (max-width: 575.98px){ .inv-media{ height: 280px; } }

.inv-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94), filter .5s ease;
  filter: saturate(1.05) contrast(1.03);
}

.inv-card:hover .inv-img{
  transform: scale(1.07);
  filter: saturate(1.12) contrast(1.06);
}

/* ——— Text overlay at bottom of image ——— */
.inv-overlay{
  position: absolute;
  inset: auto 0 0 0;
  padding: 80px 16px 16px;
  background: linear-gradient(
    to top,
    rgba(3,6,16,.92) 0%,
    rgba(3,6,16,.65) 40%,
    rgba(3,6,16,.15) 75%,
    transparent 100%
  );
  pointer-events: none;
}

.inv-overlay-badges{ margin-bottom: 6px; }

.inv-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: .005em;
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
  margin: 0;
}

.inv-meta{
  font-size: .82rem;
  color: rgba(255,255,255,.72);
  margin-top: 4px;
  line-height: 1.3;
  letter-spacing: .01em;
}

/* ——— Special / badge chips ——— */
.inv-badges{
  position: absolute;
  left: 12px; top: 12px;
  display: flex; flex-wrap: wrap; gap: 6px;
  z-index: 2;
}

.inv-chip{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 800; font-size: .7rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: #111;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

.inv-chip.gold{
  background: linear-gradient(135deg, var(--color-accent-95), var(--color-accent-95));
  border-color: var(--color-accent-55);
  color: #1a0f00;
}

.inv-chip.dark{
  color: #fff;
  background: rgba(15,23,42,.82);
  border-color: rgba(255,255,255,.10);
}

/* ——— Action buttons (fade in on hover) ——— */
.inv-actions{
  position: absolute;
  top: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 3;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.inv-card:hover .inv-actions,
.inv-card:focus-within .inv-actions{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* ——— Footer strip ——— */
.inv-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 12px;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.05);
}

.inv-type-tag{
  font-size: .78rem;
  font-weight: 700;
  color: #475569;
  letter-spacing: .02em;
}

.inv-stock{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .81rem; font-weight: 600;
  color: #64748b;
}

.inv-stock .dot{
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #cbd5e1;
  flex-shrink: 0;
}
.inv-stock.ok .dot{ background: #22c55e; }
.inv-stock.no .dot{ background: #ef4444; }

.inv-sep{ margin: 0 4px; opacity: .4; }

.inv-detail-link{
  display: inline-flex; align-items: center; gap: 2px;
  font-size: .84rem; font-weight: 700;
  color: #1e293b;
  padding: 5px 12px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.inv-detail-link:hover{
  background: var(--color-accent);
  color: #1a0f00;
  border-color: var(--color-accent-45);
  transform: translateX(2px);
}
.inv-detail-link i{ font-size: 1.1rem; }

/* ——— Grid gutters ——— */
@media (min-width: 992px){
  #grid.row.g-3{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.75rem;
  }
}

/* (The grid "white space under the image" was NOT a card/image bug — it was the
   site footer's .inv-footer rule (margin-top:80px) colliding with the product
   card's .inv-footer class. Fixed by renaming the site footer to
   .inv-site-footer in inventory.css. No grid override needed here.) */

/* List view: the stone name sits on the white card (not the dark image overlay),
   so it must be dark and readable — not the white overlay treatment. */
.inv-card-row .inv-title,
.inv-card-row .inv-title a { color: var(--color-text-primary); text-shadow: none; }

/* ——— List view layout ——— */
.inv-card-row .inv-row{
  display: grid;
  grid-template-columns: 300px 1fr;
  flex: 1 1 auto;   /* fill the flex-row card so the 1fr body (and its w-100
                       View Details button) span the full width, not content */
  min-width: 0;
  width: 100%;
}

.inv-media-row{ height: 100%; min-height: 220px; }

.inv-card-row .inv-row-body{ padding: 14px 16px; }

.inv-footer-row{
  padding: 10px 0 0 0;
  background: transparent;
  border-top: none;
}

@media (max-width: 991.98px){
  .inv-card-row .inv-row{ grid-template-columns: 1fr; }
  .inv-media-row{ height: 260px; min-height: 260px; }
}

/* =========================================================
   NLQ Semantic Search Banner
   ========================================================= */
.nlq-banner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, #0f172a, #1e3a5f);
  color: #fff;
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 20px;
  font-size: .9rem;
  font-weight: 500;
}
.nlq-banner-inner{
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.nlq-banner-icon{ font-size: 1.1rem; color: var(--color-accent-35); }
.nlq-banner .nlq-query-text{ color: var(--color-accent-35); }
.nlq-banner-clear{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.nlq-banner-clear:hover{ background: rgba(255,255,255,.22); }

/* =========================================================
   Match Mode Buttons (slab vs room)
   ========================================================= */
.match-mode-btn{
  border: 1.5px solid #dee2e6;
  border-radius: 10px;
  color: #495057;
  background: #fff;
  font-weight: 600;
  font-size: .82rem;
  padding: 5px 12px;
  transition: all .15s;
}
.match-mode-btn.active{
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

.room-desc-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .85rem;
  color: #1e40af;
  margin-bottom: 10px;
}