/*
Theme Name: Shockbox Theme
Theme URI: https://shokbox.co.uk/
Author: Shokbox
Description: A custom WooCommerce theme for Shockbox based on the shockbox_html template.
Version: 1.1.4
Text Domain: shockbox-theme
*/

/* WordPress core styles if needed */
.aligncenter {
    display: block;
    margin: 0 auto;
}

div#more-dropdown-menu {
    background-color: #282828;
}

/* Outlet Styles */
:root {
    --price-original: 215.4 16.3% 46.9%;
    --price-outlet: 0 84.2% 60.2%;
    --sale: 0 84.2% 60.2%;
    --sale-foreground: 0 0% 98%;
}

.bg-sale {
    background-color: hsl(var(--sale)) !important;
}

.text-sale-foreground {
    color: hsl(var(--sale-foreground)) !important;
}

.text-price-original {
    color: hsl(var(--price-original));
}

.text-price-outlet {
    color: hsl(var(--price-outlet));
}

/* Product Description Spacing (Overrides Tailwind Reset) */
#tab-description p {
    margin-bottom: 1.5rem !important;
}
#tab-description p:last-child {
    margin-bottom: 0 !important;
}

#tab-description h1,
#tab-description h2,
#tab-description h3,
#tab-description h4,
#tab-description h5,
#tab-description h6 {
    margin-top: 2.25rem !important;
    margin-bottom: 0.875rem !important;
    font-weight: 700 !important;
    color: hsl(var(--foreground)) !important;
    line-height: 1.3 !important;
}

/* Reset top margin only for the absolute first element at the very top of the tab description content */
#tab-description > div > div > *:first-child,
#tab-description > div > div > *:first-child > *:first-child {
    margin-top: 0 !important;
}

/* FAQ & Accordion Base Styling (Fixes Tailwind Purge/Expansion Issues) */
.faq-content,
.airline-content,
.tips-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* FAQ Content Paragraph & List Formatting */
.faq-content p {
    margin-bottom: 0.875rem;
    line-height: 1.7;
}

.faq-content p:last-child {
    margin-bottom: 0;
}

.faq-content ul,
.faq-content ol {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}

.faq-content ul {
    list-style-type: disc !important;
}

.faq-content ol {
    list-style-type: decimal !important;
}

.faq-content li {
    margin-bottom: 0.375rem;
    line-height: 1.6;
}

.faq-content a {
    color: #ff9c17 !important;
    text-decoration: underline !important;
    font-weight: 600;
}


/* Fix WooCommerce Gallery width inside custom grid column */
.woocommerce div.product div.images {
    width: 100% !important;
    float: none !important;
    margin-bottom: 0 !important;
}

/* WooCommerce Checkout Terms & Privacy Policy Links Styling */
.wc-block-components-checkbox__label a,
.woocommerce-terms-and-conditions-link,
.woocommerce-privacy-policy-link,
.wc-terms-and-conditions a,
.woocommerce-checkout a.woocommerce-privacy-policy-link {
    color: #d4af37 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out !important;
}

