/**
 * CEREAL PDP Zara 化收斂層（2026-07-05 Jose 指示）
 *
 * 只在商品內頁（is_product）載入，列表頁不受影響。
 * 這一輪只做 mobile／窄版（≤991px，跟 jose956Settings.breakpoint 一致），
 * 桌機版維持現狀。
 *
 * Phase A（CSS-only）：
 *   A1. PDP 拿掉分類導覽列（BACK IN STOCK / NEW / BEST SELLER / SALE）
 *   A2. 拿掉數量選擇器 — Zara 無 qty，固定一次一件
 *       （隱藏後 form 內 input[name=quantity] 仍在、值=1，ajax 路徑不變）
 *   Header：Jose 裁示 CEREAL logo 保留，Phase A 不動 header。
 *
 * 載入順序：晚於 jose956-layout.css（enqueue 依賴），
 * layout 層對 .quantity 有 !important 樣式，這裡同樣用 !important 壓過。
 */

@media (max-width: 991px) {

    /* === A1. PDP 不出現分類導覽列（列表頁保留，只鎖 single-product） === */
    .single-product .jose956-custom-menu-wrap {
        display: none !important;
    }

    /* === A2. 數量選擇器：頁內 summary（含 layout.js 搬移前後兩種狀態） === */
    .single-product form.cart .quantity,
    .single-product .mobile-moved-summary .quantity,
    .single-product .mobile-moved-summary .woocommerce-variation-add-to-cart .quantity {
        display: none !important;
    }

    /* === A2b. 底部 bar 彈出面板（#jose956-panel）內的數量控制 === */
    .single-product .jose956-panel-content .panel-quantity {
        display: none !important;
    }

    /* === A3. 圖片真滿版（7/5 Jose 對照 Zara 抓出）===
       原況：.row 的 -15 margin 沒被 col padding 抵銷（col padding 被清成 0）、
       gallery 又自帶 -15 margin → 圖片「過版」左右各 30px 被裁切，構圖跟 Zara 不同。
       修法：col 補回 bootstrap 標準 15px padding、gallery margin 歸零 → 剛好 edge-to-edge。 */
    .single-product .product-image-summary .product-images {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .single-product .product-images .woocommerce-product-gallery {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* === A4. 底部 bar 遮內容＋按鈕被 viewport 切掉（7/5 Jose + Hermes 報告抓出）===
       原況：typography v1.3 給 bar 加 padding:10px（Zara 白底黑框內縮），
       但 bar 固定高 44px（border-box）裝不下 10px 頂距＋44px 按鈕 → 按鈕底緣溢出 10px 被切。
       修法：高度改 auto 由內容撐開（10+44+10+safe-area=64+），
       內距交給 cereal-typography.css 的 padding:10px 10px calc(10px+safe-area) 一條管；
       body 淨空 = 64 bar + 16 呼吸 + safe-area。 */
    body.single-product {
        /* bar 10+32+10=52 ＋ 16 呼吸 ＋ safe-area（B4 按鈕改 32 後同步下修） */
        padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    }
    body.single-product.cereal-zara-purchase-ready:not(.cereal-bar-compact) {
        /* expanded purchase panel：summary 內容 + CTA + 16px 呼吸 */
        padding-bottom: calc(184px + env(safe-area-inset-bottom)) !important;
    }
    body.single-product.cereal-zara-purchase-ready.cereal-bar-compact {
        padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    }
    #jose956-bottom-bar {
        height: auto !important;
    }
    body.single-product #jose956-bottom-bar {
        padding-left: 20px !important;  /* Zara ADD 20..370（雙格線的內容線） */
        padding-right: 20px !important;
    }

    /* === A5. 圖片貼齊 header 底緣（7/5 Hermes 報告抓出）===
       A1 把 menu wrap display:none 後，jose956-menu.js adjustContentPadding()
       量到 rect 全 0 → padding 只剩 40px 剛好抵銷 basel -40 margin，
       內容從 y=0 開始被 55px fixed header 疊住（圖片頂被蓋）。
       JS 端已補 fallback（menu 隱藏改量 header 底緣）；這條是載入瞬間的
       靜態值防閃跳：95 = header 55 + basel -40 補償。雙 class 拉高 specificity
       壓過 jose956-menu.css 同選擇器的 137px（該值含已隱藏的 menu 高度）。 */
    body.single-product.single-product:not(.woocommerce-demo-store) .main-page-wrapper {
        padding-top: 95px !important;
    }

    /* ============================================================
       Phase B（2026-07-05 Jose「去做」）— 搭配 cereal-pdp-zara.js
       ============================================================ */

    /* === B1. tabs Zara 化：描述 | 詳細資訊 | MEASUREMENTS ===
       Zara 節奏：13px、active 500 深色、inactive 400 灰、無框線無底線 */
    .mobile-moved-summary .jose956-p3-tabs-nav {
        display: flex !important;
        gap: 24px;
        list-style: none;
        margin: 12px 0 4px !important;
        padding: 0 !important;
        border: 0 !important;
    }
    .mobile-moved-summary .jose956-p3-tabs-nav li {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        float: none !important;
        flex: 0 0 auto;
    }
    .mobile-moved-summary .jose956-p3-tabs-nav a {
        display: block;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #767676 !important;
        letter-spacing: 0.4px;
        padding: 6px 0 !important;
        border: 0 !important;
        background: none !important;
        text-decoration: none !important;
    }
    .mobile-moved-summary .jose956-p3-tabs-nav li.active a {
        font-weight: 500 !important;
        color: #242424 !important;
    }
    .mobile-moved-summary .jose956-p3-tab-panel {
        border: 0 !important;
        padding: 8px 0 0 !important;
    }

    /* === B2. 色塊掛標題列右側（Jose 裁示照 zara_E 參考圖）===
       7/5 Jose 抓出「重整後色塊先在價格下面閃再跳到標題右邊」——原因是
       定位規則等 JS 加 class 才生效。改成純伺服端選擇器（[data-id] 屬性
       ＋ :has()）首繪即定位；.cereal-color-row 系列留作舊瀏覽器 fallback。 */
    .single-product .basel-scroll-content {
        position: relative; /* 無條件，無副作用 */
    }
    .single-product .basel-scroll-content:has(.swatches-select[data-id="pa_color"]) h1.product_title,
    body.cereal-has-color-row .mobile-moved-summary h1.product_title {
        padding-right: 120px !important; /* 留給右側色塊，長標題折行不重疊 */
    }
    /* td.value 自帶 position:relative 會搶走 absolute 錨點——還原 static
       讓色塊錨到 basel-scroll-content */
    .single-product table.variations td.value:has(.swatches-select[data-id="pa_color"]),
    .mobile-moved-summary .cereal-color-row td.value.with-swatches {
        position: static !important;
    }
    .single-product table.variations .swatches-select[data-id="pa_color"] {
        position: absolute;
        top: -3px;               /* 24px 色塊對 18px 標題行置中 */
        right: 20px;             /* 錨點=scroll-content padding box（0..390），內縮 20＝內容格線右緣 370 */
        margin: 0 !important;
        z-index: 5;
    }
    /* Zara 三層 swatch（round2 audit C）：24px button（selected 1px 黑框）
       ＋3px 內距＋16px 色面（1px #757575 內框）；間距 4px、0 radius */
    .single-product table.variations .swatches-select[data-id="pa_color"] .basel-swatch {
        box-sizing: border-box !important;
        width: 24px !important;
        height: 24px !important;
        padding: 3px !important;
        margin: 0 0 0 4px !important;
        border: 1px solid transparent !important;
        border-radius: 0 !important;
        background-clip: content-box !important;
        box-shadow: none !important;   /* 壓掉主題 active 的白2px+灰3px 光環 */
        outline: none !important;
        position: relative;
        overflow: hidden !important;   /* swatch 內含色名文字節點，24px 盒會漏出殘影 */
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
    }
    /* 主題 .colored-swatch:after 自帶 22x24/left:0/border-bottom 2px 底線指示，
       幾何全部明確覆寫成 16px 內框，否則會在 24px 盒外漏出殘影 */
    .single-product table.variations .swatches-select[data-id="pa_color"] .basel-swatch::after {
        content: '' !important;
        position: absolute !important;
        top: 3px !important;
        left: 3px !important;
        width: 16px !important;
        height: 16px !important;
        box-sizing: border-box !important;
        border: 1px solid #757575 !important;
        background: none !important;
        margin: 0 !important;
        pointer-events: none;
    }
    /* 選中態＝1px 黑外框（Zara）；selector 帶同一個 [data-id] 讓 specificity
       ≥ 上面的 base 規則，否則 border shorthand !important 會蓋掉這裡 */
    .single-product table.variations .swatches-select[data-id="pa_color"] .basel-swatch.active-swatch,
    .single-product table.variations .swatches-select[data-id="pa_color"] .basel-swatch.active,
    .single-product table.variations .swatches-select[data-id="pa_color"] .basel-swatch.selected {
        border-color: #000 !important;
        box-shadow: none !important;
        outline: none !important;
    }
    .single-product table.variations tr:has(.swatches-select[data-id="pa_color"]) td.label,
    .mobile-moved-summary .cereal-color-row td.label,
    .single-product .jose956-color-label {
        display: none !important;
    }

    /* === A6. 空白壓縮（7/5 Jose：對比 Zara 排版空太多）===
       原況 price→現貨商品之間 70px 死空間：table mt20＋空表格 15＋
       variation wrap pt20。COLOR/SIZE 列都已隱藏或 absolute，表格歸零。 */
    .single-product .mobile-moved-summary form.cart table.variations {
        margin: 0 !important;
        border-spacing: 0 !important;
    }
    /* color 列的 td 內距是空表格殘餘的 15px 高度來源（色塊是 absolute 不佔位） */
    .single-product table.variations tr:has(.swatches-select[data-id="pa_color"]) td {
        padding: 0 !important;
        line-height: 0 !important;
    }
    .single-product .mobile-moved-summary .single_variation_wrap {
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* 呼吸間距掛在會「出現」的元素自己身上，沒選規格時不留空 */
    .single-product .mobile-moved-summary .stock {
        margin: 12px 0 !important;
    }
    .single-product .mobile-moved-summary p.stock.available-on-backorder {
        margin: -14px 0 28px !important;
        line-height: 1.65 !important;
        color: #242424 !important;
        font-weight: 400 !important;
        white-space: pre-line;
    }
    .single-product .mobile-moved-summary p.stock.available-on-backorder::first-line {
        font-weight: 500 !important;
    }
    /* 圖片下緣到標題的呼吸（Zara ~14px；原況 0 貼死） */
    .single-product .mobile-moved-summary h1.product_title {
        margin-top: 14px !important;
    }

    /* === A7. Zara 對齊格線（7/5 Jose：圖片要留白＋名稱/售價/現貨靠左、
       色塊靠右，全部對齊加入購物車按鈕的 10px 格線）===
       原況：圖片滿版 0..390、內容左緣 45（summary margin15+padding15+
       scroll-content padding15 三層疊加）、色塊右緣 345。
       目標：圖片 10..380、內容左 10、色塊右 380＝bar 按鈕格線。 */
    /* 圖片兩側留白（Zara 式）——只縮圖片層（__wrapper）；
       jose956-summary-container 是 layout.js 插在 gallery 元素內部的，
       margin 掛整個 gallery 會把內容一起推歪 */
    .single-product .product-images .woocommerce-product-gallery {
        margin: 0 !important;
    }
    /* __wrapper 是 0 寬空殼、figure 的 width 被多方搶——改用 figure 內距，
       img 的 100%/max-width 以 content box（370）計算，不用跟 width 規則打架 */
    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
        margin: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }
    #jose956-summary-container {
        margin: 0 !important;
        padding: 0 !important;
    }
    .single-product .mobile-moved-summary {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .single-product .mobile-moved-summary .summary-inner {
        padding: 0 !important;
        margin: 0 !important;
    }
    /* 內容 gutter（也是色塊 absolute 的錨點）。Zara 雙格線：圖片 10、
       內容/按鈕 20（7/5 Jose：10 太貼） */
    .single-product .mobile-moved-summary .basel-scroll-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* === A8. Zara-like mobile purchase source（2026-07-07）===
       sticky purchase panel 啟用後，商品名/價格/顏色/stock/色塊由 fixed panel
       視覺承擔；頁內 WooCommerce form/variation DOM 保留給 JS 同步與原加購路徑，
       只移除可視重複，避免 scrollY=0 同一 viewport 出現兩份商品購買資訊。 */
    html.cereal-zara-prehide body.single-product .summary.entry-summary h1.product_title,
    html.cereal-zara-prehide body.single-product .summary.entry-summary .basel-scroll-content > p.price,
    html.cereal-zara-prehide body.single-product .summary.entry-summary form.cart table.variations,
    html.cereal-zara-prehide body.single-product .summary.entry-summary .woocommerce-variation-price,
    html.cereal-zara-prehide body.single-product .summary.entry-summary .woocommerce-variation-availability,
    html.cereal-zara-prehide body.single-product .summary.entry-summary p.stock,
    html.cereal-zara-prehide body.single-product .summary.entry-summary .jose956-color-label,
    html.cereal-zara-prehide body.single-product .mobile-moved-summary h1.product_title,
    html.cereal-zara-prehide body.single-product .mobile-moved-summary .basel-scroll-content > p.price,
    html.cereal-zara-prehide body.single-product .mobile-moved-summary form.cart table.variations,
    html.cereal-zara-prehide body.single-product .mobile-moved-summary .woocommerce-variation-price,
    html.cereal-zara-prehide body.single-product .mobile-moved-summary .woocommerce-variation-availability,
    html.cereal-zara-prehide body.single-product .mobile-moved-summary p.stock,
    html.cereal-zara-prehide body.single-product .mobile-moved-summary .jose956-color-label,
    body.single-product.cereal-zara-purchase-ready .summary.entry-summary h1.product_title,
    body.single-product.cereal-zara-purchase-ready .summary.entry-summary .basel-scroll-content > p.price,
    body.single-product.cereal-zara-purchase-ready .summary.entry-summary form.cart table.variations,
    body.single-product.cereal-zara-purchase-ready .summary.entry-summary .woocommerce-variation-price,
    body.single-product.cereal-zara-purchase-ready .summary.entry-summary .woocommerce-variation-availability,
    body.single-product.cereal-zara-purchase-ready .summary.entry-summary p.stock,
    body.single-product.cereal-zara-purchase-ready .summary.entry-summary .jose956-color-label,
    body.single-product.cereal-zara-purchase-ready .mobile-moved-summary h1.product_title,
    body.single-product.cereal-zara-purchase-ready .mobile-moved-summary .basel-scroll-content > p.price,
    body.single-product.cereal-zara-purchase-ready .mobile-moved-summary form.cart table.variations,
    body.single-product.cereal-zara-purchase-ready .mobile-moved-summary .woocommerce-variation-price,
    body.single-product.cereal-zara-purchase-ready .mobile-moved-summary .woocommerce-variation-availability,
    body.single-product.cereal-zara-purchase-ready .mobile-moved-summary p.stock,
    body.single-product.cereal-zara-purchase-ready .mobile-moved-summary .jose956-color-label {
        display: none !important;
    }
    body.single-product .mobile-moved-summary .jose956-mobile-zara-trigger-sentinel {
        display: block;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        opacity: 0;
        pointer-events: none;
    }

    /* WPBakery row/-column 自帶 -15 負邊距與 custom margin 會偏離格線 */
    .single-product #tab-description .vc_row,
    .single-product #tab-description .vc_column-inner {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .single-product .mobile-moved-summary h1.product_title {
        padding-left: 0 !important;
    }
    .single-product .mobile-moved-summary #tab-description .wpb_text_column {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* === B3. 底部 purchase panel 兩態（Zara mobile PDP）===
       expanded：商品摘要 / 價格 / 顏色 / 庫存狀態 / 色塊 / ADD。
       compact：摘要收起，只留 ADD + price。 */
    #jose956-bottom-bar.jose956-mobile-zara-purchase-panel {
        --cereal-bar-price-space: 80px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
        min-height: 52px;
        box-sizing: border-box;
        overflow: hidden;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: none !important;
        transition:
            padding 0.3s ease-in-out,
            min-height 0.3s ease-in-out;
    }
    #jose956-bottom-bar .jose956-mobile-zara-summary {
        order: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 14px;
        align-items: start;
        flex: 0 0 100%;
        width: 100%;
        max-height: 124px;
        margin: 0 0 10px;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        transition:
            opacity 0.25s ease-in-out,
            transform 0.25s ease-in-out,
            max-height 0.3s ease-in-out,
            margin 0.3s ease-in-out;
    }
    #jose956-bottom-bar .jose956-mobile-zara-title,
    #jose956-bottom-bar .jose956-mobile-zara-price-expanded,
    #jose956-bottom-bar .jose956-mobile-zara-color,
    #jose956-bottom-bar .jose956-mobile-zara-stock {
        display: block;
        color: #242424;
        letter-spacing: 0;
        text-transform: none;
    }
    #jose956-bottom-bar .jose956-mobile-zara-title,
    #jose956-bottom-bar .jose956-mobile-zara-price-expanded {
        grid-column: 1;
        min-width: 0;
    }
    #jose956-bottom-bar .jose956-mobile-zara-title {
        min-height: 18px;
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #jose956-bottom-bar .jose956-mobile-zara-price-expanded {
        margin-top: 2px;
        font-size: 13px;
        font-weight: 300;
        line-height: 18px;
        color: #000;
    }
    #jose956-bottom-bar .jose956-mobile-zara-meta {
        grid-column: 1 / 3;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
        min-height: 16px;
    }
    #jose956-bottom-bar .jose956-mobile-zara-color {
        flex: 0 0 auto;
        display: inline;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
    }
    #jose956-bottom-bar .jose956-mobile-zara-stock {
        flex: 1 1 auto;
        display: inline;
        min-width: 0;
        font-size: 11px;
        font-weight: 400;
        line-height: 16px;
        color: #4a4a4a;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #jose956-bottom-bar .jose956-mobile-zara-swatches {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: end;
        align-self: start;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
        max-width: 92px;
        margin-top: 2px;
        min-height: 24px;
    }
    #jose956-bottom-bar .jose956-mobile-zara-swatches[hidden] {
        display: none;
    }
    #jose956-bottom-bar .jose956-mobile-zara-swatch {
        position: relative;
        width: 24px;
        height: 24px;
        padding: 3px;
        margin: 0;
        border: 1px solid transparent;
        border-radius: 0;
        background-clip: content-box;
        box-shadow: none;
        cursor: pointer;
        overflow: hidden;
        appearance: none;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;
    }
    #jose956-bottom-bar .jose956-mobile-zara-swatch::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        border: 1px solid #757575;
        pointer-events: none;
    }
    #jose956-bottom-bar .jose956-mobile-zara-swatch.is-selected {
        border-color: #000;
    }
    #jose956-bottom-bar .jose956-mobile-zara-swatch.is-disabled {
        opacity: 0.45;
    }
    #jose956-bottom-bar .jose956-mobile-zara-swatch:focus-visible {
        outline: 1px solid #000;
        outline-offset: 2px;
    }
    #jose956-bottom-bar.jose956-mobile-zara-purchase-panel .jose956-add-to-cart-btn {
        order: 2;
        width: auto !important;
        flex: 0 1 100%;
        flex-basis: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        transition:
            flex-basis 0.3s ease-in-out,
            width 0.3s ease-in-out,
            max-width 0.3s ease-in-out,
            background-color 0.3s ease;
    }
    body.cereal-bar-compact #jose956-bottom-bar.jose956-mobile-zara-purchase-panel {
        padding-top: 10px !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }
    body.cereal-bar-compact #jose956-bottom-bar .jose956-mobile-zara-summary {
        max-height: 0;
        margin-bottom: 0;
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
    }
    body.cereal-bar-compact #jose956-bottom-bar .jose956-add-to-cart-btn {
        flex-basis: calc(100% - var(--cereal-bar-price-space));
        max-width: calc(100% - var(--cereal-bar-price-space));
    }
    #jose956-bottom-bar .cereal-bar-price {
        order: 3;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 0;
        width: 0;
        max-width: 0;
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 300;
        color: #000;
        opacity: 0;
        transform: translateX(6px);
        padding: 0;
        transition:
            flex-basis 0.3s ease-in-out,
            width 0.3s ease-in-out,
            max-width 0.3s ease-in-out,
            padding 0.3s ease-in-out,
            opacity 0.25s ease-in-out,
            transform 0.25s ease-in-out;
    }
    body.cereal-bar-compact #jose956-bottom-bar .cereal-bar-price {
        flex-basis: var(--cereal-bar-price-space);
        width: var(--cereal-bar-price-space);
        max-width: var(--cereal-bar-price-space);
        opacity: 1;
        transform: translateX(0);
        padding: 0 6px 0 14px;
    }
    @media (prefers-reduced-motion: reduce) {
        #jose956-bottom-bar .jose956-add-to-cart-btn,
        #jose956-bottom-bar .cereal-bar-price,
        #jose956-bottom-bar .jose956-mobile-zara-summary {
            transition-duration: 0.01ms !important;
        }
    }

    /* === B4. round2 audit 快改（A/B/E）===
       金額 13/300/lh20、title-price 間距 4px、CTA 高 32（Zara 規格）。
       雙 class 拉高 specificity 壓過 cereal-typography 同權重 !important。 */
    .mobile-moved-summary h1.product_title {
        margin-bottom: 4px !important;
    }
    .mobile-moved-summary .basel-scroll-content > p.price {
        font-size: 13px !important;
        font-weight: 300 !important;
        line-height: 20px !important;
        color: #000 !important;
        margin: 0 0 14px !important;
    }
    .mobile-moved-summary .price .woocommerce-Price-currencySymbol {
        margin-right: 3px; /* Zara「NT$ 680」貨幣後空隔 */
    }
    #jose956-bottom-bar .jose956-add-to-cart-btn.jose956-add-to-cart-btn {
        height: 32px !important;
        line-height: 30px !important;   /* border-box 32 含上下 1px 框 */
        font-weight: 300 !important;
        letter-spacing: normal !important;
        padding: 0 12px !important;
    }

    /* === Phase C. 尺寸選擇 action sheet（round2 audit F）=== */
    /* Zara 頁內無尺寸列，選尺寸走 sheet；:has() 首繪即藏（7/5 Jose 抓出
       重整時 F/清除 會先閃一下——原本等 JS 加 class 才藏） */
    .single-product table.variations tr:has(.swatches-select[data-id="pa_size"]),
    body.cereal-has-size-sheet .single-product table.variations tr.cereal-size-row-tr {
        display: none !important;
    }
    #cereal-size-backdrop {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        background: rgba(255, 255, 255, 0.75); /* Zara backdrop 白 0.75 */
        z-index: 99990;                        /* bar 9998 之上、toast 99999 之下 */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    body.cereal-sheet-open #cereal-size-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    #cereal-size-sheet {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        background: #fff;
        z-index: 99991;
        transform: translateY(105%);
        transition: transform 0.25s ease;
        padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
        border-radius: 0;                      /* Zara sheet 無圓角 */
        max-height: 70vh;
        overflow-y: auto;
    }
    body.cereal-sheet-open #cereal-size-sheet {
        transform: translateY(0);
    }
    .cereal-sheet-handle {
        height: 16px; /* Zara sheet 頂部留白 handle 區 */
    }
    .cereal-size-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 40px;                      /* Zara row 350x40 */
        margin-bottom: 16px;                   /* Zara row 間距 16px */
        cursor: pointer;
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        color: #000;
        -webkit-tap-highlight-color: transparent;
    }
    .cereal-size-row:last-child {
        margin-bottom: 4px;
    }
    .cereal-size-row .cereal-size-note {
        font-size: 12px;
        font-weight: 400;  /* 中文 300 太細（typography 規範中文不降階） */
        line-height: 18px;
        color: #767676;
        margin-top: 4px;
    }
    .cereal-size-row.is-soldout {
        color: #999;                           /* Zara unavailable 灰字 */
        cursor: default;
    }
    .cereal-size-row.is-soldout .cereal-size-note a {
        color: #000;
        font-size: 12px;
        font-weight: 400;  /* 中文不降階 */
        text-decoration: underline;            /* Zara「View similar」次要動作樣式 */
    }

    /* 售完→「補貨通知」：黑框可點（非灰死態）。
       雙寫 class 壓過 typography 的 :not(.ready-to-add) 灰態（同權重搶輸過） */
    #jose956-bottom-bar .jose956-add-to-cart-btn.cereal-bis-mode.cereal-bis-mode {
        color: #242424 !important;
        border-color: #242424 !important;
    }

    /* BIS 訂閱表單不留在頁面資訊區（Zara 頁內無訂閱框），統一收進 sheet；
       搬進 .cereal-bis-slot 後脫離 summary、由下方 slot 規則顯示 */
    .single-product .mobile-moved-summary .wc_bis_product_form,
    .single-product .mobile-moved-summary #wc_bis_product_form,
    .single-product .summary-inner .wc_bis_product_form,
    .single-product .summary-inner #wc_bis_product_form {
        display: none !important;
    }

    /* sheet 內的 BIS 訂閱視圖（補貨通知表單搬進來） */
    #cereal-size-sheet .cereal-sheet-bis {
        display: none;
        padding: 0 0 8px;
    }
    #cereal-size-sheet .cereal-bis-back {
        display: inline-block;
        font-size: 12px;
        color: #767676;
        text-decoration: none;
        margin-bottom: 12px;
        -webkit-tap-highlight-color: transparent;
    }
    #cereal-size-sheet .cereal-bis-title {
        font-size: 13px;
        font-weight: 400;
        color: #242424;
        margin: 0 0 12px;
        text-align: center;
    }
    #cereal-size-sheet .cereal-bis-slot #wc_bis_product_form,
    #cereal-size-sheet .cereal-bis-slot .wc_bis_product_form {
        display: block !important;   /* 頁面裡可能是隱藏態，搬進來強制顯示 */
        margin: 0 !important;
        padding: 0 !important;
    }
    #cereal-size-sheet .cereal-bis-slot .wc_bis_form_title {
        font-size: 13px;
        color: #242424;
        margin: 0 0 12px;
        text-align: center;
    }
    /* 訂閱鈕對齊 Zara 次要按鈕：白底 1px 黑框 32px 滿版 0 radius */
    #cereal-size-sheet .cereal-bis-slot button.wc_bis_send_form {
        display: block;
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 12px;
        background: #fff !important;
        color: #242424 !important;
        border: 1px solid #242424 !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        letter-spacing: normal !important;
    }
}

