/*
 * Éclore Aesthetics — Product detail page (SHOP-DESIGN-SPEC §4)
 * ─────────────────────────────────────────────────────────────────────────────
 * 7/5 editorial split at lg: stacked gallery left (Stone grounds, hairline
 * frames), buy column right, sticky within the section. Quantity field is the
 * squared §5.10 field; ADD TO CART maps to the .btn--primary recipe. Details
 * are the house .faq-accordion (faq.css owns the disclosure styling).
 */

.product-single {
  padding-block: var(--section-y-tight);
}

.product-single__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

@media (min-width: 1024px) {
  .product-single__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); /* the 7/5 split (§2 grid) */
    align-items: start;
  }

  .product-single__buy {
    position: sticky;
    top: calc(var(--space-2xl) + var(--space-md)); /* clears the docked header */
  }
}

/* ─── Gallery — stacked, no carousel chrome ──────────────────────────────────── */

.product-single__gallery {
  display: grid;
  gap: var(--space-lg);
}

.product-single__figure {
  margin: 0;
  aspect-ratio: 4 / 5;
  background: var(--color-stone);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.product-single__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Buy column ─────────────────────────────────────────────────────────────── */

.product-single__eyebrow {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.product-single__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
}

.product-single__price {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: 1.25rem; /* Body-large */
  color: var(--color-ink);
}

.product-single__price del {
  color: var(--color-text-muted);
  margin-right: var(--space-2xs);
}

.product-single__price ins {
  text-decoration: none;
}

.product-single__description {
  max-width: 52ch;
  margin-bottom: var(--space-lg);
  color: var(--color-text-muted);
}

/* ─── Add-to-cart row — squared field + primary button ───────────────────────── */

.product-single__cart form.cart {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.product-single__cart .quantity .qty {
  width: 5rem;
  min-height: 3rem;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  text-align: center;
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
}

.product-single__cart .quantity .qty:focus {
  border-color: var(--color-ink);
}

/* Maps Woo's button to the .btn--primary recipe (buttons.css) without renaming
   the Woo class (internal-keys rule extends to Woo hooks/classes). */
.product-single__cart .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  min-height: 3rem;
  padding: 0.9375rem 1.75rem;
  border: 1px solid var(--color-cta-bg);
  border-radius: 0;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard);
}

.product-single__cart .single_add_to_cart_button:hover {
  background: color-mix(in srgb, var(--color-terracotta) 88%, var(--color-ink));
  border-color: color-mix(in srgb, var(--color-terracotta) 88%, var(--color-ink));
}

.product-single__cart .single_add_to_cart_button:disabled {
  background: color-mix(in srgb, var(--color-ink) 30%, var(--color-stone));
  border-color: color-mix(in srgb, var(--color-ink) 30%, var(--color-stone));
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Out-of-stock notice Woo prints in place of the form */
.product-single__cart .stock.out-of-stock {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ─── Disclosure rows — hairline top rule; items styled by faq.css ───────────── */

.product-single__disclosures {
  margin: 0;
  border-top: 1px solid var(--color-hairline);
}

/* ─── Related section ────────────────────────────────────────────────────────── */

.product-related {
  padding-block: var(--section-y-tight);
}

.product-related .related.products > h2 {
  /* Woo's own related heading — the template's .section-header already
     carries the opener; hide the duplicate without unhooking (plugin compat). */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}