.wc-block-components-checkbox__label a:hover,
.woocommerce-terms-and-conditions-link:hover,
.woocommerce-privacy-policy-link:hover,
.wc-terms-and-conditions a:hover,
.woocommerce-checkout a.woocommerce-privacy-policy-link:hover {
    color: #b89428 !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   Single Post & Typography Styling
   ========================================================================== */

/* Single Post Content Container */
.single-post-content {
    color: hsl(var(--muted-foreground));
    font-size: 1.125rem; /* 18px body text */
    line-height: 1.8;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

/* Expand container when Gutenberg Columns exist */
.single-post-content:has(.wp-block-columns) {
    max-width: 1140px;
}

/* Headings Styling & Font Sizes (Overrides Tailwind Preflight Reset) */
.single-post-content h1,
.single-post-content h2,
.single-post-content h3,
.single-post-content h4,
.single-post-content h5,
.single-post-content h6 {
    color: hsl(var(--foreground)) !important;
    font-family: inherit;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

.single-post-content h2 {
    font-size: 1.875rem !important; /* 30px */
    line-height: 1.3 !important;
    margin-top: 2.75rem !important;
    margin-bottom: 1rem !important;
}

.single-post-content h3 {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.35 !important;
    margin-top: 2.25rem !important;
    margin-bottom: 0.875rem !important;
}

.single-post-content h4 {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.4 !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.75rem !important;
}

/* Paragraphs & Lists */
.single-post-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.single-post-content ul,
.single-post-content ol {
    margin-top: 1rem;
    margin-bottom: 1.75rem;
    padding-left: 1.5rem;
}

.single-post-content ul {
    list-style-type: disc !important;
}

.single-post-content ol {
    list-style-type: decimal !important;
}

.single-post-content li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

/* Links */
.single-post-content a {
    color: #ff9c17 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.single-post-content a:hover {
    opacity: 0.85;
}

/* Images & Captions */
.single-post-content img {
    border-radius: 0.5rem;
    max-width: 100%;
    height: auto;
    margin: 2rem auto;
    display: block;
}

.single-post-content figure {
    margin: 2rem 0;
}

.single-post-content figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground) / 0.8);
    margin-top: 0.5rem;
    font-style: italic;
}

/* Gutenberg Columns Block Styling */
.single-post-content .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    align-items: flex-start;
}

/* Hide empty Gutenberg gap columns */
.single-post-content .wp-block-column:empty {
    display: none !important;
}

/* Desktop Sizing for Columns */
@media (min-width: 782px) {
    .single-post-content .wp-block-columns {
        flex-wrap: nowrap;
    }
    .single-post-content .wp-block-column[style*="flex-basis:66"] {
        flex: 0 0 65% !important;
        max-width: 65% !important;
    }
    .single-post-content .wp-block-column[style*="flex-basis:33"] {
        flex: 0 0 32% !important;
        max-width: 32% !important;
        background-color: hsl(var(--muted) / 0.4);
        padding: 1.5rem 1.75rem;
        border: 1px solid hsl(var(--border));
        border-radius: 0.5rem;
    }
}

/* Mobile & Tablet Column Stacking */
@media (max-width: 781px) {
    .single-post-content .wp-block-columns {
        flex-direction: column !important;
        gap: 2rem;
    }
    .single-post-content .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .single-post-content .wp-block-column[style*="flex-basis:33"] {
        background-color: hsl(var(--muted) / 0.4);
        padding: 1.25rem 1.5rem;
        border: 1px solid hsl(var(--border));
        border-radius: 0.5rem;
    }
}

/* Responsive Embeds & YouTube iFrames */
.single-post-content .wp-block-embed,
.single-post-content .wp-block-embed-youtube {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
}

.single-post-content .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.5rem;
}

.single-post-content .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Pullquote & Blockquote Styling */
.single-post-content .wp-block-pullquote,
.single-post-content blockquote {
    border-left: 4px solid hsl(var(--secondary));
    background-color: hsl(var(--muted) / 0.3);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
}

.single-post-content blockquote {
    font-style: italic;
    color: hsl(var(--foreground));
}

.single-post-content .wp-block-pullquote blockquote {
    margin: 0;
    padding: 0;
    border: none;
}

/* ==========================================================================
   Pagination Styling (WordPress & WooCommerce)
   ========================================================================== */
.articles-pagination,
.navigation.pagination,
.woocommerce-pagination,
.nav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important; /* 8px spacing */
}

/* Hide screen-reader-text in nav if present */
.navigation.pagination .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;
}

/* Individual Pagination Buttons (a and span) */
.articles-pagination .page-numbers,
.navigation.pagination .page-numbers,
.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.75rem !important; /* 44px target */
    height: 2.75rem !important;
    padding: 0 0.75rem !important;
    font-family: inherit !important;
    font-size: 0.875rem !important; /* 14px */
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: hsl(var(--foreground)) !important;
    background-color: hsl(var(--muted)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0.375rem !important; /* 6px rounded */
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
}

/* Hover State */
.articles-pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers li a:hover {
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
    border-color: hsl(var(--secondary)) !important;
    transform: translateY(-1px) !important;
}