/* ===============================================
   側邊面板（購物車/登入，z-index 500）開啟時收起底部加購 bar（z-index 9998）
   否則 bar 疊在面板上擋住底部（Jose 7/6 回報 BAG 面板被「加入購物車」擋住）
   =============================================== */
body.basel-cart-opened #jose956-bottom-bar,
body.basel-login-side-opened #jose956-bottom-bar,
body.act-mobile-menu #jose956-bottom-bar,
body.basel-search-opened #jose956-bottom-bar,
body.compare-opened #jose956-bottom-bar,
body.body-filters-opened #jose956-bottom-bar {
    display: none !important;
}

/* ===============================================
   BIS sheet：LINE 同步通知行＋訂閱鈕整組置中（Jose 2026-07-06 反饋）
   .wc-bis-line-row 由 jose956-analytics-dashboard 的 LINE 外掛渲染，
   只在 jose956_line_enabled=1 的站出現（163）；94 旗標=0 此規則閒置
   =============================================== */
@media (max-width: 991px) {
    #cereal-size-sheet .cereal-bis-slot .wc-bis-line-row {
        justify-content: center !important;
    }
}


/* ===============================================
   入袋成功「已加入購物袋」底部彈層（Zara ADDED TO YOUR BAG）
   z-index：尺寸 sheet 99991 之上、購物車面板 100000 之下
   =============================================== */
