/* ============================================================
   LovelyHair PDP — gallery + buy block + tabs + sticky ATC.
   Tokens only. Behaviour in product.js.
   ============================================================ */

.lh-pdp-section { padding-block: var(--space-8) var(--section-pad-bottom); }

/* ---- Breadcrumb ---- */
.lh-pdp__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  font-size: var(--font-body-sm);
  color: var(--text-muted);
}
.lh-pdp__breadcrumb a { color: var(--text-muted); transition: var(--transition-fast); }
.lh-pdp__breadcrumb a:hover { color: var(--color-primary); }
.lh-pdp__breadcrumb .lh-icon { color: var(--text-subtle); }
.lh-pdp__breadcrumb [aria-current="page"] { color: var(--text-body); font-weight: var(--weight-medium); }

/* ---- Layout ---- */
.lh-pdp {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

/* ===================== Gallery ===================== */
.lh-pdp__gallery { display: grid; gap: var(--space-3); align-content: start; }
.lh-pdp__stage {
  position: relative;
  aspect-ratio: 1 / var(--lh-pdp-aspect, 1);
  background: var(--lh-img-loader, none), var(--surface-image);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lh-pdp__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base);
}
.lh-pdp__slide.is-active { opacity: 1; visibility: visible; }
.lh-pdp__stage-img,
.lh-pdp__placeholder { width: 100%; height: 100%; object-fit: cover; }
/* The branded player (.lh-video) fills the stage itself; external video / 3D
   embeds fill it here. `contain` on the player avoids cropping vertical clips. */
.lh-pdp__stage-media,
.lh-pdp__stage-embed { width: 100%; height: 100%; display: block; border: 0; }

.lh-pdp__sale-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 3;
  background: var(--color-savings);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--font-caption);
  font-weight: var(--weight-bold);
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  line-height: 1;
}

.lh-pdp__thumbs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.lh-pdp__thumbs::-webkit-scrollbar { display: none; }
.lh-pdp__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--lh-img-loader-sm, none), var(--surface-image);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lh-pdp__thumb:hover { border-color: var(--border-strong); }
.lh-pdp__thumb.is-active { border-color: var(--color-primary); }

/* Play affordance so a video thumb reads as playable, not as another still. */
.lh-pdp__thumb--playable { position: relative; }
.lh-pdp__thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(var(--lh-stone-900-rgb), 0.28);
  pointer-events: none;
}
.lh-pdp__thumb-play svg { filter: drop-shadow(0 1px 2px rgba(var(--lh-stone-900-rgb), 0.6)); }

/* ===================== Buy block ===================== */
.lh-pdp__vendor {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-size: var(--font-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-primary);
}
.lh-pdp__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-h1);
  line-height: var(--leading-heading);
  color: var(--text-heading);
}
.lh-pdp__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.lh-pdp__rating { display: inline-flex; }
.lh-pdp__sku { font-size: var(--font-caption); color: var(--text-muted); }

/* Price + rating on one line (luvme-product-details-1.webp) */
.lh-pdp__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.lh-pdp__price-row .lh-pdp__price { margin-bottom: 0; }
.lh-pdp__price-row .lh-pdp__rating { flex-shrink: 0; }

