/* ============================================================
   MyKeeb 多 SKU 变体选择器
   两级：Color（带图色块）→ Package（默认 Packed in Box）
   ============================================================ */

.mkpt-picker {
    margin: 0 0 26px;
    padding: 22px 22px 20px;
    background: #fff;
    border: 1px solid #E8E8EC;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.mkpt-picker-head {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #9A9AA0;
    margin: 0 0 18px;
}

/* ---- 每一层 ---- */
.mkpt-layer {
    margin-bottom: 20px;
}
.mkpt-layer:last-of-type {
    margin-bottom: 14px;
}

.mkpt-layer-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 11px;
}
.mkpt-layer-name {
    font-size: 15px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: .2px;
}
.mkpt-layer-picked {
    font-size: 13.5px;
    color: #FF6700;
    font-weight: 600;
}

/* ---- 选项容器 ---- */
.mkpt-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---- 单个选项 ---- */
.mkpt-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 14px;
    background: #FAFAFB;
    border: 1.5px solid #E4E4E9;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: #3C3C42;
    transition: border-color .18s, background .18s, color .18s, box-shadow .18s, transform .12s;
    line-height: 1.3;
}
.mkpt-opt:hover:not(.is-disabled) {
    border-color: #C9C9D2;
    background: #fff;
    transform: translateY(-1px);
}
.mkpt-opt:focus-visible {
    outline: 2px solid #FF6700;
    outline-offset: 2px;
}

/* 选中态 */
.mkpt-opt.is-active {
    border-color: #FF6700;
    background: #FFF4EC;
    color: #D95600;
    box-shadow: 0 0 0 3px rgba(255, 103, 0, .10);
}

/* 不可用（该组合无变体） */
.mkpt-opt.is-disabled {
    opacity: .38;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: #B9B9C2;
}

/* 色块缩略图 */
.mkpt-opt-thumb {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #E0E0E6;
    background-color: #F2F2F5;
}
.mkpt-opt.is-active .mkpt-opt-thumb {
    border-color: #FF6700;
}

/* 勾选标记 */
.mkpt-opt-tick {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #FF6700;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .18s, transform .18s;
}
.mkpt-opt-tick::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.mkpt-opt.is-active .mkpt-opt-tick {
    opacity: 1;
    transform: scale(1);
}

/* ---- SKU 摘要：已移除（详情页不再展示 SKU） ----
   样式保留为 display:none 兜底，防止旧缓存 HTML 闪现该行。 */
.mkpt-summary { display: none !important; }
.mkpt-summary-legacy {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #F7F7F9;
    border-radius: 8px;
    margin: 0 0 16px;
    font-size: 13.5px;
}
.mkpt-summary-label {
    font-weight: 700;
    color: #9A9AA0;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 11.5px;
}
.mkpt-summary-sku {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: .3px;
}

/* ---- CTA ---- */
.mkpt-cta {
    display: block;
    text-align: center;
    background: #FF6700;
    color: #fff !important;
    font-weight: 700;
    font-size: 15.5px;
    padding: 15px 22px;
    border-radius: 9px;
    text-decoration: none !important;
    letter-spacing: .4px;
    transition: background .2s, transform .15s;
}
.mkpt-cta:hover {
    background: #E85D00;
    transform: translateY(-1px);
}

/* ---- 主图切换动画 ---- */
.mkpt-img-swap {
    animation: mkptFade .32s ease;
}
@keyframes mkptFade {
    from { opacity: .35; }
    to   { opacity: 1; }
}

/* ---- 移动端 ---- */
@media (max-width: 760px) {
    .mkpt-picker {
        padding: 18px 16px 16px;
    }
    .mkpt-opt {
        font-size: 14px;
        padding: 9px 15px 9px 12px;
    }
    .mkpt-opt-thumb {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }
}

/* ============================================================
   纯文字层（Package 等非视觉层）
   ------------------------------------------------------------
   需求：Packed in Box 只需要文字展示，不要图片。
   后端只在「颜色层」注入 data-image / .has-image，这里再保险一层：
   没有 has-image 的选项不显示缩略图，并去掉右上角勾选角标。
   ============================================================ */
