/* =========================================================
   PRODUCT PAGE / PRINT-PERFECT (PDF-friendly) STYLES
   Cleaned: merged vars, removed duplicates, grouped sections
   ========================================================= */

/* =========================================================
   1) TOKENS / THEME
   ========================================================= */
:root{
  /* Warmer neutral palette */
  --bg: #f6f7fb;
  --panel: #ffffff;
  --ink: #0f172a;
  --ink-soft: #475569;
  --muted: #6b7280;

  /* CRS accent system */
  --gold: #c9a227;
  --gold-600:#b08f20;
  --gold-100:#fff7df;

  /* Supporting accents */
  --mint:#e6f7f1;
  --mint-ink:#0b6b4a;
  --blue-soft:#ecf2ff;
  --blue-ink:#274690;

  /* Status */
  --ok:#16a34a;
  --warn:#ef4444;

  /* Utility */
  --soft:#f7f7f8;

  /* Borders/shadows */
  --b1:#e9ecf4;
  --b2:#dde3ef;
  --shadow-sm: 0 6px 18px rgba(22, 28, 45, .06);
  --shadow-md: 0 12px 30px rgba(22, 28, 45, .10);
  --radius:18px;
}

html{ color-scheme: light; }

body{
  background: linear-gradient(180deg, #f8f9fc 0%, var(--bg) 60%);
  color: var(--ink);
}
a{ text-decoration:none; }

/* =========================================================
   2) PAGE CHROME (crumbs, header band)
   ========================================================= */
.crumbs{ color:#78839a; font-size:.9rem; }
.crumbs a{ color:#6f7a92; }
.crumbs .sep{ color:#98a2b3; margin:0 .35rem; opacity:.9; }

.head{
  background: linear-gradient(180deg,#fff 0%, #fdfcf9 100%);
  border: 1px solid var(--b1);
  border-radius: var(--radius);
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: var(--shadow-sm);
}

.badge-tag{
  border:1px solid var(--b2);
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.8rem;
  color:#374151;
  background:#fff;
}

.badge-pill{
  background: var(--gold-100);
  color:#5a480d;
  border:1px solid #ffe8a6;
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.8rem;
}
/* a touch darker than default */
.badge-pill{ color:#4b3a08; }

/* =========================================================
   3) SECTION TITLES
   ========================================================= */
.section-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:20px 0 10px;
}
.section-title h4{
  position:relative;
  padding-bottom:6px;
}
.section-title h4::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:54px;
  height:3px;
  border-radius:3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-600));
  opacity:.9;
}

/* Small gold dot */
.dot{
  width:8px; height:8px;
  border-radius:99px;
  display:inline-block;
  background: radial-gradient(circle at 30% 30%, var(--gold) 0, var(--gold-600) 70%);
  box-shadow: 0 0 0 3px rgba(201,162,39,.12);
}

/* =========================================================
   4) GALLERY (zoom/pan hero + thumbs)
   ========================================================= */
.gallery{
  position:relative;
  background: var(--panel);
  border:1px solid var(--b1);
  border-radius: var(--radius);
  padding:12px;
  box-shadow: var(--shadow-md);
  overflow:hidden; /* keep */
}

/* Viewport for zoom/pan */
.hero-wrap{
  width:100%;
  height:460px;
  border-radius:12px;

  background: repeating-linear-gradient(
    45deg, #f3f5fa 0, #f3f5fa 10px, #f7f8fc 10px, #f7f8fc 20px
  );

  overflow:hidden;
  position:relative;
  user-select:none;

  border:1px solid var(--b2);
  outline:none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Focus ring */
.hero-wrap:focus-visible{
  outline:3px solid rgba(201,162,39,.55);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(201,162,39,.15);
}

/* The image itself is fully controlled by transforms */
.hero-wrap img{
  position:absolute;
  top:0; left:0;
  transform-origin:0 0;
  will-change:transform;
  max-width:none;            /* critical for correct scaling */
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-tap-highlight-color: transparent;
  cursor:grab;
}
.hero-wrap img:active{ cursor:grabbing; }
.hero-wrap:not(.zoomed){ cursor:zoom-in; }
.hero-wrap.zoomed{ cursor:zoom-out; }
.hero-wrap.zoomed img{ cursor:grab; }
.hero-wrap.zoomed img:active{ cursor:grabbing; }

/* Binocular/aim box */
.hero-wrap .aim-box{
  position:absolute;
  width:140px; height:100px;
  border:2px solid rgba(255,255,255,.95);
  outline:2px solid rgba(0,0,0,.25);
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  pointer-events:none;
  transform:translate(-50%, -50%);
  display:none;
  background: rgba(255,255,255,.25);
  backdrop-filter: blur(2px);
}
.hero-wrap .aim-box .bi{
  position:absolute; left:8px; top:6px;
  font-size:18px;
  color:#111827;
  text-shadow:0 1px 0 #fff;
}

/* Thumbs */
.thumbs{ display:flex; gap:10px; margin-top:10px; overflow:auto; }
.thumb{
  width:82px; height:72px;
  border-radius:10px;
  border:2px solid transparent;
  cursor:pointer;
  flex:0 0 auto;

  background:#f1f3f9;
  box-shadow:0 6px 14px rgba(16,24,40,.06) inset;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s;

  aspect-ratio: 82 / 72;
  object-fit:cover;
}
.thumb:hover{ transform:translateY(-1px) scale(1.01); }
.thumb.active{
  border-color: var(--gold);
  box-shadow:0 0 0 2px rgba(201,162,39,.18);
}

/* =========================================================
   5) SPEC CARD + DETAILS
   ========================================================= */
.spec-card{
  position:sticky;
  top:16px;

  background: linear-gradient(180deg,#fff 0%, #fbfbfd 100%);
  border:1px solid var(--b1);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow-md);
}

.title{ display:flex; align-items:center; gap:.5rem; }
.title h1{
  font-size:1.5rem;
  margin:0;
  letter-spacing:.2px;
}

.meta .chip{
  display:inline-block;
  padding:2px 10px;
  font-size:.8rem;
  border:1px solid #dfe7ff;
  border-radius:999px;
  background: var(--blue-soft);
  color: var(--blue-ink);
}

.kv{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:.5rem 0;
  border-bottom:1px dashed #eee;
}
.kv:last-child{ border-bottom:0; }
.kv .k{ color:#73809a; font-size:.86rem; }
.kv .v{ font-weight:600; color:#0f172a; }

.detail-desc{
  margin-top:10px;
  padding:12px;
  border:1px dashed #f0e3b8;
  border-radius:14px;
  background:#fffcf3;
  font-size:.95rem;
  color:#2b2b2b;
}

.btn-outline{
  border:1px solid #e6e7eb;
  background:#fff;
  color: var(--ink);
  transition: background .12s ease, color .12s ease, border-color .12s, box-shadow .12s;
}
.btn-outline:hover{
  background: var(--gold);
  border-color: var(--gold-600);
  color:#1b1b1b;
  box-shadow:0 8px 20px rgba(201,162,39,.25);
}

/* Copyable */
.copyable{ cursor:pointer; }

/* Accessible focus ring */
.btn-outline:focus-visible,
a:focus-visible,
.thumb:focus-visible,
.copyable:focus-visible{
  outline:3px solid rgba(201,162,39,.55);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(201,162,39,.15);
}

/* =========================================================
   6) LOTS
   ========================================================= */
.lot-card{
  background:#fff;
  border:1px solid var(--b1);
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s;
}
.lot-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color:#dfe3ef;
}

.lot-thumb-wrap{ position:relative; }

.lot-thumb{
  width:100%;
  height:190px;
  background:#eef2f8;
  cursor:pointer;
  aspect-ratio: 3 / 1;
  object-fit:cover;
}

.slab-pill{
  position:absolute;
  right:12px;
  top:12px;
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.9rem;
  font-weight:800;
  color:#fff;
  background: linear-gradient(135deg, var(--ok), #22c55e);
  box-shadow: 0 10px 24px rgba(16,185,129,.35);
  letter-spacing:.2px;
}
.slab-pill.warn{
  background: linear-gradient(135deg, var(--warn), #f97316);
  box-shadow: 0 10px 24px rgba(249,115,22,.28);
}

.lot-body .size{
  font-size:1.05rem;
  font-weight:800;
  color:#111;
  letter-spacing:.2px;
  padding:.25rem .5rem;
  background:#f8fafc;
  border:1px solid #eef2f7;
  border-radius:10px;
  display:inline-block;
}
.lot-sub{ color:var(--muted); font-size:.9rem; }
.lot-kv{ font-size:.92rem; }
.lot-kv .k{ width:110px; color:var(--muted); display:inline-block; }

/* Specs grid */
.spec-tile{
  background:#fff;
  border:1px solid var(--b1);
  border-radius:14px;
  padding:12px;
  height:100%;
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   7) SIMILAR ROW
   ========================================================= */
.sim-row{ display:flex; gap:12px; overflow:auto; padding-bottom:6px; }
.sim-card{
  min-width:220px;
  border:1px solid var(--b1);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sim-card:hover{ transform:translateY(-2px); box-shadow: var(--shadow-md); }
.sim-card img{ height:140px; width:100%; object-fit:cover; }
.sim-meta{ font-size:.8rem; color:var(--ink-soft); }

/* =========================================================
   8) STICKY BOTTOM BAR (dock)
   ========================================================= */
.dock{
  position:sticky;
  bottom:0;
  z-index:1020;
  padding:.6rem 0;

  background: linear-gradient(180deg,#ffffff 0%, #fbfaf6 100%);
  border-top: 1px solid var(--b1);
  box-shadow: 0 -12px 24px rgba(22,28,45,.06);
}

/* =========================================================
   9) LOT PREVIEW MODAL (immersive)
   ========================================================= */
.modal-preview .modal-content{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(16,24,40,.28);
  background: linear-gradient(180deg,#0b1220 0%, #0f172a 100%);
  border:1px solid rgba(255,255,255,.06);
}
.modal-preview .modal-body{
  padding:0;
  background:
    radial-gradient(1200px 400px at 50% -200px, rgba(201,162,39,.25) 0%, transparent 60%),
    radial-gradient(1000px 600px at 120% -300px, rgba(201,162,39,.18) 0%, transparent 60%);
}
.modal-preview .img-wrap{
  background:
    conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.04) 0 25%, transparent 25% 50%, rgba(255,255,255,.04) 50% 75%, transparent 75% 100%),
    #0f172a;
  background-size:24px 24px, auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:58vh;
}
.modal-preview #previewImg{
  max-height:70vh;
  width:100%;
  object-fit:contain;
}

.modal-preview .lot-details{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-top:1px solid rgba(255,255,255,.08);
  color:#e6eaf3;
  padding:14px 18px;
}

.modal-preview .lot-details .title{
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.35rem;
}

.modal-preview .pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .55rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  font-size:.8rem;
  color:#e6eaf3;
  background:rgba(255,255,255,.06);
}
.modal-preview .pill.ok{
  background:linear-gradient(135deg,#16a34a,#22c55e);
  border-color:transparent;
  color:#fff;
}
.modal-preview .pill.warn{
  background:linear-gradient(135deg,#ef4444,#f97316);
  border-color:transparent;
  color:#fff;
}

.modal-preview .grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:6px;
}
.modal-preview .kv{
  display:flex; justify-content:space-between; gap:8px;
  padding:8px 10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
}
.modal-preview .kv .k{ color:#aeb7c6; font-size:.85rem; }
.modal-preview .kv .v{ font-weight:700; color:#f8fafc; }

.modal-backdrop.show{ opacity:.65; }

/* Modal navigation arrows */
.modal-preview .nav-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.45);
  border:none;
  color:#fff;
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s;
  z-index:5;
}
.modal-preview .nav-arrow:hover{ background:rgba(0,0,0,.65); }
.modal-preview .nav-arrow.left{ left:12px; }
.modal-preview .nav-arrow.right{ right:12px; }
.modal-preview .nav-arrow i{ font-size:1.4rem; }

/* =========================================================
   10) OPTIONAL DARK MODE (kept commented, cleaned wrapper)
   ========================================================= */
/*
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1117; --panel:#0f141b;
    --ink:#e6eaf3; --ink-soft:#aeb7c6; --muted:#9099ab;
    --b1:#1c2430; --b2:#17202b;
    --shadow-sm: 0 6px 18px rgba(0,0,0,.35);
    --shadow-md: 0 12px 30px rgba(0,0,0,.45);
  }
  body{ background: linear-gradient(180deg,#0b1016 0%, var(--bg) 60%); }
  .head, .spec-card, .gallery, .sim-card, .spec-tile, .lot-card{
    background: var(--panel);
    border-color: var(--b1);
  }
  .detail-desc{ background:#191b12; border-color:#4b4424; color:#eae7da; }
  .kv .k{ color:#9aa6bb; }
  .kv .v{ color:#e6eaf3; }
  .btn-outline{ background:#131a22; border-color:#293040; color:#e6eaf3; }
  .btn-outline:hover{ background:var(--gold); color:#111; }
  .dock{ background: linear-gradient(180deg,#0f141b 0%, #0d1117 100%); border-top-color: var(--b1); }
  .hero-wrap .aim-box{
    border-color: rgba(255,255,255,.85);
    outline-color: rgba(255,255,255,.15);
    background: rgba(255,255,255,.08);
  }
}
*/

/* =========================================================
   11) SITE HEADER (shared with inventory) + OFFCANVAS
   ========================================================= */
.site-header .navbar{
  min-height:74px;
  padding-top:0 !important;
  padding-bottom:0 !important;
  position:relative;
  z-index:1080;
}

/* Desktop dropdowns */
.site-header .dropdown-menu{ border-radius:12px; padding:.5rem; }
.site-header .dropdown-item{
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-weight:300;
  font-size:14px;
}
.site-header .dropdown-item:hover{ background:#f2f2f2; }

/* Desktop menu look */
.site-header .navbar .nav-link,
.site-header .navbar .dropdown-item{
  font-weight:600;
  font-size:14px;
  color:#8d8d8d;
}
.site-header .navbar .nav-link:hover,
.site-header .navbar .nav-link:focus,
.site-header .navbar .nav-link.show{ color:#646464; }

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

/* Hide mobile burger/offcanvas on desktop */
@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; }
}

/* Mobile offcanvas (dark) */
.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; }

/* Offcanvas drops from top and covers header on mobile */
.mobile-offcanvas.offcanvas-top{
  top:0 !important;
  height:100vh !important;
  max-height:100vh !important;
  border-top:0 !important;
}

/* Bootstrap toggler polish */
.navbar-toggler{ border:none; }
.navbar-toggler:focus{ box-shadow:none; }

/* =========================================================
   12) PRINT RULES
   ========================================================= */
@media print{
  .site-header{ display:none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* =========================================================
   13) AI Tools
   ========================================================= */
/* --- AI Tools modern cards --- */
#aiTools .ai-card{
  background: linear-gradient(180deg,#fff 0%, #fbfbfd 100%);
  border: 1px solid var(--b1);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}


#aiTools .ai-card .ai-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

#aiTools .ai-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 700;
  letter-spacing: .2px;
}

#aiTools .ai-icon{
  width: 36px;
  height: 36px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(13,110,253,.12); /* bootstrap primary tint */
  border: 1px solid rgba(13,110,253,.25);
}

#aiTools .ai-sub{
  font-size: .9rem;
  opacity: .75;
  margin-top: 2px;
}

#aiTools .ai-input,
#aiTools .ai-select{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
}

#aiTools .ai-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top: 10px;
}

#aiTools .ai-btn{
  border-radius: 999px;
  padding: 8px 14px;
}