.lh-pdp__price { margin-bottom: var(--space-5); }
/* "4 interest-free payments of $X with [Klarna][Afterpay]" (owner, 2026-11-01), right under the price. */
/* One inline line; "with" and the two pills wrap together, so a phone reads "with [K][A]" on line 2. */
.lh-pdp__in4 {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: var(--font-body-sm); line-height: var(--leading-snug); color: var(--text-body);
}
.lh-pdp__in4[hidden] { display: none; }
.lh-pdp__in4 [data-pdp-in4-amount] { font-variant-numeric: tabular-nums; }
.lh-pdp__in4-marks { display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: middle; white-space: nowrap; }
.lh-pdp__in4-mark { display: block; height: 24px; width: auto; }
.lh-pdp__intro {
  margin-bottom: var(--space-5);
  font-size: var(--font-body-md);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

/* ---- Options (variant pills) ---- */
.lh-pdp__form { margin: 0; }
.lh-pdp__options { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-6); }
.lh-pdp__option { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.lh-pdp__option-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.lh-pdp__option-value { color: var(--text-muted); font-weight: var(--weight-regular); }
.lh-pdp__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lh-pdp__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 10px 16px;
  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);
}
.lh-pdp__pill:hover { border-color: var(--color-primary); }
.lh-pdp__pill-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.lh-pdp__pill.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.lh-pdp__pill-input:focus-visible + span {
  outline: none;
}
.lh-pdp__pill:has(.lh-pdp__pill-input:focus-visible) {
  box-shadow: var(--ring-focus);
}

/* ---- Purchase row (qty + ATC) ---- */
.lh-pdp__purchase { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.lh-pdp__qty {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lh-pdp__qty-btn {
  width: 44px;
  height: 52px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-pdp__qty-btn:hover { background: var(--surface-sunken); color: var(--text-heading); }
.lh-pdp__qty-input {
  width: 44px;
  height: 52px;
  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-pdp__qty-input::-webkit-outer-spin-button,
.lh-pdp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.lh-pdp__atc {
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-6);
  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-pdp__atc:hover:not(:disabled) { background: var(--color-action-hover); transform: translateY(-1px); }
.lh-pdp__atc:disabled { opacity: 0.5; cursor: not-allowed; }
.lh-pdp__atc.is-added { background: var(--color-instock); }
.lh-pdp__atc.is-loading > .lh-icon,
.lh-pdp__atc.is-loading > [data-pdp-atc-label] { visibility: hidden; }
.lh-pdp__atc-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.lh-pdp__atc-loader[hidden] { display: none; }

.lh-pdp__buy-now {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--color-primary);
  color: var(--color-on-action, #fff);
  font-family: var(--font-body);
  font-size: var(--font-body-md);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-pdp__buy-now:hover:not(:disabled) { background: var(--color-primary-hover); transform: translateY(-1px); }
.lh-pdp__buy-now:disabled { opacity: 0.5; cursor: not-allowed; }
/* Adding before checkout: busy, not sold out. */
.lh-pdp__buy-now.is-loading:disabled { opacity: 1; cursor: progress; }

/* ---- App blocks (immediately under the buy buttons) ----
   App-owned markup, so this owns only the gap around it — never the inside.
   The preceding buy button supplies the space above. */
.lh-pdp__apps { margin-bottom: var(--space-5); }
.lh-pdp__app-block:empty { display: none; }
.lh-pdp__app-block + .lh-pdp__app-block { margin-top: var(--space-3); }

/* ===================== Delivery estimate =====================
   Native "Pay Today" delivery-date widget beneath the buy buttons — replaces
   the third-party Essential EDD app block. Markup: snippets/lh-delivery.liquid.
   Behaviour: product.js -> initDelivery. Tokens only. */
.lh-delivery {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.lh-delivery__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--font-body-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.lh-delivery__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-body);
}
.lh-delivery__icon {
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 1px;
  /* Centred on the first line of its text (Inter's cap centre sits on the line's centre), at
     any font size: half of what the line is taller than the 20px glyph. */
  margin-top: max(0px, calc((1lh - 20px) / 2));
  color: var(--color-primary);
}
.lh-delivery__text { min-width: 0; }
.lh-delivery__date {
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  white-space: nowrap;
}
.lh-delivery__dash { margin: 0 2px; }
.lh-delivery__info {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 3px;
  color: var(--text-muted);
  cursor: help;
}
.lh-delivery__info:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-circle);
}
.lh-delivery__ship {
  margin: var(--space-2) 0 0;
  font-size: var(--font-body-sm);
  color: var(--text-muted);
}
.lh-delivery__dest {
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

/* ---- Trust row ---- */
.lh-pdp__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
}
.lh-pdp__trust li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-body-sm);
  color: var(--text-muted);
}
.lh-pdp__trust .lh-icon { color: var(--color-primary); flex-shrink: 0; }

