/*
 * Single product — quantity stepper, Add to Cart, disclaimer, share, related carousel.
 * Loaded only on is_product(), after bp-mobile, so it wins source-order ties.
 */

/* Belt-and-suspenders: never show the availability/stock line here. */
body.single-product .stock { display: none !important; }

/* ── Add to Cart — long black pill ── */
/*
 * Add-to-cart button: no rules here.
 *
 * This restyled it from scratch with !important on every property —
 * `border-radius: 9999px`, `height: 64px`, `font-size: 1.15rem`,
 * `text-transform: none`, `letter-spacing: 0`. Against .oxa-btn--primary,
 * which wants a square, uppercase, tracked, full-width button, the !important
 * won every conflict: that is why the button rendered as a small dark pill
 * with sentence-case text.
 *
 * Deleted rather than overridden — .oxa-btn would have needed !important of
 * its own to get past this, and the pill would still have been here.
 * The button's styling lives in assets/css/oxa-pdp.css.
 */


/* ── Product meta (SKU / category) — drop the top divider + spacing ── */
body.single-product div.product .product_meta {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* ── Add-to-cart notice: hide the misaligned checkmark icon only ── */
body.single-product .woocommerce-message::before,
body.single-product .woocommerce-info::before { display: none !important; }

/* ── Medical disclaimer ── */
/* ── Share row ── */
body.single-product .bp-share { margin-top: 1.75rem; }
body.single-product .bp-share__label {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--nesa-ink);
  margin-bottom: 0.75rem;
}
body.single-product .bp-share__links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
body.single-product .bp-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nesa-ink);
  transition: opacity 0.15s ease, color 0.15s ease;
}
body.single-product .bp-share__link svg { width: 18px; height: 18px; display: block; }
body.single-product .bp-share__link:hover { color: var(--nesa-ink); }

/* ══════════════════════════════════════════════════════════════════════
   Mobile + tablet (≤1024px): force a single-column product layout and make
   the page physically unable to exceed the viewport.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  body.single-product main#main.site-main,
  body.single-product main.site-main,
  body.single-product #primary,
  body.single-product .site-main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  body.single-product.woocommerce div.product,
  body.single-product div.product {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.single-product.woocommerce div.product .woocommerce-product-gallery,
  body.single-product.woocommerce div.product .images,
  body.single-product.woocommerce div.product .summary,
  body.single-product.woocommerce div.product .entry-summary,
  body.single-product div.product .woocommerce-product-gallery,
  body.single-product div.product .images,
  body.single-product div.product .summary,
  body.single-product div.product .entry-summary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.single-product div.product .woocommerce-product-gallery { margin-bottom: 1.5rem !important; }

  /*
   * The blanket `height: auto !important` on every img under div.product
   * that lived here is DELETED, not overridden. It was written for the old
   * gallery markup, but the new PDP's wrapper also carries the `product`
   * class — so under 1024px it flattened the card images in the related rail
   * (photo at natural height over a bare cream frame) and fought the stage.
   * max-width safety comes from main.css's global img rule already.
   */
  body.single-product div.product .woocommerce-product-gallery,
  body.single-product div.product .woocommerce-product-gallery .flex-viewport,
  body.single-product div.product .woocommerce-product-gallery__wrapper {
    overflow: hidden !important;
    max-width: 100% !important;
  }
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
  body.single-product main#main.site-main,
  body.single-product main.site-main,
  body.single-product #primary.content-area,
  body.single-product .site-main {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }  body.single-product .related.products ul.products,
  body.single-product .up-sells.products ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body.single-product .related.products ul.products::-webkit-scrollbar,
  body.single-product .up-sells.products ul.products::-webkit-scrollbar { display: none; }

  body.single-product .related.products ul.products li.product,
  body.single-product .up-sells.products ul.products li.product {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    scroll-snap-align: start;
    box-sizing: border-box !important;
    border: 1px solid var(--nesa-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding: 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .875rem !important;
    text-align: left !important;
  }
  body.single-product .related.products ul.products li.product::before,
  body.single-product .related.products ul.products li.product::after { content: none !important; }
  /* The square-image img rule that was here is deleted — same donor-build
   * trap as the div.product one above; the .nesa-card sizes its own media. */
  body.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
  body.single-product .up-sells.products ul.products li.product .woocommerce-loop-product__title {
    text-align: left !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important;
    font-size: .9375rem !important; font-weight: 500 !important; color: var(--nesa-ink) !important; line-height: 1.4 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
  body.single-product .related.products ul.products li.product .price,
  body.single-product .up-sells.products ul.products li.product .price {
    text-align: left !important; margin: 0 !important; padding: 0 !important;
    font-size: 1rem !important; font-weight: 700 !important; color: var(--nesa-ink) !important;
  }
  body.single-product .related.products ul.products li.product .button,
  body.single-product .related.products ul.products li.product a.add_to_cart_button,
  body.single-product .up-sells.products ul.products li.product .button {
    display: block !important; width: auto !important; align-self: stretch !important; margin: 0 !important;
    padding: .75rem 1rem !important; text-align: center !important;
    background: var(--nesa-ink) !important; color: #fff !important;
    border-radius: 9999px !important; font-size: .875rem !important; font-weight: 600 !important;
  }
  body.single-product .related.products ul.products li.product .button:hover,
  body.single-product .related.products ul.products li.product a.add_to_cart_button:hover { background: var(--nesa-ink) !important; color: #fff !important; }

  body.single-product .bp-rel-controls {
    display: flex !important; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem;
  }
  body.single-product .bp-rel-nav {
    width: 40px; height: 40px; flex: 0 0 auto; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--nesa-line); background: #fff; border-radius: 9999px;
    font-size: 1.5rem; line-height: 1; color: var(--nesa-ink); cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  body.single-product .bp-rel-nav:hover { background: var(--nesa-cream); color: var(--nesa-ink); border-color: var(--nesa-line); }
  body.single-product .bp-rel-count { font-size: .95rem; font-weight: 600; color: var(--nesa-ink); min-width: 54px; text-align: center; }
}

/* On desktop the related section stays a normal grid — hide carousel controls. */
@media (min-width: 768px) {
  body.single-product .bp-rel-controls { display: none !important; }
}