#aiTools .ai-status{
  font-size: .9rem;
  opacity: .7;
}

#aiTools .ai-output{
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
}

#aiTools ul{
  padding-left: 18px;
  margin-bottom: 0;
}

#aiTools .ai-pill{
  font-size: .75rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  opacity: .85;
}

#aiTools .ai-warn{
  border-left: 3px solid rgba(255,193,7,.9);
  padding-left: 10px;
  margin-top: 10px;
}

.ai-btn.is-loading { opacity: .9; cursor: wait; }

/* ============================
   AI MODALS (custom, modern)
   ============================ */
.ai-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1090;
}
.ai-modal.show{ display:block; }

.ai-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
}

.ai-modal-panel{
  position: relative;
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;

  margin: 14px auto;
  border-radius: 18px;

  background: linear-gradient(180deg,#fff 0%, #fbfbfd 100%);
  border: 1px solid var(--b1);
  box-shadow: 0 24px 64px rgba(16,24,40,.28);

  padding: 16px;
}

.ai-modal-head{
  padding-right: 44px; /* room for X */
  margin-bottom: 10px;
}

.ai-modal-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.ai-modal-sub{
  font-size: .9rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.ai-modal-x{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--b2);
  background: #fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ai-modal-x:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   13A) AI Tools as full-card buttons (gold glow)
   ========================================================= */
#aiTools .ai-card-btn{
  cursor: pointer;
  position: relative;
  border: 1px solid var(--b1);
  background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%);
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

/* Golden “halo” layer */
#aiTools .ai-card-btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  pointer-events:none;
  opacity:0;
  transition: opacity .14s ease;
  background:
    radial-gradient(900px 220px at 15% 0%, rgba(201,162,39,.26), transparent 60%),
    radial-gradient(700px 220px at 85% 0%, rgba(201,162,39,.18), transparent 60%);
}