.mkpt-layer--textonly .mkpt-opt {
    padding: 10px 20px;
}
.mkpt-layer--textonly .mkpt-opt-thumb {
    display: none !important;
}
.mkpt-layer--textonly .mkpt-opt.has-image .mkpt-opt-thumb {
    display: none !important;
}
/* 纯文字层不需要勾选角标，用更克制的选中态表达 */
.mkpt-layer--textonly .mkpt-opt-tick {
    display: none !important;
}
.mkpt-layer--textonly .mkpt-opt.is-active {
    box-shadow: inset 0 0 0 1.5px #FF6700;
}
/* 选项内若只有文字，省略缩略图带来的左侧间距 */
.mkpt-opt:not(.has-image) {
    gap: 0;
}

/* ============================================================
   隐藏 WooCommerce 原生变体表单与库存提示
   ------------------------------------------------------------
   本站为「目录 / 询价」模式：产品页用 MKPT 选择器 + Request a Quote，
   原生 variations_form 只会输出「目前缺货且无法购买」等无效提示，
   与选择器重复且互相矛盾，故在此隐藏。
   注意：真实 DOM 里 variations_form 与 .stock.out-of-stock 并不总在
   .entry-summary 内（Astra 会把它留在 summary 的兄弟位置），
   因此这里不再限制父级，直接按元素本身隐藏；同时用 :has() 把
   「只装了空变体表单」的容器一并收掉，避免留下空白间距。
   ============================================================ */
.single-product form.variations_form,
.single-product .variations_form,
.single-product p.stock.out-of-stock,
.single-product .stock.out-of-stock,
.single-product .woocommerce-variation-add-to-cart,
.single-product .single_add_to_cart_button,
.single-product .woocommerce-variation-price {
    display: none !important;
}
/* 变体表单原本占位的容器：没有其它可见内容时整体隐藏 */
.single-product .woocommerce-variation-add-to-cart,
.single-product .entry-summary .quantity {
    display: none !important;
}

/* ============================================================
   Explore More From This Factory（关联产品 / 多入口导流模块）
   ------------------------------------------------------------
   让访客在同一屏同时看到其它关联产品，并可直接跳到同系列分类。
   ============================================================ */
.mk-pd-section.mk-explore {
    margin-top: 8px;
}
.mk-explore .mk-exp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.mk-explore .mk-exp-head h2 {
    margin: 0 0 6px;
}
.mk-explore .mk-exp-more {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: #FF6700 !important;
    text-decoration: none !important;
    border: 1.5px solid #FFD9BC;
    background: #FFF6EF;
    border-radius: 99px;
    padding: 9px 20px;
    white-space: nowrap;
    transition: background .2s, border-color .2s, transform .15s;
}
.mk-explore .mk-exp-more:hover {
    background: #FF6700;
    border-color: #FF6700;
    color: #fff !important;
    transform: translateY(-1px);
}

/* ---- 卡片网格 ---- */
.mk-explore .mk-exp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.mk-explore .mk-exp-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E8E8EC;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color .2s, box-shadow .2s, transform .18s;
}
.mk-explore .mk-exp-card:hover {
    border-color: #FFCDA8;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .10);
    transform: translateY(-3px);
}
.mk-explore .mk-exp-thumb {
    background: #F7F7F9;
    border-bottom: 1px solid #F0F1F3;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}
.mk-explore .mk-exp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: 0;
}
.mk-explore .mk-exp-body {
    padding: 15px 16px 14px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.mk-explore .mk-exp-cat {
    display: inline-block;
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #9A9AA0;
    background: #F5F5F7;
    border-radius: 4px;
    padding: 3px 8px;
    margin-bottom: 9px;
}
.mk-explore .mk-exp-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.38;
    color: #1D1D1F;
    margin: 0 0 8px;
}
.mk-explore .mk-exp-desc {
    font-size: 13px;
    line-height: 1.55;
    color: #6B6B72;
    margin: 0 0 14px;
}
.mk-explore .mk-exp-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #F0F1F3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mk-explore .mk-exp-sku {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    color: #9A9AA0;
    letter-spacing: .3px;
}
.mk-explore .mk-exp-arrow {
    font-size: 12.5px;
    font-weight: 700;
    color: #FF6700;
    white-space: nowrap;
}

