/**
 * Chargie WooCommerce Styles
 * Modern, clean shop page with highly clickable products
 * 
 * @package Chargie_Starter
 * @version 1.0.0
 */

/* ========================================
   CSS Custom Properties
   ======================================== */
:root {
    --wc-primary: #ff6b35;
    --wc-primary-hover: #ff7b45;
    --wc-primary-dark: #f7931e;
    --wc-secondary: #1e3a5f;
    --wc-secondary-hover: #2d5a8a;
    --wc-success: #22c55e;
    --wc-warning: #f59e0b;
    --wc-text: #1a1a1a;
    --wc-text-light: #6b7280;
    --wc-bg: #ffffff;
    --wc-bg-alt: #f8fafc;
    --wc-border: #e5e7eb;
    --wc-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --wc-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --wc-shadow-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    --wc-radius: 16px;
    --wc-radius-sm: 8px;
    --wc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Shop Page Layout
   ======================================== */
.woocommerce-shop-page,
.woocommerce-page,
.woocommerce {
    background: var(--wc-bg-alt);
}

.woocommerce .woocommerce-products-header {
    text-align: center;
    padding: 3rem 1rem 2rem;
    background: linear-gradient(135deg, var(--wc-secondary) 0%, #2d5a8a 100%);
    color: #fff;
    margin-bottom: 2rem;
    border-radius: 0 0 var(--wc-radius) var(--wc-radius);
}

.woocommerce .woocommerce-products-header__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #fff;
}

.woocommerce .term-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ========================================
   Product Grid
   ======================================== */
body.woocommerce ul.products,
body.woocommerce-page ul.products,
.woocommerce ul.products[class] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
    padding: 0 1rem !important;
    max-width: 1400px !important;
    margin: 0 auto 3rem !important;
    list-style: none !important;
    float: none !important;
    width: 100% !important;
}

/* Override WooCommerce default clear:both that breaks grid layout */
body.woocommerce ul.products[class*="columns-"] li.product,
body.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products[class*="columns-"] li.product {
    clear: none !important;
}

@media (min-width: 768px) {
    .woocommerce ul.products {
        padding: 0 2rem;
    }
}

@media (min-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================
   Product Card - Modern & Clickable
   ======================================== */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
.woocommerce ul.products[class] li.product {
    background: var(--wc-bg) !important;
    border-radius: var(--wc-radius) !important;
    box-shadow: var(--wc-shadow) !important;
    overflow: hidden !important;
    transition: var(--wc-transition) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid transparent !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce ul.products li.product:hover,
body.woocommerce-page ul.products li.product:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--wc-shadow-hover) !important;
    border-color: var(--wc-primary) !important;
}

/* Product Image Container */
body.woocommerce ul.products li.product .woocommerce-loop-product__link,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}

body.woocommerce ul.products li.product a img,
body.woocommerce ul.products li.product img,
body.woocommerce-page ul.products li.product a img,
body.woocommerce-page ul.products li.product img {
    width: 100% !important;
    height: 250px !important;
    object-fit: contain !important;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%) !important;
    padding: 1.5rem !important;
    transition: var(--wc-transition) !important;
    border-bottom: 1px solid var(--wc-border) !important;
    margin: 0 !important;
}

body.woocommerce ul.products li.product:hover img,
body.woocommerce-page ul.products li.product:hover img {
    transform: scale(1.05) !important;
}

/* Product Content */
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce ul.products li.product h2,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product h2 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--wc-text) !important;
    padding: 1rem 1rem 0.5rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    min-height: 3rem !important;
    transition: color 0.2s ease !important;
}

body.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
body.woocommerce ul.products li.product:hover h2,
body.woocommerce-page ul.products li.product:hover .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product:hover h2 {
    color: var(--wc-primary) !important;
}

/* Price */
body.woocommerce ul.products li.product .price,
body.woocommerce-page ul.products li.product .price {
    padding: 0 1rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--wc-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

body.woocommerce ul.products li.product .price del,
body.woocommerce-page ul.products li.product .price del {
    color: var(--wc-text-light) !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

body.woocommerce ul.products li.product .price ins,
body.woocommerce-page ul.products li.product .price ins {
    text-decoration: none !important;
    background: none !important;
}

/* Sale Badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    display: none !important;
}

/* Stock Badge */
.woocommerce ul.products li.product .stock {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    border-radius: 50px;
    z-index: 10;
}

.woocommerce ul.products li.product .stock.in-stock {
    background: rgba(34, 197, 94, 0.15);
    color: var(--wc-success);
}

.woocommerce ul.products li.product .stock.out-of-stock {
    background: rgba(255, 107, 53, 0.15);
    color: var(--wc-primary);
}

/* Add to Cart Button */
body.woocommerce ul.products li.product .button,
body.woocommerce ul.products li.product a.add_to_cart_button,
body.woocommerce ul.products li.product a.button,
body.woocommerce-page ul.products li.product .button,
body.woocommerce-page ul.products li.product a.add_to_cart_button,
body.woocommerce-page ul.products li.product a.button {
    display: block !important;
    width: calc(100% - 2rem) !important;
    margin: auto 1rem 1rem !important;
    padding: 0.875rem 1.5rem !important;
    background: linear-gradient(135deg, var(--wc-primary) 0%, var(--wc-primary-dark) 100%) !important;
    color: #fff !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    border: none !important;
    border-radius: var(--wc-radius-sm) !important;
    cursor: pointer !important;
    transition: var(--wc-transition) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.25) !important;
}

body.woocommerce ul.products li.product .button:hover,
body.woocommerce ul.products li.product a.add_to_cart_button:hover,
body.woocommerce ul.products li.product a.button:hover,
body.woocommerce-page ul.products li.product .button:hover,
body.woocommerce-page ul.products li.product a.add_to_cart_button:hover,
body.woocommerce-page ul.products li.product a.button:hover {
    background: linear-gradient(135deg, var(--wc-primary-hover) 0%, var(--wc-primary) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.35) !important;
}

/* View Product Link (for variable products) */
.woocommerce ul.products li.product a.button.product_type_variable {
    background: linear-gradient(135deg, var(--wc-secondary) 0%, #2d5a8a 100%);
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.25);
}

.woocommerce ul.products li.product a.button.product_type_variable:hover {
    background: linear-gradient(135deg, var(--wc-secondary-hover) 0%, var(--wc-secondary) 100%);
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.35);
}

/* Added to cart state */
.woocommerce ul.products li.product a.added_to_cart {
    display: block;
    text-align: center;
    padding: 0.5rem;
    color: var(--wc-success);
    font-weight: 600;
    font-size: 0.85rem;
}

/* ========================================
   Single Product Page - Shopify-style High Converting
   ======================================== */
.woocommerce div.product {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    background: #fff;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 3rem;
    row-gap: 1.5rem;
    align-items: start;
}

/* Square image as left grid column */
.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce div.product > div.images {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    grid-column: 1;
    float: none !important;
}

.woocommerce div.product > .woocommerce-product-gallery img,
.woocommerce div.product > div.images img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.woocommerce div.product > .summary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    overflow: visible;
    min-width: 0 !important;
    grid-column: 2;
}

/* Sale badge positioning */
.woocommerce div.product > .onsale {
    position: absolute !important;
    z-index: 10 !important;
    grid-column: 1;
}

/* Tabs and related products span both columns */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related.products,
.woocommerce div.product > .upsells.products {
    grid-column: 1 / -1;
    width: 100% !important;
    float: none !important;
    clear: none !important;
}

