/* =============================================================
   IDC — WOOCOMMERCE FULL THEME
   Covers: Shop, Single Product, Cart, Checkout, My Account,
           Order Received, Buy Tickets page, My Account dashboard
============================================================= */


/* ============================================================
   1. PAGE WRAPPER & LAYOUT
============================================================ */

.woo-layout {
    min-height: 60vh;
    padding: 80px 0 100px;
    background: var(--bg);
}

.woo-container {
    max-width: 1240px;
}

/* Page title bar shown above WC pages */
.woo-page-hero {
    background: linear-gradient(180deg, rgba(var(--bg-rgb),0) 0%, var(--bg) 100%),
                linear-gradient(135deg, var(--bg-card) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
    padding: 100px 0 48px;
    text-align: center;
}

.woo-page-hero .section-label {
    display: block;
    margin-bottom: 12px;
}

.woo-page-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
    line-height: 1.1;
}

.woo-page-hero-title span { color: var(--gold); }

.woo-page-hero p {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 480px;
    margin: 0 auto;
}


/* ============================================================
   2. WC NOTICES
============================================================ */

.woocommerce-notices-wrapper {
    margin-bottom: 32px;
}

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    list-style: none;
    padding: 16px 20px 16px 52px;
    border-radius: var(--radius-md);
    margin: 0 0 16px;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    font-size: 1.1rem;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.woocommerce-message {
    background: rgba(var(--gold-rgb),0.08);
    border: 1px solid rgba(var(--gold-rgb),0.3);
    color: var(--gold);
}

.woocommerce-message::before { content: '✓'; color: var(--gold); }

.woocommerce-error {
    background: rgba(var(--crimson-rgb),0.08);
    border: 1px solid rgba(var(--crimson-rgb),0.35);
    color: var(--error);
}

.woocommerce-error::before { content: '✕'; color: var(--error); }

.woocommerce-info {
    background: rgba(var(--saffron-rgb),0.06);
    border: 1px solid rgba(var(--saffron-rgb),0.25);
    color: var(--saffron);
}

.woocommerce-info::before { content: 'ℹ'; color: var(--saffron); }

.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
    color: inherit;
    text-decoration: underline;
}

/* View cart / Continue shopping button inside notices */
.woocommerce-message .button,
.woocommerce-info .button {
    background: var(--gold);
    color: var(--bg);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
    background: var(--text);
    color: var(--bg);
}


/* ============================================================
   3. BREADCRUMBS
============================================================ */

.woocommerce-breadcrumb {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.woocommerce-breadcrumb a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
}

.woocommerce-breadcrumb a:hover { color: var(--gold); }

.woocommerce-breadcrumb .breadcrumb-separator { color: var(--border-hover); }


/* ============================================================
   4. SHOP PAGE (ARCHIVE)
============================================================ */

/* Top bar: result count + ordering */
.woocommerce-products-header {
    margin-bottom: 40px;
    text-align: center;
}

.woocommerce-products-header__title.page-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}

.woocommerce-result-count {
    color: var(--text-dim);
    font-size: 0.82rem;
    margin: 0 0 8px;
}

.woocommerce-ordering {
    margin-bottom: 32px;
    display: flex;
    justify-content: flex-end;
}

.woocommerce-ordering select {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.82rem;
    padding: 8px 32px 8px 14px;
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C9A87C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.2s;
}

.woocommerce-ordering select:focus { border-color: var(--gold); }

/* Product grid */
.idc-products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

/* Individual product card */
.idc-products-grid li.product {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.idc-products-grid li.product:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--gold-rgb),0.3);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* Product image */
.idc-products-grid li.product a.woocommerce-LoopProduct-link,
.idc-products-grid li.product a img {
    display: block;
    width: 100%;
}

.idc-products-grid li.product .woocommerce-LoopProduct-link img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.idc-products-grid li.product:hover .woocommerce-LoopProduct-link img {
    transform: scale(1.04);
}

/* Product content area (below image) */
.idc-products-grid li.product .woocommerce-loop-product__title,
.idc-products-grid li.product .price,
.idc-products-grid li.product .button {
    display: block;
    padding: 0 24px;
}

.idc-products-grid li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin: 20px 0 8px;
    padding: 0 24px;
    line-height: 1.3;
}

.idc-products-grid li.product .price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 20px;
    font-family: var(--font-body);
}

.idc-products-grid li.product .price del {
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 400;
    margin-right: 6px;
}

.idc-products-grid li.product .price ins {
    text-decoration: none;
    color: var(--gold);
}

/* Add to cart button */
.idc-products-grid li.product .button.add_to_cart_button,
.idc-products-grid li.product .button.product_type_simple,
.idc-products-grid li.product a.button {
    display: block;
    margin: 0 24px 24px;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb),0.4);
    border-radius: var(--radius-pill);
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    width: auto !important;
}

.idc-products-grid li.product .button.add_to_cart_button:hover,
.idc-products-grid li.product a.button:hover {
    background: var(--gold);
    color: var(--bg);
    border-color: var(--gold);
    box-shadow: 0 4px 20px rgba(var(--gold-rgb),0.35);
}

/* Loading state */
.idc-products-grid li.product .add_to_cart_button.loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Added-to-cart check */
.idc-products-grid li.product .add_to_cart_button.added::before {
    content: '✓ ';
}

/* No products found */
.woocommerce-info.woocommerce-no-products-found {
    text-align: center;
    padding: 60px 24px;
    justify-content: center;
}


/* ============================================================
   5. SINGLE PRODUCT PAGE
============================================================ */

.single-product div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 60px;
}

/* Gallery */
.single-product .woocommerce-product-gallery {
    position: sticky;
    top: 90px;
}

.single-product .woocommerce-product-gallery__image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.single-product .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    display: block;
}

.single-product .flex-control-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 0;
    list-style: none;
}

.single-product .flex-control-thumbs li {
    flex: 1;
    max-width: 80px;
}

.single-product .flex-control-thumbs img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.2s;
    opacity: 0.7;
}

.single-product .flex-control-thumbs .flex-active img,
.single-product .flex-control-thumbs img:hover {
    border-color: var(--gold);
    opacity: 1;
}

/* Product summary */
.single-product .summary {
    padding-top: 8px;
}

.single-product .product_title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
    line-height: 1.15;
}

.single-product .woocommerce-product-rating {
    display: none; /* Hide ratings for ticket products */
}

.single-product .price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 24px;
    font-family: var(--font-body);
    display: block;
}

.single-product .price del {
    color: var(--text-dim);
    font-size: 1.2rem;
    font-weight: 400;
    margin-right: 8px;
}

.single-product .price ins { text-decoration: none; }

.single-product .woocommerce-product-details__short-description {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 28px;
}

/* Quantity + Add to cart */
.single-product form.cart {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.single-product .quantity {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.single-product .quantity input.qty {
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    width: 52px;
    padding: 12px 0;
    outline: none;
    -moz-appearance: textfield;
}

.single-product .quantity input.qty::-webkit-inner-spin-button,
.single-product .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }

.single-product .single_add_to_cart_button {
    flex: 1;
    background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
    border: none;
    border-radius: var(--radius-pill);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 32px;
    cursor: pointer;
    transition: var(--transition);
    min-width: 180px;
    box-shadow: 0 4px 20px rgba(var(--crimson-rgb),0.35);
}

.single-product .single_add_to_cart_button:hover {
    background: linear-gradient(135deg, var(--crimson-grad), var(--crimson-deep));
    box-shadow: 0 8px 30px rgba(var(--crimson-rgb),0.5);
    transform: translateY(-2px);
}

.single-product .single_add_to_cart_button.loading { opacity: 0.7; cursor: wait; }

/* Product meta */
.single-product .product_meta {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 16px;
}

.single-product .product_meta span { display: block; margin-bottom: 4px; }
.single-product .product_meta a { color: var(--gold); text-decoration: none; }

/* Tabs */
.single-product .woocommerce-tabs {
    grid-column: 1 / -1;
    margin-top: 20px;
    border-top: 1px solid var(--border);
    padding-top: 40px;
}

.single-product .woocommerce-tabs ul.tabs {
    list-style: none;
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0 0 32px;
    border-bottom: 1px solid var(--border);
}

.single-product .woocommerce-tabs ul.tabs::before { display: none; }

.single-product .woocommerce-tabs ul.tabs li {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none; }

.single-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 14px 24px;
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}