/* ---- 同系列分类胶囊 ---- */
.mk-explore .mk-exp-siblings {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed #E4E4E9;
}
.mk-explore .mk-exp-sib-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #9A9AA0;
    margin-right: 4px;
}
.mk-explore .mk-exp-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: #3C3C42 !important;
    background: #FAFAFB;
    border: 1.5px solid #E4E4E9;
    border-radius: 99px;
    padding: 7px 15px;
    text-decoration: none !important;
    transition: border-color .18s, background .18s, color .18s, transform .12s;
}
.mk-explore .mk-exp-chip em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: #9A9AA0;
    background: #EFEFF2;
    border-radius: 99px;
    padding: 1px 7px;
}
.mk-explore .mk-exp-chip:hover {
    border-color: #FF6700;
    background: #FFF6EF;
    color: #D95600 !important;
    transform: translateY(-1px);
}
.mk-explore .mk-exp-chip:hover em {
    background: #FFE3CE;
    color: #D95600;
}

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
    .mk-explore .mk-exp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
    .mk-explore .mk-exp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .mk-explore .mk-exp-thumb { padding: 12px; }
    .mk-explore .mk-exp-name { font-size: 14px; }
    .mk-explore .mk-exp-desc { display: none; }
}
@media (max-width: 460px) {
    .mk-explore .mk-exp-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   亚马逊式商品页布局（Amazon-style PDP Layout）
   ------------------------------------------------------------
   目标结构：
     ┌───────────────┬──────────────────────────────┐
     │  产品图库      │  eyebrow / H1                │
     │  (44%)        │  SKU / Category / Availability│
     │  sticky 跟随   │  短描述 + 数据标签            │
     │               │  配置选择器                   │
     │  缩略图横排    │  信任条 + Request Quote       │
     ├───────────────┴──────────────────────────────┤
     │  规格表 / 关联产品（全宽）                     │
     └──────────────────────────────────────────────┘
   ============================================================ */

/* --- 1. 主体两栏网格 --- */
.single-product div.product.ast-article-single,
.single-product .ast-single-product-summary,
.single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    grid-template-areas: "gallery summary";
    column-gap: 44px;
    row-gap: 30px;
    align-items: start;
}

/* Astra 的图库与 summary 是同级兄弟，直接分派到两个网格区域 */
.single-product div.product > .woocommerce-product-gallery {
    grid-area: gallery;
    margin-bottom: 0 !important;
    width: 100% !important;
    float: none !important;
}