@media (max-width: 900px) {
    .woocommerce div.product {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .woocommerce div.product > .woocommerce-product-gallery,
    .woocommerce div.product > div.images,
    .woocommerce div.product > .summary,
    .woocommerce div.product > .onsale,
    .woocommerce div.product > .woocommerce-tabs,
    .woocommerce div.product > .related.products,
    .woocommerce div.product > .upsells.products {
        grid-column: 1;
    }

    .woocommerce div.product > .woocommerce-product-gallery,
    .woocommerce div.product > div.images {
        margin: 0 0 1.5rem 0 !important;
        aspect-ratio: 1 / 1;
        max-height: 400px;
    }
}

/* Product Images */
.woocommerce div.product div.images {
    background: #fafafa;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #eee;
}

.woocommerce div.product div.images img {
    border-radius: 4px;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    background: rgba(0,0,0,0.6);
    border-radius: 4px;
    width: 36px;
    height: 36px;
    top: 1rem;
    right: 1rem;
}

/* Product Title */
.woocommerce div.product .product_title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #111;
    margin: 0 0 0.75rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Price - Shopify style */
.woocommerce div.product p.price {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.woocommerce div.product p.price del {
    font-size: 1rem;
    color: #999;
    font-weight: 400;
    text-decoration: line-through;
}

.woocommerce div.product p.price ins {
    text-decoration: none;
    background: none;
    color: var(--wc-primary);
}

/* Savings badge - styled via PHP-generated .chargie-savings-badge */
.chargie-savings-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: #16a34a;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Short Description */
.woocommerce div.product .woocommerce-product-details__short-description {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    padding: 0;
    background: none;
    border: none;
}

.woocommerce div.product .woocommerce-product-details__short-description p {
    margin: 0 0 0.5rem;
}

/* Add to Cart Form - Inline quantity + button */
.woocommerce div.product form.cart {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

/* Quantity field */
.woocommerce div.product form.cart .quantity {
    display: flex !important;
    align-items: center !important;
    background: #fff;
    border-radius: 4px;
    border: none;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.woocommerce div.product form.cart .quantity .qty {
    width: 60px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.75rem;
    color: #111;
    -moz-appearance: textfield;
}

.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Main CTA Button - Inline with quantity */
.woocommerce div.product form.cart button.single_add_to_cart_button {
    flex: 1 1 auto !important;
    min-width: 180px !important;
    max-width: 300px !important;
    padding: 0.75rem 1.5rem !important;
    background: var(--wc-primary) !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
    background: var(--wc-primary-dark) !important;
    transform: none;
    box-shadow: none;
}

/* Responsive: stack on mobile */
@media (max-width: 500px) {
    .woocommerce div.product form.cart {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .woocommerce div.product form.cart .quantity {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .woocommerce div.product form.cart button.single_add_to_cart_button {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Trust Badges Area */
.woocommerce div.product .product_meta {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    font-size: 0.85rem;
    color: #666;
}

.woocommerce div.product .product_meta > span {
    display: block;
    margin-bottom: 0.5rem;
}

.woocommerce div.product .product_meta a {
    color: #111;
    text-decoration: underline;
    font-weight: 400;
}

.woocommerce div.product .product_meta a:hover {
    color: var(--wc-primary);
}

/* Trust Features - Shopify style */
.woocommerce div.product .summary::after {
    content: '✓ Free shipping on qualifying orders ✓ 30-day money-back guarantee ✓ Secure checkout';
    display: block;
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f7f7f7;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #555;
    line-height: 1.8;
    text-align: center;
}

/* ========================================
   Related Products - Clean Shopify Style
   ======================================== */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products,
.woocommerce .cross-sells {
    clear: both;
    margin-top: 3rem;
    padding: 2rem 0;
    background: #fff;
    border-top: 1px solid #eee;
    width: 100% !important;
    float: none !important;
}

.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2,
.woocommerce .cross-sells > h2 {
    text-align: left;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 1.5rem;
    padding: 0;
}

.woocommerce div.product .related.products > h2::before,
.woocommerce div.product .upsells.products > h2::before {
    content: none;
}

/* Related Products Grid */
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .upsells.products ul.products,
.woocommerce .cross-sells ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
}

/* Fix: Remove clearfix pseudo-elements that break flex layout causing 3+1 instead of 4 columns */
.woocommerce div.product .related.products ul.products::before,
.woocommerce div.product .related.products ul.products::after,
.woocommerce div.product .upsells.products ul.products::before,
.woocommerce div.product .upsells.products ul.products::after,
.woocommerce .cross-sells ul.products::before,
.woocommerce .cross-sells ul.products::after {
    display: none !important;
    content: none !important;
}

.woocommerce div.product .related.products ul.products li.product,
.woocommerce div.product .upsells.products ul.products li.product {
    flex: 0 0 calc(25% - 0.75rem) !important;
    max-width: calc(25% - 0.75rem) !important;
}

@media (max-width: 900px) {
    .woocommerce div.product .related.products ul.products li.product,
    .woocommerce div.product .upsells.products ul.products li.product {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
}

@media (max-width: 600px) {
    .woocommerce div.product .related.products ul.products,
    .woocommerce div.product .upsells.products ul.products {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.5rem !important;
        gap: 12px !important;
    }
    .woocommerce div.product .related.products ul.products li.product,
    .woocommerce div.product .upsells.products ul.products li.product {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        scroll-snap-align: start;
    }
}

/* Related Product Cards - Clean minimal */
.woocommerce div.product .related.products ul.products li.product,
.woocommerce div.product .upsells.products ul.products li.product {
    background: #fff !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transition: opacity 0.2s !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: none !important;
    text-align: left !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce div.product .related.products ul.products li.product:hover,
.woocommerce div.product .upsells.products ul.products li.product:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
    opacity: 0.8;
}

.woocommerce div.product .related.products ul.products li.product img,
.woocommerce div.product .upsells.products ul.products li.product img {
    height: 200px;
    padding: 0;
    background: #f7f7f7;
    border-radius: 4px;
    border: none;
}

.woocommerce div.product .related.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .upsells.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #111;
    padding: 0.75rem 0 0.25rem;
    min-height: auto;
    text-align: left;
}

.woocommerce div.product .related.products ul.products li.product .price,
.woocommerce div.product .upsells.products ul.products li.product .price {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0;
    justify-content: flex-start;
}

.woocommerce div.product .related.products ul.products li.product .price del {
    font-size: 0.8rem;
    color: #999;
}

.woocommerce div.product .related.products ul.products li.product .button,
.woocommerce div.product .related.products ul.products li.product a.button,
.woocommerce div.product .related.products ul.products li.product .add_to_cart_button {
    display: inline-block !important;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: all 0.2s;
}
.woocommerce div.product .related.products ul.products li.product .button:hover,
.woocommerce div.product .related.products ul.products li.product a.button:hover,
.woocommerce div.product .related.products ul.products li.product .add_to_cart_button:hover {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
}

/* Hide sale badges on related products */
.woocommerce div.product .related.products ul.products li.product .onsale,
.woocommerce div.product .upsells.products ul.products li.product .onsale,
.woocommerce div.product .related.products ul.products li.product span.onsale,
.woocommerce div.product .upsells.products ul.products li.product span.onsale {
    display: none !important;
}

/* Remove overlay effect */
.woocommerce div.product .related.products ul.products li.product::after,
.woocommerce div.product .upsells.products ul.products li.product::after {
    content: none;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(30, 58, 95, 0.95);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    transition: var(--wc-transition);
    pointer-events: none;
    white-space: nowrap;
}

.woocommerce div.product .related.products ul.products li.product:hover::after,
.woocommerce div.product .upsells.products ul.products li.product:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ========================================
   Cart Page
   ======================================== */
.woocommerce-cart .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.woocommerce table.shop_table {
    border: none;
    border-radius: var(--wc-radius);
    overflow: hidden;
    box-shadow: var(--wc-shadow);
    background: var(--wc-bg);
}

.woocommerce table.shop_table th {
    background: var(--wc-secondary);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 1rem;
    border: none;
}

.woocommerce table.shop_table td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--wc-border);
}

.woocommerce table.shop_table td.product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: var(--wc-radius-sm);
    background: var(--wc-bg-alt);
}

.woocommerce table.shop_table td.product-name a {
    color: var(--wc-text);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.woocommerce table.shop_table td.product-name a:hover {
    color: var(--wc-primary);
}

/* Cart Totals */
.woocommerce .cart-collaterals .cart_totals {
    background: var(--wc-bg);
    border-radius: var(--wc-radius);
    padding: 2rem;
    box-shadow: var(--wc-shadow);
}

.woocommerce .cart-collaterals .cart_totals h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--wc-text);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--wc-primary) 0%, var(--wc-primary-dark) 100%);
    color: #fff !important;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    border-radius: var(--wc-radius-sm);
    text-decoration: none;
    transition: var(--wc-transition);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
    background: linear-gradient(135deg, var(--wc-primary-hover) 0%, var(--wc-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

/* ========================================
   Checkout Page - Complete Override
   ======================================== */

/* HIDE mini-cart and upsells on checkout page */
body.woocommerce-checkout .hero-products,
body.woocommerce-checkout .mini-cart,
body.woocommerce-checkout .upsells-section,
body.woocommerce-checkout .page-body > .hero-products,
body.woocommerce-checkout .chargie-mini-cart,
body.woocommerce-checkout .chargie-upsells {
    display: none !important;
}

/* Hide "- OR -" separator in express checkout */
#wcpay-express-checkout-button-separator {
    display: none !important;
}

.wcpay-upe-form {
    border: none !important;
}

/* Reset page body styling for checkout */
body.woocommerce-checkout .page-body {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* Main checkout container */
.woocommerce-checkout .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

body.woocommerce-checkout .page-header {
    margin-bottom: 0 !important;
}

body.woocommerce-checkout .page-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: #fff !important;
}

body.woocommerce-checkout {
    background: #fff !important;
}

/* Header collapse on scroll - applies to all pages */
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #fff !important;
}

.site-header .hero-logo-wrapper {
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease !important;
    overflow: hidden !important;
    max-height: 85px !important;
    opacity: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.75rem 0 !important;
}

/* Match hero logo size everywhere - 100px */
.site-header .hero-logo-wrapper .hero-logo-img {
    max-height: 85px !important;
    width: auto !important;
    object-fit: contain !important;
}

.site-header .nav .logo {
    transition: opacity 0.3s ease, max-width 0.3s ease !important;
    opacity: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
}

/* When scrolled - hide hero logo, show nav logo */
body.header-collapsed .site-header .hero-logo-wrapper {
    max-height: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}

body.header-collapsed .site-header .nav .logo {
    opacity: 1 !important;
    max-width: 120px !important;
    padding-left: 20px !important;
}

body.header-collapsed .site-header {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}

body.woocommerce-checkout .woocommerce-NoticeGroup,
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce > .woocommerce-error,
body.woocommerce-checkout .woocommerce > .woocommerce-message,
body.woocommerce-checkout .woocommerce > .woocommerce-info {
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

body.woocommerce-checkout .woocommerce-NoticeGroup ul,
body.woocommerce-checkout .woocommerce-notices-wrapper ul {
    margin: 0 !important;
}

/* Checkout form - CSS Grid 2 column layout */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid !important;
    grid-template-columns: 1fr 460px !important;
    padding-top: 20px !important;
    grid-template-rows: auto !important;
    gap: 0 1.5rem !important;
    align-items: start !important;
}

/* Checkout notices/errors: span full grid width */
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-NoticeGroup,
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout form.checkout.woocommerce-checkout > .woocommerce-error,
body.woocommerce-checkout form.checkout.woocommerce-checkout > .woocommerce-message,
body.woocommerce-checkout form.checkout.woocommerce-checkout > .woocommerce-info,
body.woocommerce-checkout form.checkout.woocommerce-checkout > .is-error,
body.woocommerce-checkout form.checkout.woocommerce-checkout > .is-success {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-NoticeGroup ul,
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-notices-wrapper ul {
    margin: 0 !important;
}

/* Fixed notice banner above checkout */
#chargie-checkout-notices {
    position: fixed !important;
    top: env(safe-area-inset-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
}

#chargie-checkout-notices .woocommerce-error,
#chargie-checkout-notices .woocommerce-message,
#chargie-checkout-notices .woocommerce-info {
    border-radius: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    max-width: none !important;
    width: 100% !important;
    padding: 2rem 3rem !important;
    margin: 0 !important;
    border-left: none !important;
    font-size: 1.05rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
}

#chargie-checkout-notices .woocommerce-error::before,
#chargie-checkout-notices .woocommerce-message::before,
#chargie-checkout-notices .woocommerce-info::before {
    position: static !important;
    transform: none !important;
    flex-shrink: 0 !important;
    font-size: 1.3rem !important;
    margin: 0 !important;
}

#chargie-checkout-notices .woocommerce-error {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-bottom: 2px solid #dc2626 !important;
}

#chargie-checkout-notices .woocommerce-error li {
    color: #991b1b !important;
    list-style: none !important;
}

/* Left column - billing/shipping + order review (JS moves these inside) */
body.woocommerce-checkout form.checkout .chargie-left-column-wrapper {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

/* Order review heading - inside wrapper, no gap needed */
body.woocommerce-checkout form.checkout #order_review_heading {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.woocommerce-checkout form.checkout #chargie-order-wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Order review table - inside left column after JS move */
body.woocommerce-checkout form.checkout #order_review {
    position: relative !important;
    top: auto !important;
    background: var(--wc-bg) !important;
    border-radius: 0 0 var(--wc-radius) var(--wc-radius) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: var(--wc-shadow) !important;
    border: 1px solid var(--wc-border) !important;
    border-top: none !important;
    overflow: hidden !important;
}