.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

.single-product .woocommerce-Tabs-panel {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.8;
}

.single-product .woocommerce-Tabs-panel h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--text);
    margin-bottom: 16px;
}

/* Stock status */
.single-product .stock {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    display: inline-block;
    margin-bottom: 20px;
}

.single-product .in-stock {
    background: rgba(var(--success-rgb),0.1);
    color: var(--success);
    border: 1px solid rgba(var(--success-rgb),0.25);
}

.single-product .out-of-stock {
    background: rgba(var(--crimson-rgb),0.1);
    color: var(--error);
    border: 1px solid rgba(var(--crimson-rgb),0.25);
}


/* ============================================================
   6. CART PAGE
============================================================ */

.woocommerce-cart .woo-layout { padding-top: 60px; }

/* Cart layout: table left, totals right */
.woocommerce-cart-form,
.cart-collaterals {
    width: 100%;
}

/* Cart table */
table.shop_table,
table.woocommerce-cart-form__contents {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-card);
    margin-bottom: 40px;
}

table.shop_table thead tr {
    background: rgba(var(--gold-rgb),0.06);
    border-bottom: 1px solid var(--border);
}

table.shop_table th {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 16px 20px;
    text-align: left;
}

table.shop_table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

table.shop_table tbody tr:last-child { border-bottom: none; }
table.shop_table tbody tr:hover { background: rgba(255,255,255,0.02); }

table.shop_table td {
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.92rem;
    vertical-align: middle;
}

/* Remove button */
table.shop_table .product-remove a.remove {
    color: var(--text-dim) !important;
    font-size: 1.4rem;
    line-height: 1;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    transition: var(--transition);
}

table.shop_table .product-remove a.remove:hover {
    background: rgba(var(--crimson-rgb),0.15);
    border-color: var(--crimson);
    color: var(--error)!important;
}

/* Product thumbnail */
table.shop_table .product-thumbnail img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

/* Product name link */
table.shop_table .product-name a {
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s;
}

table.shop_table .product-name a:hover { color: var(--gold); }

/* Price + subtotal */
table.shop_table .product-price .woocommerce-Price-amount,
table.shop_table .product-subtotal .woocommerce-Price-amount {
    color: var(--gold);
    font-weight: 700;
    font-size: 1rem;
}

/* Quantity in cart */
table.shop_table .product-quantity .quantity {
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    overflow: hidden;
    width: fit-content;
}

table.shop_table .product-quantity .quantity input.qty {
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    width: 44px;
    padding: 8px 0;
    outline: none;
    -moz-appearance: textfield;
}

table.shop_table .product-quantity .quantity input.qty::-webkit-inner-spin-button,
table.shop_table .product-quantity .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Update cart button */
.woocommerce-cart-form .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.woocommerce-cart-form .coupon {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.woocommerce-cart-form .coupon input#coupon_code {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.88rem;
    padding: 10px 18px;
    outline: none;
    width: 200px;
    transition: border-color 0.2s;
}

.woocommerce-cart-form .coupon input#coupon_code::placeholder { color: var(--text-dim); }
.woocommerce-cart-form .coupon input#coupon_code:focus { border-color: var(--gold); }

.woocommerce-cart-form .coupon button,
.woocommerce-cart-form .button[name="update_cart"] {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 22px;
    cursor: pointer;
    transition: var(--transition);
}

.woocommerce-cart-form .coupon button:hover,
.woocommerce-cart-form .button[name="update_cart"]:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* Cart totals */
.cart-collaterals {
    display: flex;
    justify-content: flex-end;
}

.cart_totals {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px;
    width: 100%;
    max-width: 460px;
}

.cart_totals h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.cart_totals table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.cart_totals table tr {
    border-bottom: 1px solid var(--border);
}

.cart_totals table tr:last-child { border-bottom: none; }

.cart_totals table th,
.cart_totals table td {
    padding: 14px 0;
    font-size: 0.9rem;
}

.cart_totals table th {
    color: var(--text-dim);
    font-weight: 500;
    text-align: left;
}

.cart_totals table td {
    color: var(--text);
    text-align: right;
    font-weight: 600;
}

.cart_totals table .order-total th,
.cart_totals table .order-total td { font-size: 1.1rem; }

.cart_totals table .order-total td .woocommerce-Price-amount {
    color: var(--gold);
    font-size: 1.3rem;
    font-weight: 700;
}

/* Shipping methods */
.cart_totals .woocommerce-shipping-destination { color: var(--text-dim); font-size: 0.82rem; }
.cart_totals .shipping-calculator-button { color: var(--gold); font-size: 0.82rem; text-decoration: none; }

/* Proceed to checkout */
.wc-proceed-to-checkout {
    margin-top: 0;
}

.wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
    border: none;
    border-radius: var(--radius-pill);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 16px 32px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(var(--crimson-rgb),0.35);
}

.wc-proceed-to-checkout a.checkout-button:hover {
    background: linear-gradient(135deg, var(--crimson-grad), var(--crimson-deep));
    box-shadow: 0 8px 30px rgba(var(--crimson-rgb),0.5);
    transform: translateY(-2px);
}

/* Empty cart */
.cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 1rem;
}

.cart-empty::before {
    content: '🛒';
    display: block;
    font-size: 3rem;
    margin-bottom: 16px;
}

.return-to-shop .button {
    display: inline-block;
    padding: 12px 28px;
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb),0.4);
    border-radius: var(--radius-pill);
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 16px;
    transition: var(--transition);
}

.return-to-shop .button:hover {
    background: var(--gold);
    color: var(--bg);
}


/* ============================================================
   7. CHECKOUT PAGE
============================================================ */

.woocommerce-checkout .woo-layout { padding-top: 60px; }

/* Two-column checkout layout */
.woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    float: none;
    width: 100%;
}

/* Section headings */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

/* Login / register prompt */
.woocommerce-checkout .woocommerce-info {
    margin-bottom: 32px;
}

/* Checkout form rows */
.woocommerce-checkout .form-row,
.woocommerce-form-row {
    margin-bottom: 20px;
    position: relative;
}

.woocommerce-checkout .form-row label,
.woocommerce-form-row label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.woocommerce-checkout .form-row .required,
.woocommerce-form-row .required { color: var(--crimson); }

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-form-row input,
.woocommerce-form-row select,
.woocommerce-form-row textarea {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.92rem;
    padding: 12px 16px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-form-row input:focus,
.woocommerce-form-row select:focus,
.woocommerce-form-row textarea:focus {
    border-color: var(--crimson);
    box-shadow: 0 0 0 3px rgba(var(--crimson-rgb),0.12);
}

.woocommerce-checkout .form-row input::placeholder,
.woocommerce-checkout .form-row textarea::placeholder { color: var(--text-dim); }

/* Select arrow */
.woocommerce-checkout .form-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C9A87C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

/* Two-field rows */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    float: none;
    width: 100%;
}

