/* page-product.css — product detail post-foundation cascade (canonical with ni_product.css).
 * Moved from assets/css/pages.css (2026-08-01) so pages.css stays page-shell only.
 * Load order: foundation/bundle → this file (via ni_frontend_page_css page=product).
 */

/*
 * Root cause of 直角陰影 / CTA float clip on product card:
 * themes/quwan/style.css `.block{overflow:hidden}` and
 * ni_product.css `#goodsInfo.ni-product{overflow:hidden}` clip descendant
 * box-shadow / hover translateY. `#goodsInfo` is flush inside `.block.ni-product-main`.
 * Convergent: both owners opt out of the clip (same contract as flow).
 * Do not stack !important. Inner media may still use overflow:hidden for image clip.
 */
html body.goods_body .block.ni-product-main,
html body.goods_body #goodsInfo.ni-product{
  overflow:visible;
}

/* NI_CONVERGENCE: Product main media full-bleed rounded image
 * Root cause: the previous correction converted the frame to a real #zoom1 box
 * because goods.dwt disables lightbox pseudo-elements. That solved frame
 * visibility, but it also kept a padded/fixed-ratio card around the image.
 * The desired product detail treatment now matches goods_desc/editor images:
 * the image itself is the visual surface, full-width, natural-ratio, rounded,
 * and clipped without an extra outer card/background.
 * CSS phys3: fold clip/isolation into the sole #zoom1 link owner rule.
 */
html body.goods_body #goodsInfo.ni-product .imgInfo > a#zoom1,
html body.goods_body #goodsInfo.ni-product #zoom1.ni-main-image-link,
html body.goods_body #goodsInfo.ni-product #zoom1.ni-lightbox-trigger {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  margin: 0;
  line-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: zoom-in;
  isolation: isolate;
  border-radius: 24px;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  clip-path: inset(0 round 24px);
}
html body.goods_body #goodsInfo.ni-product #zoom1.ni-main-image-link > picture, html body.goods_body #goodsInfo.ni-product #zoom1.ni-main-image-link > .autoslim-picture, html body.goods_body #goodsInfo.ni-product #zoom1.ni-lightbox-trigger > picture, html body.goods_body #goodsInfo.ni-product #zoom1.ni-lightbox-trigger > .autoslim-picture {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  min-width: 0;
  min-height: 0;
  line-height: 0;
  background: transparent;
}
/* NI_V6_NATURAL: 圖片自然顯示零裁切 */
html body.goods_body #goodsInfo.ni-product #zoom1.ni-main-image-link:hover img,
html body.goods_body #goodsInfo.ni-product #zoom1.ni-lightbox-trigger:hover img{
  transform:none;
}

/* NI_CONVERGENCE: Product main image rounded clipping hardening — picture/autoslim + imgInfo shell */
/* NI_CONVERGENCE_V4: 容器負責圓角裁切，圖片不設 border-radius */
html body.goods_body #goodsInfo.ni-product .imgInfo,
html body.goods_body #goodsInfo.ni-product #zoom1.ni-main-image-link > picture,
html body.goods_body #goodsInfo.ni-product #zoom1.ni-lightbox-trigger > picture,
html body.goods_body #goodsInfo.ni-product #zoom1.ni-main-image-link > .autoslim-picture,
html body.goods_body #goodsInfo.ni-product #zoom1.ni-lightbox-trigger > .autoslim-picture{
  border-radius:24px;
  overflow:hidden;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(white, black);
  clip-path:inset(0 round 24px);
}
html body.goods_body #goodsInfo.ni-product #zoom1.ni-main-image-link img,
html body.goods_body #goodsInfo.ni-product #zoom1.ni-lightbox-trigger img{
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  transform: none;
  vertical-align: top;
  border-radius: 0;
  clip-path: none;
  -webkit-mask-image: none;
}
@media (max-width:700px){
  html body.goods_body #goodsInfo.ni-product .imgInfo,
  html body.goods_body #goodsInfo.ni-product .imgInfo > a#zoom1,
  html body.goods_body #goodsInfo.ni-product #zoom1.ni-main-image-link,
  html body.goods_body #goodsInfo.ni-product #zoom1.ni-lightbox-trigger,
  html body.goods_body #goodsInfo.ni-product #zoom1.ni-main-image-link > picture,
  html body.goods_body #goodsInfo.ni-product #zoom1.ni-lightbox-trigger > picture,
  html body.goods_body #goodsInfo.ni-product #zoom1.ni-main-image-link > .autoslim-picture,
  html body.goods_body #goodsInfo.ni-product #zoom1.ni-lightbox-trigger > .autoslim-picture{
    border-radius:18px;
    clip-path:inset(0 round 18px);
  }
}

