/*
Theme Name:   SHT Medino Child
Description:  Astra Child Theme for sht-medino.de
Template:     astra
Version:      4.90.0
*/

/* ══════════════════════════════════════
   1. STICKY HEADER
══════════════════════════════════════ */
#masthead,
.site-header,
.main-header-bar,
.ast-primary-header-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background-color: #0F3D22 !important;
}

/* Shop, product pages: restore original white header */
body.woocommerce-shop #masthead,
body.woocommerce-shop .site-header,
body.woocommerce-shop .main-header-bar,
body.woocommerce-shop .ast-primary-header-bar,
body.single-product #masthead,
body.single-product .site-header,
body.single-product .main-header-bar,
body.single-product .ast-primary-header-bar,
body.tax-product_cat #masthead,
body.tax-product_cat .site-header,
body.tax-product_cat .main-header-bar,
body.tax-product_cat .ast-primary-header-bar {
  background-color: #ffffff !important;
}


/* Remove bottom border/line on header */
.main-header-bar,
.ast-primary-header-bar,
.ast-header-menu-el,
#masthead {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Override Transparent Header: force sticky, keep bg */
.ast-theme-transparent-header #masthead {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  background-color: #0F3D22 !important;
}

.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header .ast-primary-header-bar {
  background: none !important;
  background-color: #0F3D22 !important;
}

/* ══════════════════════════════════════
   1b. SITE TITLE (next to logo image)
══════════════════════════════════════ */

/* Show site title */
.site-title {
  display: block !important;
}

/* Match navigation font style */
.site-title a,
.ast-site-identity .site-title a {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  text-decoration: none !important;
}

/* Default: white on dark-green header */
.ast-site-identity .site-title a {
  color: #ffffff !important;
}

/* Shop/product pages: dark on white header */
body.woocommerce-shop .ast-site-identity .site-title a,
body.single-product .ast-site-identity .site-title a,
body.tax-product_cat .ast-site-identity .site-title a {
  color: #222222 !important;
}

/* ══════════════════════════════════════
   2. HEADER NAVIGATION COLORS
══════════════════════════════════════ */

/* Default nav text: white on dark-green header (non-shop pages) */
.main-header-menu > .menu-item > a,
.ast-header-menu-el > .menu-item > a {
  color: #ffffff !important;
}

/* Shop/product pages: dark text on white header */
body.woocommerce-shop .main-header-menu > .menu-item > a,
body.woocommerce-shop .ast-header-menu-el > .menu-item > a,
body.single-product .main-header-menu > .menu-item > a,
body.single-product .ast-header-menu-el > .menu-item > a,
body.tax-product_cat .main-header-menu > .menu-item > a,
body.tax-product_cat .ast-header-menu-el > .menu-item > a {
  color: #222222 !important;
}

/* Hover state */
.main-header-menu a:hover,
.ast-header-menu-el a:hover,
#ast-desktop-header .main-header-menu a:hover {
  color: #2E9B55 !important;
}

/* Active / current page */
.main-header-menu .current-menu-item > a,
.main-header-menu .current-menu-ancestor > a,
.main-header-menu .current_page_item > a,
.ast-header-menu-el .current-menu-item > a,
.ast-header-menu-el .current-menu-ancestor > a {
  color: #2E9B55 !important;
}

/* Mobile menu: dark text on white background */
.ast-mobile-header-content .main-header-menu > .menu-item > a,
.ast-mobile-header-content .main-header-menu .menu-link,
.ast-mobile-header-content .ast-builder-menu-mobile .menu-link {
  color: #222222 !important;
}

/* Dropdown sub-menu: default text color (white bg needs dark text) */
.main-header-menu .sub-menu a,
.ast-header-menu-el .sub-menu a {
  color: #222222 !important;
}

/* Dropdown sub-menu hover */
.main-header-menu .sub-menu a:hover,
.ast-header-menu-el .sub-menu a:hover {
  color: #2E9B55 !important;
}

/* Mobile menu hamburger icon */
button.ast-mobile-menu-trigger svg,
button.ast-mobile-menu-trigger svg path,
.ast-menu-toggle svg,
.ast-menu-toggle svg path {
  fill: #2E9B55 !important;
}

button.ast-mobile-menu-trigger span {
  background-color: #2E9B55 !important;
}

/* Social icons: white on dark-green header */
.ast-builder-social-element,
.ast-header-social-wrap a .ast-builder-social-element {
  color: #ffffff !important;
}

.ast-builder-social-element svg,
.ast-builder-social-element svg path {
  fill: #ffffff !important;
}

/* Social icons: dark on white header (shop/product pages) */
body.woocommerce-shop .ast-builder-social-element,
body.woocommerce-shop .ast-builder-social-element svg,
body.woocommerce-shop .ast-builder-social-element svg path,
body.single-product .ast-builder-social-element,
body.single-product .ast-builder-social-element svg,
body.single-product .ast-builder-social-element svg path,
body.tax-product_cat .ast-builder-social-element,
body.tax-product_cat .ast-builder-social-element svg,
body.tax-product_cat .ast-builder-social-element svg path {
  color: #222222 !important;
  fill: #222222 !important;
}

/* Social icons hover */
.ast-header-social-wrap a:hover .ast-builder-social-element,
.ast-builder-social-element:hover {
  color: #2E9B55 !important;
}

.ast-header-social-wrap a:hover .ast-builder-social-element svg,
.ast-header-social-wrap a:hover .ast-builder-social-element svg path,
.ast-builder-social-element:hover svg,
.ast-builder-social-element:hover svg path {
  fill: #2E9B55 !important;
}


/* ══════════════════════════════════════
   3. PRODUCT CARD HOVER
══════════════════════════════════════ */
.woocommerce ul.products li.product {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}


/* ══════════════════════════════════════
   4. WOOCOMMERCE CATALOG MODE
══════════════════════════════════════ */

/* Hide prices */
.woocommerce .price,
.woocommerce-Price-amount,
.woocommerce span.amount,
.woocommerce ins .amount,
.woocommerce del .amount {
  display: none !important;
}

/* Hide quantity input next to Request Quote button */
.woocommerce .quantity,
.woocommerce form.cart .quantity {
  display: none !important;
}

/* Hide cart icon in header (desktop + mobile) */
.ast-site-header-cart,
.ast-header-cart-btn-wrap,
.ast-site-header-cart-element,
.ast-header-woo-cart,
.ast-mobile-header-content .ast-site-header-cart,
#ast-mobile-header .ast-site-header-cart,
#ast-mobile-header .ast-header-woo-cart,
.ast-header-cart-wrap,
[data-section="woocommerce-mini-cart"],
.ast-hfb-header .ast-woo-header-cart-info-wrap,
a.wc-block-mini-cart__button,
.wc-block-mini-cart {
  display: none !important;
}