/* Hover effect */
#aiTools .ai-card-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(201,162,39,.45);
  box-shadow: 0 14px 34px rgba(22, 28, 45, .12), 0 0 0 4px rgba(201,162,39,.10);
}
#aiTools .ai-card-btn:hover::after{ opacity:1; }

/* Focus ring to match your gold system */
#aiTools .ai-card-btn:focus-visible{
  outline: 3px solid rgba(201,162,39,.55);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(201,162,39,.15), var(--shadow-md);
}

/* Make the little icon match the gold theme */
#aiTools .ai-card-btn .ai-icon{
  background: rgba(201,162,39,.10);
  border: 1px solid rgba(201,162,39,.28);
}

/* Subtle “press” */
#aiTools .ai-card-btn:active{
  transform: translateY(0px);
  box-shadow: var(--shadow-sm);
}

.ai-modal-panel{
  background: linear-gradient(180deg,#fff 0%, #fbfbfd 100%);
  border: 1px solid var(--b1);
  box-shadow: 0 24px 64px rgba(16,24,40,.22);
  border-radius: 22px;
  overflow: hidden;
}

.ai-modal-head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--b1);
  background:
    radial-gradient(900px 240px at 10% 0%, rgba(201,162,39,.18) 0%, transparent 55%),
    linear-gradient(180deg,#fff 0%, #fbfbfd 100%);
}