.woocommerce-checkout .form-row-first + .form-row-last {
    margin-top: 0;
}

/* Field validation error */
.woocommerce-checkout .form-row.woocommerce-invalid input,
.woocommerce-checkout .form-row.woocommerce-invalid select {
    border-color: var(--crimson);
}

.woocommerce-checkout .form-row.woocommerce-validated input,
.woocommerce-checkout .form-row.woocommerce-validated select {
    border-color: var(--success);
}

/* Checkbox styling */
.woocommerce-checkout .form-row .input-checkbox,
.woocommerce-checkout input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--crimson);
    margin-right: 8px;
    cursor: pointer;
}

/* Password field toggle */
.woocommerce-password-strength { font-size: 0.78rem; margin-top: 6px; }

/* Checkbox row inline */
.woocommerce-checkout .form-row input[type="checkbox"] {
    width: auto;
}

/* Order review box */
#order_review {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px;
}

#order_review_heading {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 1.25rem;
}

/* Order review table */
#order_review table.shop_table {
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 24px;
}

#order_review table.shop_table thead tr {
    background: transparent;
    border-bottom: 1px solid var(--border);
}

#order_review table.shop_table th,
#order_review table.shop_table td { padding: 12px 0; }

#order_review table.shop_table .product-name { color: var(--text); font-weight: 500; }
#order_review table.shop_table .product-total .woocommerce-Price-amount { color: var(--gold); font-weight: 700; }

#order_review table.shop_table tfoot tr th { color: var(--text-dim); font-weight: 500; }
#order_review table.shop_table tfoot .order-total th,
#order_review table.shop_table tfoot .order-total td { font-size: 1.05rem; }
#order_review table.shop_table tfoot .order-total td .woocommerce-Price-amount {
    color: var(--gold);
    font-size: 1.2rem;
    font-weight: 700;
}

/* Payment methods */
#payment {
    background: transparent;
    margin-top: 24px;
    border-radius: 0;
}

.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg);
}

.payment_methods li.payment_method_cod,
.payment_methods li {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.payment_methods li:last-child { border-bottom: none; }
.payment_methods li:hover { background: rgba(255,255,255,0.02); }

.payment_methods li label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.payment_methods li input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--crimson);
    flex-shrink: 0;
    cursor: pointer;
}

.payment_methods .payment_box {
    background: rgba(var(--gold-rgb),0.04);
    border: 1px solid rgba(var(--gold-rgb),0.1);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Place order button */
#place_order {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
    border: none;
    border-radius: var(--radius-pill);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 18px 32px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 24px rgba(var(--crimson-rgb),0.4);
    margin-top: 8px;
}

#place_order:hover {
    background: linear-gradient(135deg, var(--crimson-grad), var(--crimson-deep));
    box-shadow: 0 8px 32px rgba(var(--crimson-rgb),0.55);
    transform: translateY(-2px);
}

/* Terms & conditions */
.woocommerce-terms-and-conditions-wrapper {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-bottom: 16px;
}

.woocommerce-terms-and-conditions-wrapper a { color: var(--gold); }

/* Checkout login form */
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-form-coupon {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px 32px;
    margin-bottom: 32px;
}

.woocommerce-checkout .woocommerce-form-login h3,
.woocommerce-checkout .woocommerce-form-coupon h3 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    border-bottom: none;
    padding-bottom: 0;
}

.woocommerce-checkout .woocommerce-form-login .button,
.woocommerce-checkout .woocommerce-form-coupon .button {
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb),0.4);
    border-radius: var(--radius-pill);
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 24px;
    cursor: pointer;
    transition: var(--transition);
}

.woocommerce-checkout .woocommerce-form-login .button:hover,
.woocommerce-checkout .woocommerce-form-coupon .button:hover {
    background: var(--gold);
    color: var(--bg);
}


/* ============================================================
   8. ORDER RECEIVED / THANK YOU PAGE
============================================================ */

.woocommerce-order {
    max-width: 720px;
    margin: 0 auto;
}

.woocommerce-order-overview {
    display: grid;
    /*
     * auto-fit, not repeat(4). WooCommerce prints FIVE items here - order number,
     * date, email, total and payment method - so a four-column grid dropped the
     * fifth onto a row of its own, left-aligned and still carrying its right-hand
     * border. That is the broken second row on the thank-you page.
     *
     * auto-fit also fixes the cause of "Payment method:" splitting across two
     * lines: at a quarter of the width that label had nowhere to go. Cells now
     * size to their content down to a 190px floor.
     */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.woocommerce-order-overview li {
    padding: 24px 20px;
    /* Both edges, because with auto-fit a cell can now be at the end of a row or
       above another row; :last-child alone left a dangling border. The container
       clips the overhang with overflow:hidden. */
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.woocommerce-order-overview li strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    /*
     * NOT uppercase, and no letter-spacing.
     *
     * <strong> holds the VALUE here, not the label - WooCommerce prints
     * "Order number: <strong>15002</strong>". So this rule was uppercasing the
     * data, which turned the customer's address into RAJEEVANC1997@GMAIL.COM.
     * That is harder to read, and it misrepresents an address whose local part
     * may be case-sensitive. The date lost its normal casing the same way.
     */
    text-transform: none;
    letter-spacing: 0;
    color: var(--gold);
    margin-top: 6px;
    /* A long email must wrap rather than widen its column. */
    overflow-wrap: anywhere;
}

/*
 * The label is the untagged text in the <li>, so it is styled on the li itself.
 * Small, dim and uppercase is right for a label - it was being applied to the
 * value instead.
 */
.woocommerce-order-overview li {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.woocommerce-thankyou-order-received {
    background: rgba(var(--success-rgb),0.06);
    border: 1px solid rgba(var(--success-rgb),0.2);
    border-radius: var(--radius-xl);
    padding: 32px;
    text-align: center;
    color: var(--success);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 36px;
}

.woocommerce-thankyou-order-received::before {
    content: '✓';
    display: block;
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.woocommerce-order-details,
.woocommerce-customer-details {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 32px;
    margin-bottom: 28px;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}


/* ============================================================
   9. MY ACCOUNT PAGES (WC native content)
============================================================ */

.myaccount-section {
    min-height: 70vh;
    padding: 100px 0;
    background: var(--bg);
}

/* Dashboard header */
.myaccount-header {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 32px 40px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.myaccount-avatar {
    flex-shrink: 0;
}

.myaccount-gravatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50%;
    border: 3px solid var(--gold);
    display: block;
}

.myaccount-welcome {
    flex: 1;
    min-width: 0;
}

.myaccount-welcome .section-label { display: block; margin-bottom: 4px; }

.myaccount-name {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
    line-height: 1.2;
}

.myaccount-email { font-size: 0.88rem; color: var(--text-dim); }

.myaccount-logout-btn { flex-shrink: 0; }

/* Stats bar */
.myaccount-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.ma-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px 24px;
    text-align: center;
    transition: border-color 0.3s;
}

.ma-stat:hover { border-color: rgba(var(--gold-rgb),0.3); }

.ma-stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}

.ma-stat-value.gold { color: var(--gold); }

.ma-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Grid layout */
.myaccount-grid {
    display: grid;
    /*
     * minmax(0, 1fr), not a bare 1fr. A bare 1fr track's implicit minimum
     * width is its content's natural (min-content) size, not zero — so any
     * wide-enough content placed in this column (a fixed-width card row, a
     * long unbroken string) forces the TRACK ITSELF to grow past the
     * viewport, dragging the whole page into horizontal scroll instead of
     * scrolling inside its own box. minmax(0, 1fr) caps the minimum at zero,
     * which is what actually lets an overflow:auto child scroll internally
     * as intended.
     */
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* Sidebar nav */
.myaccount-nav {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
    position: sticky;
    top: 90px;
}

.myaccount-nav h4 {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.myaccount-nav nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ma-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    position: relative;
}

.ma-nav-link:hover { background: rgba(255,255,255,0.04); color: var(--text); }

.ma-nav-link.active {
    background: rgba(var(--gold-rgb),0.08);
    color: var(--gold);
    border: 1px solid rgba(var(--gold-rgb),0.15);
}

.ma-nav-badge {
    background: var(--crimson);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    margin-left: auto;
}

.ma-nav-link--logout { margin-top: 8px; color: var(--text-dim); }
.ma-nav-link--logout:hover { color: var(--error); background: rgba(var(--crimson-rgb),0.08); }

/* WC native My Account content */
.myaccount-content {
    /* Same defensive reasoning as .myaccount-grid's minmax(0, 1fr) above: a
       grid item's own implicit minimum width also defaults to its content's
       natural size, not zero. Explicit here so nothing placed inside this
       column can ever push it — or the page — wider than the viewport again. */
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px;
    min-height: 300px;
}

/* WC navigation (fallback if our custom nav not used) */
.woocommerce-MyAccount-navigation {
    display: none; /* Hidden — we use custom sidebar */
}

/* WC account content */
.woocommerce-MyAccount-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.8;
}

.woocommerce-MyAccount-content a {
    color: var(--gold);
    text-decoration: none;
}

.woocommerce-MyAccount-content a:hover { text-decoration: underline; }

/* Orders table inside My Account */
.woocommerce-orders-table,
.woocommerce-MyAccount-content table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.88rem;
}

