/* ==========================================================================
   TikTok Style Checkout — Cart Page
   ========================================================================== */

.tsc-cart {
    --tsc-pink: #161823;
    --tsc-pink-soft: #f0f0f0;
    --tsc-text: #161823;
    --tsc-text-muted: #8a8b91;
    --tsc-text-light: #b0b1b7;
    --tsc-bg: #f5f5f7;
    --tsc-card: #ffffff;
    --tsc-border: #ececef;
    --tsc-radius: 12px;
    --tsc-radius-sm: 8px;
    --tsc-pad: 16px;
    --tsc-pad-sm: 12px;
    --tsc-bottombar-h: 64px;

    background: transparent;
    color: var(--tsc-text);
    font-size: 14px;
    line-height: 1.4;
    padding-bottom: calc(var(--tsc-bottombar-h) + 12px);
    min-height: 600px;
    transition: opacity 0.15s ease;
}
.tsc-cart.is-loading { opacity: 0.5; pointer-events: none; }

.tsc-cart * { box-sizing: border-box; }
.tsc-cart ul { list-style: none; margin: 0; padding: 0; }
.tsc-cart a  { color: inherit; text-decoration: none; }

/* Header strip */
.tsc-cart__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--tsc-pad-sm) var(--tsc-pad);
    background: var(--tsc-card);
    border-bottom: 1px solid var(--tsc-border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.tsc-cart__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px 0;          /* preserve visual layout while expanding tap area */
    flex-shrink: 0;
    color: var(--tsc-text) !important;
}
.tsc-cart__header-center {
    flex: 1;
    text-align: center;
    min-width: 0;
    overflow: hidden;       /* containment for the address pill ellipsis */
}
.tsc-cart__title { font-size: 16px; font-weight: 600; color: var(--tsc-text); }
.tsc-cart__header-spacer { width: 44px; flex-shrink: 0; }

