/* ==========================================================================
   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; }

/* 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__notes-row { order: 9; }
.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 {
        max-height: 36px;
        width: auto;
        display: block;
    }
    .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;
}