/* Hide mini cart dropdown */
.woocommerce-mini-cart,
.ast-mini-cart-wrap,
.woocommerce div.widget_shopping_cart,
.woocommerce.widget_shopping_cart,
.widget_shopping_cart_content {
  display: none !important;
}

/* Hide floating sticky cart bar that appears on scroll */
.woocommerce-sticky-add-to-cart,
.ast-sticky-product-bar,
[class*="sticky-add-to-cart"],
[class*="sticky_add_to_cart"],
[class*="floating-cart"],
.wc-sticky-add-to-cart {
  display: none !important;
}

/* Hide cart & checkout page content */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  display: none !important;
}

/* Hide "Free Shipping" text */
.woocommerce-shipping-destination,
.woocommerce-shipping-calculator,
.shipping-calculator-button,
[class*="free-shipping"],
[class*="free_shipping"] {
  display: none !important;
}

/* Hide "Guaranteed Safe Checkout" */
.woocommerce-safe-checkout,
[class*="safe-checkout"],
[class*="safe_checkout"],
.wcpb-safe-checkout-logo,
.woo-checkout-secure {
  display: none !important;
}


/* ══════════════════════════════════════
   5. PRODUCT PAGE FONT CONSISTENCY
══════════════════════════════════════ */
.woocommerce-tabs .panel,
.woocommerce-tabs .panel table,
.woocommerce-tabs .panel th,
.woocommerce-tabs .panel td,
.woocommerce-tabs .panel li,
.woocommerce-tabs .panel p,
.woocommerce div.product .product_meta,
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 16px !important;
  font-size: 1rem !important;
}

/* Description 面板里每条 <p> 默认按浏览器 UA 样式走（1em 上下外边距），
   多条短句堆在一起时视觉间距明显偏大，这里统一收紧 */
.woocommerce-tabs .panel p {
  margin: 0 0 0.6em !important;
}

.woocommerce-tabs .panel p:last-child {
  margin-bottom: 0 !important;
}

/* Notes / Documents 这类小节标题：字号只比正文略大、字重适度加粗即可，
   之前 20px/700 太抢眼，跟 Description 里大段纯文本的观感不协调 */
.woocommerce-tabs .panel h3,
.woocommerce-tabs .panel h4,
.woocommerce-tabs .panel h5 {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  margin-top: 1.2em !important;
  margin-bottom: 0.4em !important;
}

.woocommerce-tabs .panel h3:first-child,
.woocommerce-tabs .panel h4:first-child,
.woocommerce-tabs .panel h5:first-child {
  margin-top: 0 !important;
}

/* Product description spec table */
.sht-spec-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.sht-spec-table th,
.sht-spec-table td {
  border: 1px solid var(--ast-border-color, #d1d1d1) !important;
  padding: 10px 14px !important;
  text-align: left !important;
}

.sht-spec-table thead tr {
  background-color: #f5f5f5 !important;
}

.sht-spec-table tbody tr:nth-child(even) {
  background-color: #fafafa !important;
}

/* ══════════════════════════════════════
   6. COMPLIANZ COOKIE BANNER
══════════════════════════════════════ */

/* Banner container */
.cmplz-cookiebanner {
  background-color: #0F3D22 !important;
  border: none !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Banner title */
.cmplz-cookiebanner .cmplz-header,
.cmplz-cookiebanner .cmplz-title {
  color: #ffffff !important;
}

/* Banner message text */
.cmplz-cookiebanner .cmplz-message {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Accept button */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
  background-color: #2E9B55 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
  background-color: #248a49 !important;
}

/* Deny button */
.cmplz-cookiebanner .cmplz-btn.cmplz-deny {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 4px !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
  border-color: #ffffff !important;
}

/* View Preferences button */
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
  text-decoration: underline !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover {
  color: #ffffff !important;
}

/* Save Preferences button (inside expanded view) */
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
  background-color: #2E9B55 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
}

/* Category toggles */
.cmplz-cookiebanner .cmplz-categories .cmplz-category label {
  color: #ffffff !important;
}

/* Toggle switch active state */
.cmplz-cookiebanner input[type="checkbox"]:checked + .cmplz-slider {
  background-color: #2E9B55 !important;
}

/* Links inside banner */
.cmplz-cookiebanner a {
  color: #2E9B55 !important;
}

.cmplz-cookiebanner a:hover {
  color: #ffffff !important;
}

/* ══════════════════════════════════════
   7. PRODUCT DESCRIPTION — DOCUMENT LIST
   用法：产品长描述里，文档下载区块写成
   <h5>Documents</h5>
   <ul class="sht-doc-list">
     <li><a href="...">📄 Certificate of Analysis</a></li>
   </ul>
   跟 .sht-spec-table 是同一套约定，用于"爆款/仪器"类产品模板
   (sht-product-instrument.json)，普通产品模板也可以用。
══════════════════════════════════════ */
.sht-doc-list {
  list-style: none !important;
  margin: 16px 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.sht-doc-list li {
  margin: 0 !important;
}

.sht-doc-list a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #0F3D22 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.sht-doc-list a:hover {
  color: #2E9B55 !important;
  text-decoration: underline !important;
}

/* PDF/文档图标固定尺寸——SVG只有viewBox没有width/height属性，
   不手动约束会退回浏览器默认替换元素尺寸（约300px），显得巨大 */
.sht-doc-list a svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  fill: currentColor !important;
}

/* ══════════════════════════════════════
   8. SINGLE PRODUCT PAGE — LAYOUT FIXES（2026-08-22 / 2026-08-23）
══════════════════════════════════════ */

/* Astra在面包屑和标题之间多渲染了一遍分类徽章，
   跟下方SKU旁边的Category重复了，隐藏这一处 */
.single-product-category {
  display: none !important;
}

/* 主图：本来就有原生放大镜功能，缩略图不需要很大，缩到跟商品列表
   卡片差不多宽（约300px，接近4列排布时单张卡片的宽度）就够了。
   同时也统一成 1:1 正方形框（跟 Related products / Shop 那条规则
   同一个原则），不然有的产品照片是方的、有的是扁的，主图区域高矮
   不一，看着不协调。 */
.woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  max-width: 300px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  background-color: #ffffff !important;
}

/* 只隐藏鼠标悬停时弹出的局部放大预览框（jquery.zoom 插件生成的
   .zoomImg，插件内联样式控制显隐，这里用 !important 强制盖掉），
   不改 zoom 功能本身是否启用，这样右上角放大镜图标和点击弹出
   全屏大图（PhotoSwipe）都还是原生的，正常保留。 */
.woocommerce-product-gallery .zoomImg,
.woocommerce-product-gallery .zoomWindow,
.woocommerce-product-gallery .zoomWindowContainer {
  display: none !important;
}

