/* =========================================================
   QUICK VIEW MODAL  one shared overlay, built once by
   assets/js/quick-view.js and reused for every product card. Colors
   here are literal (matching product-card.css's own literal palette,
   not the newer --fm-* tokens) since it visually extends that
   component rather than a fresh section  see BRAND-IDENTITY.md §3
   on tokenizing only new, unrelated work.

   Scoping: every rule is anchored to .fm-quick-view  see
   BRAND-IDENTITY.md §2. .qv-media intentionally reuses the real
   `.jewel-visual-inner`/`.jewel-drawer-group`/`.jewel-swatch`/
   `.jewel-size-chip`/`.jewel-rating` classes from product-card.css
   (cloned straight from the card, see quick-view.js's open()), so this
   file only overrides their *size* inside the modal, not their look.
   ========================================================= */

.fm-quick-view, .fm-quick-view * { box-sizing: border-box; }

.fm-quick-view {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10,9,8,0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.fm-quick-view.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}
body.fm-qv-lock { overflow: hidden; }

.fm-quick-view .qv-panel {
  position: relative;
  width: 100%;
  max-width: 860px;
  max-height: 88vh;
  overflow-y: auto;
  background: #0d0b08;
  border: 1px solid rgba(201,162,54,0.3);
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s ease;
}
.fm-quick-view.is-open .qv-panel { transform: translateY(0) scale(1); }

