/* =============================================================================
 * WooCommerce CSS — curated overrides
 * -----------------------------------------------------------------------------
 * WooCommerce's default stylesheets are disabled in functions.php
 * (woocommerce_enqueue_styles => empty, wc-blocks-* dequeued).
 *
 * Only copy in the specific WooCommerce rules actually needed. Keep WooCommerce's
 * ORIGINAL class names (WC outputs them in its HTML) and scope every rule under
 * the `.wc-scope` ancestor so styles never leak into the rest of the site.
 *
 *   OK   .wc-scope .star-rating { ... }
 *   BAD  .tsb-star-rating { ... }   // renamed class won't match WC markup
 *
 * Wrap the WooCommerce output area in the template with:
 *   <div class="wc-scope"> ... </div>
 * ============================================================================= */

/* Soften WooCommerce's blockUI overlay (shown during AJAX remove in the mini-cart
 * drawer) — default is black @0.6 which stacks with the drawer backdrop and looks
 * too dark. Use a light veil instead. blockUI sets these inline, so !important. */
#mini-cart-drawer .blockUI.blockOverlay {
    background: #f9f9f9 !important;
    opacity: 0.5 !important;
}

/* Cart page: drop the blockUI backdrop entirely over the cart form AND the totals
 * during AJAX — feedback is a spinner inside the apply-coupon button + the price
 * skeleton, not a dimming veil. blockUI sets these inline, so !important. */
.wc-scope .woocommerce-cart-form .blockUI.blockOverlay,
.wc-scope .cart_totals .blockUI.blockOverlay {
    display: none !important;
}

/* Skeleton placeholder shown at each price while the cart AJAX runs.
 * Sized in em so it scales with the price it replaces; shimmering gradient. */
.wc-scope .price-skeleton {
    display: inline-block;
    width: 5em;
    max-width: 100%;
    height: 1em;
    vertical-align: -0.15em;
    border-radius: 3px;
    background: linear-gradient( 90deg, #e5e5e5 25%, #f5f5f5 50%, #e5e5e5 75% );
    background-size: 200% 100%;
    animation: tsb-price-skeleton 1.2s ease-in-out infinite;
}
@keyframes tsb-price-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* While a row's remove is processing, fade + tint the whole row — mirrors the
 * mini-cart drawer's AJAX veil (#f9f9f9 @ 0.5). The row is replaced on
 * updated_wc_div, so the class clears itself. */
.wc-scope .woocommerce-cart-form__cart-item {
    transition: background-color 0.3s ease, opacity 0.3s ease;
}
.wc-scope .woocommerce-cart-form__cart-item.is-removing {
    background: #f9f9f9;
    opacity: 0.5;
    pointer-events: none;
}

/* =============================================================================
 * Cart page (classic [woocommerce_cart] template — Toshiba override)
 * Only the WC-generated bits that can't be classed inline in the template are
 * styled here: the quantity input, the proceed-to-checkout button, notices and
 * the shipping calculator. Everything else is Tailwind in cart/*.php.
 * ============================================================================= */

/* --- Coupon code input ---
 * Match #product-qty-input from products-detail.html and hard-override the
 * Tailwind forms plugin (cdn.tailwindcss.com?plugins=forms), which otherwise
 * forces its own border colour and a blue focus ring/box-shadow. Selector
 * specificity (input + id) beats the plugin's [type=…]. */
.wc-scope input#coupon_code {
    color: #262626;                 /* slate-800 */
    background: #fff;
    border: 1px solid #d4d4d4;      /* slate-300 */
    border-radius: 0;
    box-shadow: none;
    outline: none;
    transition: border-color 0.2s ease;
}
.wc-scope input#coupon_code:hover {
    border-color: #a3a3a3;          /* slate-400 */
}
.wc-scope input#coupon_code:focus,
.wc-scope input#coupon_code:focus-visible {
    border-color: #737373;          /* slate-500 */
    box-shadow: none;
    outline: none;
    outline-offset: 0;
    --tw-ring-shadow: 0 0 #0000;
    --tw-ring-offset-shadow: 0 0 #0000;
}