/* Right column - payment (sticky, like cart sidebar).
   Sticky only works if ancestors are overflow:visible — parent #page and
   .opal-wrapper are overflow:hidden, which is reset below. */
body.woocommerce-checkout form.checkout #chargie-payment-col {
    grid-column: 2 !important;
    position: sticky !important;
    top: 100px !important;
    align-self: start !important;
    overflow: visible !important;
    z-index: 2 !important;
}

/* Parent strollik5 #page/.opal-wrapper { overflow:hidden } kills position:sticky
   on the payment column and the cart order-summary column. */
body.woocommerce-checkout,
body.woocommerce-checkout #page,
body.woocommerce-checkout .opal-wrapper,
body.woocommerce-cart,
body.woocommerce-cart #page,
body.woocommerce-cart .opal-wrapper {
    overflow: visible !important;
}

/* Customer details within left column */
body.woocommerce-checkout form.checkout #customer_details {
    width: 100% !important;
}

/* Customer details cols stacked — parent bootstrap .col-1/.col-2 add 15px
   gutters that the field-wrapper row then cancels with -15px margin. */
body.woocommerce-checkout form.checkout #customer_details .col-1,
body.woocommerce-checkout form.checkout #customer_details .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 1.5rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Mobile responsive - single column */
@media (max-width: 899px) {
    body.woocommerce-checkout form.checkout.woocommerce-checkout {
        display: flex !important;
        flex-direction: column !important;
        /* 2rem here put ~42px between the major blocks while the fields inside
           them sit 14px apart; 1.25rem brings the outer rhythm closer in. */
        gap: 1.25rem !important;
    }

    body.woocommerce-checkout form.checkout .chargie-left-column-wrapper,
    body.woocommerce-checkout form.checkout #order_review_heading,
    body.woocommerce-checkout form.checkout #order_review,
    body.woocommerce-checkout form.checkout #chargie-payment-col {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.woocommerce-checkout form.checkout #order_review,
    body.woocommerce-checkout form.checkout #chargie-payment-col {
        position: relative !important;
        top: auto !important;
    }
}

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
    margin-bottom: 1.5rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
    background: var(--wc-bg);
    border-radius: 0 0 var(--wc-radius) var(--wc-radius);
    padding: 2rem;
    box-shadow: var(--wc-shadow);
    border: 1px solid var(--wc-border);
    border-top: none;
    /* Parent opal-bootstrap treats this as a .row (flex + margin: 0 -15px),
       which makes the body 30px wider than the h3 header. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.woocommerce-billing-fields h3,
h3#billing_details_heading,
h3.chargie-shipping-title,
.woocommerce-additional-fields h3,
body.woocommerce-checkout form.checkout #order_review_heading {
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 1rem 1.5rem !important;
    background: var(--wc-secondary) !important;
    border-radius: var(--wc-radius) var(--wc-radius) 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Parent strollik5 bundles #order_review_heading with .screen-reader-text
   (position:absolute !important; clip:1px; width/height:1px; overflow:hidden).
   Without this reset the navy header is a 42px sliver overlapping the order table. */
body.woocommerce-checkout form.checkout #order_review_heading,
body.woocommerce-checkout .page-body #order_review_heading {
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    box-sizing: border-box !important;
    word-wrap: normal !important;
}

/* Duplicate heading injected inside #order_review by the parent theme */
body.woocommerce-checkout #order_review > h3.order_review_heading {
    display: none !important;
}

h3#ship-to-different-address {
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin: 0 0 0.5rem !important;
    padding: 0 !important;
    background: none !important;
    color: var(--wc-text, #1a1a1a) !important;
}

/* All checkout address/account fields full width (not the coupon row).
   Parent bootstrap treats .form-row-first/.form-row-last as 50% columns. */
body.woocommerce-checkout #customer_details .form-row,
body.woocommerce-checkout .woocommerce-billing-fields .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row,
body.woocommerce-checkout .woocommerce-additional-fields .form-row,
body.woocommerce-checkout .woocommerce-account-fields .form-row,
body.woocommerce-checkout #customer_details .form-row-first,
body.woocommerce-checkout #customer_details .form-row-last,
body.woocommerce-checkout #customer_details .form-row-wide {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    flex: none !important;
}

body.woocommerce-checkout #customer_details .form-row .woocommerce-input-wrapper,
body.woocommerce-checkout .woocommerce-billing-fields .form-row .woocommerce-input-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row .woocommerce-input-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields .form-row .woocommerce-input-wrapper,
body.woocommerce-checkout #customer_details .form-row .select2-container,
body.woocommerce-checkout .woocommerce-billing-fields .form-row .select2-container,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
    box-sizing: border-box !important;
}

.woocommerce form .form-row label {
    font-weight: 500;
    color: var(--wc-text);
    margin-bottom: 0.5rem;
    display: block !important;
    visibility: visible !important;
}

/* Checkout field rhythm.
   The parent theme (strollik5) sets `.woocommerce-billing-fields label
   { margin-top: 23px }`, which stacked on top of the 1.5rem row gap for
   ~44px of dead space between every input and the next label. */
body.woocommerce-checkout .woocommerce-billing-fields label,
body.woocommerce-checkout .woocommerce-shipping-fields label,
body.woocommerce-checkout .woocommerce-additional-fields label {
    margin-top: 0 !important;
}

body.woocommerce-checkout .woocommerce form .form-row {
    margin-bottom: 1rem !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.875rem 1rem;
    border: 2px solid var(--wc-border);
    border-radius: var(--wc-radius-sm);
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--wc-primary);
    outline: none;
}

/* Order Review Container */
.woocommerce-checkout-review-order {
    background: var(--wc-bg);
    border-radius: var(--wc-radius);
    padding: 2rem;
    box-shadow: none;
}

/* Remove top/bottom padding in checkout - heading above, total row is last */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

/* Order Review Table */
.woocommerce-checkout-review-order-table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    border: none !important;
}

/* Hide thead - we're using stacked layout */
.woocommerce-checkout-review-order-table thead {
    display: none !important;
}

/* Make product rows display with image and name on same line */
.woocommerce-checkout-review-order-table tbody tr {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0 1.5rem !important;
    border: none !important;
    height: 90px !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout-review-order-table tbody td {
    padding: 0 !important;
    border: none !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

/* Product thumbnail - stays inline with name */
.woocommerce-checkout-review-order-table tbody td.product-thumbnail {
    width: auto !important;
    flex-shrink: 0 !important;
}

.woocommerce-checkout-review-order-table tbody td.product-thumbnail img,
.woocommerce-checkout-review-order-table tbody tr img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    border-radius: var(--wc-radius-sm) !important;
    background: var(--wc-bg-alt) !important;
    flex-shrink: 0 !important;
}

/* Product name - make image and text display on same line */
.woocommerce-checkout-review-order-table tbody td.product-name {
    flex: 1 !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    border: none !important;
}

.woocommerce-checkout-review-order-table tbody td.product-name img {
    flex-shrink: 0 !important;
    border: none !important;
}

/* Checkout remove item button */
.checkout-remove-item {
    background: none !important;
    border: none !important;
    color: #999 !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 0.5rem 0 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

.checkout-remove-item:hover {
    color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.1) !important;
}

.checkout-remove-item:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Remove all borders from checkout order review */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td.product-name,
body.woocommerce-checkout table.shop_table tbody td.product-name,
body.woocommerce-checkout #order_review table tbody td {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Product total - stays on same line, right aligned */
.woocommerce-checkout-review-order-table tbody td.product-total {
    flex-shrink: 0 !important;
    text-align: right !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--wc-text) !important;
    margin-left: auto !important;
}

/* Make tfoot rows display label and value on same line */
.woocommerce-checkout-review-order-table tfoot tr {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.25rem 1.5rem !important;
    border: none !important;
    line-height: 1.2 !important;
}

/* Discount lines in green */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.fee.fee-discount th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.fee.fee-discount td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-discount th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-discount td {
    color: #16a34a !important;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

.woocommerce-checkout-review-order-table tfoot th {
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--wc-text-light) !important;
    border: none !important;
}

.woocommerce-checkout-review-order-table tfoot td {
    text-align: right !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: var(--wc-text) !important;
    border: none !important;
    line-height: 1.2 !important;
}

