/* ============================================================
   LovelyHair — Quick View modal. Tokens only.
   Desktop: centered dialog. Mobile: bottom sheet.
   ============================================================ */

.lh-qv {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.lh-qv[hidden] { display: none; }

.lh-qv__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--lh-stone-900-rgb), 0.5);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.lh-qv.is-open .lh-qv__overlay { opacity: 1; }

.lh-qv__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.98);
  display: flex;
  width: min(92vw, 920px);
  max-height: 90vh;
  overflow: hidden;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-emphasis);
}
.lh-qv.is-open .lh-qv__dialog {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.lh-qv__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 5;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: rgba(var(--lh-white-rgb), 0.92);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-subtle);
  color: var(--text-heading);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-qv__close:hover { background: #fff; color: var(--color-primary); }

/* ---- Loading ---- */
.lh-qv__loading {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 420px;
}
/* Skeleton: the gallery and info columns, as the loaded view lays them out. */
.lh-qv__skel { place-items: stretch; grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); }
.lh-qv__skel-img { aspect-ratio: 4 / 5; width: 100%; max-height: 46vh; border-radius: var(--radius-md); }
.lh-qv__skel-info { display: grid; align-content: start; gap: var(--space-3); }
@media (min-width: 750px) {
  .lh-qv__skel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--space-6); }
  .lh-qv__skel-img { max-height: none; }
}
.lh-qv__loading[hidden] { display: none; }
.lh-qv__error { padding: var(--space-8); color: var(--text-muted); font-size: var(--font-body-sm); text-align: center; }

/* ---- Content grid ---- */
.lh-qv__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 0;
}
.lh-qv__content[hidden] { display: none; }

/* ---- Gallery ---- */
.lh-qv__gallery {
  position: relative;
  background: var(--lh-img-loader, none), var(--surface-image);
  overflow: hidden;
  min-height: 360px;
}
.lh-qv__stage { position: absolute; inset: 0; }
.lh-qv__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.lh-qv__stage img.is-current { opacity: 1; }

.lh-qv__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  background: var(--color-sale);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  line-height: 1;
}
.lh-qv__badge[hidden] { display: none; }

.lh-qv__image-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(var(--lh-stone-50-rgb), 0.7);
  backdrop-filter: blur(6px);
}
.lh-qv__image-loader[hidden] { display: none; }

.lh-qv__dots {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 6px;
}
.lh-qv__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(var(--lh-white-rgb), 0.55);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-qv__dot.is-active { background: #fff; width: 20px; }

/* ---- Info ---- */
.lh-qv__info {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  max-height: 90vh;
  overflow-y: auto;
}
.lh-qv__title {
  font-family: var(--font-display);
  font-size: var(--font-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  color: var(--text-heading);
  text-decoration: none;
  margin-bottom: var(--space-2);
  /* Keep the title clear of the absolutely-positioned close button (36px wide,
     inset right var(--space-3)) so it is never overlapped or obscured. */
  padding-right: var(--space-12);
}
.lh-qv__title:hover { color: var(--color-primary); }

.lh-qv__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.lh-qv__price-current {
  font-family: var(--font-display);
  font-size: var(--font-h3);
  font-weight: var(--weight-bold);
  color: var(--text-price);
}
.lh-qv__price-compare {
  font-size: var(--font-body-sm);
  color: var(--text-muted);
  text-decoration: line-through;
}
/* "Save $X" badge — green to match the product details page (not red). */
.lh-qv__price-save {
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  color: var(--lh-white);
  background: var(--color-savings);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}

.lh-qv__desc {
  margin-bottom: var(--space-4);
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
  /* flex-shrink: 0 — inside the max-height column an overflow:hidden item has a
     min-height of 0, so it shrank and cut its second line in half. */
  flex-shrink: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lh-qv__desc[hidden] { display: none; }

/* ---- Variant option pills ---- */
.lh-qv__opt-group { margin-bottom: var(--space-4); }
.lh-qv__opt-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.lh-qv__opt-label span { color: var(--text-muted); font-weight: var(--weight-regular); }
.lh-qv__opt-values { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lh-qv__opt {
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}
@media (hover: hover) and (pointer: fine) { .lh-qv__opt:hover { border-color: var(--color-primary); } }
.lh-qv__opt.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.lh-qv__opt[aria-disabled="true"] {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Phones (owner, 2026-10-31): each option group is ONE line. When its values do not fit, the line
   becomes a swipeable rail that bleeds to the sheet's edges (the cut-off pill says "there is more"),
   and quick-view.js slides the chosen pill to the middle, as the product page's thumbnail rail does.
   The block padding keeps the focus ring inside the rail's clip box. */
@media (max-width: 749px) {
  .lh-qv__opt-values {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--space-5);
    scrollbar-width: none;
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-5));
    padding: var(--space-1) var(--space-5);
  }
  .lh-qv__opt-values::-webkit-scrollbar { display: none; }
  .lh-qv__opt { flex: none; white-space: nowrap; scroll-snap-align: start; }
}

/* ---- Actions ---- */
.lh-qv__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
}
.lh-qv__qty {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lh-qv__qty-btn {
  width: 40px;
  height: 46px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-qv__qty-btn:hover { background: var(--surface-sunken); color: var(--text-heading); }
.lh-qv__qty-input {
  width: 40px;
  height: 46px;
  text-align: center;
  border: none;
  background: none;
  font-size: var(--font-body-md);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  -moz-appearance: textfield;
}
.lh-qv__qty-input::-webkit-outer-spin-button,
.lh-qv__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.lh-qv__atc {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 46px;
  padding: 0 var(--space-5);
  font-family: var(--font-body);
  font-size: var(--font-body-md);
  font-weight: var(--weight-semibold);
  color: var(--color-on-action);
  background: var(--color-action);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-qv__atc:hover:not(:disabled) { background: var(--color-action-hover); transform: translateY(-1px); }
.lh-qv__atc:disabled { opacity: 0.5; cursor: not-allowed; }
.lh-qv__atc.is-added { background: var(--color-instock); }

.lh-qv__full {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-4);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
}
.lh-qv__full:hover { text-decoration: underline; }

.lh-qv__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
}
.lh-qv__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-caption);
  color: var(--text-muted);
}
.lh-qv__trust-item .lh-icon { color: var(--color-primary); flex-shrink: 0; }

