/* ==========================================================================
   Nuvessa Intimates — Single Product Page
   Batch 3 : gallery, summary, B2B block, tabs, related
   Scope   : body.single-product
   Depends : nuvessa-tokens.css, nuvessa-base.css
   Note    : gallery keeps WooCommerce native zoom/slider logic untouched
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout — gallery left, summary right
   -------------------------------------------------------------------------- */
body.single-product .site-main {
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: var(--nuv-gap-xl);
}

body.single-product div.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nuv-gap-lg);
  margin: 0 !important;
}

@media (min-width: 900px) {
  body.single-product div.product {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: var(--nuv-gap-xl);
    align-items: start;
  }
}

/* Remove Astra/Woo floats so the grid works */
body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .summary {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  clear: none !important;
}

/* --------------------------------------------------------------------------
   2. Gallery — keep native behaviour, only re-skin
   -------------------------------------------------------------------------- */

/*
 * WooCommerce 核心模板 (templates/single-product/product-image.php) 输出：
 *   <div class="woocommerce-product-gallery" style="opacity: 0; transition: opacity .25s ease-in-out;">
 * 这是【故意】的：flexslider 初始化完成后由 JS 把 opacity 设为 1，
 * 实现无闪烁的淡入。因此：
 *
 *   ✗ 不要用 `opacity: 1 !important` 强行覆盖 —— 那会禁用原生淡入，
 *     并在缩略图尚未布局完成时提前显示未初始化的图库。
 *
 *   ✓ 正确做法：只在 JS 失败时兜底（见下方 .no-js / .flexslider 判定），
 *     让正常路径完全交给 WooCommerce 原生逻辑。
 */
html.no-js body.single-product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery.no-flexslider {
  opacity: 1 !important;
}

body.single-product .woocommerce-product-gallery__wrapper {
  border-radius: var(--nuv-radius);
  overflow: hidden;
  background: var(--nuv-sand);
}

body.single-product .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Thumbnails row */
body.single-product .flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
body.single-product .flex-control-thumbs li {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
body.single-product .flex-control-thumbs img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--nuv-line);
  border-radius: var(--nuv-radius);
  opacity: .62;
  cursor: pointer;
  transition: opacity var(--nuv-transition), border-color var(--nuv-transition);
}
body.single-product .flex-control-thumbs img:hover,
body.single-product .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--nuv-gold);
}

/* Sale badge — restrained, no loud red */
body.single-product .onsale {
  background: var(--nuv-ink) !important;
  color: var(--nuv-white) !important;
  font-family: var(--nuv-font-body);
  font-size: .62rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.6 !important;
  padding: 5px 11px !important;
  border-radius: var(--nuv-radius) !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
}

/* --------------------------------------------------------------------------
   3. Summary — title, sku, price, b2b
   -------------------------------------------------------------------------- */
body.single-product .summary.entry-summary {
  display: flex;
  flex-direction: column;
}

body.single-product .summary .product_title {
  font-family: var(--nuv-font-head);
  font-size: var(--nuv-fs-h2);
  font-weight: 500;
  line-height: 1.15;
  color: var(--nuv-ink);
  margin: 0 0 14px;
}

/* SKU */
body.single-product .summary .product_meta,
body.single-product .summary .sku_wrapper {
  font-size: var(--nuv-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nuv-text-muted);
}
body.single-product .summary .sku_wrapper {
  display: block;
  margin: 0 0 16px;
}
body.single-product .summary .sku_wrapper .sku {
  color: var(--nuv-ink);
}

/* Price — large, champagne, native output */
body.single-product .summary .price {
  display: block;
  margin: 0 0 6px !important;
  font-family: var(--nuv-font-body);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--nuv-gold) !important;
  letter-spacing: .01em;
  line-height: 1.2;
}
body.single-product .summary .price del,
body.single-product .summary .price del .woocommerce-Price-amount {
  font-size: .72em;
  color: var(--nuv-text-muted) !important;
  opacity: .7;
  font-weight: 400;
  margin-right: 8px;
}
body.single-product .summary .price ins {
  text-decoration: none;
  font-weight: 600;
}
body.single-product .summary .price .woocommerce-Price-currencySymbol { font-size: .72em; }