/* Remove all borders from tfoot */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.fee,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.fee th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.fee td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-discount,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-discount th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-discount td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.fee.fee-discount,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.fee.fee-discount th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.fee.fee-discount td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr[class*="tax"],
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr[class*="tax"] th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr[class*="tax"] td,
body.woocommerce-checkout table.shop_table tfoot th,
body.woocommerce-checkout table.shop_table tfoot td {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    box-shadow: none !important;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total {
    background: var(--wc-secondary) !important;
    padding: 0.5rem 1.5rem !important;
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td,
body.woocommerce-checkout .woocommerce table.shop_table tfoot tr.order-total th,
body.woocommerce-checkout .woocommerce table.shop_table tfoot tr.order-total td {
    background: transparent !important;
    color: #fff !important;
    border: 0 none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border-width: 0 !important;
    border-style: none !important;
    box-shadow: none !important;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total th {
    font-size: 1rem !important;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total td .woocommerce-Price-amount {
    color: #fff !important;
}

/* Back to cart link */
.chargie-back-to-cart {
    display: inline-block;
    margin-bottom: 1rem;
    /* Own full-width row above both checkout columns, so billing and
       payment cards start level with each other. */
    grid-column: 1 / -1;
    justify-self: start;
    font-size: 15px;
    color: var(--wc-primary, #7c3aed);
    text-decoration: none;
}
.chargie-back-to-cart:hover {
    text-decoration: underline;
}

/* Payment section wrapper - inside sticky payment column */
body.woocommerce-checkout #payment {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* "Payment method" heading at top of payment column */
body.woocommerce-checkout #payment .wc_payment_methods::before {
    /* Reset parent-theme backdrop (position/size/stacking) so this
       heading renders as a header bar, not an absolute full-height slab */
    position: static !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    content: "Payment method" !important;
    display: block !important;
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #fff !important;
    margin: -1rem -1.5rem 1rem -1.5rem !important;
    padding: 1rem 1.5rem !important;
    background: var(--wc-secondary) !important;
    border-radius: var(--wc-radius) var(--wc-radius) 0 0 !important;
}

/* HIDE SALE badges from checkout payment methods */
body.woocommerce-checkout #payment ul li::before,
body.woocommerce-checkout .woocommerce-checkout-payment ul li::before,
body.woocommerce-checkout .payment_methods li::before,
body.woocommerce-checkout .wc_payment_methods li::before,
body.woocommerce-checkout #order_review ul li::before,
body.woocommerce-checkout .woocommerce-checkout-review-order ul li::before {
    display: none !important;
    content: none !important;
}

/* Also hide from shipping methods and any other checkout lists */
body.woocommerce-checkout .woocommerce-shipping-methods li::before,
body.woocommerce-checkout #shipping_method li::before {
    display: none !important;
    content: none !important;
}

/* Shipping row - make label sit above methods */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0.25rem 1.5rem !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th {
    margin-bottom: 0.5rem !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td {
    width: 100% !important;
}

/* Shipping Methods Styling - Override all previous styles */
body.woocommerce-checkout .woocommerce-checkout-review-order-table #shipping_method,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods,
body.woocommerce-checkout tr.woocommerce-shipping-totals #shipping_method,
body.woocommerce-checkout tr.shipping #shipping_method {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(30, 58, 95, 0.05) !important;
    border-radius: var(--wc-radius-sm) !important;
    overflow: hidden !important;
    border: none !important;
    display: block !important;
    gap: 0 !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table #shipping_method li,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li,
body.woocommerce-checkout tr.woocommerce-shipping-totals #shipping_method li,
body.woocommerce-checkout tr.shipping #shipping_method li {
    padding: 0.875rem 1rem !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(30, 58, 95, 0.1) !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table #shipping_method li:last-child,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li:last-child,
body.woocommerce-checkout tr.woocommerce-shipping-totals #shipping_method li:last-child,
body.woocommerce-checkout tr.shipping #shipping_method li:last-child {
    border-bottom: none !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table #shipping_method li:hover,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li:hover,
body.woocommerce-checkout tr.woocommerce-shipping-totals #shipping_method li:hover,
body.woocommerce-checkout tr.shipping #shipping_method li:hover {
    background: rgba(30, 58, 95, 0.08) !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table #shipping_method li input[type="radio"],
body.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li input[type="radio"],
body.woocommerce-checkout tr.woocommerce-shipping-totals #shipping_method li input[type="radio"],
body.woocommerce-checkout tr.shipping #shipping_method li input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    accent-color: var(--wc-primary) !important;
    cursor: pointer !important;
    position: static !important;
    opacity: 1 !important;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table #shipping_method li label,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li label,
body.woocommerce-checkout tr.woocommerce-shipping-totals #shipping_method li label,
body.woocommerce-checkout tr.shipping #shipping_method li label {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: var(--wc-text) !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Reset list styling in checkout - 2 column grid with 5px margin */
body.woocommerce-checkout #payment ul,
body.woocommerce-checkout .payment_methods,
body.woocommerce-checkout .wc_payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

body.woocommerce-checkout #payment ul li,
body.woocommerce-checkout .payment_methods li,
body.woocommerce-checkout .wc_payment_methods li {
    position: relative !important;
    background: #fff !important;
    /* border: 1px solid var(--wc-border) !important; */
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 0.75rem 0 !important;
    border-radius: var(--wc-radius-sm) !important;
    transition: all 0.2s ease !important;
    min-height: 44px !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    float: none !important;
}

body.woocommerce-checkout #payment ul li:last-child,
body.woocommerce-checkout .payment_methods li:last-child,
body.woocommerce-checkout .wc_payment_methods li:last-child {
    margin-bottom: 0 !important;
}

/* Selected payment method */
/* Hide radio button (keep it accessible) - use card selection instead */
body.woocommerce-checkout #payment ul li input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* Payment methods container - card styling for sticky column */
body.woocommerce-checkout #payment .wc_payment_methods {
    position: relative !important;
    padding: 1rem 1.5rem 1.5rem !important;
    background: #fff !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: var(--wc-radius) !important;
    box-shadow: var(--wc-shadow) !important;
    transition: padding-top 0.2s ease !important;
}

/* Remove payment_box arrow */
.woocommerce-checkout #payment div.payment_box::before,
#payment div.payment_box::before,
div.payment_box::before {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Hide ALL payment method descriptions by default */
body.woocommerce-checkout #payment ul li .payment_box {
    display: none;
}

/* Show payment details for the selected method (standard WooCommerce behavior) */
body.woocommerce-checkout #payment ul li.wc_payment_method input[type="radio"]:checked ~ .payment_box {
    display: block;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    background: #fff !important;
    padding: 1rem !important;
    margin-top: 0.75rem !important;
    /* border: 1px solid var(--wc-border) !important; */
    border-top: 1px solid var(--wc-border) !important;
    border-radius: var(--wc-radius-sm) !important;
    font-size: 0.8125rem !important;
    color: var(--wc-text) !important;
    z-index: auto !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Revolut card form: one stacked field group so number / expiry / CVV aren't cut */
body.woocommerce-checkout #wc-revolut_cc-cc-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}
body.woocommerce-checkout #wc-revolut-cardholder-name {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: var(--wc-radius-sm) !important;
    font-size: 0.9375rem !important;
    box-shadow: none !important;
}
/* Revolut's MOUNT CONTAINER, not a field: it wraps the cardholder-name
   input and the card iframe, each of which already draws its own box.
   Styling it like an input nested a bordered box inside a bordered box
   and stole ~23px of width from the card field on narrow screens. */
body.woocommerce-checkout #woocommerce-revolut-card-element {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}
body.woocommerce-checkout #woocommerce-revolut-card-element iframe,
body.woocommerce-checkout #payment .payment_box iframe {
    max-width: none !important;
}

/* Collapse empty payment-method description boxes (e.g. Revolut popup mode) */
body.woocommerce-checkout #payment ul li .payment_box.chargie-empty-pbox {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Style the payment form inputs */
body.woocommerce-checkout #payment ul li .payment_box p {
    margin: 0 0 0.5rem !important;
    line-height: 1.4 !important;
}

body.woocommerce-checkout #payment ul li .payment_box p:last-child {
    margin-bottom: 0 !important;
}

/* Payment method labels - icon focused.
   MUST stay scoped to `li > label` (direct child). Gateways such as Revolut
   mount their own <label>-wrapped inputs inside .payment_box; an unscoped
   `li label` painted this button's border/background/padding onto the card
   field too, and the flex/`flex-shrink:0` logo rules below made that inner
   widget rigid so it overflowed the card on mobile. */
body.woocommerce-checkout #payment ul li > label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--wc-text) !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
    padding: 0.875rem 1rem !important;
    background: #fff !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: var(--wc-radius-sm) !important;
    transition: all 0.2s ease !important;
    overflow: visible !important;
}

body.woocommerce-checkout #payment ul li input[type="radio"]:checked + label {
    border-color: var(--wc-secondary) !important;
    background: #f0f9ff !important;
    box-shadow: 0 0 0 1px var(--wc-secondary) !important;
}

body.woocommerce-checkout #payment ul li > label:hover {
    border-color: var(--wc-secondary) !important;
}

body.woocommerce-checkout #payment ul li input[type="radio"]:focus-visible + label {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35) !important;
}

/* Parent radio circle (#payment .payment_methods > .wc_payment_method > label:before)
   is more specific than a bare label::before and was leaking a second control. */
body.woocommerce-checkout #payment .payment_methods > .wc_payment_method > label::before,
body.woocommerce-checkout #payment ul li.wc_payment_method > label::before,
body.woocommerce-checkout #payment ul li > label::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* Payment method icons — parent sets `li img { display:none; float:right }` */
body.woocommerce-checkout #payment ul li > label img,
body.woocommerce-checkout #payment ul li > label .revolut-scheme-icons-wrapper,
body.woocommerce-checkout #payment ul li > label .payment-methods--logos,
body.woocommerce-checkout #payment .payment_methods li img {
    display: inline-block !important;
    float: none !important;
    max-height: 22px !important;
    height: 22px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

/* PayPal (img is a direct child of the label) sits on the right */
body.woocommerce-checkout #payment ul li > label > img {
    margin-left: auto !important;
}

/* Revolut wraps Visa/MC/Amex (and Apple/Google logos) in a nested <div> */
body.woocommerce-checkout #payment ul li > label > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}
body.woocommerce-checkout #payment ul li > label > div img {
    margin: 0 !important;
}

/* Prose page styles add large vertical margins to every img inside .page-body */
body.woocommerce-checkout .page-body.prose #payment img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

/* Card brand logos below express checkout — 30% smaller */
body.woocommerce-checkout .payment-methods--logos > div img {
    width: 26px !important;
    height: 17px !important;
}
body.woocommerce-checkout .payment-methods--logos-count {
    width: 27px !important;
    height: 17px !important;
    line-height: 17px !important;
    font-size: 9px !important;
}
body.woocommerce-checkout .wcpay-payment-method-icon {
    height: 17px !important;
}

/* Hide extra text like "What is PayPal?" */
body.woocommerce-checkout #payment ul li > label a {
    display: inline !important;
    float: none !important;
}

/* Hide any li elements without proper payment method class */
body.woocommerce-checkout #payment ul li:not(.wc_payment_method) {
    display: list-item !important;
}


/* Add checkmark for selected */
body.woocommerce-checkout #payment ul li input[type="radio"]:checked + label::after {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    border: 6px solid var(--wc-secondary) !important;
    background: #fff !important;
    margin-left: 0.25rem !important;
    flex-shrink: 0 !important;
    order: 11 !important;
}

@media (max-width: 480px) {
    /* Selected-row checkmark plus brand logos overflow the 390px card;
       the highlighted border already marks the choice. */
    body.woocommerce-checkout #payment ul li input[type="radio"]:checked + label::after {
        display: none !important;
    }
    body.woocommerce-checkout #payment ul li > label img,
    body.woocommerce-checkout #payment .payment_methods li img {
        max-height: 18px !important;
        height: 18px !important;
    }
}

/* ── Floating widgets vs. the cart & checkout CTAs ──────────────────
   Two site-wide position:fixed launchers float above page content and were
   landing on the purchase flow's most important elements on mobile:
     .agentura-bubble   third-party chat, bottom-right, z-index 99998
                        -> covered the top-right of #place_order (34x29px)
                        -> covered .cart-mobile-checkout on the cart
     .ccc-reconsent-btn cookie re-consent, bottom-left (chargie-cookie-consent)
                        -> sat on the order Total label (23x40px)
                        -> sat on .cart-mobile-total on the cart
   Neither is ours to reposition at source (the chat is injected by the
   "Agentura Chatbox" code snippet), so they are handled here. */

