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

.tsc-checkout {
    --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: var(--tsc-bg);
    color: var(--tsc-text);
    font-size: 14px;
    line-height: 1.4;
    min-height: 100vh;
    padding-bottom: calc(var(--tsc-bottombar-h) + 12px);
}
.tsc-checkout.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.15s ease; }
.tsc-checkout * { box-sizing: border-box; }
.tsc-checkout a { color: inherit; text-decoration: none; }

/* Two-column wrapper.
   Mobile: the .tsc-checkout__main / __summary wrappers are display:contents,
   so every section becomes a direct flex child of .tsc-checkout__cols and the
   `order` values below recreate the original single-column sequence.
   Desktop: the wrappers become real left / right columns (see the
   min-width:768px block). */
.tsc-checkout__cols {
    display: flex;
    flex-direction: column;
}
.tsc-checkout__main,
.tsc-checkout__summary {
    display: contents;
}
.tsc-login-banner { order: 1; }
.tsc-checkout__address-card { order: 2; }
.tsc-checkout__section-title { order: 3; }
.tsc-checkout__items { order: 4; }
.tsc-checkout__select-row[data-action="open-shipping"] { order: 5; }
.tsc-checkout__select-row[data-action="open-payment"] { order: 6; }
.tsc-checkout__payment-details { order: 7; }
/* Upsell sits between Payment and Discount Coupon. Same order as
   payment-details — DOM order then places it after payment-details. */
.tsc-checkout .tsc-cart__upsell { order: 7; }
.tsc-checkout__coupon-row { order: 8; }
/* Wallet balances come after the coupon. An explicit order is required: on
   mobile .tsc-checkout__cols is a flex column and every sibling is ordered, so
   a row without one defaults to 0 and jumps above the address. */
.tsc-credit-row { order: 9; }
.tsc-points-row { order: 10; }
.tsc-points-earn-note { order: 11; }
.tsc-checkout__notes-row { order: 12; }
/* Summary column continues from 13 — sharing numbers with the rows above would
   interleave the two columns, because equal orders fall back to DOM order. */
.tsc-checkout__totals { order: 13; }
.tsc-checkout__terms { order: 14; }
.tsc-checkout__bottombar { order: 15; }

/* On the checkout page show 2 upsell cards per row at every breakpoint
   (cart page keeps its own 2 mobile / 3 desktop layout). */
.tsc-checkout .tsc-cart__upsell-card {
    flex: 0 0 calc((100% - 12px) / 2);
}
.tsc-checkout__totals { order: 10; }
.tsc-checkout__terms { order: 11; }
.tsc-checkout__bottombar { order: 12; }

/* Header */
.tsc-checkout__header {
    display: flex;
    align-items: center;
    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-checkout__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--tsc-text) !important;
}
.tsc-checkout__title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; }
.tsc-checkout__header-spacer { width: 32px; flex-shrink: 0; }
/* Logo + cart link are desktop-only (revealed in the min-width:768px block). */
.tsc-checkout__logo,
.tsc-checkout__cart-link { display: none; }

/* Logout button (shown to logged-in users in the header) */
.tsc-checkout__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -6px -8px 0;  /* expand tap target without shifting visual layout */
    flex-shrink: 0;
    color: var(--tsc-text-muted) !important;
    background: transparent !important;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}
.tsc-checkout__logout:focus { outline: none; }

/* Login banner */
.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;
    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; }

/* Address card */
.tsc-checkout__address-card {
    display: flex; align-items: flex-start; gap: 12px; width: 100%;
    padding: var(--tsc-pad); background: var(--tsc-card) !important;
    border: 0; border-bottom: 1px solid var(--tsc-border);
    cursor: pointer; font-family: inherit; text-align: left; margin-top: 8px;
}
.tsc-checkout__address-icon {
    flex-shrink: 0; width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tsc-pink); background: var(--tsc-pink-soft); border-radius: 50%; margin-top: 2px;
}
.tsc-checkout__address-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tsc-checkout__address-name { font-size: 15px; font-weight: 600; color: var(--tsc-text); }
.tsc-checkout__address-phone { font-size: 13px; color: var(--tsc-text-muted); }
.tsc-checkout__address-oneline { font-size: 13px; color: var(--tsc-text); line-height: 1.5; }
.tsc-checkout__address-empty { font-size: 15px; color: var(--tsc-text-muted); line-height: 32px; }
.tsc-checkout__address-chev { flex-shrink: 0; color: var(--tsc-text-light); font-size: 22px; line-height: 1; align-self: center; }

/* "Order Summary" section title above the product list */
.tsc-checkout__section-title {
    margin-top: 8px;
    padding: 12px 16px 0;
    background: var(--tsc-card);
    font-size: 14px;
    font-weight: 700;
    color: var(--tsc-text);
}

/* Items */
.tsc-checkout__items { background: var(--tsc-card); margin-top: 8px; }
.tsc-checkout__section-title + .tsc-checkout__items { margin-top: 0; }
.tsc-checkout-item {
    display: flex; gap: var(--tsc-pad-sm); padding: var(--tsc-pad);
    border-bottom: 1px solid var(--tsc-border);
}
.tsc-checkout-item:last-child { border-bottom: 0; }
.tsc-checkout-item__thumb {
    width: 75px; flex-shrink: 0;
    border-radius: var(--tsc-radius-sm); overflow: hidden; background: var(--tsc-bg);
    align-self: flex-start;
}
.tsc-checkout-item__thumb img { width: 100%; height: auto !important; object-fit: initial; display: block; }
.tsc-checkout-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tsc-checkout-item__title {
    font-size: 14px; font-weight: 500; color: var(--tsc-text); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tsc-checkout-item__variation {
    display: inline-flex; align-items: center; align-self: flex-start;
    background: var(--tsc-bg); color: var(--tsc-text-muted);
    font-size: 12px; padding: 3px 10px; border-radius: var(--tsc-radius-sm); line-height: 1.4;
    border: 1px solid rgb(222, 222, 222);
}
.tsc-checkout-item__variation p { margin: 0; display: inline; }
.tsc-checkout-item__bottom {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 8px; margin-top: auto;
}
.tsc-checkout-item__price { display: flex; align-items: center; gap: 6px; }
.tsc-checkout-item__price-sale,
.tsc-checkout-item__price .woocommerce-Price-amount { color: var(--tsc-pink); font-size: 15px; font-weight: 600; }
.tsc-checkout-item__price-sale { color: #dc2626; }
.tsc-checkout-item__price-original { color: var(--tsc-text-light); text-decoration: line-through; font-size: 12px; font-weight: 400; }
.tsc-checkout-item__price-original .woocommerce-Price-amount { color: var(--tsc-text-light); font-size: 12px; font-weight: 400; }
.tsc-checkout-item__qty { color: var(--tsc-text-muted); font-size: 13px; }

/* Optional inline qty +/- controls (admin opt-in). */
.tsc-checkout-item__qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--tsc-border, #ececef);
    padding: 2px 4px;
    background: var(--tsc-card, #ffffff);
}
.tsc-checkout-item__qty-controls .tsc-qty-btn {
    width: 24px;
    height: 24px;
    line-height: 1;
    border: 0;
    background: transparent;
    color: var(--tsc-text);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
}
.tsc-checkout-item__qty-controls .tsc-qty-btn:disabled { opacity: 0.4; cursor: default; }
.tsc-checkout-item__qty-input {
    width: 28px;
    text-align: center;
    font-size: 13px;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    color: var(--tsc-text);
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
    padding: 0;
}
.tsc-checkout-item__qty-input:focus {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
.tsc-checkout-item__qty-input::-webkit-outer-spin-button,
.tsc-checkout-item__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Inline title + remove (trash) row inside the order summary item. */
.tsc-checkout-item__title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    justify-content: space-between;
}
.tsc-checkout-item__trash {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--tsc-text-light) !important;
    cursor: pointer;
    border-radius: 50%;
}
.tsc-checkout-item__trash svg { width: 16px; height: 16px; display: block; }

/* Shipping + Payment rows */
.tsc-checkout__select-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: var(--tsc-card) !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;
}
.tsc-checkout__select-row + .tsc-checkout__select-row { margin-top: 0; border-top: 1px solid var(--tsc-border); }
.tsc-checkout__select-icon {
    flex-shrink: 0; width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tsc-pink); background: var(--tsc-pink-soft); border-radius: 50%;
}
.tsc-checkout__select-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tsc-checkout__select-label { font-size: 14px; font-weight: 700; color: #161823; line-height: 1.2; }
.tsc-checkout__select-value {
    color: var(--tsc-text); font-weight: 500; line-height: 1.4;
    display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.tsc-checkout__select-value--empty { color: var(--tsc-text-muted); font-weight: 400; }
.tsc-checkout__select-cost { color: var(--tsc-text-muted); font-weight: 400; font-size: 13px; }
.tsc-checkout__select-cost.is-free { color: #161823; font-weight: 600; }
.tsc-checkout__select-chev { color: var(--tsc-text-light); font-size: 22px; line-height: 1; flex-shrink: 0; }

/* ==========================================================================
   Wave A — Payment details (CHIP and other gateways' visible fields)
   ========================================================================== */

.tsc-checkout__payment-details {
    background: var(--tsc-card);
    padding: 16px var(--tsc-pad);
    border-top: 1px solid var(--tsc-border);
}

/* Hide the payment description repeated by gateways (we already show the
   gateway title in the Payment row). */
.tsc-checkout__payment-details > .payment_box > p:first-child,
.tsc-checkout__payment-details > p:first-child {
    color: var(--tsc-text-muted);
    font-size: 13px;
    margin: 0 0 12px;
}

.tsc-checkout__payment-details .form-row {
    display: flex;
    flex-direction: column;
    margin: 0 0 14px;
    padding: 0;
}
.tsc-checkout__payment-details .form-row:last-child {
    margin-bottom: 0;
}
.tsc-checkout__payment-details .form-row label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--tsc-text);
    margin-bottom: 6px;
}
.tsc-checkout__payment-details .form-row .required {
    color: var(--tsc-pink);
    text-decoration: none;
    margin-left: 2px;
}
.tsc-checkout__payment-details .form-row .optional {
    color: var(--tsc-text-light);
    font-weight: 400;
}

.tsc-checkout__payment-details .input-text,
.tsc-checkout__payment-details input[type="text"],
.tsc-checkout__payment-details input[type="tel"],
.tsc-checkout__payment-details input[type="number"],
.tsc-checkout__payment-details input[type="email"] {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    background: var(--tsc-bg);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--tsc-text);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s, background 0.15s;
}
.tsc-checkout__payment-details .input-text:focus,
.tsc-checkout__payment-details input[type="text"]:focus,
.tsc-checkout__payment-details input[type="tel"]:focus,
.tsc-checkout__payment-details input[type="number"]:focus,
.tsc-checkout__payment-details input[type="email"]:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--tsc-pink);
}
.tsc-checkout__payment-details .input-text::placeholder {
    color: var(--tsc-text-light);
}

