/*--------------------------------------------------------------
# Cart product detail page — Figma Single Product Page
# Tokens: css/cart/mepr-cart-tokens.css
# DS:    css/cart/mepr-ds-components.css (badge / btn when applied)
--------------------------------------------------------------*/

/*
 * Hide theme/FSE post content when the cart product page is present.
 * Enqueued only on cart single product pages. Do not hide wrappers that
 * contain .mepr-product-page (classic ReadyLaunch replaces the_content with it).
 * Keep .mepr-product-page__description visible.
 */
body:has(.mepr-product-page) .wp-block-post-content:not(:has(.mepr-product-page)),
body:has(.mepr-product-page) .entry-content:not(:has(.mepr-product-page)) {
  display: none !important;
}

/*
 * Size container for row/stack: Registration block / shortcode embeds are often
 * narrower than the viewport, so viewport media queries alone crush the details
 * column (fixed 520px image). Layout switches on this container's inline size.
 */
.mepr-product-page-root {
  container-type: inline-size;
  container-name: mepr-product-page;
  width: 100%;
  max-width: 1004px; /* 520 image + 64 gap + ~420 details */
  margin: 0 auto;
}

.mepr-product-page {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--mepr-cart-space-6);
  width: 100%;
  padding: var(--mepr-cart-space-8) var(--mepr-cart-space-6);
  box-sizing: border-box;
  font-family: var(--mepr-cart-font-family);
  color: var(--mepr-cart-color-text);
}

/* Side-by-side when the embed (or page) is wide enough — not only the viewport. */
@container mepr-product-page (min-width: 768px) {
  .mepr-product-page {
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
  }
}

/* --------------------------------------------------------------------------
   Image (Figma: 520×360, #F2F2F2, 1px #DDDDDD, radius 8)
   -------------------------------------------------------------------------- */

.mepr-product-page__image-wrap {
  flex: 1 1 auto;
  width: 100%;
  max-width: 520px;
  min-width: 0;
}

@container mepr-product-page (min-width: 768px) {
  .mepr-product-page__image-wrap {
    flex: 1 1 50%;
    width: auto;
  }
}

.mepr-product-page__image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border: 1px solid var(--mepr-cart-color-border);
  border-radius: var(--mepr-cart-radius-md);
  box-sizing: border-box;
  background: var(--mepr-cart-neutral-100);
}

.mepr-product-page__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 360px;
  max-height: 360px;
  aspect-ratio: 520 / 360;
  background: var(--mepr-cart-neutral-100); /* #F2F2F2 */
  border: 1px solid var(--mepr-cart-color-border); /* #DDDDDD */
  border-radius: var(--mepr-cart-radius-md);
  color: var(--mepr-cart-color-text-subtle);
  box-sizing: border-box;
}

.mepr-product-page__image-placeholder svg {
  width: 48px;
  height: 48px;
  stroke: currentColor;
}

/* --------------------------------------------------------------------------
   Details column (~420px content)
   -------------------------------------------------------------------------- */

.mepr-product-page__details {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--mepr-cart-space-4);
  min-width: 0;
  max-width: 420px;
  width: 100%;
}

@container mepr-product-page (min-width: 768px) {
  .mepr-product-page__details {
    flex: 1 1 40%;
    width: auto;
  }
}

/* Meta / type badge — Figma: pad 2×6, #FAFAFA, #E5E5E5, radius 6, 12/18 #404040 */

.mepr-product-page__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mepr-cart-space-2);
  align-self: flex-start;
}

.mepr-product-page__type {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--mepr-cart-badge-neutral-border);
  border-radius: var(--mepr-cart-radius-sm);
  background: var(--mepr-cart-badge-neutral-bg);
  font-family: var(--mepr-cart-font-family);
  font-size: var(--mepr-cart-font-size-xs);
  font-weight: var(--mepr-cart-font-weight-medium);
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mepr-cart-badge-neutral-text);
  box-sizing: border-box;
}

/* Title — Inter 600 30px/38px #091D2E */

.mepr-product-page__title {
  margin: 0;
  font-family: var(--mepr-cart-font-family);
  font-size: 1.875rem; /* 30px */
  font-weight: var(--mepr-cart-font-weight-semibold);
  line-height: 38px;
  color: var(--mepr-cart-color-text);
}

/* Price — Inter 600 20px/24px #091D2E */

.mepr-product-page__pricing {
  margin: 0;
  line-height: 24px;
}

.mepr-product-page__price {
  display: block;
  font-family: var(--mepr-cart-font-family);
  font-size: 1.25rem; /* 20px */
  font-weight: var(--mepr-cart-font-weight-semibold);
  line-height: 24px;
  color: var(--mepr-cart-color-text);
}