.ai-modal-x{
  border-radius: 14px;
  border: 1px solid var(--b2);
}
.ai-modal-x:hover{
  box-shadow: 0 12px 24px rgba(22,28,45,.10);
  transform: translateY(-1px);
}

.ai-output{
  background: #fff;
  border: 1px solid var(--b1);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.ai-output ul li{ margin: 4px 0; }

.ai-actions{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--b1);
}

.btn-gold{
  border: 1px solid rgba(176,143,32,.65);
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-600) 100%);
  color: #1b1b1b;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(201,162,39,.22);
}
.btn-gold:hover{
  box-shadow: 0 16px 30px rgba(201,162,39,.28);
  transform: translateY(-1px);
}
.btn-gold:focus-visible{
  outline: 3px solid rgba(201,162,39,.55);
  outline-offset: 2px;
}

/* Make AI modal panel fit the viewport and scroll internally */
.ai-modal-panel{
  max-height: min(86vh, 900px);
  overflow: hidden;              /* prevents the whole panel from overflowing */
  display: flex;
  flex-direction: column;
}

/* The content area inside the panel should be the scroll container */
.ai-modal-panel .ai-output{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

/* Optional: keep header + actions visible while scrolling long answers */
.ai-modal-head,
.ai-actions{
  flex: 0 0 auto;
}

/* Dock layout */
.dock-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Left side text */
.dock-left{
  flex: 1 1 auto;
  min-width: 0;
}

/* Center AI buttons */
.dock-center{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex: 0 0 auto;
}

/* Right side buttons */
.dock-right{
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

/* Mobile stacking */
@media (max-width: 768px){
  .dock-inner{
    flex-wrap: wrap;
  }
  .dock-left{
    width: 100%;
    text-align: center;
  }
  .dock-center{
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
  .dock-right{
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
}

.ai-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.ai-suggest-btn{
  border:1px solid var(--b2);
  background: #f8fafc;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(16,24,40,.06);
}

.ai-suggest-btn:hover{
  background: #fff;
  border-color: rgba(201,162,39,.55);
  box-shadow: 0 10px 20px rgba(16,24,40,.10);
}

.ai-style-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}

.ai-style-pill{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  cursor:pointer;
}

.ai-style-pill.active{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}
.pair-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.pair-section{
  border:1px solid var(--b1);
  background: #f8fafc;
  border-radius: 14px;
  padding:10px 12px;
  box-shadow: 0 8px 18px rgba(16,24,40,.06);
}


.pair-section h6{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px 0;
  font-size: 13px;
  opacity:.95;
}

/* Make chip UL behave like a chip tray */
.pair-section ul{
  list-style:none;
  padding-left:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Remove the li inline hacks (li becomes simple wrapper) */
.pair-section ul li{
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}

.pair-wide{
  grid-column: 1 / -1;
}

/* Mobile: stack */
@media (max-width: 520px){
  .pair-grid{ grid-template-columns: 1fr; }
}
.ai-chip{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 13px;
}
.pair-overview{
  border:1px solid var(--b1);
  background: #f8fafc;
  border-radius: 14px;
  padding:10px 12px;
  margin-bottom: 10px;
  box-shadow: 0 8px 18px rgba(16,24,40,.06);
}

/* Default (not in collection) */
.btn-cmp .cmp-icon {
  color: #212529; /* default dark */
  transition: color 0.2s ease;
}

/* In collection */
.btn-cmp.is-added .cmp-icon {
  color: #d4af37; /* gold */
}

/* Optional: subtle hover */
.btn-cmp:hover .cmp-icon {
  color: #d4af37;
}
.btn-cmp.is-added .cmp-icon {
  animation: pop 0.25s ease;
}
.btn-cmp.active i { color: #d4af37; }


@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}


/* Hide product details in sticky dock on mobile */
@media (max-width: 768px) {
  .dock-left {
    display: none !important;
  }
}

/* Mobile: remove zoom aim / box entirely */
@media (pointer: coarse), (max-width: 768px){
  .hero-wrap .aim-box{
    display: none !important;
  }
}