/* 这条规则曾经把 .woocommerce-product-gallery__image 和里面的 <a>
   也一起缩到 300px，目的是让链接的可点击范围正好等于照片本身。
   后来发现这在"多图产品"上会出严重的 bug：S-48 有4张图，用的是
   WooCommerce 原生的 flexslider 轮播，切换机制依赖 JS 把每一张
   幻灯片的宽度精确设成跟外层"取景框"（.flex-viewport，overflow:
   hidden）一样宽，靠这个精确匹配把其它几张图裁在视口外面。我这条
   !important 规则把每张幻灯片强行缩到 300px，比取景框窄了将近100px，
   导致下一张图的一部分露在取景框里没被裁掉——就是用户看到"点第一张
   图，第一张和第二张的一部分一起显示"的真正原因。
   现在已经不需要靠缩小这两层来解决"链接可点击范围"的问题了（下面
   pointer-events:none 那条规则已经把整个链接的点击/悬停功能关掉，
   不管这个框多宽，都不会再有小手/死区问题），所以这里去掉宽度限制，
   让 flexslider 自己控制每张幻灯片的宽度，两种情况（单图/多图）
   都不会错位。图片本身的视觉大小和居中，交给下面 img 那条规则
   （aspect-ratio + max-width:300px + margin:auto）就够了。 */

/* 放大镜图标是绝对定位的，参照的容器是 .woocommerce-product-gallery
   （同时也是 div.images 那一列）。照片本身固定 300px 居中，这里把
   外层容器放宽到 400px——多出来的 100px 让照片左右各留 50px 空隙，
   放大镜（贴着这个外层容器的右边缘）就会落在右边那条空隙里，处在
   照片外面、但仍然紧挨着照片，不会再叠在照片上面。
   左右两栏改成 40%/60% 的比例（而不是固定 px），图片列的这个 400px
   只是"最多这么宽"的上限，实际按 40% 比例走，文字列相应占 58%，
   两栏之间留 2% 的间距，不会太贴。 */
.woocommerce-product-gallery.images {
  max-width: 400px !important;
}

.woocommerce #content .ast-woocommerce-container div.product div.images,
.woocommerce .ast-woocommerce-container div.product div.images,
.woocommerce-page #content .ast-woocommerce-container div.product div.images,
.woocommerce-page .ast-woocommerce-container div.product div.images {
  width: 40% !important;
}

.woocommerce #content .ast-woocommerce-container div.product div.summary,
.woocommerce .ast-woocommerce-container div.product div.summary,
.woocommerce-page #content .ast-woocommerce-container div.product div.summary,
.woocommerce-page .ast-woocommerce-container div.product div.summary {
  width: 58% !important;
}

/* 照片本身不需要再是链接了——已经有放大镜图标专门负责弹出全屏大图
   （查了实际 DOM，图标是单独一个 <a class="woocommerce-product-
   gallery__trigger">，直接挂在 .woocommerce-product-gallery 下面，
   跟包住照片的这个链接是两个不同元素，互不影响）。这里把照片外面
   这层链接的点击/悬停功能整个关掉（pointer-events:none），只留
   放大镜可以点，小手光标也会跟着自然消失，不用单独设 cursor。 */
.woocommerce-product-gallery__image a {
  pointer-events: none !important;
}

/* 放大镜图标外面那圈浅灰色圆底是 Astra 自己加的按钮背景
   （.woocommerce-product-gallery__trigger 的 background），
   放大镜的图形本身是另外用 :before/:after 画出来的镜片+手柄，
   去掉背景色之后图标还在，只是不再带那个圆框。 */
.woocommerce-product-gallery__trigger {
  background: transparent !important;
}
/* 排查记录（2026-10-02）：iPhone Safari 上所有产品页都能往右滑出一大片
   空白，其他类型页面没有。原因在这个放大镜按钮里：WooCommerce 在按钮里
   放了一个 <span aria-hidden> 装 🔍 emoji（被 WordPress emoji 脚本换成
   <img class="emoji">），Astra 用 text-indent:-9999px 想把它推到屏幕外、
   自己用 ::before/::after 画放大镜。Chrome 里这个 span 只有 36px 宽，
   但 Safari 的 WebKit 引擎把它算成约 20000px 宽（从按钮往右伸出 1 万多
   px），页面就能一直往右滑；WebKit 里还会看到两个放大镜叠在一起。
   这个 span 本来就是要藏起来的，直接隐藏；按钮自己有 aria-label，
   点击放大功能不受影响 */
.woocommerce-product-gallery__trigger span {
  display: none;
}

/* Related products / Shop 列表的缩略图：统一用 1:1 正方形的框，
   图片按比例缩放、不裁切（object-fit:contain），多余的空隙用白色
   （不是灰色）填充——页面背景本来就是白的，留白基本看不出来，
   同时保证每张卡片的图片区域一样高，下面的标题文字起始位置就对齐了。
   用 aspect-ratio 而不是写死的 px 高度，这样在不同列数/屏幕宽度下
   框的比例始终一致，不会跟列宽错位。 */
.woocommerce ul.products img {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  background-color: #ffffff !important;
}

/* Astra 给单产品页 #primary 加了 60px 的上下外边距（博客文章的默认间距，
   被单品页模板继承了），是主图/文字栏跟顶部导航之间大片空白的来源 */
body.single-product #primary {
  margin-top: 0 !important;
}

/* "Related products" 标题沿用全局 h2 样式（最大到 42px），
   跟这个区块的分量不匹配，缩小成小节标题的观感 */
.related.products > h2 {
  font-size: 20px !important;
  margin-bottom: 0.8em !important;
}

/* 产品卡片（Related products、首页Best Seller等所有 ul.products 列表）的产品名：
   最多显示3行，超出用省略号；并且统一占满3行的高度——不管名字是1行还是3行，
   下面的分类名都落在同一条线上（2026-09-29，之前名字长短不一导致分类名高低不齐）。
   用em计算高度，所以在Elementor组件里改标题字号后会自动跟着变，不用改这里。
   不影响分类页/Shop页的表格和分类卡片（那两个是自定义模板，不是ul.products）。
   想改成2行：把下面两处的3都改成2 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  line-height: 1.35 !important;
  min-height: calc(1.35em * 3);
}

/* 购物车按钮重复出现的真正原因：remove_action 想把默认按钮从 SKU 上面
   挪到下面，但不管挂在哪个时机都没能成功移除原来那个，变成两个按钮
   一起渲染（一个在 product_meta 前，一个在后）。改回纯 CSS：不再碰
   PHP 钩子，只用 flex + order 调整视觉顺序，.cart 只会渲染一份 */
.woocommerce div.product .summary.entry-summary {
  display: flex !important;
  flex-direction: column !important;
}
.summary.entry-summary > .woocommerce-breadcrumb { order: 1; }
.summary.entry-summary > h1.product_title { order: 2; }
.summary.entry-summary > .woocommerce-product-details__short-description { order: 3; }
.summary.entry-summary > .product_meta { order: 4; }
.summary.entry-summary > .cart { order: 5; }