.woocommerce-orders-table thead tr,
.woocommerce-MyAccount-content table thead tr {
    border-bottom: 1px solid var(--border);
}

.woocommerce-orders-table th,
.woocommerce-MyAccount-content table th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 10px 12px;
    text-align: left;
}

.woocommerce-orders-table tbody tr,
.woocommerce-MyAccount-content table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.woocommerce-orders-table tbody tr:last-child,
.woocommerce-MyAccount-content table tbody tr:last-child { border-bottom: none; }

.woocommerce-orders-table tbody tr:hover,
.woocommerce-MyAccount-content table tbody tr:hover { background: rgba(255,255,255,0.02); }

.woocommerce-orders-table td,
.woocommerce-MyAccount-content table td {
    padding: 14px 12px;
    color: var(--text-muted);
    vertical-align: middle;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a,
.woocommerce-MyAccount-content table td a {
    color: var(--gold);
    font-weight: 600;
    text-decoration: none;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover { text-decoration: underline; }

/* Order status badges */
mark.order-status,
.woocommerce-orders-table .wc-item-meta,
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    display: inline-block;
    background: transparent;
}

.woocommerce-orders-table .wc-item-meta { color: var(--text-muted); }

mark.order-status.status-pending,
.status-pending mark { background: rgba(var(--saffron-rgb),0.1); color: var(--saffron); border: 1px solid rgba(var(--saffron-rgb),0.2); }
mark.order-status.status-processing,
.status-processing mark { background: rgba(var(--gold-rgb),0.1); color: var(--gold); border: 1px solid rgba(var(--gold-rgb),0.2); }
mark.order-status.status-completed,
.status-completed mark { background: rgba(var(--success-rgb),0.08); color: var(--success); border: 1px solid rgba(var(--success-rgb),0.2); }
mark.order-status.status-cancelled,
.status-cancelled mark { background: rgba(var(--crimson-rgb),0.08); color: var(--error); border: 1px solid rgba(var(--crimson-rgb),0.2); }
mark.order-status.status-on-hold,
.status-on-hold mark { background: rgba(var(--neutral-rgb),0.1); color: var(--neutral); border: 1px solid rgba(var(--neutral-rgb),0.2); }

/* Account forms (edit profile, address etc) */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-MyAccount-content form {
    max-width: 560px;
}

.woocommerce-MyAccount-content fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    margin: 24px 0;
}

.woocommerce-MyAccount-content fieldset legend {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    padding: 0 12px;
}

.woocommerce-MyAccount-content .form-row {
    margin-bottom: 20px;
}

.woocommerce-MyAccount-content .form-row label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.woocommerce-MyAccount-content .form-row input,
.woocommerce-MyAccount-content .form-row select,
.woocommerce-MyAccount-content .form-row textarea {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.92rem;
    padding: 12px 16px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-MyAccount-content .form-row select:focus,
.woocommerce-MyAccount-content .form-row textarea:focus {
    border-color: var(--crimson);
    box-shadow: 0 0 0 3px rgba(var(--crimson-rgb),0.12);
}

.woocommerce-MyAccount-content .form-row input::placeholder { color: var(--text-dim); }

.woocommerce-MyAccount-content .button[type="submit"],
.woocommerce-MyAccount-content .woocommerce-Button {
    background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
    border: none;
    border-radius: var(--radius-pill);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 13px 32px;
    cursor: pointer;
    transition: var(--transition);
    display: inline-block;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(var(--crimson-rgb),0.3);
    margin-top: 8px;
}

.woocommerce-MyAccount-content .button[type="submit"]:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover {
    box-shadow: 0 8px 24px rgba(var(--crimson-rgb),0.45);
    transform: translateY(-1px);
}

/* View order / secondary buttons */
.woocommerce-MyAccount-content .button,
.woocommerce-orders-table .woocommerce-button {
    display: inline-block;
    padding: 8px 18px;
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb),0.35);
    border-radius: var(--radius-pill);
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-orders-table .woocommerce-button:hover {
    background: var(--gold);
    color: var(--bg);
    border-color: var(--gold);
}


/* ============================================================
   10. PAGINATION
============================================================ */

.woocommerce-pagination,
nav.woocommerce-pagination {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

.woocommerce-pagination ul {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.woocommerce-pagination ul li a {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.woocommerce-pagination ul li a:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.woocommerce-pagination ul li span.current {
    background: var(--crimson);
    border: 1px solid var(--crimson);
    color: var(--text);
}


/* ============================================================
   11. SHARED WC FORM ELEMENTS
============================================================ */

/* Generic WC select2 */
.select2-container--default .select2-selection--single {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    height: 46px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text) !important;
    line-height: 46px !important;
    padding-left: 16px !important;
    font-family: var(--font-body) !important;
    font-size: 0.92rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
}

.select2-dropdown {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
}

.select2-container--default .select2-results__option--highlighted {
    background: rgba(var(--gold-rgb),0.12) !important;
    color: var(--gold) !important;
}

.select2-container--default .select2-results__option {
    color: var(--text-muted) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
}

.select2-search__field {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
}


/* ============================================================
   12. BUY TICKETS PAGE (custom template)
============================================================ */

.ticket-event-strip {
    background: linear-gradient(135deg, var(--crimson-dark), rgba(var(--bg-rgb),0.9));
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
}

.ticket-event-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.tes-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(var(--text-rgb),0.85);
    padding: 6px 24px;
}

.tes-item svg { color: var(--gold); flex-shrink: 0; }

.tes-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.15);
}

/* Ticket cards grid */
.tickets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
}

.ticket-card {
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    border-top: 3px solid transparent;
}

.ticket-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}

.ticket-card--gold { border-top-color: var(--gold); }
.ticket-card--crimson { border-top-color: var(--crimson); }
.ticket-card--saffron { border-top-color: var(--saffron); }

.ticket-card--popular {
    border-color: rgba(var(--gold-rgb),0.35);
    box-shadow: 0 0 0 1px rgba(var(--gold-rgb),0.15), 0 20px 60px rgba(0,0,0,0.35);
}