/* Rich invoice / trial breakdowns stay readable when display_invoice emits more. */
.mepr-product-page__price .mepr-price-str,
.mepr-product-page__price > * {
  font: inherit;
  color: inherit;
}

/* Description (kept beyond Figma) */

.mepr-product-page__description {
  width: 100%;
  margin: 0;
  font-size: var(--mepr-cart-font-size-md);
  font-weight: var(--mepr-cart-font-weight-regular);
  line-height: var(--mepr-cart-line-height);
  color: var(--mepr-cart-color-text-secondary);
}

.mepr-product-page__description > :first-child {
  margin-top: 0;
}

.mepr-product-page__description > :last-child {
  margin-bottom: 0;
}

/* Can't-purchase notice — uses mepr-ds ATC error toast (toast-error tokens) */

.mepr-product-page__cant-purchase {
  width: 100%;
}

.mepr-product-page__cant-purchase > :first-child {
  margin-top: 0;
}

.mepr-product-page__cant-purchase > :last-child {
  margin-bottom: 0;
}

.mepr-product-page .mepr-shop-card__atc-message__text a,
.mepr-product-page__cant-purchase .mepr-shop-card__atc-message__text a {
  color: inherit;
  font-weight: var(--mepr-cart-font-weight-semibold);
  text-decoration: underline;
}

.mepr-product-page .mepr-shop-card__atc-message__text p,
.mepr-product-page__cant-purchase .mepr-shop-card__atc-message__text p {
  margin: 0;
}

/* ReadyLaunch mode — match checkout/signup top spacing */

.mepr-app-layout .mepr-product-page-root .mepr-product-page,
.mepr-app-layout .mepr-product-page {
  padding-top: 3rem;
}

/* --------------------------------------------------------------------------
   Add to cart panel (gift hook + qty + button)
   -------------------------------------------------------------------------- */

.mepr-product-page__atc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mepr-cart-space-4);
  width: 100%;
  margin-top: 0;
}

.mepr-product-page__atc .mp-form-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mepr-cart-space-2);
  width: 100%;
  margin: 0;
}

/* Gift checkbox (add-on via mepr_cart_product_page_before_add_to_cart)
   Figma: 18×18, white, 1.5px #DDDDDD, radius 5; label 14/20 #091D2E; gap 8 */

.mepr-product-page__atc label {
  display: inline-flex;
  align-items: center;
  gap: var(--mepr-cart-space-2);
  margin: 0;
  font-family: var(--mepr-cart-font-family);
  font-size: var(--mepr-cart-font-size-base);
  font-weight: var(--mepr-cart-font-weight-regular);
  line-height: 20px;
  color: var(--mepr-cart-color-text);
  cursor: pointer;
}

.mepr-product-page__atc input[type="checkbox"],
.mepr-product-page__atc .mepr-ds-checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--mepr-cart-color-border);
  border-radius: 5px;
  background: var(--mepr-cart-color-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background-color var(--mepr-cart-transition),
    border-color var(--mepr-cart-transition);
}

.mepr-product-page__atc input[type="checkbox"]:checked,
.mepr-product-page__atc .mepr-ds-checkbox:checked {
  background: var(--mepr-cart-color-primary);
  border-color: var(--mepr-cart-color-primary);
}

.mepr-product-page__atc input[type="checkbox"]:checked::after,
.mepr-product-page__atc .mepr-ds-checkbox:checked::after {
  content: "";
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.5 9.5 3.5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/*
 * Beat UA / theme checkbox focus (thick black outline). Themes often reset
 * outline on inputs except checkboxes; ReadyLaunch button:focus border-color
 * is the same class of issue as the qty stepper. Keep Figma resting border
 * and use the tokenized focus ring for keyboard a11y.
 */
.mepr-product-page__atc input[type="checkbox"]:focus,
.mepr-product-page__atc input[type="checkbox"]:focus-visible,
.mepr-product-page__atc input.mepr-form-input[type="checkbox"]:focus,
.mepr-product-page__atc input.mepr-form-input[type="checkbox"]:focus-visible,
.mepr-product-page__atc .mepr-ds-checkbox:focus,
.mepr-product-page__atc .mepr-ds-checkbox:focus-visible {
  outline: none;
  border: 1.5px solid var(--mepr-cart-color-border);
  box-shadow: var(--mepr-cart-focus-ring);
}

.mepr-product-page__atc input[type="checkbox"]:checked:focus,
.mepr-product-page__atc input[type="checkbox"]:checked:focus-visible,
.mepr-product-page__atc input.mepr-form-input[type="checkbox"]:checked:focus,
.mepr-product-page__atc input.mepr-form-input[type="checkbox"]:checked:focus-visible,
.mepr-product-page__atc .mepr-ds-checkbox:checked:focus,
.mepr-product-page__atc .mepr-ds-checkbox:checked:focus-visible {
  border-color: var(--mepr-cart-color-primary);
  box-shadow: var(--mepr-cart-focus-ring);
}

/* Qty + ATC stacked: stepper row, then full primary button alone (Figma). */
.mepr-product-page__atc-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mepr-cart-space-4);
  width: 100%;
}