/* 单品/商品列表页用的是 Astra "Plain Container" 布局，左右几乎没有留白，
   跟首页（Elementor 页面，两边留白充足）对比显得很挤，统一加宽两侧间距 */
body.ast-plain-container.single-product #content > .ast-container,
body.ast-plain-container.woocommerce-shop #content > .ast-container,
body.ast-plain-container.tax-product_cat #content > .ast-container {
  padding-left: 3em !important;
  padding-right: 3em !important;
}

@media (max-width: 600px) {
  body.ast-plain-container.single-product #content > .ast-container,
  body.ast-plain-container.woocommerce-shop #content > .ast-container,
  body.ast-plain-container.tax-product_cat #content > .ast-container {
    padding-left: 1em !important;
    padding-right: 1em !important;
  }
}

/* ══════════════════════════════════════
   9. HEADER LOGO — 放大
   Astra 原生给 header logo 加了 width:50px 的限制（主题自己的
   Customizer设置生成的），这里用更高优先级覆盖成 80px。
══════════════════════════════════════ */
header .custom-logo-link img {
  max-width: 80px !important;
  width: 80px !important;
}

/* ══════════════════════════════════════
   10. GROUPING TABLE — 分类表格视图（应用于全部产品分类页）
   字体/字号/正文颜色照抄实测的真实网站数值（用Playwright量的
   Shop页/单品页computed style，不是凭空定的）：
   正文字体 "Instrument Sans"，标题字体 Inter（跟全站一致）
   正文色 #454545（单品页 .sku/.product_meta 实测值）
   标题/产品名色 #222222（.woocommerce-loop-product__title 实测值）
   按反馈去掉了绿色——表头/分组横条/高亮/字体都改成中性灰黑色调，
   不再用品牌绿，避免整页看起来"太多绿色"（排序小箭头例外，用户
   后来要求单独把这个小图标改成品牌绿 #2E9B55，范围很小，不算重新
   引入"大面积绿色"）
══════════════════════════════════════ */
/* 排查记录：这些 --sht-* 变量原来是定义在 .sht-grouping-page 这个
   class 上的（只有分类页/分类栅格页那个大 div 才有这个 class）。
   后来 [sht_product_table] 短代码要在 Elementor 手工搭的落地页里用，
   那些页面根本没有 .sht-grouping-page 这层包裹，导致变量整个是
   undefined 的——不只是外框的 border 用不了，连表头字色、hover
   底色这些引用了同一批变量的地方全都悄悄失效了，只是边框缺失
   看得最明显。改成定义在 :root 上，全站任何页面都能用 */
:root {
  --sht-font-heading: 'Inter', sans-serif;
  --sht-font-body: 'Instrument Sans', sans-serif;
  --sht-heading-text: #222222;
  --sht-text: #454545;
  --sht-text-muted: #767676;
  --sht-border: #E3E3E3;
  --sht-border-strong: #CFCFCF;
  --sht-surface-alt: #F4F4F4;
  --sht-surface-alt-2: #EAEAEA;
  /* 带一点品牌绿色调的浅色背景，跟上面两个中性灰的 surface-alt 不是
     一回事——这两个是特意挑出来给 Hero/板块背景用的，尤其是从白色到
     --sht-surface-tint 的渐变，白到浅绿比白到纯灰更贴合网站的绿色
     品牌调性 */
  --sht-surface-tint: #EAF4EC;
  --sht-surface-tint-soft: #F4F8F5;
}
.sht-grouping-page {
  font-family: var(--sht-font-body);
  color: var(--sht-text);
  padding: 40px 0 64px;
  /* 排查记录：Astra 在某些页面（内容比较少的分类页，比如 Chemicals）
     会把外层容器渲染成 display:flex，这个 div 是里面唯一的子元素，
     flex 子项默认不会撑满整行，是按自己内容需要多宽就多宽——内容
     多的页面刚好看着是撑满的，内容少的页面就明显变窄了，这就是不同
     分类页宽度不一致的原因。显式给 100% 宽度，不管外层是不是 flex
     都强制撑满 */
  width: 100%;
}
.sht-grouping-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 3em;
}
@media (max-width: 600px) {
  .sht-grouping-inner { padding: 0 1em; }
}

.sht-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.sht-crumb {
  font-size: 15px;
  color: var(--sht-text-muted);
  margin-bottom: 0;
}
.sht-crumb a { color: var(--sht-text-muted); text-decoration: none; }
.sht-crumb a:hover { color: var(--sht-heading-text); text-decoration: underline; }
.sht-crumb span[aria-hidden] { opacity: .5; margin: 0 4px; }
.sht-crumb > span:last-child { color: var(--sht-heading-text); font-weight: 600; }

.sht-grouping-intro {
  max-width: 66ch;
  color: var(--sht-text);
  line-height: 1.6;
  margin: 0 0 28px;
}

.sht-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}
.sht-search { position: relative; flex: 1; min-width: 220px; max-width: 340px; }
.sht-search input {
  width: 100%;
  font-family: var(--sht-font-body);
  font-size: 15px;
  padding: 9px 12px 9px 34px;
  border: none;
  border-bottom: 1px solid var(--sht-border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--sht-text);
}
.sht-search input:focus {
  /* Astra 主题自己有一条全局的 input:focus 样式（聚焦时四边都描一圈
     细点线），跟我们这个搜索框的选择器优先级打平手，谁的 CSS 后
     加载谁赢，不稳定。这里明确用 !important 覆盖回来，针对的是
     主题自带的全局样式，不是在跟 DataTables 自己的渲染逻辑打架 */
  outline: none !important;
  border: none !important;
  border-bottom: 1px solid var(--sht-heading-text) !important;
}
.sht-search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; stroke: var(--sht-text-muted);
}
/* 表格本体现在交给 DataTables 渲染（吸顶/移动端适配都是它的
   官方扩展在处理），这里只负责把它默认的样式改成跟品牌字体/颜色
   一致，不再自己维护吸顶、边框这些渲染逻辑本身 */
table.sht-dt {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
  /* 排序小箭头用的官方 CSS 变量（DataTables 自己文档化的主题接口），
     覆盖成品牌绿，不用另外画箭头图标 */
  --dt-order-arrow_color: #2E9B55;
  --dt-order-arrow_color-current: #2E9B55;
}
/* WooCommerce/Astra 默认给表格 td/th 四边都加一圈很淡的边框，这里
   显式清掉上/左/右，只留下面的行分隔线，不出现竖线（scrollY 模式下
   表头和表身其实是两张独立的 table，两边都要清，所以选择器没有限定
   在 thead/tbody 里，同时覆盖表头表和表身表） */