.ticket-popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold), var(--gold-shade));
    color: var(--bg);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 18px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(var(--gold-rgb),0.4);
}

.ticket-note {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 16px;
    font-style: italic;
}

.ticket-card-header { text-align: center; margin-bottom: 32px; }

.ticket-icon { font-size: 2.2rem; display: block; margin-bottom: 12px; }

.ticket-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
}

.ticket-price { margin-bottom: 16px; }

.price-amount {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    display: block;
}

.price-per {
    font-size: 0.78rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ticket-stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    color: var(--text-dim);
    font-weight: 600;
}

.stock-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    animation: pulse-stock 2s ease-in-out infinite;
}

.stock-dot--low { background: var(--saffron); }

@keyframes pulse-stock {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.ticket-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 24px;
}

.ticket-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.ticket-features li svg { color: var(--gold); flex-shrink: 0; }

.ticket-cta-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}

/* How It Works */
.how-it-works-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.hiw-step {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    text-align: center;
}

.hiw-number {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--crimson);
    margin-bottom: 12px;
}

.hiw-icon { font-size: 2rem; margin-bottom: 12px; display: block; }

.hiw-step h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}

.hiw-step p { font-size: 0.82rem; color: var(--text-muted); margin: 0; line-height: 1.6; }

.hiw-arrow {
    font-size: 1.4rem;
    color: var(--text-dim);
    text-align: center;
}

/* FAQ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-card);
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-item:last-child { border-bottom: none; }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 22px 28px;
    text-align: left;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.faq-question:hover { background: rgba(255,255,255,0.03); }

.faq-chevron {
    flex-shrink: 0;
    color: var(--text-dim);
    transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-question[aria-expanded="true"] { color: var(--gold); }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-answer.open { max-height: 400px; }

.faq-answer p {
    padding: 0 28px 22px;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.8;
    margin: 0;
}


/* ============================================================
   13. RESPONSIVE
============================================================ */

@media (max-width: 1024px) {
    .idc-products-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .single-product div.product { grid-template-columns: 1fr; gap: 36px; }
    .single-product .woocommerce-product-gallery { position: static; }
    .woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
    .tickets-grid { grid-template-columns: repeat(2, 1fr); }
    .how-it-works-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .hiw-arrow { display: none; }
    .myaccount-grid { grid-template-columns: 200px 1fr; }
    .woocommerce-order-overview { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .woo-layout { padding: 60px 0 80px; }
    .idc-products-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .tickets-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
    .myaccount-grid { grid-template-columns: 1fr; }
    .myaccount-nav { position: static; }
    .myaccount-header { padding: 24px; gap: 16px; }
    .myaccount-stats { grid-template-columns: 1fr; gap: 12px; }
    .cart_totals { max-width: 100%; }
    .woocommerce-order-overview { grid-template-columns: repeat(2, 1fr); }
    #order_review { padding: 24px; }
    .how-it-works-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .woo-page-hero { padding: 80px 0 36px; }
    .ticket-card { padding: 28px 20px; }
    .tickets-grid { max-width: 100%; }
    .cart_totals { padding: 24px; }
    table.shop_table th,
    table.shop_table td { padding: 14px 12px; }
    .woocommerce-order-overview { grid-template-columns: 1fr 1fr; }
    .woocommerce-order-overview li { padding: 18px 14px; }
}

/* ============================================================
   MY ACCOUNT — AUTH PAGE (Login + Register for logged-out users)
============================================================ */

.auth-page-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 60px 0 80px;
}

.auth-page-header {
    text-align: center;
    margin-bottom: 56px;
}

.auth-page-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--text);
    margin: 12px 0 16px;
    line-height: 1.1;
}

.auth-page-title span { color: var(--gold); }

.auth-page-header p {
    color: var(--text-muted);
    font-size: 1rem;
}

/* WooCommerce renders .u-columns > .u-column1 + .u-column2 */
#customer_login.u-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
}

#customer_login .u-column1,
#customer_login .u-column2 {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px;
    float: none !important;
    width: auto !important;
}

#customer_login .u-column1:hover,
#customer_login .u-column2:hover {
    border-color: rgba(var(--gold-rgb),0.2);
}

/* Card headings */
#customer_login h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

/* Form rows */
#customer_login .form-row {
    margin-bottom: 20px;
}

#customer_login .form-row label {
    display: block;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
}

#customer_login .form-row input[type="text"],
#customer_login .form-row input[type="email"],
#customer_login .form-row input[type="password"] {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.92rem;
    padding: 12px 16px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

#customer_login .form-row input:focus {
    border-color: var(--crimson);
    box-shadow: 0 0 0 3px rgba(var(--crimson-rgb),0.12);
}

#customer_login .form-row input::placeholder { color: var(--text-dim); }

/* Remember me + lost password row */
#customer_login .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-muted);
    cursor: pointer;
}

#customer_login .woocommerce-form-login__rememberme input {
    width: 16px !important;
    height: 16px;
    accent-color: var(--crimson);
    padding: 0 !important;
}

/* Submit buttons */
#customer_login .woocommerce-form-login__submit,
#customer_login .woocommerce-form-register__submit,
#customer_login button[type="submit"],
#customer_login .button {
    width: 100%;
    background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
    border: none;
    border-radius: var(--radius-pill);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 32px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(var(--crimson-rgb),0.35);
    margin-top: 8px;
    display: block;
}

#customer_login button[type="submit"]:hover,
#customer_login .button:hover {
    box-shadow: 0 8px 28px rgba(var(--crimson-rgb),0.5);
    transform: translateY(-2px);
}

/* Lost password link */
#customer_login .lost_password {
    text-align: right;
    margin-top: 12px;
}

#customer_login .lost_password a {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
}

#customer_login .lost_password a:hover { color: var(--gold); }

/* Privacy policy text */
#customer_login .woocommerce-privacy-policy-text {
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 16px;
}

#customer_login .woocommerce-privacy-policy-text a { color: var(--gold); }

/* Register description paragraph */
#customer_login .u-column2 > p:first-of-type {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Notices inside auth forms */
#customer_login .woocommerce-notices-wrapper { margin-bottom: 0; }

/* Responsive */
@media (max-width: 768px) {
    #customer_login.u-columns {
        grid-template-columns: 1fr !important;
    }

    #customer_login .u-column1,
    #customer_login .u-column2 {
        padding: 28px 24px;
    }

    .auth-page-wrap { padding: 40px 0 60px; }
}

/* ============================================================
   WOOCOMMERCE BLOCK CHECKOUT — Label & Input Styles
   Targets wc-block-components-* (WC 8+ block checkout)
============================================================ */

/* Form rows */
.wc-block-components-form .wc-block-components-form-row,
.wc-block-components-address-form .wc-block-components-form-row {
    margin-bottom: 20px;
}

/* Floating label — idle state (inside field) */
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    top: -9px !important;
    left: 12px !important;
    background: var(--bg-card) !important;
    padding: 0 4px !important;
    line-height: 1 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Inputs */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-select select,
.wc-block-components-country-input .components-combobox-control input,
.wc-block-components-state-input .components-combobox-control input,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
    font-size: 0.92rem !important;
    padding: 14px 16px 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-country-input select:focus,
.wc-block-components-state-input select:focus {
    border-color: var(--crimson) !important;
    box-shadow: 0 0 0 3px rgba(var(--crimson-rgb),0.12) !important;
}

/* Required asterisk */
.wc-block-components-form .required,
.wc-block-components-form-row .required {
    color: var(--crimson) !important;
}

