/**
 * Zara 式全螢幕 mini-cart（2026-07-06 Jose 指示）
 * 維持 Basel AJAX 側滑機制，只改排版：全螢幕寬、小圖列表、小計＋結帳釘底
 * DOM 結構配合 basel-child/woocommerce/cart/mini-cart.php 覆寫（品名/規格/價格/移除 四行）
 * 只動 .cart-widget-side（勿波及 .login-form-side）
 * kill-switch：刪/改名本檔即停用（主 PHP enqueue 有 file_exists 守門）
 */

/* ── 共用（桌機＋手機）：新結構的商品列 ── */
.cart-widget-side li.mini_cart_item {
    position: relative;
    display: flex;
    align-items: flex-start;
    border: 0 !important;
}
.cart-widget-side .cereal-mc-thumb {
    flex: 0 0 auto;
    display: block;
}
.cart-widget-side .cereal-mc-thumb img {
    display: block;
    float: none !important;
    margin: 0 !important;
    height: auto;
}
.cart-widget-side .cereal-mc-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.cart-widget-side .cereal-mc-name {
    display: block;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 17px;
    color: #000;
}
.cart-widget-side .cereal-mc-variant {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 300;
    line-height: 15px;
    color: #666;
    text-transform: uppercase;
}
.cart-widget-side .cereal-mc-info .quantity {
    display: block;
    margin-top: 6px;
    font-size: 11px !important;
    font-weight: 400;
    line-height: 15px;
    color: #000;
}
.cart-widget-side .cereal-mc-remove {
    display: inline-block;
    margin-top: 14px;
    font-size: 11px !important;
    font-weight: 400;
    line-height: 15px;
    color: #000 !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.cart-widget-side .cereal-mc-remove:hover {
    border-bottom-color: #000;
}
/* 舊 × 樣式殘留防呆（typography 針對 .remove 的規則不再命中，此處保險歸零） */
.cart-widget-side li.mini_cart_item > a.remove {
    display: none;
}

/* ── 桌機 >991：維持 340px 側欄，只套新結構的緊湊版 ── */
@media (min-width: 992px) {
    .cart-widget-side li.mini_cart_item {
        gap: 12px;
        padding: 14px 0;
    }
    .cart-widget-side .cereal-mc-thumb {
        width: 72px;
    }
    .cart-widget-side .cereal-mc-thumb img {
        width: 72px !important;
        max-width: 72px !important;
        min-width: 0 !important;
    }
}

/* ── 手機 ≤991：Zara 全螢幕 BAG ── */
@media (max-width: 991px) {

    /* 全螢幕面板 */
    body .cart-widget-side {
        width: 100% !important;
        /* 商品 modal（mfp 圖片放大 1043、尺寸 sheet 99991）都壓在 Basel 預設 500 之上，
           購物車開啟時必須蓋過全部（toast 99999 之上、swipe 過場層 1000000 之下） */
        z-index: 100000 !important;
        /* 關閉態改用自身寬度推出畫面（Basel 硬寫 340px，寬度變 100% 會露邊）
           開啟規則 .basel-cart-opened 特異度較高，照常收回 0；transform 禁 !important */
        transform: translateX(102%);
        overflow: hidden !important;
        box-shadow: none;
    }
    /* 顯示 gate 沿用 Basel document-ready 機制，只把 block 換成 flex 直欄 */
    .document-ready .cart-widget-side {
        display: flex !important;
        flex-direction: column;
    }

    /* 直欄骨架：heading 固定、清單捲動、小計/結帳釘底 */
    .cart-widget-side .widget-heading {
        flex: 0 0 auto;
    }
    .cart-widget-side .widget.widget_shopping_cart {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    .cart-widget-side .widget_shopping_cart_content {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .cart-widget-side ul.cart_list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0 0 24px;
    }

    /* 商品列：Zara 式小圖左、四行文字右、大量留白、無分隔線 */
    .cart-widget-side li.mini_cart_item {
        gap: 16px;
        padding: 32px 20px 0;
        margin: 0;
    }
    .cart-widget-side .cereal-mc-thumb {
        width: 104px;
    }
    .cart-widget-side .cereal-mc-thumb img {
        width: 104px !important;
        max-width: 104px !important;
        /* basel-dynamic inline 有 min-width:120px——min-width 壓過 width 連 !important 都輸，必須明蓋 */
        min-width: 0 !important;
    }

    /* 釘底結帳區 */
    .cart-widget-side .woocommerce-mini-cart__total {
        flex: 0 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin: 0;
        padding: 14px 20px 0;
        border-top: 1px solid #e6e6e6;
        font-size: 11px;
        font-weight: 400;
        color: #000;
    }
    .cart-widget-side .woocommerce-mini-cart__total .woocommerce-Price-amount {
        font-size: 12px;
    }
    .cart-widget-side .minicartleftamount {
        flex: 0 0 auto;
        padding: 0 20px 8px;
        font-size: 11px;
        line-height: 15px;
        color: #757575;
    }
    /* 結帳鈕：Zara 式貼齊螢幕左右下緣、全寬黑鈕 */
    .cart-widget-side .woocommerce-mini-cart__buttons {
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
    }
    .cart-widget-side .woocommerce-mini-cart__buttons a.checkout {
        display: block;
        /* basel-dynamic 的 a.button.checkout.wc-forward 有 calc(100% - 20px) 同特異度且較晚印出 */
        width: 100% !important;
        margin: 0;
        padding: 0 0 env(safe-area-inset-bottom);
        height: calc(48px + env(safe-area-inset-bottom));
        line-height: 48px;
        background: #242424 !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 0 !important;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.6px;
    }
}

/* NT$ 與數字之間補空隔（對標 Zara「NT$ 1,790」；PDP 的 B4 已做，這裡補面板內） */
.cart-widget-side .woocommerce-Price-currencySymbol { margin-right: 3px; }

/* ===============================================
   mini-cart 數量 stepper（Zara BAG − n ＋，2026-07-06 Jose 指示；
   7/6 深夜 Jose 反饋改版：去外框、字級字重對齊原 .quantity 行 11/400/#000）
   端點/JS 在 mu-plugins/cereal-cart-qty.php
   =============================================== */
.cart-widget-side .cereal-mc-qtyline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}
.cart-widget-side .cereal-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
}
.cart-widget-side .cereal-qty-btn {
    min-width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #000 !important;
    cursor: pointer;
}
.cart-widget-side .cereal-qty-btn.is-disabled { color: #ccc !important; cursor: default; }
.cart-widget-side .cereal-qty-num {
    min-width: 18px;
    text-align: center;
    font-size: 11px;
    font-weight: 400;
    line-height: 15px;
    color: #000;
}
.cart-widget-side .cereal-mc-price,
.cart-widget-side .cereal-mc-price .woocommerce-Price-amount,
.cart-widget-side .cereal-mc-price bdi,
.cart-widget-side .cereal-mc-price .woocommerce-Price-currencySymbol {
    font-size: 11px !important;
    font-weight: 400;
    line-height: 15px;
    color: #000 !important;
}