/* ==========================================================================
   LIVSDO — Product detail page
   ========================================================================== */

/* ==========================================================================
   Gallery + buy panel
   Desktop: an editorial image stack beside a sticky purchase panel.
   Mobile:  the same DOM becomes a scroll-snap carousel with dot indicators.
   ========================================================================== */

.pdp {
  display: grid;
  gap: clamp(1.5rem, 0.5rem + 3.5vw, 4rem);
  align-items: start;
  padding-bottom: var(--section-y);
}
@media (min-width: 992px) {
  .pdp { grid-template-columns: minmax(0, 1fr) 400px; }
}
@media (min-width: 1200px) {
  .pdp { grid-template-columns: minmax(0, 1fr) 440px; }
}

/* ---- Gallery ------------------------------------------------------------- */

.gallery { position: relative; }

.gallery__track {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 1fr 1fr;
}
/* The first image runs full width as the hero shot. */
.gallery__item:first-child { grid-column: 1 / -1; }
.gallery__item {
  position: relative;
  margin: 0;
  background: var(--c-tint);
  overflow: hidden;
}
/*
 * SHOW THE WHOLE PHOTOGRAPH.
 *
 * These rules used to crop a second time, after WordPress had already cropped
 * the file square: object-fit:cover into a 4:5 portrait box, which on a
 * landscape photograph of a long table threw away the ends of it.
 *
 * contain, not cover: the image is fitted inside the box whole. The box keeps
 * a fixed ratio so the grid still lines up, and the figure's --c-tint
 * background fills whatever the image does not — near-white, so on studio
 * photography the join is invisible.
 *
 * The ratios are landscape now, because the photography is, and they are
 * MEASURED against the supplied files rather than picked by eye. Those run
 * 1.34 to 1.87. A 16:9 lead sits almost exactly on the 1.87 studio shot that
 * leads the gallery (5% margin); 3:2 below it is the midpoint of the rest,
 * costing 11-16% on an image either side of it.
 *
 * Mixed source ratios mean some margin is unavoidable in a grid that lines
 * up. The alternative — cropping back to a single ratio — is what put a
 * corner of the table on the page in the first place.
 */
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 3 / 2;
}
.gallery__item:first-child img { aspect-ratio: 16 / 9; }

.gallery__caption {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-white);
  background: rgba(2, 24, 77, 0.72);
  padding: 5px 10px;
}

/* Zoom affordance — a button overlay so the whole image is keyboard operable. */
.gallery__zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: zoom-in;
  display: block;
  padding: 0;
}
.gallery__zoom-badge {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-navy);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .gallery__item:hover .gallery__zoom-badge { opacity: 1; }
}
.gallery__zoom:focus-visible + .gallery__zoom-badge { opacity: 1; }

.gallery__dots { display: none; }

@media (max-width: 991.98px) {
  /* One row, horizontally scrolled, snapping image to image. */
  .gallery__track {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .gallery__track::-webkit-scrollbar { display: none; }
  .gallery__item,
  .gallery__item:first-child {
    grid-column: auto;
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
  /* Landscape here too — a square box on a phone reintroduced the crop. */
  .gallery__item img,
  .gallery__item:first-child img { aspect-ratio: 3 / 2; }

  .gallery__dots {
    display: flex;
    justify-content: center;
    gap: var(--s-2);
    margin-top: var(--s-4);
  }
  .gallery__dot {
    width: 7px; height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c-hairline);
    transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .gallery__dot[aria-current='true'] { background: var(--c-blue); transform: scale(1.25); }
  .gallery__zoom-badge { opacity: 1; }
}

/* ---- Lightbox ------------------------------------------------------------ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: rgba(2, 24, 77, 0.94);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  width: auto;
  object-fit: contain;
}
.lightbox__close {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  color: var(--c-white);
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.1);
  width: 44px; height: 44px;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); color: var(--c-white); }
.lightbox__nav--prev { left: var(--s-4); transform: translateY(-50%) rotate(180deg); }
.lightbox__nav--next { right: var(--s-4); }
.lightbox__count {
  position: absolute;
  bottom: var(--s-5);
  left: 50%;
  transform: translateX(-50%);
  color: var(--c-on-dark-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
}

/* ---- Buy panel ------------------------------------------------------------ */

@media (min-width: 992px) {
  .buy-panel { position: sticky; top: 104px; }
}

.buy-panel__cat {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--s-3);
  display: block;
}
.buy-panel__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: var(--ls-display);
}
.buy-panel__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.buy-panel__price {
  font-size: var(--fs-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.buy-panel__was {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.buy-panel__save {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-navy);
  background: var(--c-lime);
  padding: 3px 8px;
}
.buy-panel__intro { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--c-muted); }

.variant-group { margin-top: var(--s-6); }
.variant-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.variant-group__label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.variant-group__value { font-size: var(--fs-xs); color: var(--c-muted); }
.variant-group__options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.buy-panel__actions {
  display: flex;
  gap: var(--s-3);
  align-items: stretch;
  margin-top: var(--s-6);
}
.buy-panel__actions .qty { height: 52px; flex: none; }
.buy-panel__actions .btn-ls { flex: 1; }
.buy-panel__wish {
  flex: none;
  width: 52px; height: 52px;
  border: var(--border-strong);
  background: var(--c-white);
  display: grid;
  place-items: center;
  color: var(--c-ink);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.buy-panel__wish:hover { background: var(--c-tint); }
.buy-panel__wish[aria-pressed='true'] {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-lime);
}
.buy-panel__wish[aria-pressed='true'] svg { fill: currentColor; }

.buy-panel__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-block: var(--s-4);
  border-top: var(--border);
  border-bottom: var(--border);
}
.buy-panel__meta-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.buy-panel__meta-dot {
  flex: none;
  width: 5px; height: 5px;
  margin-top: 7px;
  background: var(--c-lime);
}
.buy-panel__stock {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-success);
  margin-top: var(--s-4);
}
.buy-panel__stock::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* The variable product's button before a full combination is chosen.
   WooCommerce marks it with a .disabled CLASS (not the attribute), keeps it
   clickable and answers a click with its "choose options" prompt. It stays
   full brand lime - fading it read as a grey, switched-off button, which is
   the complaint this release fixes. */