/* While dragging the sheet, follow the finger with no transition */
.lh-qv__dialog.is-dragging { transition: none; }

/* ---- Mobile bottom sheet ---- */
@media (max-width: 749px) {
  .lh-qv__dialog {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 92vh;
    padding-top: var(--space-4);
    transform: translateY(100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .lh-qv.is-open .lh-qv__dialog { transform: translateY(0); }
  /* Grabber handle — affordance for swipe-down to close */
  .lh-qv__dialog::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    width: 40px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
  }
  .lh-qv__content {
    grid-template-columns: 1fr;
    max-height: calc(92vh - var(--space-4));
    overflow-y: auto;
  }
  /* Explicit height, not aspect-ratio: the gallery's children are all absolute,
     so inside this scrolling grid an aspect-ratio box sized its row to 0px and
     the photo painted over the title, price and first option row. Capped at
     40vh so title, price and the first option group sit in the first view;
     `contain` shows the whole wig in that short, wide box instead of cropping. */
  .lh-qv__gallery { min-height: 0; height: min(100vw, 40vh); }
  .lh-qv__stage img { object-fit: contain; }
  .lh-qv__info { max-height: none; overflow: visible; padding: var(--space-4) var(--space-5) var(--space-5); }
}

/* Price with the review rating at its right (as on the product page). */
.lh-qv__price-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.lh-qv__price-row .lh-qv__price { min-width: 0; flex: 0 1 auto; flex-wrap: nowrap; white-space: nowrap; }
.lh-qv__price-row .lh-qv__rating { flex: none; }
.lh-qv__rating[hidden] { display: none; }
.lh-qv__rating .lh-rating { display: inline-flex; align-items: center; gap: var(--space-2); }
.lh-qv__rating .lh-rating__count { font-size: var(--font-caption); color: var(--text-muted); white-space: nowrap; }
@media (max-width: 749px) {
  .lh-qv__title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* The info column never grows past the sheet (a long one-line title widened it on phones). */
.lh-qv__info, .lh-qv__price-row { min-width: 0; max-width: 100%; }
@media (max-width: 749px) {
  .lh-qv__title { width: 100%; max-width: 100%; padding-right: 0; } /* the close button sits over the image on phones */
  .lh-qv__content > * { min-width: 0; }
  /* Price and rating share one line on a phone, as on the product page. */
  .lh-qv__price-row .lh-qv__price { gap: var(--space-2); font-size: 0.92em; }
}
/* The divider belongs to the whole price line (price + rating), not the price alone. */
.lh-qv__price-row { margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.lh-qv__price-row .lh-qv__price { margin: 0; padding: 0; border: 0; }

/* Phones (owner, 2026-10-29): no "View full details"; quantity + Add to cart + promises pinned. */
@media (max-width: 749px) {
  .lh-qv__full { display: none !important; }
  .lh-qv__buybar {
    position: sticky; bottom: 0; z-index: 4; display: grid; gap: var(--space-3);
    margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface-card); border-top: 1px solid var(--border-subtle);
  }
  .lh-qv__buybar .lh-qv__trust { margin: 0; }
}

/* Desktop (owner, 2026-10-31): the title runs to two lines at most; the full name stays in its
   `title` tooltip and on the product page. */
@media (min-width: 750px) {
  .lh-qv__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    flex-shrink: 0;
  }
}