/* Address pill — now truncates cleanly */
.tsc-cart__address-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--tsc-text-muted) !important;
    margin-top: 2px;
    background: none !important;
    border: 0;
    padding: 4px 6px;
    cursor: pointer;
    font-family: inherit;
    border-radius: 4px;
    max-width: 100%;
    min-height: 28px;       /* visual height stays compact */
    /* tap target enlarged via vertical padding */
}
.tsc-cart__address-pill > span:not(.tsc-cart__address-pill-chev) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: calc(100vw - 140px);   /* hard ceiling so it can't break header */
}
.tsc-cart__address-pill-chev {
    color: var(--tsc-text-light);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

/* Login banner — full button reset baked in */
.tsc-login-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: var(--tsc-pink-soft) !important;
    color: var(--tsc-text) !important;
    padding: 12px var(--tsc-pad);
    margin-top: 8px;
    border: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    min-height: 56px;       /* tap target */
    transition: background 0.15s;
}
.tsc-login-banner:focus { outline: none; background: #e8e8e8 !important; }
.tsc-login-banner:hover {
    background: var(--tsc-pink-soft) !important;
    color: var(--tsc-text) !important;
}
.tsc-login-banner__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--tsc-pink);
    border-radius: 50%;
}
.tsc-login-banner__text { flex: 1; min-width: 0; }
.tsc-login-banner__text strong {
    display: block;
    color: var(--tsc-text);
    font-size: 13px;
    font-weight: 600;
}
.tsc-login-banner__chev {
    color: var(--tsc-pink);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

/* Empty cart */
.tsc-cart__empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--tsc-text-muted);
}
.tsc-btn-primary {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 24px;
    background: var(--global-palette-btn-bg, var(--tsc-pink)) !important;
    color: var(--global-palette-btn, #fff) !important;
    border-radius: 999px;
    font-weight: 600;
    min-height: 44px;
}

/* Cart items list */
.tsc-cart__form { margin-top: 8px; }
.tsc-cart__items { background: transparent; }
/* Desktop-only page heading (revealed in the min-width:768px block). */
.tsc-cart__page-title { display: none; }

.tsc-cart-item {
    display: flex;
    gap: var(--tsc-pad-sm);
    padding: var(--tsc-pad);
    border-bottom: 1px solid rgba(210, 210, 208, 0.5);
}
.tsc-cart-item:last-child { border-bottom: 0; }
.tsc-cart-item.is-removing { opacity: 0.5; pointer-events: none; }

/* ---------------------------------------------------------------------------
   WPC Product Bundles — bundled list panel
   Children are not rendered as their own cart rows; instead they appear
   inside this gray box, nested under the parent's title/variation block.
   Each child shows a tiny thumb + name + qty.
   --------------------------------------------------------------------------- */
.tsc-bundle-list {
    background: #f5f5f7;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 6px;
}
.tsc-bundle-list__label {
    font-size: 12px;
    font-weight: 600;
    color: #8a8b91;
    margin-bottom: 8px;
}
.tsc-bundle-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}
.tsc-bundle-list__item {
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.tsc-bundle-list .tsc-bundle-list__thumb {
    width: 48px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.tsc-bundle-list .tsc-bundle-list__thumb img,
.tsc-bundle-list .tsc-bundle-list__thumb a img {
    width: 48px !important;
    height: 72px !important;
    min-width: 48px !important;
    min-height: 72px !important;
    max-width: 48px !important;
    max-height: 72px !important;
    object-fit: cover !important;
    display: block !important;
}
.tsc-bundle-list__meta {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.tsc-bundle-list__name {
    font-size: 11px;
    color: #161823;
    line-height: 1.2;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tsc-bundle-list__qty {
    font-size: 11px;
    color: #8a8b91;
    margin-top: 2px;
}

.tsc-cart-item__thumb {
    width: 75px;
    flex-shrink: 0;
    border-radius: var(--tsc-radius-sm);
    overflow: hidden;
    background: var(--tsc-bg);
    align-self: flex-start;
}
.tsc-cart-item__thumb img {
    width: 100%;
    height: auto !important;
    object-fit: initial;
    display: block;
}

.tsc-cart-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tsc-cart-item__title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    justify-content: space-between;
}
.tsc-cart-item__title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--tsc-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Trash icon — visual size unchanged, tap area enlarged to 44x44 */
.tsc-cart-item__trash {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -8px -8px 0;   /* pull layout back to original visual position */
    color: var(--tsc-text-light) !important;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s;
}
.tsc-cart-item__trash svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Variation pill */
.tsc-cart-item__variation {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    background: var(--tsc-bg) !important;
    color: var(--tsc-text-muted) !important;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--tsc-radius-sm);
    border: 1px solid rgb(222, 222, 222);
    cursor: default;
    font-family: inherit;
    line-height: 1.4;
    min-height: 32px;          /* small but at least slightly tappable */
}
.tsc-cart-item__variation p { margin: 0; }
.tsc-cart-item__variation--clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.tsc-cart-item__variation-label { display: inline-block; }
.tsc-cart-item__variation-label p { display: inline; margin: 0; }
.tsc-cart-item__variation-chev {
    font-size: 20px;
    line-height: 1;
    color: #888888;
    margin-top: -3px;
}

.tsc-cart-item__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: auto;
    gap: 8px;
}

/* Price block */
.tsc-cart-item__price-block { display: flex; flex-direction: column; gap: 2px; }
.tsc-cart-item__price {
    color: var(--tsc-pink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}
.tsc-cart-item__price .woocommerce-Price-amount { color: var(--tsc-pink); }
.tsc-cart-item__price--sale { color: #dc2626; }
.tsc-cart-item__price-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
.tsc-cart-item__price-original {
    color: var(--tsc-text-light);
    text-decoration: line-through;
    font-weight: 400;
}
.tsc-cart-item__price-original .woocommerce-Price-amount { color: var(--tsc-text-light); }
.tsc-cart-item__discount-badge {
    display: inline-block;
    background: var(--tsc-pink-soft);
    color: #dc2626;
    font-size: 11px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 4px;
    line-height: 1.4;
}

/* Qty +/- — visual size unchanged, tap area enlarged */
.tsc-cart-item__qty .quantity {
    display: inline-flex;
    align-items: center;
    background: var(--tsc-bg);
    border-radius: var(--tsc-radius-sm);
    overflow: hidden;
    height: 36px;
}
.tsc-qty-btn {
    width: 44px;          /* visual + tap area */
    height: 36px;
    background: transparent !important;
    border: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--tsc-text) !important;
    cursor: pointer;
    padding: 0;
    user-select: none;
    transition: background 0.1s;
}
.tsc-qty-btn:active { background: rgba(0, 0, 0, 0.1) !important; }
.tsc-qty-btn:disabled { color: var(--tsc-text-light) !important; cursor: not-allowed; }
.tsc-cart-item__qty .qty {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 14px;
    color: var(--tsc-text);
    -moz-appearance: textfield;
}
.tsc-cart-item__qty .qty::-webkit-outer-spin-button,
.tsc-cart-item__qty .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tsc-cart-item__qty label { display: none; }

.tsc-cart__hidden-actions {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Voucher pill */
.tsc-vouchers-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: #e0e0e0 !important;
    border: 0;
    padding: var(--tsc-pad);
    margin-top: 8px;
    font-size: 14px;
    color: var(--tsc-text) !important;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    min-height: 56px;
}
.tsc-vouchers-trigger__icon { font-size: 18px; }
.tsc-vouchers-trigger__label { flex: 1; }
.tsc-vouchers-trigger__applied {
    color: var(--tsc-pink);
    font-size: 13px;
    font-weight: 500;
    margin-right: 4px;
}
.tsc-vouchers-trigger__chev {
    color: var(--tsc-text-light);
    font-size: 18px;
    line-height: 1;
}

/* Sticky bottom bar */
.tsc-cart__bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--tsc-bottombar-h);
    border-top: 1px solid var(--tsc-border);
    display: flex;
    align-items: center;
    padding: 0 var(--tsc-pad);
    gap: var(--tsc-pad-sm);
    z-index: 11111111111;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--tsc-bottombar-h) + env(safe-area-inset-bottom));
}
.tsc-cart__total {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.tsc-cart__total-label {
    font-size: 12px;
    color: var(--tsc-text-muted);
    line-height: 1.2;
}
.tsc-cart__total-amount-row {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.tsc-cart__total-amount {
    color: var(--tsc-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.tsc-cart__total-before {
    font-size: 12px;
    color: #8a8b91;
    text-decoration: line-through;
    font-weight: 400;
    line-height: 1.2;
}
.tsc-cart__total-before .woocommerce-Price-amount {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.tsc-checkout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--global-palette-btn-bg, var(--tsc-pink)) !important;
    color: var(--global-palette-btn, #fff) !important;
    padding: 10px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    min-width: 110px;
    min-height: 44px;
}

.woocommerce-cart .woocommerce-notices-wrapper { display: none !important; }

@media (min-width: 768px) {
    /* Full-width content — no centred panel. */
    .tsc-cart {
        min-height: auto;
        padding-bottom: 0;
        padding-left: 10%;
        padding-right: 10%;
    }
    /* The plugin header + login banner are dropped on desktop — the theme
       header and the "Shopping Cart" heading below take their place. */
    .tsc-cart__header,
    .tsc-login-banner {
        display: none;
    }
    .tsc-cart__page-title {
        display: block;
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        color: var(--tsc-text);
        padding: 24px 16px 8px;
    }
    /* Checkout bar flows at the foot of the page, not pinned. */
    .tsc-cart__bottombar {
        position: static;
        height: auto;
        padding-top: 2em;
    }
}

/* Mobile: hide the Kadence theme header/footer so the cart stays app-like
   (the cart renders inside the theme now, not on the full-screen canvas). */
@media (max-width: 767px) {
    body.woocommerce-cart #masthead,
    body.woocommerce-cart #colophon {
        display: none !important;
    }
    /* The checkout bar is fixed on mobile — keep it solid so page content
       doesn't show through it. */
    .tsc-cart__bottombar {
        background: #ffffff;
    }
}
/* Neutralize theme button hover on the vouchers trigger. */
.tsc-vouchers-trigger:hover,
.tsc-vouchers-trigger:focus {
    background: #e0e0e0 !important;
    color: var(--tsc-text, #161823) !important;
}

/* ============================================================
   Free shipping progress bar (above cart items)
   ============================================================ */
.tsc-cart__freeship {
    background: var(--tsc-card, #ffffff);
    padding: 12px 16px;
    margin: 12px 16px 0;
    border: 1px solid #dddddd;
    border-radius: 10px;
}
.tsc-cart__freeship-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--tsc-text, #161823);
    text-align: center;
    margin-bottom: 8px;
    line-height: 1.3;
}
.tsc-cart__freeship-text .woocommerce-Price-amount {
    color: inherit;
    font-weight: inherit;
}
.tsc-cart__freeship-bar {
    height: 6px;
    background: #ececef;
    border-radius: 999px;
    overflow: hidden;
}
.tsc-cart__freeship-fill {
    display: block;
    height: 100%;
    background: #161823;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.tsc-cart__freeship.is-qualified .tsc-cart__freeship-fill {
    width: 100% !important;
}

/* ============================================================
   Cart upsell carousel (below cart items)
   ============================================================ */
.tsc-cart__upsell {
    margin: 16px;
}
.tsc-cart__upsell-header {
    margin-bottom: 10px;
    text-align: center;
}
.tsc-cart__upsell-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tsc-text, #161823);
}

.tsc-cart__upsell-carousel {
    position: relative;
}
.tsc-cart__upsell-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}
.tsc-cart__upsell-track::-webkit-scrollbar { display: none; }

/* Card matches the cart-item visual: white surface, image left, content right.
   Width is computed so two cards fit per row on mobile, three on desktop. */
.tsc-cart__upsell-card {
    flex: 0 0 calc((100% - 12px) / 2);
    scroll-snap-align: start;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
    background: var(--tsc-card, #ffffff);
    border: 1.5px dashed #dddddd;
    border-radius: 12px;
    box-sizing: border-box;
}
/* Thumb takes a fixed 30% of the card width on every viewport. The image
   renders at its natural aspect ratio — no cropping, no forced box. */
.tsc-cart__upsell-thumb {
    flex: 0 0 30%;
    width: 30%;
    align-self: flex-start;
    border-radius: 8px;
    overflow: hidden;
    background: var(--tsc-bg, #f5f5f7);
    display: block;
}
.tsc-cart__upsell-thumb img {
    width: 100%;
    height: auto !important;
    object-fit: initial;
    display: block;
}
.tsc-cart__upsell-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tsc-cart__upsell-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--tsc-text, #161823);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Price block — same shape as the cart-item price block: sale price big,
   strikethrough + discount % inline on the line below. */
.tsc-cart__upsell-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.tsc-cart__upsell-sale {
    font-size: 13px;
    font-weight: 700;
    color: var(--tsc-text, #161823);
    line-height: 1.2;
}
.tsc-cart__upsell-sale .woocommerce-Price-amount {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.tsc-cart__upsell-price-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.2;
}
.tsc-cart__upsell-regular {
    font-size: 11px;
    color: #8a8b91;
    text-decoration: line-through;
}
.tsc-cart__upsell-regular .woocommerce-Price-amount {
    color: inherit;
    font-size: inherit;
    font-weight: 400;
}
.tsc-cart__upsell-discount {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
}

/* Variation pill — compact, matches the cart-item variation chip. The
   <select> is restyled with appearance:none so it shows just the value
   ("M") with a small chevron, instead of a full-width form input. */
.tsc-cart__upsell-variation {
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    padding: 3px 20px 3px 8px;
    background: var(--tsc-bg, #f5f5f7);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23161823' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
    border: 1px solid rgb(222, 222, 222);
    border-radius: 8px;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.4;
    color: var(--tsc-text, #161823);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    min-height: 24px;
}
.tsc-cart__upsell-add {
    /* margin-top: auto pushes the button to the bottom of the flex column
       so every card's CTA sits on the same baseline, regardless of how much
       content (variation pill, sale meta) sits above. */
    margin-top: auto;
    padding: 8px 12px;
    background: #000000 !important;
    color: #ffffff !important;
    border: 0;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    align-self: stretch;
}
.tsc-cart__upsell-add:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Mobile: tighter type so "Grab this offer" fits on one line in the narrow
   2-card-per-row layout. */
@media (max-width: 767px) {
    .tsc-cart__upsell-add {
        font-size: 10px;
        padding: 8px 10px;
    }
}

/* Carousel arrows — hidden by default; .has-overflow class on the carousel
   reveals them. JS toggles the class and disables individual arrows when
   the track is scrolled to either edge. */
.tsc-cart__upsell-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff !important;
    color: #161823 !important;
    border: 1px solid #dddddd;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    z-index: 2;
    padding: 0;
}
.tsc-cart__upsell-nav--prev { left: -10px; }
.tsc-cart__upsell-nav--next { right: -10px; }
.tsc-cart__upsell-nav[disabled] { opacity: 0.35; cursor: default; }
.tsc-cart__upsell-carousel.has-overflow .tsc-cart__upsell-nav { display: inline-flex; }

/* Desktop / tablet: 3 cards per row. */
@media (min-width: 768px) {
    .tsc-cart__upsell-card {
        flex: 0 0 calc((100% - 24px) / 3);
    }
}

/* Keep the upsell thumb full-height inside its 2:3 box. Scoped narrowly so it
   doesn't leak into other product images (e.g. the bundled-products mini list). */
.tsc-cart__upsell-card img {
    height: 100% !important;
}