.buy-panel__actions .single_add_to_cart_button.disabled,
.buy-panel__actions .single_add_to_cart_button.wc-variation-selection-needed { opacity: 1; }

/* The quantity, button and heart fill the panel's width as one row. */
.variations_form .single_variation_wrap,
.variations_form .woocommerce-variation-add-to-cart { width: 100%; }

/* Delivery-check entry point */
.delivery-check { margin-top: var(--s-5); }
.delivery-check__form { display: flex; gap: var(--s-2); }
.delivery-check__form .field__input { flex: 1; min-width: 0; height: 42px; font-size: var(--fs-xs); }
.delivery-check__form .btn-ls { flex: none; height: 42px; }
.delivery-check__msg { display: block; margin-top: var(--s-2); }
.delivery-check__msg:empty { display: none; }
.delivery-check__msg--ok { color: var(--c-success); }

.buy-panel__accordions { margin-top: var(--s-6); }

/* ==========================================================================
   Editorial story blocks
   ========================================================================== */

.pstory { border-top: var(--border); }
.pstory__row {
  display: grid;
  align-items: center;
  gap: 0;
}
@media (min-width: 992px) {
  .pstory__row { grid-template-columns: 42% 58%; }
  .pstory__row--left .pstory__text  { order: 2; }
  .pstory__row--left .pstory__media { order: 1; }
}
.pstory__text { padding: var(--section-y) var(--gutter); }
@media (min-width: 992px) {
  .pstory__text { padding-inline: clamp(2rem, 1rem + 3vw, 4.5rem); }
}
.pstory__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.pstory__body { font-size: var(--fs-sm); color: var(--c-muted); max-width: 44ch; }
.pstory__media { background: var(--c-tint); align-self: stretch; }
.pstory__media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
@media (min-width: 992px) {
  .pstory__media img { min-height: 520px; }
}

/* ==========================================================================
   Specifications + technical diagrams
   ========================================================================== */

.spec { border-top: var(--border); }

.spec__note {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: var(--s-2) var(--s-3);
  background: var(--c-tint);
  border-left: 3px solid var(--c-blue);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.spec__row {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  padding-block: var(--s-6);
  border-top: var(--border);
}
.spec__row:last-of-type { border-bottom: var(--border); }
@media (min-width: 768px) {
  .spec__row { grid-template-columns: 220px minmax(0, 1fr) 180px; gap: var(--s-6); }
}

.spec__dims { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.spec__seats {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-blue);
}
.spec__leg { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; }

.spec__diagram, .spec__side { display: flex; justify-content: center; }
.spec__diagram svg { width: 100%; max-width: 420px; height: auto; }
.spec__side svg { width: 100%; max-width: 150px; height: auto; }

/* Diagram ink. Kept here rather than inline on the SVG so both drawings stay
   consistent and a theme change is a one-line edit. */
.dgm-dim   { stroke: var(--c-muted-soft); stroke-width: 1; fill: none; }
.dgm-frame { stroke: var(--c-navy); stroke-width: 1.4; fill: none; }
.dgm-text  { fill: var(--c-muted); font-family: var(--font-body); font-size: 14px; letter-spacing: 0.02em; }

/* Attribute table under the diagrams */
.spec__table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--s-6);
}
@media (min-width: 768px) { .spec__table { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } }
.spec__table div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: var(--border);
  font-size: var(--fs-sm);
}
.spec__table dt { color: var(--c-muted); margin: 0; font-weight: 400; }
.spec__table dd { margin: 0; font-weight: 600; text-align: right; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-layout { display: grid; gap: var(--s-6); }
@media (min-width: 992px) {
  .faq-layout { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-8); }
}
.faq-layout__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: var(--ls-display);
}
.faq-layout__aside { font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--s-4); }

/* ==========================================================================
   Shop the look
   ========================================================================== */

