@charset "utf-8";
/* ==========================================================================
   cart.css  -  Shopping Cart     Design: Cart-PC / Cart-SP
   Shared: c-page-head, c-steps, c-check, c-badge, c-empty, c-popular (module.css)
   ========================================================================== */
.cart {
    padding-bottom: .56rem;
}
.cart_layout {
    display: flex;
    flex-direction: column;
    gap: .24rem;
    padding-top: .12rem;
}

/* ---------- top bar ---------- */
.cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .12rem;
    padding: .04rem 0;
    border-bottom: 2px solid var(--c-ink);
}
.cart-bar_all {
    min-height: .44rem;
    font-size: .15rem;
    font-weight: 600;
}
.cart-bar_delete {
    height: .4rem;
    padding: 0 .14rem;
    border: 1px solid var(--c-line);
    border-radius: .06rem;
    background: var(--c-white);
    font-size: .13rem;
    font-weight: 500;
    transition: border-color var(--dur);
}
.cart-bar_delete:hover:not(:disabled) { border-color: var(--c-ink); }
.cart-bar_delete:disabled {
    opacity: .4;
    cursor: default;
}

/* ---------- item row ----------
   SP:  [check] [img] [info .......... ] [x]
                      [qty]   [  price  ]
   PC:  [check] [img] [info] [qty] [price] [x]                          */