.tsc-checkout__payment-details select {
    width: 100%;
    height: 44px;
    padding: 0 36px 0 12px;
    background-color: var(--tsc-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%238a8b91' d='M6 8L1 3h10z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--tsc-text);
    -webkit-appearance: none;
    appearance: none;
}

/* WC credit card form — two columns for expiry + cvc */
.tsc-checkout__payment-details .wc-credit-card-form { margin: 0; }
.tsc-checkout__payment-details .wc-credit-card-form .form-row-first {
    width: 60%; float: left; padding-right: 8px; box-sizing: border-box;
}
.tsc-checkout__payment-details .wc-credit-card-form .form-row-last {
    width: 40%; float: left; padding-left: 8px; box-sizing: border-box;
}
.tsc-checkout__payment-details .wc-credit-card-form::after { content: ''; display: table; clear: both; }

/* Save card / tokenization */
.tsc-checkout__payment-details .woocommerce-SavedPaymentMethods-saveNew {
    display: flex; align-items: center; margin-top: 8px;
}
.tsc-checkout__payment-details .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
    margin-right: 8px; width: 18px; height: 18px;
}
.tsc-checkout__payment-details .woocommerce-SavedPaymentMethods-saveNew label {
    margin: 0; cursor: pointer; font-size: 13px; font-weight: 500;
}
.tsc-checkout__payment-details .woocommerce-SavedPaymentMethods {
    list-style: none; margin: 0 0 12px; padding: 0;
}
.tsc-checkout__payment-details .woocommerce-SavedPaymentMethods li {
    margin: 6px 0; display: flex; align-items: center; gap: 8px;
}

/* CHIP's bank logo dropdown — adjust positioning to fit our smaller field */
.tsc-checkout__payment-details .chip-selected-bank-icon { left: 8px !important; }
.tsc-checkout__payment-details #chip_fpx_bank_field .select2-selection--single,
.tsc-checkout__payment-details #chip_fpx_b2b1_bank_field .select2-selection--single,
.tsc-checkout__payment-details #chip_razer_ewallet_field .select2-selection--single {
    min-height: 44px !important;
    border-radius: 8px !important;
    border-color: transparent !important;
    background: var(--tsc-bg) !important;
}

/* Coupon row */
.tsc-checkout__coupon-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: var(--tsc-card) !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;
    border-bottom: 1px solid var(--tsc-border);
}
.tsc-checkout__coupon-icon { font-size: 18px; }
.tsc-checkout__coupon-label { flex: 1; }
.tsc-checkout__coupon-applied { color: var(--tsc-pink); font-size: 13px; font-weight: 500; }
.tsc-checkout__coupon-chev { color: var(--tsc-text-light); font-size: 18px; line-height: 1; }

/* Notes row */
.tsc-checkout__notes-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: #ebebeb !important; border: 0; padding: var(--tsc-pad);
    font-size: 14px; color: var(--tsc-text) !important; cursor: pointer; text-align: left; font-family: inherit;
}
.tsc-checkout__notes-icon {
    flex-shrink: 0; width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tsc-pink); background: var(--tsc-pink-soft); border-radius: 50%;
}
.tsc-checkout__notes-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tsc-checkout__notes-label { font-size: 14px; font-weight: 700; color: #161823; line-height: 1.2; }
.tsc-checkout__notes-preview {
    color: var(--tsc-text); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
.tsc-checkout__notes-empty { color: var(--tsc-text-muted); font-weight: 400; }
.tsc-checkout__notes-chev { color: var(--tsc-text-light); font-size: 22px; line-height: 1; flex-shrink: 0; }

/* Totals */
.tsc-checkout__totals { background: var(--tsc-card); padding: var(--tsc-pad); margin-top: 8px; }
.tsc-checkout-total-row {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 4px 0; font-size: 14px;
}
.tsc-checkout-total-row__label { color: var(--tsc-text-muted); }
.tsc-checkout-total-row__value { color: var(--tsc-text); font-weight: 500; }
.tsc-checkout-total-row__value .woocommerce-Price-amount { color: var(--tsc-text); }
.tsc-checkout-total-row--discount .tsc-checkout-total-row__value,
.tsc-checkout-total-row--discount .tsc-checkout-total-row__value .woocommerce-Price-amount { color: #dc2626; }
.tsc-checkout-total-row--grand { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--tsc-border); }
.tsc-checkout-total-row--grand .tsc-checkout-total-row__label,
.tsc-checkout-total-row--grand .tsc-checkout-total-row__value { font-size: 16px; font-weight: 700; color: var(--tsc-text); }
.tsc-checkout-total-row--grand .tsc-checkout-total-row__value .woocommerce-Price-amount { color: var(--tsc-text); font-weight: 700; font-size: 16px; }

/* Terms & conditions */
.tsc-checkout__terms {
    background: var(--tsc-card);
    padding: var(--tsc-pad);
    margin-top: 8px;
}
.tsc-checkout__terms-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.tsc-checkout__terms-input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--tsc-pink);
    cursor: pointer;
}
.tsc-checkout__terms-text {
    flex: 1;
    font-size: 13px;
    color: var(--tsc-text);
    line-height: 1.5;
}
.tsc-checkout__terms-text a {
    color: var(--tsc-pink);
    text-decoration: underline;
}
.tsc-form-group__required {
    color: var(--tsc-pink);
    margin-left: 2px;
}
.tsc-checkout__terms-error {
    color: var(--tsc-pink);
    font-size: 12px;
    margin-top: 6px;
    display: none;
}
.tsc-checkout__terms.has-error .tsc-checkout__terms-error { display: block; }
.tsc-checkout__terms.has-error .tsc-checkout__terms-input { outline: 2px solid var(--tsc-pink); outline-offset: 2px; }