/* Validation error */
.wc-block-components-validation-error p {
    color: var(--crimson) !important;
    font-size: 0.78rem !important;
    margin-top: 4px !important;
}

/* Section headings (Contact information, Billing address) */
.wc-block-checkout__contact-fields > h2,
.wc-block-checkout__shipping-fields > h2,
.wc-block-checkout__billing-fields > h2,
.wp-block-woocommerce-checkout-shipping-address-block h2,
.wp-block-woocommerce-checkout-billing-address-block h2,
.wp-block-woocommerce-checkout-contact-information-block h2 {
    font-family: var(--font-heading) !important;
    font-size: 1.2rem !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Checkbox (create account, add note) */
.wc-block-checkout__add-note .wc-block-components-checkbox label,
.wc-block-checkout__create-account .wc-block-components-checkbox label {
    color: var(--text-muted) !important;
    font-size: 0.88rem !important;
}

/* Order summary panel */
.wc-block-checkout__sidebar .wc-block-components-order-summary {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
}

/* Place order button */
.wc-block-components-checkout-place-order-button {
    background: var(--crimson) !important;
    color: #fff !important;
    font-family: var(--font-heading) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 16px 40px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.15s !important;
}

.wc-block-components-checkout-place-order-button:hover {
    background: var(--saffron) !important;
    transform: translateY(-1px) !important;
}


/* ============================================================
   BLOCK CHECKOUT — Border & Spacing Fixes
============================================================ */

/* Kill white/default borders on block wrapper elements */
.wc-block-components-text-input,
.wc-block-components-select,
.wc-block-components-country-input,
.wc-block-components-state-input,
.wc-block-components-combobox,
.components-combobox-control,
.components-base-control,
.components-base-control__field {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Remove any white border from inner wrapper divs */
.wc-block-components-text-input > div,
.wc-block-components-select > div,
.wc-block-components-country-input > div,
.wc-block-components-state-input > div {
    border: none !important;
    box-shadow: none !important;
}

/* Label spacing — gap between label and the field below it */
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
    margin-bottom: 6px !important;
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Spacing between each form row */
.wc-block-components-form-row,
.wc-block-components-address-form .wc-block-components-form-row {
    margin-bottom: 24px !important;
}


/* ============================================================
   BLOCK CHECKOUT — Targeted Fixes (label order + white box)
============================================================ */

/* Label renders after <input> in DOM — flip column order so label shows above */
.wc-block-components-text-input,
.wc-block-components-select,
.wc-block-components-country-input,
.wc-block-components-state-input {
    display: flex !important;
    flex-direction: column-reverse !important;
}

/* White background box on combobox wrappers (Country, County dropdowns) */
.wc-block-components-country-input .components-combobox-control,
.wc-block-components-state-input .components-combobox-control,
.wc-block-components-combobox .components-combobox-control,
.components-combobox-control,
.components-base-control,
.wc-block-components-country-input .components-base-control,
.wc-block-components-state-input .components-base-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* Fix: WC block select container hardcodes background:#fff — override with correct prefix */
.wc-blocks-components-select .wc-blocks-components-select__container {
    background: var(--bg-card) !important;
    border-radius: var(--radius-md) !important;
}


/* ============================================================
   MY ACCOUNT — Addresses Page (edit-address)
============================================================ */

.woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.woocommerce-Address {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 28px 24px;
}

/* Section heading — Billing address / Shipping address */
.woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.woocommerce-Address-title h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: 0.02em;
}

/* Edit link */
.woocommerce-Address-title .edit {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border: 1px solid rgba(var(--gold-rgb),0.35);
    border-radius: var(--radius-pill);
    padding: 4px 14px;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.woocommerce-Address-title .edit:hover {
    background: var(--gold);
    color: var(--bg);
}

/* Address text */
address {
    font-style: normal;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* No address set */
.woocommerce-Address address p {
    color: var(--text-dim);
    font-size: 0.88rem;
}

@media (max-width: 640px) {
    .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   Block cart — the primary action
   --------------------------------------------------------------------------
   The crimson gradient above was written for `.wc-proceed-to-checkout
   a.checkout-button`, which is the CLASSIC cart shortcode. This site renders the
   BLOCK cart, whose button is .wc-block-cart__submit-button — a selector that
   appeared nowhere in this stylesheet.

   So the styling was real and simply never matched: "Proceed to Checkout" fell
   through to WooCommerce's default grey, which reads as disabled, while "Place
   Order" on the next screen is crimson. The primary action changed colour
   between two consecutive steps of one purchase.

   !important throughout because the block styles ship with their own specificity
   and inline custom properties.
   ========================================================================== */

.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button {
	display: block !important;
	width: 100% !important;
	background: linear-gradient(135deg, var(--crimson), var(--crimson-dark)) !important;
	border: none !important;
	border-radius: var(--radius-pill) !important;
	color: #fff !important;
	font-family: var(--font-body) !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	text-decoration: none !important;
	padding: 16px 32px !important;
	min-height: 52px;
	cursor: pointer;
	transition: var(--transition);
	box-shadow: 0 4px 20px rgba(var(--crimson-rgb), 0.35) !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover {
	background: linear-gradient(135deg, var(--crimson-grad), var(--crimson-deep)) !important;
	box-shadow: 0 8px 30px rgba(var(--crimson-rgb), 0.5) !important;
	transform: translateY(-2px);
}

.wc-block-cart__submit-button:focus-visible {
	outline: 2px solid var(--gold) !important;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   "Estimated total" is not estimated
   --------------------------------------------------------------------------
   There is no shipping and no tax, and the gateway is pay-at-venue, so the
   figure is exact. The word invites doubt at the one moment a buyer wants
   certainty. WooCommerce hard-codes the string, so it is replaced in PHP; this
   just gives the row the weight a final total deserves.
   -------------------------------------------------------------------------- */

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: var(--gold) !important;
}

/* ==========================================================================
   Order received — use the horizontal space on desktop
   --------------------------------------------------------------------------
   Everything stacked in one column: the thank-you panel, the overview, the item
   table and then the billing address, which on a laptop meant scrolling past a
   great deal of empty space either side to reach the address.

   The confirmation and the overview stay full width — they are the answer to
   "did it work?" and should not be halved. Below them the item table and the
   address sit side by side, since neither needs the full measure.

   min-width, so mobile keeps the stacked order untouched: this only adds a
   second column once there is room for one.
   ========================================================================== */

@media (min-width: 1025px) {
	.woocommerce-order {
		display: grid;
		/* The table carries more columns than the address block, so it gets more. */
		grid-template-columns: 1.45fr 1fr;
		gap: 36px;
		align-items: start;
	}

	/* The confirmation, the overview and the payment instruction span both. */
	.woocommerce-order > .woocommerce-thankyou-order-received,
	.woocommerce-order > .woocommerce-order-overview,
	.woocommerce-order > p,
	.woocommerce-order > .woocommerce-notice {
		grid-column: 1 / -1;
	}

	.woocommerce-order > .woocommerce-order-details { grid-column: 1; }
	.woocommerce-order > .woocommerce-customer-details { grid-column: 2; }

	/* Both blocks had a bottom margin sized for a stacked layout. */
	.woocommerce-order > .woocommerce-order-details,
	.woocommerce-order > .woocommerce-customer-details { margin-bottom: 0; }
}

/* ==========================================================================
   Cart & Checkout — layout, mobile first
   --------------------------------------------------------------------------
   Written after switching both pages from blocks to the classic templates. The
   classic markup is a table plus two floated columns, and the default
   proportions left the cart product column enormous and empty, the remove "x"
   stranded far from the row it belongs to, and the totals box beside a void.

   Mobile is the base: the table stops behaving as a table and becomes one card
   per ticket. Table layout returns at 768px, once there is room for six columns.
   Scoped to these two page body classes so nothing else on the site is touched.
   ========================================================================== */

/* ---------- CART, mobile: one card per ticket ---------- */

body.woocommerce-cart .woocommerce-cart-form__contents,
body.woocommerce-cart .woocommerce-cart-form__contents tbody,
body.woocommerce-cart .woocommerce-cart-form__contents tr,
body.woocommerce-cart .woocommerce-cart-form__contents td {
	display: block;
	width: auto;
}

/* The header row is meaningless once cells are stacked; each cell carries its
   own label instead, which WooCommerce writes into data-title. */
body.woocommerce-cart .woocommerce-cart-form__contents thead { display: none; }

body.woocommerce-cart .woocommerce-cart-form__cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 72px 1fr;
	grid-template-areas:
		"thumb name"
		"thumb price"
		"qty   subtotal";
	gap: 6px 14px;
	align-items: center;
	padding: 16px 48px 16px 16px;
	margin-bottom: 12px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

body.woocommerce-cart .cart_item .product-thumbnail { grid-area: thumb; }
body.woocommerce-cart .cart_item .product-name      { grid-area: name; }
body.woocommerce-cart .cart_item .product-price     { grid-area: price; }
body.woocommerce-cart .cart_item .product-quantity  { grid-area: qty; }
body.woocommerce-cart .cart_item .product-subtotal  { grid-area: subtotal; text-align: right; }

body.woocommerce-cart .cart_item .product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--radius-md);
}

/* Remove sits ON the card it removes, not in a column of its own three hundred
   pixels to the left. Top-right and 34px, so it is a real touch target and is
   nowhere near the quantity control it used to sit beside. */
body.woocommerce-cart .cart_item .product-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

body.woocommerce-cart .cart_item .product-remove a.remove {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 1.05rem;
	line-height: 1;
	border-radius: 50%;
	color: var(--text-dim) !important;
	background: transparent !important;
}

body.woocommerce-cart .cart_item .product-remove a.remove:hover {
	color: #fff !important;
	background: var(--crimson) !important;
}

/* Cells carry their own label, on mobile only. */
body.woocommerce-cart .cart_item td::before {
	content: attr(data-title) ": ";
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin-right: 6px;
}

body.woocommerce-cart .cart_item .product-name::before,
body.woocommerce-cart .cart_item .product-thumbnail::before,
body.woocommerce-cart .cart_item .product-remove::before { content: none; }

body.woocommerce-cart .cart_item .product-name a {
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
}

body.woocommerce-cart .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px 0 0;
}

body.woocommerce-cart .actions .coupon {
	display: flex;
	gap: 8px;
	width: 100%;
}

body.woocommerce-cart .actions .coupon .input-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------- CART: a table again once there is room ---------- */

@media (min-width: 768px) {
	body.woocommerce-cart .woocommerce-cart-form__contents { display: table; width: 100%; }
	body.woocommerce-cart .woocommerce-cart-form__contents thead { display: table-header-group; }
	body.woocommerce-cart .woocommerce-cart-form__contents tbody { display: table-row-group; }

	body.woocommerce-cart .woocommerce-cart-form__cart-item {
		display: table-row;
		padding: 0;
		margin: 0;
		background: none;
		border: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form__contents td {
		display: table-cell;
		vertical-align: middle;
		padding: 18px 12px;
		border-bottom: 1px solid var(--border);
	}

	body.woocommerce-cart .cart_item td::before { content: none; }

	/* The proportions the default got wrong: the name absorbs the slack and the
	   numeric columns are only as wide as their content needs. */
	body.woocommerce-cart .cart_item .product-remove    { position: static; width: 44px; text-align: center; }
	body.woocommerce-cart .cart_item .product-thumbnail { width: 88px; }
	body.woocommerce-cart .cart_item .product-name      { width: auto; text-align: left; }
	body.woocommerce-cart .cart_item .product-price,
	body.woocommerce-cart .cart_item .product-quantity  { width: 130px; text-align: center; }
	body.woocommerce-cart .cart_item .product-subtotal  { width: 130px; text-align: right; }

	body.woocommerce-cart .cart_item .product-thumbnail img { width: 64px; height: 64px; }

	body.woocommerce-cart .actions .coupon { width: auto; }
}

/* ---------- CART totals: beside the items, not beside a void ---------- */

@media (min-width: 1025px) {
	body.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
		gap: 32px;
		align-items: start;
	}

	body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

	/* The default floats this right at roughly half width, which is what left the
	   empty band running down the left of the page. */
	body.woocommerce-cart .cart-collaterals {
		width: auto !important;
		float: none !important;
		margin: 0;
		position: sticky;
		top: 96px;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals {
		width: auto !important;
		float: none !important;
	}
}

/* ---------- CHECKOUT ---------- */

/* Billing and the notes field stack. One column until there is genuinely room
   for two, rather than a half-empty second column at every width. */
body.woocommerce-checkout .col2-set,
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 {
	width: auto !important;
	float: none !important;
}

body.woocommerce-checkout .col2-set .col-2 { margin-top: 28px; }

body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	padding: 14px 4px;
}

@media (min-width: 1025px) {
	/*
	 * Form on the left, order review on the right and sticky.
	 *
	 * The default put billing beside the order-notes box - a nearly empty column -
	 * and then dropped the order review full width underneath, so the thing a
	 * buyer checks before paying sat furthest from the form they were filling in.
	 */
	body.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
		gap: 40px;
		align-items: start;
	}

	body.woocommerce-checkout form.checkout > .col2-set { grid-column: 1; }

	body.woocommerce-checkout form.checkout > h3#order_review_heading,
	body.woocommerce-checkout form.checkout > #order_review { grid-column: 2; }

	body.woocommerce-checkout form.checkout > h3#order_review_heading { margin-top: 0; }

	body.woocommerce-checkout form.checkout > #order_review {
		position: sticky;
		top: 96px;
	}

	/* Two-up for the short fields, so the form stops being one long ladder. */
	body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 18px;
	}

	body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-wide,
	body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_address_1_field,
	body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_address_2_field,
	body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_country_field {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Checkout alignment — the order review beside the form, not below it
   --------------------------------------------------------------------------
   Two separate causes produced one broken screen.

   1. .col2-set is `display: grid; grid-template-columns: 1fr 1fr` (woo.css:967).
      An earlier attempt here set width and float on it, which a grid ignores
      entirely, so billing and the order-notes box stayed side by side inside a
      column already narrowed by the review panel. Billing fields ended up about
      170px wide.

   2. Worse: the review was in the WRONG GRID ROW. `.col2-set` took row 1 and the
      heading and table were auto-placed into rows 1 and 2 of column 2. Because
      the form is tall, row 1 was tall, so the table began below the entire form —
      the heading sat at the top of the page and its own table 560px underneath
      it, with nothing between.

   Both are fixed by placing every child explicitly rather than letting grid
   auto-placement decide.
   ========================================================================== */

@media (min-width: 1025px) {
	/* Explicit placement. The form spans both rows of column 1; the heading and
	   the table stack in column 2 beside it, starting at the top. */
	body.woocommerce-checkout form.checkout > .col2-set {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	body.woocommerce-checkout form.checkout > h3#order_review_heading {
		grid-column: 2;
		grid-row: 1;
	}

	body.woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
		grid-row: 2;
	}

	/*
	 * Inside the left column, billing and the notes box stack. Two columns inside
	 * a column that is already sharing the page with the review panel is what
	 * squeezed the fields; the notes box is one optional textarea and does not
	 * deserve half the width of the form.
	 */
	body.woocommerce-checkout .col2-set {
		grid-template-columns: 1fr;
		gap: 0;
		margin-bottom: 0;
	}

	body.woocommerce-checkout .col2-set .col-2 { margin-top: 32px; }
}