/* Payment marks (matches the reference PDP) */
.lh-pdp__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.lh-pdp__payment-icon { height: 26px; width: auto; border-radius: var(--radius-xs); }

/* ===================== Tabs (legacy in-section; superseded by the Lovely Description section) ===================== */
.lh-pdp-tabs { margin-top: var(--space-12); }
.lh-pdp-tabs__nav {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-subtle);
}
.lh-pdp-tabs__nav::-webkit-scrollbar { display: none; }
.lh-pdp-tabs__tab {
  flex: 0 0 auto;
  position: relative;
  padding: var(--space-4) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--font-body-md);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
}
.lh-pdp-tabs__tab::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: -1px;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.lh-pdp-tabs__tab:hover { color: var(--text-heading); }
.lh-pdp-tabs__tab.is-active { color: var(--text-heading); }
.lh-pdp-tabs__tab.is-active::after { transform: scaleX(1); }

.lh-pdp-tabs__panel {
  padding-top: var(--space-6);
  max-width: var(--content-narrow);
  font-size: var(--font-body-md);
  line-height: var(--leading-body);
  color: var(--text-body);
}
.lh-pdp-tabs__panel[hidden] { display: none; }
.lh-pdp-tabs__extra { margin-top: var(--space-4); }

/* Specifications table */
.lh-pdp-specs { width: 100%; border-collapse: collapse; }
.lh-pdp-specs th,
.lh-pdp-specs td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-body-sm);
  vertical-align: top;
}
.lh-pdp-specs th {
  width: 40%;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  background: var(--surface-sunken);
}
.lh-pdp-specs td { color: var(--text-body); }

