/* ==========================================================
   YUPPY QUOKKA
   CART LAYOUT
   PC / TABLET / MOBILE
   COMPLETE VERSION
========================================================== */


/* ==========================================================
   00. VARIABLES
========================================================== */

.woocommerce-cart {
    --yq-brown: #5A1300;
    --yq-gold: #C5A46D;
    --yq-gold-hover: #B6945F;
    --yq-white: #FFFFFF;
    --yq-bg: #F7F5F0;
    --yq-border: #E2DDD9;
    --yq-border-light: #ECE7E3;
    --yq-gray: #777777;

    color: var(--yq-brown);
}


/* ==========================================================
   01. COMMON
========================================================== */

.woocommerce-cart .woocommerce {
    color: var(--yq-brown);
}

.woocommerce-cart h2,
.woocommerce-cart h3,
.woocommerce-cart h4 {
    color: var(--yq-brown);
    font-weight: 600;
    letter-spacing: .03em;
}


/* ==========================================================
   02. CART FORM
========================================================== */

.woocommerce-cart
.woocommerce-cart-form {
    width: 100%;
    max-width: 100%;
}

.woocommerce-cart
.woocommerce-cart-form
.shop_table {
    width: 100% !important;
    margin: 0 !important;

    color: var(--yq-brown);

    border-collapse: collapse !important;

    box-sizing: border-box;
}


/* ==========================================================
   03. REMOVE BUTTON
========================================================== */

.woocommerce-cart
.product-remove {
    text-align: center !important;
}

.woocommerce-cart
.product-remove
a.remove {
    box-shadow: none !important;
}


/* ==========================================================
   04. PRODUCT IMAGE
========================================================== */

.woocommerce-cart
.product-thumbnail img {
    height: auto !important;

    box-shadow: none !important;
}


/* ==========================================================
   05. PRODUCT NAME
========================================================== */

.woocommerce-cart
td.product-name a {
    color: var(--yq-brown) !important;

    font-weight: 400;

    text-transform: none;
}


/* ==========================================================
   06. PRICE
========================================================== */

.woocommerce-cart
.woocommerce-Price-amount,

.woocommerce-cart
.product-price,

.woocommerce-cart
.product-subtotal {
    color: var(--yq-brown);
}


/* ==========================================================
   07. QUANTITY
========================================================== */

.woocommerce-cart
.quantity {
    white-space: nowrap;
}

.woocommerce-cart
.quantity input[type="number"],
.woocommerce-cart
.quantity .qty {
    color: var(--yq-brown);

    background: var(--yq-white);

    border: 1px solid #D9D2CD !important;

    box-shadow: none !important;
}

.woocommerce-cart
.quantity .minus,
.woocommerce-cart
.quantity .plus {
    color: #777;

    background: var(--yq-white);

    border-color: #D9D2CD !important;

    box-shadow: none !important;
}


/* ==========================================================
   08. CONTINUE SHOPPING
========================================================== */

.woocommerce-cart
.continue-shopping {
    margin: 0 !important;
}

.woocommerce-cart
.continue-shopping .button,

.woocommerce-cart
a.button-continue-shopping,

.woocommerce-cart
a.wc-backward {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 48px;

    margin: 0 !important;

    color: var(--yq-brown) !important;

    background: var(--yq-white) !important;

    border: 1px solid var(--yq-brown) !important;

    border-radius: 5px !important;

    box-shadow: none !important;

    font-weight: 400 !important;

    line-height: 1.2 !important;

    text-align: center !important;

    text-transform: none !important;
}

.woocommerce-cart
.continue-shopping .button:hover,

.woocommerce-cart
a.button-continue-shopping:hover,

.woocommerce-cart
a.wc-backward:hover {
    color: var(--yq-white) !important;

    background: var(--yq-brown) !important;
}


/* ==========================================================
   09. UPDATE CART
========================================================== */

.woocommerce-cart
button[name="update_cart"],

.woocommerce-cart
input[name="update_cart"] {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 48px;

    margin: 0 !important;

    color: var(--yq-white) !important;

    background: var(--yq-gold) !important;

    border: 0 !important;

    border-radius: 5px !important;

    box-shadow: none !important;

    font-weight: 600 !important;

    line-height: 1.2 !important;

    text-align: center !important;

    text-transform: none !important;
}