/*
 * Below 1025px everything is one column already, but .col2-set still carries its
 * own two-column grid down to 768px in the original rule. One column the whole
 * way: a checkout form on a tablet should be a single ladder, not two.
 */
@media (max-width: 1024px) {
	body.woocommerce-checkout .col2-set {
		grid-template-columns: 1fr;
		gap: 0;
	}

	body.woocommerce-checkout .col2-set .col-2 { margin-top: 28px; }
}

/* The two notices stacked at the top span the full width rather than being
   dragged into the form column by auto-placement. */
@media (min-width: 1025px) {
	body.woocommerce-checkout .woocommerce-form-login-toggle,
	body.woocommerce-checkout .woocommerce-form-coupon-toggle,
	body.woocommerce-checkout .woocommerce-form-login,
	body.woocommerce-checkout .checkout_coupon {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Checkout — the right column as two stacked cards
   --------------------------------------------------------------------------
   The requested shape:

       Billing details      |  Card 1: Your order + PLACE ORDER
       (full height)        |  Card 2: Additional information

   The obstacle is that billing and the order-notes box are siblings inside
   .col2-set, so neither can be addressed by the outer grid. `display: contents`
   removes that wrapper from layout while leaving it in the DOM, which makes both
   children direct grid items and lets them go to opposite columns. No template
   override, no markup change, nothing in PHP.

   .col2-set is a plain div carrying no role or landmark, so dropping its box has
   no effect on the accessibility tree.
   ========================================================================== */

@media (min-width: 1025px) {

	/*
	 * Rows are declared rather than left to auto-placement, and the fourth is 1fr.
	 * That row is what keeps the cards together: because the billing column spans
	 * a FLEXIBLE track, grid excludes it from sizing rows 1-3, so those three size
	 * to the right column's own content and the tall form's leftover height lands
	 * in row 4. With four `auto` rows instead, grid would share the form's height
	 * across the rows it spans and push the cards apart — the same gap that put
	 * "Your order" 560px above its own table.
	 *
	 * row-gap goes to 0 for the same reason: the heading and the review table are
	 * drawn as ONE card, and a 40px gutter runs straight through the middle of it.
	 * The 40px between the columns is kept.
	 */
	body.woocommerce-checkout form.checkout {
		grid-template-rows: auto auto auto 1fr;
		column-gap: 40px;
		row-gap: 0;
	}

	body.woocommerce-checkout form.checkout > .col2-set {
		display: contents;
	}

	body.woocommerce-checkout form.checkout > .col2-set > .col-1 {
		grid-column: 1;
		grid-row: 1 / -1;
	}

	/* ---------- Card 1: Your order, and the button that acts on it ---------- */

	/*
	 * The heading is outside #order_review in WooCommerce's template, so the card
	 * is drawn across both: the heading supplies the top edge and radius, the
	 * review body supplies the bottom. Cheaper than a template override, and it
	 * survives WooCommerce updates.
	 */
	body.woocommerce-checkout form.checkout > h3#order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		padding: 30px 34px 0;
		background: var(--bg-card);
		border: 1px solid var(--border);
		border-bottom: 0;
		border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	}

	body.woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
		grid-row: 2;
		padding: 20px 34px 34px;
		border-top: 0;
		border-radius: 0 0 var(--radius-xl) var(--radius-xl);

		/*
		 * Sticky is dropped deliberately. It was set when the review was the only
		 * thing in this column; with a second card beneath it, sticking would slide
		 * Card 1 away from Card 2 on scroll and break the stacked pair.
		 */
		position: static;
	}

	/* ---------- Card 2: Additional information ---------- */

	body.woocommerce-checkout form.checkout > .col2-set > .col-2 {
		grid-column: 2;
		grid-row: 3;
		margin-top: 20px;
		padding: 30px 34px 34px;
		background: var(--bg-card);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
	}

	/* The heading rule shared with billing adds a rule and 24px below it; inside a
	   card of its own the card edge already does that work. */
	body.woocommerce-checkout .col-2 .woocommerce-additional-fields h3 {
		margin-bottom: 18px;
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* The notes field is the last thing in the card, so its own bottom margin
	   would sit on top of the card's padding. */
	body.woocommerce-checkout .col-2 .woocommerce-additional-fields__field-wrapper > .form-row:last-child {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   Checkout — "Create an account?" as a switch, not a bare checkbox
   --------------------------------------------------------------------------
   This was an unstyled native checkbox: default box, default crimson focus
   ring, no relation to the rest of the form's design language. The reveal
   beneath it already animates (WooCommerce's own checkout.js calls
   slideDown()/hide() on div.create-account) — only the control itself needed
   work.

   `appearance: none` on the real checkbox, restyled as a pill with a sliding
   thumb; the state is still native `:checked`, so no JS is added and existing
   validation/serialization is untouched.
   ========================================================================== */

body.woocommerce-checkout .woocommerce-account-fields .create-account:first-child {
	margin-bottom: 4px;
}

body.woocommerce-checkout .woocommerce-account-fields label.checkbox {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	width: fit-content;
}

body.woocommerce-checkout .woocommerce-account-fields label.checkbox span {
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-dim);
}

body.woocommerce-checkout .woocommerce-account-fields input#createaccount {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 44px;
	height: 24px;
	margin: 0;
	background: rgba(var(--gold-rgb), 0.12);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	position: relative;
	cursor: pointer;
	transition: var(--transition);
}

body.woocommerce-checkout .woocommerce-account-fields input#createaccount::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--text-dim);
	transition: var(--transition);
}

