/* PHASE 4C-FIX-4 deployed Sun Aug 30 04:04:00 PM CST 2026 */
/* ============================================
   STEP 16: MOBILE ROOT WIDTH FIX
   Prevent white right-side area on mobile
   ============================================ */

html, body {
    overflow-x: hidden;
}

/**
 * ALIBARBAR Pack Page Styles
 * 
 * Premium design system for Pack Product pages.
 * Extends pack-builder.css with Hero, Sections, FAQ, etc.
 * 
 * Palette:
 *   Obsidian Black: #0B0B0A
 *   Champagne Gold: #C9A45C
 *   Warm Ivory:   #F5F1E8
 * 
 * @version 0.3.0
 */

/* ============================================
   SECTION 01: PRODUCT HERO
   ============================================ */

.ab-pack-hero {
    max-width: 1240px;
    margin: 0 auto 64px auto;
    padding: 0 20px;
}

.ab-pack-hero__inner {
    display: flex;
    /* flex-wrap: wrap; removed for strict double-column on desktop */
    gap: 40px;
    align-items: center;
}

/* LEFT: Product Visual */
.ab-pack-hero__visual {
    flex: 1 1 48%;
    min-width: 300px;
}

.ab-pack-hero__gallery {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    min-height: 400px;
}

.ab-pack-hero__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    background: #F5F1E8; /* warm ivory instead of black */
}

.ab-pack-hero__gallery-item--main {
    grid-row: 1 / 3;
}

.ab-pack-hero__gallery-item--sub-0,
.ab-pack-hero__gallery-item--sub-1,
.ab-pack-hero__gallery-item--sub-2,
.ab-pack-hero__gallery-item--sub-3 {
    /* smaller images */
}

.ab-pack-hero__visual-caption {
    margin-top: 12px;
    font-size: 13px;
    color: rgba(245, 241, 232, 0.6);
    text-align: center;
    letter-spacing: 0.5px;
}

/* RIGHT: Product Info */
.ab-pack-hero__info {
    flex: 1 1 52%;
    min-width: 300px;
}

.ab-pack-hero__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #C9A45C;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.ab-pack-hero__title {
    font-size: 42px;
    font-weight: 700;
    color: #F5F1E8;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.ab-pack-hero__lead {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(245, 241, 232, 0.75);
    margin: 0 0 24px 0;
    max-width: 480px;
}

/* Trust Facts */
.ab-pack-hero__trust-facts {
    display: flex;
    gap: 24px;
    margin-bottom: 44px;
    flex-wrap: wrap;
}

.ab-pack-hero__fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ab-pack-hero__fact-number {
    font-size: 20px;
    font-weight: 700;
    color: #F5F1E8;
}