/* Hidden WC form — needed for submit but invisible */
.tsc-checkout__hidden-form {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Sticky bottom bar */
.tsc-checkout__bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--tsc-bottombar-h);
    background: var(--tsc-card);
    border-top: 1px solid var(--tsc-border);
    display: flex;
    align-items: center;
    padding: 0 var(--tsc-pad);
    gap: var(--tsc-pad-sm);
    z-index: 20;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--tsc-bottombar-h) + env(safe-area-inset-bottom));
}
.tsc-checkout__bottombar-total {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.tsc-checkout__bottombar-label {
    font-size: 12px;
    color: var(--tsc-text-muted);
    line-height: 1.2;
}
.tsc-checkout__bottombar-amount-row {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.tsc-checkout__bottombar-amount {
    color: var(--tsc-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.tsc-checkout__bottombar-amount .woocommerce-Price-amount {
    color: var(--tsc-text);
    font-size: 18px;
    font-weight: 700;
}
.tsc-checkout__bottombar-before {
    font-size: 12px;
    color: #8a8b91;
    text-decoration: line-through;
    font-weight: 400;
    line-height: 1.2;
}
.tsc-checkout__bottombar-before .woocommerce-Price-amount {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.tsc-checkout__bottombar-saving {
    font-size: 12px;
    color: #dc2626;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 2px;
}
.tsc-checkout__bottombar-saving .woocommerce-Price-amount {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.tsc-checkout__place-order {
    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 28px;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    height: 44px;
    min-width: 130px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.tsc-checkout__place-order:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

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

@media (min-width: 768px) {
    /* Full-width content — no centred panel. */
    .tsc-checkout {
        min-height: auto;
        padding-bottom: 0;
    }
    /* Header: site logo (left) + cart icon (right) replace the back arrow. */
    .tsc-checkout__back,
    .tsc-checkout__header-spacer {
        display: none;
    }
    .tsc-checkout__logo {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
    .tsc-checkout__logo img,
    .tsc-checkout__logo .custom-logo {
        /* Pinned: themes size .custom-logo themselves, and Hello Commerce sets
           its own height on it — without !important the header logo springs
           back to whatever the theme wants. */
        max-height: 20px !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }
    .tsc-checkout__cart-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        color: var(--tsc-text);
    }
    /* Shopify-style split: checkout controls left, order summary right.
       Full window height, on a white background. */
    .tsc-checkout__cols {
        flex-direction: row;
        min-height: 100vh;
        background: #ffffff;
    }
    .tsc-checkout__main,
    .tsc-checkout__summary {
        display: block;
    }
    .tsc-checkout__main {
        flex: 1 1 56%;
        min-width: 0;
    }
    .tsc-checkout__summary {
        flex: 1 1 44%;
        min-width: 0;
        min-height: 100vh;
        border-left: 1px solid var(--tsc-border);
    }
    /* Place-order bar sits at the foot of the left column, not pinned. */
    .tsc-checkout__bottombar {
        position: static;
        height: auto;
        padding: 16px;
    }
    .tsc-checkout__bottombar-total {
        display: none;
    }
    .tsc-checkout__place-order {
        flex: 1;
    }
}

/* Notes modal — reuses .tsc-modal base */
#tsc-notes-modal .tsc-notes-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid var(--tsc-border, #ececef);
    border-radius: 8px;
    font-size: 14px;
    color: var(--tsc-text, #161823);
    background: var(--tsc-bg, #f5f5f7);
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
    -webkit-appearance: none;
    appearance: none;
}
#tsc-notes-modal .tsc-notes-textarea:focus {
    outline: none;
    border-color: var(--tsc-pink, #161823);
    background: #fff;
}
#tsc-notes-modal .tsc-notes-hint {
    font-size: 12px;
    color: var(--tsc-text-muted, #8a8b91);
    margin-top: 6px;
}

/* ==========================================================================
   Confirm dialog (used for logout confirmation, etc.)
   ========================================================================== */
.tsc-confirm {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.tsc-confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.tsc-confirm__box {
    position: relative;
    background: var(--tsc-card, #ffffff);
    border-radius: 16px;
    max-width: 320px;
    width: 100%;
    padding: 24px 20px 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    text-align: center;
}
.tsc-confirm__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--tsc-text, #161823);
    margin-bottom: 6px;
}
.tsc-confirm__msg {
    font-size: 14px;
    color: var(--tsc-text-muted, #8a8b91);
    line-height: 1.5;
    margin-bottom: 18px;
}
.tsc-confirm__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.tsc-confirm__btn {
    flex: 1;
    height: 44px;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.tsc-confirm__btn--cancel {
    background: var(--tsc-bg, #f5f5f7);
    color: var(--tsc-text, #161823);
}
.tsc-confirm__btn--confirm {
    background: var(--tsc-pink, #161823);
    color: #ffffff;
}

/* ==========================================================================
   Order received (thank you) page
   ========================================================================== */
.tsc-thankyou {
    --tsc-pink: #161823;
    --tsc-pink-soft: #f0f0f0;
    --tsc-pink-tint: #f7f7f7;
    --tsc-text: #161823;
    --tsc-text-muted: #8a8b91;
    --tsc-text-light: #b0b1b7;
    --tsc-bg: #f5f5f7;
    --tsc-card: #ffffff;
    --tsc-border: #ececef;
    --tsc-bottombar-h: 64px;

    background: var(--tsc-bg);
    color: var(--tsc-text);
    font-size: 14px;
    line-height: 1.4;
    padding-bottom: calc(var(--tsc-bottombar-h) + 12px);
}
.tsc-thankyou * { box-sizing: border-box; }
.tsc-thankyou a { color: inherit; text-decoration: none; }

.tsc-thankyou__header {
    display: flex;
    align-items: center;
    padding: 14px 16px 16px;
    background: #ffffff;
    border-bottom: 1px solid var(--tsc-border);
}
.tsc-thankyou__title {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: var(--tsc-text);
}
.tsc-thankyou__header-spacer { width: 44px; flex-shrink: 0; }
.tsc-thankyou__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -6px -8px 0;
    flex-shrink: 0;
    color: var(--tsc-text-muted) !important;
    background: transparent !important;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.tsc-thankyou__logout:focus { outline: none; }

.tsc-thankyou__intro {
    background: #ffffff;
    padding: 4px 16px 16px 16px;
    font-size: 13px;
    color: var(--tsc-text-muted);
    border-bottom: 1px solid var(--tsc-border);
}

.tsc-thankyou__empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--tsc-text-muted);
    font-size: 15px;
}

/* Progress tracker */
.tsc-thankyou__tracker {
    display: flex;
    align-items: flex-start;
    padding: 18px 16px;
    background: var(--tsc-card);
    margin-top: 8px;
}
.tsc-thankyou__tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    width: 64px;
}
.tsc-thankyou__tracker-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tsc-bg);
    color: var(--tsc-text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tsc-thankyou__tracker-step.is-active .tsc-thankyou__tracker-dot {
    background: var(--tsc-pink);
    color: #ffffff;
}
.tsc-thankyou__tracker-label {
    font-size: 10px;
    color: var(--tsc-text-light);
    text-align: center;
    line-height: 1.2;
}
.tsc-thankyou__tracker-step.is-active .tsc-thankyou__tracker-label {
    color: var(--tsc-pink);
    font-weight: 600;
}
.tsc-thankyou__tracker-bar {
    flex: 1;
    height: 2px;
    background: var(--tsc-border);
    margin-top: 13px;
}
.tsc-thankyou__tracker-bar.is-active { background: var(--tsc-pink); }

/* Address */
.tsc-thankyou__address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--tsc-card);
    margin-top: 8px;
}
.tsc-thankyou__address-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tsc-pink);
    background: var(--tsc-pink-soft);
    border-radius: 50%;
}
.tsc-thankyou__address-body { flex: 1; min-width: 0; }
.tsc-thankyou__address-name { font-size: 13px; font-weight: 600; color: var(--tsc-text); }
.tsc-thankyou__address-line { font-size: 12px; color: var(--tsc-text-muted); line-height: 1.4; margin-top: 2px; }

/* Items */
.tsc-thankyou__items { background: var(--tsc-card); margin-top: 8px; }
.tsc-thankyou-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tsc-border);
}
.tsc-thankyou-item:last-child { border-bottom: 0; }
.tsc-thankyou-item__thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--tsc-bg);
}
.tsc-thankyou-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tsc-thankyou-item__body { flex: 1; min-width: 0; }
.tsc-thankyou-item__name {
    font-size: 13px;
    color: var(--tsc-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tsc-thankyou-item__meta {
    display: inline-block;
    font-size: 11px;
    color: var(--tsc-text-muted);
    background: var(--tsc-bg);
    padding: 2px 8px;
    border-radius: 6px;
    margin-top: 4px;
}
.tsc-thankyou-item__meta p { margin: 0; display: inline; }
.tsc-thankyou-item__right { text-align: right; flex-shrink: 0; }
.tsc-thankyou-item__price { font-size: 12px; font-weight: 600; color: var(--tsc-pink); }
.tsc-thankyou-item__price .woocommerce-Price-amount { color: var(--tsc-pink); }
.tsc-thankyou-item__qty { font-size: 12px; color: var(--tsc-text-muted); margin-top: 2px; }

/* Details */
.tsc-thankyou__details { background: var(--tsc-card); margin-top: 8px; padding: 14px 16px; }
.tsc-thankyou-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    font-size: 12px;
    padding: 4px 0;
}
.tsc-thankyou-detail-row__label { color: var(--tsc-text-muted); flex-shrink: 0; }
.tsc-thankyou-detail-row__value { color: var(--tsc-text); text-align: right; }
.tsc-thankyou-detail-row__value--stack { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.tsc-thankyou__pay-channel { color: var(--tsc-text-muted); font-size: 11px; }
.tsc-thankyou__ordernum { font-weight: 600; }
.tsc-thankyou__copy {
    background: transparent !important;
    border: 0;
    padding: 0 0 0 4px;
    color: var(--tsc-text-light) !important;
    cursor: pointer;
    vertical-align: -2px;
}
.tsc-thankyou__copy:focus { outline: none; }
.tsc-thankyou-detail-row--payment { margin-bottom: 4px; }

.tsc-thankyou__breakdown {
    border-top: 1px solid var(--tsc-border);
    padding-top: 8px;
    margin-top: 6px;
}
.tsc-thankyou-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 2px 0;
}
.tsc-thankyou-total-row__label { color: var(--tsc-text-muted); }
.tsc-thankyou-total-row__value { color: var(--tsc-text); }
.tsc-thankyou-total-row__value .woocommerce-Price-amount { color: var(--tsc-text); }
.tsc-thankyou-total-row--discount .tsc-thankyou-total-row__value,
.tsc-thankyou-total-row--discount .tsc-thankyou-total-row__value .woocommerce-Price-amount { color: #dc2626; }
.tsc-thankyou-total-row--grand {
    margin-top: 4px;
    padding-top: 8px;
    font-size: 14px;
    font-weight: 600;
}
.tsc-thankyou-total-row--grand .tsc-thankyou-total-row__label,
.tsc-thankyou-total-row--grand .tsc-thankyou-total-row__value,
.tsc-thankyou-total-row--grand .tsc-thankyou-total-row__value .woocommerce-Price-amount {
    color: var(--tsc-text);
    font-weight: 600;
}
.tsc-thankyou-detail-row--date {
    border-top: 1px solid var(--tsc-border);
    padding-top: 8px;
    margin-top: 6px;
}

/* Bottom bar */
.tsc-thankyou__bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--tsc-bottombar-h);
    background: var(--tsc-card);
    border-top: 1px solid var(--tsc-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    z-index: 20;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--tsc-bottombar-h) + env(safe-area-inset-bottom));
}
.tsc-thankyou__btn {
    flex: 1;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
}
.tsc-thankyou__btn--secondary {
    border: 1px solid #000000;
    color: #000000;
    background: #ffffff;
}
.tsc-thankyou__btn--primary {
    background: #000000;
    color: #ffffff !important;
}
.tsc-thankyou__btn--primary.is-full { flex: 1; }

@media (min-width: 768px) {
    .tsc-thankyou {
        max-width: 480px;
        margin: 24px auto;
        border-radius: 12px;
        overflow: hidden;
        min-height: auto;
        padding-bottom: var(--tsc-bottombar-h);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    }
    .tsc-thankyou__bottombar {
        position: sticky;
        bottom: 0;
        height: var(--tsc-bottombar-h);
        padding-bottom: 0;
    }
}
/* ==========================================================================
   Custom order detail page (.tsc-order) — overrides myaccount/view-order.php
   Reuses the same visual language as .tsc-thankyou
   ========================================================================== */
.tsc-order {
    --tsc-pink: #161823;
    --tsc-pink-soft: #f0f0f0;
    --tsc-pink-tint: #f7f7f7;
    --tsc-text: #161823;
    --tsc-text-muted: #8a8b91;
    --tsc-text-light: #b0b1b7;
    --tsc-bg: #f5f5f7;
    --tsc-card: #ffffff;
    --tsc-border: #ececef;
    --tsc-bottombar-h: 64px;

    background: var(--tsc-bg);
    color: var(--tsc-text);
    font-size: 14px;
    line-height: 1.4;
    padding-bottom: calc(var(--tsc-bottombar-h) + 12px);
}
.tsc-order * { box-sizing: border-box; }
.tsc-order a { color: inherit; text-decoration: none; }

.tsc-order__header {
    display: none;
}
.tsc-order__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--tsc-text) !important;
}
.tsc-order__title {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: var(--tsc-text);
    margin-left: 4px;
}
.tsc-order__header-spacer { width: 44px; flex-shrink: 0; }
.tsc-order__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -6px -8px 0;
    flex-shrink: 0;
    color: var(--tsc-text-muted) !important;
    background: transparent !important;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.tsc-order__logout:focus { outline: none; }