body.woocommerce-checkout .woocommerce-account-fields input#createaccount:checked {
	background: var(--crimson);
	border-color: var(--crimson);
}

body.woocommerce-checkout .woocommerce-account-fields input#createaccount:checked::before {
	background: var(--text);
	transform: translateX(20px);
}

body.woocommerce-checkout .woocommerce-account-fields input#createaccount:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* The reveal panel: WooCommerce toggles inline display:block/none via jQuery
   slideDown()/hide(), which already animates height. Framing it as a card
   keeps it visually attached to the switch that opened it, and its own top
   margin replaces the checkbox row's now-redundant bottom margin. */
body.woocommerce-checkout .woocommerce-account-fields div.create-account {
	margin-top: 18px;
	padding: 20px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

body.woocommerce-checkout .woocommerce-account-fields div.create-account .form-row {
	margin-bottom: 0;
}

@media (min-width: 1025px) {
	.woocommerce-order {
		/*
		 * Five direct children in source order: the green confirmation <p>,
		 * the order-overview <ul>, Order details, Billing address, then the
		 * entry codes <section> (idc-platform hooks woocommerce_thankyou at
		 * priority 20, after WooCommerce's own order_details_table at 10).
		 *
		 * grid-auto-flow keeps the first two full-width items each in their
		 * own row, stacked in source order — giving them a SHARED row number
		 * collapsed them into one grid cell, painted on top of each other,
		 * which is what hid the confirmation banner under the overview strip.
		 * Only the two cards that need to sit side by side get named rows.
		 */
		grid-template-rows: auto auto auto auto auto;
		grid-auto-flow: row;
	}

	.woocommerce-order > .woocommerce-order-details { grid-row: 3 / span 2; }
	.woocommerce-order > .woocommerce-customer-details { grid-row: 3; }

	.woocommerce-order > .idc-my-tickets {
		grid-column: 2;
		grid-row: 4;
		margin-top: 24px;
	}
}