.look {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
@media (min-width: 992px) { .look { grid-template-columns: 0.85fr 1.3fr; } }

.look__hero { background: var(--c-tint); overflow: hidden; }
.look__hero img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }

.look__list { display: grid; gap: var(--s-3); grid-template-columns: 1fr; align-content: start; }
@media (min-width: 576px) { .look__list { grid-template-columns: 1fr 1fr; } }

.look__card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3);
  border: var(--border);
  background: var(--c-white);
  transition: border-color var(--t-fast) var(--ease);
}
.look__card:hover { border-color: var(--c-navy); }
.look__card img { width: 74px; height: 74px; flex: none; object-fit: cover; background: var(--c-tint); }
.look__info { min-width: 0; }
.look__cat {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-blue);
}
.look__name { display: block; font-size: var(--fs-sm); font-weight: 600; margin-top: 3px; line-height: 1.35; }
.look__price { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }

.look__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  border: var(--border);
  margin-top: var(--s-3);
}
.look__bar-label { font-size: var(--fs-xs); color: var(--c-muted); }
.look__bar-total {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Frequently bought together
   ========================================================================== */

.fbt__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  margin-top: var(--s-6);
}
@media (min-width: 768px) {
  .fbt__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The whole card is the control, so the hit area matches what it looks like. */
.fbt__card {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
}
.fbt__media {
  position: relative;
  background: var(--c-tint);
  border: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.fbt__media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.fbt__card[aria-pressed='false'] .fbt__media { opacity: 0.55; }
.fbt__card[aria-pressed='true'] .fbt__media { border-color: var(--c-navy); }

.fbt__check {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-muted-soft);
  background: var(--c-white);
  color: transparent;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.fbt__card[aria-pressed='true'] .fbt__check {
  background: var(--c-lime);
  border-color: var(--c-lime);
  color: var(--c-navy);
}
.fbt__name { display: block; font-size: var(--fs-sm); font-weight: 600; margin-top: var(--s-3); line-height: 1.35; }
.fbt__price { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.fbt__this {
  display: inline-block;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-blue);
  margin-top: var(--s-2);
}

.fbt__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--border);
}
.fbt__total-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.fbt__total {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  margin-top: var(--s-1);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Sticky add-to-bag bar
   ========================================================================== */

.sticky-buy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky-bar);
  background: var(--c-navy);
  color: var(--c-white);
  transform: translateY(100%);
  transition: transform var(--t-med) var(--ease);
  box-shadow: 0 -8px 30px rgba(2, 24, 77, 0.22);
}
.sticky-buy.is-visible { transform: translateY(0); }
.sticky-buy__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
}
.sticky-buy__media {
  width: 46px; height: 46px;
  flex: none;
  object-fit: cover;
  background: var(--c-navy-deep);
}
.sticky-buy__text { min-width: 0; flex: 1; }
.sticky-buy__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-buy__variant {
  font-size: var(--fs-xs);
  color: var(--c-on-dark-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-buy__price {
  font-size: var(--fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sticky-buy__cta { flex: none; }

@media (max-width: 575.98px) {
  /* On a phone the name alone carries the identity; the thumbnail and the
     separate price both cost width the button needs. */
  .sticky-buy__media { display: none; }
  .sticky-buy__price { display: none; }
  .sticky-buy__cta { padding-inline: var(--s-4); }
}

/* ---- Colour swatch chips -------------------------------------------------
   A variant group whose every term carries a colour (Products → Attributes →
   Configure terms → Swatch colour) is drawn as colour dots instead of text.
   Built for Leg colour, where four finish names mean nothing until you see
   them.

   The term name is not lost: it is the button's accessible name, it is the
   title on hover, and the group head still prints the chosen value beside the
   label — so the selection is readable without relying on telling two dark
   browns apart.

   `--chip-swatch` is set inline per button, because the colour is content
   that an admin types, not a design token. */
.variant-group--swatch .variant-group__options { gap: var(--s-3); }

.chip--swatch {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--chip-swatch, var(--c-line));
  /* A ring, not a border: it sits off the colour so a pale finish still has
     an edge and a dark one is not outlined in its own colour. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%);
  position: relative;
}

/* The selected state is a detached ring, so the colour itself is never
   covered by the thing marking it as chosen. */
.chip--swatch::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}

.chip--swatch:hover { background: var(--chip-swatch, var(--c-line)); }
.chip--swatch:hover::after { border-color: var(--c-line); }

.chip--swatch[aria-pressed='true'] {
  /* Override the text chip's filled-navy selected state, which would paint
     over the swatch colour entirely. */
  background: var(--chip-swatch, var(--c-line));
  border-color: transparent;
}
.chip--swatch[aria-pressed='true']::after { border-color: var(--c-navy); }

.chip--swatch:focus-visible::after { border-color: var(--c-navy); }

/* Unavailable combinations: the text chip strikes through its label, and a
   swatch has no label to strike. */
.chip--swatch[disabled] {
  text-decoration: none;
  opacity: 0.35;
}
.chip--swatch[disabled]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    currentColor calc(50% - 1px),
    currentColor calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}