/* ===================== Sticky ATC ===================== */
.lh-pdp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -6px 24px rgba(var(--lh-stone-900-rgb), 0.1);
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-emphasis);
}
.lh-pdp-sticky.is-visible { transform: translateY(0); }
.lh-pdp-sticky__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.lh-pdp-sticky__media { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.lh-pdp-sticky__media img { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.lh-pdp-sticky__id { display: flex; flex-direction: column; min-width: 0; }
.lh-pdp-sticky__title {
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
}
.lh-pdp-sticky__price { font-size: var(--font-body-sm); color: var(--text-price); font-weight: var(--weight-bold); }
.lh-pdp-sticky__atc {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: 0 var(--space-6);
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  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-pdp-sticky__atc:hover:not(:disabled) { background: var(--color-action-hover); }
.lh-pdp-sticky__atc:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===================== Breakpoints ===================== */
@media (min-width: 768px) {
  .lh-pdp__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lh-pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
  .lh-pdp__gallery {
    grid-template-columns: 72px 1fr;
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
  .lh-pdp__thumbs { order: -1; flex-direction: column; overflow-x: visible; overflow-y: auto; max-height: 540px; }
  .lh-pdp__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Sticky add-to-cart bar is shown on ALL breakpoints (incl. desktop) when the
   buy block scrolls out of view — toggled via .is-visible in product.js. */
.lh-pdp-sticky__inner { max-width: var(--container-max, 1280px); margin-inline: auto; padding-inline: var(--space-5); }

/* ===================== Title / subtitle ===================== */
.lh-pdp__title--sm { font-size: var(--font-h3); }
.lh-pdp__title--md { font-size: var(--font-h2); }
.lh-pdp__title--lg { font-size: var(--font-h1); }
.lh-pdp__subtitle {
  margin: 0 0 var(--space-4);
  font-size: var(--font-body-sm);
  color: var(--text-muted);
  line-height: var(--leading-body);
}

/* Mobile: compact, body-font title (per spec: 18px / Inter / 600 / auto wrap). */
@media (max-width: 767px) {
  .lh-pdp__title,
  .lh-pdp__title--sm,
  .lh-pdp__title--md,
  .lh-pdp__title--lg {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: var(--weight-semibold);
    line-height: 1.35;
    text-wrap: auto;
  }

  /* Mobile gallery overlay icons are hidden by default; merchant opts in.
     NOTE: the base `.lh-pdp__zoom`/`.lh-pdp__nav { display: grid }` rules live
     later in the file, so these defaults need matching/higher specificity
     (scoped via `.lh-pdp-section`) to actually win on mobile — otherwise the
     icons always show regardless of the setting. The opt-in selectors below
     are more specific still, so the merchant toggle stays effective. */
  .lh-pdp-section .lh-pdp__zoom { display: none; }
  .lh-pdp-section[data-mobile-zoom="true"] .lh-pdp__zoom { display: grid; }
  .lh-pdp-section .lh-pdp__nav { display: none; }
  .lh-pdp-section[data-mobile-nav="true"] .lh-pdp__nav { display: grid; }

  /* Flush gallery — edge-to-edge preview directly beneath the header
     (no top gap, no side padding). product-page-1.webp. */
  .lh-pdp-section[data-mobile-flush="true"] { padding-top: 0; }
  .lh-pdp-section[data-mobile-flush="true"] .lh-pdp__breadcrumb { display: none; }
  .lh-pdp-section[data-mobile-flush="true"] .lh-pdp__gallery {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    gap: var(--space-2);
  }
  .lh-pdp-section[data-mobile-flush="true"] .lh-pdp__stage { border-radius: 0; }
  /* Keep the thumbnail rail comfortably inset from the screen edges. */
  .lh-pdp-section[data-mobile-flush="true"] .lh-pdp__thumbs { padding-inline: var(--space-4); }
}

/* Variant helper note */
.lh-pdp__helper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  font-size: var(--font-body-sm);
  color: var(--text-muted);
}
.lh-pdp__helper .lh-icon { color: var(--color-primary); flex-shrink: 0; }

/* ===================== Key features (buy column) ===================== */
.lh-pdp__features {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.lh-pdp__features-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-heading);
}
/* Collapsible feature accordions (product-details-1.webp) */
.lh-pdp__features-list { display: block; margin: 0; padding: 0; list-style: none; }
.lh-pdp__feature { border-bottom: 1px solid var(--border-subtle); }
.lh-pdp__feature:first-child { border-top: 1px solid var(--border-subtle); }
.lh-pdp__feature-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text-heading);
  font-family: var(--font-body);
}
.lh-pdp__feature-head--static { cursor: default; }
.lh-pdp__feature-title {
  flex: 1;
  min-width: 0;
  font-size: var(--font-body-md);
  font-weight: var(--weight-semibold);
}
.lh-pdp__feature-caret {
  flex-shrink: 0;
  color: var(--text-subtle);
  transition: transform var(--duration-base) var(--ease-standard);
}
.lh-pdp__feature.is-open .lh-pdp__feature-caret { transform: rotate(180deg); color: var(--color-primary); }

.lh-pdp__features-check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-circle);
  background: var(--color-savings-soft);
  color: var(--color-savings);
}

/* Smooth height animation via grid-template-rows 0fr → 1fr */
.lh-pdp__feature-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-standard);
}
.lh-pdp__feature.is-open .lh-pdp__feature-body { grid-template-rows: 1fr; }
.lh-pdp__feature-bodyinner { overflow: hidden; min-height: 0; }
.lh-pdp__feature-bodyinner p {
  margin: 0 0 var(--space-4) calc(22px + var(--space-3));
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .lh-pdp__feature-body { transition: none; }
}

/* ===================== Buy Now (dynamic checkout) — DS styling ===================== */
.lh-pdp__dynamic .shopify-payment-button__button {
  min-height: 52px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
}
/* "Buy it now" = primary brand CTA (amber), distinct from the black ATC. */
.lh-pdp__dynamic .shopify-payment-button__button--unbranded {
  background: var(--color-primary);
  color: var(--lh-white);
  border: none;
  transition: var(--transition-fast);
}
.lh-pdp__dynamic .shopify-payment-button__button--unbranded:hover { background: var(--color-primary-hover); }
.lh-pdp__dynamic .shopify-payment-button__more-options { color: var(--text-muted); font-size: var(--font-body-sm); }