.ab-pack-hero__fact-label {
    font-size: 12px;
    color: rgba(245, 241, 232, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Pack Size Navigation */
.ab-pack-hero__pack-nav {
    margin-top: 32px;
}

.ab-pack-hero__pack-nav-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(245, 241, 232, 0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 12px 0;
}

.ab-pack-hero__pack-nav-items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ab-pack-hero__pack-nav-item {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid rgba(11, 11, 10, 0.2);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #F5F1E8;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ab-pack-hero__pack-nav-item:hover {
    border-color: #C9A45C;
    color: #C9A45C;
}

.ab-pack-hero__pack-nav-item--active {
    background: #0B0B0A;
    border-color: #F5F1E8;
    color: #F5F1E8;
    cursor: default;
}

.ab-pack-hero__pack-nav-item--active:hover {
    background: #0B0B0A;
    border-color: #F5F1E8;
    color: #F5F1E8;
}

/* ============================================
   BUILDER OVERRIDES (Section 02)
   ============================================ */

/* Move builder after hero (natural flow) */
.ab-pack-builder {
    max-width: 1240px;
    margin: 0 auto 64px auto;
    padding: 32px;
}

/* Dynamic prompt */
.ab-pack-builder__prompt {
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #C9A45C;
    margin-top: 8px;
    letter-spacing: 0.5px;
}

/* Selected tile state */
.ab-pack-flavour.ab-pack-flavour--selected {
    outline: 2px solid #C9A45C;
    outline-offset: -2px;
}

.ab-pack-flavour__qty {
    background: #C9A45C;
    color: #F5F1E8;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    border-radius: 2px;
}

/* ============================================
   SECTIONS 03-06: COMMON
   ============================================ */

.ab-pack-sections {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.ab-pack-section {
    padding: 64px 0;
    border-top: 1px solid rgba(11, 11, 10, 0.1);
}

.ab-pack-section__inner {
    max-width: 900px;
    margin: 0 auto;
}

.ab-pack-section__heading {
    font-size: 32px;
    font-weight: 700;
    color: #F5F1E8;
    text-align: center;
    margin: 0 0 32px 0;
}

/* ============================================
   SECTION 03: WHY BUILD YOUR OWN PACK
   ============================================ */

.ab-pack-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.ab-pack-benefit {
    text-align: center;
}

.b-pack-benefit__title {
    font-size: 18px;
    font-weight: 600;
    color: #F5F1E8;
    margin: 0 0 8px 0;
}

.ab-pack-benefit__text {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(11, 11, 10, 0.7);
    margin: 0;
}

/* ============================================
   SECTION 04: INGOT 9000 AT A GLANCE
   ============================================ */

.ab-pack-section--facts {
    background: #F5F1E8;
    margin: 0 -20px;
    padding: 64px 20px;
}

.ab-pack-facts {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    text-align: center;
}

.ab-pack-fact__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgba(11, 11, 10, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.ab-pack-fact__value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #0B0B0A;
}

/* ============================================
   SECTION 05: HOW IT WORKS
   ============================================ */

.ab-pack-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    text-align: center;
}

.ab-pack-step__number {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: #C9A45C;
    margin-bottom: 12px;
    line-height: 1;
}

.ab-pack-step__title {
    font-size: 18px;
    font-weight: 600;
    color: #F5F1E8;
    margin: 0 0 8px 0;
}

.ab-pack-step__text {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(11, 11, 10, 0.7);
    margin: 0;
}

/* ============================================
   SECTION 06: FAQ
   ============================================ */

.ab-pack-faq {
    max-width: 700px;
    margin: 0 auto;
}

.ab-pack-faq__item {
    border-bottom: 1px solid rgba(11, 11, 10, 0.1);
    padding: 16px 0;
}

.ab-pack-faq__item:first-child {
    border-top: 1px solid rgba(11, 11, 10, 0.1);
}

.ab-pack-faq__question {
    font-size: 16px;
    font-weight: 600;
    color: #F5F1E8;
    cursor: pointer;
    padding: 4px 0;
    list-style: none;
}

.ab-pack-faq__question::-webkit-details-marker {
    display: none;
}

.ab-pack-faq__question::before {
    content: "+";
    display: inline-block;
    width: 20px;
    font-weight: 700;
    color: #C9A45C;
}

.ab-pack-faq__item[open] .ab-pack-faq__question::before {
    content: "−";
}

.ab-pack-faq__answer {
    padding: 8px 0 8px 20px;
}

.ab-pack-faq__answer p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(245, 241, 232, 0.7);
    margin: 0;
}

/* ============================================
   RESPONSIVE: DESKTOP (1440 and below)
   ============================================ */

@media (max-width: 1440px) {
    .ab-pack-hero__title {
        font-size: 38px;
    }
}

/* ============================================
   RESPONSIVE: TABLET (1024 and below)
   ============================================ */

@media (max-width: 1024px) {
    .ab-pack-hero__inner {
        gap: 32px;
    }
    
    .ab-pack-benefits,
    .ab-pack-steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .ab-pack-facts {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   RESPONSIVE: MOBILE (430 and below)
   ============================================ */

@media (max-width: 430px) {
    .ab-pack-hero {
        padding: 0 16px;
        margin-bottom: 44px;
    }
    
    .ab-pack-hero__inner {
        flex-direction: column;
        gap: 24px;
    }
    
    .ab-pack-hero__visual,
    .ab-pack-hero__info {
        flex: 1 1 100%;
        min-width: 0;
    }
    
    .ab-pack-hero__title {
        font-size: 30px;
    }
    
    .ab-pack-hero__gallery {
        min-height: 280px;
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    
    .ab-pack-trust-facts {
        gap: 16px;
    }
    
    .ab-pack-hero__pack-nav-items {
        gap: 6px;
    }
    
    .ab-pack-hero__pack-nav-item {
        padding: 8px 14px;
        font-size: 13px;
    }
    
    /* Sections */
    .ab-pack-section {
        padding: 44px 0;
    }
    
    .ab-pack-section__heading {
        font-size: 26px;
    }
    
    .ab-pack-facts {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Builder: 2 columns (enforced by pack-builder.css) */
    .ab-pack-builder {
        padding: 20px 16px;
    }
}

/* ============================================
   RESPONSIVE: MOBILE 360
   ============================================ */

@media (max-width: 360px) {
    .ab-pack-hero__title {
        font-size: 26px;
    }
    
    .ab-pack-hero__gallery {
        min-height: 220px;
    }
    
    .ab-pack-section__heading {
        font-size: 22px;
    }
}

/* ============================================
   PHASE 4A-FIX-1: REMOVE DEFAULT WC LAYOUT
   ============================================ */

/* STEP 2: Hide default WC product gallery completely (no layout space) */
body.single-product .woocommerce-product-gallery {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
}

/* STEP 3+6: Make .summary.entry-summary full width for Pack Products */
body.ab-pack-product .summary.entry-summary {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* STEP 4: Hide default WC product tabs / reviews */
body.single-product .woocommerce-tabs {
    display: none !important;
}

/* STEP 5: Hide related products (if any) */
body.single-product .related.products {
    display: none !important;
}

/* Ensure custom Pack Hero is full width inside summary */
body.ab-pack-product .summary.entry-summary .ab-pack-hero {
    max-width: 1240px;
    margin: 0 auto 64px auto;
    padding: 0 20px;
}

/* Ensure custom Pack Builder is full width */
body.ab-pack-product .summary.entry-summary .ab-pack-builder {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Ensure custom Pack Sections are full width */
body.ab-pack-product .summary.entry-summary .ab-pack-sections {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* PHASE 4A-FIX-1B: Remove residual Astra WC elements */
/* Only for Pack Products (body.single-product with Pack product class) */

/* Hide Astra's single-product-category (Uncategorized label) */
body.ab-pack-product .single-product-category {
    display: none !important;
}

/* Hide duplicate product title (Astra outputs its own H1) */
body.ab-pack-product .summary.entry-summary > .product_title.entry-title {
    display: none !important;
}

/* Hide default excerpt/output from Astra */
body.ab-pack-product .summary.entry-summary > .woocommerce-product-details__short-description {
    display: none !important;
}

/* Hide product meta (SKU/Category) */
body.ab-pack-product .summary.entry-summary > .product_meta {
    display: none !important;
}

/* Hide empty price block if present */
body.ab-pack-product .summary.entry-summary > .price:empty {
    display: none !important;
}


/* ——— STEP 5 FIX: Dark bg contrast ——— */
/* .ab-pack-section inherits dark bg from #page.ab-brand */
.ab-pack-section__heading,
.ab-pack-benefit__title,
.ab-pack-step__title {
    color: #F5F1E8 !important;
}

.ab-pack-benefit__text,
.ab-pack-step__text {
    color: rgba(245, 241, 232, 0.72) !important;
}

/* ——— STEP 5 FIX 2: Facts section is LIGHT bg (#F5F1E8) ——— */
/* Global heading fix made it #F5F1E8 (invisible on light). Override here. */
.ab-pack-section--facts .ab-pack-section__heading {
    color: #0B0B0A !important;
}

.ab-pack-section--facts .ab-pack-section__inner {
    color: #0B0B0A;
}

/* ============================================
   RESPONSIVE: TABLET (768px and below)
   ============================================ */
@media (max-width: 768px) {
    .ab-pack-hero__inner {
        flex-direction: column;
    }
    
    .ab-pack-hero__visual {
        width: 100%;
    }
    
    .ab-pack-section__heading {
        font-size: 28px;
    }
    
    .ab-pack-facts {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    
    .ab-pack-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   PACK FAQ VISUAL HIERARCHY
   ============================================ */
.ab-pack-faq {
    max-width: 740px;
}

.ab-pack-faq__question {
    position: relative;
    padding-right: 36px;
    font-size: 17px;
}

.ab-pack-faq__question::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #C9A45C;
    font-size: 26px;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.ab-pack-faq__question[open]::after {
    content: '−';
}

.ab-pack-faq__answer {
    padding: 12px 0 4px 0;
}
/* ===== PHASE 4C-FIX-4: New Gallery (ab-pack-gallery) ===== */
.ab-pack-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.ab-pack-gallery-main {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    background: #11110f;
    border-radius: 8px;
    overflow: hidden;
}

.ab-pack-gallery-main-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
}

.ab-pack-gallery-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
}

.ab-pack-gallery-nav-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #333;
    background: transparent;
    color: #999;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.ab-pack-gallery-nav-btn:hover {
    border-color: #C9A45C;
    color: #C9A45C;
}

.ab-pack-gallery-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.ab-pack-gallery-thumbs-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.ab-pack-gallery-thumbs {
    display: flex;
    gap: 8px;
    transition: transform 0.3s ease;
}

.ab-pack-gallery-thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #11110f;
    padding: 0;
    transition: border-color 0.2s;
}

.ab-pack-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ab-pack-gallery-thumb--active {
    border-color: #C9A45C !important;
}

.ab-pack-gallery-thumb:hover {
    border-color: #666;
}

/* Desktop Hero grid */
@media (min-width: 768px) {
    .ab-pack-hero__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr) !important;
        gap: 48px 64px !important;
        align-items: start !important;
    }
    
    .ab-pack-gallery {
        max-width: 620px;
    }
    
    .ab-pack-gallery-thumb {
        width: 84px;
        height: 84px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .ab-pack-gallery-main {
        max-width: 100%;
    }
    
    .ab-pack-gallery-thumb {
        width: 58px;
        height: 58px;
    }
    
    .ab-pack-gallery-nav {
        gap: 6px;
    }
    
    .ab-pack-gallery-nav-btn {
        width: 28px;
        height: 28px;
    }
}

/* ===== PHASE 4C-FIX-5: 修复价格/按钮排版 + 数量框边框 (2026-08-30) ===== */

/* ============================================
   1. .summary.entry-summary 区域整体布局
   ============================================ */
body.ab-pack-product .summary.entry-summary {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ============================================
   2. 价格排版
   ============================================ */
body.ab-pack-product .summary.entry-summary > .price {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #d32f2f !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.2;
}

body.ab-pack-product .summary.entry-summary > .price .woocommerce-Price-amount {
    color: inherit !important;
}

/* ============================================
   3. Add to Cart 表单区域
   ============================================ */
body.ab-pack-product .summary.entry-summary > form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
}

/* ============================================
   4. 数量框修复（WooCommerce 默认 number input）
   ============================================ */
body.ab-pack-product .summary.entry-summary .quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    overflow: visible !important;
    height: 42px !important;
    background: #fff !important;
}

body.ab-pack-product .summary.entry-summary .quantity input[type="number"] {
    width: 64px !important;
    height: 42px !important;
    border: none !important;
    border-left: 1px solid #ccc !important;
    border-right: 1px solid #ccc !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
    background: #fff !important;
    color: #333 !important;
}

body.ab-pack-product .summary.entry-summary .quantity input[type="number"]::-webkit-outer-spin-button,
body.ab-pack-product .summary.entry-summary .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* 隐藏 label (screen-reader-text) */
body.ab-pack-product .summary.entry-summary .quantity label.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================
   5. Add to Cart 按钮样式
   ============================================ */
body.ab-pack-product .summary.entry-summary .single_add_to_cart_button,
body.ab-pack-product .summary.entry-summary button[name="add-to-cart"]:not(.ab-pack-builder__submit) {
    background: #d32f2f !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 36px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

body.ab-pack-product .summary.entry-summary .single_add_to_cart_button:hover,
body.ab-pack-product .summary.entry-summary button[name="add-to-cart"]:not(.ab-pack-builder__submit):hover {
    background: #b71c1c !important;
}

body.ab-pack-product .summary.entry-summary .single_add_to_cart_button:focus,
body.ab-pack-product .summary.entry-summary button[name="add-to-cart"]:not(.ab-pack-builder__submit):focus {
    outline: 2px solid #d32f2f !important;
    outline-offset: 2px !important;
}

/* ============================================
   6. 响应式：移动端
   ============================================ */
@media (max-width: 767px) {
    body.ab-pack-product .summary.entry-summary {
        padding: 24px 16px !important;
        gap: 16px;
    }
    
    body.ab-pack-product .summary.entry-summary > .price {
        font-size: 24px !important;
    }
    
    body.ab-pack-product .summary.entry-summary > form.cart {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    body.ab-pack-product .summary.entry-summary .quantity {
        align-self: flex-start !important;
    }
    
    body.ab-pack-product .summary.entry-summary .single_add_to_cart_button,
    body.ab-pack-product .summary.entry-summary button[name="add-to-cart"]:not(.ab-pack-builder__submit) {
        width: 100% !important;
    }
}

/* EOF: PHASE 4C-FIX-5 */

/* ===== PHASE 4C-FIX-6: 移动购买区到 pack-nav 下方 + 手机端优化 (2026-08-30) ===== */

/* ============================================
   1. 隐藏 summary 中原始的 price 和 form.cart
   ============================================ */
body.ab-pack-product .summary.entry-summary > .price,
body.ab-pack-product .summary.entry-summary > form.cart:not(.ab-pack-builder__form) {
    display: none !important;
}

/* ============================================
   2. 新购买区样式（在 hero pack-nav 下方）
   ============================================ */
.ab-pack-hero__purchase {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}

.ab-pack-hero__price {
    font-size: 28px;
    font-weight: 700;
    color: #d32f2f;
    margin-bottom: 16px;
}

.ab-pack-hero__price .woocommerce-Price-amount {
    color: inherit;
}

.ab-pack-hero__cart form.cart {
    display: flex !important;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0;
}

/* ============================================
   3. 数量框边框修复（完整显示）
   ============================================ */
.ab-pack-hero__cart .quantity {
    display: inline-flex !important;
    align-items: center;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    overflow: visible !important;  /* 修复：改为 visible */
    height: 42px;
    background: #fff;
}

.ab-pack-hero__cart .quantity input[type="number"] {
    width: 64px !important;
    height: 42px !important;
    border: none !important;
    border-left: 1px solid #ccc !important;
    border-right: 1px solid #ccc !important;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding: 0;
    -moz-appearance: textfield;
    background: #fff;
    color: #333;
}

.ab-pack-hero__cart .quantity input[type="number"]::-webkit-outer-spin-button,
.ab-pack-hero__cart .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================
   4. Add to Cart 按钮（新位置）
   ============================================ */
.ab-pack-hero__cart .single_add_to_cart_button,
.ab-pack-hero__cart button[name="add-to-cart"] {
    background: #d32f2f !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 36px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    cursor: pointer;
    height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.ab-pack-hero__cart .single_add_to_cart_button:hover,
.ab-pack-hero__cart button[name="add-to-cart"]:hover {
    background: #b71c1c !important;
}

/* ============================================
   5. 响应式：手机端
   ============================================ */
@media (max-width: 767px) {
    .ab-pack-hero__purchase {
        margin-top: 20px;
        padding-top: 20px;
    }
    
    .ab-pack-hero__price {
        font-size: 24px;
        margin-bottom: 12px;
    }
    
    /* 手机端：数量框 + 按钮 同一行 */
    .ab-pack-hero__cart form.cart {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;  /* 关键：不换行 */
    }
    
    .ab-pack-hero__cart .quantity {
        flex-shrink: 0;  /* 不让数量框缩小 */
    }
    
    .ab-pack-hero__cart .single_add_to_cart_button,
    .ab-pack-hero__cart button[name="add-to-cart"] {
        flex: 1;  /* 让按钮占剩余空间 */
        min-width: 120px;
    }
}

/* EOF: PHASE 4C-FIX-6 */

/* =========================================================
   Pack Hero → Builder CTA
   ========================================================= */

.ab-pack-product .ab-pack-hero__builder-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 15px 24px;
    border: 1px solid #C9A45C;
    border-radius: 4px;
    background: #C9A45C;
    color: #0B0B0A;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.ab-pack-product .ab-pack-hero__builder-cta:hover,
.ab-pack-product .ab-pack-hero__builder-cta:focus {
    background: #0B0B0A;
    border-color: #C9A45C;
    color: #C9A45C;
    text-decoration: none;
    transform: translateY(-1px);
}

.ab-pack-product .ab-pack-hero__builder-cta span {
    font-size: 18px;
    line-height: 1;
}

.ab-pack-product #ab-pack-builder {
    scroll-margin-top: 110px;
}

html {
    scroll-behavior: smooth;
}

@media (max-width: 767px) {
    .ab-pack-product .ab-pack-hero__builder-cta {
        min-height: 52px;
        padding: 14px 18px;
        font-size: 13px;
    }

    .ab-pack-product #ab-pack-builder {
        scroll-margin-top: 90px;
    }
}


/* ===== PACK BUILDER ADD TO CART ===== */

body.ab-pack-product .ab-pack-builder__cart-action {
    width: 100%;
    margin: 14px 0 18px;
}

body.ab-pack-product .ab-pack-builder__submit {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 52px;
    padding: 14px 20px !important;
    margin: 0 !important;
    border: 1px solid #C9A45C !important;
    border-radius: 4px;
    background: #C9A45C !important;
    color: #0B0B0A !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-align: center;
    cursor: pointer;
    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        opacity .2s ease;
}

body.ab-pack-product .ab-pack-builder__submit:not(:disabled):hover {
    background: #0B0B0A !important;
    color: #C9A45C !important;
    border-color: #C9A45C !important;
}

body.ab-pack-product .ab-pack-builder__submit:disabled,
body.ab-pack-product .ab-pack-builder__submit.disabled {
    background: #2A271F !important;
    border-color: #51462F !important;
    color: #8F7A4E !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    body.ab-pack-product .ab-pack-builder__cart-action {
        margin: 12px 0 16px;
    }

    body.ab-pack-product .ab-pack-builder__submit {
        min-height: 50px;
        font-size: 13px;
    }
}

/* ===== PACK BUILDER BUTTON STATE ===== */

/* 未选满：暗色禁用 */
body.ab-pack-product .ab-pack-builder__submit:disabled,
body.ab-pack-product .ab-pack-builder__submit.disabled {
    background: #211F1A !important;
    border-color: #4A4334 !important;
    color: #8E846E !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* 选满后：红色购买按钮 */
body.ab-pack-product .ab-pack-builder__submit:not(:disabled):not(.disabled) {
    background: #DF2F2F !important;
    border-color: #DF2F2F !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
}

body.ab-pack-product .ab-pack-builder__submit:not(:disabled):not(.disabled):hover {
    background: #C92525 !important;
    border-color: #C92525 !important;
    color: #FFFFFF !important;
}

/* ===== PACK BUILDER FINAL VISUAL STATE ===== */

/* 默认 / 未选满 */
body.ab-pack-product .ab-pack-builder:not(.is-complete) .ab-pack-builder__submit {
    background: #211F1A !important;
    border-color: #4A4334 !important;
    color: #8E846E !important;
    cursor: not-allowed !important;
}

/* 选满后 */
body.ab-pack-product .ab-pack-builder.is-complete .ab-pack-builder__submit {
    background: #DF2F2F !important;
    border-color: #DF2F2F !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
}

body.ab-pack-product .ab-pack-builder.is-complete .ab-pack-builder__submit:hover {
    background: #C92525 !important;
    border-color: #C92525 !important;
    color: #FFFFFF !important;
}

/* ===== PACK BUILDER ARIA STATE OVERRIDE ===== */

body.ab-pack-product .ab-pack-builder__submit[aria-disabled="true"] {
    background: #211F1A !important;
    border-color: #4A4334 !important;
    color: #8E846E !important;
    cursor: not-allowed !important;
}

body.ab-pack-product .ab-pack-builder__submit[aria-disabled="false"] {
    background: #DF2F2F !important;
    border-color: #DF2F2F !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
}