table.sht-dt th,
table.sht-dt td {
  border-top: none;
  border-left: none;
  border-right: none;
}
table.sht-dt thead th {
  text-align: left;
  font-family: var(--sht-font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sht-text-muted);
  /* 跟产品页规格表表头（.sht-spec-table thead tr）用同一个站内定义的灰色 */
  background: #f5f5f5;
  padding: 11px 16px;
  border-bottom: 1px solid var(--sht-border-strong);
  white-space: nowrap;
}
table.sht-dt thead th.dt-orderable-asc,
table.sht-dt thead th.dt-orderable-desc { cursor: pointer; }

table.sht-dt thead th.dt-ordering-asc,
table.sht-dt thead th.dt-ordering-desc { color: var(--sht-heading-text); }
table.sht-dt tbody td {
  padding: 10px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--sht-border);
}
table.sht-dt tbody tr:last-child td { border-bottom: none; }
table.sht-dt tbody tr:hover td { background: var(--sht-surface-alt); }

/* Application 落地页精简表格（[sht_product_table] 短代码）专用的
   外框+两个小元素，其余外观全部继承上面 .sht-dt 的规则，不用重复
   定义。分类页那套表格为了不出现竖线，本来就去掉了表格自身的右边框
   和最后一行的下边框（没打算画整圈外框）；这个精简表格是照着效果图
   "整个表格外面包一圈框"的样式做的，属于不同场景，所以额外包一层
   有完整四边边框的容器，不去动分类页表格已有的那些规则 */
.sht-mini-table-wrap {
  border: 1px solid var(--sht-border);
  overflow-x: auto;
}
/* 固定4列宽度百分比，四个Application页的表都一样，不再由浏览器按
   每张表自己的内容各自伸缩——顺序是 Product/Cat.No/Feature/Specification */
.sht-mini-table-wrap table { table-layout: fixed; }
.sht-mini-table-wrap table th:nth-child(1),
.sht-mini-table-wrap table td:nth-child(1) { width: 30%; }
.sht-mini-table-wrap table th:nth-child(2),
.sht-mini-table-wrap table td:nth-child(2) { width: 10%; }
.sht-mini-table-wrap table th:nth-child(3),
.sht-mini-table-wrap table td:nth-child(3) { width: 30%; }
.sht-mini-table-wrap table th:nth-child(4),
.sht-mini-table-wrap table td:nth-child(4) { width: 30%; }
.sht-mini-name {
  color: var(--sht-heading-text);
  font-weight: 500;
  text-decoration: none;
}
.sht-mini-name:hover { color: #2E9B55; text-decoration: underline; }
.sht-mini-tag {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #2E9B55;
}
/* 手机上（≤767px，跟 Elementor 的手机断点一致）同一张表排成卡片：
   上面固定 4 列宽度在手机上会把 Cat. No. 挤到 33px，货号一个字符
   一行。这里把表格各层改成普通块，每行产品变成一张带边框的卡片——
   第一行产品名，下面每项一行，左侧灰色小字是 functions.php 输出的
   data-label（列名），所以表头在手机上隐藏。顺序改成 Cat. No. →
   Specification → Feature（短的在前），Feature 没填的产品整行不显示。
   只作用于 .sht-mini-table-wrap，分类页的 DataTables 表格不受影响 */
@media (max-width: 767px) {
  .sht-mini-table-wrap {
    border: none;
    overflow: visible;
  }
  .sht-mini-table-wrap table,
  .sht-mini-table-wrap tbody,
  .sht-mini-table-wrap td {
    display: block;
    width: auto !important;
  }
  .sht-mini-table-wrap thead { display: none; }
  .sht-mini-table-wrap tbody tr {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sht-border);
    padding: 14px 16px;
    margin-bottom: 10px;
  }
  .sht-mini-table-wrap tbody tr:last-child { margin-bottom: 0; }
  .sht-mini-table-wrap table.sht-dt tbody td,
  .sht-mini-table-wrap table.sht-dt tbody tr:hover td {
    padding: 0;
    border: none;
    background: none;
  }
  .sht-mini-table-wrap tbody td:nth-child(1) {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.4;
  }
  .sht-mini-table-wrap tbody td:nth-child(3) { order: 1; }
  .sht-mini-table-wrap tbody td:not(:first-child) {
    display: flex;
    gap: 12px;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
  }
  .sht-mini-table-wrap tbody td:not(:first-child)::before {
    content: attr(data-label);
    flex: 0 0 92px;
    padding-top: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sht-text-muted);
  }
  .sht-mini-table-wrap tbody td:empty { display: none; }
}

/* Responsive 展开箭头（窄屏收起次要列时显示）。之前这条规则是照着
   旧版 Responsive 的"实心方块图标"画法写的，实际装的 Responsive
   4.0.3 用的是三角形（靠它自己文档化的 CSS 变量控制），旧规则对
   不上号，方块图标是漏网的旧代码，不是它本来的样子。改成用官方
   变量调大小和颜色，不用再自己画图标。
   2026-10-02 按用户要求改小、改浅（原来 6px、#222），不抢画面 */