/* ===================== Gallery zoom + lightbox ===================== */
.lh-pdp__zoom {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 4;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: rgba(var(--lh-white-rgb), 0.9);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-subtle);
  color: var(--text-heading);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-pdp__zoom:hover { color: var(--color-primary); background: #fff; }

/* Gallery swipe arrows — subtle light-transparent overlay buttons, more opaque
   on hover. Hovering them must NOT trigger the magnify zoom (handled in JS). */
.lh-pdp__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-circle, 999px);
  background: rgba(255, 255, 255, 0.45);
  color: var(--text-heading);
  cursor: pointer;
  opacity: 0.6;
  backdrop-filter: blur(2px);
  transition: opacity var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.lh-pdp__nav--prev { left: var(--space-3); }
.lh-pdp__nav--next { right: var(--space-3); }
.lh-pdp__nav:hover { opacity: 1; background: rgba(255, 255, 255, 0.9); }
.lh-pdp__nav:focus-visible { opacity: 1; outline: none; box-shadow: var(--ring-focus); }
@media (hover: none) {
  .lh-pdp__nav { opacity: 0.85; }
}

.lh-pdp__stage-img { transition: transform var(--duration-slow) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .lh-pdp__stage { cursor: zoom-in; }
  .lh-pdp__stage.is-zooming .lh-pdp__slide.is-active .lh-pdp__stage-img { transform: scale(1.7); }
  /* A playing video is not zoomable — keep the normal cursor so the native
     controls stay usable instead of reading as a magnify surface. */
  .lh-pdp__stage:has(.lh-pdp__slide.is-active:not([data-media-type="image"])) { cursor: default; }
}

.lh-pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base);
}
.lh-pdp-lightbox.is-open { opacity: 1; visibility: visible; }
.lh-pdp-lightbox[hidden] { display: none; }
.lh-pdp-lightbox__overlay { position: absolute; inset: 0; background: rgba(var(--lh-stone-900-rgb), 0.9); }
.lh-pdp-lightbox__stage {
  position: relative;
  z-index: 1;
  width: min(92vw, 900px);
  height: min(86vh, 1100px);
}
.lh-pdp-lightbox__slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity var(--duration-base) var(--ease-standard); }
.lh-pdp-lightbox__slide.is-active { opacity: 1; visibility: visible; }
.lh-pdp-lightbox__img { width: 100%; height: 100%; object-fit: contain; }
.lh-pdp-lightbox__media,
.lh-pdp-lightbox__embed { width: 100%; height: 100%; display: block; border: 0; }
.lh-pdp-lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: rgba(var(--lh-white-rgb), 0.12);
  border: 1px solid var(--border-on-dark);
  color: #fff;
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-pdp-lightbox__close:hover { background: rgba(var(--lh-white-rgb), 0.24); }
.lh-pdp-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: rgba(var(--lh-white-rgb), 0.12);
  border: 1px solid var(--border-on-dark);
  color: #fff;
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-pdp-lightbox__nav:hover { background: rgba(var(--lh-white-rgb), 0.24); }
.lh-pdp-lightbox__nav--prev { left: var(--space-4); }
.lh-pdp-lightbox__nav--next { right: var(--space-4); }
.lh-pdp-lightbox__counter {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(var(--lh-white-rgb), 0.14);
  color: #fff;
  font-size: var(--font-body-sm);
}