.tsc-order__intro {
    background: #ffffff;
    padding: 14px 16px 14px 48px;
    margin-top: 0;
    font-size: 13px;
    color: var(--tsc-text-muted);
    border-bottom: 1px solid var(--tsc-border);
}

/* Stock-reservation countdown (awaiting-payment orders) */
.tsc-order__reserved {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 16px;
    background: #dc2626;
    border-top: 1px solid #b91c1c;
    border-bottom: 1px solid #b91c1c;
    font-size: 12px;
    color: #ffffff;
}
.tsc-order__reserved-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #ffffff;
}
.tsc-order__reserved-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.tsc-order__reserved.is-expired {
    background: var(--tsc-bg);
    border-color: var(--tsc-border);
    color: var(--tsc-text-muted);
}
.tsc-order__reserved.is-expired .tsc-order__reserved-icon { color: var(--tsc-text-light); }

.tsc-order__empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--tsc-text-muted);
    font-size: 15px;
}

/* Progress tracker (same structure as thankyou) */
.tsc-order__tracker {
    display: flex;
    align-items: flex-start;
    padding: 18px 16px;
    background: var(--tsc-card);
    margin-top: 8px;
}
.tsc-order__tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    width: 64px;
}
.tsc-order__tracker-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tsc-bg);
    color: var(--tsc-text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tsc-order__tracker-step.is-active .tsc-order__tracker-dot {
    background: var(--tsc-pink);
    color: #ffffff;
}
.tsc-order__tracker-label {
    font-size: 10px;
    color: var(--tsc-text-light);
    text-align: center;
    line-height: 1.2;
}
.tsc-order__tracker-step.is-active .tsc-order__tracker-label {
    color: var(--tsc-pink);
    font-weight: 600;
}
.tsc-order__tracker-bar {
    flex: 1;
    height: 2px;
    background: var(--tsc-border);
    margin-top: 13px;
}
.tsc-order__tracker-bar.is-active { background: var(--tsc-pink); }

/* Status pill (for cancelled/refunded/failed/pending/on-hold) */
.tsc-order__status-pill {
    margin: 8px 0 0;
    padding: 12px 16px;
    background: var(--tsc-card);
    font-size: 13px;
    font-weight: 600;
    color: var(--tsc-text);
}
.tsc-order__status-pill--pending { color: #161823; }
.tsc-order__status-pill--on-hold { color: #161823; }
.tsc-order__status-pill--failed { color: #dc2626; }
.tsc-order__status-pill--cancelled { color: #4b4b4b; }
.tsc-order__status-pill--refunded { color: #161823; }

/* Address */
.tsc-order__address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--tsc-card);
    margin-top: 8px;
}
.tsc-order__address-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tsc-pink);
    background: var(--tsc-pink-soft);
    border-radius: 50%;
}
.tsc-order__address-body { flex: 1; min-width: 0; }
.tsc-order__address-name { font-size: 13px; font-weight: 600; color: var(--tsc-text); }
.tsc-order__address-line { font-size: 12px; color: var(--tsc-text-muted); line-height: 1.4; margin-top: 2px; }

/* Tracking number — title styled like "Order Summary", rows below */
.tsc-order__tracking-courier {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tsc-text-muted);
}
.tsc-order__tracking {
    padding: 10px 16px 12px;
    background: var(--tsc-card);
}
.tsc-order__section-title + .tsc-order__tracking { margin-top: 0; }
.tsc-order__tracking-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tsc-order__tracking-row + .tsc-order__tracking-row {
    margin-top: 6px;
}
.tsc-order__tracking-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tsc-pink);
}
.tsc-order__tracking-number {
    font-size: 13px;
    font-weight: 400;
    color: var(--tsc-text);
    word-break: break-all;
}
.tsc-order__tracking-row .tsc-order__copy {
    margin-left: 2px;
}