@media (max-width: 991px) {
    #cereal-added-sheet {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 99993;
        background: #fff;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.10);
        padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
        transform: translateY(110%);
        transition: transform 0.28s ease;
    }
    #cereal-added-sheet.cereal-added-open { transform: translateY(0); }
    #cereal-added-sheet .cereal-added-close {
        position: absolute;
        top: 10px; right: 14px;
        font-size: 18px;
        line-height: 1;
        color: #242424 !important;
    }
    #cereal-added-sheet .cereal-added-head {
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0.5px;
        color: #666;
        margin-bottom: 12px;
    }
    #cereal-added-sheet .cereal-added-row {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 14px;
    }
    #cereal-added-sheet .cereal-added-thumb {
        width: 56px;
        height: auto;
        display: block;
    }
    #cereal-added-sheet .cereal-added-name {
        font-size: 12px;
        color: #000;
        line-height: 17px;
    }
    #cereal-added-sheet .cereal-added-variant {
        margin-top: 6px;
        font-size: 11px;
        color: #666;
        text-transform: uppercase;
    }
    #cereal-added-sheet .cereal-added-viewbag {
        display: block;
        width: 100%;
        height: 44px;
        line-height: 44px;
        background: #242424 !important;
        color: #fff !important;
        border: 0;
        text-align: center;
        font-size: 12px;
        letter-spacing: 0.6px;
    }
}