/* Cookie re-consent: consent has already been given by the time someone is in
   the cart/checkout flow, and the control remains on every other page, so
   here it only gets in the way. */
body.woocommerce-checkout .ccc-reconsent-btn,
body.woocommerce-cart .ccc-reconsent-btn {
    display: none !important;
}

/* ── Checkout vertical rhythm ───────────────────────────────────────────────
   The form is a flex container with a 28px gap, and each field card adds 2rem
   of vertical padding on top of that, so the major blocks sat ~42px apart while
   the fields inside them are only 14px apart. Tightening the outer rhythm to
   match the inner one; field spacing itself is left alone. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Express checkout lifted to the top of the form on the single-column layout
   (see placeExpressButtons() in js/checkout-elements.js). Sits where the old
   trust banner used to be, above "Back to cart" and the billing form. */
/* form.checkout is a flex container, so this needs an explicit full-width basis
   or it shrinks to its content and sits ~42px narrower than the billing card
   below it, misaligned on the right. */
#chargie-express-top {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    /* The form carries ~69px of inherited spacing above its first child (its own
       padding-top plus the collapsed login form's margins), against the 28px
       flex gap below. The negative top margin claws that back so the block sits
       with even breathing room above and below. */
    margin: -1.75rem 0 1rem;
}

#chargie-express-top #chargie-express-checkout-buttons {
    margin: 0;
}

/* The divider follows the buttons here, so it reads as "pay instantly, OR fill
   in the form below" rather than introducing them. */
#chargie-express-top .chargie-express-divider {
    margin: 1rem 0 0;
}

/* Chat launcher: off entirely on checkout, at every breakpoint. This replaces
   an earlier rule that only faded it while the Place order block was in the
   bottom band below 899px — it still collided with the payment form above that
   breakpoint, and there is no reason to offer chat on the payment step.
   The panel is hidden too, so a conversation opened on an earlier page does not
   follow the customer into checkout. The script itself is injected by the
   "Agentura Chatbox" row in wp_snippets (id 88, scope footer-content), which is
   raw HTML the snippets engine echoes with no filter, so it cannot be skipped
   server-side from here. */
body.woocommerce-checkout .agentura-bubble,
body.woocommerce-checkout .agentura-panel {
    display: none !important;
}

/* Cart: .cart-mobile-bar (css/cart-page.css) is a permanently fixed bottom bar
   below 768px holding the cart total and Proceed to checkout, so the chat
   launcher sits on the CTA the entire time rather than only while scrolling —
   no scroll-based guard can help, it simply has to go. Above the breakpoint
   there is no fixed bar and nothing to collide with, so chat stays. */
@media (max-width: 768px) {
    body.woocommerce-cart .agentura-bubble {
        display: none !important;
    }
}

/* Place order button with lock icon */
.woocommerce #payment #place_order {
    width: 100%;
    padding: 1.25rem 1.25rem 1.25rem 2.5rem;
    background: linear-gradient(135deg, var(--wc-primary) 0%, var(--wc-primary-dark) 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: var(--wc-radius-sm);
    cursor: pointer;
    transition: var(--wc-transition);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    position: relative;
}

/* Lock icon on place order button */
.woocommerce #payment #place_order::before {
    content: "🔒";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

.woocommerce #payment #place_order:hover {
    background: linear-gradient(135deg, var(--wc-primary-hover) 0%, var(--wc-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

/* Trust badges container after place order button */
body.woocommerce-checkout .place-order {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

body.woocommerce-checkout .place-order::after {
    content: none !important;
    display: none !important;
}

.chargie-card-security-note {
    display: block !important;
    text-align: center !important;
    font-size: 10px !important;
    color: var(--wc-text-light) !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
    order: 10 !important;
    margin-top: 0.5rem !important;
}


/* Checkout trust badges */
.checkout-trust-badges {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    padding: 10px 0;
    order: 11;
}

.checkout-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.checkout-trust-badge svg {
    flex-shrink: 0;
    color: #2e7d32;
}

@media (max-width: 480px) {
    .checkout-trust-badges {
        gap: 6px 14px;
        flex-wrap: wrap;
    }
    .checkout-trust-badge {
        font-size: 11px;
    }
}

/* Mobile checkout cart items - prevent vertical clipping */
@media (max-width: 767px) {
    .woocommerce-checkout-review-order-table tbody tr {
        height: auto !important;
        min-height: 70px !important;
        padding: 0.75rem 1rem !important;
    }
    .woocommerce-checkout-review-order-table tbody td.product-name {
        font-size: 13px !important;
        min-width: 0 !important;
    }
    .woocommerce-checkout-review-order-table tbody td.product-name .product-name-text {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }
    .woocommerce-checkout-review-order-table tbody td.product-total {
        font-size: 14px !important;
    }
    .woocommerce-checkout-review-order-table tbody td.product-thumbnail,
    .woocommerce-checkout-review-order-table tbody td.product-name img,
    .woocommerce-checkout-review-order-table tbody td.product-name .checkout-product-thumb {
        display: none !important;
    }
    .woocommerce-checkout-review-order-table tfoot tr {
        padding: 0.25rem 1rem !important;
    }
}

/* Revolut save payment checkbox - inline with checkbox, no border */
body.woocommerce-checkout .wc-new-payment-method-wrap,
body.woocommerce-checkout p:has(#wc-revolut_cc-new-payment-method) {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce-checkout #wc-revolut_cc-new-payment-method {
    width: auto !important;
    margin: 0 !important;
}

body.woocommerce-checkout label[for="wc-revolut_cc-new-payment-method"] {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    display: inline !important;
}

/* EU VAT field - hidden by default, shown via JS for EU countries */
#vat_number_field,
.aelia_eu_vat_assistant.checkout_field {
    display: none !important;
}
#vat_number_field.vat-visible,
.aelia_eu_vat_assistant.checkout_field.vat-visible {
    display: block !important;
}

/* Privacy policy text */
body.woocommerce-checkout .woocommerce-privacy-policy-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif !important;
    font-size: 0.75rem !important;
    color: var(--wc-text-light) !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

body.woocommerce-checkout .woocommerce-privacy-policy-text p {
    margin: 0 !important;
}

/* Terms and conditions */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif !important;
    font-size: 0.875rem !important;
    color: var(--wc-text) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    line-height: 1.5 !important;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    margin-top: 3px !important;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
    color: var(--wc-secondary) !important;
    text-decoration: underline !important;
}

/* Mobile: enlarge terms-and-conditions text + checkbox by 50% */
/* Note: must include `label *` because a universal `.page-body *` rule below
   forces 14px on descendants, which beats inheritance from the label. */
@media (max-width: 767px) {
    body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label,
    body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label * {
        font-size: 1.3125rem !important;
    }

    body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
        gap: 0.75rem !important;
    }

    body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
        width: 1.5rem !important;
        height: 1.5rem !important;
        margin-top: 4px !important;
        flex-shrink: 0 !important;
    }
}

/* Collapse invisible PayPal reCAPTCHA container */
body.woocommerce-checkout #ppcp-recaptcha-v2-container,
body.woocommerce-checkout .grecaptcha-badge {
    display: none !important;
}

/* Place order section */
body.woocommerce-checkout .place-order {
    margin-top: 0 !important;
}

/* Express checkout section — below Place Order in payment column */
.chargie-express-checkout-section {
    margin-top: 0.75rem !important;
}

.chargie-express-divider {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.chargie-express-divider::before,
.chargie-express-divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--wc-border, #e2e8f0) !important;
}

.chargie-express-divider span {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--wc-text-light, #94a3b8) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.chargie-express-checkout-section .wcpay-express-checkout-wrapper {
    display: block !important;
}

.chargie-google-pay-container {
    min-height: 40px !important;
}

/* Coupon container styling - positioned above both columns */
body.woocommerce-checkout .chargie-coupon-container {
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%) !important;
    border-radius: var(--wc-radius) !important;
    padding: 1.25rem 1.5rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid var(--wc-border) !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

@media (max-width: 899px) {
    body.woocommerce-checkout .chargie-coupon-container {
        max-width: 100% !important;
    }
}

.chargie-coupon-container::before {
    content: "🏷️" !important;
    position: absolute !important;
    top: -10px !important;
    right: 10px !important;
    font-size: 3rem !important;
    opacity: 0.08 !important;
    transform: rotate(15deg) !important;
}

/* Hide decorative coupon emoji on mobile to prevent overlap */
@media (max-width: 767px) {
    .chargie-coupon-container::before {
        display: none !important;
    }
}

/* Hide coupon container when empty */
.chargie-coupon-container:empty {
    display: none !important;
}

/* Hide free-shipping-only coupons (0% discount) from order review */
tr.cart-discount.coupon-freeship {
    display: none !important;
}

/* Hide default WooCommerce coupon form outside our container */
body.woocommerce-checkout > .woocommerce-form-coupon-toggle,
body.woocommerce-checkout > form.checkout_coupon,
.woocommerce-checkout > .woocommerce > .woocommerce-form-coupon-toggle,
.woocommerce-checkout > .woocommerce > form.checkout_coupon {
    display: none !important;
}

.chargie-coupon-container .woocommerce-form-coupon-toggle {
    margin: 0 !important;
    text-align: center !important;
}

.chargie-coupon-container .woocommerce-form-coupon-toggle .woocommerce-info {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.chargie-coupon-container .woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none !important;
}