/* Items */
.tsc-order__items { background: var(--tsc-card); margin-top: 8px; }
.tsc-order-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tsc-border);
}
.tsc-order-item:last-child { border-bottom: 0; }
.tsc-order-item__thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--tsc-bg);
}
.tsc-order-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tsc-order-item__body { flex: 1; min-width: 0; }
.tsc-order-item__name {
    font-size: 13px;
    color: var(--tsc-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tsc-order-item__meta {
    display: inline-block;
    font-size: 11px;
    color: var(--tsc-text-muted);
    background: var(--tsc-bg);
    padding: 2px 8px;
    border-radius: 6px;
    margin-top: 4px;
}
.tsc-order-item__meta p { margin: 0; display: inline; }
.tsc-order-item__right { text-align: right; flex-shrink: 0; }
.tsc-order-item__price { font-size: 12px; font-weight: 600; color: var(--tsc-pink); }
.tsc-order-item__price .woocommerce-Price-amount { color: var(--tsc-pink); }
.tsc-order-item__qty { font-size: 12px; color: var(--tsc-text-muted); margin-top: 2px; }

/* Details */
.tsc-order__details { background: var(--tsc-card); margin-top: 8px; padding: 14px 16px; }
.tsc-order-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    font-size: 12px;
    padding: 4px 0;
}
.tsc-order-detail-row__label { color: var(--tsc-text-muted); flex-shrink: 0; }
.tsc-order-detail-row__value { color: var(--tsc-text); text-align: right; }
.tsc-order-detail-row__value--stack { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.tsc-order-detail-row__value--bold { font-weight: 700; }
.tsc-order-detail-row__value--bold .tsc-order__pay-channel { font-weight: 400; }

/* "Order Summary" section title above the product list */
.tsc-order__section-title {
    margin-top: 8px;
    padding: 12px 16px 0;
    background: var(--tsc-card);
    font-size: 14px;
    font-weight: 700;
    color: var(--tsc-text);
}
.tsc-order__section-title + .tsc-order__items { margin-top: 0; }
.tsc-order__pay-channel { color: var(--tsc-text-muted); font-size: 11px; }
.tsc-order__ordernum { font-weight: 600; }
.tsc-order__copy {
    background: transparent !important;
    border: 0;
    padding: 0 0 0 4px;
    color: var(--tsc-text-light) !important;
    cursor: pointer;
    vertical-align: -2px;
}
.tsc-order__copy:focus { outline: none; }
.tsc-order-detail-row--payment { margin-bottom: 4px; }

.tsc-order__breakdown {
    border-top: 1px solid var(--tsc-border);
    padding-top: 8px;
    margin-top: 6px;
}
.tsc-order-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 2px 0;
}
.tsc-order-total-row__label { color: var(--tsc-text-muted); }
.tsc-order-total-row__value { color: var(--tsc-text); }
.tsc-order-total-row__value .woocommerce-Price-amount { color: var(--tsc-text); }
.tsc-order-total-row--discount .tsc-order-total-row__value,
.tsc-order-total-row--discount .tsc-order-total-row__value .woocommerce-Price-amount { color: #dc2626; }
.tsc-order-total-row--grand {
    margin-top: 4px;
    padding-top: 8px;
    font-size: 14px;
    font-weight: 600;
}
.tsc-order-total-row--grand .tsc-order-total-row__label,
.tsc-order-total-row--grand .tsc-order-total-row__value,
.tsc-order-total-row--grand .tsc-order-total-row__value .woocommerce-Price-amount {
    color: var(--tsc-text);
    font-weight: 600;
}
.tsc-order-detail-row--date,
.tsc-order-detail-row--note {
    border-top: 1px solid var(--tsc-border);
    padding-top: 8px;
    margin-top: 6px;
}

/* Bottom bar */
.tsc-order__bottombar {
    position: fixed;
    bottom: 55px;
    left: 0;
    right: 0;
    background: var(--tsc-card);
    border-top: 1px solid var(--tsc-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    z-index: 20;
    height: calc(var(--tsc-bottombar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
}
.tsc-order__btn {
    flex: 1;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
}
.tsc-order__btn--secondary {
    border: 1px solid var(--global-palette-btn-bg, var(--tsc-border)) !important;
    color: var(--global-palette-btn-bg, var(--tsc-text)) !important;
    background: var(--tsc-card);
}
.tsc-order__btn--primary {
    background: var(--global-palette-btn-bg, var(--tsc-pink)) !important;
    color: var(--global-palette-btn, #ffffff) !important;
}

@media (min-width: 768px) {
    /* Full width on desktop/tablet — matches the orders list page so the
       order status tab bar is identical on both. */
    .tsc-order {
        min-height: auto;
        padding-bottom: var(--tsc-bottombar-h);
    }
    .tsc-order__bottombar {
        position: sticky;
        bottom: 0;
        height: var(--tsc-bottombar-h);
        padding-bottom: 0;
    }
}

/* ==========================================================================
   Custom orders list page (.tsc-orders) — overrides myaccount/orders.php
   ========================================================================== */
.tsc-orders {
    --tsc-pink: #161823;
    --tsc-pink-soft: #f0f0f0;
    --tsc-pink-tint: #f7f7f7;
    --tsc-text: #161823;
    --tsc-text-muted: #8a8b91;
    --tsc-text-light: #b0b1b7;
    --tsc-bg: #f5f5f7;
    --tsc-card: #ffffff;
    --tsc-border: #ececef;

    background: var(--tsc-bg);
    color: var(--tsc-text);
    font-size: 14px;
    line-height: 1.4;
    min-height: 100vh;
}
.tsc-orders * { box-sizing: border-box; }
.tsc-orders a { color: inherit; text-decoration: none; }

.tsc-orders__header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #ffffff;
    border-bottom: 1px solid var(--tsc-border);
}
.tsc-orders__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: #636363 !important;
}
.tsc-orders__title {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: var(--tsc-text);
    margin-left: 4px;
}
.tsc-orders__header-spacer { width: 44px; flex-shrink: 0; }
.tsc-orders__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -6px -8px 0;
    flex-shrink: 0;
    color: var(--tsc-text-muted);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.tsc-orders__logout:focus { outline: none; }

/* List */
.tsc-orders__list { padding: 8px 12px 24px; }
.tsc-orders-card {
    display: block;
    background: var(--tsc-card);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.tsc-orders-card:last-child { margin-bottom: 0; }
.tsc-orders-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tsc-orders-card__number { font-size: 13px; font-weight: 600; color: var(--tsc-text); }
.tsc-orders-card__status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--tsc-bg);
    color: var(--tsc-text-muted);
    white-space: nowrap;
}
.tsc-orders-card__status--processing { background: #f0f0f0; color: #161823; }
.tsc-orders-card__status--completed { background: #f0f0f0; color: #161823; }
.tsc-orders-card__status--pending { background: #f0f0f0; color: #161823; }
.tsc-orders-card__status--on-hold { background: #f0f0f0; color: #161823; }
.tsc-orders-card__status--failed { background: #fdecec; color: #dc2626; }
.tsc-orders-card__status--cancelled { background: #ededed; color: #4b4b4b; }
.tsc-orders-card__status--refunded { background: #f0f0f0; color: #161823; }
.tsc-orders-card__date { font-size: 11px; color: var(--tsc-text-muted); margin-top: 3px; }

/* Per-product item rows inside an order card */
.tsc-orders-card__items { margin-top: 10px; }
.tsc-orders-card-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--tsc-border);
}
.tsc-orders-card-item:first-child { border-top: 0; padding-top: 0; }
.tsc-orders-card-item--extra { display: none; }
.tsc-orders-card.is-expanded .tsc-orders-card-item--extra { display: flex; }
.tsc-orders-card-item__thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--tsc-bg);
    flex-shrink: 0;
}
.tsc-orders-card-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tsc-orders-card-item__body { flex: 1; min-width: 0; }
.tsc-orders-card-item__name {
    font-size: 13px;
    color: var(--tsc-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tsc-orders-card-item__meta {
    display: inline-block;
    font-size: 11px;
    color: var(--tsc-text-muted);
    background: var(--tsc-bg);
    padding: 2px 8px;
    border-radius: 6px;
    margin-top: 4px;
}
.tsc-orders-card-item__meta p { margin: 0; display: inline; }
.tsc-orders-card-item__right { text-align: right; flex-shrink: 0; }
.tsc-orders-card-item__price { font-size: 12px; font-weight: 600; color: var(--tsc-pink); }
.tsc-orders-card-item__price .woocommerce-Price-amount { color: var(--tsc-pink); }
.tsc-orders-card-item__qty { font-size: 12px; color: var(--tsc-text-muted); margin-top: 2px; }

/* VIEW MORE / VIEW LESS toggle */
.tsc-orders-card__toggle {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 0 0;
    background: transparent !important;
    border: 0;
    border-top: 1px solid var(--tsc-border);
    color: var(--tsc-pink) !important;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
}
.tsc-orders-card__toggle:focus { outline: none; }

.tsc-orders-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--tsc-border);
}
.tsc-orders-card__foot-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    color: var(--tsc-text-muted);
}
.tsc-orders-card__total { font-size: 14px; font-weight: 600; color: var(--tsc-text); }
.tsc-orders-card__total .woocommerce-Price-amount { color: var(--tsc-text); }
.tsc-orders-card__cta-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.tsc-orders-card__cta { font-size: 12px; color: var(--tsc-text-muted); font-weight: 600; }
.tsc-orders-card__cta--pay { color: var(--tsc-pink); }
.tsc-orders-card__chevron { color: var(--tsc-text-light); }

/* Pagination */
.tsc-orders__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4px 16px 28px;
}
.tsc-orders__page-btn {
    font-size: 13px;
    font-weight: 600;
    color: var(--tsc-pink);
    padding: 6px 10px;
}
.tsc-orders__page-info { font-size: 12px; color: var(--tsc-text-muted); }

/* Empty state */
.tsc-orders__empty {
    text-align: center;
    padding: 56px 32px;
}
.tsc-orders__empty-icon {
    display: inline-flex;
    color: var(--tsc-text-light);
    margin-bottom: 12px;
}
.tsc-orders__empty-title { font-size: 16px; font-weight: 600; color: var(--tsc-text); }
.tsc-orders__empty-text { font-size: 13px; color: var(--tsc-text-muted); margin-top: 4px; }
.tsc-orders__empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 28px;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--tsc-pink) !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
}

@media (min-width: 768px) {
    .tsc-orders {
        min-height: auto;
    }
    /* Order cards: two per row, full width. */
    .tsc-orders__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}
/* ─────────────────────────────────────────────────────────────────
   Phase 11A.1 additions — thankyou page on-hold UI
   ───────────────────────────────────────────────────────────────── */

/* Stock-reservation countdown (awaiting-payment orders) — thankyou page */
.tsc-thankyou__reserved {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 16px;
    background: #dc2626;
    border-top: 1px solid #b91c1c;
    border-bottom: 1px solid #b91c1c;
    font-size: 12px;
    color: #ffffff;
}
.tsc-thankyou__reserved-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #ffffff;
}
.tsc-thankyou__reserved-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.tsc-thankyou__reserved.is-expired {
    background: var(--tsc-bg);
    border-color: var(--tsc-border);
    color: var(--tsc-text-muted);
}
.tsc-thankyou__reserved.is-expired .tsc-thankyou__reserved-icon { color: var(--tsc-text-light); }

/* Status pill (for cancelled/refunded/failed/pending/on-hold) — thankyou page */
.tsc-thankyou__status-pill {
    margin: 8px 0 0;
    padding: 12px 16px;
    background: var(--tsc-card);
    font-size: 13px;
    font-weight: 600;
    color: var(--tsc-text);
}
.tsc-thankyou__status-pill--pending   { color: #161823; }
.tsc-thankyou__status-pill--on-hold   { color: #161823; }
.tsc-thankyou__status-pill--failed    { color: #dc2626; }
.tsc-thankyou__status-pill--cancelled { color: #4b4b4b; }

/* ============================================================
   Retry Payment page (order-pay endpoint) — Phase B
   Reuses the shared .tsc-checkout shell + .tsc-checkout-item +
   .tsc-checkout-total-row + .tsc-checkout__bottombar styles.
   ============================================================ */

/* Tighten the gap between the last content block (totals) and the sticky
   Pay bar — the shared .tsc-checkout reserves an extra 12px we don't want here. */
.tsc-checkout--pay {
    padding-bottom: calc(var(--tsc-bottombar-h) + env(safe-area-inset-bottom));
}

/* Status note explaining why the customer landed here */
.tsc-checkout__pay-note {
    margin: 12px var(--tsc-pad) 0;
    padding: 12px 14px;
    background: var(--tsc-pink-soft);
    color: var(--tsc-text);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}

/* Read-only address card — no tap affordance (overrides the base card) */
.tsc-checkout__address-card--readonly {
    cursor: default;
}

/* Payment methods: WooCommerce renders standard radios + labels here. We hide
   those — retry-pay.js drives selection via the modal — and keep only the
   chosen gateway's .payment_box visible (toggled by JS). */
.tsc-checkout__pay-methods .wc_payment_methods {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* !important deliberately overrides WooCommerce core's #payment ID-based
   rules, which would otherwise out-specify these class selectors and keep
   the stock radios + labels visible. The modal is the only selector UI here. */
.tsc-checkout__pay-methods .wc_payment_methods li > input[type="radio"],
.tsc-checkout__pay-methods .wc_payment_methods li > label {
    display: none !important;
}
.tsc-checkout__pay-methods .payment_box {
    background: var(--tsc-card) !important;
    padding: 15px !important;
    border-top: 1px solid var(--tsc-border);
    margin: 0 !important;
}
/* WooCommerce draws a triangle pointer above .payment_box aimed at the radio
   — meaningless here since the radios are hidden, so remove it. */
.tsc-checkout__pay-methods .payment_box::before {
    display: none !important;
}
.tsc-checkout__pay-methods .payment_box > p:first-child {
    color: var(--tsc-text-muted);
    font-size: 13px;
    margin: 0 0 12px;
}
.tsc-checkout__pay-methods .form-row {
    display: flex;
    flex-direction: column;
    margin: 0 0 14px;
    padding: 0;
}
.tsc-checkout__pay-methods .form-row:last-child {
    margin-bottom: 0;
}
.tsc-checkout__pay-methods .form-row label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--tsc-text);
    margin-bottom: 6px;
}

/* Expired failed order — payment is no longer possible */
.tsc-checkout__pay-dead {
    margin: 24px var(--tsc-pad);
    padding: 28px 20px;
    background: var(--tsc-card);
    border-radius: 16px;
    text-align: center;
}
.tsc-checkout__pay-dead-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--tsc-text);
    margin-bottom: 8px;
}
.tsc-checkout__pay-dead-text {
    font-size: 13px;
    color: var(--tsc-text-muted);
    line-height: 1.5;
    margin: 0 0 18px;
}

/* Generic retry-page button (used by the expired-order state) */
.tsc-checkout__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
}
.tsc-checkout__btn--primary {
    background: var(--tsc-pink);
    color: #ffffff;
}

/* ============================================================
   Orders list — status filter tabs
   ============================================================ */

.tsc-orders__tabs {
    display: flex;
    background: var(--tsc-card);
    border-bottom: 1px solid var(--tsc-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tsc-orders__tabs::-webkit-scrollbar {
    display: none;
}
.tsc-orders__tab {
    flex: 1 0 auto;
    min-width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px;
    color: #636363 !important;
    text-align: center;
}
.tsc-orders__tab.is-active {
    color: var(--global-palette-btn-bg, var(--tsc-pink)) !important;
}
.tsc-orders__tab-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tsc-orders__tab-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.tsc-orders__tab.is-active .tsc-orders__tab-label {
    font-weight: 600;
}
.tsc-orders__tab-badge {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dc2626;
    color: #ffffff;
    border: 2px solid var(--tsc-card);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

/* ============================================================
   My Account — header + tab navigation
   Literal values: .tsc-account is its own root (no --tsc-* tokens).
   ============================================================ */

.tsc-account {
    background: #f5f5f7;
}

.tsc-account__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: #ffffff;
    border-bottom: 1px solid #ececef;
}
.tsc-account__back {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #161823 !important;
}
.tsc-account__title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #161823;
}
.tsc-account__header-spacer {
    flex-shrink: 0;
    width: 28px;
}

.tsc-account__tabs {
    display: flex;
    background: #ffffff;
    border-bottom: 1px solid #ececef;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tsc-account__tabs::-webkit-scrollbar {
    display: none;
}
.tsc-account__tab {
    flex: 1 0 auto;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 8px;
    color: #8a8b91 !important;
    text-align: center;
    text-decoration: none;
}
.tsc-account__tab.is-active {
    color: var(--global-palette-btn-bg, var(--tsc-pink)) !important;
}
.tsc-account__tab-icon {
    display: inline-flex;
}
.tsc-account__tab-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.tsc-account__tab.is-active .tsc-account__tab-label {
    font-weight: 600;
}

.tsc-account__content {
    padding: 12px;
}
.tsc-account__content--bare {
    padding: 0;
}

/* ---- My Account: Profile + Address Book endpoints ------------------
   White rounded card sections on the gray app background, with even
   breathing room (the .tsc-account__content padding above). */

/* Profile (edit-account) + Edit-address forms — one white card each,
   sharing identical field styling. */
.tsc-account__content .woocommerce-EditAccountForm,
.tsc-account__content .woocommerce-address-fields {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
}
/* Page heading above the edit-address form (form-edit-address.php).
   WooCommerce renders this as an <h2>. */
.tsc-account__content form h2 {
    margin: 0 0 10px;
    padding: 25px;
    font-size: 21px;
    font-weight: 700;
    color: #161823;
}
/* Rows stack full width. */
.tsc-account__content .woocommerce-EditAccountForm > p,
.tsc-account__content .form-row {
    float: none;
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
}
.tsc-account__content .woocommerce-address-fields .form-row:last-child {
    margin-bottom: 0;
}
.tsc-account__content form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #161823;
}
.tsc-account__content form .required {
    color: var(--global-palette-btn-bg, var(--tsc-pink)) !important;
    border: 0;
    text-decoration: none;
}
.tsc-account__content .woocommerce-input-wrapper {
    display: block;
}
.tsc-account__content form .input-text,
.tsc-account__content form input[type="text"],
.tsc-account__content form input[type="email"],
.tsc-account__content form input[type="tel"],
.tsc-account__content form input[type="password"],
.tsc-account__content form select {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 12px;
    font-size: 14px;
    color: #161823;
    background: #ffffff;
    border: 1px solid #ececef;
    border-radius: 8px;
}
.tsc-account__content form .input-text:focus,
.tsc-account__content form select:focus {
    outline: none;
    border-color: var(--global-palette-btn-bg, var(--tsc-pink)) !important;
}
/* Country field — WooCommerce upgrades the <select> to a select2 widget. */
.tsc-account__content .select2-container .select2-selection--single {
    height: 44px;
    border: 1px solid #ececef;
    border-radius: 8px;
}
.tsc-account__content .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: 12px;
    font-size: 14px;
    color: #161823;
}
.tsc-account__content .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
}
/* Field hint (e.g. under Display name). */
.tsc-account__content .woocommerce-EditAccountForm span em {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-style: normal;
    color: #8a8b91;
}
/* Password-change fieldset (profile only). */
.tsc-account__content .woocommerce-EditAccountForm fieldset {
    margin: 4px 0 16px;
    padding: 14px 12px 2px;
    border: 1px solid #ececef;
    border-radius: 10px;
    background: rgb(246, 246, 246);
}
.tsc-account__content .woocommerce-EditAccountForm legend {
    padding: 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #161823;
}
/* WooCommerce wraps password inputs in .password-input + a show/hide eye. */
.tsc-account__content .woocommerce-EditAccountForm .password-input {
    display: block;
    position: relative;
}
.tsc-account__content .woocommerce-EditAccountForm .password-input input {
    padding-right: 40px;
}
.tsc-account__content .woocommerce-EditAccountForm .show-password-input {
    position: absolute;
    top: 50%;
    right: 12px;
}
/* Save button — both forms. */
.tsc-account__content form button[type="submit"] {
    width: 100%;
    height: 46px;
    margin-top: 2px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    color: var(--global-palette-btn, #ffffff) !important;
    background: var(--global-palette-btn-bg, var(--tsc-pink)) !important;
}

/* Address Book (edit-address) — woo-address-book sections as white cards. */
.tsc-account__content .address_book {
    margin: 0 0 10px !important;
    padding: 25px;
    background: #ffffff;
    border-radius: 12px;
}
.tsc-account__content .address_book header {
    border-bottom: 0 !important;
}
.tsc-account__content .address_book > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.tsc-account__content .address_book > header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #161823;
}
.tsc-account__content .myaccount_address {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #8a8b91;
}