/* Current / Active Page State */
.articles-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current,
.woocommerce-pagination .page-numbers .current {
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
    border-color: hsl(var(--secondary)) !important;
    cursor: default !important;
}

/* Dots (...) Styling */
.articles-pagination .page-numbers.dots,
.navigation.pagination .page-numbers.dots,
.woocommerce-pagination .page-numbers .dots {
    background-color: transparent !important;
    border-color: transparent !important;
    color: hsl(var(--muted-foreground)) !important;
    min-width: 1.5rem !important;
    padding: 0 0.25rem !important;
    cursor: default !important;
}

/* SVG icons inside prev/next buttons */
.articles-pagination .page-numbers svg,
.navigation.pagination .page-numbers svg,
.woocommerce-pagination .page-numbers svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   WooCommerce Cart Page Styling (Classic & Blocks)
   ========================================================================== */

/* Unbreakable 2-Column Cart Grid Layout (Matching Image 1) */
.woocommerce-cart-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    width: 100% !important;
    align-items: flex-start !important;
}

@media (min-width: 1024px) {
    .woocommerce-cart-grid {
        grid-template-columns: minmax(0, 1fr) 380px !important;
        gap: 3rem !important;
    }
}

@media (min-width: 1280px) {
    .woocommerce-cart-grid {
        grid-template-columns: minmax(0, 1fr) 420px !important;
        gap: 4rem !important;
    }
}

.woocommerce-cart-main {
    min-width: 0 !important;
    width: 100% !important;
    float: none !important;
}

.woocommerce .cart-collaterals,
.cart-collaterals {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    margin-top: 0 !important;
    position: sticky !important;
    top: 7rem !important;
}

.woocommerce .cart-collaterals::before,
.woocommerce .cart-collaterals::after {
    display: none !important;
}

/* Minimalist Cart Item Styling (Matching Image 1) */
.cart-items-list .cart-item-row {
    transition: background-color 0.2s ease;
}

.cart-items-list .cart-product-thumb {
    width: 5rem;
    height: 5rem;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@media (min-width: 768px) {
    .cart-items-list .cart-product-thumb {
        width: 5.5rem;
        height: 5.5rem;
    }
}

.cart-items-list .cart-product-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cart-items-list .product-variation-data dt {
    font-weight: 500;
    float: left;
    clear: left;
    margin-right: 0.25rem;
}

.cart-items-list .product-variation-data dd {
    margin: 0;
}

.cart-items-list .product-variation-data p {
    margin: 0;
}

/* Compact Quantity Stepper (Matching Image 1: [ - 1 + ]) */
.quantity-stepper-wrap .quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid hsl(var(--border)) !important;
    background-color: hsl(var(--background)) !important;
    height: 1.875rem !important; /* ~30px */
}

.quantity-stepper-wrap .quantity .minus,
.quantity-stepper-wrap .quantity .plus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.5rem !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: hsl(var(--foreground)) !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
}

.quantity-stepper-wrap .quantity .minus:hover,
.quantity-stepper-wrap .quantity .plus:hover {
    color: hsl(var(--secondary)) !important;
}

.quantity-stepper-wrap .quantity .minus svg,
.quantity-stepper-wrap .quantity .plus svg,
.quantity .minus svg,
.quantity .plus svg {
    pointer-events: none !important;
}

.quantity-stepper-wrap .quantity input.qty {
    width: 1.75rem !important;
    height: 100% !important;
    padding: 0 !important;
    text-align: center !important;
    border: none !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    background: transparent !important;
    color: hsl(var(--foreground)) !important;
    -moz-appearance: textfield !important;
}

.quantity-stepper-wrap .quantity input.qty::-webkit-outer-spin-button,
.quantity-stepper-wrap .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Trash Icon Next to Stepper */
.cart-items-list a.remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: hsl(var(--foreground)) !important;
    transition: color 0.2s ease !important;
}

.cart-items-list a.remove:hover {
    color: hsl(var(--destructive)) !important;
}