/* ===================== Wig care tab ===================== */
.lh-pdp-care { display: grid; gap: var(--space-6); }
.lh-pdp-care__media img { width: 100%; border-radius: var(--radius-lg); }
.lh-pdp-care__intro { margin: 0 0 var(--space-4); color: var(--text-body); }
.lh-pdp-care__tips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.lh-pdp-care__tips li { display: flex; align-items: flex-start; gap: var(--space-3); }
.lh-pdp-care__step {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  color: var(--color-on-action, #fff);
  font-size: var(--font-caption);
  font-weight: var(--weight-bold);
}
@media (min-width: 768px) {
  .lh-pdp-care { grid-template-columns: 300px 1fr; align-items: start; }
}

/* ===================== Reviews (Judge.me) ===================== */
.lh-pdp-reviews { margin-top: 0; padding-top: var(--space-12); border-top: 1px solid var(--border-subtle); }
.lh-pdp-reviews__head { text-align: center; margin-bottom: var(--section-head-gap); }
.lh-pdp-reviews__title { margin: var(--space-2) 0 0; font-size: var(--font-h2); color: var(--text-heading); }
.lh-pdp-reviews__placeholder {
  text-align: center;
  padding: var(--space-10);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: var(--font-body-sm);
}

/* Native review list (rendered from judgeme.review_widget_data) */
.lh-pdp-reviews__summary {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-8);
}
.lh-pdp-reviews__score { display: inline-flex; align-items: center; gap: var(--space-3); }
.lh-pdp-reviews__score-num { font-family: var(--font-display); font-size: var(--font-h2); color: var(--text-heading); line-height: 1; }
.lh-pdp-reviews__score-count { font-size: var(--font-body-sm); color: var(--text-muted); }
.lh-pdp-reviews__list {
  display: grid;
  gap: var(--space-5);
  max-width: var(--content-narrow, 760px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .lh-pdp-reviews__list { grid-template-columns: 1fr 1fr; max-width: 980px; } }
.lh-pdp-review {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.lh-pdp-review__top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.lh-pdp-review__avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle, 999px);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  font-size: var(--font-body-sm);
}
.lh-pdp-review__who { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.lh-pdp-review__author { font-weight: var(--weight-semibold); color: var(--text-heading); font-size: var(--font-body-sm); }
.lh-pdp-review__verified { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-caption); color: var(--lh-success, var(--color-instock)); }
.lh-pdp-review__title { margin: 0 0 var(--space-1); font-weight: var(--weight-semibold); color: var(--text-heading); }
.lh-pdp-review__body { font-size: var(--font-body-sm); color: var(--text-body); line-height: var(--leading-body); }
.lh-pdp-review__media { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.lh-pdp-review__media-img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
.lh-pdp-review__meta { margin-top: var(--space-3); display: flex; gap: var(--space-1); font-size: var(--font-caption); color: var(--text-muted); }

/* ===================== Tab buttons with icons ===================== */
.lh-pdp-tabs__tab { display: inline-flex; align-items: center; gap: var(--space-2); }
.lh-pdp-tabs__tab .lh-icon { color: var(--text-subtle); transition: var(--transition-fast); }
.lh-pdp-tabs__tab.is-active .lh-icon { color: var(--color-primary); }

@media (prefers-reduced-motion: reduce) {
  .lh-pdp__slide { transition: opacity var(--duration-fast) linear; }
  .lh-pdp-sticky { transition: none; }
  .lh-pdp__stage-img { transition: none; }
  .lh-pdp__stage.is-zooming .lh-pdp__slide.is-active .lh-pdp__stage-img { transform: none; }
}

/* ===================== Size guide =====================
   Mobile-first: bottom sheet on phones, centred dialog from 750px — matching
   the QuickView modal so the PDP has one modal language. Tokens only.
   Markup: snippets/size-guide.liquid. Behaviour: product.js → initSizeGuide. */

/* ---- Trigger (sits on the option label) ---- */
.lh-pdp__size-guide {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-body-xs);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-pdp__size-guide:hover { color: var(--color-primary-hover); }

/* ---- Modal shell ---- */
.lh-sg {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.lh-sg[hidden] { display: none; }
.lh-sg__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-sg.is-open .lh-sg__overlay { opacity: 1; }

.lh-sg__dialog {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 88vh;
  overflow: hidden;
  background: var(--surface-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-xl);
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-emphasis);
}
.lh-sg.is-open .lh-sg__dialog { transform: translateY(0); }
.lh-sg__dialog:focus { outline: none; }

.lh-sg__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--text-body);
  background: var(--surface-sunken);
  border: 0;
  border-radius: var(--radius-circle);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-sg__close:hover { background: var(--border-subtle); }