/* ===============================================
   PDP 入袋後只留 Zara 白彈層，關掉舊黑 toast（Jose 2026-07-06 反饋）
   #jose956-cart-toast 由 jose956-layout.js 全站掛 added_to_cart；
   新彈層只在 ≤breakpoint 的商品頁存在，故只在同範圍關 toast——
   桌機（無新彈層）與其他頁面照舊
   =============================================== */
@media (max-width: 991px) {
    .single-product #jose956-cart-toast {
        display: none !important;
    }
}

/* ===============================================
   PC variation disabled 狀態（2026-07-10）
   Woo/Basel 售完時只加 class，1024px 仍會畫成黑色可購買按鈕。
   JS 同步補 native disabled / aria / keyboard；這裡負責明確視覺。
   =============================================== */
@media (min-width: 992px) {
    .single-product form.variations_form.cereal-desktop-purchase-disabled .single_add_to_cart_button,
    .single-product form.variations_form .single_add_to_cart_button.disabled,
    .single-product form.variations_form .single_add_to_cart_button[disabled] {
        background: #f1f1f1 !important;
        border-color: #d6d6d6 !important;
        color: #666 !important;
        opacity: 1 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
        box-shadow: none !important;
    }

    .single-product form.variations_form.cereal-desktop-purchase-disabled .quantity,
    .single-product form.variations_form:has(.single_add_to_cart_button.disabled) .quantity {
        opacity: 0.45 !important;
        pointer-events: none !important;
        cursor: not-allowed !important;
    }
}