/* Cart Totals Sidebar Card (Matching Image 1) */
.cart_totals {
    background-color: hsl(var(--background)) !important;
    border: 1px solid hsl(var(--border) / 0.8) !important;
    padding: 1.5rem !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    .cart_totals {
        padding: 2rem !important;
    }
}

.cart_totals h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: hsl(var(--foreground)) !important;
}

/* Proceed to Checkout Button (Yellow Rectangular CTA) */
.cart_totals a.checkout-button,
.wc-proceed-to-checkout a.checkout-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 3.25rem !important;
    padding: 1rem 1.5rem !important;
    background-color: #f6c000 !important; /* Vivid Yellow as seen in Image 1 */
    color: #111111 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    white-space: nowrap !important;
    border: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.cart_totals a.checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #111111 !important;
    color: #ffffff !important;
}

/* Express Payment Buttons inside Cart Totals (Full Width & Contained) */
.cart_totals #wc-stripe-payment-request-wrapper,
.cart_totals .wc-stripe-cart-checkout-container,
.cart_totals #payment-request-button,
.cart_totals #ppc-button,
.cart_totals .wcppec-checkout-buttons {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0.5rem !important;
}

.cart_totals iframe {
    max-width: 100% !important;
}

/* Order Total Row in Cart */
.cart_totals .order-total-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.25rem 0 !important;
    border-bottom: 1px solid hsl(var(--border) / 0.8) !important;
}

.cart_totals .order-total-row span:first-child {
    font-family: inherit !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: hsl(var(--foreground)) !important;
    white-space: nowrap !important;
}

.cart_totals .order-total-row span:last-child {
    font-family: inherit !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: hsl(var(--foreground)) !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Cart Shipping inside Totals */
.cart_totals .shipping-row .woocommerce-shipping-destination {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.25rem;
}

.cart_totals .shipping-calculator-button {
    color: hsl(var(--foreground)) !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    font-size: 0.75rem !important;
}

.cart_totals .shipping-calculator-form input.input-text,
.cart_totals .shipping-calculator-form select {
    width: 100% !important;
    height: 2.25rem !important;
    padding: 0 0.5rem !important;
    font-size: 0.75rem !important;
    border: 1px solid hsl(var(--border)) !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-bottom: 0.5rem !important;
}

.cart_totals .shipping-calculator-form button.button {
    width: 100% !important;
    height: 2.25rem !important;
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
}

/* ==========================================================================
   WooCommerce Gutenberg Blocks: Cart & Checkout Full Styling
   ========================================================================== */

/* 1. Cart Block Container & Layout */
.wp-block-woocommerce-cart,
.wc-block-cart {
    color: hsl(var(--foreground)) !important;
    font-family: Inter, sans-serif !important;
}

.wc-block-cart__main {
    padding-right: 0 !important;
}

@media (min-width: 1024px) {
    .wc-block-cart.wp-block-woocommerce-cart {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: 2.5rem !important;
        align-items: flex-start !important;
    }
    .wc-block-cart__main {
        grid-column: span 8 / span 8 !important;
    }
    .wc-block-cart__sidebar {
        grid-column: span 4 / span 4 !important;
        position: sticky !important;
        top: 7rem !important;
    }
}

/* 2. Empty Cart Block */
.wc-block-cart__empty-cart,
.wp-block-woocommerce-empty-cart-block,
.empty-cart-container {
    text-align: center !important;
    padding: 3rem 1rem !important;
}

.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block h2.wc-block-cart__empty-cart__title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    color: hsl(var(--foreground)) !important;
    margin-bottom: 1.5rem !important;
}

.wc-block-cart__empty-cart .wc-block-components-button,
.wp-block-woocommerce-empty-cart-block a.wp-block-button__link,
.empty-cart-container .return-to-shop a {
    background-color: #f6c000 !important;
    color: #111111 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    border-radius: 0 !important;
    padding: 0.875rem 2.25rem !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.wc-block-cart__empty-cart .wc-block-components-button:hover,
.wp-block-woocommerce-empty-cart-block a.wp-block-button__link:hover,
.empty-cart-container .return-to-shop a:hover {
    background-color: #111111 !important;
    color: #ffffff !important;
}

/* 3. Empty Cart "New in Store" / Product Grid */
.wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    margin-top: 2rem !important;
}