.fm-quick-view .qv-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 32px; height: 32px;
  border-radius: var(--fm-radius-circle);
  border: 1px solid rgba(232,220,192,0.4);
  background: rgba(10,9,8,0.6);
  color: #C9A236;
  font-size: 20px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.fm-quick-view .qv-close:hover { background: #000000; border-color: #000000; color: #ffffff; }

.fm-quick-view .qv-media-col { display: flex; flex-direction: column; min-width: 0; }
.fm-quick-view .qv-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.fm-quick-view .qv-media .jewel-visual-inner { height: 100%; }

/* Thumbnail rail: every real photo the product has (fm_build_featured_product_card()'s
   own gallery + per-variation images, already merged into one list  see
   its own comment for why), so a shopper can browse the same set of looks
   here as the corner prev/next arrows cycle through on the card itself.
   Collapses to nothing for a single-photo product instead of a row of one
   dead thumbnail (see quick-view.js's open(), which only ever fills this
   in when there's more than one). */
.fm-quick-view .qv-thumbs { display: flex; gap: 8px; padding: 12px; flex-wrap: wrap; }
.fm-quick-view .qv-thumb {
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid rgba(232,220,192,0.25);
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.fm-quick-view .qv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-quick-view .qv-thumb:hover { border-color: rgba(201,162,54,0.6); }
.fm-quick-view .qv-thumb.is-active { border-color: #C9A236; }

.fm-quick-view .qv-info { padding: 40px 36px; display: flex; flex-direction: column; }
/* This card design has no separate category line (see quick-view.js's
   open())  collapses instead of leaving a dead gap above the title. */
.fm-quick-view .qv-cat:empty { display: none; }
.fm-quick-view .qv-cat {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 13px;
  color: #C9A236;
  margin-bottom: 8px;
}
.fm-quick-view .qv-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.35;
  color: #f3efe7;
  margin-bottom: 12px;
}
.fm-quick-view .qv-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.fm-quick-view .qv-meta .jewel-meta { margin: 0; }
.fm-quick-view .qv-meta .jewel-rating { margin-top: 0; }
.fm-quick-view .qv-meta .jewel-rating .stars svg { width: 12px; height: 12px; }
.fm-quick-view .qv-meta .jewel-rating .count { font-size: 11.5px; }

.fm-quick-view .qv-price { display: flex; align-items: baseline; gap: 10px; font-family: 'Jost', sans-serif; margin-bottom: 24px; }
.fm-quick-view .qv-price .now { font-size: 22px; font-weight: 600; color: #e8dcc0; }
.fm-quick-view .qv-price .was { font-size: 14px; color: #6f665a; text-decoration: line-through; }

.fm-quick-view .qv-variants { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.fm-quick-view .qv-variants:empty { display: none; }

.fm-quick-view .qv-actions { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.fm-quick-view .qv-qty {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(232,220,192,0.3);
}
.fm-quick-view .qv-qty-btn {
  width: 34px; height: 44px;
  background: none;
  border: none;
  color: #C9A236;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.fm-quick-view .qv-qty-btn:hover { color: #C9A236; }
.fm-quick-view .qv-qty-input {
  width: 34px; height: 44px;
  border: none;
  border-left: 1px solid rgba(232,220,192,0.3);
  border-right: 1px solid rgba(232,220,192,0.3);
  background: none;
  text-align: center;
  color: #f3efe7;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
}
.fm-quick-view .qv-add-cart {
  flex: 1;
  height: 44px;
  border: 1px solid #C9A236;
  background: #C9A236;
  color: #000000;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.fm-quick-view .qv-add-cart:hover:not(:disabled) { background: #C9A236; border-color: #C9A236; }
.fm-quick-view .qv-add-cart:disabled { opacity: 0.6; cursor: not-allowed; }

.fm-quick-view .qv-wishlist {
  width: 44px; height: 44px;
  border-radius: var(--fm-radius-circle);
  border: 1px solid rgba(232,220,192,0.4);
  background: none;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.fm-quick-view .qv-wishlist svg { width: 16px; height: 16px; stroke: #C9A236; fill: none; stroke-width: 1.5; }
.fm-quick-view .qv-wishlist:hover { background: #000000; border-color: #000000; }
.fm-quick-view .qv-wishlist:hover svg { stroke: #ffffff; }
.fm-quick-view .qv-wishlist.is-active { background: #000000; border-color: #000000; }
.fm-quick-view .qv-wishlist.is-active svg { stroke: #ffffff; fill: #ffffff; }

.fm-quick-view .qv-view-full {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #C9A236;
  text-decoration: none;
  transition: color 0.2s ease;
}
.fm-quick-view .qv-view-full:hover { color: #e8dcc0; }

@media (max-width: 720px) {
  /* Full-screen on mobile rather than a partial bottom sheet  max-height
     was 92vh (an 8vh gap left showing whatever's behind the modal at the
     very top of the screen), height now fills the viewport exactly. */
  .fm-quick-view { padding: 0; align-items: stretch; }
  .fm-quick-view .qv-panel { grid-template-columns: 1fr; width: 100%; height: 100vh; max-height: 100vh; max-width: 100%; border: none; }
  .fm-quick-view .qv-media { aspect-ratio: 4 / 3; }
  .fm-quick-view .qv-info { padding: 28px 22px; }
}

/* =========================================================
   LIGHT THEME  literal hex, same situation as product-card.css (which
   this file visually extends  see the file-header comment). The modal's
   own dim backdrop and .qv-media's cloned product-media photo placeholder
   stay dark in both themes, same reasoning as product-card.css's own
   light-theme comment.
   ========================================================= */
html[data-theme="light"] .fm-quick-view .qv-panel {
  background: #ffffff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}
html[data-theme="light"] .fm-quick-view .qv-close { border-color: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.04); color: #000000; }
html[data-theme="light"] .fm-quick-view .qv-close:hover { background: #000000; border-color: #000000; color: #ffffff; }
html[data-theme="light"] .fm-quick-view .qv-cat { color: #C9A236; }
html[data-theme="light"] .fm-quick-view .qv-title { color: #000000; }
html[data-theme="light"] .fm-quick-view .qv-price .now { color: #C9A236; }
html[data-theme="light"] .fm-quick-view .qv-qty { border-color: rgba(0, 0, 0, 0.15); }
html[data-theme="light"] .fm-quick-view .qv-qty-btn { color: #000000; }
html[data-theme="light"] .fm-quick-view .qv-qty-input { border-left-color: rgba(0, 0, 0, 0.15); border-right-color: rgba(0, 0, 0, 0.15); color: #000000; }
html[data-theme="light"] .fm-quick-view .qv-wishlist { border-color: rgba(0, 0, 0, 0.15); }
html[data-theme="light"] .fm-quick-view .qv-wishlist svg { stroke: #000000; }
html[data-theme="light"] .fm-quick-view .qv-wishlist:hover,
html[data-theme="light"] .fm-quick-view .qv-wishlist.is-active { background: #000000; border-color: #000000; }
html[data-theme="light"] .fm-quick-view .qv-wishlist:hover svg,
html[data-theme="light"] .fm-quick-view .qv-wishlist.is-active svg { stroke: #ffffff; fill: #ffffff; }
html[data-theme="light"] .fm-quick-view .qv-view-full { color: #C9A236; }
html[data-theme="light"] .fm-quick-view .qv-view-full:hover { color: #6b551f; }