.woocommerce-cart
button[name="update_cart"]:hover {
    background: var(--yq-gold-hover) !important;
}

.woocommerce-cart
button[name="update_cart"]:disabled,
.woocommerce-cart
button[name="update_cart"].disabled {
    opacity: .55;
}


/* ==========================================================
   10. CART TOTALS
========================================================== */

.woocommerce-cart
.cart_totals {
    color: var(--yq-brown);
}

.woocommerce-cart
.cart_totals h2 {
    margin: 0 0 14px;

    padding: 0 0 10px;

    color: var(--yq-brown);

    border-bottom: 1px solid var(--yq-border-light);

    font-size: 15px;
    font-weight: 600;
}

.woocommerce-cart
.cart_totals
.shop_table {
    width: 100% !important;
}

.woocommerce-cart
.cart_totals
.shop_table th,

.woocommerce-cart
.cart_totals
.shop_table td {
    padding: 12px 0 !important;

    color: var(--yq-brown);
}

.woocommerce-cart
.cart_totals
.order-total th,

.woocommerce-cart
.cart_totals
.order-total td,

.woocommerce-cart
.cart_totals
.order-total
.woocommerce-Price-amount {
    color: var(--yq-brown);

    font-weight: 600;
}


/* ==========================================================
   11. SHIPPING
========================================================== */

.woocommerce-cart
.woocommerce-shipping-destination {
    color: var(--yq-gray);

    font-size: 13px;

    line-height: 1.7;
}

.woocommerce-cart
.shipping-calculator-button {
    color: var(--yq-brown);

    font-size: 13px;
    font-weight: 500;
}


/* ==========================================================
   12. CHECKOUT BUTTON
========================================================== */

.woocommerce-cart
.wc-proceed-to-checkout {
    margin-top: 18px;
}

.woocommerce-cart
.wc-proceed-to-checkout
.checkout-button {
    display: flex !important;

    align-items: center;
    justify-content: center;

    width: 100% !important;

    min-height: 50px;

    margin: 0 !important;

    padding: 0 24px !important;

    color: var(--yq-white) !important;

    background: var(--yq-brown) !important;

    border: 0 !important;

    border-radius: 5px !important;

    box-shadow: none !important;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;

    text-align: center;

    text-transform: none;
}

.woocommerce-cart
.wc-proceed-to-checkout
.checkout-button:hover {
    background: #481000 !important;
}


/* ==========================================================
   13. COUPON + POINTS BOX
========================================================== */

.woocommerce-cart
.yq-cart-discount-box {
    width: 100%;

    margin: 24px 0 0;

    padding: 0;

    background: var(--yq-bg);

    border: 1px solid var(--yq-border);

    box-sizing: border-box;
}


/* ==========================================================
   14. COUPON
========================================================== */

.woocommerce-cart
.yq-cart-coupon-section {
    width: 100% !important;

    margin: 0 !important;

    padding: 24px 26px !important;

    background: transparent !important;

    border: 0 !important;

    border-bottom: 1px solid var(--yq-border) !important;

    box-sizing: border-box;
}

.woocommerce-cart
.yq-cart-coupon-section label {
    display: block;

    margin: 0 0 16px;

    color: var(--yq-brown);

    font-size: 15px;
    font-weight: 600;
}

.woocommerce-cart
.yq-cart-coupon-section
#coupon_code {
    width: 100% !important;

    height: 50px !important;

    margin: 0 0 10px !important;

    padding: 0 16px !important;

    color: var(--yq-brown) !important;

    background: var(--yq-white) !important;

    border: 1px solid #D9D2CD !important;

    border-radius: 5px !important;

    box-shadow: none !important;

    font-size: 16px;

    box-sizing: border-box;
}