/* Saved address cards — compact list */
.tsc-account__content .addresses.address-book {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}
.tsc-account__content .wc-address-book-address {
    padding: 10px 12px;
    border: 1px solid #ececef;
    border-radius: 10px;
    box-sizing: border-box;
}
/* Default address floats to the top of its list. */
.tsc-account__content .wc-address-book-address-default {
    order: -1;
    border-color: var(--global-palette-btn-bg, var(--tsc-pink)) !important;
}
.tsc-account__content .wc-address-book-address .woocommerce-Address-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}
.tsc-account__content .wc-address-book-address .woocommerce-Address-title h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #161823;
}
.tsc-account__content .wc-address-book-address-default-label {
    display: inline-block;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 999px;
    color: #ffffff;
    background: var(--global-palette-btn-bg, var(--tsc-pink)) !important;
}
/* Address text — JS reformats this to: name on line 1, address on line 2
   (see formatAddressBook() in checkout.js). */
.tsc-account__content .wc-address-book-address address {
    margin: 0;
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
    color: #5a5b61;
}
.tsc-account__content .wc-address-book-address .tsc-addr-name {
    display: block;
    font-weight: 600;
    color: #161823;
}
.tsc-account__content .wc-address-book-address .tsc-addr-text {
    display: block;
}

/* Buttons — Edit / Delete / Set as Default / Add address */
.tsc-account__content .wc-address-book-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 0;
    padding-bottom: 4px;
}
.tsc-account__content .wc-address-book-meta .button,
.tsc-account__content a.add.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
}
.tsc-account__content .wc-address-book-edit,
.tsc-account__content .wc-address-book-delete {
    border: 1px solid #dfdfdf !important;
    background: #ffffff !important;
    color: #161823 !important;
}
.tsc-account__content .wc-address-book-make-default,
.tsc-account__content a.add.button {
    border: 0 !important;
    background: var(--global-palette-btn-bg, var(--tsc-pink)) !important;
    color: var(--global-palette-btn, #ffffff) !important;
}

/* ---- Hide native WooCommerce success / info notices ----------------
   The plugin shows its own toast messages, so WooCommerce's default
   banners ("Address deleted successfully.", "Coupon applied." …) are
   redundant. cart/checkout render on body.tsc-canvas; the account pages
   render in the theme template, so they're matched via
   body.woocommerce-account too. ERROR notices are deliberately kept so
   a failed payment or invalid form still tells the customer what's
   wrong. */
body.tsc-canvas .woocommerce-message,
body.tsc-canvas .woocommerce-info,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info {
    display: none !important;
}

/* ---- Mobile: keep account & order pages app-like --------------------
   These pages render inside the Kadence theme (header + footer). On
   mobile we hide that theme chrome so only the plugin's own header and
   bottom nav show — matching the cart/checkout app experience. */
@media (max-width: 767px) {
    body.woocommerce-account #masthead,
    body.woocommerce-account #colophon {
        display: none !important;
    }
}