/* Short description */
body.single-product .summary .woocommerce-product-details__short-description {
  font-size: var(--nuv-fs-sm);
  color: var(--nuv-text-muted);
  line-height: 1.75;
  margin: 14px 0 0;
}

/* --------------------------------------------------------------------------
   4. B2B badge block (rendered by inc/single-product.php @15)
   -------------------------------------------------------------------------- */
body.single-product .nuv-b2b-badges {
  list-style: none;
  margin: 20px 0 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--nuv-line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 18px;
}
@media (min-width: 768px) {
  body.single-product .nuv-b2b-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.single-product .nuv-b2b-badges li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nuv-text-muted);
  margin: 0;
  line-height: 1.4;
}
body.single-product .nuv-b2b-badges .nuv-ico {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--nuv-gold);
}

/* WhatsApp / Bulk-order CTA */
body.single-product .nuv-single-wa {
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   5. Quantity + Add to cart — native, re-skinned
   -------------------------------------------------------------------------- */
body.single-product .summary form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 22px 0 0;
}

body.single-product .summary .quantity {
  display: inline-flex;
  align-items: stretch;
  margin: 0 !important;
}
body.single-product .summary .quantity input.qty {
  width: 74px;
  height: 100%;
  min-height: 46px;
  text-align: center;
  font-family: var(--nuv-font-body);
  font-size: var(--nuv-fs-sm);
  color: var(--nuv-ink);
  background: var(--nuv-white);
  border: 1px solid var(--nuv-line);
  border-radius: var(--nuv-radius) 0 0 var(--nuv-radius);
  padding: 0 6px;
}
body.single-product .summary .quantity input.qty:focus {
  outline: 2px solid var(--nuv-gold);
  outline-offset: -1px;
}

/* Native +/- steppers (WooCommerce 11 renders these) */
body.single-product .summary .quantity .minus,
body.single-product .summary .quantity .plus {
  background: var(--nuv-sand);
  border: 1px solid var(--nuv-line);
  color: var(--nuv-ink);
  width: 40px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background var(--nuv-transition);
}
body.single-product .summary .quantity .minus:hover,
body.single-product .summary .quantity .plus:hover {
  background: var(--nuv-amethyst-soft);
}

body.single-product .summary .single_add_to_cart_button,
body.single-product .summary button[type="submit"].button {
  flex: 1 1 200px;
  min-height: 46px;
  font-family: var(--nuv-font-body);
  font-size: var(--nuv-fs-sm) !important;
  font-weight: 500;
  letter-spacing: var(--nuv-ls-btn);
  text-transform: uppercase;
  color: var(--nuv-white) !important;
  background: var(--nuv-ink) !important;
  border: 1px solid var(--nuv-ink) !important;
  border-radius: var(--nuv-radius) !important;
  padding: 0 28px !important;
  cursor: pointer;
  transition: all var(--nuv-transition);
}
body.single-product .summary .single_add_to_cart_button:hover {
  background: var(--nuv-gold) !important;
  border-color: var(--nuv-gold) !important;
  color: var(--nuv-white) !important;
}

/* "Out of stock" / variations notice */
body.single-product .summary .stock.out-of-stock,
body.single-product .summary p.stock {
  font-size: var(--nuv-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nuv-text-muted);
  margin: 10px 0 0;
}
body.single-product .summary .stock.in-stock { color: var(--nuv-success); }

/* --------------------------------------------------------------------------
   6. Product meta (categories / tags) — compact, at bottom of summary
   -------------------------------------------------------------------------- */
body.single-product .summary .product_meta {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--nuv-line);
}
body.single-product .summary .product_meta > span {
  display: block;
  margin-bottom: 7px;
}
body.single-product .summary .product_meta a {
  color: var(--nuv-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--nuv-line);
}
body.single-product .summary .product_meta a:hover {
  color: var(--nuv-gold);
  border-bottom-color: var(--nuv-gold);
}

/* --------------------------------------------------------------------------
   7. Tabs — description etc. Clean, no repetition
   -------------------------------------------------------------------------- */
