/*
 * Product page (templates/single-product.html): gallery in a stone well, sticky summary from
 * 960px, offer (trioni/product-offer page variant), facts with icons, brand note, and below
 * the grid the specification table (trioni/product-specs) next to the description — sections,
 * never tabs. Loaded by the main group class product-page (Markup\SECTION_COMPONENTS) and by
 * the product-specs / product-brand-note / product-media-note blocks.
 */
.product-page {
  padding-bottom: var(--section-pad);
}

.product-page .woocommerce-breadcrumb {
  padding-top: var(--s-5);
}

.product-page__grid {
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  margin-block: var(--s-5) var(--s-7);
}

/* ---------- Gallery: stone well, no zoom, no lightbox ---------- */
.product-page__media {
  min-width: 0;
}

/* WooCommerce prints the gallery with an inline «opacity: 0» that its script lifts once it has
   run. A product with a single photo (body class from inc/assets.php) has nothing to arrange:
   the photo, the largest paint of the page, shows at once, and in consult mode no gallery
   script is loaded at all. With several photos the slider still reveals the gallery itself. */
.product-single-photo .woocommerce-product-gallery {
  opacity: 1 !important;
}

/* The well is on the link, not on the slide: flexslider makes the slide track 400-600 % wide
   and a percentage padding on the slide would be computed from that track, not from the slide. */
.product-page .woocommerce-product-gallery__image {
  border-radius: 6px;
  background: linear-gradient(170deg, #f3f0e9, #e7e2d7);
}

.product-page .woocommerce-product-gallery__image > a {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 8%;
}

.product-page .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.product-page .woocommerce-product-gallery__trigger {
  display: none;
}

.product-page .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.product-page .flex-control-thumbs img {
  border-radius: 4px;
  background: linear-gradient(170deg, #f3f0e9, #e7e2d7);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}

.product-page .flex-control-thumbs img:hover,
.product-page .flex-control-thumbs img:focus-visible,
.product-page .flex-control-thumbs img.flex-active {
  opacity: 1;
}

/* Thumbnails are buttons for the keyboard too (assets/js/product-gallery.js, WCAG 2.1.1). */
.product-page .flex-control-thumbs img:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.product-media__note {
  margin-top: var(--s-2);
  color: var(--text-soft);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* ---------- Summary ---------- */
.product-page__summary {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  min-width: 0;
}

.product-page__type {
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0;
}

/* Category links: 27 px tall instead of 19 (WCAG 2.5.8), same look. */
.product-page__type a {
  display: inline-block;
  padding-block: 4px;
}

.product-page__type::before {
  margin-right: var(--s-3);
}

.product-page__summary > .page-title {
  margin: 0;
}

.product__facts--page .product__meta {
  margin-top: var(--s-2);
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.product-offer--page {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-block: 1px solid var(--line);
}

.product-offer__price {
  font-family: var(--font-serif);
  font-size: var(--fs-figure);
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

.product-offer__price .product__unit,
.product-offer__price .trioni-price-unit {
  font-size: var(--fs-md);
}

.product-offer__price .tag {
  margin-left: var(--s-2);
  vertical-align: middle;
}

.product-offer__tax {
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.product-offer--page .product__stock {
  font-size: var(--fs-sm);
}

.product-offer__per-gram {
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.product-offer__updated {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.tg-note.brand-note {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
}

/* ---------- Purchase form ---------- */
.product-page form.cart:not(.calc) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-2);
}

.product-page form.cart:not(.calc) .single_add_to_cart_button {
  flex: 1 1 12rem;
  min-height: 48px;
}

.product-page .quantity .qty {
  width: 5.5rem;
  min-height: 48px;
  padding: 0 var(--s-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Availability is already in the offer block (same text): no second stock line in the form. */
.product-page .wp-block-add-to-cart-form .stock {
  display: none;
}

.product-page__pay {
  margin-top: calc(-1 * var(--s-2));
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* Consult mode (no payment gateway or blocked price): WhatsApp and a call button instead of
   the cart form. WhatsApp takes the row; «Llamar» keeps its own width. */
.product-page__consult {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
}

.product-page__consult .btn {
  flex: 0 0 auto;
  min-height: 48px;
}

.product-page__consult .btn--gold {
  flex: 1 1 12rem;
}

/* Sale mode: one question link under the payment line. */
.product-page__ask {
  margin: 0;
  font-size: var(--fs-sm);
}

/* The one «we buy it» link under the purchase area. */
.product-page__sell {
  margin: 0;
  font-size: var(--fs-sm);
}

.product-facts {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.product-facts li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
}

.product-facts svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--gold-text);
}

.product-page__meta {
  display: grid;
  gap: var(--s-1);
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* ---------- Below the grid: specifications + description, FAQ, related ---------- */
.product-page__below {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-6);
  align-items: start;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.product-specs > h2,
.product-page__description > h2,
.product-page__related > h2 {
  margin-bottom: var(--s-4);
  font-size: var(--fs-h3);
}

.product-specs h3 {
  margin: var(--s-5) 0 var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
}

.product-specs p {
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.spec-table tr {
  border-bottom: 1px solid var(--line);
}

.spec-table tbody tr:first-child {
  border-top: 1px solid var(--ink);
}

.spec-table th,
.spec-table td {
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  text-align: left;
  vertical-align: top;
}

.spec-table th[scope="row"] {
  width: 42%;
  color: var(--muted);
  font-weight: 500;
}

.spec-table thead th {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.spec-table--tiers td {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.product-page__description:not(:has(.product-page__content > *)),
.product-page__related:not(:has(.wc-block-product)) {
  display: none;
}

.product-page .product-faq,
.product-page__related {
  margin-top: clamp(var(--s-6), 4vw, var(--s-7));
}

@media (min-width: 960px) {
  .product-page__summary {
    position: sticky;
    align-self: flex-start;
    top: calc(var(--header-h) + var(--s-5));
  }
}

@media (max-width: 860px) {
  .product-page__below {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
}

@media (max-width: 781px) {
  /* Phone: the photo sits beside the title instead of above it, so the price and the main
     button fit in the first screen (button at 720 px or less on a 375 x 812 phone, in sale and
     in consult mode). Reading order is still the DOM order: photo, title, price, button.
     The summary column dissolves (display: contents) so its children join this grid. */
  .product-page .product-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto auto 1fr;
    gap: var(--s-3) var(--s-4);
    margin-block: var(--s-3) var(--s-6);
  }

  .product-page__summary {
    display: contents;
  }

  .product-page__media {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .product-page__summary > * {
    grid-column: 1 / -1;
  }

  .product-page__summary > .product-page__type,
  .product-page__summary > .page-title,
  .product-page__summary > .product__facts--page {
    grid-column: 2;
    align-self: start;
  }

  .product-page__summary > .page-title {
    font-size: var(--fs-h3);
  }

  /* Never taller than 38 % of the screen, whatever the width of the column. */
  .product-page .woocommerce-product-gallery__image > a {
    max-height: 38vh;
    padding: 6%;
  }

  /* The media column is about 40 % of the screen here: five thumbnails per row would be
     20 px wide. Three per row keeps each one above 24 px (WCAG 2.5.8) down to 320 px. */
  .product-page .flex-control-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-page .woocommerce-breadcrumb {
    padding-top: var(--s-3);
  }
}