@media (min-width: 768px) {
    .wc-block-grid__products {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

.wc-block-grid__product {
    background-color: hsl(var(--background)) !important;
    border: 1px solid hsl(var(--border)) !important;
    padding: 1.25rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: border-color 0.2s ease !important;
}

.wc-block-grid__product:hover {
    border-color: hsl(var(--foreground)) !important;
}

.wc-block-grid__product-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    color: hsl(var(--foreground)) !important;
    margin-top: 0.75rem !important;
}

.wc-block-grid__product-price {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    color: hsl(var(--foreground)) !important;
    font-size: 0.875rem !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link {
    background-color: #111111 !important;
    color: #ffffff !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: 0 !important;
    width: 100% !important;
    transition: all 0.2s ease !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    background-color: #f6c000 !important;
    color: #111111 !important;
}

/* 4. Filled Cart Items Table */
.wc-block-cart-items {
    border: 1px solid hsl(var(--border)) !important;
    background-color: hsl(var(--background)) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.wc-block-cart-items thead {
    background-color: hsl(var(--muted) / 0.5) !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}

.wc-block-cart-items thead th {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: hsl(var(--foreground)) !important;
    padding: 1rem 1.25rem !important;
}

.wc-block-cart-items__row {
    border-bottom: 1px solid hsl(var(--border)) !important;
    padding: 1.25rem !important;
}

.wc-block-cart-item__wrap {
    gap: 1.25rem !important;
}

.wc-block-cart-item__image img {
    border: 1px solid hsl(var(--border)) !important;
    background-color: hsl(var(--card)) !important;
    border-radius: 0 !important;
    width: 4.5rem !important;
    height: 4.5rem !important;
    object-fit: contain !important;
}

.wc-block-cart-item__product-name {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: hsl(var(--foreground)) !important;
}

.wc-block-cart-item__prices {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    color: hsl(var(--foreground)) !important;
}

.wc-block-cart-item__remove-link {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.wc-block-cart-item__remove-link:hover {
    color: hsl(var(--destructive)) !important;
    text-decoration: underline !important;
}

/* Quantity Selector in Block Cart */
.wc-block-components-quantity-selector {
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0 !important;
    background-color: hsl(var(--background)) !important;
    height: 2.25rem !important;
}

.wc-block-components-quantity-selector__button {
    background: transparent !important;
    border: none !important;
    color: hsl(var(--foreground)) !important;
    cursor: pointer !important;
    padding: 0 0.5rem !important;
    transition: color 0.2s ease !important;
}

.wc-block-components-quantity-selector__button:hover {
    color: hsl(var(--secondary)) !important;
}

.wc-block-components-quantity-selector__input {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    color: hsl(var(--foreground)) !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
}

/* 5. Cart & Checkout Order Summary Sidebar */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar,
.wc-block-components-sidebar {
    background-color: hsl(var(--card) / 0.5) !important;
    border: 1px solid hsl(var(--border)) !important;
    padding: 1.5rem !important;
    border-radius: 0 !important;
}

@media (min-width: 768px) {
    .wc-block-cart__sidebar,
    .wc-block-checkout__sidebar,
    .wc-block-components-sidebar {
        padding: 2rem !important;
    }
}

.wc-block-components-totals-wrapper h2,
.wc-block-components-order-summary__title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: hsl(var(--foreground)) !important;
    margin: 0 0 1rem 0 !important;
}

.wc-block-components-totals-item {
    font-size: 0.875rem !important;
    padding: 0.625rem 0 !important;
    border-bottom: 1px solid hsl(var(--border) / 0.6) !important;
}

.wc-block-components-totals-item__label {
    font-weight: 500 !important;
    color: hsl(var(--muted-foreground)) !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
}

.wc-block-components-totals-item__value {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    color: hsl(var(--foreground)) !important;
}

.wc-block-components-totals-footer-item {
    padding-top: 1rem !important;
    border-top: 2px solid hsl(var(--border)) !important;
    border-bottom: none !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: hsl(var(--foreground)) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: hsl(var(--foreground)) !important;
}

/* Coupon Panel in Blocks */
.wc-block-components-totals-coupon {
    border-bottom: 1px solid hsl(var(--border) / 0.6) !important;
    padding: 0.75rem 0 !important;
}

.wc-block-components-totals-coupon__button {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: hsl(var(--foreground)) !important;
}

.wc-block-components-totals-coupon input.wc-block-components-text-input {
    border-radius: 0 !important;
    border: 1px solid hsl(var(--border)) !important;
    background-color: hsl(var(--background)) !important;
}

.wc-block-components-totals-coupon button.wc-block-components-button {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: 0 !important;
}

/* 6. Checkout Block Styling (wc-block-checkout) */
.wp-block-woocommerce-checkout,
.wc-block-checkout {
    color: hsl(var(--foreground)) !important;
    font-family: Inter, sans-serif !important;
}

@media (min-width: 1024px) {
    .wc-block-checkout.wp-block-woocommerce-checkout {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: 2.5rem !important;
        align-items: flex-start !important;
    }
    .wc-block-checkout__main {
        grid-column: span 8 / span 8 !important;
    }
    .wc-block-checkout__sidebar {
        grid-column: span 4 / span 4 !important;
        position: sticky !important;
        top: 7rem !important;
    }
}

/* Checkout Step Titles */
.wc-block-components-checkout-step {
    border-bottom: 1px solid hsl(var(--border)) !important;
    padding-bottom: 2rem !important;
    margin-bottom: 2rem !important;
}

.wc-block-components-checkout-step__title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: hsl(var(--foreground)) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Input Fields & Form Controls */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox input,
.wc-block-components-select select,
.wc-block-checkout input.input-text,
.wc-block-checkout select {
    background-color: hsl(var(--background)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0 !important;
    color: hsl(var(--foreground)) !important;
    font-size: 0.875rem !important;
    padding: 0.75rem 1rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-select select:focus {
    border-color: hsl(var(--secondary)) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px hsl(var(--secondary)) !important;
}

.wc-block-components-text-input label {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 0.8125rem !important;
}

/* Payment Methods Section */
.wc-block-checkout__payment-methods .wc-block-components-radio-control-accordion-option {
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0 !important;
    background-color: hsl(var(--background)) !important;
    margin-bottom: 0.75rem !important;
    transition: border-color 0.2s ease !important;
}

.wc-block-checkout__payment-methods .wc-block-components-radio-control-accordion-option:hover,
.wc-block-checkout__payment-methods .wc-block-components-radio-control-accordion-option--checked-option {
    border-color: hsl(var(--secondary)) !important;
}

.wc-block-components-radio-control__label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: hsl(var(--foreground)) !important;
}

/* Primary CTA Buttons (Proceed to Checkout & Place Order) */
.wc-block-cart__submit-button,
.wc-block-cart__submit-button a,
.wc-block-components-checkout-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 1.125rem 2rem !important;
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    border: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 14px hsl(var(--secondary) / 0.25) !important;
    cursor: pointer !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button a:hover,
.wc-block-components-checkout-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button button:hover {
    background-color: hsl(var(--foreground)) !important;
    color: hsl(var(--background)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   Classic WooCommerce Checkout (Designed like Gutenberg Block Checkout)
   ========================================================================== */

/* ==========================================================================
   WooCommerce Classic Checkout Page Styling
   ========================================================================== */

/* Checkout Form Grid & Sidebar Layout */
.woocommerce-checkout-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    align-items: flex-start !important;
    width: 100% !important;
}

@media (min-width: 1024px) {
    .woocommerce-checkout-layout {
        grid-template-columns: minmax(0, 1fr) 380px !important;
        gap: 3rem !important;
    }
}

@media (min-width: 1280px) {
    .woocommerce-checkout-layout {
        grid-template-columns: minmax(0, 1fr) 420px !important;
        gap: 4rem !important;
    }
}

.checkout-main-steps {
    min-width: 0 !important;
    width: 100% !important;
}

.checkout-sidebar-summary {
    width: 100% !important;
    max-width: 100% !important;
    position: sticky !important;
    top: 7rem !important;
}

/* Checkout Step Cards */
.checkout-step-card {
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--border) / 0.8);
    padding: 1.5rem;
    border-radius: 0;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .checkout-step-card {
        padding: 2rem;
    }
}

/* Checkout Form Field Wrapper Grid (Clean 2-column layout) */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem 1.5rem !important;
    width: 100% !important;
}

.woocommerce-billing-fields__field-wrapper p.form-row,
.woocommerce-shipping-fields__field-wrapper p.form-row {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
    clear: none !important;
}

/* Full-width fields span both columns */
.woocommerce-billing-fields__field-wrapper p.form-row-wide,
.woocommerce-shipping-fields__field-wrapper p.form-row-wide,
.woocommerce-billing-fields__field-wrapper p.address-field,
.woocommerce-shipping-fields__field-wrapper p.address-field,
.woocommerce-billing-fields__field-wrapper p#billing_address_1_field,
.woocommerce-billing-fields__field-wrapper p#billing_address_2_field,
.woocommerce-billing-fields__field-wrapper p#billing_country_field,
.woocommerce-billing-fields__field-wrapper p#billing_company_field,
.woocommerce-shipping-fields__field-wrapper p#shipping_address_1_field,
.woocommerce-shipping-fields__field-wrapper p#shipping_address_2_field,
.woocommerce-shipping-fields__field-wrapper p#shipping_country_field,
.woocommerce-shipping-fields__field-wrapper p#shipping_company_field {
    grid-column: 1 / -1 !important;
}

/* Half-width fields */
.woocommerce-billing-fields__field-wrapper p.form-row-first,
.woocommerce-shipping-fields__field-wrapper p.form-row-first,
.woocommerce-billing-fields__field-wrapper p#billing_first_name_field,
.woocommerce-shipping-fields__field-wrapper p#shipping_first_name_field,
.woocommerce-billing-fields__field-wrapper p#billing_city_field,
.woocommerce-shipping-fields__field-wrapper p#shipping_city_field,
.woocommerce-billing-fields__field-wrapper p#billing_phone_field {
    grid-column: 1 / 2 !important;
}