.single-product div.product > .summary.entry-summary {
    grid-area: summary;
    margin-bottom: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* 下方全宽区块（规格表 / 关联产品）跨两栏 */
.single-product div.product > .mk-pd-section,
.single-product div.product > section,
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells {
    grid-column: 1 / -1;
}

/* --- 2. 图库：圆角容器（对齐与粘性见第 13 节） --- */
.single-product .woocommerce-product-gallery__wrapper {
    border: 1px solid #EAEAEE;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.single-product .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* 缩略图：底部横向排（亚马逊风） */
.single-product .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.single-product .flex-control-thumbs li {
    width: 76px !important;
    margin: 0 !important;
    float: none !important;
}
.single-product .flex-control-thumbs li img {
    border: 2px solid #E4E4E9 !important;
    border-radius: 8px;
    transition: border-color .16s, box-shadow .16s;
    cursor: pointer;
}
.single-product .flex-control-thumbs li img:hover,
.single-product .flex-control-thumbs li img.flex-active {
    border-color: #FF6700 !important;
    box-shadow: 0 0 0 3px rgba(255, 103, 0, .14);
}
/* 隐藏 WooCommerce 原生的放大镜图标按钮，视觉更干净 */
.single-product .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* --- 3. 右栏：品牌 eyebrow + 标题 --- */
/* --- 3.1 右栏统一左对齐 ---
   亚马逊式布局中右栏内容全部左对齐；Astra 的 product summary 默认
   text-align:center，会把面包屑/标题/描述/元信息全部居中，观感不对。
   这里统一改回左对齐，但保留 eyebrow 药丸与数据标签自身的居中排版。
*/
.single-product div.product > .summary.entry-summary,
.single-product .mk-pd-hero,
.single-product .mk-pd-hero .mk-pd-title,
.single-product .mk-pd-hero .mk-pd-short,
.single-product .mk-pd-meta,
.single-product .mk-pd-meta-row,
.single-product .summary.entry-summary > .woocommerce-breadcrumb {
    text-align: left !important;
}
/* eyebrow 药丸为 inline-block，随父级左对齐贴在标题上方左侧 */

.single-product .mk-pd-hero .mk-pd-eyebrow {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #FF6700;
    background: #FFF3E8;
    border-radius: 4px;
    padding: 5px 10px;
    margin-bottom: 14px;
}
.single-product .mk-pd-hero .mk-pd-title {
    font-size: 30px !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
    color: #1B1B1F;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    /* 让标题两行长度尽量均衡，避免末行只剩 "Set —" 这类孤字 */
    text-wrap: balance;
}
.single-product .mk-pd-hero .mk-pd-short {
    font-size: 15.5px;
    line-height: 1.68;
    color: #4B4B50;
    margin: 0 0 22px;
}

/* --- 4. 右栏：SKU / 分类 / 库存 元信息 ---
   已按需求移除该模块（键帽详情页不再展示分类/库存行）。
   下面的规则保留仅为兼容旧缓存 HTML，实际元素已不再输出。 */
.single-product .mk-pd-meta { display: none !important; }
.single-product .mk-pd-meta {
    border-top: 1px solid #ECECF0;
    border-bottom: 1px solid #ECECF0;
    padding: 14px 0;
    margin: 0 0 22px;
}
.single-product .mk-pd-meta-row {
    display: flex;
    gap: 12px;
    padding: 5px 0;
    font-size: 14px;
    line-height: 1.55;
}
.single-product .mk-pd-meta-k {
    flex: 0 0 108px;
    color: #8A8A93;
    font-weight: 600;
}
.single-product .mk-pd-meta-v {
    color: #2A2A30;
    min-width: 0;
}
.single-product .mk-pd-meta-sku {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    letter-spacing: .03em;
    color: #1B1B1F;
}
.single-product .mk-pd-meta-v a {
    color: #FF6700 !important;
    text-decoration: none !important;
}
.single-product .mk-pd-meta-v a:hover {
    text-decoration: underline !important;
}
.single-product .mk-pd-sep { color: #C4C4CC; }
.single-product .mk-pd-meta-stock.is-in {
    color: #1A7F4B;
    font-weight: 600;
}
.single-product .mk-pd-meta-stock.is-in::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22A06B;
    margin-right: 7px;
    vertical-align: middle;
}

/* --- 5. 右栏：数据标签（Material / Profile …） --- */
.single-product .mk-pd-hero .mk-pd-statrow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}
.single-product .mk-pd-hero .mk-pd-statrow li {
    flex: 1 1 100px;
    min-width: 92px;
    background: #F7F7F9;
    border: 1px solid #ECECF0;
    border-radius: 9px;
    padding: 12px 10px;
    text-align: center;
    margin: 0 !important;
}
.single-product .mk-pd-hero .mk-pd-statrow li b {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1B1B1F;
    line-height: 1.3;
}
.single-product .mk-pd-hero .mk-pd-statrow li span {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8A8A93;
}

/* --- 6. 右栏：信任条 --- */
.single-product .mk-pd-hero .mk-pd-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    list-style: none !important;
    margin: 22px 0 0 !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid #ECECF0;
}
.single-product .mk-pd-hero .mk-pd-trust li {
    position: relative;
    padding-left: 22px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #4B4B50;
    margin: 0 !important;
}
.single-product .mk-pd-hero .mk-pd-trust li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #FF6700;
    font-weight: 700;
}

/* --- 7. 右栏：Request Quote 主按钮 --- */
.single-product .mk-pd-hero .mk-hero-btn {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: #FF6700;
    color: #fff !important;
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none !important;
    margin: 0 0 4px !important;
    transition: background .18s, transform .18s;
}
.single-product .mk-pd-hero .mk-hero-btn:hover {
    background: #E85C00;
    transform: translateY(-1px);
}

/* --- 8. 配置选择器间距衔接 --- */
.single-product .mkpt-picker {
    margin: 24px 0 0 !important;
}

