/* ==========================================================================
   Product dialog — the home page's quick view (#qv) and the catalogue
   page's lightbox (#galLightbox) share this layout; the lightbox only adds
   its own carousel overlay. The generic .dialog/.dialog-backdrop pieces
   are in css/base.css. Behaviour: js/utils/overlay.js.
   ========================================================================== */

/* --- Quick view dialog ---------------------------------------------------*/
/* Toggled via the hidden attribute (not a class), so a transition can't run —
   transitions don't fire across a display:none boundary. An animation does,
   since it starts fresh the moment the element re-enters layout. Same
   cubic-bezier(0.16,1,0.3,1) "considered reveal" curve as .cp-tile.reveal
   elsewhere on the page (a quick ease-out reads as a twitch for something
   this size) — scrim/box durations offset slightly so the box visibly
   trails the fade instead of both snapping into place together. */
.qv { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--space-6); animation: qv-scrim-in 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.qv[hidden] { display: none; }
.qv-box {
  position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8); width: min(880px, 100%);
  background: var(--color-bg); border-radius: var(--radius-lg);
  padding: var(--space-8); box-shadow: var(--shadow-lg);
  max-height: 88vh; overflow: auto;
  animation: qv-box-in 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes qv-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes qv-box-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qv, .qv-box { animation: none; } }
.qv-close {
  position: absolute; inset-inline-end: var(--space-4); top: var(--space-4); z-index: 1;
  font-size: 20px; background: var(--color-surface);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.qv-close:hover { background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface)); transform: rotate(90deg); }
/* 1/1, not the old 4/5, plus contain (not .ph-photo's cover) and a matching
   surface fill — same fix as .ph-prod on the catalogue cards below, for the
   same reason: every real catalogue photo is a square render, and cropping
   it into a portrait frame here undid the "no cropping" work those cards
   already do the moment a shopper opens quick view to look closer. */
.ph-qv {
  aspect-ratio: 1 / 1;
  background-size: contain; background-repeat: no-repeat; background-color: var(--color-surface);
}
/* Left/right browsing through a product's full photo set (see
   js/components/quick-view.js) — same positioning + navy/gold .prod-slider-nav button
   this page already uses for the hero arrows and slider rows, reused here
   rather than inventing another arrow style, and the same bottom-center
   pill counter .gal-lightbox-counter already established on catalogue.html's
   own lightbox. .qv-media (not .ph-qv) is the positioning root so the
   arrows sit over the photo without being clipped by its own overflow. */
.qv-media { position: relative; }
/* Hidden until the dialog itself is hovered (or a keyboard user tabs into
   it) — same reveal-on-hover/always-on-touch convention as the grid's own
   .prod-img-nav, so the dialog opens on a clean, uncluttered photo instead
   of two circles sitting on it at rest. Triggered by :hover on .qv-box (the
   whole dialog), not just .qv-media (the photo alone), so moving toward the
   arrows from the description/spec side of the dialog doesn't make them
   vanish right before the pointer reaches them. */
.qv-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  opacity: 0;
  /* Same soft, slower fade as the grid's own .prod-img-nav above. */
  transition: opacity 0.35s ease-out, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.qv-box:hover .qv-nav, .qv-box:focus-within .qv-nav { opacity: 1; }
@media (hover: none) {
  .qv-nav { opacity: 1; }
}
.qv-prev { inset-inline-start: var(--space-3); }
.qv-next { inset-inline-end: var(--space-3); }
[dir="rtl"] .qv-nav svg { transform: scaleX(-1); }
.qv-counter {
  position: absolute; z-index: 1; bottom: var(--space-3); left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 12px; font-weight: 600; color: #fff;
  background: color-mix(in srgb, #000 55%, transparent);
  padding: 4px 12px; border-radius: 999px;
  unicode-bidi: isolate;
}
.qv-body .dialog-title { font-size: 28px; margin-bottom: var(--space-2); }
.qv-body .dialog-body { color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.qv-specs {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4);
  margin: var(--space-6) 0; padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
}
.qv-specs dt { font-weight: 600; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.qv-specs dd { margin: 0; }

/* --- Lightbox -------------------------------------------------------------
   Reuses .dialog/.qv-box/.dialog-backdrop wholesale (see the quick-view
   rules above) — only the media column needs its own carousel-
   overlay treatment on top of that shared 2-column layout. */
.gal-lightbox-media { position: relative; }
.gal-lightbox-ph { background-size: cover; background-position: center; }
.gal-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 1;
}
.gal-lightbox-prev { inset-inline-start: var(--space-3); }
.gal-lightbox-next { inset-inline-end: var(--space-3); }
[dir="rtl"] .gal-lightbox-nav svg { transform: scaleX(-1); }
.gal-lightbox-counter {
  position: absolute; z-index: 1; bottom: var(--space-3); left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 12px; font-weight: 600; color: #fff;
  background: color-mix(in srgb, #000 55%, transparent);
  padding: 4px 12px; border-radius: 999px;
  unicode-bidi: isolate;
}

@media (max-width: 1020px) {
  .qv-box { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Quick-view dialog: --space-8 padding on all sides was eating a third of
     the available width on a ~360px phone before any actual content
     started. */
  .qv-box { padding: var(--space-4); gap: var(--space-4); }
  .qv { padding: var(--space-4); }
}