/* --- Quantity stepper: [ − ] [ input ] [ ＋ ] (block-cart style) ---
 * The bordered wrapper carries the outline; the WC number input inside is
 * borderless and its native spinners are hidden (we use the buttons). */
.wc-scope .qty-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d4d4d4;      /* slate-300 */
    background: #fff;
    transition: border-color 0.2s ease;
}
.wc-scope .qty-selector:hover { border-color: #a3a3a3; }        /* slate-400 */
.wc-scope .qty-selector:focus-within { border-color: #737373; } /* slate-500 */
.wc-scope .qty-selector .quantity {
    margin: 0;
    display: inline-flex;
    align-items: center;
}
.wc-scope .qty-selector .qty-btn {
    width: 2.25rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #525252;                 /* slate-600 */
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.wc-scope .qty-selector .qty-btn:hover {
    background: #f5f5f5;            /* slate-100 */
    color: #00502D;
}
.wc-scope .qty-selector input.qty {
    width: 2.75rem;
    height: 2.5rem;
    padding: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #262626;                 /* slate-800 */
    background: transparent;
    border: 0;
    border-left: 1px solid #e5e5e5;   /* slate-200 */
    border-right: 1px solid #e5e5e5;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}
.wc-scope .qty-selector input.qty:focus {
    box-shadow: none;
    outline: none;
    border-color: #e5e5e5;
}
.wc-scope .qty-selector input.qty::-webkit-outer-spin-button,
.wc-scope .qty-selector input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Price / subtotal amounts rendered by WC helpers --- */
.wc-scope .product-price .woocommerce-Price-amount,
.wc-scope .product-subtotal .woocommerce-Price-amount,
.wc-scope .cart_totals .woocommerce-Price-amount {
    white-space: nowrap;
}
.wc-scope del .woocommerce-Price-amount {
    color: #a3a3a3;
    font-weight: 400;
    margin-right: 0.5rem;
}
.wc-scope ins {
    text-decoration: none;
}

/* --- Proceed to checkout button (woocommerce_proceed_to_checkout hook) --- */
.wc-scope .wc-proceed-to-checkout {
    padding: 0;
}
.wc-scope .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.875rem 1.5rem;
    background: #00502D;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.15em;
    border-radius: 28px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.wc-scope .wc-proceed-to-checkout a.checkout-button:hover {
    background: #004129;
    transform: translateY(-1px);
}

/* --- Shipping calculator inside totals --- */
.wc-scope .cart_totals .shipping td small {
    display: block;
    color: #a3a3a3;
    font-weight: 400;
}
.wc-scope ul#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wc-scope ul#shipping_method li {
    margin: 0 0 0.5rem;
    text-align: right;
    color: #525252;
}
.wc-scope .shipping-calculator-button {
    color: #00502D;
    text-decoration: underline;
}

/* --- WooCommerce notices (coupon applied / cart updated / errors) ---
 * Rendered in the .cart-feedback zone below the coupon field, so use a TOP
 * margin (space from the actions row) and no bottom gap when the wrapper is empty. */
.wc-scope .cart-feedback .woocommerce-notices-wrapper:empty {
    display: none;
}
/* Space the feedback from the grid below only when it actually holds a notice. */
.wc-scope .cart-feedback:has(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
    margin-bottom: 16px;
}
.wc-scope .woocommerce-message,
.wc-scope .woocommerce-info,
.wc-scope .woocommerce-error {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 0;
    font-size: 14px;
    border: 1px solid transparent;
    border-left-width: 4px;
}
.wc-scope .woocommerce-message {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
.wc-scope .woocommerce-info {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #075985;
}
.wc-scope .woocommerce-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.wc-scope .woocommerce-message .button,
.wc-scope .woocommerce-info .button,
.wc-scope .woocommerce-error .button {
    float: right;
    color: #00502D;
    text-decoration: underline;
}

/* Hide the redundant "View cart" link wc_add_to_cart_message() appends to the
 * add-to-cart notice when the add happens ON the cart page (立即購買 links that
 * target /cart/?add-to-cart=…, or re-adding via the "Undo" link). .wc-scope only
 * exists on cart.php / cart-empty.php, so the link still shows everywhere else.
 * The "Undo?" link (.restore-item) and the checkout button (.wc-proceed-to-checkout
 * .checkout-button, also .wc-forward but not inside a notice) are unaffected. */
.wc-scope .woocommerce-message a.wc-forward,
.wc-scope .woocommerce-info a.wc-forward,
.wc-scope .woocommerce-error a.wc-forward {
    display: none;
}

/* Empty-cart message (cart/cart-empty.php) — the message is emitted as a plain
 * .wc-empty-cart-message (see functions.php: woocommerce_cart_is_empty), so it just
 * inherits the big bold title styling from .cart-empty-message. Transient notices
 * ("… removed. Undo?") no longer land here — they render in .cart-feedback below the
 * header (styled by the shared .wc-scope .woocommerce-message/-info/-error rules). */

/* --- Empty-cart entrance -------------------------------------------------
 * The empty template reuses the site-wide reveal classes (.title-split-reveal,
 * .line-reveal, .reveal-fade, .reveal-item), which default to opacity:0 /
 * scaleX(0) and only become visible once wp-main.js toggles `.active`. But when
 * cart.js removes the LAST item it fetches this template over AJAX and
 * .replaceWith()s the whole `.woocommerce` container — the injected markup never
 * runs wp-main.js's observer setup nor any inline <script>, so `.active` is never
 * added and the header underline, icon, message and button all stay invisible.
 *
 * Fix: don't depend on JS here. Scope to the empty cart via :has(.cart-empty-wrap),
 * force the visible end-state, and drive the entrance with pure CSS @keyframes,
 * which run on render in every case (direct load AND AJAX injection). */
.wc-scope:has(.cart-empty-wrap) .title-split-reveal,
.wc-scope:has(.cart-empty-wrap) .title-split-reveal span,
.wc-scope:has(.cart-empty-wrap) .line-reveal,
.wc-scope:has(.cart-empty-wrap) .reveal-fade,
.wc-scope:has(.cart-empty-wrap) .reveal-item {
    opacity: 1;
    transform: none;
}
.wc-scope:has(.cart-empty-wrap) .line-reveal {
    transform-origin: left;
    animation: wc-empty-line 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.wc-scope:has(.cart-empty-wrap) .cart-empty-wrap .reveal-fade {
    animation: wc-empty-rise 0.7s ease both;
}
.wc-scope:has(.cart-empty-wrap) .cart-empty-wrap .cart-empty-message {
    animation: wc-empty-rise 0.7s ease 0.15s both;
}
.wc-scope:has(.cart-empty-wrap) .cart-empty-wrap .reveal-item:last-child {
    animation: wc-empty-rise 0.7s ease 0.3s both;
}
@keyframes wc-empty-line {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes wc-empty-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .wc-scope:has(.cart-empty-wrap) .line-reveal,
    .wc-scope:has(.cart-empty-wrap) .cart-empty-wrap .reveal-fade,
    .wc-scope:has(.cart-empty-wrap) .cart-empty-wrap .cart-empty-message,
    .wc-scope:has(.cart-empty-wrap) .cart-empty-wrap .reveal-item:last-child {
        animation: none;
    }
}

/* Coupon error — cart.js appends a <p.coupon-error-notice> under the .coupon wrapper,
 * but checkout.js appends a <span.coupon-error-notice> (inline). Force display:block so
 * the field-error box (width/padding/border) renders correctly in BOTH cases — without
 * it the checkout span ignores width:100% and the pink background only hugs each text
 * line. box-sizing keeps the 100% width inside its column despite the padding. */
.wc-scope .coupon .coupon-error-notice {
    display: block;
    box-sizing: border-box;
    order: 3;               /* checkout: wrap onto a full-width row below input + button */
    flex-basis: 100%;
    width: 100%;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    line-height: 1.6;
    color: #991b1b;
    background: #fef2f2;
    border-left: 3px solid #dc2626;
}
.wc-scope input#coupon_code.has-error,
.wc-scope input#coupon_code.has-error:hover,
.wc-scope input#coupon_code.has-error:focus {
    border-color: #dc2626;
}
/* On checkout the notice is a flex item that WRAPS below the input row, so the flex
 * row-gap (gap-2 = 8px) already spaces it — drop its own margin-top so the input→error
 * gap is 8px, matching the cart (where the notice is a block <p> with margin-top only,
 * no gap). Without this the checkout gets 8px gap + 8px margin = 16px (too wide). */
.wc-scope form.checkout_coupon .coupon-error-notice {
    margin-top: 0;
}

/* Applied-coupon row in the totals: keep the "remove" link subtle. */
.wc-scope .cart_totals .cart-discount th {
    font-weight: 500;
}
.wc-scope .cart_totals .cart-discount .woocommerce-remove-coupon {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 12px;
    color: #a3a3a3;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wc-scope .cart_totals .cart-discount .woocommerce-remove-coupon:hover {
    color: #dc2626;
}

[role="alert"]:focus-visible {
    outline:  none !important;
}

/* =============================================================================
 * Checkout page (classic [woocommerce_checkout] template — Toshiba override)
 * -----------------------------------------------------------------------------
 * Only the WC-generated bits that can't be classed inline in the templates are
 * styled here: the form fields (woocommerce_form_field), the country/state
 * select2 dropdowns, the payment-method radios, the place-order button and the
 * checkout notices. Everything structural is Tailwind in checkout/*.php.
 * ============================================================================= */

/* --- Field-wrapper grids: name splits into two columns, everything else full
 * width. WC's own float-based .form-row-first / -last CSS is disabled, so drive
 * the layout with a responsive grid instead. --- */
.wc-scope .woocommerce-billing-fields__field-wrapper,
.wc-scope .woocommerce-shipping-fields__field-wrapper,
.wc-scope .woocommerce-additional-fields__field-wrapper,
.wc-scope .create-account {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}
.wc-scope .form-row {
    grid-column: 1 / -1;         /* full width by default */
    margin: 0 0 1.25rem;
    display: block;
}
.wc-scope .form-row-first { grid-column: 1 / 2; }
.wc-scope .form-row-last  { grid-column: 2 / 3; }
@media (max-width: 640px) {
    .wc-scope .woocommerce-billing-fields__field-wrapper,
    .wc-scope .woocommerce-shipping-fields__field-wrapper,
    .wc-scope .woocommerce-additional-fields__field-wrapper,
    .wc-scope .create-account {
        grid-template-columns: 1fr;
    }
    .wc-scope .form-row-first,
    .wc-scope .form-row-last { grid-column: 1 / -1; }
}

/* --- Labels --- */
.wc-scope .form-row > label,
.wc-scope .woocommerce-billing-fields label,
.wc-scope .woocommerce-shipping-fields label,
.wc-scope .woocommerce-additional-fields label {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 16px;                 /* text-base */
    font-weight: 700;                /* font-bold */
    color: #525252;                  /* slate-600 */
}
.wc-scope .form-row .required {
    color: #dc2626;
    text-decoration: none;
    border: 0;
}
.wc-scope .form-row .optional {
    color: #a3a3a3;
    font-weight: 400;
}
.wc-scope .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}
.wc-scope .woocommerce-input-wrapper > .description {
    margin: 0.5rem 0 0;
    font-size: 12px;
    color: #737373;
}

/* --- Text inputs / textarea / select --- hard-override the Tailwind forms
 * plugin (its border colour + blue focus ring/box-shadow). Selector specificity
 * (.wc-scope + element/class) beats the plugin's bare [type=…]. --- */
.wc-scope .input-text,
.wc-scope input[type="text"],
.wc-scope input[type="email"],
.wc-scope input[type="tel"],
.wc-scope input[type="password"],
.wc-scope input[type="number"],
.wc-scope textarea,
.wc-scope select {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    color: #262626;                  /* slate-800 — match #product-qty-input */
    background: #fff;
    border: 1px solid #d4d4d4;       /* slate-300 */
    border-radius: 0;
    box-shadow: none;
    outline: none;
    font-size: 16px;                 /* text-base */
    font-weight: 400;                /* font-normal */
    line-height: 1.6;
    transition: border-color 0.2s ease;
}
.wc-scope textarea {
    min-height: 6.5rem;
    resize: vertical;
}
.wc-scope .input-text::placeholder,
.wc-scope textarea::placeholder {
    color: #a3a3a3;
}
.wc-scope .input-text:hover,
.wc-scope input[type="text"]:hover,
.wc-scope input[type="email"]:hover,
.wc-scope input[type="tel"]:hover,
.wc-scope input[type="password"]:hover,
.wc-scope textarea:hover,
.wc-scope select:hover {
    border-color: #a3a3a3;           /* slate-400 */
}
.wc-scope .input-text:focus,
.wc-scope input[type="text"]:focus,
.wc-scope input[type="email"]:focus,
.wc-scope input[type="tel"]:focus,
.wc-scope input[type="password"]:focus,
.wc-scope input[type="number"]:focus,
.wc-scope textarea:focus,
.wc-scope select:focus {
    border-color: #737373;           /* slate-500 */
    box-shadow: none;
    outline: none;
    outline-offset: 0;
    --tw-ring-shadow: 0 0 #0000;
    --tw-ring-offset-shadow: 0 0 #0000;
}

/* --- Validation feedback (checkout.js adds these on blur / submit) --- */
.wc-scope .woocommerce-invalid .input-text,
.wc-scope .woocommerce-invalid input[type="text"],
.wc-scope .woocommerce-invalid input[type="email"],
.wc-scope .woocommerce-invalid input[type="tel"],
.wc-scope .woocommerce-invalid select,
.wc-scope .woocommerce-invalid .select2-container .select2-selection {
    border-color: #dc2626;           /* red-600 */
}
/* .wc-scope .woocommerce-validated .input-text,
.wc-scope .woocommerce-validated input[type="email"],
.wc-scope .woocommerce-validated input[type="tel"],
.wc-scope .woocommerce-validated select {
    border-color: #10b981;
} */

/* --- Country / state select2 dropdown — match the plain inputs --- */
.wc-scope .select2-container {
    width: 100% !important;
    display: block;
}
.wc-scope .select2-container--default .select2-selection--single {
    height: 2.75rem;
    padding: 0 0.25rem;
    background: #fff;
    border: 1px solid #d4d4d4;       /* slate-300 */
    border-radius: 0;
    display: flex;
    align-items: center;
    transition: border-color 0.2s ease;
    font-size: 16px;
    outline: none !important;
    box-shadow: none !important;
}
.wc-scope .select2-container--default .select2-selection--single:hover {
    border-color: #a3a3a3;
}
.wc-scope .select2-container--default.select2-container--open .select2-selection--single,
.wc-scope .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #737373;
}
.wc-scope .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #262626;
    line-height: normal;
    padding: 0 0.5rem;
}
.wc-scope .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0.35rem;
}
/* The select2 dropdown is appended to <body>, OUTSIDE .wc-scope — scope its own
 * container classes instead so the styling still applies. */