/* --- 9. 规格表斑马纹 --- */
.single-product .mk-specs-v2 table tr:nth-child(even) {
    background: #FAFAFB;
}
.single-product .mk-specs-v2 table th {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8A8A93;
}

/* --- 10. 响应式 --- */
@media (max-width: 1024px) {
    .single-product div.product,
    .single-product div.product.ast-article-single {
        grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
        column-gap: 30px;
    }
    .single-product .mk-pd-hero .mk-pd-title { font-size: 25px !important; }
    .single-product .woocommerce-product-gallery { position: static; }
    /* 面包屑跟随 46% + 30px 的列宽变化 */
    .single-product div.product > .summary.entry-summary > .woocommerce-breadcrumb {
        left: calc(46% + 30px);
    }
}

@media (max-width: 860px) {
    /* 单列堆叠：图在上、文在下 */
    .single-product div.product,
    .single-product div.product.ast-article-single {
        grid-template-columns: 1fr;
        grid-template-areas:
            "gallery"
            "summary";
        column-gap: 0;
        row-gap: 26px;
    }
    .single-product .flex-control-thumbs li { width: 64px !important; }
    .single-product .mk-pd-hero .mk-pd-title { font-size: 23px !important; }
    .single-product .mk-pd-hero .mk-pd-trust {
        grid-template-columns: 1fr;
    }
    .single-product .mk-pd-meta-k { flex: 0 0 96px; }
}

@media (max-width: 560px) {
    .single-product .mk-pd-hero .mk-pd-title { font-size: 21px !important; }
    .single-product .mk-pd-hero .mk-pd-statrow li { flex: 1 1 84px; padding: 10px 8px; }
    .single-product .mk-pd-hero .mk-pd-statrow li b { font-size: 14.5px; }
    .single-product .mk-pd-meta-row { flex-direction: column; gap: 2px; }
    .single-product .mk-pd-meta-k { flex: none; }
}

/* ============================================================
   11. 溢出修复（平板 / 手机横向溢出）
   ------------------------------------------------------------
   问题：div.product 采用 grid 后，Astra 的宽度计算未能收缩，
   在 768px / 390px 视口下实际渲染宽度仍为 820px，导致横向滚动。
   这里强制容器与所有直接子元素 width:100% / min-width:0，
   并给 grid 项加 min-width:0 让内容可以真正收缩。
   ============================================================ */
.single-product div.product,
.single-product div.product.ast-article-single {
    max-width: 100% !important;
    box-sizing: border-box;
}
.single-product div.product > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary {
    min-width: 0 !important;
    max-width: 100% !important;
}
/* 图库内的图片绝不超出容器 */
.single-product .woocommerce-product-gallery img,
.single-product .flex-viewport {
    max-width: 100% !important;
    height: auto;
}

@media (max-width: 860px) {
    .single-product div.product,
    .single-product div.product.ast-article-single {
        display: block !important;   /* 单列用 block，彻底避免 grid 宽度计算问题 */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .single-product .woocommerce-product-gallery,
    .single-product .summary.entry-summary {
        width: 100% !important;
        float: none !important;
        margin-bottom: 26px !important;
    }
    /* 图库固定高度容器在窄屏改为自适应 */
    .single-product .woocommerce-product-gallery .flex-viewport,
    .single-product .woocommerce-product-gallery__image {
        width: 100% !important;
        height: auto !important;
    }
    .single-product .woocommerce-product-gallery__image img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain;
    }
    .single-product .flex-control-thumbs li { width: 62px !important; }
    .single-product .flex-control-thumbs li img { width: 100% !important; height: auto !important; }
}