.woocommerce-cart
.yq-cart-coupon-section
button[name="apply_coupon"] {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    height: 50px !important;

    margin: 0 !important;

    padding: 0 20px !important;

    color: var(--yq-white) !important;

    background: var(--yq-gold) !important;

    border: 0 !important;

    border-radius: 5px !important;

    box-shadow: none !important;

    text-shadow: none !important;

    font-family: inherit !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    text-align: center !important;

    text-transform: none !important;
}

.woocommerce-cart
.yq-cart-coupon-section
button[name="apply_coupon"]::before,

.woocommerce-cart
.yq-cart-coupon-section
button[name="apply_coupon"]::after {
    content: none !important;

    display: none !important;
}


/* ==========================================================
   15. POINTS
========================================================== */

.woocommerce-cart
.yq-cart-points-section {
    display: grid !important;

    grid-template-columns: 1fr;

    gap: 10px;

    width: 100% !important;

    margin: 0 !important;

    padding: 24px 26px !important;

    color: var(--yq-brown);

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    box-sizing: border-box;
}

.woocommerce-cart
.yq-cart-points-section
#wps_cart_points,

.woocommerce-cart
.yq-cart-points-section
input[name="wps_cart_points"] {
    width: 100% !important;

    height: 50px !important;

    margin: 0 !important;

    padding: 0 16px !important;

    color: var(--yq-brown) !important;

    background: var(--yq-white) !important;

    border: 1px solid #D9D2CD !important;

    border-radius: 5px !important;

    box-shadow: none !important;

    font-size: 16px;

    box-sizing: border-box;
}

.woocommerce-cart
.yq-cart-points-section
#wps_cart_points_apply,

.woocommerce-cart
.yq-cart-points-section
.wps_cart_points_apply {
    display: flex !important;

    align-items: center;
    justify-content: center;

    width: 100% !important;

    height: 50px !important;

    margin: 0 !important;

    padding: 0 20px !important;

    color: var(--yq-white) !important;

    background: var(--yq-gold) !important;

    border: 0 !important;

    border-radius: 5px !important;

    box-shadow: none !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1 !important;
}

.woocommerce-cart
.yq-cart-points-section p {
    margin: 0 !important;

    color: var(--yq-gray);

    font-size: 13px;

    line-height: 1.6;
}


/* ==========================================================
   16. CROSS SELLS
========================================================== */

.woocommerce-cart
.yq-cart-cross-sells {
    position: relative;

    display: block !important;

    float: none !important;
    clear: both !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 44px auto 0 !important;

    padding: 0 !important;

    box-sizing: border-box;
}

.woocommerce-cart
.yq-cart-cross-sells h2 {
    margin: 0 0 28px;

    padding: 0 0 14px;

    color: var(--yq-brown);

    border-bottom: 1px solid var(--yq-border-light);

    font-size: 18px;
    font-weight: 600;

    line-height: 1.5;
}


/* ==========================================================
   17. CROSS SELL VIEWPORT
========================================================== */

.woocommerce-cart
.yq-cross-sells-viewport {
    position: relative;

    width: 100%;

    padding: 0 44px;

    box-sizing: border-box;
}

.woocommerce-cart
.yq-cross-sells-viewport.yq-no-slider-nav {
    padding: 0;
}


/* ==========================================================
   18. CROSS SELL TRACK
========================================================== */

.woocommerce-cart
.yq-cross-sells-track {
    display: flex !important;

    flex-wrap: nowrap !important;

    gap: 22px;

    width: 100%;

    margin: 0 !important;

    padding: 0 !important;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    -ms-overflow-style: none;
}

.woocommerce-cart
.yq-cross-sells-track::-webkit-scrollbar {
    display: none;
}

.woocommerce-cart
.yq-cross-sells-track
> * {
    flex: 0 0 calc((100% - 110px) / 6) !important;

    width: calc((100% - 110px) / 6) !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    scroll-snap-align: start;

    text-align: center;

    box-sizing: border-box;
}

.woocommerce-cart
.yq-cart-cross-sells
.product-title,

.woocommerce-cart
.yq-cart-cross-sells
.woocommerce-loop-product__title {
    color: var(--yq-brown);

    font-size: 13px;
    font-weight: 400;

    line-height: 1.45;
}

.woocommerce-cart
.yq-cart-cross-sells
.price {
    color: var(--yq-brown);

    font-size: 13px;
}