/* ---- Desktop / tablet: full-width account & order layout ---------- */
@media (min-width: 768px) {
    /* The Kadence theme header carries site navigation here, so the
       plugin's own page headers and back arrows are redundant. */
    .tsc-account__header,
    .tsc-orders__header,
    .tsc-account__back,
    .tsc-orders__back,
    .tsc-order__back {
        display: none;
    }
    /* Content padding on desktop / tablet. */
    .tsc-account__content,
    .tsc-orders__list {
        padding: 2em;
    }
    /* Address book: two cards per row. A real grid, so a lone odd card
       keeps its half-width column instead of stretching across. */
    .tsc-account__content .addresses.address-book {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.tsc-thankyou__status-pill--refunded  { color: #161823; }

/* ---- Login / Register page (logged-out My Account) -----------------
   WooCommerce's form-login.php, styled to match the account forms:
   monochrome, transparent background, rounded inputs, pill buttons. */
#customer_login {
    display: block;
    max-width: 460px;
    margin: 0 auto;
    padding: 2em;
    background: transparent;
}
#customer_login .u-column1,
#customer_login .u-column2,
#customer_login .col-1,
#customer_login .col-2 {
    float: none;
    width: 100%;
    margin: 0 0 28px;
    padding: 0;
}
#customer_login h2 {
    margin: 0 0 14px;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    color: #161823;
}
#customer_login .woocommerce-form {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
#customer_login .form-row {
    margin: 0 0 14px;
    padding: 0;
}
#customer_login label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #161823;
}
#customer_login .required {
    color: #8a8b91;
    border: 0;
    text-decoration: none;
}
#customer_login .input-text,
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 12px;
    font-size: 14px;
    color: #161823;
    background: #ffffff;
    border: 1px solid #ececef;
    border-radius: 8px;
}
#customer_login .input-text:focus {
    outline: none;
    border-color: #161823;
}
#customer_login .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    font-size: 13px;
    font-weight: 400;
}
#customer_login .woocommerce-form-login__submit,
#customer_login .woocommerce-form-register__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    margin-top: 4px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    color: #ffffff !important;
    background: #000 !important;
}
#customer_login .woocommerce-LostPassword {
    margin: 14px 0 0;
    font-size: 13px;
}
#customer_login .woocommerce-LostPassword a {
    color: #161823;
    text-decoration: underline;
}
#customer_login .woocommerce-privacy-policy-text {
    margin: 12px 0;
    font-size: 12px;
    line-height: 1.5;
    color: #8a8b91;
}
/* ==========================================================================
   Hover neutralizers + responsive order/account/thankyou layout
   ========================================================================== */