/* NI_CONVERGENCE: product-desc canvas vs table plate
 * wrap／tabs／內文外層 = 頁面底色；UEditor 底板表 = 線上站 #fffdf9（themes.zip）。
 * 不堆 !important。 */
html body.goods_body .ni-product-desc-wrap{
  /* canvas for wrap/tabs; table plate aligned to online #fffdf9 */
  --ni-product-desc-cell-bg:var(--ni-color-page, var(--ni-product-bg, #fdfbf8));
  --ni-product-desc-table-bg:#fffdf9;
  --ni-product-desc-section-bg:linear-gradient(180deg,#f8f1eb 0%,#efe3da 100%);
  --ni-product-desc-section-line:rgba(210,188,174,.92);
}
html body.goods_body .ni-product-desc-wrap,
html body.goods_body .ni-product-desc-wrap .boxCenterList,
html body.goods_body .ni-goods-desc-panel,
html body.goods_body .ni-goods-desc-content,
html body.goods_body .ni-product-desc-wrap .ni-goods-detail-tabs,
html body.goods_body .ni-product-desc-wrap .ni-goods-detail-tabs #com_b,
html body.goods_body .ni-product-desc-wrap .ni-goods-detail-tabs .history,
html body.goods_body .ni-product-desc-wrap .ni-goods-detail-tabs .clearfix{
  background:var(--ni-product-desc-cell-bg);
  background-color:var(--ni-product-desc-cell-bg);
  background-image:none;
  box-shadow:none;
}
html body.goods_body .ni-product-desc-wrap .ni-goods-detail-tabs h2,
html body.goods_body .ni-product-desc-wrap .ni-goods-detail-tabs .history h2,
html body.goods_body .ni-product-desc-wrap .ni-goods-detail-tabs #com_b h2{
  background:transparent;
  background-color:transparent;
  background-image:none;
}
html body.goods_body .ni-goods-desc-content table,
html body.goods_body .ni-goods-desc-panel table{
  background:var(--ni-product-desc-table-bg, #fffdf9);
  background-color:var(--ni-product-desc-table-bg, #fffdf9);
}
html body.goods_body .ni-goods-desc-content td:not(.ni-product-description-heading):not(.ni-desc-heading-cell):not(.ni-v43-desc-section-heading):not([data-ni-desc-heading-label]),
html body.goods_body .ni-goods-desc-content th:not(.ni-product-description-heading):not(.ni-desc-heading-cell):not(.ni-v43-desc-section-heading):not([data-ni-desc-heading-label]),
html body.goods_body .ni-goods-desc-panel td:not(.ni-product-description-heading):not(.ni-desc-heading-cell):not(.ni-v43-desc-section-heading):not([data-ni-desc-heading-label]),
html body.goods_body .ni-goods-desc-panel th:not(.ni-product-description-heading):not(.ni-desc-heading-cell):not(.ni-v43-desc-section-heading):not([data-ni-desc-heading-label]){
  background:var(--ni-product-desc-table-bg, #fffdf9);
  background-color:var(--ni-product-desc-table-bg, #fffdf9);
  background-image:none;
}
/* Product description heading bands are owned by themes/quwan/css/ni_product.css and themes/quwan/js/ni_product.js. */
html body.goods_body .ni-goods-desc-content table[bgcolor],
html body.goods_body .ni-goods-desc-content tr[bgcolor],
html body.goods_body .ni-goods-desc-content td[bgcolor],
html body.goods_body .ni-goods-desc-content th[bgcolor],
html body.goods_body .ni-goods-desc-panel table[bgcolor],
html body.goods_body .ni-goods-desc-panel tr[bgcolor],
html body.goods_body .ni-goods-desc-panel td[bgcolor],
html body.goods_body .ni-goods-desc-panel th[bgcolor]{
  background-image:none;
}

/* NI_CONVERGENCE: product-desc inline-white-runtime-cleanup contract.
 * CSS now covers nested title-row spans even when runtime cleanup is delayed.
 * assets/js/product.js is now a compatibility shim only; runtime normalization lives in ni_product.js.
 */

/* NI_CONVERGENCE: product mobile vertical rhythm compaction
 * Keep the product detail page from leaving a large RWD-only blank area between
 * the product description, collapsible history block and footer.
 */
@media screen and (max-width:700px){
  html body.goods_body .ni-product-desc-wrap,
  html body.goods_body .box.ni-goods-detail-desc-only.ni-product-desc-wrap{
    margin-bottom:0;
  }
  html body.goods_body .ni-product-modern-products{
    margin-top:var(--ni-product-card-stack-gap, 14px);
  }
}

/* NI_CONVERGENCE: product gallery thumb size + selected highlight (post-cascade guard).
 * Size contract: desktop 88×88, mobile (max-width:900) 70×70. Square + cover fill.
 * Selected ring via box-shadow. No !important.
 */
html body.goods_body #goodsInfo.ni-product .ni-gallery-scroll{
  padding:4px 2px 6px;
  overflow-x:auto;
  overflow-y:visible;
}
html body.goods_body #goodsInfo.ni-product #imglist a{
  display:block;
  flex:0 0 auto;
  width:88px;
  height:88px;
  aspect-ratio:1 / 1;
  padding:0;
  overflow:hidden;
  box-sizing:border-box;
  background:transparent;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
}
html body.goods_body #goodsInfo.ni-product #imglist a picture,
html body.goods_body #goodsInfo.ni-product #imglist a .autoslim-picture,
html body.goods_body #goodsInfo.ni-product #imglist a .ni-img-frame--product-gallery-thumb{
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:0;
  border:0;
  background:transparent;
}
html body.goods_body #goodsInfo.ni-product #imglist a img,
html body.goods_body #goodsInfo.ni-product #imglist a .ni-img--product-gallery-thumb,
html body.goods_body #goodsInfo.ni-product #imglist a img.autobg,
html body.goods_body #goodsInfo.ni-product #imglist a img.onbg,
html body.goods_body #goodsInfo.ni-product #imglist.picture img,
html body.goods_body #goodsInfo.ni-product #imglist.picture img.autobg,
html body.goods_body #goodsInfo.ni-product #imglist.picture img.onbg{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  padding:0;
  margin:0;
  border:0;
  outline:0;
  object-fit:cover;
  object-position:center center;
  background:transparent;
  border-radius:0;
  aspect-ratio:auto;
}
html body.goods_body #goodsInfo.ni-product #imglist a[data-ni-gallery-selected="1"],
html body.goods_body #goodsInfo.ni-product #imglist a.is-active,
html body.goods_body #goodsInfo.ni-product #imglist a.tb-selected,
html body.goods_body #goodsInfo.ni-product #imglist a.selected,
html body.goods_body #goodsInfo.ni-product #imglist a.onbg{
  border:1px solid transparent;
  background:transparent;
  overflow:hidden;
  transform:none;
  box-sizing:border-box;
  box-shadow:
    0 0 0 2px #fe7679,
    0 0 0 4px rgba(254,118,121,.12),
    0 8px 18px rgba(254,118,121,.14);
}
html body.goods_body #goodsInfo.ni-product #imglist a[data-ni-gallery-selected="1"] img,
html body.goods_body #goodsInfo.ni-product #imglist a.is-active img,
html body.goods_body #goodsInfo.ni-product #imglist a.tb-selected img,
html body.goods_body #goodsInfo.ni-product #imglist a.selected img,
html body.goods_body #goodsInfo.ni-product #imglist a.onbg img,
html body.goods_body #goodsInfo.ni-product #imglist img.onbg,
html body.goods_body #goodsInfo.ni-product #imglist img.tb-selected,
html body.goods_body #goodsInfo.ni-product #imglist img.selected,
html body.goods_body #goodsInfo.ni-product #imglist a[data-ni-gallery-selected="1"] .ni-img--product-gallery-thumb,
html body.goods_body #goodsInfo.ni-product #imglist a.is-active .ni-img--product-gallery-thumb,
html body.goods_body #goodsInfo.ni-product #imglist a.onbg .ni-img--product-gallery-thumb,
html body.goods_body #goodsInfo.ni-product #imglist a.tb-selected .ni-img--product-gallery-thumb,
html body.goods_body #goodsInfo.ni-product #imglist a.selected .ni-img--product-gallery-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  outline:0;
  box-shadow:none;
  background:transparent;
  border-radius:0;
  clip-path:none;
  -webkit-mask-image:none;
}

@media (max-width:900px){
  html body.goods_body #goodsInfo.ni-product #imglist a{
    width:70px;
    height:70px;
  }
}