.select2-dropdown {
    border: 1px solid #d4d4d4;
    border-radius: 0;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #00502D;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #d4d4d4;
    border-radius: 0;
    outline: none;
}

/* --- Checkbox rows (create account / ship to different address / terms) --- */
.wc-scope .form-row .woocommerce-form__label-for-checkbox,
.wc-scope label.checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-weight: 500;
    color: #404040;
    cursor: pointer;
}
.wc-scope input[type="checkbox"],
.wc-scope input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: #00502D;
    flex-shrink: 0;
}

/* --- Login prompt inside the preamble (only shown if the reminder is on) --- */
.wc-scope .woocommerce-form-login,
.wc-scope .woocommerce-form-register {
    padding: 1.5rem;
    margin: 0;
}
.wc-scope .woocommerce-form-login .woocommerce-form-login__submit {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    background: #00502D;
    color: #fff;
    font-weight: 700;
    border-radius: 28px;
    border: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.wc-scope .woocommerce-form-login .woocommerce-form-login__submit:hover { background: #004129; }
.wc-scope .woocommerce-form-login .lost_password a { color: #00502D; text-decoration: underline; }

/* --- Payment methods ---
 * Editorial card selector: sharp corners, hairline border, custom green radio.
 * Each <li.wc_payment_method> is the card; the native radio is restyled in place
 * (appearance:none) into a Toshiba-green indicator and absolutely positioned so
 * the label row (title + gateway logo) stays a clean flex line. */
.wc-scope .wc_payment_methods { list-style: none; margin: 0; padding: 0; }
.wc-scope .wc_payment_method {
    list-style: none;
    position: relative;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.wc-scope .wc_payment_method:hover { border-color: #a3a3a3; }          /* slate-400 */
.wc-scope .wc_payment_method:has(input[type="radio"]:checked) {
    border-color: #00502D;
    box-shadow: inset 0 0 0 1px #00502D;
    background: #f4faf6;                                               /* faint green tint */
}

/* Custom radio indicator (replaces the native blue dot). */
.wc-scope .wc_payment_method > input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 1rem;
    top: 1rem;                                                     /* aligns with the py-3.5 label row */
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 2px solid #d4d4d4;                                        /* slate-300 */
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wc-scope .wc_payment_method > input[type="radio"]:hover { border-color: #737373; }
.wc-scope .wc_payment_method > input[type="radio"]:checked {
    border-color: #00502D;
    /* white gap ring + solid green centre → filled radio look */
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 20px #00502D;
}
.wc-scope .wc_payment_method > input[type="radio"]:focus-visible {
    outline: 2px solid #00502D;
    outline-offset: 2px;
}

/* Label row: leave room for the absolute radio, keep title left / logo right. */
.wc-scope .wc_payment_method > label {
    margin: 0;
    padding-left: 3rem;                                                /* clears the 20px radio + gutter */
}
.wc-scope .wc_payment_method > label img {
    max-height: 22px;
    width: auto;
    margin-left: auto;
    display: inline-block;
}
.wc-scope .payment_box { margin: 0; }
.wc-scope .payment_box p:last-child { margin-bottom: 0; }
.wc-scope .payment_box p:first-child { margin-top: 0; }

/* Fields some ECPay gateways print inside .payment_box via payment_fields():
 * Credit-Installment → <select name="ecpay_number_of_periods">,
 * 定期定額 (DCA)      → <select id="ecpay_dca_payment"> + note + <hr>.
 * Style the native selects to the boxed-input recipe (sharp, slate border). */
.wc-scope .payment_box select {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 2.75rem;
    margin: 0.25rem 0 0.5rem;
    padding: 0 2.25rem 0 0.75rem;
    font-size: 16px;
    font-weight: 400;
    color: #262626;                 /* slate-800 */
    background-color: #fff;
    border: 1px solid #d4d4d4;      /* slate-300 */
    border-radius: 0;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* chevron */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    transition: border-color 0.2s ease;
}
.wc-scope .payment_box select:hover { border-color: #a3a3a3; }   /* slate-400 */
.wc-scope .payment_box select:focus,
.wc-scope .payment_box select:focus-visible {
    border-color: #737373;          /* slate-500 */
    box-shadow: none;
    outline: none;
}
/* DCA divider + note the plugin prints with inline styles. */
.wc-scope .payment_box hr { border: 0; border-top: 1px solid #e5e5e5; margin: 0.75rem 0; }
.wc-scope #ecpay_dca_show { color: #525252; font-size: 14px; line-height: 1.6; }

/* --- Place order button (#place_order) --- */
.wc-scope #place_order {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: #00502D;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.15em;
    border: 0;
    border-radius: 28px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.wc-scope #place_order:hover { background: #004129; transform: translateY(-1px); }
.wc-scope #place_order:disabled { background: #e5e5e5; color: #a3a3a3; cursor: not-allowed; transform: none; }

/* Terms & conditions row above the button. */
.wc-scope .woocommerce-terms-and-conditions-wrapper { margin-bottom: 1rem; font-size: 14px; color: #525252; }
.wc-scope .woocommerce-terms-and-conditions-wrapper a { color: #00502D; text-decoration: underline; }

/* Privacy-policy text under the order review — match the page's body style. */
.wc-scope .woocommerce-privacy-policy-text,
.wc-scope .woocommerce-privacy-policy-text p {
    color: #737373;                  /* slate-500 */
    font-size: 14px;
    margin: 16px 0px;
}
.wc-scope .woocommerce-privacy-policy-text a { color: #00502D; text-decoration: underline; }

.wc-scope .woocommerce-checkout-review-order-table .woocommerce-Price-amount { white-space: nowrap; }

/* Drop every blockUI backdrop on checkout — the submit veil over the whole form AND
 * the AJAX veil over the review/payment. Feedback is the barber-pole stripe animation
 * INSIDE the apply-coupon + place-order buttons (below), not a global dimming veil.
 * blockUI sets these inline, so !important. */
.wc-scope form.checkout .blockUI.blockOverlay,
.wc-scope .woocommerce-checkout-review-order .blockUI.blockOverlay,
.wc-scope .woocommerce-checkout-payment .blockUI.blockOverlay {
    display: none !important;
}

/* --- Button loading state: an animated diagonal barber-pole veil (like the WP-admin
 * "saving" indicator) — replaces the removed blockUI backdrop. The stripes are
 * TRANSLUCENT (opacity), so the button keeps its colour + label showing through — not
 * a solid black/white cover. Triggers: WC toggles `.processing` on the checkout coupon
 * form + the checkout form (place order); the cart coupon button gets `.btn-loading`
 * from a small JS handler (cart.js marks the whole form `.processing`, not coupon-specific). */
.wc-scope form.checkout_coupon.processing button[name="apply_coupon"],
.wc-scope form.checkout.processing #place_order,
.wc-scope button.btn-loading {
    position: relative !important;
    overflow: hidden;
    pointer-events: none;
    cursor: default;
}
.wc-scope form.checkout_coupon.processing button[name="apply_coupon"]::after,
.wc-scope form.checkout.processing #place_order::after,
.wc-scope button.btn-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Two-tone translucent stripes → readable barber-pole shimmer on any button bg,
     * while the underlying colour/label stays visible. */
    background-image: repeating-linear-gradient( 45deg, rgba(23,23,23,0.03) 0, rgba(23,23,23,0.03) 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px );
    background-size: 28.28px 28.28px;   /* 20px stripe period ÷ cos45° → seamless loop */
    animation: tsb-btn-stripes 0.7s linear infinite;
}
@keyframes tsb-btn-stripes {
    from { background-position: 0 0; }
    to   { background-position: 28.28px 0; }
}

/* Preamble notices (login/coupon toggles + errors) already inherit the shared
 * .wc-scope .woocommerce-message/-info/-error rules above; just remove the top
 * margin so they sit flush inside the .checkout-preamble stack. */
.wc-scope .checkout-preamble .woocommerce-message,
.wc-scope .checkout-preamble .woocommerce-info,
.wc-scope .checkout-preamble .woocommerce-error {
    margin-top: 0;
}
.wc-scope .checkout-preamble .woocommerce-notices-wrapper:empty { display: none; }

/* --- Coupon card in the right column (form-coupon.php) ---
 * checkout.js .hide()s form.checkout_coupon on init (it expects a toggle); we show
 * it always, like the cart's coupon card. !important beats checkout.js's inline
 * display:none; the applied_coupon_in_checkout handler in form-checkout.php cancels
 * the post-apply slide-up so it never collapses. */
.wc-scope form.checkout_coupon.woocommerce-form-coupon {
    display: block !important;
    margin: 0;
}

/* --- General checkout messages below the header ---
 * checkout.js prepends its NoticeGroup as the first child of <form class="checkout">,
 * i.e. right below the page header and above the columns — matching the cart's
 * below-title feedback zone. Just give it breathing room from the columns. --- */
.wc-scope form.checkout > .woocommerce-NoticeGroup {
    margin: 0 0 16px;
}

/* --- Inline per-field validation messages (checkout.js appends
 * <p class="checkout-inline-error-message"> to each invalid .form-row) --- */
.wc-scope .checkout-inline-error-message {
    margin: 0.5rem 0 0;
    color: #dc2626;                  /* red-600 */
    font-size: 12px;
    line-height: 1.6;
    font-weight: 500;
}

/* --- Suppress the redundant checkout error SUMMARY.
 * checkout.js prepends a .woocommerce-NoticeGroup-checkout list AND adds an inline
 * message under each field. Since the inline messages cover every field error, hide
 * the summary when ALL its lines are field errors (each <li> has a data-id). A
 * summary that also carries a non-field error (e.g. payment) stays visible, with its
 * field lines dropped so only the non-field message shows. --- */
.wc-scope .woocommerce-NoticeGroup-checkout:not(:has(li:not([data-id]))) {
    display: none;
}
.wc-scope .woocommerce-NoticeGroup-checkout .woocommerce-error li[data-id] {
    display: none;
}


/* =============================================================================
 * Order received / thank-you page (checkout/thankyou.php + order/*.php overrides)
 * ============================================================================= */
.wc-scope .woocommerce-order-details .woocommerce-Price-amount,
.wc-scope .woocommerce-order-overview .woocommerce-Price-amount { white-space: nowrap; }

/* Order line-item meta (variation attributes) from wc_display_item_meta() —
 * compact "label: value" rows matching the cart/review meta. */
.wc-scope .wc-item-meta {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}
.wc-scope .wc-item-meta li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #737373;                  /* slate-500 */
}
.wc-scope .wc-item-meta li strong.wc-item-meta-label {
    font-weight: 500;
    color: #737373;
}
.wc-scope .wc-item-meta li p { margin: 0; }

/* =============================================================================
 * My Account page (myaccount/*.php overrides)
 * ============================================================================= */
/* Navigation active state (light-green pill) — the .is-active class is on the <li>. */
.wc-scope .woocommerce-MyAccount-navigation li { list-style: none; }
.wc-scope .woocommerce-MyAccount-navigation li.is-active > a {
    background: rgba(0, 80, 45, 0.10);
    color: #00502D;
}
.wc-scope .woocommerce-MyAccount-navigation li.is-active > a .material-symbols-outlined { color: #00502D; }

/* Account notices zone — space it from the content below only when non-empty. */
.wc-scope .account-feedback .woocommerce-notices-wrapper:empty { display: none; }
.wc-scope .account-feedback:has(.woocommerce-message, .woocommerce-info, .woocommerce-error) { margin-bottom: 1.5rem; }

/* Default WC buttons on the account sub-templates NOT styled inline
 * (lost/reset password, downloads, add-payment-method) → primary green pill.
 * Scoped to those specific containers so the inline outline buttons (orders
 * pagination / actions) are never matched. */
.wc-scope .woocommerce-ResetPassword button.button,
.wc-scope form.lost_reset_password button.button,
.wc-scope .woocommerce-MyAccount-downloads-file,
.wc-scope .woocommerce-Account-content .add-payment-method .button,
.wc-scope .woocommerce-MyAccount-content a.add-payment-method.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 42px;
    background: #00502D;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 0;
    border-radius: 28px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.wc-scope .woocommerce-ResetPassword button.button:hover,
.wc-scope form.lost_reset_password button.button:hover,
.wc-scope .woocommerce-MyAccount-downloads-file:hover { background: #004129; }

/* Password strength meter (WC-injected on register / reset / edit-account forms).
 * Shows ONLY a 4-tick bar — no label text. The WC meter <div> keeps driving the
 * state class but is visually hidden (its text stays in the DOM for screen readers);
 * the inline account-password script (functions.php → wp_footer) mirrors that state
 * onto a sibling .pw-strength-ticks bar. Ticks fill L→R by strength:
 * short=1, bad=2 (red), good=3 (amber), strong=4 (green); mismatch = none. */
.wc-scope .woocommerce-password-strength {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.wc-scope .pw-strength-ticks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 10px;
}
.wc-scope .pw-strength-ticks > i {
    height: 4px;
    border-radius: 2px;
    background: #e5e5e5;
    transition: background-color 0.25s ease;
}
.wc-scope .pw-strength-ticks[data-state="short"] > i:nth-child(-n+1),
.wc-scope .pw-strength-ticks[data-state="bad"]   > i:nth-child(-n+2) { background: #ba1a1a; }
.wc-scope .pw-strength-ticks[data-state="good"]  > i:nth-child(-n+3) { background: #b45309; }
.wc-scope .pw-strength-ticks[data-state="strong"] > i:nth-child(-n+4) { background: #00502D; }

/* Password hint (WC-injected <small>) — quiet helper text. */
.wc-scope .woocommerce-password-hint {
    display: block;
    margin-top: 8px;
    color: #737373;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
    text-transform: none;
}

/* Downloads table (myaccount/downloads not overridden) — align with the theme. */
.wc-scope .woocommerce-table--order-downloads,
.wc-scope table.shop_table.order_details { width: 100%; }