/* ==========================================================
   19. CROSS SELL ARROWS
========================================================== */

.woocommerce-cart
.yq-cross-sells-prev,

.woocommerce-cart
.yq-cross-sells-next {
    position: absolute;

    top: 42%;

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 64px;

    margin: 0 !important;

    padding: 0 !important;

    color: var(--yq-brown) !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    font-family: Arial, sans-serif !important;

    font-size: 46px !important;
    font-weight: 300 !important;

    line-height: 1 !important;

    cursor: pointer;

    transform: translateY(-50%);
}

.woocommerce-cart
.yq-cross-sells-prev {
    left: 0;
}

.woocommerce-cart
.yq-cross-sells-next {
    right: 0;
}

.woocommerce-cart
.yq-cross-sells-prev:hover,

.woocommerce-cart
.yq-cross-sells-next:hover {
    color: var(--yq-gold) !important;

    background: transparent !important;
}


/* ==========================================================
   20. DESKTOP / LARGE TABLET
========================================================== */

@media screen and (min-width: 850px) {

    /* ------------------------------------------------------
       TABLE
    ------------------------------------------------------ */

    .woocommerce-cart
    .woocommerce-cart-form
    .shop_table {
        table-layout: fixed !important;
    }


    /* ------------------------------------------------------
       COLUMN WIDTHS
    ------------------------------------------------------ */

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-remove,

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-remove {
        width: 9% !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    th.product-thumbnail,

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-thumbnail {
        width: 15% !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    th.product-name,

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name {
        width: 31% !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    th.product-price,

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-price {
        width: 15% !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    th.product-quantity,

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-quantity {
        width: 15% !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    th.product-subtotal,

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-subtotal {
        width: 15% !important;
    }


    /* ------------------------------------------------------
       HEADER
    ------------------------------------------------------ */

    .woocommerce-cart
    .woocommerce-cart-form
    .shop_table thead th {
        padding: 14px 8px 16px !important;

        color: var(--yq-brown) !important;

        font-size: 14px;
        font-weight: 600;

        line-height: 1.4;

        vertical-align: middle;

        border-bottom: 1px solid var(--yq-border-light) !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    th.product-remove,

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-thumbnail {
        font-size: 0 !important;
    }


    /* 過去の擬似見出しを無効化 */

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-name::before,

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-name::after {
        content: none !important;

        display: none !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    th.product-name {
        padding-left: 52px !important;

        color: var(--yq-brown) !important;

        text-align: left !important;

        white-space: nowrap !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    th.product-price,

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-quantity,

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-subtotal {
        text-align: center !important;

        white-space: nowrap !important;
    }


    /* ------------------------------------------------------
       PRODUCT ROW
    ------------------------------------------------------ */

    .woocommerce-cart
    .woocommerce-cart-form
    tr.woocommerce-cart-form__cart-item
    td {
        padding: 28px 8px !important;

        vertical-align: middle !important;

        border-bottom: 1px solid var(--yq-border-light) !important;
    }


    /* ------------------------------------------------------
       REMOVE
    ------------------------------------------------------ */

    .woocommerce-cart
    .product-remove
    a.remove {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 72px !important;
        min-width: 72px !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 auto !important;

        padding: 0 8px !important;

        color: transparent !important;

        background: var(--yq-gold) !important;

        border: 0 !important;

        border-radius: 5px !important;

        font-size: 0 !important;

        line-height: 1 !important;
    }


    .woocommerce-cart
    .product-remove
    a.remove::after {
        content: "削除";

        color: var(--yq-white);

        font-size: 13px;
        font-weight: 600;

        line-height: 1;
    }


    /* ------------------------------------------------------
       IMAGE
    ------------------------------------------------------ */

    .woocommerce-cart
    .product-thumbnail img {
        display: block !important;

        width: 110px !important;

        max-width: 100% !important;

        margin: 0 auto !important;
    }


    /* ------------------------------------------------------
       PRODUCT NAME
    ------------------------------------------------------ */

    .woocommerce-cart
    td.product-name {
        padding-left: 14px !important;
        padding-right: 18px !important;

        text-align: left !important;
    }


    .woocommerce-cart
    td.product-name a {
        font-size: 14px;

        line-height: 1.5;

        word-break: keep-all !important;

        overflow-wrap: break-word !important;
    }


    /* ------------------------------------------------------
       PRICE / QUANTITY / SUBTOTAL
    ------------------------------------------------------ */

    .woocommerce-cart
    td.product-price,

    .woocommerce-cart
    td.product-quantity,

    .woocommerce-cart
    td.product-subtotal {
        text-align: center !important;

        white-space: nowrap !important;
    }


    /* ------------------------------------------------------
       ACTIONS
    ------------------------------------------------------ */

    .woocommerce-cart
    .woocommerce-cart-form
    td.actions {
        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        flex-wrap: nowrap !important;

        gap: 12px !important;

        width: 100% !important;

        padding: 28px 0 12px !important;

        border: 0 !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.actions::before,

    .woocommerce-cart
    .woocommerce-cart-form
    td.actions::after {
        content: none !important;

        display: none !important;
    }


    .woocommerce-cart
    .continue-shopping .button,

    .woocommerce-cart
    a.button-continue-shopping,

    .woocommerce-cart
    a.wc-backward,

    .woocommerce-cart
    button[name="update_cart"],

    .woocommerce-cart
    input[name="update_cart"] {
        width: 210px !important;
        min-width: 210px !important;

        height: 48px !important;
        min-height: 48px !important;
    }
}


/* ==========================================================
   21. TABLET
========================================================== */

@media screen and (min-width: 550px) and (max-width: 849px) {

    .woocommerce-cart
    .yq-cross-sells-viewport {
        padding: 0 36px;
    }

    .woocommerce-cart
    .yq-cross-sells-track {
        gap: 16px;
    }

    .woocommerce-cart
    .yq-cross-sells-track
    > * {
        flex: 0 0 calc((100% - 32px) / 3) !important;

        width: calc((100% - 32px) / 3) !important;
    }
}


/* ==========================================================
   MOBILE
   CART MOBILE COMPLETE FIX
========================================================== */

@media screen and (max-width: 549px) {

    /* ======================================================
       01. ページ全体
       Flatsomeの左右余白をリセット
    ====================================================== */

    body.woocommerce-cart,
    body.woocommerce-cart #wrapper,
    body.woocommerce-cart #main,
    body.woocommerce-cart .page-wrapper {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: hidden !important;
    }


    /*
     * Flatsomeのrowガターを解除
     */

    .woocommerce-cart
    .row,

    .woocommerce-cart
    .row.row-large,

    .woocommerce-cart
    .row.row-divided {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /*
     * 左商品カラム・右合計カラム
     */

    .woocommerce-cart
    .row > .col,

    .woocommerce-cart
    .cart-wrapper-sm,

    .woocommerce-cart
    .cart-sidebar,

    .woocommerce-cart
    .cart-collaterals {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }


    /*
     * 実際のコンテンツ幅
     * 左右を完全に同じにする
     */

    .woocommerce-cart
    .woocommerce {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       02. PC用見出しを完全削除
       商品 / 金額 / 数量 / 小計
    ====================================================== */

    .woocommerce-cart
    .woocommerce-cart-form
    .shop_table thead,

    .woocommerce-cart
    .woocommerce-cart-form
    .shop_table thead tr,

    .woocommerce-cart
    .woocommerce-cart-form
    .shop_table thead th,

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-name,

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-price,

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-quantity,

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-subtotal,

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-remove,

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-thumbnail {
        display: none !important;

        width: 0 !important;
        height: 0 !important;

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        font-size: 0 !important;

        line-height: 0 !important;

        overflow: hidden !important;
    }


    /*
     * 過去に追加した疑似見出しも削除
     */

    .woocommerce-cart
    .woocommerce-cart-form::before,

    .woocommerce-cart
    .woocommerce-cart-form::after,

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-name::before,

    .woocommerce-cart
    .woocommerce-cart-form
    th.product-name::after {
        content: none !important;
        display: none !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        padding-top: 0 !important;
    }


    /* ======================================================
       03. 商品テーブル
    ====================================================== */

    .woocommerce-cart
    .woocommerce-cart-form
    .shop_table {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        table-layout: auto !important;

        box-sizing: border-box !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    .shop_table tbody {
        display: block !important;

        width: 100% !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    .shop_table
    tr.woocommerce-cart-form__cart-item {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        padding:
            18px
            0
            20px !important;

        border-bottom:
            1px solid var(--yq-border-light) !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       04. 商品上段
       × / 画像 / 商品名
    ====================================================== */

    /* 削除 */

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-remove {
        position: absolute !important;

        top: 26px !important;
        left: 0 !important;

        z-index: 3;

        display: block !important;

        width: 30px !important;
        height: 30px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }


    .woocommerce-cart
    .product-remove
    a.remove {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 28px !important;
        min-width: 28px !important;

        height: 28px !important;
        min-height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #aaa !important;

        background: transparent !important;

        border:
            1px solid #d7d7d7 !important;

        border-radius: 50% !important;

        box-shadow: none !important;

        font-size: 20px !important;

        line-height: 1 !important;
    }


    .woocommerce-cart
    .product-remove
    a.remove::after {
        content: none !important;
        display: none !important;
    }


    /* 商品画像 */

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-thumbnail {
        display: block !important;

        float: left !important;

        width: 36% !important;

        margin: 0 !important;

        padding:
            16px
            12px
            16px
            42px !important;

        border: 0 !important;

        box-sizing: border-box !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.product-thumbnail img {
        display: block !important;

        width: 100% !important;
        max-width: 105px !important;

        height: auto !important;

        margin: 0 auto !important;
    }


    /* 商品名 */

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name {
        display: flex !important;

        float: right !important;

        align-items: center !important;

        width: 64% !important;

        min-height: 135px !important;

        margin: 0 !important;

        padding:
            18px
            10px
            18px
            8px !important;

        border: 0 !important;

        text-align: left !important;

        box-sizing: border-box !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name a {
        display: block !important;

        width: 100% !important;

        color: var(--yq-brown) !important;

        font-size: 13px !important;
        font-weight: 400 !important;

        line-height: 1.45 !important;

        word-break: normal !important;
        overflow-wrap: break-word !important;
    }


    /*
     * 商品名下の
     * 「1 × ¥23,900」は重複するので非表示
     */

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name
    .product-info,

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name
    .show-for-small {
        display: none !important;
    }


    /* ======================================================
       05. 金額
    ====================================================== */

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-price {
        clear: both !important;

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            15px
            2px !important;

        color: var(--yq-brown) !important;

        border-top:
            1px solid var(--yq-border-light) !important;

        border-bottom: 0 !important;

        text-align: right !important;

        box-sizing: border-box !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.product-price::before {
        content: "金額" !important;

        display: block !important;

        color: var(--yq-brown) !important;

        font-size: 13px !important;
        font-weight: 600 !important;

        line-height: 1.4;

        text-align: left !important;
    }


    /* ======================================================
       06. 数量
    ====================================================== */

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-quantity {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            15px
            2px !important;

        border-top:
            1px solid var(--yq-border-light) !important;

        border-bottom: 0 !important;

        box-sizing: border-box !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.product-quantity::before {
        content: "数量" !important;

        display: block !important;

        color: var(--yq-brown) !important;

        font-size: 13px !important;
        font-weight: 600 !important;

        line-height: 1.4;

        text-align: left !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.product-quantity
    .quantity {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;

        float: none !important;
    }


    .woocommerce-cart
    .quantity .minus,

    .woocommerce-cart
    .quantity .plus,

    .woocommerce-cart
    .quantity .qty {
        min-height: 40px !important;
    }


    /* ======================================================
       07. 小計
    ====================================================== */

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-subtotal {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            15px
            2px !important;

        color: var(--yq-brown) !important;

        border-top:
            1px solid var(--yq-border-light) !important;

        border-bottom:
            1px solid var(--yq-border-light) !important;

        text-align: right !important;

        box-sizing: border-box !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.product-subtotal::before {
        content: "小計" !important;

        display: block !important;

        color: var(--yq-brown) !important;

        font-size: 13px !important;
        font-weight: 600 !important;

        line-height: 1.4;

        text-align: left !important;
    }


    /* ======================================================
       08. カート操作ボタン
    ====================================================== */

    .woocommerce-cart
    .woocommerce-cart-form
    td.actions {
        display: grid !important;

        grid-template-columns:
            1fr
            1fr !important;

        gap: 10px !important;

        clear: both !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            20px
            0
            8px !important;

        border: 0 !important;

        box-sizing: border-box !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.actions::before,

    .woocommerce-cart
    .woocommerce-cart-form
    td.actions::after {
        content: none !important;

        display: none !important;
    }


    .woocommerce-cart
    .continue-shopping {
        width: 100% !important;

        margin: 0 !important;
    }


    .woocommerce-cart
    .continue-shopping .button,

    .woocommerce-cart
    a.button-continue-shopping,

    .woocommerce-cart
    a.wc-backward,

    .woocommerce-cart
    button[name="update_cart"],

    .woocommerce-cart
    input[name="update_cart"] {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: none !important;

        height: 46px !important;
        min-height: 46px !important;

        margin: 0 !important;

        padding:
            0
            5px !important;

        font-size: 10.5px !important;

        line-height: 1.1 !important;

        letter-spacing: 0 !important;

        white-space: nowrap !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       09. お買い物カゴの合計
    ====================================================== */

    .woocommerce-cart
    .cart-collaterals,

    .woocommerce-cart
    .cart-sidebar,

    .woocommerce-cart
    .cart_totals {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }


    .woocommerce-cart
    .cart-collaterals {
        margin-top: 28px !important;
    }


    .woocommerce-cart
    .cart_totals h2 {
        margin:
            0
            0
            12px !important;

        padding:
            0
            0
            10px !important;

        font-size: 16px !important;
    }


    .woocommerce-cart
    .cart_totals
    .shop_table {
        display: table !important;

        width: 100% !important;

        table-layout: fixed !important;
    }


    .woocommerce-cart
    .cart_totals
    .shop_table tbody {
        display: table-row-group !important;
    }


    .woocommerce-cart
    .cart_totals
    .shop_table tr {
        display: table-row !important;
    }


    .woocommerce-cart
    .cart_totals
    .shop_table th,

    .woocommerce-cart
    .cart_totals
    .shop_table td {
        display: table-cell !important;

        width: 50% !important;

        padding:
            14px
            2px !important;

        vertical-align: top !important;
    }


    .woocommerce-cart
    .cart_totals
    .shop_table th {
        text-align: left !important;
    }


    .woocommerce-cart
    .cart_totals
    .shop_table td {
        text-align: right !important;
    }


    /* ======================================================
       10. 配送
    ====================================================== */

    .woocommerce-cart
    .woocommerce-shipping-destination {
        font-size: 12px !important;

        line-height: 1.6 !important;
    }


    /* ======================================================
       11. クーポン・ポイント
    ====================================================== */

    .woocommerce-cart
    .yq-cart-discount-box {
        width: 100% !important;

        margin-top: 18px !important;

        box-sizing: border-box !important;
    }


    .woocommerce-cart
    .yq-cart-coupon-section,

    .woocommerce-cart
    .yq-cart-points-section {
        padding:
            18px
            14px !important;
    }


    /* ======================================================
       12. iPhone入力ズーム防止
    ====================================================== */

    .woocommerce-cart
    input.input-text,

    .woocommerce-cart
    input[type="number"],

    .woocommerce-cart
    select {
        font-size: 16px !important;
    }


    /* ======================================================
       13. おすすめ商品
    ====================================================== */

    .woocommerce-cart
    .yq-cart-cross-sells {
        width: 100% !important;

        margin-top: 30px !important;
    }


    .woocommerce-cart
    .yq-cart-cross-sells h2 {
        margin-bottom: 18px !important;

        font-size: 16px !important;
    }


    .woocommerce-cart
    .yq-cross-sells-viewport {
        padding:
            0
            24px !important;
    }


    .woocommerce-cart
    .yq-cross-sells-viewport.yq-no-slider-nav {
        padding: 0 !important;
    }


    .woocommerce-cart
    .yq-cross-sells-track {
        gap: 10px !important;
    }


    .woocommerce-cart
    .yq-cross-sells-track
    > * {
        flex:
            0 0
            calc((100% - 10px) / 2) !important;

        width:
            calc((100% - 10px) / 2) !important;
    }


    .woocommerce-cart
    .yq-cross-sells-prev,

    .woocommerce-cart
    .yq-cross-sells-next {
        width: 24px !important;

        height: 48px !important;

        font-size: 32px !important;
    }
}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media screen and (max-width: 390px) {

    .woocommerce-cart
    .woocommerce {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.product-thumbnail {
        width: 34% !important;

        padding-left: 36px !important;
        padding-right: 8px !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name {
        width: 66% !important;

        padding-left: 6px !important;
        padding-right: 4px !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.product-thumbnail img {
        max-width: 95px !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name a {
        font-size: 12px !important;
    }


    .woocommerce-cart
    .woocommerce-cart-form
    td.actions {
        gap: 6px !important;
    }


    .woocommerce-cart
    .continue-shopping .button,

    .woocommerce-cart
    a.button-continue-shopping,

    .woocommerce-cart
    a.wc-backward,

    .woocommerce-cart
    button[name="update_cart"] {
        font-size: 10px !important;

        padding-left: 3px !important;
        padding-right: 3px !important;
    }
}

/* ==========================================================
   CART MOBILE - 追加修正
   商品見出し / サムネイル / 商品名余白
========================================================== */

@media screen and (max-width: 549px) {

    /* ======================================================
       01. 「商品」見出しを復活
    ====================================================== */

    .woocommerce-cart
    .woocommerce-cart-form {
        position: relative !important;

        padding-top: 52px !important;
    }

    .woocommerce-cart
    .woocommerce-cart-form::before {
        content: "商品" !important;

        position: absolute !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        display: block !important;

        padding:
            0
            0
            12px !important;

        color: var(--yq-brown) !important;

        border-bottom:
            1px solid var(--yq-border-light) !important;

        font-size: 16px !important;
        font-weight: 600 !important;

        line-height: 1.4 !important;
    }


    /* ======================================================
       02. 商品上段の高さを縮める
    ====================================================== */

    .woocommerce-cart
    .woocommerce-cart-form
    .shop_table
    tr.woocommerce-cart-form__cart-item {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }


    /* ======================================================
       03. サムネイルを大きく
    ====================================================== */

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-thumbnail {
        width: 40% !important;

        padding:
            10px
            12px
            10px
            38px !important;
    }

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-thumbnail img {
        width: 100% !important;

        max-width: 135px !important;

        height: auto !important;

        margin: 0 auto !important;
    }


    /* ======================================================
       04. 商品名エリア
    ====================================================== */

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name {
        width: 60% !important;

        min-height: 0 !important;

        padding:
            12px
            6px
            12px
            6px !important;

        align-items: center !important;
    }

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name a {
        margin: 0 !important;

        font-size: 13px !important;

        line-height: 1.4 !important;
    }


    /* ======================================================
       05. 商品名の下に残る余白を削減
    ====================================================== */

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name p,

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name dl,

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name .variation {
        margin-top: 4px !important;
        margin-bottom: 0 !important;
    }


    /* ======================================================
       06. 金額行を商品上段へ近づける
    ====================================================== */

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-price {
        padding-top: 12px !important;
    }
}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media screen and (max-width: 390px) {

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-thumbnail {
        width: 39% !important;

        padding-left: 34px !important;

        padding-right: 8px !important;
    }

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-thumbnail img {
        max-width: 120px !important;
    }

    .woocommerce-cart
    .woocommerce-cart-form
    td.product-name {
        width: 61% !important;
    }
}

/* ==========================================================
   FINAL FIX - POINT INPUT FULL WIDTH
   2026-08-11
========================================================== */

.woocommerce-cart .yq-cart-points-section #wps_cart_points,
.woocommerce-cart .yq-cart-points-section input[name="wps_cart_points"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}