/* Qty stepper — visuals from .mepr-ds-qty-stepper (shared component). */

.mepr-product-page__atc-row .mepr-shop-stepper {
  flex-shrink: 0;
}

/* Add to Cart — Figma: 160×40, pad 10×14, #06429E, shadow-xs, radius 8, 14/20 white, text only */

.mepr-product-page .mepr-add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 40px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--mepr-cart-radius-md);
  box-shadow: var(--mepr-cart-shadow-xs);
  background: var(--mepr-cart-color-primary);
  color: var(--mepr-cart-color-on-primary);
  font-family: var(--mepr-cart-font-family);
  font-size: var(--mepr-cart-font-size-base);
  font-weight: var(--mepr-cart-font-weight-semibold);
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  transition: background-color var(--mepr-cart-transition),
    border-color var(--mepr-cart-transition),
    opacity var(--mepr-cart-transition);
}

.mepr-product-page .mepr-add-to-cart:hover:not(:disabled):not(.--in-cart) {
  background: var(--mepr-cart-color-primary-hover);
  color: var(--mepr-cart-color-on-primary);
}

.mepr-product-page .mepr-add-to-cart:focus-visible {
  outline: none;
  box-shadow: var(--mepr-cart-focus-ring);
}

.mepr-product-page .mepr-add-to-cart.--in-cart {
  background: var(--mepr-cart-color-in-cart);
  cursor: pointer;
}

.mepr-product-page .mepr-add-to-cart.--in-cart:hover {
  background: var(--mepr-cart-color-in-cart);
}

.mepr-product-page .mepr-add-to-cart.--loading {
  opacity: 0.65;
  cursor: wait;
}

.mepr-product-page .mepr-add-to-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/*
 * ATC toast / error messages from shop.js — visuals from mepr-ds-components
 * (.mepr-shop-card__atc-message + --error|--warning). Inline under the button
 * inside the column __atc-row (not the shop-card image overlay).
 */

.mepr-product-page .mepr-shop-card__atc-message,
.mepr-product-page__atc .mepr-shop-card__atc-message {
  position: static;
  width: 100%;
  max-width: 100%;
  transform: none;
}

/* --------------------------------------------------------------------------
   Narrow container (mobile viewport or tight block/shortcode embed)
   -------------------------------------------------------------------------- */

@container mepr-product-page (max-width: 767px) {
  .mepr-product-page {
    padding: var(--mepr-cart-space-6) var(--mepr-cart-space-4);
  }

  .mepr-product-page__image-wrap {
    max-width: none;
  }

  .mepr-product-page__image-placeholder {
    height: auto;
    min-height: 220px;
  }

  .mepr-product-page__details {
    max-width: none;
  }

  .mepr-product-page__title {
    font-size: 1.5rem; /* 24px */
    line-height: 1.3;
  }

  .mepr-product-page .mepr-add-to-cart {
    width: 100%;
    max-width: 100%;
  }
}

/* Fallback when container queries are unavailable: viewport breakpoints. */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
    .mepr-product-page {
      flex-direction: row;
      align-items: flex-start;
      gap: 64px;
    }

    .mepr-product-page__image-wrap {
      flex: 1 1 50%;
      width: auto;
    }

    .mepr-product-page__details {
      flex: 1 1 40%;
      width: auto;
    }
  }

  @media (max-width: 767px) {
    .mepr-product-page {
      padding: var(--mepr-cart-space-6) var(--mepr-cart-space-4);
    }

    .mepr-product-page__image-wrap {
      max-width: none;
    }

    .mepr-product-page__image-placeholder {
      height: auto;
      min-height: 220px;
    }

    .mepr-product-page__details {
      max-width: none;
    }

    .mepr-product-page__title {
      font-size: 1.5rem;
      line-height: 1.3;
    }

    .mepr-product-page .mepr-add-to-cart {
      width: 100%;
      max-width: 100%;
    }
  }
}