/* single-product.css — product page: gallery, buy panel, variation pickers and the gauge guide dialog.
   Ported verbatim from reference/css/pages/single-product.css. */

/* ---------- breadcrumb ---------- */
.lm-product-crumbs { padding-top: var(--wp--preset--spacing--60); }

/* ---------- product: two columns, gallery 1.15fr / panel 1fr ---------- */
.lm-product { padding-top: var(--wp--preset--spacing--70); }
.lm-product__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start;
  gap: var(--wp--preset--spacing--110);
}

/* ---------- gallery: thumbnail column + 4:5 main photo, sticky while the panel scrolls ---------- */
.lm-gallery {
  position: sticky; top: var(--wp--preset--spacing--60);
  display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "thumbs main";
  gap: var(--wp--preset--spacing--40);
}
.lm-gallery__main {
  grid-area: main; overflow: hidden; aspect-ratio: 4 / 5;
  background: var(--wp--preset--color--surface); border-radius: var(--wp--custom--radius--md);
}
.lm-gallery__image { width: 100%; height: 100%; object-fit: cover; }
.lm-gallery__thumbs { grid-area: thumbs; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.lm-gallery__thumb {
  display: block; width: 100%; aspect-ratio: 1; overflow: hidden;
  background: var(--wp--preset--color--surface);
  border: var(--wp--custom--border--control) solid transparent; border-radius: var(--wp--custom--radius--sm);
  transition: border-color var(--wp--custom--motion--fast) ease;
}
.lm-gallery__thumb:hover { border-color: var(--wp--preset--color--accent-line); }
.lm-gallery__thumb.is-selected { border-color: var(--wp--preset--color--accent); }
.lm-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- panel: heading block ---------- */
.lm-product__panel { min-width: 0; }
.lm-product__eyebrow { margin-bottom: var(--wp--preset--spacing--30); }
.lm-product__price {
  margin-top: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--huge); font-weight: var(--wp--custom--font-weight--bold);
  line-height: var(--wp--custom--line-height--snug); color: var(--wp--preset--color--accent);
}
.lm-product__rating { margin-top: var(--wp--preset--spacing--30); }
.lm-product__summary { margin-top: var(--wp--preset--spacing--60); font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--secondary); }

/* ---------- variation pickers ---------- */
.lm-variation { margin-top: var(--wp--preset--spacing--70); }
.lm-variation + .lm-variation { margin-top: var(--wp--preset--spacing--60); }
.lm-variation__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40);
  margin-bottom: var(--wp--preset--spacing--30);
}
.lm-variation__label { font-size: var(--wp--preset--font-size--ui); font-weight: var(--wp--custom--font-weight--bold); line-height: var(--wp--custom--line-height--snug); }
.lm-variation__value { font-weight: var(--wp--custom--font-weight--medium); color: var(--wp--preset--color--secondary); }
.lm-variation__guide { min-height: 24px; flex-shrink: 0; }
.lm-variation__options { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); }

/* Swatch: pill with a colour dot. --swatch comes from product data (inline custom property). */
.lm-swatch {
  display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20);
  min-height: var(--wp--custom--control--sm);
  padding-inline: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  border: var(--wp--custom--border--control) solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--pill);
  font-size: var(--wp--preset--font-size--ui); font-weight: var(--wp--custom--font-weight--semibold);
  line-height: var(--wp--custom--line-height--control); white-space: nowrap;
  transition: border-color var(--wp--custom--motion--fast) ease, background-color var(--wp--custom--motion--fast) ease;
}
.lm-swatch:hover { border-color: var(--wp--preset--color--accent-line); }
.lm-swatch.is-selected { border-color: var(--wp--preset--color--accent); background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent); }
.lm-swatch__dot { flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--wp--custom--radius--pill); background: var(--swatch); }

/* Size: rectangular option (gauge, diameter). */
.lm-size {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; min-height: var(--wp--custom--control--md);
  padding-inline: var(--wp--preset--spacing--40);
  border: var(--wp--custom--border--control) solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--md);
  font-size: var(--wp--preset--font-size--body); font-weight: var(--wp--custom--font-weight--semibold);
  line-height: var(--wp--custom--line-height--control); white-space: nowrap;
  transition: border-color var(--wp--custom--motion--fast) ease, background-color var(--wp--custom--motion--fast) ease, color var(--wp--custom--motion--fast) ease;
}
.lm-size:hover { border-color: var(--wp--preset--color--accent-line); }
.lm-size.is-selected { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }

/* ---------- sizing helper, buy row, reassurance, details ---------- */
.lm-product__help { margin-top: var(--wp--preset--spacing--60); }

.lm-buy { display: flex; align-items: center; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--60); }
.lm-buy .lm-qty { flex-shrink: 0; }
.lm-buy .lm-qty__btn { width: 40px; height: 40px; }
.lm-buy__add { flex: 1; min-width: 0; }
.lm-buy__wish.is-selected { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.lm-buy__wish.is-selected .lm-icon { fill: currentColor; }

.lm-product__reassure { margin-top: var(--wp--preset--spacing--60); }

.lm-product__details { margin-top: var(--wp--preset--spacing--80); }
.lm-accordion__body .lm-product__zones { flex-direction: row; flex-wrap: wrap; padding-left: 0; list-style: none; }
/* WordPress: Product Collection's own bottom margin (30px), as in the catalog (decision 72). */
.lm-related .wp-block-woocommerce-product-collection { margin-bottom: 0; }

/* ---------- gauge guide dialog ---------- */
/* Pull the 44px close button out so its icon lines up with the title and with the right edge of the content. */
.lm-gauge-guide .lm-dialog__head .lm-icon-btn { margin: calc(-1 * var(--wp--preset--spacing--20)) calc(-1 * var(--wp--preset--spacing--30)) 0 0; }
.lm-gauge-guide__table {
  overflow: hidden;
  border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--md);
}
.lm-gauge-guide__table table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--wp--preset--font-size--ui); line-height: var(--wp--custom--line-height--snug); text-align: left; }
.lm-gauge-guide__table th, .lm-gauge-guide__table td { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); vertical-align: top; }
.lm-gauge-guide__table thead th {
  width: 29.5%;
  background: var(--wp--preset--color--fill);
  font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--caps); text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.lm-gauge-guide__table thead th:last-child { width: 41%; }
.lm-gauge-guide__table tbody tr { border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line); }
.lm-gauge-guide__table tbody th { font-weight: var(--wp--custom--font-weight--bold); }
.lm-gauge-guide__table tbody td { color: var(--wp--preset--color--secondary); }
.lm-gauge-guide__table tbody tr.is-current { background: var(--wp--preset--color--accent-tint); }
.lm-gauge-guide__help { margin-top: var(--wp--preset--spacing--60); font-size: var(--wp--preset--font-size--ui); color: var(--wp--preset--color--secondary); }

/* ---------- tablet: equal columns, static gallery with the thumbnails in a row under the photo ---------- */
@media (max-width: 1023px) {
  .lm-product__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--70); }
  .lm-gallery {
    position: static;
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "thumbs";
    gap: var(--wp--preset--spacing--30);
  }
  .lm-gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .lm-variation__options { gap: var(--wp--preset--spacing--20); }

  /* The column is about 336px wide (350px on mobile): compact buy row so quantity + add + wishlist stay on one line.
     Below roughly 310px of column the label wraps to two lines inside the pill instead of overflowing. */
  .lm-buy { gap: var(--wp--preset--spacing--20); }
  .lm-buy .lm-qty { padding-inline: var(--wp--preset--spacing--10); }
  .lm-buy .lm-qty__value { min-width: 20px; }
  .lm-buy__add { padding-inline: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--ui); white-space: normal; }
  .lm-buy__add .lm-icon { display: none; }
  .lm-buy__wish { width: var(--wp--custom--control--lg); height: var(--wp--custom--control--lg); }
}

/* ---------- mobile: one column — gallery, then the panel ---------- */
@media (max-width: 639px) {
  .lm-product-crumbs { padding-top: var(--wp--preset--spacing--50); }
  .lm-product { padding-top: var(--wp--preset--spacing--50); }
  .lm-product__grid { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--70); }

  .lm-product__summary { margin-top: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--body); }
  .lm-product__reassure { flex-direction: column; }
  .lm-product__details { margin-top: var(--wp--preset--spacing--70); }

  /* The table must fit a 310px dialog without scrolling: tighter cells, "Uso típico" wraps. */
  .lm-gauge-guide__table th, .lm-gauge-guide__table td { padding: var(--wp--preset--spacing--30); }
  .lm-gauge-guide__table thead th { width: 25%; }
  .lm-gauge-guide__table thead th:last-child { width: 50%; }
}