body.single-product .woocommerce-tabs {
  clear: both;
  margin-top: var(--nuv-gap-xl);
  padding-top: var(--nuv-gap-lg);
  border-top: 1px solid var(--nuv-line);
}
body.single-product .woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0 0 var(--nuv-gap) !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  border: 0 !important;
}
body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after {
  content: none !important;
  display: none !important;
}
body.single-product .woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after {
  content: none !important;
  display: none !important;
}
body.single-product .woocommerce-tabs ul.tabs li a {
  font-family: var(--nuv-font-body);
  font-size: var(--nuv-fs-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nuv-text-muted);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: all var(--nuv-transition);
}
body.single-product .woocommerce-tabs ul.tabs li a:hover,
body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--nuv-ink);
  border-bottom-color: var(--nuv-gold);
}

body.single-product .woocommerce-tabs .panel {
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--nuv-fs-sm);
  color: var(--nuv-text);
  line-height: 1.8;
  max-width: 78ch;
}
body.single-product .woocommerce-tabs .panel h2 {
  font-family: var(--nuv-font-head);
  font-size: var(--nuv-fs-h3);
  font-weight: 500;
  color: var(--nuv-ink);
  margin: 0 0 14px;
  display: none; /* WP duplicates the tab label as an h2 — hide it */
}

/* --------------------------------------------------------------------------
   8. Related / up-sells — reuse the archive card look
   -------------------------------------------------------------------------- */
body.single-product .related,
body.single-product .upsells {
  clear: both;
  margin-top: var(--nuv-gap-xl);
  padding-top: var(--nuv-gap-lg);
  border-top: 1px solid var(--nuv-line);
}
body.single-product .related > h2,
body.single-product .upsells > h2 {
  font-family: var(--nuv-font-head);
  font-size: var(--nuv-fs-h3);
  font-weight: 500;
  color: var(--nuv-ink);
  text-align: center;
  margin: 0 0 var(--nuv-gap-lg);
}

body.single-product .related ul.products,
body.single-product .upsells ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nuv-gap-sm);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
@media (min-width: 768px) {
  body.single-product .related ul.products,
  body.single-product .upsells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body.single-product .related ul.products::before,
body.single-product .related ul.products::after,
body.single-product .upsells ul.products::before,
body.single-product .upsells ul.products::after {
  content: none !important;
  display: none !important;
}
body.single-product .related ul.products li.product,
body.single-product .upsells ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--nuv-white);
  border: 1px solid var(--nuv-line);
  border-radius: var(--nuv-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.single-product .related ul.products li.product img,
body.single-product .upsells ul.products li.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin: 0 !important;
}
body.single-product .related ul.products li.product .woocommerce-loop-product__title,
body.single-product .upsells ul.products li.product .woocommerce-loop-product__title {
  font-size: .92rem;
  padding: 12px 14px 4px !important;
}
body.single-product .related ul.products li.product .price,
body.single-product .upsells ul.products li.product .price {
  padding: 0 14px 14px;
  margin: 0 !important;
  font-size: var(--nuv-fs-sm);
  color: var(--nuv-gold) !important;
}
body.single-product .related ul.products li.product .button,
body.single-product .upsells ul.products li.product .button {
  display: none !important;
}

/* --------------------------------------------------------------------------
   9. Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.single-product .summary .product_title { font-size: 1.5rem; }
  body.single-product .summary .price { font-size: 1.3rem; }
  body.single-product .summary form.cart { gap: 9px; }
  body.single-product .summary .quantity { width: 100%; }
  body.single-product .summary .quantity input.qty { flex: 1 1 auto; width: auto; }
  body.single-product .summary .single_add_to_cart_button,
  body.single-product .summary button[type="submit"].button {
    flex: 1 1 100%;
    width: 100%;
  }
  body.single-product .woocommerce-tabs { margin-top: var(--nuv-gap-lg); }
  body.single-product .woocommerce-tabs ul.tabs {
    gap: 6px 18px;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.single-product .woocommerce-product-gallery__image img,
  body.single-product .flex-control-thumbs img { transition: none !important; }
}