.woocommerce-billing-fields__field-wrapper p.form-row-last,
.woocommerce-shipping-fields__field-wrapper p.form-row-last,
.woocommerce-billing-fields__field-wrapper p#billing_last_name_field,
.woocommerce-shipping-fields__field-wrapper p#shipping_last_name_field,
.woocommerce-billing-fields__field-wrapper p#billing_postcode_field,
.woocommerce-shipping-fields__field-wrapper p#shipping_postcode_field {
    grid-column: 2 / 3 !important;
}

.woocommerce-billing-fields__field-wrapper p#billing_email_field {
    grid-column: 1 / -1 !important;
}

@media (max-width: 640px) {
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: 1fr !important;
    }
    .woocommerce-billing-fields__field-wrapper p.form-row,
    .woocommerce-shipping-fields__field-wrapper p.form-row,
    .woocommerce-billing-fields__field-wrapper p.form-row-first,
    .woocommerce-billing-fields__field-wrapper p.form-row-last,
    .woocommerce-shipping-fields__field-wrapper p.form-row-first,
    .woocommerce-shipping-fields__field-wrapper p.form-row-last,
    .woocommerce-billing-fields__field-wrapper p#billing_first_name_field,
    .woocommerce-billing-fields__field-wrapper p#billing_last_name_field,
    .woocommerce-billing-fields__field-wrapper p#billing_city_field,
    .woocommerce-billing-fields__field-wrapper p#billing_postcode_field,
    .woocommerce-billing-fields__field-wrapper p#billing_phone_field,
    .woocommerce-billing-fields__field-wrapper p#billing_email_field {
        grid-column: 1 / -1 !important;
    }
}

