/*
Theme Name: Shoptimizer Child Theme
Theme URI: 
Description: Child theme of Shoptimizer
Author: CommerceGurus
Author URI: 
Template: shoptimizer
Version: 1.2.2
License:            GNU General Public License v2 or later
License URI:        http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Mobile-only horizontal scrolling carousel for WooCommerce subcategory items */
/* Following the exact pattern of shoptimizer-plp-carousel-container */
/* IMPORTANT: Any ul.products that contains .product.product-category becomes a slider */
@media (max-width: 992px) {
    /* * ul.products = scrollable container (like .shoptimizer-plp-carousel-container)
     * li.product.product-category = scrollable items (like images in the carousel)
     */

    /* Container: Replicate .shoptimizer-plp-carousel-container behavior */
    /* Applies to any ul.products that has category items - including the dedicated slider */
    ul.products:has(> li.product.product-category),
    ul.products.has-product-category,
    ul.products.products-subcategories,
    ul.products.products-subcategories.has-product-category {
        display: flex !important;
        width: 100% !important;
        overflow-x: scroll !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        grid-template-columns: none !important;
        grid: none !important;
    }

    /* Add top and bottom padding to the dedicated subcategory slider */
    ul.products.products-subcategories.has-product-category {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Hide scrollbar for WebKit browsers */
    ul.products:has(> li.product.product-category)::-webkit-scrollbar,
    ul.products.has-product-category::-webkit-scrollbar,
    ul.products.products-subcategories::-webkit-scrollbar,
    ul.products.products-subcategories.has-product-category::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Category items: Replicate image behavior from parent carousel */
    /* Each item should be 1/1.66 of viewport (to show 1.66 items) */
    ul.products:has(> li.product.product-category) > li.product.product-category,
    ul.products.has-product-category > li.product.product-category,
    ul.products.products-subcategories > li.product.product-category,
    ul.products.products-subcategories.has-product-category > li.product.product-category,
    ul.products:has(> li.product.product-category) > li.product.product-category.first,
    ul.products.has-product-category > li.product.product-category.first,
    ul.products.products-subcategories > li.product.product-category.first,
    ul.products.products-subcategories.has-product-category > li.product.product-category.first,
    ul.products:has(> li.product.product-category) > li.product.product-category.last,
    ul.products.has-product-category > li.product.product-category.last,
    ul.products.products-subcategories > li.product.product-category.last,
    ul.products.products-subcategories.has-product-category > li.product.product-category.last {
        width: calc(100vw / 1.66) !important;
        flex: 0 0 calc(100vw / 1.66) !important;
        flex-shrink: 0 !important;
        scroll-snap-align: center;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    /* First item: Add left padding for proper spacing */
    ul.products:has(> li.product.product-category) > li.product.product-category:first-child,
    ul.products.has-product-category > li.product.product-category:first-child,
    ul.products.products-subcategories > li.product.product-category:first-child,
    ul.products.products-subcategories.has-product-category > li.product.product-category:first-child {
        padding-left: 20px !important;
    }

    /* Last item: Add right padding for proper spacing */
    ul.products:has(> li.product.product-category) > li.product.product-category:last-child,
    ul.products.has-product-category > li.product.product-category:last-child,
    ul.products.products-subcategories > li.product.product-category:last-child,
    ul.products.products-subcategories.has-product-category > li.product.product-category:last-child {
        padding-right: 20px !important;
    }

    /* Image wrapper: 175px × 175px and circular */
    ul.products:has(> li.product.product-category) li.product.product-category .cat-image-wrapper,
    ul.products.has-product-category li.product.product-category .cat-image-wrapper,
    ul.products.products-subcategories li.product.product-category .cat-image-wrapper,
    ul.products.products-subcategories.has-product-category li.product.product-category .cat-image-wrapper {
        width: 175px !important;
        height: 175px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        display: block !important;
        margin: 0 auto !important;
        position: relative;
    }

    /* Ensure images inside wrapper fit properly */
    ul.products:has(> li.product.product-category) li.product.product-category .cat-image-wrapper img,
    ul.products.has-product-category li.product.product-category .cat-image-wrapper img,
    ul.products.products-subcategories li.product.product-category .cat-image-wrapper img,
    ul.products.products-subcategories.has-product-category li.product.product-category .cat-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Title: 175px wide to match image wrapper */
    ul.products:has(> li.product.product-category) li.product.product-category h2.woocommerce-loop-category__title,
    ul.products.has-product-category li.product.product-category h2.woocommerce-loop-category__title,
    ul.products.products-subcategories li.product.product-category h2.woocommerce-loop-category__title,
    ul.products.products-subcategories.has-product-category li.product.product-category h2.woocommerce-loop-category__title,
    ul.products:has(> li.product.product-category) li.product.product-category h2,
    ul.products.has-product-category li.product.product-category h2,
    ul.products.products-subcategories li.product.product-category h2,
    ul.products.products-subcategories.has-product-category li.product.product-category h2 {
        width: 175px !important;
        max-width: 175px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}

/* Desktop styling for subcategory slider - Simple sizing override */
@media (min-width: 993px) {
    /* Image wrapper: 125px × 125px and circular on desktop */
    ul.products.products-subcategories.has-product-category li.product.product-category .cat-image-wrapper {
        width: 125px !important;
        height: 125px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        display: block !important;
        margin: 0 auto 1rem !important;
        position: relative;
    }

    ul.products.products-subcategories.has-product-category li.product.product-category .cat-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Title: Reduce font-size to 14px (override theme's 32px) */
    ul.products.products-subcategories.has-product-category li.product.product-category h2.woocommerce-loop-category__title,
    ul.products.products-subcategories.has-product-category li.product.product-category h2 {
        font-size: 14px !important;
        width: 125px !important;
        max-width: 125px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* Align subcategory slider with banner positioning - Desktop only */
    ul.products.products-subcategories.has-product-category {
        margin-left: auto;
        margin-right: auto;
        max-width: 1170px;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        padding-left: 2.617924em;
        padding-right: 2.617924em;
    }
}

/* Remove top padding from category banner on all screen sizes */
/* Use full padding override with higher specificity to override parent theme */
body .shoptimizer-category-banner {
    padding: 0 0 2rem 0 !important; /* top: 0, right: 0, bottom: 2rem, left: 0 */
}

/* Ensure top padding is 0 on mobile as well */
@media (max-width: 992px) {
    body .shoptimizer-category-banner {
        padding: 0 0 1.5rem 0 !important; /* top: 0, right: 0, bottom: 1.5rem, left: 0 */
    }
}

/* Mini cart discount total styling */
.widget_shopping_cart p.total.discounts-total {
    color: green;
    font-size: 13px;
    margin-bottom: -1.2em;
    order: 1;
}

.widget_shopping_cart p.total.discounts-total strong {
    font-weight: normal;
}

.shoptimizer-mini-cart-wrap .widget_shopping_cart .discounts-total .amount {
    margin: 0;
    font-weight: normal;
    color: green;
}

.shoptimizer-mini-cart-wrap .widget_shopping_cart .discounts-total .amount bdi {
    color: green;
}

.widget_shopping_cart p.total {
    order: 2;
}

.widget_shopping_cart p.buttons {
    order: 3;
}

.shoptimizer-mini-cart-wrap .cart-drawer-below {
    order: 4;
}

/* Popular Categories Buttons - Header Widget Region */
/* Styled as navigation buttons with mobile scrolling */
/* Note: Scrolling CSS is injected inline in wp_head for early blocking */
.shoptimizer-popular-cats-buttons {
    width: 100%;
}

/* Padding for shortcode buttons only (doesn't affect category page slider) */
.shoptimizer-popular-cats-buttons ul.products,
.shoptimizer-popular-cats-buttons ul.products.products-subcategories,
.shoptimizer-popular-cats-buttons ul.products.products-subcategories.has-product-category {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Button styling: Apply to all screen sizes - Matas-inspired compact design */
.shoptimizer-popular-cats-buttons li.product.product-category > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f2f2f2 !important;
    border: 2px solid #ddd !important;
    border-radius: 10px !important;
    padding: 0.5rem !important; /* Compact padding as shown in image */
    text-decoration: none !important;
    transition: all 0.3s ease;
    height: 30px !important; /* Fixed compact height */
    min-height: 30px !important;
    max-height: 30px !important;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.shoptimizer-popular-cats-buttons li.product.product-category > a:hover {
    background-color: #e8e8e8 !important;
    border-color: #bbb !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Hide image + wrapper in button style (text-only buttons) */
.shoptimizer-popular-cats-buttons .cat-image-wrapper,
.shoptimizer-popular-cats-buttons .cat-image-wrapper img {
    display: none !important;
}

/* Category title: Single line, no wrapping, perfectly centered - Matas style */
.shoptimizer-popular-cats-buttons h2.woocommerce-loop-category__title,
.shoptimizer-popular-cats-buttons h2 {
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 auto !important; /* Center horizontally */
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 1.2 !important; /* Tighter line-height for compact buttons */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide product count in buttons */
.shoptimizer-popular-cats-buttons h2.woocommerce-loop-category__title mark.count,
.shoptimizer-popular-cats-buttons h2 mark.count {
    display: none !important;
}

/* Content Area Category Slider - Mobile: Horizontal scrolling, Desktop: 4-column grid */
.shoptimizer-popular-cats-content {
    width: 100%;
}

/* Mobile: Horizontal scrolling slider */
@media (max-width: 992px) {
    .shoptimizer-popular-cats-content ul.products {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        grid-template-columns: none !important;
        grid: none !important;
    }

    .shoptimizer-popular-cats-content ul.products::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .shoptimizer-popular-cats-content ul.products > li.product.product-category {
        width: calc(100vw / 1.66) !important;
        flex: 0 0 calc(100vw / 1.66) !important;
        flex-shrink: 0 !important;
        scroll-snap-align: center;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .shoptimizer-popular-cats-content ul.products > li.product.product-category:first-child {
        padding-left: 20px !important;
    }

    .shoptimizer-popular-cats-content ul.products > li.product.product-category:last-child {
        padding-right: 20px !important;
    }

    /* Image wrapper: 200px × 200px and circular */
    .shoptimizer-popular-cats-content .cat-image-wrapper {
        width: 200px !important;
        height: 200px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        display: block !important;
        margin: 0 auto 1rem !important;
        position: relative;
    }

    .shoptimizer-popular-cats-content .cat-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Title: 18px, bold, centered with proper spacing */
    .shoptimizer-popular-cats-content h2.woocommerce-loop-category__title,
    .shoptimizer-popular-cats-content h2 {
        font-size: 18px !important;
        font-weight: bold !important;
        margin: 0.5rem auto 0 !important;
        padding: 0 !important;
        text-align: center !important;
        width: 200px !important;
        max-width: 200px !important;
        line-height: 1.4 !important;
    }
}

/* Desktop: 4-column grid */
@media (min-width: 993px) {
    .shoptimizer-popular-cats-content ul.products {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        margin: 0;
        padding: 0;
    }

    .shoptimizer-popular-cats-content ul.products > li.product.product-category {
        width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Image wrapper: 200px × 200px and circular */
    .shoptimizer-popular-cats-content .cat-image-wrapper {
        width: 200px !important;
        height: 200px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        display: block !important;
        margin: 0 auto 1rem !important;
        position: relative;
    }

    .shoptimizer-popular-cats-content .cat-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Title: 18px, bold, centered with proper spacing */
    .shoptimizer-popular-cats-content h2.woocommerce-loop-category__title,
    .shoptimizer-popular-cats-content h2 {
        font-size: 18px !important;
        font-weight: bold !important;
        margin: 0.5rem auto 0 !important;
        padding: 0 !important;
        text-align: center !important;
        width: 200px !important;
        max-width: 200px !important;
        line-height: 1.4 !important;
    }
}

/* Product Page Price Styling */
/* 1. Saml alle priselementer på én vandret linje */
.entry-summary .price {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin-top: 0 !important;
    margin-right: 0 !important; /* Spacing handled by parent container */
}

/* 2. Fjern "block" regler der tvinger linjeskift */
.entry-summary .price ins, 
.entry-summary .price del, 
.entry-summary .price .amount,
.entry-summary .price ins .amount {
    display: inline-block !important;
    margin: 0 !important;
}

/* 3. Den grønne pris */
.entry-summary .price ins .amount, 
.entry-summary .price > .amount {
    color: #2e963a !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
}

/* 4. Den overstregede pris */
.entry-summary .price del .amount {
    color: #757575 !important;
    font-size: 0.95em !important;
    text-decoration: line-through;
}

/* 5. Justering af tilbuds-badgen (-14%) */
.entry-summary .onsale, 
.entry-summary .price span.badge {
    position: static !important; 
    display: inline-block !important;
    padding: 2px 6px !important;
    font-size: 0.8em !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Gør "Du sparer nu" teksten større og giv den luft */
.entry-summary .wdr-discount-message {
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: #333 !important;
    /* Margins handled by more specific rules below */
}

/* Styling af rabat-teksten over knappen - Consolidated rule */
.bland-selv-text-update {
    font-size: 12px !important;
    color: #333 !important;
    margin-top: 0 !important; /* Parent .discount-info-note handles spacing */
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
    display: block;
    text-align: center !important;
}

/* Gør den fede del af teksten lidt mere markant */
.bland-selv-text-update strong {
    font-weight: 700;
    color: #000;
}

/* Discount info note - styling for bland-selv-tape discount message */
.discount-info-note {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 13px !important;
    padding: 0 !important; /* Remove padding to use margin only */
    text-align: center !important;
    display: none !important; /* Hide by default (desktop) */
}

/* Mobile: Show discount-info-note */
@media (max-width: 992px) {
    .discount-info-note {
        display: block !important; /* Show on mobile */
    }
}

/* Product Page - Optimized Spacing & Organization */
/* Group 1: Title and Product Info - Tighter spacing */
.entry-summary .product_title {
    margin-bottom: 0.5rem !important;
}

.entry-summary .woocommerce-product-details__short-description {
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
}

/* Group 2: Price and Rating - Wrapped in flex container for center alignment */
/* Wrapper container - centers both price and rating */
.entry-summary .shoptimizer-price-rating-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.2rem !important; /* No gap - clear div provides spacing */
    margin-bottom: 1rem !important;
}

/* Make parent containers inline so they sit on same line */
.entry-summary .cgkit-as-variation-price,
.entry-summary .woocommerce-variation-price {
    display: inline-block !important;
    margin-right: 0 !important; /* No margin - clear div provides spacing */
    vertical-align: middle !important;
}

.entry-summary .price {
    margin-bottom: 0.5rem !important;
}

/* Make price and rating display inline together with center alignment */
/* Force star-rating and review-link to stack vertically within woocommerce-product-rating */
/* Must override parent theme's .product .woocommerce-product-rating */
body .entry-summary .woocommerce-product-rating,
body .product .woocommerce-product-rating,
body.single-product .woocommerce-product-rating {
    display: inline-flex !important;
    flex-direction: column !important; /* CRITICAL - stack children vertically */
    align-items: flex-start !important; /* Override parent's align-items: center */
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
    clear: both !important; /* Override parent theme */
}

/* Remove horizontal margin from star-rating - CRITICAL for stacking */
body .entry-summary .woocommerce-product-rating .star-rating,
body .product .woocommerce-product-rating .star-rating,
body.single-product .woocommerce-product-rating .star-rating {
    margin-right: 0 !important; /* Remove parent theme's margin-right: 0.6180469716em */
    margin-bottom: 0.25rem !important; /* Add vertical spacing */
    /* Let it be a flex item - don't set display: block */
}

/* Ensure review-link stacks below star-rating */
body .entry-summary .woocommerce-product-rating .woocommerce-review-link,
body .product .woocommerce-product-rating .woocommerce-review-link,
body.single-product .woocommerce-product-rating .woocommerce-review-link,
body .entry-summary .woocommerce-product-rating a,
body .product .woocommerce-product-rating a,
body.single-product .woocommerce-product-rating a {
    margin-top: 0 !important;
    /* Let it be a flex item - don't set display: block */
}

/* Make clear div inline so it doesn't break the line but still provides natural spacing */
.entry-summary .shoptimizer-price-rating-wrapper .clear {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Group 3: Selection & Purchase - Compact grouping */
/* Color/Variation selection */
.entry-summary .variations,
.entry-summary .woocommerce-variation {
    margin-bottom: 0.75rem !important;
}

/* Variations and single variation - no bottom margin */
.variations,
.woocommerce-variation.single_variation {
    margin-bottom: 0 !important;
}

/* Availability and discount message - tighter */
.entry-summary .stock {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
    padding-top: 0 !important;
    padding-bottom: 0.5rem !important;
    border-top: none !important;
    font-size: 14px !important;
}

/* Consolidated wdr-discount-message rule - more specific override below */
.entry-summary .wdr-discount-message {
    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
}

/* Group 4: Trust Elements - Compact footer */
.entry-summary .product-widget {
    margin-top: 0rem !important;
    padding-top: 0 !important; /* Use margin instead of padding for consistency */
}

/* Remove excessive margins from list items */
.entry-summary ul {
    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
}

.entry-summary ul li {
    margin-bottom: 0.25rem !important;
}

/* Reduce spacing between form elements - only adjust top margin, let parent theme handle children */
.entry-summary form.cart {
    margin-top: 0.5rem !important;
    /* Don't override display, float, width, or margins on children - let parent theme handle alignment */
}

/* Compact spacing for variation forms */
.entry-summary .variations_form {
    margin-bottom: 0.5rem !important;
}

/* Ensure price and discount message are close */
.entry-summary .price + .wdr-discount-message {
    margin-top: 0.5rem !important; /* Override the 15px from earlier rule */
}

/* Hide ONLY the variation price, not the entire wrapper */
.single_variation_wrap .woocommerce-variation-price {
    display: none !important;
}



/* Ensure commercekit-sticky-atc-intersector doesn't interfere with float layout */
.commercekit-sticky-atc-intersector {
    /* Let it be a block container - don't override */
    display: block;
    /* Don't use flex or grid that would break floats */
}

/* Apply parent theme's float layout to quantity inside commercekit wrapper */
.commercekit-sticky-atc-intersector .quantity {
    float: left !important; /* Match parent: .product form.cart .quantity */
}

/* Apply parent theme's button styles inside commercekit wrapper */
.commercekit-sticky-atc-intersector .single_add_to_cart_button {
    float: left !important; /* Match parent: .cart .single_add_to_cart_button */
    width: calc(100% - 90px) !important; /* Match parent theme */
    height: 52px !important;
    margin-left: 40px !important; /* Match parent theme */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 4px !important;
    background: #3bb54a !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 52px !important;
    text-align: center !important;
    transition: all 0.2s !important;
}

/* Handle case when quantity is hidden (parent theme rule) */
.commercekit-sticky-atc-intersector .quantity.hidden + .single_add_to_cart_button,
.commercekit-sticky-atc-intersector .quantity:has(input[type=hidden]) + .single_add_to_cart_button {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Ensure form.cart clears floats (parent theme uses ::after for this) */
.commercekit-sticky-atc-intersector::after {
    content: "";
    display: table;
    clear: both;
}

/* Critical CSS for quantity-nav - prevents CLS by reserving space */
.quantity {
    position: relative;
    min-height: 38px; /* Reserve space for quantity input + nav */
}

.quantity-nav {
    position: absolute;
    top: 0;
    right: -34px;
    bottom: 0;
    width: 35px;
    border: 1px solid #e2e2e2;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    /* Ensure it's visible immediately */
    opacity: 1;
    visibility: visible;
    /* Prevent layout shift */
    will-change: auto;
}

.quantity-button {
    position: absolute;
    right: 0;
    left: 0;
    height: 50%;
    background: no-repeat center;
    background-size: auto 8px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s linear, opacity 0.1s linear;
}

/* Prevent CLS for variation add to cart container */
.woocommerce-variation-add-to-cart {
    min-height: 52px; /* Reserve space for button */
}

/* Prevent CLS for product rating */
.woocommerce-product-rating {
    min-height: 1.5em; /* Reserve space for rating */
}

/* Mobile: Display discount-info-note below sticky button */
@media (max-width: 992px) {
    /* CommerceKit sticky add-to-cart section (top sticky bar) */
    .commercekit-sticky-add-to-cart .discount-info-note {
        display: block !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        clear: both !important;
    }
    
    .commercekit-sticky-add-to-cart .bland-selv-text-update {
        font-size: 12px !important;
        color: #333 !important;
        margin: 0 !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
    
    /* Ensure sticky button container can contain the discount note */
    .commercekit-sticky-add-to-cart__content-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* CommerceKit PDP sticky inner (modal/dialog) */
    .commercekit-pdp-sticky-inner .discount-info-note {
        display: block !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        clear: both !important;
    }
    
    .commercekit-pdp-sticky-inner .bland-selv-text-update {
        font-size: 12px !important;
        color: #333 !important;
        margin: 0 !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
    
    /* Ensure sticky ATC intersector can contain the discount note - don't break float layout */
    .commercekit-pdp-sticky-inner .commercekit-sticky-atc-intersector {
        position: relative !important;
    }
    
    /* Add clearfix after button to allow discount note below */
    .commercekit-pdp-sticky-inner .commercekit-sticky-atc-intersector .single_add_to_cart_button::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
}

/* Button Styling - Black Border and Shadow */
/* Apply to all WooCommerce add to cart buttons */
.button,
.sticky-atc_button button,
.single_add_to_cart_button,
.button.product_type_variable,
.add_to_cart_button,
.pdp-complementary--add-to-cart a {
    border: 3px solid #000 !important;
    box-shadow: 5px 5px 0 #000 !important;
    border-radius: 10px !important;

    /* Let flex do the centering */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    /* Use normal symmetric padding */
    padding: 0.5em 1em !important;

    /* Remove the previous compensation hacks */
    text-indent: 0 !important;
    
    /* Add margin to prevent shadow clipping */
    margin-right: 5px !important;
    margin-bottom: 5px !important;
}

/* Override parent theme styles for main product page button */
.product form.cart .single_add_to_cart_button,
.cart .single_add_to_cart_button,
form.cart .single_add_to_cart_button {
    border: 3px solid #000 !important;
    box-shadow: 5px 5px 0 #000 !important;
    border-radius: 10px !important;
    
    /* Override parent theme's float and line-height */
    float: left !important; /* Keep float for layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: normal !important; /* Override parent's line-height: 52px */
    padding: 0.5em 1em !important; /* Override parent's padding-top: 0, padding-bottom: 0 */
    height: auto !important; /* Allow height to adjust */
    min-height: 52px !important; /* Maintain minimum height */
    
    /* Add margin to prevent shadow clipping */
    margin-right: 5px !important; /* Space for shadow on right */
    margin-bottom: 5px !important; /* Space for shadow on bottom */
    /* Adjust width to account for margin */
    width: calc(100% - 90px - 5px) !important; /* Original calc(100% - 90px) minus margin */
}

/* Ensure parent containers don't clip the shadow */
.product form.cart,
form.cart,
.cart {
    overflow: visible !important;
}

/* Handle case when quantity is hidden - adjust width accordingly */
.product form.cart .quantity:has(input[type=hidden]) + .single_add_to_cart_button,
.product form.cart .quantity.hidden + .single_add_to_cart_button {
    width: calc(100% - 5px) !important; /* Full width minus margin for shadow */
    margin-left: 0 !important;
}

/* Add spacing around pipe and currency in button text */
.button .btn-currency,
.single_add_to_cart_button .btn-currency {
    margin-left: 0.4em !important;
}

/* Button font sizes - Mobile and Desktop */
/* Mobile: 14px */
.button,
.sticky-atc_button button,
.single_add_to_cart_button,
.button.product_type_variable,
.add_to_cart_button,
.pdp-complementary--add-to-cart a {
    font-size: 14px !important;
}

/* Desktop: 16px */
@media (min-width: 993px) {
    .button,
    .sticky-atc_button button,
    .single_add_to_cart_button,
    .button.product_type_variable,
    .add_to_cart_button,
    .pdp-complementary--add-to-cart a {
        font-size: 16px !important;
    }
}

/* Ensure complementary products container doesn't clip shadow */
.pdp-complementary--container,
.pdp-complementary-item,
.pdp-complementary--add-to-cart {
    overflow: visible !important;
}

/* Complementary products carousel navigation buttons */
.tns-prev.pdp-complementary--nav-prev,
.tns-next.pdp-complementary--nav-next {
    background-color: #FEC43F !important;
    border-radius: 5px !important;
}

.tns-prev.pdp-complementary--nav-prev svg,
.tns-next.pdp-complementary--nav-next svg {
    stroke: #000 !important;
    color: #000 !important;
}

/* =========================================
   UA GLOBAL SIDEBAR (Final Master)
   - Features: Clean Design, Mobile Touch Targets, Nested Toggles
   ========================================= */

   .ua-global-nav {
    width: 100%;
    margin-bottom: 30px;
    font-family: inherit;
    color: #1d1d1d;
}

/* Reset Lists */
.ua-accordions, .ua-subs, .ua-grandlist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- LEVEL 1: PARENT ITEMS --- */
.ua-item {
    border-bottom: 1px solid #f5f5f5; /* Subtle divider */
}

/* The Row Container (Summary) */
.ua-details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* MOBILE FIX: Remove padding here so the Icon hits the edges */
    padding: 0 !important; 
    min-height: 48px; /* Ensures widely tappable area */
}
.ua-details > summary::-webkit-details-marker { display: none; }

/* The Link Text */
.ua-parent-link {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    flex-grow: 1;
    
    /* MOBILE FIX: Add padding to text so it remains spaced */
    padding: 12px 0; 
    display: block;
}
.ua-parent-link:hover, .ua-parent-link.active { color: #000; }

.ua-simple { padding: 0; }
.ua-simple .ua-parent-link { padding: 12px 0; }

/* Level 1 Arrow (The Big Touch Target) */
.ua-icon {
    width: 48px !important;  /* Wide click area */
    height: 48px !important; /* Square */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    margin-left: auto;
    border-radius: 4px; /* Optional hover shape */
    transition: transform 0.2s ease, background-color 0.2s;
}
.ua-icon:hover {
    color: #000;
    background-color: #f9f9f9; /* Subtle feedback */
}
.ua-icon svg {
    width: 18px; /* Visual size */
    height: 18px;
    pointer-events: none; /* Clicks pass through */
}
.ua-details[open] > summary .ua-icon { transform: rotate(180deg); color: #000; }


/* --- LEVEL 2: SUB-CATEGORIES --- */
.ua-subs {
    padding-bottom: 10px !important;
}

.ua-details-sub > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 !important;
    min-height: 40px;
}
.ua-details-sub > summary::-webkit-details-marker { display: none; }

.ua-child-link {
    display: block;
    font-size: 14px;
    color: #5f5f5f;
    text-decoration: none;
    padding: 8px 0 8px 15px; /* Indent + Padding */
    flex-grow: 1;
}
.ua-child-link.simple { padding: 8px 0 8px 15px; }

.ua-child-link:hover, .ua-child-link.active {
    color: #000;
    font-weight: 500;
}

/* Level 2 Arrow */
.ua-icon-sub {
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    margin-left: auto;
    transition: transform 0.2s ease;
}
.ua-icon-sub:hover { color: #000; background-color: #f9f9f9; }
.ua-icon-sub svg { width: 14px; height: 14px; pointer-events: none; }
.ua-details-sub[open] > summary .ua-icon-sub { transform: rotate(180deg); color: #000; }


/* --- LEVEL 3: GRANDCHILDREN --- */
.ua-grandlist {
    padding-left: 15px !important;
    margin-bottom: 5px !important;
    border-left: 1px solid #f0f0f0; /* Visual guide line */
    margin-left: 15px;
}

.ua-grand-link {
    display: block;
    padding: 6px 0 6px 12px;
    font-size: 13px;
    color: #777;
    text-decoration: none;
}
.ua-grand-link:hover, .ua-grand-link.active {
    color: #000;
    padding-left: 16px; /* Slide effect */
}


/* ==========================================================================
   MASTER SHORTCODE SYSTEM (Categories, Blog, Products)
   ========================================================================== */

/* ------------------------------------------------
   1. SHARED UTILITIES ("Netflix" Scroll)
   ------------------------------------------------ */
   @media (max-width: 1024px) {
    .mobile-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 20px !important;
        gap: 20px !important;
        padding-bottom: 30px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    .mobile-scroll::-webkit-scrollbar { display: none; }
    .mobile-scroll > * {
        flex-shrink: 0 !important;
        scroll-snap-align: start;
        margin: 0 !important;
        float: none !important; 
    }
}

/* ------------------------------------------------
   2. CATEGORIES (Circles - Dynamic Fill)
   ------------------------------------------------ */
/* Desktop: Auto-Fit Grid (Stretches to fill container) */
.shopt-categories-circular {
    display: grid;
    /* MAGIC LINE: Fits as many as possible, then stretches them to fill space */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.shopt-categories-circular .cat-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 100%; 
}

/* The Image - Always 100% of container & Circular */
.shopt-categories-circular .cat-image {
    width: 100%;
    aspect-ratio: 1 / 1; 
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.shopt-categories-circular .cat-circle:hover .cat-image { transform: translateY(-5px); }

.shopt-categories-circular .cat-title {
    font-family: var(--headings-font-family, inherit);
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    color: #333;
}

/* TABLET: Show ~2.33 items (Scrolls) */
@media (min-width: 768px) and (max-width: 1024px) {
    .mobile-scroll.shopt-categories-circular { display: flex !important; }
    .mobile-scroll .cat-circle {
        width: 40% !important;     
        flex: 0 0 40% !important;
    }
}

/* MOBILE: Show ~1.33 items (Scrolls) */
@media (max-width: 767px) {
    .mobile-scroll.shopt-categories-circular { display: flex !important; }
    .mobile-scroll .cat-circle {
        width: 75% !important;     
        flex: 0 0 75% !important;
    }
}


/* ------------------------------------------------
   3. BLOG POSTS (Square & Editorial)
   ------------------------------------------------ */
.shopt-blog-wrapper {
    display: grid;
    grid-template-columns: repeat(var(--blog-cols, 4), 1fr);
    gap: 30px;
    margin-bottom: 50px;
}
.shopt-blog-wrapper .blog-link-wrapper {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    height: 100%;
}
.shopt-blog-wrapper .blog-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f4f4;
    margin-bottom: 18px;
}
.shopt-blog-wrapper .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.shopt-blog-wrapper .blog-link-wrapper:hover .blog-image img { transform: scale(1.05); }

/* Text Styles */
.shopt-blog-wrapper .blog-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #999;
    margin-bottom: 8px;
}
.shopt-blog-wrapper .blog-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 15px;
    color: #111;
}
.shopt-blog-wrapper .blog-link-wrapper:hover .blog-title { color: var(--e-global-color-primary, #01BA54); }
.shopt-blog-wrapper .blog-read-btn {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: auto;
    color: #111;
}

/* Responsive Blog Widths */
@media (min-width: 768px) and (max-width: 1024px) {
    .mobile-scroll.shopt-blog-wrapper .blog-card { width: 40% !important; }
}
@media (max-width: 767px) {
    .mobile-scroll.shopt-blog-wrapper .blog-card { width: 75% !important; }
}


/* =================================================
   ZONE 4: SHOP BY SPORT (Squares)
   ================================================= */
/* 1. Reuse the grid logic from circles, but target the new class */
.shopt-categories-squares {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* 2. Inherit shared styles */
.shopt-categories-squares .cat-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 100%;
}

/* 3. THE DIFFERENCE: Square Image with radius */
.shopt-categories-squares .cat-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px; /* <--- SQUARE CORNERS */
    background-size: cover;
    background-position: center;
    background-color: #fff;
    margin-bottom: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Subtle lift for cards */
}

/* Hover Effect */
.shopt-categories-squares .cat-circle:hover .cat-image {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Title Styling (Uppercase for Sports?) */
.shopt-categories-squares .cat-title {
    font-family: var(--headings-font-family, inherit);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    color: #333;
    text-transform: uppercase; /* Optional: Makes it look more like a "Section" */
    letter-spacing: 0.5px;
}

/* 4. MOBILE/TABLET BEHAVIOR (Same scroll logic as circles) */
@media (max-width: 1024px) {
    .mobile-scroll.shopt-categories-squares { 
        display: flex !important; 
    }
    .shopt-categories-squares.mobile-scroll .cat-circle {
        /* Matches your specific requests */
        width: 40% !important; /* Tablet: 2.33 items */
    }
}
@media (max-width: 767px) {
    .shopt-categories-squares.mobile-scroll .cat-circle {
        width: 75% !important; /* Mobile: 1.33 items */
    }
}