/* 全局兜底：产品页禁止横向滚动 */
body.single-product {
    overflow-x: hidden;
}
body.single-product .site-content,
body.single-product .ast-container,
body.single-product #primary,
body.single-product #main,
body.single-product article {
    max-width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   12. 细节修正（对齐 / 按钮去重 / 断点优化）
   ============================================================ */

/* --- 12.1 面包屑 + 明确的行序（关键修正） ---
   ------------------------------------------------------------------
   实测 DOM 结构（div.product 的直接子元素，顺序即输出顺序）：
     1. div.woocommerce-product-gallery   <- 应在第 1 行左
     2. div.summary.entry-summary         <- 应在第 1 行右
     3. section.mk-pd-section  x5         <- 应在图库下方（第 2 行起）
   由于 grid 自动布局按 DOM 顺序分配行号，若不显式指定，
   下方 section 会抢占第 1 行，把图库与文字挤下去。
   因此这里显式锁定：图库与 summary 占第 1 行，其余全宽区块从第 2 行开始。
   ------------------------------------------------------------------ */
.single-product div.product > .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
}
.single-product div.product > .summary.entry-summary {
    grid-column: 2;
    grid-row: 1;
}
/* 全宽区块（规格表 / 关联产品 / 面包屑）统一从第 2 行起自动流动 */
.single-product div.product > .mk-pd-section,
.single-product div.product > section.mk-pd-section,
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > .mk-explore {
    grid-column: 1 / -1 !important;
    grid-row: auto;
}
/* 面包屑：仅为容器外的面包屑兜底（summary 内的由第 13 节接管） */
.single-product .woocommerce-breadcrumb:not(.summary .woocommerce-breadcrumb) {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 18px !important;
    padding: 0 !important;
    font-size: 13px;
    color: #8A8A93;
    line-height: 1.6;
}

/* --- 12.2 按钮去重：保留外层主 CTA，隐藏配置器内的重复按钮 ---
   配置器自带「Request a Quote for This Configuration」，
   与外层全宽「REQUEST QUOTE」功能完全重复。
   保留外层那个（更醒目、通栏、位于信任条上方），
   把配置器内的收起来，避免两个大字按钮堆在一起。
*/
.single-product .mkpt-picker .mkpt-cta {
    display: none !important;
}
/* 配置器去掉按钮后，底部内边距收紧一点 */
.single-product .mkpt-picker .mkpt-summary + .mkpt-cta {
    display: none !important;
}
/* SKU 摘要块移除后，配置器底部由 .mkpt-picker 的 padding-bottom 收尾 */
.single-product .mkpt-picker:not(:has(.mkpt-summary)) {
    padding-bottom: 22px;
}

/* --- 12.3 配置器内的语言切换按钮：右对齐，不压住色块 --- */
.single-product .mkpt-picker .mkpt-lang,
.single-product .mkpt-picker [class*="lang-switch"],
.single-product .mkpt-picker .trp-language-switcher {
    position: static !important;
    margin-left: auto;
    align-self: center;
}
/* 若语言按钮是绝对定位在配置器右上角，收敛它的位置 */
.single-product .mkpt-layer-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- 12.4 数据标签在窄栏时两列并排更省空间 --- */
@media (min-width: 861px) and (max-width: 1200px) {
    .single-product .mk-pd-hero .mk-pd-statrow li { flex: 1 1 92px; }
}

/* --- 12.5 顶部对齐交由第 13 节统一处理（此处不再声明任何 margin/padding） --- */

/* ============================================================
   13. 图文顶部严格对齐（最终版）
   ------------------------------------------------------------
   实测问题与根因：
   ① nav.woocommerce-breadcrumb 位于 div.summary 内部（是它的第一个子元素），
      在文档流里把右侧标题往下推了约 124px。
   ② gallery 上曾写 position:sticky + top:104px，但 gallery 是 grid 子项，
      sticky 退化为 relative，top:104px 变成**永久下移 104px**（并不粘住）。
      → 这是「左图比右文低 124px」的主要原因。
   ③ 第 12.5 节残留的 margin-top:0/padding-top:0 选择器含 div.product >，
      优先级高于普通 .summary.entry-summary，会把本节的顶偏量归零。

   解决：
   · 面包屑绝对定位抽离文档流（贴容器顶）。
   · 左右两栏统一加 --mk-align-top 顶偏量（用同一选择器权重，避免互相覆盖）。
   · gallery 的 sticky 改为 top:0，消除虚假位移，保留真正的粘性跟随。
   ============================================================ */
.single-product .ast-woocommerce-container,
.single-product div.product {
    position: relative;
}