table.sht-dt {
  --dtr-control-triangle_size: 4px;
  --dtr-control-triangle_color: #B5B5B5;
}
.dtr-details { margin-top: 6px; }
.dtr-details li { padding: 4px 0 !important; border-bottom: 1px solid var(--sht-border) !important; }
.dtr-details .dtr-title { font-family: var(--sht-font-heading); font-weight: 600; color: var(--sht-text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }

/* 排查记录：scrollY 模式下 DataTables 自己的滚动容器结构性地带了
   overflow-x:auto（表头表和表身表要保持横向同步，这是它架构上的
   固有设计），在小数点缩放比例（比如150%）的高分屏上，浏览器计算
   可用宽度时会有约1px的取整误差，多冒出一条其实没有实际内容溢出
   的横向滚动条（DataTables 官方论坛上这类问题的通用结论——
   https://datatables.net/forums/discussion/42773 ）。只在明显是
   桌面宽度（>800px，Responsive 在这个宽度下本来就会让四列都完整
   显示，不需要横向滚动）时把这个多余的滚动条隐藏，800px 以下
   （所有手机、竖屏平板）完全不动，保留原来的横向滚动能力做安全网 */
@media (min-width: 800px) {
  div.dt-scroll-body {
    /* DataTables 用 JS 给这个容器写了行内样式 overflow:auto，
       只能用 !important 才盖得过行内样式，这跟 CSS 选择器优先级
       无关，是行内样式本身的规则 */
    overflow-x: hidden !important;
  }
}

.sht-thumb {
  width: 52px; height: 52px; border-radius: 8px;
  border: 1px solid var(--sht-border);
  background-color: var(--sht-surface-alt);
  background-position: center; background-size: contain; background-repeat: no-repeat;
  flex: none;
}
.sht-name-cell { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.sht-name-link {
  /* flex 子项默认 min-width:auto，会按文字不换行时的整行宽度撑开，
     长产品名可以撑到五六百像素。DataTables 的 Responsive 扩展量列宽
     时量到的就是这个撑开后的宽度，认为这一列开销太大，不管优先级
     设多高都会把它收起来（表现出来就是 Product 列整个消失）。
     加 min-width:0 让它能正常在容器内换行/收缩，回到真实宽度 */
  min-width: 0;
  font-family: var(--sht-font-heading); font-size: 13px; font-weight: 500;
  color: var(--sht-heading-text); text-decoration: none; line-height: 1.35;
}
.sht-name-link:hover { color: #2E9B55; text-decoration: underline; }

.sht-table-footer { margin-top: 14px; font-size: 13.5px; color: var(--sht-text-muted); }

/* 分类栅格卡片（有子分类的分类页，比如 Molecular Biology；以及 Shop
   首页展示顶级分类入口）。用 flex 而不是原来的 grid auto-fill，是
   因为 auto-fill 达到最小宽度就会换行变成竖排；flex 配 flex-shrink
   可以让卡片始终挤在一行里，数量越多卡片自动越窄，不用另外算列数。
   窄屏（比如手机）挤成一排会太小，用媒体查询在 700px 以下改回换行 */
.sht-cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
@media (min-width: 700px) {
  .sht-cat-grid { flex-wrap: nowrap; }
}
.sht-cat-card {
  flex: 1 1 150px;
  max-width: 230px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sht-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.sht-cat-card:hover {
  border-color: var(--sht-border-strong);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.sht-cat-card-img {
  aspect-ratio: 4 / 3;
  background-color: var(--sht-surface-alt);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.sht-cat-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
}
.sht-cat-card-title {
  font-family: var(--sht-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--sht-heading-text);
}
.sht-cat-card-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--sht-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sht-cat-card-count {
  margin-top: 2px;
  font-size: 11px;
  color: var(--sht-text-muted);
}

/* ══════════════════════════════════════
   11. 导航菜单三级下拉 — 修正飞出方向，避免被视口边缘截断
   Astra 原生的多级下拉菜单，每往下一级都固定往右飞出（left:100%），
   完全不管有没有超出屏幕。Shop 在 header 里本来就偏右（Home/Shop/
   About/Contact 靠右对齐），二级菜单（Molecular Biology 等）已经
   贴着屏幕右侧，三级菜单（DNA/RNA Extraction 等）再往右飞一层，
   在 1440px 以下的屏幕就会被切掉、看不全。
   改法：只让"三级及以上"的下拉（.sub-menu 嵌在另一个 .sub-menu 里面）
   往左飞出（right:100%），不影响二级菜单本身的位置，也不影响 About
   这种只有两级、没有这个问题的菜单。
══════════════════════════════════════ */
.main-header-menu .sub-menu .sub-menu,
#primary-menu .sub-menu .sub-menu {
  left: auto !important;
  right: 100% !important;
}

/* ══════════════════════════════════════
   12. PRODUCT DETAIL TEMPLATE —— 精选产品详情页共用样式
   给20-30个要精细设计的产品用的 Theme Builder 单品模板（Display
   Condition按 Product Tag 命中）。模板本身只搭 Hero/吸顶导航/规格表
   这些每个产品都一样的骨架（走 Elementor 原生 WooCommerce 组件），
   每个产品自己的内容（Overview卡片/Protocol/Performance/Documents/
   FAQ等）写在各自 Description/Short description 字段的HTML里，靠
   下面这几个class统一视觉——跟 .sht-spec-table / .sht-doc-list 是
   同一个约定（写在产品字段HTML里直接套用，不是走Elementor组件），
   配套的操作指南见 docs/build-guide-detailed-product-template.md
══════════════════════════════════════ */
/* 这一节的灰色/分割线故意不用 --sht-* 变量（那套是分类页DataTables
   表格专用的另一套灰阶，#222/#454545/#767676/#E3E3E3），改用
   PROJECT.md 品牌色表里 Home/S-48 等营销页实际在用的那套中性色
   （标题#111827/正文#374151/弱化#6B7280/分割线#d1d1d1/卡片边框
   #e5f5ea），跟这个模板视觉上更接近的其它品牌页保持一致 */
/* 排查记录（最终结论）：原生CSS position:sticky 在这里做不到——
   不是外层Container多高的问题（试过合并Container，没用），是
   Elementor给**每一个组件**自动包的最内层包装div，永远只会跟组件
   内容一样高（这个HTML组件是49.58px），跟外面多高的Container完全
   无关，这是Elementor所有组件的通用结构，绕不开。所以最终定下来
   还是用 Elementor 官方的 Advanced → Motion Effects → Sticky
   （JS驱动，Offset填80，手机端主流机型73），接受贴住那一瞬间有
   一点点不如原生丝滑——这是页面构建器的结构性限制，不是配置问题。
   这里只保留视觉样式，定位交给Elementor的Sticky效果处理，不要
   再加 position:sticky，会跟Elementor自己的机制冲突。 */
.sht-pdp-jump {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid #d1d1d1;
}
.sht-pdp-jump-inner {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  padding: 0 4px;
}
.sht-pdp-jump-inner::-webkit-scrollbar { display: none; }
.sht-pdp-jump a {
  flex-shrink: 0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  padding: 14px 0;
}
.sht-pdp-jump a:hover { color: #2E9B55; }

.sht-pdp-eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2E9B55;
  margin-bottom: 10px;
}

/* Hero区分类路径(WooCommerce Breadcrumb组件)悬停效果——只加在这个
   组件上的专属class(.sht-pdp-crumb)生效，不动.woocommerce-breadcrumb
   本身，因为那个class全站一百多个普通产品页也在用，不能跟着改 */
.sht-pdp-crumb a { transition: color .15s ease; }
.sht-pdp-crumb a:hover { color: #2E9B55; text-decoration: underline; }

.sht-pdp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.sht-pdp-badge {
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border: 1px solid #e5f5ea;
  border-radius: 999px;
  background: #fff;
  color: #0F3D22;
}

.sht-pdp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sht-pdp-card {
  border-top: 3px solid #2E9B55;
  background: #EAF7EE;
  border-radius: 0 0 8px 8px;
  padding: 20px;
}
.sht-pdp-card h3 { margin: 0 0 6px; font-size: 17px; }
.sht-pdp-card p { margin: 0; font-size: 14px; color: #6B7280; }

.sht-pdp-faq details {
  margin-bottom: 20px;
}
.sht-pdp-faq details:last-child {
  margin-bottom: 0;
}
.sht-pdp-faq summary {
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  color: #111827;
}
.sht-pdp-faq details p {
  margin: 12px 0 0;
  color: #6B7280;
  font-size: 14px;
}

/* Related workflows —— 2026-09-16简化：不再用卡片网格，改成简单的
   带点列表；每一点整行都是链接（点哪里都能点进去），风格跟
   .sht-doc-list的链接保持一致（默认灰色不加粗、悬停变绿） */
.sht-pdp-bullets {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.sht-pdp-bullets li {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
}
.sht-pdp-bullets li:last-child { margin-bottom: 0; }
.sht-pdp-bullets a {
  color: #6B7280;
  font-weight: 400;
  text-decoration: none;
}
.sht-pdp-bullets a:hover { color: #2E9B55; text-decoration: underline; }

/* 板块正文里插一张居中的图（比如Performance板块，[sht_pdp_cards]
   下面放一张验证数据图/示意图）。用法：<img src="..." alt="..."
   class="sht-pdp-img-center"> 直接写在Description里就行 */
.sht-pdp-img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  max-width: 80%;
  height: auto;
  border-radius: 8px;
  border: none !important;
  box-shadow: none !important;
}

/* Description里每个板块的大标题——2026-09-15简化：不再是"小号绿色
   eyebrow标签 + 一句营销大标题"两行，合并成一个<h2>就够了。用法：
   <section class="sht-pdp-section" id="...">包一层，里面第一个<h2>
   自动套用这个字号 */
.sht-pdp-section > h2 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: #1A6B35;
  margin: 0 0 16px;
}

/* 板块内部各内容块（段落/表格/卡片网格/图片/列表）之间的间距，统一
   收到这一条规则管理，20px——比板块之间的48px小一档，区分"同一
   板块内部"和"板块之间"两种间距。之前是表格/卡片网格/图片各自身上
   零散设置了不完全一致的margin（22-24px不等），改成这里统一控制，
   不要再回去给单个元素加margin-top/margin-bottom。
   ⚠️ 这个规则只管这几种元素之间"看起来"的间距，管不了 WordPress
   wpautop 把Description里的空行自动转换成空的<p>标签（这些空<p>
   自己也会占一份20px的margin，看起来像多出一段空白）——所以填内容
   的时候，shortcode结束标签和下一行内容之间**不要空行**，紧接着写，
   不然还是会看到意外的额外空白 */
.sht-pdp-section > p,
.sht-pdp-section > ul,
.sht-pdp-section > table.sht-spec-table,
.sht-pdp-section > .sht-pdp-cards,
.sht-pdp-section > img.sht-pdp-img-center {
  margin-top: 0;
  margin-bottom: 20px;
}
/* 带标题的图（Excel图片列写成"标题 | URL"时由build-import-csv.js生成）：
   跟.sht-pdp-img-center一样居中、80%宽，标题在图片下方，灰色14px居中，
   跟板块里其它灰色说明文字同一套规格 */
.sht-pdp-section > figure.sht-pdp-figure {
  width: 80%;
  max-width: 80%;
  /* !important：Elementor的 ".elementor .elementor-widget:not(...):not(...) figure
     {margin:0}" 优先级比这里高，会把间距清零，两张带标题的图就贴在一起了
     （2026-09-26 LM801001线上实测） */
  margin: 0 auto 20px !important;
  padding: 0;
  /* Astra内联CSS ".ast-article-single figure { box-shadow: 0 0 30px rgba(0,0,0,.15) }"
     会给figure整体加一圈阴影（图+标题被框成一张"卡片"）；
     纯<img>那一路的.sht-pdp-img-center早就去掉了阴影，这里保持一致 */
  box-shadow: none !important;
}
.sht-pdp-section > figure.sht-pdp-figure:last-child {
  margin-bottom: 0 !important;
}
.sht-pdp-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: none !important;
  box-shadow: none !important;
}
.sht-pdp-figure figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #6B7280;
  text-align: center;
}
/* 可选：板块正文段落改用浅灰色 #6B7280（默认是全站正文色 #454545）。
   用法：在Elementor里给显示这个板块的 Shortcode 组件（或它外面的Container）
   Advanced → CSS Classes 填 sht-text-muted。只影响加了这个class的板块，
   其它产品页不变（2026-09-29 L-Fucose从模板Text Editor搬进Description后，
   用户希望保持原来Text Editor里用的 #6B7280） */
.sht-text-muted .sht-pdp-section > p,
.sht-text-muted .sht-pdp-section td {
  /* 2026-09-29 加上表格内容（td）：L-Fucose的Specification表格也要浅灰；表头th保持原色 */
  color: #6B7280;
}

/* Documents板块里"需要询问才能拿到"的文件（证书、符合性声明等）：不放在
   .sht-doc-list下载列表里，改成一行线框按钮，跟可以直接下载的文件在视觉上
   区分开，避免访客以为点了就能下载（2026-09-29 S-48加的）。
   线框样式也跟Hero区实心的Request Quote主按钮区分开，属于次要按钮。
   用法（写在Description里，</div>要紧贴</section>）：
     <p class="sht-pdp-request-note">Certificates are available on request:</p>
     <div class="sht-pdp-btn-row"><a class="sht-pdp-btn" href="…">…</a><a class="sht-pdp-btn" href="…">…</a></div></section>
   !important：要压过上面".sht-pdp-section .sht-doc-list a"那类灰色链接规则和主题全局链接色 */
.sht-pdp-section > .sht-pdp-btn-row {
  /* 2026-09-29 用户要求按钮上下各占一行（不并排），按钮宽度按文字自适应、靠左 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
}
.sht-pdp-section > p.sht-pdp-request-note {
  margin: 4px 0 10px;
  font-size: 14px;
  color: #6B7280;
}
.sht-pdp-section a.sht-pdp-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1.5px solid #1A6B35;
  border-radius: 8px;
  background: #FFFFFF;
  color: #1A6B35 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  max-width: 100%;
  box-sizing: border-box;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}
.sht-pdp-section a.sht-pdp-btn:hover,
.sht-pdp-section a.sht-pdp-btn:focus-visible {
  background: #1A6B35;
  color: #FFFFFF !important;
}
.sht-pdp-section > *:last-child {
  margin-bottom: 0;
}

/* 锚点跳转要落到标题处，不能被吸顶的header+吸顶导航挡住——
   scroll-margin-top给跳转目标留出这两层sticky元素的高度。
   2026-09-15更新：吸顶导航所在Section加了上下padding（用来让白色
   背景盖住Header和导航之间那10px空隙），实测贴住后这个Section
   从Header底部算起总共占70px（不是导航本身的50px）。
   2026-09-22更新：Header高度改成整数70px（桌面端；移动端Logo/padding
   是Astra里单独的断点设置，这次调整没影响到，实测仍是72.9px），
   桌面端70+70=140px；移动端72.9+70≈143px，跟原数值基本没变，不用动。
   同一次改动记得把吸顶导航Elementor Container的Sticky Offset也从80
   改成桌面70/移动73，两处要对得上，不然点击跳转链接，页面会滚过头，
   标题被盖住，看到的是正文 */
.sht-pdp-section {
  scroll-margin-top: 140px;
}
@media (max-width: 767px) {
  .sht-pdp-section { scroll-margin-top: 143px; }
}

@media (max-width: 767px) {
  .sht-pdp-cards { grid-template-columns: 1fr; }
}

/* Documents板块的链接文字，改成跟这个模板里其它灰色文字（卡片说明/
   FAQ答案等，都是#6B7280）同一个风格——只在这个模板的Documents
   板块生效，不动 .sht-doc-list 本身（那个是全站共用的样式，S-48/
   Ceramide IIIB这些老产品页还在用深绿加粗的原样式，不能跟着改） */
.sht-pdp-section .sht-doc-list a {
  color: #6B7280 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}
.sht-pdp-section .sht-doc-list a:hover {
  color: #2E9B55 !important;
}

/* Hero左列产品图的外框——第7节那条全站规则（给普通产品图统一
   max-width:300px + 白底，避免透明PNG漏色）在这个大尺寸Hero区里
   会显得图片很小、白色背景又生硬地贴到边缘。这里不跟那条规则
   对着改，而是把白色背景本身变成"有意设计的卡片"（圆角+内边距+
   阴影），让图片在绿色渐变背景上像浮动的卡片，同时把300px的
   限制放开到能撑满这个卡片。用法：把Elementor里 Product Images
   组件外面包一层Container，Advanced → CSS Classes 填
   sht-pdp-hero-image */
.sht-pdp-hero-image {
  background: #fff;
  border: 1px solid #e5f5ea;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 18px 40px rgba(15, 61, 34, .08);
}
.sht-pdp-hero-image .woocommerce-product-gallery__image img,
.sht-pdp-hero-image .woocommerce div.product .woocommerce-product-gallery img {
  max-width: 100% !important;
}

/* Hero区"破框"——只让Hero的背景色突破Astra主题.ast-container的
   1240px限宽（撑满整个视口宽度），Hero下面的正文内容（Overview/
   Specifications等）完全不受影响，继续保持跟其他130个产品页一样
   的居中留白。不能用Astra Customizer的Container Layout设置（那个
   是全站/全模板生效，会连带把其他产品页的正文也一起拉到贴边，
   已经验证过会出问题），改用CSS常见的"负margin撑满视口"手法，
   只加在Hero这一个Section上。用法：选中Hero最外层的Section/
   Container，Advanced → CSS Classes 填 sht-pdp-hero-bleed */
.sht-pdp-hero-bleed {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}


/* ══════════════════════════════════════
   13. CONTACT页 —— Request a Quote 表单样式（WPForms，表单ID 2579）
   2026-09-25：本来想用WPForms自带的Themes → Custom CSS面板改，
   结果那个输入框是灰的编辑不了——大概率是Pro版才解锁的功能，免费版
   看得到但不能用。改成直接写进主题自己的style.css，效果一样，还不用
   依赖WPForms这个可能被锁住的入口。只认表单ID(#wpforms-2579)，不会
   影响网站其他地方的WPForms表单（比如Contact页原来那个旧表单） */
#wpforms-2579 * {
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
#wpforms-2579 .wpforms-field-label {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0F3D22 !important;
  margin-bottom: 2px !important;
  line-height: 1.2 !important;
}
#wpforms-2579 input[type=text],
#wpforms-2579 input[type=email],
#wpforms-2579 input[type=tel],
#wpforms-2579 textarea {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  color: #111827 !important;
  border: 1px solid #d1d1d1 !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
}
#wpforms-2579 input::placeholder,
#wpforms-2579 textarea::placeholder {
  color: #6B7280 !important;
  opacity: 1 !important;
}
#wpforms-2579 input:focus,
#wpforms-2579 textarea:focus {
  border-color: #2E9B55 !important;
  outline: 2px solid #2E9B55 !important;
  outline-offset: 1px !important;
}
#wpforms-2579 .wpforms-field {
  margin-bottom: 8px !important;
  /* 2026-09-25关键修复：WPForms给每个字段外层容器默认上下各加了15px
     padding（不是margin，之前一直没查到这个，只改margin-bottom根本
     压不下去——每两个白框之间的间距＝下面字段的15px下padding + margin
     + 上面字段的15px上padding，加起来轻松超过40px，这才是间距显得很
     大的真正原因）。这里清零，全部间距只靠margin-bottom统一控制 */
  padding: 0 !important;
}
#wpforms-2579 .wpforms-field-container {
  padding: 0 !important;
}
#wpforms-2579 .wpforms-field-textarea {
  /* margin会跟上一行(Phone/Email，float布局)的margin-bottom发生CSS
     margin塌陷，取较大值而不是相加，实测加了也没用——改用padding-top，
     padding不会塌陷，是真正加上去的 */
  padding-top: 10px !important;
}
#wpforms-2579 .wpforms-submit {
  background: #1A6B35 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 22px !important;
  margin-top: 0 !important;
}
#wpforms-2579 .wpforms-submit:hover {
  background: #145128 !important;
}
#wpforms-2579 form {
  margin-bottom: 0 !important;
}
/* 提交按钮右边的隐私告知文字（由functions.php第15节的JS插入） */
#wpforms-2579 .wpforms-submit-container {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
#wpforms-2579 .sht-quote-consent {
  margin: 0 !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.4;
  color: #6B7280 !important;
}
#wpforms-2579 .sht-quote-consent a {
  color: #1A6B35 !important;
  text-decoration: underline;
}
#wpforms-2579 .sht-quote-consent a:hover {
  color: #2E9B55 !important;
}
#wpforms-2579 {
  margin-bottom: 0 !important;
}
/* 提交成功后WPForms官方显示的确认文字（Settings → Confirmations里配置
   的那段），固定包在.wpforms-confirmation-container这个class里 */
#wpforms-2579 .wpforms-confirmation-container {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #0F3D22 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
/* 产品识别区（Product Name/SKU/Category）跟下面客户信息区之间加一条
   分隔线，纯CSS实现，不用WPForms付费版的Divider字段。用:has()精确定位
   到"Name"这个字段（field_10，客户信息区第一个字段），字段ID是写死的，
   以后表单重建、字段ID变了这里要跟着改 */
#wpforms-2579 .wpforms-field:has(#wpforms-2579-field_10),
#wpforms-2579 .wpforms-field:has(#wpforms-2579-field_1) {
  border-top: 1px solid #b9dcc4 !important;
  padding-top: 12px !important;
  margin-top: 6px !important;
}
/* 让分隔线贯通：Name和Company是两个并排字段，各画各的border-top，中间
   隔着WPForms分栏自带的20px间距（Company的margin-left），线就断了。
   用Company字段的::before往左补一段20px的线把缺口接上（字段本身是
   position:relative，WPForms自带）。实测手机宽度（390px）下两列仍然并排、
   间距也还是20px，所以不分断点，全宽度通用 */
#wpforms-2579 .wpforms-field:has(#wpforms-2579-field_1)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -20px;
  width: 20px;
  border-top: 1px solid #b9dcc4;
}