/* Hidden by default, shown via JS */
.chargie-coupon-container .checkout_coupon {
    display: none !important;
    margin-top: 1rem !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    gap: 0.5rem !important;
    align-items: center !important;
    justify-content: center !important;
    /* `width: 100%` is load-bearing: the parent theme sets
       `.checkout_coupon { width: 470px; max-width: 100% }`, and overriding
       max-width below removed that cap, so the row rendered 450px wide inside
       a 334px column and pushed "Apply coupon" 107px off the right edge. */
    width: 100% !important;
    max-width: 450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* When visible (toggled by JS) */
.chargie-coupon-container .checkout_coupon.is-visible {
    display: flex !important;
}

.chargie-coupon-container .checkout_coupon p {
    margin: 0 !important;
}

.chargie-coupon-container .checkout_coupon .form-row-first {
    flex: 1 !important;
}

.chargie-coupon-container .checkout_coupon .form-row-last {
    flex: 0 0 auto !important;
}

.chargie-coupon-container .checkout_coupon input[type="text"] {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: 2px solid var(--wc-border) !important;
    border-radius: var(--wc-radius-sm) !important;
}

.chargie-coupon-container .checkout_coupon button {
    padding: 0.75rem 1.5rem !important;
    background: var(--wc-secondary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--wc-radius-sm) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.chargie-coupon-container .checkout_coupon button:hover {
    background: var(--wc-secondary-hover) !important;
}

/* Phones: WooCommerce splits the row into two 47% columns, which leaves the
   code field or the nowrap "Apply coupon" label squeezed once the column is
   narrow (32px input at 320px wide). Stack instead — full-width field, then a
   full-width button, matching the rest of the mobile checkout. */
@media (max-width: 480px) {
    .chargie-coupon-container .checkout_coupon {
        flex-wrap: wrap !important;
    }

    .chargie-coupon-container .checkout_coupon .form-row-first,
    .chargie-coupon-container .checkout_coupon .form-row-last {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .chargie-coupon-container .checkout_coupon .form-row-last button {
        width: 100% !important;
    }
}

/* Fallback coupon form styling */
.chargie-coupon-fallback {
    position: relative !important;
    z-index: 1 !important;
}

.chargie-coupon-fallback .coupon-toggle-text {
    margin: 0 !important;
    font-size: 0.9375rem !important;
}

.chargie-coupon-fallback .chargie-showcoupon {
    color: var(--wc-secondary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s ease !important;
}

.chargie-coupon-fallback .chargie-showcoupon::before {
    content: "🎟️" !important;
    font-size: 1.1rem !important;
}

.chargie-coupon-fallback .chargie-showcoupon:hover {
    color: var(--wc-secondary-hover) !important;
    text-decoration: none !important;
}

.chargie-coupon-fallback .chargie-coupon-form {
    margin-top: 1rem !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
    display: none !important;
}

.chargie-coupon-fallback .chargie-coupon-form.is-visible {
    display: flex !important;
    animation: slideDown 0.3s ease !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chargie-coupon-fallback .chargie-coupon-form input[type="text"] {
    flex: 1 !important;
    padding: 0.875rem 1rem !important;
    border: 2px solid var(--wc-border) !important;
    border-radius: var(--wc-radius-sm) !important;
    font-size: 0.9375rem !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    background: #fff !important;
}

.chargie-coupon-fallback .chargie-coupon-form input[type="text"]:focus {
    outline: none !important;
    border-color: var(--wc-secondary) !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1) !important;
}

.chargie-coupon-fallback .chargie-coupon-form input[type="text"]::placeholder {
    color: #9ca3af !important;
}

.chargie-coupon-fallback .chargie-coupon-form button {
    padding: 0.875rem 1.75rem !important;
    background: linear-gradient(135deg, var(--wc-secondary) 0%, var(--wc-secondary-hover) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--wc-radius-sm) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.chargie-coupon-fallback .chargie-coupon-form button:hover {
    background: linear-gradient(135deg, var(--wc-secondary-hover) 0%, var(--wc-secondary) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.25) !important;
}

.chargie-coupon-fallback .chargie-coupon-form button:active {
    transform: translateY(0) !important;
}

/* ========================================
   Breadcrumbs
   ======================================== */
.woocommerce .woocommerce-breadcrumb {
    padding: 1rem 2rem;
    font-size: 0.875rem;
    color: var(--wc-text-light);
    background: var(--wc-bg);
    margin-bottom: 1rem;
}

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

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

/* Universal breadcrumbs */
.chargie-breadcrumb-nav {
    margin-bottom: 1.5rem;
}

.chargie-breadcrumb {
    display: inline;
    font-size: 0.875rem;
}

.chargie-breadcrumb a {
    color: var(--wc-secondary, #1e40af);
    text-decoration: none;
    transition: color 0.2s ease;
}

.chargie-breadcrumb a:hover {
    color: var(--wc-primary, #f97316);
    text-decoration: underline;
}

.chargie-breadcrumb .breadcrumb-sep {
    color: var(--wc-text-light, #64748b);
    margin: 0 0.5rem;
}

.chargie-breadcrumb .current {
    color: var(--wc-text-light, #64748b);
}

/* ========================================
   Notices & Messages
   ======================================== */
.woocommerce-message,
.woocommerce-info {
    background: var(--wc-bg);
    border-left: 4px solid var(--wc-success);
    border-radius: var(--wc-radius-sm);
    padding: 1rem 1.5rem 1rem 3.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--wc-shadow);
    position: relative;
    font-size: 14px;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--wc-success);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.woocommerce-error {
    background: var(--wc-bg);
    border-left: 4px solid var(--wc-primary);
    border-radius: var(--wc-radius-sm);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--wc-shadow);
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 767px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0 1rem;
    }
    
    .woocommerce ul.products li.product a img {
        height: 180px;
        padding: 1rem;
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.875rem;
        padding: 0.75rem 0.75rem 0.25rem;
    }
    
    .woocommerce ul.products li.product .price {
        font-size: 1rem;
        padding: 0 0.75rem 0.5rem;
    }
    
    .woocommerce ul.products li.product .button {
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
        margin: 0.5rem;
        width: calc(100% - 1rem);
    }
    
    .woocommerce div.product .related.products ul.products li.product::after {
        display: none;
    }
}

/* ========================================
   Loading States
   ======================================== */
.woocommerce .blockUI.blockOverlay {
    background: rgba(255, 255, 255, 0.8) !important;
}

.woocommerce .blockUI.blockOverlay::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--wc-border);
    border-top-color: var(--wc-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ========================================
   Star Ratings
   ======================================== */
.woocommerce .star-rating {
    color: var(--wc-warning);
    font-size: 0.875rem;
}

.woocommerce .star-rating span::before {
    color: var(--wc-warning);
}

/* ========================================
   Product Tabs
   ======================================== */
.woocommerce div.product .woocommerce-tabs {
    margin-top: 3rem;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--wc-text-light);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--wc-transition);
}

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

.woocommerce div.product .woocommerce-tabs .panel {
    background: var(--wc-bg);
    padding: 2rem;
    border-radius: 0 0 var(--wc-radius) var(--wc-radius);
    box-shadow: var(--wc-shadow);
}

/* ========================================
   Shop Page Hero & Header - Compact
   ======================================== */
body.chargie-page .page-header,
.chargie-page .page-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8a 50%, #ff6b35 100%) !important;
    padding: 1.25rem 2rem !important;
    border-radius: 16px !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

body.chargie-page .page-header .page-title,
.chargie-page .page-header .page-title {
    color: #fff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* ========================================
   Hero Products Section
   ======================================== */
/* ========================================
   Mini Cart Section
   ======================================== */
.mini-cart {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8a 100%) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    color: #fff !important;
}

.mini-cart-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 1rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.mini-cart-header h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #fff !important;
}

.cart-discount-badge {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 20px !important;
    letter-spacing: 0.5px !important;
}

.mini-cart-items {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
}

.mini-cart-item {
    display: flex !important;
    align-items: center !important;
    padding: 0.75rem !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    margin-bottom: 0.5rem !important;
    gap: 1rem !important;
}

.mini-cart-item:last-child {
    margin-bottom: 0 !important;
}

.mini-cart-item .item-remove {
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,0.5) !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s !important;
    flex-shrink: 0 !important;
}

.mini-cart-item .item-remove:hover {
    color: #ff7b45 !important;
}

.mini-cart-item .item-name {
    flex: 1 !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}

.mini-cart-item .item-qty-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 1rem !important;
}

.mini-cart-item .qty-btn {
    width: 28px !important;
    height: 28px !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.mini-cart-item .qty-btn:hover {
    background: rgba(255,255,255,0.2) !important;
    border-color: rgba(255,255,255,0.5) !important;
}

.mini-cart-item .qty-value {
    min-width: 24px !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

.mini-cart-item .item-qty {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.mini-cart-item .qty-btn {
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.mini-cart-item .qty-btn:hover {
    background: rgba(255,255,255,0.3) !important;
}

.mini-cart-item .item-price {
    font-weight: 700 !important;
    min-width: 70px !important;
    text-align: right !important;
}

.mini-cart-item .item-price.has-discount {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
}

.mini-cart-item .item-price .subtotal-price {
    font-weight: 700 !important;
}

.mini-cart-item .item-price .item-discount {
    font-size: 0.8rem !important;
    color: #4ade80 !important;
    font-weight: 600 !important;
}

.mini-cart-item .item-remove {
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(220,38,38,0.8) !important;
    color: #fff !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    line-height: 1 !important;
}

.mini-cart-item .item-remove:hover {
    background: #ff6b35 !important;
}

.mini-cart-totals {
    border-top: 1px solid rgba(255,255,255,0.2) !important;
    padding-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.mini-cart-totals .cart-line {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0.3rem 0 !important;
    font-size: 0.95rem !important;
}

.mini-cart-totals .cart-line.discount {
    color: #4ade80 !important;
    font-weight: 600 !important;
    background: rgba(74,222,128,0.15) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
    margin: 0.5rem 0 !important;
}

.mini-cart-totals .cart-line.discount .discount-amount {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.mini-cart-totals .cart-line.total {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid rgba(255,255,255,0.2) !important;
    margin-top: 0.5rem !important;
}

.mini-cart-totals .cart-hint {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #fbbf24 !important;
    text-align: center !important;
    padding: 0.5rem 0 !important;
}

.mini-cart-checkout {
    display: block !important;
    text-align: center !important;
    padding: 1rem 2rem !important;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(220,38,38,0.4) !important;
}

.mini-cart-checkout:hover {
    background: linear-gradient(135deg, #ff7b45 0%, #ff6b35 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(220,38,38,0.5) !important;
}

/* Mini Cart Mobile Responsive */
@media (max-width: 767px) {
    .mini-cart-item {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 0.25rem 0.75rem !important;
        align-items: center !important;
    }

    .mini-cart-item .item-remove {
        grid-row: 1 / 3 !important;
        grid-column: 1 !important;
        align-self: center !important;
    }

    .mini-cart-item .item-name {
        grid-row: 1 / 3 !important;
        grid-column: 2 !important;
        align-self: center !important;
    }

    .mini-cart-item .item-qty-controls {
        grid-row: 1 !important;
        grid-column: 3 !important;
        margin: 0 !important;
        justify-content: center !important;
    }

    .mini-cart-item .item-price {
        grid-row: 2 !important;
        grid-column: 3 !important;
        text-align: center !important;
        min-width: unset !important;
    }
}

/* Instant Feedback & Optimistic UI */
.mini-cart-item .qty-btn:active {
    transform: scale(0.9) !important;
    background: #0284c7 !important;
    color: #fff !important;
}

.mini-cart-item .item-remove:active {
    transform: scale(0.85) !important;
    background: #dc2626 !important;
    color: #fff !important;
}

.mini-cart-item .qty-value {
    transition: transform 0.15s ease !important;
}

.mini-cart-item.updating .qty-value {
    opacity: 0.7 !important;
}

/* Upsells Section */
.upsells-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin-top: 1rem !important;
    border: 1px solid #e2e8f0 !important;
}

.upsells-header {
    text-align: center !important;
    margin-bottom: 1rem !important;
}

.upsells-header h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 0.25rem !important;
}

.upsells-header p {
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin: 0 !important;
}

.upsells-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    justify-content: center !important;
}

.upsells-grid .upsell-card {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    background: #fff !important;
    border-radius: 10px !important;
    padding: 0.75rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    flex: 1 1 280px !important;
    max-width: 350px !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.upsells-grid .upsell-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

.upsells-grid .upsell-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex: 1 !important;
    min-width: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
}

.upsells-grid .upsell-card img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
}

.upsells-grid .upsell-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.upsells-grid .upsell-info h4 {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 0 0.25rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.upsells-grid .upsell-price {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #16a34a !important;
}

.upsells-grid .upsell-add-btn {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s !important;
}

.upsells-grid .upsell-add-btn:hover {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    transform: scale(1.05) !important;
}

/* Product Sections */
.product-section {
    margin-top: 2rem !important;
    padding: 1.5rem !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

.product-section .section-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 1.5rem !important;
    text-align: center !important;
}

.product-section .section-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 1rem !important;
}

.section-product-card {
    background: #f8fafc !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    display: flex !important;
    flex-direction: column !important;
}

.section-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
}

.section-product-link,
.hero-product-link {
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.section-product-card img {
    width: 100% !important;
    height: 150px !important;
    object-fit: contain !important;
    background: #fff !important;
    padding: 0.5rem !important;
}

.section-product-info {
    padding: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.section-product-info h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 0 0.5rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
}

.section-product-price {
    margin-bottom: 0.75rem !important;
}

.section-product-price .old {
    text-decoration: line-through !important;
    color: #94a3b8 !important;
    font-size: 14.5px !important;
}

.section-product-price .new {
    color: #ff6b35 !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.section-add-btn {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2847 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.6rem 1rem !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: all 0.2s !important;
    margin-top: auto !important;
}

.section-add-btn:hover {
    background: linear-gradient(135deg, #2d4a6f 0%, #1a3857 100%) !important;
    transform: scale(1.02) !important;
}

@media (max-width: 768px) {
    .section-add-btn {
        font-size: 14px !important;
    }
}

@media (max-width: 600px) {
    .section-add-btn {
        font-size: 13px !important;
    }
}

.hero-products {
    display: block !important;
    margin-bottom: 3rem !important;
    padding: 2rem 0 !important;
}

.hero-products .hero-title {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-align: center !important;
    margin: 0 0 2rem !important;
    display: block !important;
    letter-spacing: -0.02em !important;
}

.hero-products .hero-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
}

.hero-products .hero-card {
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    border: 2px solid #e2e8f0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.hero-products .hero-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(220,38,38,0.2) !important;
    border-color: #ff6b35 !important;
}

.hero-products .hero-badge {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 20px !important;
    letter-spacing: 1px !important;
    z-index: 10 !important;
}

.hero-products .hero-card img {
    width: 100% !important;
    height: 200px !important;
    object-fit: contain !important;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%) !important;
    padding: 2rem !important;
}

.hero-products .hero-content {
    padding: 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.hero-products .hero-content h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 0.5rem !important;
    line-height: 1.3 !important;
}

.hero-products .hero-desc {
    font-size: 16px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 0 0 1rem !important;
    flex: 1 !important;
}

.hero-products .hero-price {
    margin-bottom: 1rem !important;
}

.hero-products .hero-price .old {
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    font-size: 1rem !important;
    margin-right: 0.5rem !important;
}

.hero-products .hero-price .new {
    color: #ff6b35 !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
}

.hero-products .hero-btn {
    display: block !important;
    text-align: center !important;
    padding: 1rem !important;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(220,38,38,0.3) !important;
    margin: 0 1rem 1rem 1rem !important;
    margin-top: auto !important;
    border: none !important;
    cursor: pointer !important;
}

.hero-products .hero-btn:hover {
    background: linear-gradient(135deg, #ff7b45 0%, #ff6b35 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(220,38,38,0.4) !important;
}

.hero-products .section-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-align: center !important;
    margin: 2rem 0 0.5rem !important;
    display: block !important;
}

@media (max-width: 900px) {
    .hero-products .hero-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .hero-products .hero-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   Bulk Packs Section - Collapsible
   ======================================== */
.bulk-packs-section {
    display: block !important;
    margin: 2rem 0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.bulk-packs-section .bulk-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-align: center !important;
    margin: 0 0 0.5rem !important;
    display: block !important;
}

.bulk-packs-section .bulk-subtitle {
    font-size: 1rem !important;
    color: #64748b !important;
    text-align: center !important;
    margin: 0 0 1.5rem !important;
    display: block !important;
}

.pack-category {
    background: #fff !important;
    border-radius: 16px !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    border: 2px solid #e2e8f0 !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.pack-category:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

.pack-category.expanded {
    border-color: #ff6b35 !important;
}

.pack-header {
    display: flex !important;
    align-items: center !important;
    padding: 1.25rem 1.5rem !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.pack-header:hover {
    background: #f8fafc !important;
}

.pack-info {
    flex: 1 !important;
}

.pack-info h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
    display: block !important;
}

.pack-info .pack-units {
    font-weight: 400 !important;
    color: #64748b !important;
    font-size: 1rem !important;
}

.pack-info .pack-desc {
    font-size: 0.875rem !important;
    color: #64748b !important;
    margin: 0.25rem 0 0 !important;
    display: block !important;
}

.pack-savings {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-right: 1rem !important;
}

.savings-badge {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.price-per-unit {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #ff6b35 !important;
    margin-top: 0.25rem !important;
}

.pack-arrow {
    font-size: 1rem !important;
    color: #94a3b8 !important;
    transition: transform 0.3s ease !important;
}

.pack-category.expanded .pack-arrow {
    transform: rotate(180deg) !important;
}

.pack-products {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease, padding 0.3s ease !important;
    background: #f8fafc !important;
}

.pack-category.expanded .pack-products {
    max-height: 500px !important;
    padding: 1rem 1.5rem 1.5rem !important;
}

.pack-product {
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    transition: all 0.2s ease !important;
}

.pack-product:last-child {
    margin-bottom: 0 !important;
}

.pack-product:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    transform: translateX(4px) !important;
}

.pack-product img {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    background: #fff !important;
    margin-right: 1rem !important;
    flex-shrink: 0 !important;
}

.pack-product-info {
    flex: 1 !important;
}

.pack-product-info h4 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 0 0.25rem !important;
    display: block !important;
}

.pack-product-price {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #ff6b35 !important;
}

.pack-add-btn {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: #fff !important;
    padding: 0.6rem 1.25rem !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.pack-add-btn:hover {
    background: linear-gradient(135deg, #ff7b45 0%, #ff6b35 100%) !important;
    transform: scale(1.05) !important;
}

@media (max-width: 600px) {
    .pack-header {
        flex-wrap: wrap !important;
    }
    .pack-savings {
        margin: 0.5rem 0 0 !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }
    .pack-product {
        flex-wrap: wrap !important;
    }
    .pack-add-btn {
        width: 100% !important;
        text-align: center !important;
        margin-top: 0.75rem !important;
    }
}

/* Hide ALL content except product lists and hero section - only on shop page */
body.chargie-shop-page .page-body {
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Show hero products section */
body.chargie-shop-page .page-body > .hero-products {
    display: block !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* Show bulk packs section */
body.chargie-shop-page .page-body > .bulk-packs-section {
    display: block !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* Hide elements only on shop page (not cart/checkout) */
body.chargie-shop-page .page-body > *:not(.hero-products):not(.bulk-packs-section) {
    display: none !important;
}

/* Restore font-size for cart and checkout pages */
body.woocommerce-cart .page-body,
body.woocommerce-checkout .page-body {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

body.woocommerce-cart .page-body *,
body.woocommerce-checkout .page-body * {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Beat `.page-body * { font-size:14px; line-height:1.5 }` so these match
   the Payment method ::before heading. */
body.woocommerce-checkout .page-body .woocommerce-billing-fields h3,
body.woocommerce-checkout .page-body h3#billing_details_heading,
body.woocommerce-checkout .page-body h3.chargie-shipping-title,
body.woocommerce-checkout .page-body .woocommerce-additional-fields h3,
body.woocommerce-checkout .page-body #order_review_heading {
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

body.woocommerce-checkout .chargie-card-security-note {
    font-size: 10px !important;
}
body.woocommerce-checkout .chargie-checkout-privacy-note {
    font-size: 12px !important;
}

/* Tighten spacing between newsletter checkbox and ship-to-different */
body.woocommerce-checkout .woocommerce-billing-fields {
    margin-bottom: 8px !important;
}
body.woocommerce-checkout .woocommerce-billing-fields .form-row.mailchimp-newsletter {
    margin-top: 16px !important;
    margin-bottom: 4px !important;
}
body.woocommerce-checkout #ship-to-different-address {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

body.woocommerce-cart .woocommerce-cart-form td,
body.woocommerce-cart .woocommerce-cart-form th,
body.woocommerce-cart .woocommerce-cart-form a,
body.woocommerce-cart .cart_totals td,
body.woocommerce-cart .cart_totals th {
    font-size: 1rem !important;
}

/* WooCommerce cart table styling */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart_totals {
    font-size: 1rem !important;
}

body.woocommerce-cart .woocommerce-cart-form table {
    width: 100% !important;
}

body.woocommerce-cart .woocommerce-cart-form .product-name,
body.woocommerce-cart .woocommerce-cart-form .product-price,
body.woocommerce-cart .woocommerce-cart-form .product-subtotal {
    font-size: 1rem !important;
}

body.woocommerce-cart .woocommerce-cart-form .product-remove a {
    font-size: 1.5rem !important;
    color: #ff6b35 !important;
}

body.woocommerce-cart .woocommerce-cart-form .quantity input {
    width: 60px !important;
    padding: 0.5rem !important;
    font-size: 1rem !important;
}

/* Hide original product grids - bulk packs section replaces them */
body.chargie-shop-page .page-body > ul.has-products {
    display: none !important;
}

/* Hide ULs without products */
body.chargie-shop-page .page-body > ul.no-products {
    display: none !important;
}

body.chargie-shop-page .page-body > h3 {
    display: block !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 1.5rem 0 0.75rem !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.4 !important;
}

/* ========================================
   Custom Shop Page Grid (Elementor/Custom HTML)
   ======================================== */
body.chargie-shop-page .page-body ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    list-style: none !important;
    padding: 2rem 0 !important;
    margin: 0 !important;
}

body.chargie-shop-page .page-body ul:not(#shipping_method):not(.woocommerce-shipping-methods):not(.wc_payment_methods) li {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

body.chargie-shop-page .page-body ul:not(#shipping_method):not(.woocommerce-shipping-methods):not(.wc_payment_methods) li:hover {
    transform: translateY(-12px) scale(1.02) !important;
    box-shadow: 0 25px 50px rgba(220,38,38,0.15), 0 10px 30px rgba(0,0,0,0.1) !important;
    border-color: #ff6b35 !important;
}

/* Sale Badge */
body.chargie-shop-page .page-body ul li {
    position: relative !important;
}

/* Product Image */
body.chargie-shop-page .page-body ul li img {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%) !important;
    padding: 1.5rem !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

body.chargie-shop-page .page-body ul li:hover img {
    transform: scale(1.08) !important;
}

/* Product Content Area */
body.chargie-shop-page .page-body ul li h3 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    padding: 1rem 1rem 0.25rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    min-height: auto !important;
    display: block !important;
}

body.chargie-shop-page .page-body ul li h3 a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    display: block !important;
}

body.chargie-shop-page .page-body ul li:hover h3 a {
    color: #ff6b35 !important;
}

/* Price container - hide text, show only price elements */
body.chargie-shop-page .page-body ul li p {
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 1.6 !important;
    display: block !important;
}

/* Price elements - show with proper styling */
body.chargie-shop-page .page-body ul li del {
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    text-decoration: line-through !important;
    display: inline !important;
}

body.chargie-shop-page .page-body ul li ins {
    text-decoration: none !important;
    background: none !important;
    font-weight: 700 !important;
    color: #ff6b35 !important;
    font-size: 1.15rem !important;
    display: inline !important;
    margin-left: 0.5rem !important;
}

body.chargie-shop-page .page-body ul li del bdi,
body.chargie-shop-page .page-body ul li ins bdi {
    font-size: inherit !important;
}

/* Quick View Link */
body.chargie-shop-page .page-body ul li a:contains('Quick View'),
body.chargie-shop-page .page-body ul li > br + a {
    display: none !important;
}

/* Add to Cart Button */
body.chargie-shop-page .page-body ul li a[href*="add-to-cart"],
body.chargie-shop-page .page-body ul li a.add_to_cart_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin: 1rem 1.25rem 1.25rem !important;
    padding: 1rem 1.5rem !important;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3) !important;
    letter-spacing: 0.5px !important;
}

body.chargie-shop-page .page-body ul li a[href*="add-to-cart"]:hover,
body.chargie-shop-page .page-body ul li a.add_to_cart_button:hover {
    background: linear-gradient(135deg, #ff7b45 0%, #ff6b35 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4) !important;
}

/* Hide unwanted text elements */
body.chargie-shop-page .page-body ul li br {
    display: none !important;
}

/* Position relative for badge */
body.chargie-shop-page .page-body ul li {
    position: relative !important;
}

/* Hide "Sale!" and "Quick View" text using font-size trick - only on shop page */
body.chargie-shop-page .page-body ul li {
    font-size: 0 !important;
}

body.chargie-shop-page .page-body ul li * {
    font-size: 1rem !important;
}

body.chargie-shop-page .page-body ul li h3 {
    font-size: 1.1rem !important;
}

body.chargie-shop-page .page-body ul li a[href*="add-to-cart"] {
    font-size: 0.9rem !important;
}

/* Style SALE badge on products - only on shop page */
body.chargie-shop-page .page-body ul li::before {
    content: none !important;
    display: none !important;
}

/* Price container styling */
body.chargie-shop-page .page-body ul li > a + p {
    padding: 0.5rem 1.25rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #ff6b35 !important;
}

/* Feature list items (in product descriptions) */
body.chargie-shop-page .page-body > ul:not(:has(img)) {
    display: block !important;
    background: #f8fafc !important;
    border-radius: 16px !important;
    padding: 1.5rem 2rem !important;
    margin: 1.5rem 0 !important;
}

body.chargie-shop-page .page-body > ul:not(:has(img)) li {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0.5rem 0 !important;
    display: list-item !important;
    list-style: disc !important;
    margin-left: 1.5rem !important;
}

@media (max-width: 768px) {
    body.chargie-shop-page .page-body ul {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    body.chargie-shop-page .page-body ul {
        grid-template-columns: 1fr !important;
    }
}

/* Checkout mobile font adjustments */
@media (max-width: 768px) {
    .woocommerce #payment #place_order {
        font-size: 17px;
        font-weight: 700;
    }

    .woocommerce-checkout-review-order-table tfoot th {
        font-size: 15px !important;
    }

    body.woocommerce-checkout .place-order::after {
        font-size: 13px !important;
    }
}

/* Hide remove-item button from checkout order review */
.woocommerce-checkout-review-order-table .checkout-remove-item {
    display: none !important;
}

/* Mobile: order review — name+qty on line 1, price below qty on line 2 */
@media (max-width: 767px) {
    .woocommerce-checkout-review-order-table tbody tr {
        display: grid !important;
        grid-template-columns: 1fr !important;
        height: auto !important;
        padding: 0.75rem 1.5rem !important;
        gap: 0.15rem !important;
    }

    .woocommerce-checkout-review-order-table tbody td.product-name {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-total {
        text-align: right !important;
        font-size: 14px !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }
}

/* ── Express checkout buttons inline with Add to Cart ───── */
.woocommerce div.product form.cart .wc-revolut-payment-request-instance,
.woocommerce div.product form.cart #wc-revolut-payment-request-container,
.woocommerce div.product form.cart #revolut-pay-container,
.woocommerce div.product form.cart [id^="revolut-"] {
    clear: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 0 !important;
}

.woocommerce div.product form.cart #revolut-payment-request-button,
.woocommerce div.product form.cart #revolut-pay-button {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* On mobile, send them back to their own row (full-width) below the button */
@media (max-width: 500px) {
    .woocommerce div.product form.cart .wc-revolut-payment-request-instance,
    .woocommerce div.product form.cart #wc-revolut-payment-request-container,
    .woocommerce div.product form.cart #revolut-pay-container,
    .woocommerce div.product form.cart [id^="revolut-"] {
        flex: 1 1 100% !important;
        margin-top: 0.5rem !important;
    }
}

/* ============================================================
   PDP fixes — 2026-09-02 (Vera)
   - Thumbnails were rendered below the main image but with
     negative margin so they cropped under the gallery.
   - The qty <label class="screen-reader-text"> lost its hide
     rule because the standard WP one wasn't applied at the
     woocommerce form level; it appeared as a wide block above
     the ATC button.
   - Description body used <strong> for paragraph leads and
     unstyled <h4> for sub-sections, which inherit tiny browser
     defaults — read as choppy.
   - Bullet list had no spacing/styling.
   ============================================================ */

/* 1. Thumbnail row — give it proper spacing and prevent crop */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow: visible !important;
    float: none !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li {
    width: calc(25% - 6px) !important;
    max-width: calc(25% - 6px) !important;
    flex: 0 0 calc(25% - 6px) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    opacity: .55;
    transition: opacity .15s ease;
    border: 1px solid transparent;
    border-radius: 4px;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
    opacity: 1;
    border-color: var(--wc-primary, #ff6b35);
}
/* Restore the side-by-side thumbnail layout (override my earlier
   flex-viewport: 100% rule which forced a single column) */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    background: #f7f8fa;
    border-radius: 6px;
}

/* 2. Hide screen-reader-text inside the woocommerce form */
.woocommerce div.product form.cart .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 3. form.cart should never overflow the summary column */
.woocommerce div.product form.cart {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.woocommerce div.product form.cart > * {
    max-width: 100% !important;
}

/* 4. Description body — proper headings + paragraph rhythm */
.woocommerce-Tabs-panel--description > h2,
.woocommerce-Tabs-panel--additional_information > h2 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}
.woocommerce-Tabs-panel--description h4 {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #111 !important;
    margin: 2rem 0 0.75rem !important;
    line-height: 1.35 !important;
    letter-spacing: -0.005em !important;
}
.woocommerce-Tabs-panel--description > p:first-of-type {
    margin-top: 0 !important;
}
.woocommerce-Tabs-panel--description p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #333 !important;
    margin: 0 0 1rem !important;
}
/* Lead-paragraph styling: only for the very first paragraph after the section, so we do not disrupt every <p> that happens to start with an inline emphasis. */
.woocommerce-Tabs-panel--description > p:first-of-type {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    color: #222 !important;
}
.woocommerce-Tabs-panel--description > p:first-of-type strong {
    color: #111 !important;
    font-weight: 600 !important;
}

/* 5. Bullet list — clean rhythm */
.woocommerce-Tabs-panel--description ul {
    margin: 0 0 1.25rem 0 !important;
    padding: 0 0 0 1.25rem !important;
    list-style: disc !important;
}
.woocommerce-Tabs-panel--description ul li {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #333 !important;
    margin-bottom: 0.4rem !important;
    padding-left: 0.25rem !important;
}
.woocommerce-Tabs-panel--description ul li::marker {
    color: var(--wc-primary, #ff6b35) !important;
}

/* 6. Tabs container should not be cropped horizontally */
.woocommerce div.product .woocommerce-tabs {
    overflow: visible !important;
}

/* Checkout: Stripe "Save payment information" row.
   The global `label { display:block }` (Customizer Additional CSS) made the
   label take the full row inside Stripe's flex <p>, pushing it under the
   checkbox. Keep checkbox and text on one line (2026-09-15). */
.woocommerce-checkout p.form-row.woocommerce-SavedPaymentMethods-saveNew {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
}
.woocommerce-checkout p.form-row.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
    flex: 0 0 auto;
    width: auto;
    margin: 4px 0 0 !important; /* checkbox 13px vs 21px line: centers it on the first text line */
}
.woocommerce-checkout p.form-row.woocommerce-SavedPaymentMethods-saveNew label {
    display: inline;
    flex: 1 1 auto;
    width: auto;
    margin: 0;
}