/*
 * Traveling Dojo Admin -- Dojo Store styles.
 * Loaded on store pages only (store-product.php), scoped to body.tda-store
 * so nothing leaks into the rest of the site. Colors are the theme's:
 * red #B60004 (hover #a30003), blue #004C97, light blue #f0f4f9.
 * Fonts are inherited from the theme (Figtree).
 */

/* ── Shared building blocks ─────────────────────────────── */

/* The theme gives every list inside .content a red bullet (typography.css);
   WooCommerce's lists (products, order summary, notices) aren't bullet lists. */
.tda-store .woocommerce ul,
.tda-store .woocommerce ol.tda-steps__list { margin-left: 0; }
.tda-store .woocommerce ul li::before,
.tda-store .woocommerce ol li::before { content: none; }
.tda-store .woocommerce ul li { padding-bottom: 0; }

.tda-store .tda-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* Buttons: primary = red, secondary = blue outline (theme's .btn look). */
.tda-store .tda-btn-store,
.tda-store .woocommerce a.button,
.tda-store .woocommerce button.button,
.tda-store .woocommerce input.button,
.tda-store .woocommerce #respond input#submit {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 20px;
    border-radius: 2px; border: 2px solid transparent;
    font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.1;
    text-decoration: none; cursor: pointer;
    background: #B60004; color: #fff;
}
.tda-store .tda-btn-store:hover,
.tda-store .woocommerce a.button:hover,
.tda-store .woocommerce button.button:hover { background: #a30003; color: #fff; }
.tda-store .tda-btn-store--secondary,
.tda-store .woocommerce ul.products li.product a.button.product_type_variable {
    background: #fff; color: #004C97; border-color: #004C97;
}
.tda-store .tda-btn-store--secondary:hover,
.tda-store .woocommerce ul.products li.product a.button.product_type_variable:hover { background: #004C97; color: #fff; }
.tda-store .woocommerce button.button.alt { background: #B60004; color: #fff; }
.tda-store .woocommerce button.button.alt:hover { background: #a30003; }
.tda-store .woocommerce button.button:disabled,
.tda-store .woocommerce button.button.tda-is-disabled { background: #d6d6d6 !important; color: #4a4a4a !important; cursor: not-allowed; opacity: 1; }

/* Pill buttons: brand filter and size buttons. */
.tda-store .tda-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 52px; padding: 6px 16px;
    border: 2px solid #8a8a8a; border-radius: 2px;
    background: #fff; color: #000;
    font-family: inherit; font-size: 16px; font-weight: 700;
    text-decoration: none; cursor: pointer;
}
.tda-store .tda-pill:hover { border-color: #004C97; color: #004C97; }
.tda-store .tda-pill.is-active { background: #004C97; border-color: #004C97; color: #fff; }
.tda-store .tda-pill:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.tda-store .tda-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* Brand line + stock tags + Copy button. */
.tda-store .tda-brand { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #004C97; margin-bottom: 4px; }
.tda-store .tda-brand--shinwado { color: #76328e; }
.tda-store .tda-stock { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 8px; border-radius: 2px; margin: 6px 0 10px; }
.tda-store .tda-stock--instock { color: #1d5f57; background: #e6f2f0; }
.tda-store .tda-stock--special { color: #7a4a00; background: #fff1d6; }
.tda-store .tda-stock--out { color: #444; background: #e4e4e4; }
.tda-store .tda-copy-btn { min-height: 36px; padding: 0 12px; margin-left: 6px; background: #fff; color: #004C97; border: 2px solid #004C97; border-radius: 2px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }

/* Policy boxes (product page, cart). */
.tda-store .tda-policy-box,
.tda-store .tda-policy-note { background: #f0f4f9; border: 2px solid #004C97; border-radius: 8px; padding: 14px 18px; margin: 20px 0; }
.tda-store .tda-policy-box h2 { margin: 0 0 6px; font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: #004C97; }
.tda-store .tda-policy-box p,
.tda-store .tda-policy-note p { margin: 0; font-size: 15px; line-height: 1.45; }
.tda-store .tda-policy-note strong { color: #004C97; }

.tda-store .tda-members-only { background: #f0f4f9; border: 2px solid #004C97; border-radius: 8px; padding: 16px 18px; margin: 16px 0; }
.tda-store .tda-members-only p { margin: 0 0 10px; }

/* ── Catalog ───────────────────────────────────────────── */

.tda-store .tda-store-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.tda-store .tda-brand-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.tda-store .tda-brand-filter .tda-pill { border-color: #004C97; color: #004C97; }
.tda-store .tda-brand-filter .tda-pill.is-active { color: #fff; }
.tda-store .tda-cat-filter { display: flex; flex-direction: column; gap: 4px; }
.tda-store .tda-cat-filter label { font-size: 13px; font-weight: 700; color: #444; }
.tda-store .tda-cat-filter select,
.tda-store .woocommerce-ordering select { height: 44px; min-width: 200px; border: 1px solid #666; border-radius: 2px; padding: 0 10px; font-family: inherit; font-size: 15px; background: #fff; }

/* Product grid: CSS grid instead of WooCommerce's floats. */
.tda-store .woocommerce ul.products {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px;
    margin: 0 0 24px; padding: 0; list-style: none;
}
.tda-store .woocommerce ul.products::before,
.tda-store .woocommerce ul.products::after { display: none; } /* WooCommerce's clearfix would take up grid cells. */
.tda-store .woocommerce ul.products li.product {
    float: none; width: auto; margin: 0; padding: 0 0 16px;
    display: flex; flex-direction: column;
    border: 1px solid #e4e4e4; border-radius: 6px; overflow: hidden; background: #fff;
}
.tda-store .woocommerce ul.products li.product a img { margin: 0 0 14px; aspect-ratio: 1 / 1; object-fit: cover; background: #f0f4f9; }
.tda-store .woocommerce ul.products li.product .tda-brand,
.tda-store .woocommerce ul.products li.product .woocommerce-loop-product__title,
.tda-store .woocommerce ul.products li.product .price,
.tda-store .woocommerce ul.products li.product .tda-stock { margin-left: 16px; margin-right: 16px; }
.tda-store .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0; font-size: 19px; font-weight: 800; color: #000; }
.tda-store .woocommerce ul.products li.product .price { color: #000; font-size: 20px; font-weight: 800; margin-bottom: 0; }
.tda-store .woocommerce ul.products li.product .price del { color: #595959; font-size: 15px; font-weight: 400; }
.tda-store .woocommerce ul.products li.product .price ins { color: #B60004; text-decoration: none; }
.tda-store .woocommerce ul.products li.product .tda-stock { align-self: flex-start; }
.tda-store .woocommerce ul.products li.product .button { margin: auto 16px 0; }
.tda-store .tda-from { font-size: 14px; font-weight: 600; color: #444; }

/* "How the store works" strip. */
.tda-store .tda-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; background: #f0f4f9; border: 4px solid #004C97; border-radius: 12px; padding: 24px; margin: 32px 0 0; }
.tda-store .tda-how h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: #004C97; }
.tda-store .tda-how p { margin: 0; font-size: 15px; }

/* ── Product page ──────────────────────────────────────── */

/* Product page: the photo and the details sit side by side (floated); this
   keeps the page around both, so the footer can't ride up beside them on a
   product with no description or related items below (1.33.1). */
.tda-store .woocommerce div.product::after { content: ""; display: table; clear: both; }
.tda-store .woocommerce div.product .product_title { font-size: 36px; font-weight: 900; line-height: 1.1; }
.tda-store .woocommerce div.product p.price,
.tda-store .woocommerce div.product span.price { color: #000; font-size: 28px; font-weight: 800; }
.tda-store .woocommerce div.product p.price ins,
.tda-store .woocommerce div.product span.price ins { color: #B60004; text-decoration: none; }
.tda-store .woocommerce div.product p.price del { color: #595959; font-size: 19px; font-weight: 400; }
.tda-store .tda-tax-note { margin: -8px 0 16px; font-size: 14px; color: #444; }
.tda-store .woocommerce div.product form.cart .variations { margin-bottom: 8px; }
.tda-store .woocommerce div.product form.cart .variations th.label label { font-size: 16px; font-weight: 800; }
.tda-store .woocommerce div.product form.cart .reset_variations { font-size: 14px; }
.tda-store .woocommerce div.product .stock { font-weight: 700; }
.tda-store .woocommerce div.product .stock.in-stock { color: #1d5f57; }
.tda-store .woocommerce div.product .stock.available-on-backorder { color: #7a4a00; }
.tda-store .woocommerce div.product form.cart .single_add_to_cart_button { min-height: 52px; font-size: 18px; padding: 0 28px; }
.tda-store .woocommerce .quantity .qty { height: 48px; width: 4.5em; border: 1px solid #666; border-radius: 2px; font-size: 17px; font-weight: 700; }

/* "This item is for" (product page) / "For" (cart). */
.tda-store .tda-for { margin: 0 0 16px; }
.tda-store .tda-for label { display: block; font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.tda-store .tda-for select { height: 48px; min-width: 240px; max-width: 100%; border: 1px solid #666; border-radius: 2px; padding: 0 12px; font-family: inherit; font-size: 16px; background: #fff; }
.tda-store .tda-for__hint { margin: 6px 0 0; font-size: 14px; color: #444; }
.tda-store .tda-for--compact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.tda-store .tda-for--compact label { display: inline; margin: 0; font-size: 14px; }
.tda-store .tda-for--compact select { height: 40px; min-width: 180px; font-size: 15px; }

/* ── Cart ──────────────────────────────────────────────── */

.tda-store .woocommerce a.remove { color: #B60004 !important; }
.tda-store .woocommerce a.remove:hover { background: #B60004; color: #fff !important; }
.tda-store .tda-cart-pay-note { margin: 10px 0 0; font-size: 14px; color: #444; text-align: center; }
.tda-store .cart_totals h2 { font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: #004C97; }

/* ── Checkout ──────────────────────────────────────────── */

.tda-store .woocommerce-checkout h3 { font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: #004C97; }
.tda-store .woocommerce form .form-row input.input-text,
.tda-store .woocommerce form .form-row textarea { min-height: 44px; border: 1px solid #666; border-radius: 2px; padding: 8px 10px; font-family: inherit; font-size: 16px; }
.tda-store .tda-pickup-box { background: #f0f4f9; border: 2px solid #004C97; border-radius: 6px; padding: 14px 16px; margin: 0 0 14px; }
.tda-store .tda-pickup-box p { margin: 0; }
.tda-store .tda-pickup-box__title { font-size: 17px; font-weight: 800; }

/* Venmo / Zelle choice cards. */
.tda-store .tda-pay-intro { margin: 0 0 12px; font-size: 14px; color: #444; }
.tda-store .tda-pay-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tda-store .tda-pay-choice { display: flex; gap: 12px; align-items: center; min-height: 64px; padding: 12px 16px; border: 1px solid #8a8a8a; border-radius: 6px; background: #fff; cursor: pointer; }
.tda-store .tda-pay-choice:has(input:checked) { border: 3px solid #004C97; background: #f0f4f9; }
.tda-store .tda-pay-choice input { width: 20px; height: 20px; margin: 0; accent-color: #004C97; }
.tda-store .tda-pay-choice__text { display: flex; flex-direction: column; }
.tda-store .tda-pay-choice__label { font-size: 17px; font-weight: 800; }
.tda-store .tda-pay-choice__hint { font-size: 14px; color: #444; }

/* "All sales are final" agreement. */
.tda-store .tda-agree { border: 3px solid #B60004; border-radius: 8px; padding: 16px 18px; margin: 0 0 16px; background: #fff7f7; }
.tda-store .tda-agree p { margin: 0 0 12px; line-height: 1.45; }
.tda-store .tda-agree__title { font-size: 17px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: #B60004; }
.tda-store .tda-agree__check { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; cursor: pointer; }
.tda-store .tda-agree__check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: #B60004; }

/* ── Thank-you ("Order placed") ────────────────────────── */

.tda-store .tda-paybox { border: 4px solid #B60004; border-radius: 12px; overflow: hidden; margin: 24px 0; }
.tda-store .tda-paybox__head { background: #B60004; color: #fff; padding: 14px 22px; }
.tda-store .tda-paybox__head h2 { margin: 0; color: #fff; font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.tda-store .tda-paybox__body { padding: 20px 22px; }
.tda-store .tda-paybox__way { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #e4e4e4; }
.tda-store .tda-paybox__way h3 { margin: 0 0 10px; font-size: 19px; font-weight: 800; }
.tda-store .tda-paybox__memo { background: #fff1d6; border-radius: 6px; padding: 12px 16px; font-size: 16px; }
.tda-store .tda-paybox__memo strong { font-size: 19px; letter-spacing: .03em; }
.tda-store .tda-paybox__hint { margin: 8px 0 0; font-size: 15px; color: #444; }
.tda-store .tda-btn-venmo { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 26px; background: #0074DE; color: #fff; font-size: 19px; font-weight: 800; text-decoration: none; }
.tda-store .tda-btn-venmo:hover { background: #005fb6; color: #fff; }

.tda-store .tda-steps { background: #f0f4f9; border-radius: 12px; padding: 22px; margin: 24px 0; }
.tda-store .tda-steps h2 { margin: 0 0 16px; font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: #004C97; }
.tda-store .tda-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tda-store .tda-steps__item { background: #fff; border: 1px solid #c9d4e2; border-radius: 8px; padding: 12px 14px; }
.tda-store .tda-steps__item--now { border: 3px solid #B60004; }
.tda-store .tda-steps__item--done { border-color: #004C97; }
.tda-store .tda-steps__when { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #444; }
.tda-store .tda-steps__item--now .tda-steps__when { color: #B60004; }
.tda-store .tda-steps__name { display: block; font-size: 17px; font-weight: 800; margin-top: 4px; }
.tda-store .tda-steps__desc { display: block; font-size: 14px; margin-top: 4px; }
.tda-store .tda-thankyou-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }

/* ── My Orders (Phase 3, store-my-orders.php) ──────────── */

/* Not inside .woocommerce, so undo the theme's list styling (typography.css:
   red bullets via ".content ul li:before", indents, 10px under each li).
   The lists' own classes below set list-style, margin and padding. */
.tda-store .tda-myorders li::before { content: none; display: none; }

.tda-store .tda-myorders__empty { padding: 24px; background: #f0f4f9; border-radius: 12px; font-size: 17px; }
.tda-store .tda-myorders__empty a,
.tda-store .tda-myorders__policy a { color: #B60004; font-weight: 700; }
.tda-store .tda-myorders__policy { margin: 24px 0 0; font-size: 15px; color: #444; }

/* One card per order; unpaid ones get the blue outline. Emails link to
   #order-1042, so leave room above it for the sticky header. */
.tda-store .tda-myorder { border: 1px solid #c9d4e2; border-radius: 12px; margin: 0 0 22px; background: #fff; scroll-margin-top: calc(var(--header-height, 150px) + 16px); }
.tda-store .tda-myorders__shop { margin: 0 0 18px; }
.tda-store .tda-myorder.is-pending { border: 3px solid #004C97; }
.tda-store .tda-myorder:target { box-shadow: 0 0 0 4px rgba(0, 76, 151, .25); }
.tda-store .tda-myorder__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #e4e4e4; }
.tda-store .tda-myorder__title { margin: 0; font-size: 22px; font-weight: 800; }
.tda-store .tda-myorder__meta { margin: 4px 0 0; font-size: 15px; color: #444; }
.tda-store .tda-myorder__badge { flex: none; padding: 6px 12px; border-radius: 4px; font-size: 15px; font-weight: 800; }
.tda-store .tda-myorder__body { padding: 18px 22px 20px; }
.tda-store .tda-myorder.is-cancelled .tda-myorder__body { opacity: .75; }

/* Progress: four bars with a label under each; done steps blue. */
.tda-store .tda-myorder__progress { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 16px; }
.tda-store .tda-myorder__step { padding: 0; font-size: 14px; font-weight: 700; color: #666; }
.tda-store .tda-myorder__bar { display: block; height: 8px; margin-bottom: 8px; border-radius: 4px; background: #d6dbe2; }
.tda-store .tda-myorder__step.is-done { color: #004C97; }
.tda-store .tda-myorder__step.is-done .tda-myorder__bar { background: #004C97; }
.tda-store .tda-myorder .tda-paybox { margin: 0 0 16px; }

.tda-store .tda-myorder__notice { margin: 0 0 16px; padding: 12px 16px; border-radius: 6px; background: #f0f4f9; color: #004C97; font-size: 16px; font-weight: 700; }
.tda-store .tda-myorder__notice--tda-partial,
.tda-store .tda-myorder__notice--tda-ready { background: #e6f2f0; color: #1d5f57; }
.tda-store .tda-myorder__notice--cancelled { background: #eee; color: #444; }

.tda-store .tda-myorder__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tda-store .tda-myorder__item { font-size: 17px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 6px; background: #f4f5f6; }
.tda-store .tda-myorder__qty { color: #555; font-size: 15px; }
.tda-store .tda-myorder__for { display: block; color: #004C97; font-weight: 700; font-size: 15px; }
.tda-store .tda-myorder__was { display: block; color: #666; font-size: 14px; }

/* Per-item state tags. */
.tda-store .tda-myorder__tag { flex: none; padding: 4px 10px; border-radius: 4px; font-size: 14px; font-weight: 700; text-align: right; }
.tda-store .tda-myorder__tag--pending,
.tda-store .tda-myorder__tag--special { background: #fff1d6; color: #7a4a00; }
.tda-store .tda-myorder__tag--paid { background: #e2eaf2; color: #004C97; }
.tda-store .tda-myorder__tag--supplier { background: #f1e6f5; color: #5c2570; }
.tda-store .tda-myorder__tag--ready { background: #e6f2f0; color: #1d5f57; }
.tda-store .tda-myorder__tag--picked { background: #e4e4e4; color: #444; }

@media (max-width: 600px) {
    .tda-store .tda-myorder__head,
    .tda-store .tda-myorder__body { padding-left: 14px; padding-right: 14px; }
    .tda-store .tda-myorder__head { flex-direction: column; }
    .tda-store .tda-myorder__step { font-size: 12px; }
    .tda-store .tda-myorder__item { flex-direction: column; align-items: flex-start; }
    .tda-store .tda-myorder__tag { text-align: left; }
}

/* ── Back link "‹ Store / Uniforms" (store-product.php) ── */
.tda-store .tda-crumbs { margin: 0 0 18px; font-size: 16px; font-weight: 700; }
.tda-store .tda-crumbs a { color: #004C97; text-decoration: none; }
.tda-store .tda-crumbs a:hover,
.tda-store .tda-crumbs a:focus-visible { text-decoration: underline; }
.tda-store .tda-crumbs__sep { margin: 0 6px; color: #999; font-weight: 400; }

/* ── Cart: coupon box as wide as the checkout's (WooCommerce's default
   80px cuts off "Coupon code") ── */
.tda-store .woocommerce-cart-form .coupon #coupon_code { width: 495px; max-width: 100%; min-width: 200px; height: 44px; padding: 6px 12px; box-sizing: border-box; }

/* ── Catalog title "The Traveling Dojo Store" in the theme's blue ── */
.tda-store.post-type-archive-product .page-title { color: #004C97; }

/* ── Item requests (1.26.0) ───────────────────────────────── */

/* Solid blue button: "Request an item" (red stays for buying). */
.tda-store .tda-btn-store--blue { background: #004C97; color: #fff; }
.tda-store .tda-btn-store--blue:hover,
.tda-store .tda-btn-store--blue:focus-visible { background: #003a75; color: #fff; }

/* Store page, under the title: "Don't see what you need?" */
.tda-store .tda-request-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
    margin: 0 0 22px; padding: 14px 18px;
    background: #eef4fb; border-left: 4px solid #004C97; border-radius: 0 6px 6px 0;
}
.tda-store .tda-request-banner p { flex: 1 1 320px; margin: 0; font-size: 16px; line-height: 1.5; color: #1a1a1a; }
.tda-store .tda-request-banner strong { color: #004C97; }

/* A search with no results. */
.tda-store .tda-request-empty { margin: 16px 0 24px; padding: 22px; border: 1px dashed #b9c6d6; border-radius: 8px; text-align: center; }
.tda-store .tda-request-empty p { margin: 0 0 12px; font-size: 16px; color: #333; }

/* The Request an item window (shared .tda-modal look, a little wider). */
.tda-store .tda-request-window .tda-modal { max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; }
.tda-store .tda-request-window h3 { color: #004C97; font-size: 21px; margin: 0 0 6px; }
.tda-store .tda-request-intro { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: #444; }
.tda-store .tda-request-window .tda-select { width: 100%; max-width: none; box-sizing: border-box; }
.tda-store .tda-request-row { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }
.tda-store .tda-request-actions { justify-content: flex-end; margin-top: 6px; }
@media (max-width: 480px) {
    .tda-store .tda-request-row { grid-template-columns: 1fr; gap: 0; }
}

/* My Orders: "Your item requests" -- smaller cards above the orders. */
.tda-store .tda-myrequests { margin: 0 0 28px; }
.tda-store .tda-myrequests__title { margin: 0 0 12px; font-size: 20px; font-weight: 800; color: #004C97; }
.tda-store .tda-myrequest { margin: 0 0 14px; border: 1px solid #c9d4e2; border-radius: 12px; background: #fff; scroll-margin-top: calc(var(--header-height, 150px) + 16px); }
.tda-store .tda-myrequest--quoted { border: 3px solid #004C97; } /* Waiting on them. */
.tda-store .tda-myrequest:target { box-shadow: 0 0 0 4px rgba(0, 76, 151, .25); }
.tda-store .tda-myrequest__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 18px; }
.tda-store .tda-myrequest__title { margin: 0; font-size: 18px; font-weight: 800; }
.tda-store .tda-myrequest__meta { margin: 4px 0 0; font-size: 14px; color: #555; }
.tda-store .tda-myrequest__note { margin: 0; padding: 0 18px 14px; font-size: 15px; color: #444; }
.tda-store .tda-myrequest__note a { color: #B60004; font-weight: 700; }
.tda-store .tda-myrequest__quote { padding: 14px 18px 16px; border-top: 1px solid #e4e4e4; }
.tda-store .tda-myrequest__quote p { margin: 0 0 8px; font-size: 15px; }
.tda-store .tda-myrequest__price { font-size: 20px !important; font-weight: 800; color: #004C97; }
.tda-store .tda-myrequest__price span { font-size: 14px; font-weight: 400; color: #555; }
.tda-store .tda-myrequest__expires { font-size: 13px !important; color: #666; }
.tda-store .tda-myrequest__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tda-store .tda-myrequest__actions form { margin: 0; }
@media (max-width: 560px) {
    .tda-store .tda-myrequest__head { flex-direction: column; gap: 8px; } /* Badge under the title on phones. */
}

/* ── Retail / Our price / Sale (1.28.0, store-prices.php) ──
   "Retail ~~$49.99~~  Our price $39.99  [Save 20%]" in the store grid,
   on product pages and in related products. Crossed-out amounts grey,
   the price we sell at blue, a sale price red. */
.tda-store .price .tda-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.tda-store .tda-price__part { white-space: nowrap; }
.tda-store .tda-price__label { margin-right: 2px; font-size: 13px; font-weight: 400; color: #555; }
/* Crossed-out amounts use the store's existing ".price del" grey. The extra
   classes below outrank its red ".price ins" (meant for sale prices), so the
   price we sell at is blue and only a Sale price is red. */
.tda-store .woocommerce .price .tda-price .tda-price__part ins,
.tda-store .woocommerce ul.products li.product .price .tda-price__part ins { color: #004C97; text-decoration: none; }
.tda-store .woocommerce .price .tda-price .tda-price__part.tda-price__part--sale ins,
.tda-store .woocommerce ul.products li.product .price .tda-price__part--sale ins { color: #B60004; }
.tda-store .tda-price__save {
    align-self: center; padding: 2px 7px; border-radius: 3px;
    background: #fdecec; color: #B60004; font-size: 13px; font-weight: 800; white-space: nowrap;
}
.tda-store ul.products .tda-price__label { font-size: 12px; }
.tda-store ul.products .tda-price__save { font-size: 11px; }

/* ── Cart and checkout touches (1.28.1) ── */
/* "‹ Continue Shopping", top left of the cart page, themed red. */
.tda-store .tda-continue { margin: 0 0 18px; font-size: 16px; font-weight: 700; }
.tda-store .tda-continue a { color: #B60004; text-decoration: none; }
.tda-store .tda-continue a:hover,
.tda-store .tda-continue a:focus-visible { text-decoration: underline; }

/* Checkout: "Pay by Venmo or Zelle... invoice by email", above the agreement box. */
.tda-store .tda-checkout-pay-note { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #004C97; }

/* WooCommerce's small notice icon -- not needed before "Have a coupon?"
   (checkout) or "Your cart is currently empty." (empty cart, 1.30.3). */
.tda-store .woocommerce-form-coupon-toggle .woocommerce-info::before,
.tda-store .cart-empty.woocommerce-info::before { content: none; display: none; }
.tda-store .woocommerce-form-coupon-toggle .woocommerce-info,
.tda-store .cart-empty.woocommerce-info { padding-left: 1.2em; }

/* Cart: red trash can right of the quantity, one click removes the line
   (1.30.3, store-checkout.php). WooCommerce's own "×" column is hidden so
   there's only one remove control (on phones too, where it's a row). */
.tda-store .woocommerce-cart-form .product-remove { display: none; }
.tda-store .tda-qty-trash { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* Wraps on phones: qty, trash, Save for later. */
.tda-store .tda-cart-trash { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; color: #B60004; text-decoration: none; }
.tda-store .tda-cart-trash svg { width: 22px; height: 22px; }
.tda-store .tda-cart-trash:hover,
.tda-store .tda-cart-trash:focus-visible { background: rgba(182, 0, 4, 0.1); color: #8f0003; }

/* ── Empty cart + Saved for later (1.31.0, store-saved.php) ── */
/* Small blue-outline "Save for later" on each cart line. */
.tda-store .tda-btn-store.tda-save-later { min-height: 36px; padding: 6px 12px; font-size: 14px; white-space: nowrap; }

/* "Empty cart": red outline, just left of Update cart (both float right;
   on phones WooCommerce stacks them full width). */
.tda-store .woocommerce-cart-form td.actions > button[name="update_cart"] { float: right; }
.tda-store .woocommerce .woocommerce-cart-form button.button.tda-empty-cart { float: right; margin-right: 10px; background: #fff; color: #B60004; border-color: #B60004; }
.tda-store .woocommerce .woocommerce-cart-form button.button.tda-empty-cart:hover,
.tda-store .woocommerce .woocommerce-cart-form button.button.tda-empty-cart:focus-visible { background: #B60004; color: #fff; }
@media (max-width: 768px) {
    .tda-store .woocommerce-cart-form td.actions > button[name="update_cart"],
    .tda-store .woocommerce .woocommerce-cart-form button.button.tda-empty-cart { float: none; width: 100%; margin: 8px 0 0; }
}

/* The Saved for later list, below the cart. */
.tda-store .tda-saved { clear: both; margin: 32px 0 24px; border: 1px solid #d7dde5; border-radius: 10px; overflow: hidden; background: #fff; }
.tda-store .tda-saved__title { margin: 0; padding: 14px 18px; background: #f0f4f9; color: #004C97; font-size: 20px; }
.tda-store .tda-saved__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #e3e3e3; }
.tda-store .tda-saved__all { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; cursor: pointer; }
.tda-store .tda-saved input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: #004C97; flex: none; }
.tda-store .tda-saved .tda-btn-store { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.tda-store .tda-saved .tda-btn-store:disabled { background: #d6d6d6; color: #4a4a4a; cursor: not-allowed; }
.tda-store .tda-saved__list { list-style: none; margin: 0; padding: 0; }
.tda-store .tda-saved__item { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid #e3e3e3; }
.tda-store .tda-saved__item:last-child { border-bottom: 0; }
.tda-store .tda-saved__thumb { width: 56px; flex: none; }
.tda-store .tda-saved__thumb img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.tda-store .tda-saved__item.is-unavailable .tda-saved__thumb { opacity: .5; }
.tda-store .tda-saved__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tda-store .tda-saved__name { font-weight: 700; color: #004C97; text-decoration: none; }
.tda-store a.tda-saved__name:hover { text-decoration: underline; }
.tda-store .tda-saved__meta { font-size: 14px; color: #555; }
.tda-store .tda-saved__note { font-size: 14px; font-weight: 700; color: #B60004; }
.tda-store .tda-saved__note--short { color: #004C97; } /* Some can still move. */
.tda-store .tda-saved__price { flex: none; min-width: 70px; text-align: right; font-weight: 700; }
.tda-store .tda-saved__actions { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.tda-store .tda-saved__remove { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: none; color: #B60004; cursor: pointer; }
.tda-store .tda-saved__remove svg { width: 22px; height: 22px; }
.tda-store .tda-saved__remove:hover,
.tda-store .tda-saved__remove:focus-visible { background: rgba(182, 0, 4, 0.1); color: #8f0003; }
@media (max-width: 600px) {
    .tda-store .tda-saved__item { flex-wrap: wrap; }
    .tda-store .tda-saved__info { flex-basis: calc(100% - 110px); }
    .tda-store .tda-saved__price { min-width: 0; margin-left: 34px; text-align: left; }
    .tda-store .tda-saved__actions { margin-left: auto; }
}

/* Under a greyed Add to cart: what still needs choosing (tda-store.js). */
.tda-store .tda-cart-hint { flex-basis: 100%; margin: 8px 0 0; font-size: 14px; font-weight: 700; color: #B60004; }
.tda-store .tda-cart-hint[hidden] { display: none; }

/* ── Corner ribbons and the Member Price filter (store-prices.php) ──
   One sash across the photo's top-right corner: red "Sale" while an item
   is on sale (1.30.1), otherwise blue "Member Price". The card (store
   grid) or the photo gallery (product page) is its positioning box. */
.tda-store .woocommerce ul.products li.product,
.tda-store .woocommerce-product-gallery { position: relative; }
.tda-store .tda-ribbon {
    position: absolute; top: 0; right: 0; z-index: 5;
    width: 130px; height: 130px; overflow: hidden; pointer-events: none;
}
.tda-store .tda-ribbon > span {
    position: absolute; top: 34px; right: -46px; width: 200px;
    transform: rotate(45deg); padding: 6px 0;
    background: #004C97; color: #fff; text-align: center;
    font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}
.tda-store .tda-ribbon--sale > span { background: #B60004; } /* Themed red; Member Price keeps the blue. */
/* Larger on the product page. */
.tda-store .woocommerce-product-gallery .tda-ribbon { width: 170px; height: 170px; }
.tda-store .woocommerce-product-gallery .tda-ribbon > span { top: 44px; right: -58px; width: 260px; font-size: 14px; padding: 8px 0; }
/* WooCommerce's zoom button normally sits top-right: move it out of the ribbon's way. */
.tda-store .woocommerce-product-gallery.has-tda-ribbon .woocommerce-product-gallery__trigger { right: auto; left: .5em; }

/* Store page filter: "★ Member Price", red like the deal it points to. */
.tda-store .tda-deal-filter { display: flex; margin-right: auto; } /* Stays beside the brand buttons; Category keeps the right. */
.tda-store .tda-pill--deal { border-color: #B60004; color: #B60004; gap: 6px; }
.tda-store .tda-pill--deal:hover { border-color: #B60004; color: #B60004; background: #fdecec; }
.tda-store .tda-pill--deal.is-active { background: #B60004; border-color: #B60004; color: #fff; }

/* ── Member pricing explained (1.30.2, store-prices.php) ── */
/* Store page, under the request box: red accent so it stands apart from the blue one. */
.tda-store .tda-member-note {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
    margin: 0 0 22px; padding: 14px 18px;
    background: #fdf1f1; border-left: 4px solid #B60004; border-radius: 0 6px 6px 0;
}
.tda-store .tda-member-note p { flex: 1 1 320px; margin: 0; font-size: 16px; line-height: 1.5; color: #1a1a1a; }
.tda-store .tda-member-note strong { color: #B60004; }
.tda-store .tda-member-note .tda-pill--deal { background: #fff; }
/* Request box directly above: a little less space between the two. */
.tda-store .tda-request-banner + .tda-member-note { margin-top: -10px; }
/* Product page, under the price. */
.tda-store .tda-member-product-note { margin: 6px 0 16px; padding: 10px 14px; background: #f0f4f9; border-radius: 6px; font-size: 14px; line-height: 1.5; color: #1a1a1a; }
.tda-store .tda-member-product-note strong { color: #004C97; }