.cart-item {
    display: grid;
    grid-template-columns: .24rem .8rem auto minmax(0, 1fr) .28rem;
    grid-template-areas:
        "check img info  info  remove"
        "check img qty   price price";
    column-gap: .12rem;
    row-gap: .1rem;
    align-items: start;
    padding: .16rem 0;
    border-bottom: 1px solid var(--c-line);
    transition: opacity .3s var(--ease);
}
.cart-item.is-removing {
    opacity: 0;
}
.cart-item_check {
    grid-area: check;
    min-height: .3rem;
}
.cart-item_img {
    grid-area: img;
    display: block;
    width: .8rem;
    height: .8rem;
    overflow: hidden;
    border-radius: .08rem;
    background: var(--c-canvas);
}
.cart-item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart-item_info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: .02rem;
    min-width: 0;
}
.cart-item_brand {
    font-size: .11rem;
    line-height: .16rem;
    font-weight: 600;
    color: var(--c-gold);
}
.cart-item_name {
    font-size: .14rem;
    line-height: .2rem;
    font-weight: 600;
}
.cart-item_name:hover { text-decoration: underline; }
.cart-item_option {
    font-size: .12rem;
    line-height: .18rem;
    color: var(--c-ink-muted);
}
.cart-item_oos {
    margin-top: .04rem;
}
.cart-item_oos .c-badge--oos { background: #7A7470; }
.cart-item_price {
    grid-area: price;
    align-self: center;
    text-align: right;
}
.cart-item_price s {
    display: block;
    font-size: .11rem;
    line-height: .16rem;
    color: var(--c-ink-muted);
}
.cart-item_price p {
    font-size: .17rem;
    line-height: .22rem;
    font-weight: 700;
    color: var(--c-coral);
    font-variant-numeric: tabular-nums;
}
.cart-item_unit {
    font-size: .11rem;
    font-weight: 500;
    color: var(--c-ink);
}
.cart-item_remove {
    grid-area: remove;
    display: grid;
    place-items: center;
    width: .32rem;
    height: .32rem;
    margin: -.04rem -.04rem 0 0;
    color: var(--c-ink-muted);
    transition: color var(--dur);
}
.cart-item_remove:hover { color: var(--c-ink); }
.cart-item_remove .icon {
    width: .16rem;
    height: .16rem;
}
/* out of stock row */
.cart-item.is-oos .cart-item_img,
.cart-item.is-oos .cart-item_brand,
.cart-item.is-oos .cart-item_name,
.cart-item.is-oos .cart-item_option,
.cart-item.is-oos .cart-qty,
.cart-item.is-oos .cart-item_price {
    opacity: .5;
}
.cart-item.is-oos .c-check_box { background: var(--c-canvas); }

/* quantity stepper */
.cart-qty {
    grid-area: qty;
    display: flex;
    align-items: center;
    justify-self: start;
    border: 1px solid var(--c-line);
    border-radius: .06rem;
}
.cart-qty_btn {
    display: grid;
    place-items: center;
    width: .36rem;
    height: .36rem;
}
.cart-qty_btn .icon {
    width: .16rem;
    height: .16rem;
}
.cart-qty_btn:disabled {
    opacity: .3;
    cursor: default;
}
.cart-qty_num {
    width: .32rem;
    font-size: .15rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- summary ---------- */
.cart-sum {
    display: flex;
    flex-direction: column;
    gap: .14rem;
    padding: .16rem;
    border: 1px solid var(--c-line);
    border-radius: .12rem;
    background: var(--c-white);
}
.cart-sum_title {
    font-size: .18rem;
    line-height: .26rem;
    font-weight: 700;
    text-transform: uppercase;
}
.cart-points {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .14rem .16rem;
    border-radius: .08rem;
    background: var(--c-warm);
    font-size: .13rem;
    line-height: .2rem;
}
.cart-points_head {
    display: flex;
    align-items: center;
    gap: .08rem;
    font-size: .14rem;
    font-weight: 700;
}
.cart-points_head .icon {
    width: .18rem;
    height: .18rem;
    color: var(--c-gold);
}
.cart-points strong { font-weight: 700; }
.cart-points_bar {
    height: 8px;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--c-line);
}
.cart-points_bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--c-sage-dark);
    transition: width .5s var(--ease);
}
.cart-points_scale {
    display: flex;
    justify-content: space-between;
    font-size: .12rem;
    line-height: .16rem;
    color: var(--c-ink-muted);
}
.cart-points_have {
    padding-top: .1rem;
    border-top: 1px solid var(--c-line);
}
.cart-points_note {
    font-size: .12rem;
    line-height: .18rem;
    color: var(--c-ink-muted);
}
.cart-points_note a {
    color: var(--c-ink);
    text-decoration: underline;
    text-underline-offset: .03rem;
}
.cart-sum_rows {
    display: flex;
    flex-direction: column;
    gap: .08rem;
    padding-top: .14rem;
    border-top: 1px solid var(--c-line);
}
.cart-sum_rows > div {
    display: flex;
    justify-content: space-between;
    gap: .12rem;
    font-size: .14rem;
    line-height: .22rem;
}
.cart-sum_rows dt { color: var(--c-ink-muted); }
.cart-sum_rows dd {
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cart-sum_rows .cart-sum_minus { color: #B3403A; }
.cart-sum_rows .cart-sum_muted {
    font-weight: 500;
    color: var(--c-ink-muted);
}
.cart-sum_rows .cart-sum_small { font-size: .13rem; }
.cart-sum_rows .cart-sum_small dd { font-weight: 600; }
.cart-sum_total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: .14rem;
    border-top: 2px solid var(--c-ink);
    font-size: .16rem;
    font-weight: 700;
}
.cart-sum_total strong {
    font-size: .24rem;
    line-height: .32rem;
    font-variant-numeric: tabular-nums;
}
.cart-sum_total small {
    font-size: .13rem;
    font-weight: 500;
}
.cart-sum_go {
    display: flex;
    align-items: center;
    justify-content: center;
    height: .52rem;
    border-radius: .06rem;
    background: var(--c-ink);
    font-size: .16rem;
    font-weight: 600;
    color: var(--c-white);
    transition: background-color var(--dur), opacity var(--dur);
}
.cart-sum_go:hover { background: #3A3531; }
.cart-sum_go.is-disabled {
    opacity: .35;
    pointer-events: none;
}
.cart-sum_back {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: .44rem;
    font-size: .14rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--c-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: .05rem;
}
.cart-sum_note {
    font-size: .12rem;
    line-height: .18rem;
    text-align: center;
    color: var(--c-ink-muted);
}

.cart-empty {
    margin-top: .24rem;
}
.cart-empty .c-empty_icon img { width: .32rem; }
.cart-empty .c-empty_actions { align-self: center; }

/* ==========================================================================
   Tablet  768px -
   ========================================================================== */
@media (min-width: 768px) {
    .cart { padding-bottom: .8rem; }
    .cart_layout { padding-top: .4rem; }
    .cart-item {
        grid-template-columns: .32rem 1.04rem minmax(0, 1fr) auto 1.3rem .44rem;
        grid-template-areas: "check img info qty price remove";
        column-gap: .16rem;
        align-items: center;
        padding: .2rem 0;
    }
    .cart-item_check { min-height: 0; }
    .cart-item_img {
        width: 1.04rem;
        height: 1.04rem;
    }
    .cart-item_brand { font-size: .12rem; line-height: .18rem; }
    .cart-item_name { font-size: .16rem; line-height: .22rem; }
    .cart-item_option { font-size: .13rem; }
    .cart-item_price p { font-size: .18rem; }
    .cart-item_price s { font-size: .12rem; }
    .cart-item_remove {
        width: .44rem;
        height: .44rem;
        margin: 0;
    }
    .cart-qty_btn {
        width: .4rem;
        height: .4rem;
    }
    .cart-sum { padding: .24rem; }
    .cart-sum_title { font-size: .2rem; line-height: .28rem; }
    .cart-sum_rows > div { font-size: .15rem; }
    .cart-sum_rows .cart-sum_small { font-size: .14rem; }
    .cart-empty { margin-top: .4rem; }
}

/* ==========================================================================
   PC  1280px -  items 8 cols / summary 4 cols (sticky)
   ========================================================================== */
@media (min-width: 1280px) {
    .cart_layout {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: .24rem;
        align-items: start;
    }
    .cart_items { grid-column: span 8; }
    .cart-sum {
        grid-column: span 4;
        position: sticky;
        top: calc(var(--header-h) + .24rem);
    }
    .cart-item {
        grid-template-columns: .32rem 1.04rem minmax(0, 1fr) 1.5rem 1.4rem .44rem;
    }
}