/* Checkout Form Labels & Inputs */
form.woocommerce-checkout p.form-row label {
    display: block;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--foreground));
    margin-bottom: 0.375rem;
}

form.woocommerce-checkout p.form-row label .required {
    color: hsl(var(--destructive));
    text-decoration: none;
}

form.woocommerce-checkout p.form-row input.input-text,
form.woocommerce-checkout p.form-row textarea,
form.woocommerce-checkout p.form-row select {
    width: 100% !important;
    height: 2.875rem !important;
    padding: 0 1rem !important;
    background-color: hsl(var(--background)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0 !important;
    color: hsl(var(--foreground)) !important;
    font-size: 0.875rem !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

form.woocommerce-checkout p.form-row textarea {
    height: 6rem !important;
    padding: 0.75rem 1rem !important;
}

form.woocommerce-checkout p.form-row input.input-text:focus,
form.woocommerce-checkout p.form-row textarea:focus,
form.woocommerce-checkout p.form-row select:focus {
    border-color: #f6c000 !important;
    box-shadow: 0 0 0 1px #f6c000 !important;
}

/* Select2 Country/State Dropdowns */
.select2-container--default .select2-selection--single {
    height: 2.875rem !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0 !important;
    background-color: hsl(var(--background)) !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: hsl(var(--foreground)) !important;
    font-size: 0.875rem !important;
    padding-left: 1rem !important;
    line-height: normal !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.875rem !important;
    right: 0.5rem !important;
}

.select2-dropdown {
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0 !important;
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: #f6c000 !important;
    color: #111111 !important;
}

/* Checkout Review Items in Sidebar */
.checkout-review-items .checkout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    gap: 0.75rem;
}

/* Payment Options inside Order Summary Sidebar */
.checkout-sidebar-summary #payment,
#payment {
    background: transparent !important;
    border: none !important;
    padding: 1.5rem 0 0 0 !important;
    margin: 1.5rem 0 0 0 !important;
    border-top: 1px solid hsl(var(--border) / 0.8) !important;
}

#payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.25rem 0 !important;
    border: none !important;
}

#payment ul.payment_methods li.wc_payment_method {
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0 !important;
    background-color: hsl(var(--background)) !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
}

#payment ul.payment_methods li.wc_payment_method:hover,
#payment ul.payment_methods li.wc_payment_method.payment_method_selected {
    border-color: #f6c000 !important;
}

#payment ul.payment_methods li.wc_payment_method .payment_box {
    background-color: hsl(var(--muted) / 0.3) !important;
    border-top: 1px solid hsl(var(--border)) !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.8125rem !important;
    color: hsl(var(--muted-foreground)) !important;
    line-height: 1.6 !important;
}

#payment ul.payment_methods li.wc_payment_method .payment_box p {
    margin: 0 !important;
}

#payment .place-order {
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

#payment .woocommerce-privacy-policy-text {
    font-size: 0.75rem !important;
    color: hsl(var(--muted-foreground)) !important;
    margin-bottom: 1rem !important;
    line-height: 1.5 !important;
}

#payment .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 1.25rem !important;
}

#payment .woocommerce-terms-and-conditions-wrapper label {
    font-size: 0.75rem !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
}

/* Place Order Button (Matching Image 1 Brand Yellow CTA) */
#place_order {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 3.25rem !important;
    padding: 1rem 2rem !important;
    background-color: #f6c000 !important;
    color: #111111 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    white-space: nowrap !important;
    border: none !important;
    border-radius: 0 !important;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#place_order:hover {
    background-color: #111111 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Checkout Login & Coupon Notices */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle {
    margin-bottom: 1.5rem;
}

/* WooCommerce Notices Styling */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-NoticeGroup-checkout .woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    border: 1px solid hsl(var(--border)) !important;
    border-left: 4px solid hsl(var(--secondary)) !important;
    background-color: hsl(var(--card) / 0.8) !important;
    color: hsl(var(--foreground)) !important;
    padding: 1rem 1.25rem 1rem 3.25rem !important;
    font-size: 0.8125rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 0 !important;
    position: relative !important;
}

.woocommerce-error {
    border-left-color: hsl(var(--destructive)) !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: hsl(var(--secondary)) !important;
    top: 1rem !important;
    left: 1.25rem !important;
}