/* ---- Head / body / foot ---- */
.lh-sg__head {
  flex-shrink: 0;
  padding: var(--space-5) var(--space-12) var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.lh-sg__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-h4);
  color: var(--text-heading);
}
.lh-sg__product {
  margin: var(--space-1) 0 0;
  font-size: var(--font-body-xs);
  color: var(--text-muted);
}
.lh-sg__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  -webkit-overflow-scrolling: touch;
}
/* Clear separation between stacked guides (length -> lace/size, -> measure),
   set just before the next guide's title — see product-details-3.webp. */
.lh-sg__section + .lh-sg__section {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
}
.lh-sg__subtitle {
  margin: 0 0 var(--space-2);
  font-size: var(--font-body-md);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
/* Reference diagram inserted between a guide's title and its description. */
.lh-sg__figure {
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunken);
}
.lh-sg__figure img {
  display: block;
  width: 100%;
  height: auto;
}
.lh-sg__note {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--font-body-xs);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.lh-sg__note--flag {
  align-items: flex-start;
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  color: var(--text-body);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
}
.lh-sg__note--flag .lh-icon { flex-shrink: 0; color: var(--color-primary); }

/* ---- Tables ---- */
.lh-sg__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-body-sm);
}
.lh-sg__table th,
.lh-sg__table td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
}
.lh-sg__table thead th {
  font-size: var(--font-body-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--surface-sunken);
}
.lh-sg__table tbody th {
  width: 30%;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  white-space: nowrap;
}
.lh-sg__table td { color: var(--text-body); }
.lh-sg__row.is-selected { background: var(--surface-accent-soft, rgba(var(--lh-amber-500-rgb, 160, 85, 19), 0.06)); }
.lh-sg__row.is-selected tbody th,
.lh-sg__row.is-selected th { color: var(--color-primary); }

/* "Selected" tag — display:none also keeps it out of the a11y tree for the
   rows that are not selected, so the table reads correctly. */
.lh-sg__badge {
  display: none;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--color-on-action);
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  vertical-align: middle;
}
.lh-sg__row.is-selected .lh-sg__badge { display: inline-block; }

/* ---- Measuring steps ---- */
.lh-sg__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-sg__steps li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--font-body-sm);
  line-height: var(--leading-body);
  color: var(--text-body);
}
.lh-sg__steps li + li { margin-top: var(--space-3); }
.lh-sg__step {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  font-size: var(--font-body-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  background: var(--surface-sunken);
  border-radius: var(--radius-circle);
}

.lh-sg__foot {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.lh-sg__foot p {
  margin: 0;
  font-size: var(--font-body-xs);
  color: var(--text-muted);
}

/* ---- Desktop: centred dialog ---- */
@media (min-width: 750px) {
  .lh-sg__dialog {
    top: 50%;
    bottom: auto;
    left: 50%;
    width: min(92vw, 620px);
    max-height: 86vh;
    border-radius: var(--radius-lg);
    transform: translate(-50%, -48%) scale(0.98);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-emphasis);
  }
  .lh-sg.is-open .lh-sg__dialog {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lh-sg__overlay,
  .lh-sg__dialog { transition: none; }
}

/* Standalone size-guide link — used only when the product has an authored
   custom.size_guide but no length/lace option to hang the link on. */
.lh-pdp__size-guide-row { margin: 0 0 var(--space-5); }
.lh-pdp__size-guide-row .lh-pdp__size-guide { margin-left: 0; }