/* Neutralize theme button hover on checkout rows. */
.tsc-checkout__address-card:hover,
.tsc-checkout__address-card:focus,
.tsc-checkout__select-row:hover,
.tsc-checkout__select-row:focus,
.tsc-checkout__coupon-row:hover,
.tsc-checkout__coupon-row:focus {
    background: var(--tsc-card, #ffffff) !important;
    color: var(--tsc-text, #161823) !important;
}
.tsc-checkout__notes-row:hover,
.tsc-checkout__notes-row:focus {
    background: #ebebeb !important;
    color: var(--tsc-text, #161823) !important;
}

/* Order + account pages sit inside the theme — inherit its background. */
.tsc-account,
.tsc-order {
    background: transparent;
    padding-bottom: 0;
}

/* Centre the success-page header and intro. */
.tsc-thankyou__header { justify-content: center; }
.tsc-thankyou__header,
.tsc-thankyou__intro { text-align: center; }

/* My-orders page title (hidden on mobile, shown from tablet up). */
.tsc-orders__page-title { display: none; }

/* Hide the theme header/footer on the mobile success page only. */
@media (max-width: 767px) {
    body.woocommerce-order-received #masthead,
    body.woocommerce-order-received #colophon {
        display: none !important;
    }
}

/* Tablet and up: embed order/account/success inside the theme chrome. */
@media (min-width: 768px) {
    .tsc-account,
    .tsc-order {
        padding-top: 1em;
        padding-left: 10%;
        padding-right: 10%;
    }
    .tsc-account__content,
    .tsc-orders__list {
        padding: unset;
    }
    .tsc-account__tabs {
        margin-bottom: 1em;
    }
    .tsc-orders,
    .tsc-thankyou {
        background: inherit;
    }
    .tsc-thankyou__header,
    .tsc-thankyou__intro {
        background-color: inherit;
    }
    .tsc-order__intro {
        background: transparent;
        margin-top: 2em;
        font-size: 15px;
        color: #000000;
        text-align: center;
        padding: 14px 16px;
        border-bottom: 0;
    }
    .tsc-orders__page-title {
        display: block;
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        color: #161823;
        padding: 24px 16px 8px;
    }
    .tsc-thankyou {
        max-width: 85%;
        margin: 24px auto;
        min-height: auto;
        padding-bottom: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

@media (min-width: 1024px) {
    .tsc-thankyou { max-width: 60%; }
    .tsc-orders__tabs { margin-bottom: 2em; }
}

/* Mobile-only My Account content spacing. */
@media (max-width: 767px) {
    .tsc-account__content {
        padding: 0;
    }
    .tsc-account__content form button[type="submit"] {
        margin-top: 30px;
    }
    .tsc-account,
    .tsc-order {
        padding-top: 4px;
    }
    .tsc-order__intro {
        padding: 14px 16px 14px 16px;
        text-align: center;
    }
}

/* Login / register error notices — show clearly above the form. */
body.woocommerce-account .woocommerce-error,
#customer_login .woocommerce-error {
    display: block !important;
    max-width: 460px;
    margin: 0 auto 16px;
    padding: 12px 16px;
    background: #fdecea;
    color: #b91c1c;
    border-left: 4px solid #b91c1c;
    border-radius: 6px;
    font-size: 14px;
    list-style: none;
}
body.woocommerce-account .woocommerce-error li,
#customer_login .woocommerce-error li {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.woocommerce-account .woocommerce-error a {
    color: #b91c1c;
    text-decoration: underline;
}

/* Guest order-tracking result — pull up under the form heading. */
.tsc-order.tsc-order--tracking {
    margin-top: -4em;
}

/* ==========================================================================
   Checkout rows — theme hardening (Kadence + Hello Commerce/Elementor)
   ==========================================================================
   Every row on the left column (address, shipping, payment, coupon, notes) is
   a <button>, and buttons attract more theme styling than any other tag.

   THE BUG THIS FIXES
   ------------------
   On desktop .tsc-checkout__main is display:block (see the min-width:768px
   block above), so each row relies on its own display:flex to become a
   block-level, full-width band that stacks under the previous one.

   Hello Commerce forces display:inline-block on buttons, which beat the rows'
   display:flex. The rows turned into inline-level boxes and flowed left-to-
   right across the column, wrapping like words — address, shipping and payment
   side by side with their icons stacked above centred text.

   The same theme rule also rewrote padding (24px), border (killing the row
   separators), border-radius and text-transform, because it outranks a single
   class selector. Everything below re-states what the design already wanted,
   so it is a no-op on themes that leave the rows alone.
   ========================================================================== */

.tsc-checkout__address-card,
.tsc-checkout__select-row,
.tsc-checkout__coupon-row,
.tsc-checkout__notes-row {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;         /* If a parent is ever a flex container. */
    align-self: stretch !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
    padding: var(--tsc-pad) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    /* Pinned rather than inherited — Kadence uppercases button text while
       Hello Commerce capitalises it, so the same row read differently per site. */
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    float: none !important;
}

/* align-items differs per row: the address card grows to several lines, so its
   icon pins to the top; the single-line rows stay centred. */
.tsc-checkout__address-card { align-items: flex-start !important; }
.tsc-checkout__select-row,
.tsc-checkout__coupon-row,
.tsc-checkout__notes-row { align-items: center !important; }

/* Row separators. Hello Commerce sets `border: 0` on buttons via a selector
   that outranks the plugin's border-bottom, which erased these lines. */
.tsc-checkout__address-card {
    border: 0 !important;
    border-bottom: 1px solid var(--tsc-border) !important;
}
.tsc-checkout__select-row,
.tsc-checkout__notes-row {
    border: 0 !important;
}
.tsc-checkout__select-row + .tsc-checkout__select-row {
    border-top: 1px solid var(--tsc-border) !important;
}
.tsc-checkout__coupon-row {
    border: 0 !important;
    border-bottom: 1px solid var(--tsc-border) !important;
}

/* Inner layout: icon left (fixed), text block fills, chevron hard right. */
.tsc-checkout__address-icon,
.tsc-checkout__select-icon,
.tsc-checkout__notes-icon,
.tsc-checkout__coupon-icon {
    flex: 0 0 auto !important;
}
.tsc-checkout__address-body,
.tsc-checkout__select-body,
.tsc-checkout__notes-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}
.tsc-checkout__coupon-label {
    flex: 1 1 auto !important;
    text-align: left !important;
}
/* margin-left:auto keeps the chevron hard right even if a body's flex-grow is
   overridden as well. */
.tsc-checkout__address-chev,
.tsc-checkout__select-chev,
.tsc-checkout__notes-chev,
.tsc-checkout__coupon-chev {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* Place Order — Hello Commerce flattened the pill to a square via its
   --ehc-button-border-*-radius variables (all 0). */
.tsc-checkout .tsc-checkout__place-order,
.tsc-checkout .tsc-checkout__place-order:hover,
.tsc-checkout .tsc-checkout__place-order:focus {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    height: 44px !important;
    padding: 10px 28px !important;
}

/* ==========================================================================
   "Have an account?" banner — theme hardening
   ==========================================================================
   The banner is a <button>, so it hits the same wall as the coupon pill and the
   checkout rows: Hello Commerce rewrites padding, radius, case and alignment
   through a selector that outranks a single class, and the collapsed layout
   drops the icon onto its own centred line with the chevron trailing the text.

   Only background and colour were pinned before, which is why those two
   survived and nothing else did.
   ========================================================================== */

.tsc-login-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;      /* if a parent is ever a flex container */
    align-self: stretch !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    min-height: 56px !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    /* Pinned, not inherited: Kadence uppercases button text while Hello
       Commerce capitalises it, so the same banner read differently per store. */
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}
.tsc-login-banner__icon {
    flex: 0 0 auto !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}
.tsc-login-banner__text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
}
.tsc-login-banner__text strong { display: block !important; }
.tsc-login-banner__chev {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* ==========================================================================
   My Account tabs + foreign endpoint content — theme hardening
   ==========================================================================
   The tabs are links, so any theme that underlines links underlines these.
   Pinned on every state: a bare :hover rule elsewhere is enough to bring the
   underline back.
   ========================================================================== */

.tsc-account__tabs .tsc-account__tab,
.tsc-account__tabs .tsc-account__tab:link,
.tsc-account__tabs .tsc-account__tab:visited,
.tsc-account__tabs .tsc-account__tab:hover,
.tsc-account__tabs .tsc-account__tab:focus,
.tsc-account__tabs .tsc-account__tab:active {
    text-decoration: none !important;
    border-bottom: 0 !important;   /* some themes fake underlines with a border */
    box-shadow: none !important;   /* …others with a shadow */
}
.tsc-account__tabs .tsc-account__tab-label,
.tsc-account__tabs .tsc-account__tab-icon {
    text-decoration: none !important;
}

/* Content that another plugin renders — Returns comes from YITH — has no card
   or padding of its own, so it needs a gutter. .tsc-account__content is
   deliberately zero-padded on mobile because our own forms bring their own. */
.tsc-account__content--padded {
    padding: 16px !important;
}
@media (max-width: 767px) {
    .tsc-account__content--padded {
        padding: 16px !important;
    }
}