/* 面包屑：脱离文档流，钉在容器顶部（对齐右栏列起点） */
.single-product div.product > .summary.entry-summary > .woocommerce-breadcrumb {
    position: absolute;
    top: 0;
    left: calc(44% + 44px);   /* = 第 1 列宽 + 列间距，与右栏文字左边缘对齐 */
    right: 0;
    width: auto;
    margin: 0 !important;
    padding: 0 0 8px !important;
    font-size: 13px;
    line-height: 1.5;
    color: #8A8A93;
    border-bottom: 0;
    z-index: 2;
}

/* 左侧图库：随页面正常滚动（不做 sticky 吸附）+ 顶偏量对齐右文
   ⚠ 特异性说明：子主题 mykeeb-astra/style.css 中有一条
     body.single-product .woocommerce div.product div.images { margin: 20px auto 0 !important; }
     特异性为 (0,3,3)，会压掉普通 .single-product div.product > .xxx 规则。
     因此这里必须同样带上 body.single-product 前缀并补足类型选择器数量（≥3），才能稳定胜出。
   ⚠ 不要改回 position: sticky —— 曾用过 sticky + top:104px，
     但图库是 grid 子项，sticky 会退化成 relative，top 变成永久位移而非吸附阈值，
     既没吸住又把图库整体压低了 104px。现明确使用 static 随页面滚动。
*/
body.single-product div.product div.images.woocommerce-product-gallery,
body.single-product .woocommerce div.product div.woocommerce-product-gallery,
.single-product div.product.ast-article-single > .woocommerce-product-gallery,
.single-product div.product > .woocommerce-product-gallery {
    position: static !important;
    top: auto !important;
    align-self: start;
    margin: 34px auto 0 !important;
    padding-top: 0 !important;
}

/* 右侧文字：留出面包屑高度，首行与左图对齐 */
body.single-product div.product .summary.entry-summary,
body.single-product.woocommerce div.product div.summary,
.single-product div.product.ast-article-single > .summary.entry-summary,
.single-product div.product > .summary.entry-summary {
    align-self: start;
    margin-top: 0 !important;
    padding-top: 34px !important;
}

@media (max-width: 860px) {
    /* 单列：面包屑回到正常文档流，取消所有顶偏量
       ⚠ 这里的选择器必须与桌面端 body.single-product 前缀规则同等或更高特异性，
       否则桌面规则会在窄屏继续生效（曾出现 sticky + 34px 泄漏到手机端）。 */
    body.single-product div.product .summary.entry-summary > .woocommerce-breadcrumb,
    .single-product div.product > .summary.entry-summary > .woocommerce-breadcrumb {
        position: static;
        width: auto;
        left: auto;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }
    /* 提高特异性：多带一个 body 类，确保稳压桌面端同权重规则 */
    body.single-product.woocommerce div.product .summary.entry-summary,
    body.single-product div.product .summary.entry-summary,
    .single-product div.product > .summary.entry-summary {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    body.single-product.woocommerce div.product div.images.woocommerce-product-gallery,
    body.single-product div.product div.images.woocommerce-product-gallery,
    body.single-product .woocommerce div.product div.woocommerce-product-gallery,
    .single-product div.product > .woocommerce-product-gallery {
        position: static !important;
        top: auto !important;
        margin: 0 auto !important;
        padding-top: 0 !important;
    }
}

/* ---------- JS 未就绪时的加载态 ----------
   picker.js 初始化完成后移除 mkpt-picker--loading，
   此前按钮呈半透明 + 进度光标，提示选项尚未就绪 */
.mkpt-picker--loading .mkpt-opt {
    opacity: 0.55;
    cursor: progress;
}
.mkpt-picker--loading .mkpt-picker-head::after {
    content: " — loading…";
    font-size: 11px;
    color: #9A9AA0;
    font-weight: 500;
}

/* --- 14. 平铺缩略图左对齐 ---
   FlexSlider 未接管图库时，Astra 兼容 CSS 使第 2+ 张图片变为
   width:25% + display:inline-block 平铺；父容器继承 Astra 的
   text-align:center，导致末排不满一排时整体居中。此处强制左对齐。 */
.single-product div.product div.images .woocommerce-product-gallery,
.single-product div.product div.images .woocommerce-product-gallery__wrapper {
    text-align: left !important;
}
body.single-product div.product div.images ol.flex-control-thumbs {
    justify-content: flex-start !important;
    text-align: left !important;
}