/* ====================================================
   Grid Layout Wrapper & CSS Variables
==================================================== */
:root {
    --wccg-primary-color: #1f1f1f;
    --wccg-primary-hover: #000;
    --wccg-bg: #fff;
    --wccg-text-color: #5f5f5f;
    --wccg-text-muted: #9a9a9a;
    --wccg-border-color: #ededed;
    --wccg-btn-hover: #f3f3f3;
    --wccg-badge-bg: #83b735;
    --wccg-badge-text: #fff;
    --wccg-transition-cubic: cubic-bezier(0.22, 0.61, 0.36, 1);
    --wccg-transition-duration: 0.28s;
    --wccg-transition-img: 0.42s;
    --wccg-card-shadow: 0 18px 40px rgba(0,0,0,0.08);
    --wccg-soft-shadow: 0 8px 24px rgba(0,0,0,0.07);
}

.wccg-products-grid {
    display: grid;
    grid-gap: var(--wccg-grid-gap, 22px);
    margin-bottom: 2.25em;
    width: 100%;
}

/* Container to respect theme spacing - flexible centering */
.wccg-main-wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    /* Removed hard max-width and internal padding to avoid double-spacing in columns */
}

/* Safety reset for standard WC loops when our override is active */
.products .wccg-product-wrapper,
.archive .wccg-product-wrapper,
.products .product,
.products li {
    margin-bottom: 0 !important;
    background: transparent !important; /* Fix for grey curves bleed */
    border: none !important;
}

.wccg-product-wrapper {
    background: var(--wccg-bg) !important;
}

body.wccg-stagger-products .wccg-product-wrapper.wccg-stagger-pending {
    opacity: 0;
    transform: translateY(18px);
}

body.wccg-stagger-products .wccg-product-wrapper.wccg-stagger-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.44s var(--wccg-transition-cubic), transform 0.44s var(--wccg-transition-cubic), box-shadow var(--wccg-transition-img) var(--wccg-transition-cubic), border-color var(--wccg-transition-img) ease;
    transition-delay: var(--wccg-stagger-delay, 0ms), var(--wccg-stagger-delay, 0ms), 0ms, 0ms;
}

@media (prefers-reduced-motion: reduce) {
    body.wccg-stagger-products .wccg-product-wrapper.wccg-stagger-pending,
    body.wccg-stagger-products .wccg-product-wrapper.wccg-stagger-visible {
        opacity: 1;
        transform: none;
        transition-delay: 0ms;
    }
}

/* Section Titles */
.wccg-section-title {
    font-size: 24px;
    font-weight: 650;
    margin-bottom: 22px;
    color: #1f1f1f;
    position: relative;
    display: inline-block;
    line-height: 1.2;
}

.wccg-section-title::after {
    content: '';
    display: block;
    width: 34px;
    height: 2px;
    background: var(--wccg-primary-color);
    margin-top: 9px;
    border-radius: 2px;
}

/* Dynamic Section */
.wccg-dynamic-section {
    margin-bottom: 3em;
}

.wccg-dynamic-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
    grid-column: 1 / -1;
}

/* Skeleton Loaders for grids */
.wccg-dynamic-loader.wccg-products-grid {
    display: grid !important;
    padding: 0 !important;
    grid-column: auto !important;
    width: 100%;
}

.wccg-skeleton-card {
    background: var(--wccg-bg);
    border-radius: var(--wccg-border-radius, 10px);
    overflow: hidden;
    padding: 15px;
    border: 1px solid #f0f0f0;
}

.wccg-skeleton-img {
    width: 100%;
    aspect-ratio: 1/1;
    background: #f0f0f0;
    border-radius: 8px;
    margin-bottom: 20px;
    animation: wccg-pulse-skeleton 1.5s infinite ease-in-out;
}

.wccg-skeleton-line {
    height: 12px;
    background: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 10px;
    animation: wccg-pulse-skeleton 1.5s infinite ease-in-out;
}

.wccg-skeleton-title {
    width: 80%;
    height: 16px;
    margin-bottom: 15px;
}

.wccg-skeleton-price {
    width: 40%;
}

@keyframes wccg-pulse-skeleton {
    0% { background-color: #f5f5f5; }
    50% { background-color: #e0e0e0; }
    100% { background-color: #f5f5f5; }
}

/* Empty State */
.wccg-empty-state {
    text-align: center;
    padding: 60px 30px;
    background: linear-gradient(135deg, #fafafa 0%, #f3f3f3 100%);
    border-radius: 16px;
    border: 2px dashed #ddd;
}

.wccg-empty-state::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;
}

.wccg-empty-state p {
    font-size: 17px;
    color: #888;
    margin-bottom: 24px;
    line-height: 1.5;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.wccg-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    background: var(--wccg-primary-color, #000) !important;
    color: #fff !important;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: none;
}

.wccg-explore-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Repositioned Slider Navigation (Top-Header) */
.wccg-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    gap: 20px;
    flex-wrap: nowrap;
}

/* Hide product image dots on mobile */
@media (max-width: 768px) {
    .wccg-dots-indicator {
        display: none !important;
    }
}

.wccg-section-title {
    margin: 0 !important;
    font-size: 26px;
    font-weight: 700;
    color: var(--wccg-title-color, #1a1a1a);
}

.wccg-slider-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.wccg-slider-nav .swiper-button-next,
.wccg-slider-nav .swiper-button-prev {
    position: static !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1px solid #eeeeee !important;
    color: var(--wccg-text-color, #333) !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

/* Hide default chunky Swiper icons */
.wccg-slider-nav .swiper-button-next::after,
.wccg-slider-nav .swiper-button-prev::after {
    display: none !important;
}

/* Add razor-thin luxury chevrons via pseudo-elements */
.wccg-slider-nav .swiper-button-next::before,
.wccg-slider-nav .swiper-button-prev::before {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    display: block;
}

.wccg-slider-nav .swiper-button-prev::before {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.wccg-slider-nav .swiper-button-next::before {
    transform: rotate(45deg);
    margin-right: 3px;
}

.wccg-slider-nav .swiper-button-next:hover,
.wccg-slider-nav .swiper-button-prev:hover {
    background-color: var(--wccg-primary-color, #000) !important;
    border-color: var(--wccg-primary-color, #000) !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

/* Fix mobile responsive title size within header */
@media (max-width: 768px) {
    .wccg-section-header {
        margin-bottom: 20px;
    }
    .wccg-section-title {
        font-size: 20px;
    }
    .wccg-slider-nav .swiper-button-next,
    .wccg-slider-nav .swiper-button-prev {
        width: 32px !important;
        height: 32px !important;
    }
    .wccg-empty-state {
        padding: 40px 20px;
    }
    .wccg-empty-state::before {
        width: 48px;
        height: 48px;
    }
    .wccg-empty-state p {
        font-size: 15px;
    }
    .wccg-explore-btn {
        padding: 12px 28px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .wccg-section-title {
        font-size: 20px;
        margin-bottom: 16px;
    }
    .wccg-dynamic-section {
        margin-bottom: 2em;
    }
}

.wccg-swiper-wrapper {
    position: relative;
    margin-bottom: 2em;
    padding-bottom: 56px; /* space for pagination */
}

.wccg-swiper .swiper-pagination {
    bottom: 10px !important;
}

.wccg-hero-swiper .wccg-hero-pagination,
.wccg-apex-carousel .wccg-apex-pagination {
    bottom: 14px !important;
}

/* Columns configuration */
.wccg-columns-1 { grid-template-columns: repeat(1, 1fr); }
.wccg-columns-2 { grid-template-columns: repeat(2, 1fr); }
.wccg-columns-3 { grid-template-columns: repeat(3, 1fr); }
.wccg-columns-4 { grid-template-columns: repeat(4, 1fr); }
.wccg-columns-5 { grid-template-columns: repeat(5, 1fr); }
.wccg-columns-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
    .wccg-products-grid.wccg-columns-2,
    .wccg-products-grid.wccg-columns-3,
    .wccg-products-grid.wccg-columns-4,
    .wccg-products-grid.wccg-columns-5,
    .wccg-products-grid.wccg-columns-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .wccg-products-grid.wccg-columns-2,
    .wccg-products-grid.wccg-columns-3,
    .wccg-products-grid.wccg-columns-4,
    .wccg-products-grid.wccg-columns-5,
    .wccg-products-grid.wccg-columns-6 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .wccg-products-grid.wccg-columns-2,
    .wccg-products-grid.wccg-columns-3,
    .wccg-products-grid.wccg-columns-4,
    .wccg-products-grid.wccg-columns-5,
    .wccg-products-grid.wccg-columns-6 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 10px;
    }
}

/* Swiper overrides */
.wccg-swiper .swiper-pagination,
.wccg-swiper .swiper-button-next,
.wccg-swiper .swiper-button-prev {
    opacity: 0;
    transition: opacity 0.4s var(--wccg-transition-cubic);
}

.wccg-swiper .swiper-wrapper {
    transition-timing-function: var(--wccg-transition-cubic) !important;
}

.wccg-block-editor-preview .wccg-swiper .swiper-wrapper {
    display: grid;
    gap: var(--wccg-grid-gap, 20px);
    transform: none !important;
}

.wccg-block-editor-preview .wccg-swiper.wccg-columns-1 .swiper-wrapper { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.wccg-block-editor-preview .wccg-swiper.wccg-columns-2 .swiper-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wccg-block-editor-preview .wccg-swiper.wccg-columns-3 .swiper-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wccg-block-editor-preview .wccg-swiper.wccg-columns-4 .swiper-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wccg-block-editor-preview .wccg-swiper.wccg-columns-5 .swiper-wrapper { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wccg-block-editor-preview .wccg-swiper.wccg-columns-6 .swiper-wrapper { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.wccg-block-editor-preview .wccg-swiper .swiper-slide {
    width: auto !important;
    margin-right: 0 !important;
}

.editor-styles-wrapper .wccg-apex-carousel-builder,
.wccg-apex-carousel-builder {
    overflow: hidden;
    max-width: 100%;
}

.editor-styles-wrapper .wccg-apex-carousel-builder .wccg-block-instance,
.wccg-apex-carousel-builder .wccg-block-instance,
.editor-styles-wrapper .wccg-apex-carousel-builder .wccg-apex-width-full,
.wccg-apex-carousel-builder .wccg-apex-width-full {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.editor-styles-wrapper .wccg-apex-carousel-builder .wccg-apex-slider,
.wccg-apex-carousel-builder .wccg-apex-slider {
    min-height: 360px !important;
    height: clamp(360px, var(--wccg-apex-height, 460px), 520px) !important;
}

.editor-styles-wrapper .wccg-apex-carousel-builder .wccg-apex-container,
.wccg-apex-carousel-builder .wccg-apex-container {
    max-width: 100% !important;
    padding: 32px clamp(26px, 5vw, 64px);
}

.editor-styles-wrapper .wccg-apex-carousel-builder .wccg-apex-title,
.editor-styles-wrapper .wccg-apex-carousel-builder .wccg-apex-subtitle,
.wccg-apex-carousel-builder .wccg-apex-title,
.wccg-apex-carousel-builder .wccg-apex-subtitle {
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(0,0,0,0.28);
}

.editor-styles-wrapper .wccg-apex-carousel-builder .wccg-apex-float-wrap,
.wccg-apex-carousel-builder .wccg-apex-float-wrap {
    flex: 0 1 auto;
    width: var(--wccg-apex-slide-image-width, var(--wccg-apex-image-width, 52%));
    max-width: 100%;
}

.editor-styles-wrapper .wccg-apex-carousel-builder .wccg-apex-float-img,
.wccg-apex-carousel-builder .wccg-apex-float-img {
    max-height: 300px !important;
}

.wccg-swiper:hover .swiper-pagination,
.wccg-swiper:hover .swiper-button-next,
.wccg-swiper:hover .swiper-button-prev {
    opacity: 1;
}

/* Force visibility on mobile (no hover state) */
@media (max-width: 1024px) {
    .wccg-swiper .swiper-pagination,
    .wccg-swiper .swiper-button-next,
    .wccg-swiper .swiper-button-prev {
        opacity: 1;
    }
}

.wccg-swiper .swiper-pagination-bullet-active {
    background: var(--wccg-primary-color);
}
.wccg-swiper .swiper-button-next,
.wccg-swiper .swiper-button-prev {
    color: var(--wccg-primary-color);
}

/* ====================================================
   Product Card - Common Styles
==================================================== */
.wccg-products-grid .product,
.wccg-products-grid li,
.wccg-swiper-wrapper .swiper-slide,
.wccg-product-wrapper {
    position: relative;
    background: var(--wccg-bg);
    border-radius: var(--wccg-border-radius, 10px);
    overflow: hidden;
    list-style: none !important;
    list-style-type: none !important;
}

/* Force hide any injected bullets from themes */
.wccg-products-grid .product::before,
.wccg-products-grid li::before,
.wccg-swiper-wrapper .swiper-slide::before,
.wccg-product-wrapper::before {
    display: none !important;
}

.wccg-product-element-top {
    position: relative;
    overflow: hidden;
}

.wccg-product-element-top .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--wccg-badge-bg);
    color: var(--wccg-badge-text);
    padding: 5px 9px;
    font-size: 10px;
    border-radius: 999px;
    z-index: 10;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

/* ====================================================
   IMAGE HOVER BEHAVIORS & SEGMENTS
   ==================================================== */
.wccg-product-image-link {
    display: block;
    position: relative;
    overflow: hidden;
}

/* 1. ZOOM STYLE */
.wccg-hover-zoom img {
    transition: transform var(--wccg-transition-img) var(--wccg-transition-cubic) !important;
}
.wccg-product-wrapper:hover .wccg-hover-zoom img {
    transform: scale(1.1);
}

/* 2. GALLERY SWITCH STYLE */
.wccg-hover-switch .wccg-secondary-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity var(--wccg-transition-img) var(--wccg-transition-cubic);
    object-fit: cover;
}
.wccg-product-wrapper:hover .wccg-hover-switch .wccg-secondary-image {
    opacity: 1;
}

/* 3. SEGMENTS STYLE (Woodmart style) */
.wccg-hover-segments {
    position: relative;
}
.wccg-hover-zone {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 5;
    cursor: pointer;
}
.wccg-hover-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Default active slide (Main image) is handled by hiding slides unless hovered */
.wccg-hover-slide.active-on-mobile { opacity: 1; }

.wccg-hover-zone:hover + .wccg-hover-slide,
.wccg-hover-slide:hover {
    opacity: 1;
    z-index: 4;
}

/* Indicator Dots for Mobile/Touch */
.wccg-dots-indicator {
    display: none; /* Desktop hidden, mouse tracking used */
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    gap: 6px;
    z-index: 15;
}

.wccg-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s;
}

.wccg-dot.active {
    background: var(--wccg-primary-color);
    transform: scale(1.3);
}

@media (max-width: 1024px) {
    .wccg-dots-indicator {
        display: flex;
    }
    /* Disable segments hover zones on touch */
    .wccg-hover-zone { display: none; }
}

/* Ensure Hover Actions are visible on Mobile */
@media (max-width: 1024px) {
    .wccg-floating-actions {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .wccg-inside-add-to-cart {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        bottom: 0 !important;
    }
    
    /* Slight adjustments for Catalog layout on mobile */
    .wccg-catalog-action-bar {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}


/* Shared typography */
.wccg-product-title {
    font-size: var(--wccg-title-size, 15px);
    margin: 0 0 6px;
    font-weight: var(--wccg-title-weight, 600);
    line-height: 1.35;
}

@media (max-width: 768px) {
    .wccg-product-title {
        font-size: var(--wccg-title-size-mobile, 14px);
        margin-top: 15px; /* Added more space to prevent overlap with buttons sticking to bottom */
    }
}

.wccg-product-title a {
    color: var(--wccg-title-color);
    text-decoration: none;
    transition: color 0.3s;
}

.wccg-product-title a:hover {
    color: var(--wccg-primary-color);
}



.wccg-product-cats {
    font-size: 11px;
    color: var(--wccg-cat-color);
    margin-bottom: 8px;
    line-height: 1.4;
}

.wccg-product-cats a {
    color: var(--wccg-cat-color);
    text-decoration: none;
}


.wccg-rating-price {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.wccg-rating-price .price {
    color: var(--wccg-price-color);
    font-weight: 650;
    font-size: var(--wccg-price-size, 14px);
}


.wccg-rating-price .price del {
    color: var(--wccg-text-muted);
    font-weight: 400;
    font-size: 13px;
    margin-right: 5px;
}

/* ====================================================
   Style: Woodmart "Base"
==================================================== */
/* Extremely specific to override themes like Woodmart/XStore */
.woocommerce .wccg-main-wrapper ul.products li.product.wccg-style-base,
.wccg-main-wrapper .wccg-products-grid .wccg-style-base {
    transition: box-shadow var(--wccg-transition-img) var(--wccg-transition-cubic), transform var(--wccg-transition-img) var(--wccg-transition-cubic), border-color var(--wccg-transition-img) ease;
    background: var(--wccg-bg) !important;
    border-radius: var(--wccg-border-radius, 10px) !important;
    overflow: hidden !important;
    padding: 0 !important; /* Resetting padding, using margins on children instead */
    border: 1px solid var(--wccg-border-color) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .woocommerce .wccg-main-wrapper ul.products li.product.wccg-style-base,
    .wccg-main-wrapper .wccg-products-grid .wccg-style-base {
        padding: 10px !important; /* Balanced for mobile */
    }
}

.wccg-style-base .wccg-product-element-top {
    margin: 12px 12px 10px 12px; /* Boxed effect via margin */
    position: relative;
    overflow: hidden;
    border-radius: var(--wccg-border-radius, 10px);
    background: #f6f6f4;
}

@media (max-width: 768px) {
    .wccg-style-base .wccg-product-element-top {
        margin: 10px 10px 8px 10px;
    }
}

.wccg-style-base .wccg-product-image-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--wccg-transition-img) var(--wccg-transition-cubic);
}

.wccg-style-base:hover .wccg-product-image-link img {
    transform: scale(1.035);
}

.wccg-style-base .wccg-product-element-bottom {
    padding: 0 14px 16px 14px; /* Alignment with boxed image */
    text-align: center;
}

@media (max-width: 768px) {
    .wccg-style-base .wccg-product-element-bottom {
        padding: 0 10px 10px 10px;
    }
}

.wccg-style-base .wccg-rating-price {
    align-items: center;
}

.wccg-fade-in-block {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--wccg-bg);
    padding: 0 10px 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--wccg-transition-img) var(--wccg-transition-cubic);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05); /* Soft shadow on hover */
    z-index: 99;
}

.wccg-style-base:hover .wccg-fade-in-block {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover fixes to make room for absolute block */
.wccg-style-base:hover {
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: var(--wccg-card-shadow);
    transform: translateY(-2px);
}

.wccg-hover-content {
    font-size: 13px;
    color: var(--wccg-text-color);
    margin-bottom: 15px;
    line-height: 1.5;
}

.wccg-bottom-actions .wccg-add-btn a {
    display: inline-block;
    background: var(--wccg-border-color);
    color: var(--wccg-icon-color);
    padding: 8px 15px;

    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s;
    width: 100%;
    box-sizing: border-box;
}

.wccg-bottom-actions .wccg-add-btn a:hover {
    background: var(--wccg-btn-hover);
}

/* Floating Right Icons (Woodmart Hover-Quick Inspiration) */
.wccg-floating-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 20;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity var(--wccg-transition-duration) var(--wccg-transition-cubic), transform var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-style-base:hover .wccg-floating-actions {
    opacity: 1;
    transform: translateX(0);
}

.wccg-action-btn {
    background: var(--wccg-bg);
    color: var(--wccg-icon-color);
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    font-size: 15px;
    transition: background var(--wccg-transition-duration) var(--wccg-transition-cubic), color var(--wccg-transition-duration) var(--wccg-transition-cubic), transform var(--wccg-transition-duration) var(--wccg-transition-cubic), box-shadow var(--wccg-transition-duration) var(--wccg-transition-cubic);
    border: none !important;
    min-width: unset !important;
    min-height: unset !important;
    overflow: hidden; /* Hide any overflowing text injected by theme */
    white-space: nowrap;
}

/* Fix: Suppress theme-injected icons that overlap with our custom SVGs */
.wccg-action-btn::before,
.wccg-action-btn::after,
.wccg-atc-btn::before,
.wccg-atc-btn::after {
    display: none !important;
    content: none !important;
}

.wccg-action-btn:hover {
    background: var(--wccg-primary-color);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}


/* Wishlisted (Favorited) Heart State — All Variants */
.wccg-wishlist-btn {
    transition: all 0.3s ease, transform 0.2s ease;
}

.wccg-wishlist-btn.wccg-wishlisted svg {
    fill: #e74c3c !important;
    stroke: #e74c3c !important;
}

.wccg-wishlist-btn.wccg-wishlisted {
    background: #fff1f0 !important;
    color: #e74c3c !important;
    box-shadow: 0 2px 10px rgba(231, 76, 60, 0.25) !important;
}

/* Compared (Active) State — All Variants */
.wccg-compare-btn {
    transition: all 0.3s ease, transform 0.2s ease;
}

.wccg-compare-btn.wccg-compared svg {
    stroke: #2980b9 !important;
}

.wccg-compare-btn.wccg-compared {
    background: #ebf5fb !important;
    color: #2980b9 !important;
    box-shadow: 0 2px 10px rgba(41, 128, 185, 0.25) !important;
}

/* Catalog Action Bar — Wishlisted + Compared overrides */
.wccg-catalog-action-icon.wccg-wishlist-btn.wccg-wishlisted {
    background: #fff1f0 !important;
}

.wccg-catalog-action-icon.wccg-wishlist-btn.wccg-wishlisted svg {
    fill: #e74c3c !important;
    stroke: #e74c3c !important;
}

.wccg-catalog-action-icon.wccg-compare-btn.wccg-compared {
    background: #ebf5fb !important;
}

.wccg-catalog-action-icon.wccg-compare-btn.wccg-compared svg {
    stroke: #2980b9 !important;
}

/* XStore Hover Actions — Wishlisted + Compared overrides */
.wccg-xstore-hover-actions .wccg-wishlist-btn.wccg-wishlisted,
.wccg-xstore-hover-actions .wccg-compare-btn.wccg-compared {
    box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}

/* Pulse micro-animation on toggle */
@keyframes wccg-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.wccg-wishlist-btn.wccg-wishlisted,
.wccg-compare-btn.wccg-compared {
    animation: wccg-pulse 0.3s ease;
}

/* Visibility Control for Shortcode Parameter */
.wccg-actions-cart_only .wccg-floating-actions,
.wccg-actions-cart_only .wccg-quick-view-btn {
    display: none !important;
}

.wccg-actions-none .wccg-floating-actions,
.wccg-actions-none .wccg-xstore-hover-actions,
.wccg-actions-none .wccg-inside-add-to-cart {
    display: none !important;
}

/* ====================================================
   Style: Woodmart Premium Hover (Base Layout Override)
   ==================================================== */
.wccg-product-element-top {
    position: relative;
    overflow: hidden;
    border-radius: var(--wccg-border-radius, 10px);
}

/* Enforce Strict Boundaries so Image and Absolute elements align perfectly */
.wccg-product-image-link {
    display: block;
    position: relative;
    width: 100%;
}

.wccg-product-image-link figure {
    margin: 0;
    width: 100%;
    display: block;
}

.wccg-product-image-link img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Secondary Hover Gallery Image Wrapper */
.wccg-hover-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity var(--wccg-transition-img) ease;
    z-index: 2;
    pointer-events: none; /* Let hovers pass through to zones */
}

.wccg-style-base .wccg-product-image-link img {
    transition: all var(--wccg-transition-img) ease;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* 1. Only fade out base image if alternative gallery slide images exist */
.wccg-style-base:hover .wccg-product-image-link.has-hover-gallery img:not(.wccg-secondary-image) {
    opacity: 0; 
}

/* 2. Edge Case: If no gallery images exist, do a beautiful slow zoom to mimic interactivity */
.wccg-style-base:hover .wccg-product-image-link.no-hover-gallery img {
    transform: scale(1.08) translateZ(0); /* Force GPU acceleration */
}

/* Invisible Hover Tracking Zones */
.wccg-hover-zone {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 15;
}

/* Zone math for up to 4 images */
.wccg-hover-zone:nth-of-type(1) { left: 0; width: 25%; }
.wccg-hover-zone:nth-of-type(2) { left: 25%; width: 25%; }
.wccg-hover-zone:nth-of-type(3) { left: 50%; width: 25%; }
.wccg-hover-zone:nth-of-type(4) { left: 75%; width: 25%; }

/* If 3 images, css falls back securely. If 2 images, the 3rd/4th zones are just empty unrendered html! */

/* Default show first image if hovering anywhere */
.wccg-style-base:hover .wccg-slide-0 { opacity: 1; }

/* The Magic Sibling Selector! Forces the corresponding slide to appear over slide 0 */
.wccg-zone-1:hover ~ .wccg-slide-1 { opacity: 1 !important; z-index: 3; }
.wccg-zone-2:hover ~ .wccg-slide-2 { opacity: 1 !important; z-index: 3; }
.wccg-zone-3:hover ~ .wccg-slide-3 { opacity: 1 !important; z-index: 3; }

/* Base Style Add to Cart & Buy Now Slide-Up Overlay */
.wccg-inside-add-to-cart {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
    transition: transform var(--wccg-transition-duration) var(--wccg-transition-cubic);
    z-index: 20;
    display: flex;
}

.wccg-style-base:hover .wccg-inside-add-to-cart {
    transform: translateY(0);
}

.wccg-inside-add-to-cart a.button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 38px !important;
    text-transform: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background var(--wccg-transition-duration) var(--wccg-transition-cubic), color var(--wccg-transition-duration) var(--wccg-transition-cubic) !important;
    border: none !important;
    text-decoration: none !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

/* Match boxed image rounding */
.wccg-style-base .wccg-inside-add-to-cart a.wccg-atc-btn {
    border-bottom-left-radius: 0 !important; /* Resetting since element-top container is rounded */
}
.wccg-style-base .wccg-inside-add-to-cart a.wccg-buy-now-btn {
    border-bottom-right-radius: 0 !important;
}

/* Add to Cart Button Style */
.wccg-inside-add-to-cart a.wccg-atc-btn {
    background: rgba(31, 31, 31, 0.92) !important;
}

.wccg-inside-add-to-cart a.wccg-atc-btn:hover {
    background: #111 !important;
}

/* Buy Now Button Style */
.wccg-inside-add-to-cart a.wccg-buy-now-btn {
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--wccg-primary-color) !important;
    border-left: 1px solid rgba(0,0,0,0.08) !important;
}

.wccg-inside-add-to-cart a.wccg-buy-now-btn:hover {
    background: #fff !important;
    color: #111 !important;
}

.wccg-product-wrapper .added_to_cart.wc-forward,
.wccg-drawer-item .added_to_cart.wc-forward {
    display: none !important;
}

/* Vertical divider between buttons */
.wccg-inside-add-to-cart a.wccg-atc-btn::after {
    display: none !important;
    content: none !important;
}

/* Sliding text/icon logic for both buttons */
.wccg-inside-add-to-cart a.button .wccg-cart-text,
.wccg-inside-add-to-cart a.button .wccg-buy-now-text {
    display: inline-block;
    transition: transform var(--wccg-transition-duration) var(--wccg-transition-cubic), opacity var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-inside-add-to-cart a.button:hover .wccg-cart-text,
.wccg-inside-add-to-cart a.button:hover .wccg-buy-now-text {
    transform: translateY(-120%);
    opacity: 0;
}

.wccg-inside-add-to-cart a.button .wccg-cart-icon,
.wccg-inside-add-to-cart a.button .wccg-buy-now-icon {
    position: absolute;
    top: 125%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: top var(--wccg-transition-duration) var(--wccg-transition-cubic);
    display: flex;
    justify-content: center;
    align-items: center;
}

.wccg-inside-add-to-cart a.button:hover .wccg-cart-icon,
.wccg-inside-add-to-cart a.button:hover .wccg-buy-now-icon {
    top: 50%;
}

/* Minimal Buy Now Button */
.wccg-minimal-buy-now-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    height: 28px !important;
    line-height: 28px !important;
    background: transparent !important;
    color: var(--wccg-primary-color) !important;
    border: 1px solid var(--wccg-primary-color) !important;
    text-decoration: none !important;
    font-size: 12px !important; /* Slightly smaller for better fit */
    font-weight: 700 !important;
    text-transform: none !important;
    border-radius: var(--wccg-border-radius, 5px) !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

.wccg-minimal-buy-now-btn:hover {
    background: var(--wccg-primary-color) !important;
    color: #fff !important;
}

/* Catalog & XStore Buy Now Accent */
.wccg-catalog-buy-now-btn:hover,
.wccg-xstore-buy-now-btn:hover {
    background: var(--wccg-primary-color) !important;
    color: #fff !important;
}

.wccg-xstore-buy-now-btn svg,
.wccg-catalog-buy-now-btn svg {
    color: inherit;
}

/* ====================================================
   6. QUICK VIEW MODAL COMPONENT
   ==================================================== */
.wccg-quick-view-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px); /* Lighter blur for faster GPU painting */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Excluded backdrop-filter transition for pure speed */
}

.wccg-quick-view-backdrop.wccg-modal-active {
    opacity: 1;
    visibility: visible;
}

.wccg-quick-view-modal {
    background: #fff;
    width: 900px;
    max-width: 95%;
    min-height: 400px; /* CRITICAL: Prevent height collapse during AJAX empty state */
    max-height: 90vh;
    border-radius: 12px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s var(--wccg-transition-cubic);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.wccg-quick-view-backdrop.wccg-modal-active .wccg-quick-view-modal {
    transform: translateY(0) scale(1);
}

.wccg-qv-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 5px;
    color: #666;
    transition: transform 0.3s, color 0.3s;
}

.wccg-qv-close:hover {
    color: #000;
    transform: rotate(90deg);
}

/* Modal Content Layout (Side by Side) */
.wccg-qv-container {
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
    animation: wccg-fade-in 0.4s forwards;
}

@keyframes wccg-fade-in {
    to { opacity: 1; }
}

.wccg-qv-left {
    flex: 1 1 50%;
    max-width: 50%;
    background: #f7f7f7;
}

.wccg-qv-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wccg-qv-right {
    flex: 1 1 50%;
    max-width: 50%;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.wccg-qv-title {
    font-size: 26px;
    margin-bottom: 10px;
    margin-top: 0;
}

.wccg-qv-price {
    font-size: 20px;
    color: var(--wccg-price-color);
    font-weight: 600;
    margin-bottom: 20px;
}


.wccg-qv-excerpt {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.wccg-qv-actions {
    margin-bottom: 30px;
    display: flex;
}

.wccg-qv-view-details {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 15px 35px;
    background: var(--wccg-primary-color, #000);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all 0.3s ease;
    width: 100%;
}

.wccg-qv-view-details:hover {
    background: #333;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.wccg-qv-meta {
    font-size: 13px;
    color: #888;
    border-top: 1px solid #eee;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Loading Spinner */
.wccg-qv-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.wccg-modal-loading .wccg-qv-loader {
    display: block;
}

.wccg-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    border-top-color: var(--wccg-primary-color);
    animation: wccg-spin 0.6s linear infinite;
    display: block;
}

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

/* Mobile Responsiveness for Modal */
@media (max-width: 768px) {
    .wccg-qv-left, .wccg-qv-right {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .wccg-qv-right {
        padding: 20px;
    }
}


/* ====================================================
   Style: XStore Inspired Hover
==================================================== */
.wccg-main-wrapper .wccg-products-grid .wccg-style-xstore {
    background: var(--wccg-bg) !important;
    border-radius: var(--wccg-border-radius, 10px) !important;
    padding: 15px !important; /* Boxed layout */
    border: 1px solid #f2f2f2 !important;
    overflow: hidden !important;
}

.woocommerce .wccg-main-wrapper ul.products li.product.wccg-style-xstore,
.wccg-main-wrapper .wccg-products-grid .wccg-style-xstore {
    background: var(--wccg-bg) !important;
    border-radius: var(--wccg-border-radius, 10px) !important;
    padding: 0 !important; /* Reset padding */
    border: 1px solid #f0f0f0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.wccg-style-xstore .wccg-product-element-top {
    margin: 15px 15px 0 15px; /* Boxed effect */
    border-radius: var(--wccg-border-radius, 10px);
    background: #f7f7f7;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .wccg-style-xstore .wccg-product-element-top {
        margin: 10px 10px 0 10px;
    }
}

.wccg-style-xstore .wccg-product-image-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: all var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

/* Overlay Actions */
.wccg-xstore-hover-actions {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: all var(--wccg-transition-duration) var(--wccg-transition-cubic);
    z-index: 20;
    padding-bottom: 20px;
}

.wccg-style-xstore:hover .wccg-product-image-link img:not(.wccg-secondary-image) {
    opacity: 0.8;
}

.wccg-style-xstore:hover .wccg-xstore-hover-actions {
    bottom: 0;
    opacity: 1;
}

.wccg-xstore-hover-actions a {
    background: var(--wccg-bg);
    color: var(--wccg-icon-color);
    width: 40px;
    height: 40px;
    display: flex !important;

    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s;
    font-size: 18px;
}

/* Override default WooCommerce pill button to be a circle icon */
.wccg-xstore-hover-actions a.add_to_cart_button {
    padding: 0;
    width: 40px;
    height: 40px;
    font-size: 0 !important; /* Hide the standard "Add to cart" text */
    position: relative;
}

.wccg-xstore-hover-actions a.add_to_cart_button::before {
    content: "\1F6D2"; /* Shopping Cart Unicode Icon */
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wccg-xstore-hover-actions a.add_to_cart_button.added::after {
    display: none; /* Hide standard WC checkmarks */
}

.wccg-xstore-hover-actions a:hover {
    background: var(--wccg-primary-color);
    color: #fff;
}


.wccg-style-xstore .wccg-product-element-bottom {
    text-align: left;
    padding: 12px 14px 14px;
}

.wccg-style-xstore .wccg-rating-price {
    align-items: flex-start;
}

/* Pagination Dots Adjustment */
.wccg-swiper .swiper-pagination-bullet-active {
    background: var(--wccg-primary-color);
}

/* Swiper Arrows - Cute Bubble Style */
.wccg-swiper .swiper-button-next,
.wccg-swiper .swiper-button-prev {
    background-color: var(--wccg-bg);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    color: var(--wccg-text-color);
    transition: all 0.3s ease;
}

.wccg-swiper .swiper-button-next::after,
.wccg-swiper .swiper-button-prev::after {
    font-size: 14px;
    font-weight: bold;
}

.wccg-swiper .swiper-button-next:hover,
.wccg-swiper .swiper-button-prev:hover {
    background-color: var(--wccg-primary-color);
    color: var(--wccg-bg);
}

/* ====================================================
   Style: Minimal (Horizontal Card)
==================================================== */
.wccg-style-minimal {
    border: 1px solid #f0f0f0;
    border-radius: var(--wccg-border-radius, 10px);
    overflow: hidden;
    transition: box-shadow var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-style-minimal:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.wccg-minimal-inner {
    display: flex;
    align-items: stretch;
    background: var(--wccg-bg);
}

.wccg-minimal-image {
    flex: 0 0 150px; /* Slightly wider and consistent */
    width: 150px;
    position: relative;
    overflow: hidden;
    background: #f7f7f7;
}

.wccg-minimal-image a {
    display: block;
    height: 100%;
}

.wccg-minimal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Back to cover for full fill */
    display: block;
    transition: transform var(--wccg-transition-img) var(--wccg-transition-cubic);
}

.wccg-style-minimal:hover .wccg-minimal-image img {
    transform: scale(1.08);
}

.wccg-minimal-image .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--wccg-badge-bg);
    color: var(--wccg-badge-text);
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 3px;
    z-index: 5;
    font-weight: bold;
}

.wccg-minimal-info {
    flex: 1;
    padding: 12px 15px; /* Compact padding */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space out title and buttons */
    min-height: 140px; /* Match image height */
    box-sizing: border-box;
}

.wccg-minimal-excerpt {
    font-size: 13px; /* Slightly smaller */
    color: var(--wccg-text-color);
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Truncate after 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wccg-minimal-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 10px;
    flex-wrap: wrap; /* Prevent overflow on very narrow columns */
}

.wccg-minimal-cart-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    height: 28px !important;
    line-height: 28px !important;
    background: var(--wccg-primary-color) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 12px !important; /* Slightly smaller for better fit */
    font-weight: 700 !important;
    text-transform: none !important;
    border-radius: var(--wccg-border-radius, 5px) !important;
    transition: all 0.3s ease !important;
    border: none !important;
    white-space: nowrap !important;
}

.wccg-minimal-buy-now-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    line-height: 28px !important;
    background: #fff !important;
    color: var(--wccg-title-color) !important;
    border: 1px solid #ddd !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: var(--wccg-border-radius, 5px) !important;
    transition: all 0.3s !important;
    text-decoration: none !important;
}

.wccg-minimal-buy-now-btn:hover {
    background: #f9f9f9 !important;
    border-color: #ccc !important;
}

/* Responsive minimal & Column Enforcement (Desktop Only) */
@media (min-width: 992px) {
    .wccg-products-grid.wccg-columns-3:has(.wccg-style-minimal),
    .wccg-products-grid.wccg-columns-4:has(.wccg-style-minimal),
    .wccg-products-grid.wccg-columns-5:has(.wccg-style-minimal),
    .wccg-products-grid.wccg-columns-6:has(.wccg-style-minimal),
    .products.columns-3:has(.wccg-style-minimal),
    .products.columns-4:has(.wccg-style-minimal),
    .products.columns-5:has(.wccg-style-minimal),
    .products.columns-6:has(.wccg-style-minimal) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Tablet & Mobile: Force 1 column for horizontal Minimal cards */
@media (max-width: 991px) {
    .wccg-products-grid:has(.wccg-style-minimal),
    .products:has(.wccg-style-minimal) {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* Stacking for vertical only on very small screens */
@media (max-width: 480px) {
    .wccg-minimal-inner {
        flex-direction: column;
    }
    .wccg-minimal-image {
        flex: none;
        max-width: 100%;
        width: 100%;
        height: 220px;
    }
    .wccg-minimal-image img {
        object-fit: cover; /* Back to cover when full width */
    }
    .wccg-minimal-info {
        padding: 16px;
    }
}

/* ====================================================
   Style: Catalog (Compact Grid + Action Bar)
==================================================== */
.wccg-style-catalog {
    background: var(--wccg-bg);
    border-radius: var(--wccg-border-radius, 10px);
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: all var(--wccg-transition-duration) var(--wccg-transition-cubic);
    display: flex;
    flex-direction: column;
}

/* Typography Harmonization */
.wccg-style-catalog .wccg-product-title a {
    color: var(--wccg-title-color);
}

.wccg-style-catalog .wccg-product-title a:hover {
    filter: brightness(1.2);
}

.wccg-style-catalog .price,
.wccg-style-catalog .price ins,
.wccg-style-catalog .price .amount {
    color: var(--wccg-price-color) !important;
    font-weight: 700;
}


.wccg-style-catalog .price del .amount {
    color: var(--wccg-text-muted);
    font-weight: 400;
}



.wccg-style-catalog:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.wccg-style-catalog .wccg-catalog-image {
    position: relative;
    overflow: hidden;
}

.wccg-style-catalog .wccg-product-image-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--wccg-transition-img) var(--wccg-transition-cubic);
}

.wccg-style-catalog:hover .wccg-product-image-link img {
    transform: scale(1.06) translateZ(0); /* Smooth acceleration */
}

.wccg-catalog-info {
    padding: 12px 14px 8px;
    flex: 1;
}

.wccg-catalog-info .wccg-rating-price {
    align-items: flex-start;
}

/* Persistent bottom action bar */
.wccg-catalog-action-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Increased gap */
    padding: 12px 14px;
    border-top: 1px solid #f0f0f0;
    background: var(--wccg-bg);
}

.wccg-catalog-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #f5f5f5;
    color: var(--wccg-icon-color);
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 0;
}


/* Secondary Actions: Soft-rounded circles */
.wccg-wishlist-btn,
.wccg-compare-btn,
.wccg-quickview-btn {
    border-radius: 50%;
}

.wccg-catalog-action-icon:not(.button):hover {
    background: var(--wccg-primary-color);
    color: #fff;
    transform: translateY(-2px);
}

/* Primary Actions: Boxed + Rounded */
.wccg-catalog-action-icon.button.add_to_cart_button,
.wccg-catalog-buy-now-btn {
    border-radius: 8px !important; /* Boxed + Rounded */
    background: #f5f5f5 !important; /* Match other icons */
    color: var(--wccg-icon-color) !important;

    padding: 0 !important; /* Force reset padding */
    min-width: 38px !important; /* Match other icons */
    min-height: 38px !important;
    width: 38px !important;
    height: 38px !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    text-indent: -9999px; /* Hide text robustly */
    font-size: 0 !important;
}

.wccg-catalog-action-icon.button.add_to_cart_button svg,
.wccg-catalog-buy-now-btn svg {
    text-indent: 0;
    margin: 0;
}

.wccg-catalog-action-icon.button.add_to_cart_button:hover,
.wccg-catalog-buy-now-btn:hover {
    background: var(--wccg-primary-color) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}


.wccg-catalog-action-icon svg {
    flex-shrink: 0;
}


/* ====================================================
   Category Grid: Card Style
==================================================== */
.wccg-cat-card {
    border-radius: var(--wccg-border-radius, 10px);
    overflow: hidden;
    transition: all var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-cat-card:hover {
    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

.wccg-cat-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.wccg-cat-card-image {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 aspect ratio */
    background-size: cover;
    background-position: center;
}

.wccg-cat-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    transform: translateY(0);
    transition: padding var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-cat-card:hover .wccg-cat-card-overlay {
    padding-bottom: 28px;
}

.wccg-cat-card-name {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
}

.wccg-cat-card-count {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
}

/* ====================================================
   Category Grid: Banner Style
==================================================== */
.wccg-cat-banner {
    border-radius: var(--wccg-border-radius, 10px);
    overflow: hidden;
    transition: all var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-cat-banner:hover {
    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

.wccg-cat-banner-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.wccg-cat-banner-image {
    position: relative;
    width: 100%;
    min-height: 190px;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
}

.wccg-cat-banner-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    gap: 6px;
    transition: background var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-cat-banner:hover .wccg-cat-banner-overlay {
    background: rgba(0,0,0,0.55);
}

.wccg-cat-banner-name {
    color: #fff;
    font-size: clamp(16px, 3.8vw, 24px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 6px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.wccg-cat-banner-count {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin-bottom: 6px;
}

.wccg-cat-banner-cta {
    display: inline-block;
    padding: 6px 20px;
    border: 2px solid #fff;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-cat-banner:hover .wccg-cat-banner-cta {
    opacity: 1;
    transform: translateY(0);
    background: #fff;
    color: #000;
}


/* ====================================================
   Category Grid: Circle Style
==================================================== */
.wccg-cat-circle {
    text-align: center;
    transition: transform var(--wccg-transition-duration) var(--wccg-transition-cubic);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.wccg-cat-circle:hover {
    transform: translateY(-6px);
}

.wccg-cat-circle-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.wccg-cat-circle-image {
    width: 140px;
    height: 140px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: visible;
    position: relative;
    box-shadow: none;
    transition: box-shadow var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-cat-circle:hover .wccg-cat-circle-image {
    box-shadow: none;
}

.wccg-cat-circle-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
    transition: transform var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-cat-circle:hover .wccg-cat-circle-image img {
    transform: scale(1.08);
}

.wccg-cat-circle-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: var(--wccg-primary-color);
    color: #fff;
    min-width: 34px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.24);
    z-index: 2;
}

.wccg-cat-circle-name.price {
    font-size: var(--wccg-price-size, 15px);
    font-weight: 700;
    color: var(--wccg-price-color);
    line-height: 1;
}

.wccg-cat-circle-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--wccg-cat-color);
    margin: 0;
    transition: color 0.3s;
}

.wccg-cat-circle:hover .wccg-cat-circle-name {
    color: var(--wccg-primary-color);
}


/* ====================================================
   Category Grid: Minimal Style
 ==================================================== */
.wccg-cat-minimal {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.wccg-cat-minimal:last-child {
    border-bottom: none;
}

.wccg-cat-minimal-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--wccg-cat-color);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.wccg-cat-minimal:hover .wccg-cat-minimal-link {
    color: var(--wccg-primary-color);
    transform: translateX(5px);
}

.wccg-cat-minimal-count {
    font-size: 13px;
    opacity: 0.7;
    font-weight: 400;
}


/* ====================================================
   Compare Button Active State
==================================================== */
.wccg-compare-btn {
    transition: all 0.3s ease, transform 0.2s ease;
}

.wccg-compare-btn.wccg-compared svg {
    stroke: var(--wccg-primary-color);
    fill: var(--wccg-primary-color);
    fill-opacity: 0.15;
}

.wccg-compare-btn.wccg-compared {
    background: #fff;
    box-shadow: 0 0 0 2px var(--wccg-primary-color);
}

/* ====================================================
   Sticky Compare Bar
==================================================== */
.wccg-compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.08);
    animation: wccg-slide-up 0.4s var(--wccg-transition-cubic);
}

@keyframes wccg-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.wccg-compare-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.wccg-compare-bar-items {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    flex: 1;
    padding-top: 8px;
}

.wccg-compare-bar-item {
    position: relative;
    flex-shrink: 0;
    overflow: visible;
}

.wccg-compare-bar-item img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #eee;
}

.wccg-compare-bar-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
    border: none;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.wccg-compare-bar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.wccg-compare-now-btn {
    padding: 10px 24px;
    background: var(--wccg-primary-color);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.wccg-compare-now-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.wccg-compare-clear-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--wccg-border-color);
    border-radius: 50px;
    font-size: 13px;
    color: var(--wccg-text-color);
    cursor: pointer;
    transition: all var(--wccg-transition-duration) var(--wccg-transition-cubic);
    white-space: nowrap;
}

.wccg-compare-clear-btn:hover {
    background: var(--wccg-btn-hover);
    border-color: var(--wccg-primary-color);
    color: var(--wccg-primary-color);
}

/* Shake animation for max/min warnings */
@keyframes wccg-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.wccg-compare-bar-shake {
    animation: wccg-shake 0.5s ease;
}

/* ====================================================
   1. GLOBAL BADGE SYSTEM
==================================================== */
.wccg-product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    max-width: calc(100% - 20px);
    pointer-events: none;
}

.wccg-product-badges .onsale {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    float: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    background: var(--wccg-badge-bg, #83b735) !important;
    color: var(--wccg-badge-text, #fff) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    pointer-events: none;
    transform: none !important;
}

.wccg-badge {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: #fff;
    display: inline-block;
}

.wccg-badge-sale { background: #ff4d4d; }
.wccg-badge-new  { background: #2ecc71; }
.wccg-badge-hot  { background: #f1c40f; }
.wccg-badge-oos  { 
    background: #95a5a6; 
    font-size: 10px;
}

/* ====================================================
   2. CORE GRID & WRAPPER
==================================================== */
.wccg-compare-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.wccg-compare-backdrop.wccg-modal-active {
    opacity: 1;
    visibility: visible;
}

.wccg-compare-modal {
    background: #fff;
    width: 95vw;
    max-width: 1100px;
    max-height: 90vh;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s var(--wccg-transition-cubic);
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}

.wccg-compare-backdrop.wccg-modal-active .wccg-compare-modal {
    transform: translateY(0) scale(1);
}

.wccg-compare-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 5px;
    color: #666;
    transition: transform 0.3s, color 0.3s;
}

.wccg-compare-modal-close:hover {
    color: #000;
    transform: rotate(90deg);
}

.wccg-compare-modal-title {
    font-size: 22px;
    font-weight: 700;
    padding: 24px 30px 0;
    margin: 0;
}

.wccg-compare-table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    padding: 20px 30px 30px;
}

.wccg-compare-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}

.wccg-modal-loading .wccg-compare-loader {
    display: flex;
}

/* The comparison data table */
.wccg-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.wccg-compare-table th,
.wccg-compare-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    text-align: center;
    min-width: 160px;
}

.wccg-compare-table th.wccg-compare-label {
    text-align: left;
    font-weight: 600;
    color: #666;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    min-width: 110px;
    width: 110px;
    background: #fafafa;
    position: sticky;
    left: 0;
    z-index: 1;
}

.wccg-compare-product-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.wccg-compare-product-name {
    font-weight: 600;
    color: var(--wccg-primary-color);
    text-decoration: none;
    font-size: 15px;
}

.wccg-compare-product-name:hover {
    text-decoration: underline;
}

.wccg-compare-stars {
    color: #f5a623;
    font-size: 16px;
    letter-spacing: 2px;
}

.wccg-compare-reviews {
    color: #999;
    font-size: 12px;
    margin-left: 4px;
}

.wccg-stock-in {
    color: #27ae60;
    font-weight: 600;
}

.wccg-stock-out {
    color: #e74c3c;
    font-weight: 600;
}

.wccg-compare-cart-btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--wccg-primary-color) !important;
    color: #fff !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: none;
    white-space: nowrap;
}

.wccg-compare-cart-btn:hover {
    opacity: 0.85;
}

.wccg-compare-remove-col {
    background: none;
    border: none;
    color: #999;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 12px;
    transition: color 0.3s;
}

.wccg-compare-remove-col:hover {
    color: #e74c3c;
}

/* ====================================================
   Out of Stock Badge (Shared)
==================================================== */
.wccg-out-of-stock-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e74c3c;
    color: #fff;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 3px;
    z-index: 10;
    letter-spacing: 0.5px;
}

/* ====================================================
   MOBILE UX ENHANCEMENTS
==================================================== */

/* Touch devices: Show action icons always (no hover needed) */
@media (hover: none) {
    .wccg-floating-actions {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    .wccg-inside-add-to-cart {
        transform: translateY(0) !important;
    }

    .wccg-xstore-hover-actions {
        bottom: 0 !important;
        opacity: 1 !important;
    }

    .wccg-fade-in-block {
        display: none; /* Hide hover-only excerpt on touch */
    }
}

/* Bottom-sheet Quick View on mobile */
@media (max-width: 768px) {
    .wccg-quick-view-modal {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-width: 100%;
        width: 100%;
        min-height: auto;
        max-height: 85vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.4s var(--wccg-transition-cubic);
    }

    .wccg-quick-view-backdrop.wccg-modal-active .wccg-quick-view-modal {
        transform: translateY(0);
    }

    .wccg-quick-view-backdrop {
        align-items: flex-end;
    }

    /* Drag handle */
    .wccg-quick-view-modal::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #ccc;
        border-radius: 2px;
        margin: 12px auto 8px;
    }

    /* Compare modal also bottom-sheet */
    .wccg-compare-modal {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-width: 100%;
        width: 100%;
        max-height: 85vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }

    .wccg-compare-backdrop.wccg-modal-active .wccg-compare-modal {
        transform: translateY(0);
    }

    .wccg-compare-backdrop {
        align-items: flex-end;
    }

    .wccg-compare-modal::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #ccc;
        border-radius: 2px;
        margin: 12px auto 8px;
    }

    /* Compact compare bar */
    .wccg-compare-bar-inner {
        padding: 10px 16px;
    }

    .wccg-compare-bar-item img {
        width: 44px;
        height: 44px;
    }

    .wccg-compare-now-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* Keep single-column only on very small phones for standard product grids */
@media (max-width: 480px) {
    .wccg-products-grid { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; grid-gap: 10px; }

    /* Ensure Minimal cards stack vertically on very small screens */
    .wccg-style-minimal .wccg-minimal-inner {
        flex-direction: column;
    }
    .wccg-style-minimal .wccg-minimal-image {
        flex: none;
        max-width: 100%;
    }

    /* Smaller action buttons for compact grids */
    .wccg-action-btn {
        width: 34px;
        height: 34px;
    }
    .wccg-catalog-action-icon {
        width: 34px;
        height: 34px;
    }
    /* Scale down sidebar triggers on mobile */
    .wccg-side-triggers .wccg-side-trigger {
        width: 38px !important;
        height: 38px !important;
        border-radius: 6px 0 0 6px !important;
    }
    .wccg-side-triggers .wccg-side-trigger svg {
        width: 18px;
        height: 18px;
    }
    .wccg-side-triggers .wccg-side-trigger:hover {
        width: 42px !important;
    }
    .wccg-count-badge {
        min-width: 16px;
        height: 16px;
        font-size: 9px;
    }
}

/* Minimum 44px tap targets for accessibility */
@media (pointer: coarse) {
    .wccg-action-btn,
    .wccg-catalog-action-icon,
    .wccg-compare-bar-remove,
    .wccg-qv-close,
    .wccg-compare-modal-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ====================================================
   SIDEBAR DRAWER (FAVORITES & HISTORY)
   ==================================================== */
.wccg-side-triggers {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Hidden by default to prevent flashing; JS will show if not empty */
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    z-index: 9999;
}

.wccg-side-triggers .wccg-side-trigger {
    background: var(--wccg-bg);
    color: var(--wccg-icon-color);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.wccg-side-triggers .wccg-side-trigger:hover {
    width: 52px;
    background: var(--wccg-primary-color);
    color: #fff;
}


.wccg-count-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Base side drawer styles */
.wccg-side-drawer-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    backdrop-filter: blur(2px);
}

.wccg-side-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 85%;
    height: 100%;
    background: var(--wccg-bg);
    z-index: 10001;
    box-shadow: -5px 0 30px rgba(0,0,0,0.15);
    transform: translateX(110%);
    transition: transform 0.4s var(--wccg-transition-cubic);
    will-change: transform;
    display: flex;
    flex-direction: column;
}

.wccg-drawer-active .wccg-side-drawer-backdrop {
    opacity: 1;
    visibility: visible;
}

.wccg-drawer-active .wccg-side-drawer {
    transform: translateX(0);
}

.wccg-drawer-header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wccg-drawer-tabs {
    display: flex;
    gap: 15px;
}

.wccg-drawer-tab {
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 700;
    color: var(--wccg-text-muted);
    cursor: pointer;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s;
}

.wccg-drawer-tab.active {
    color: var(--wccg-primary-color);
}

.wccg-drawer-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--wccg-primary-color);
}

.wccg-drawer-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    transition: color 0.3s;
}

.wccg-drawer-close:hover {
    color: #000;
}

.wccg-drawer-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
}

/* Body scroll lock when drawer is open */
body.wccg-drawer-active {
    overflow: hidden;
}

.wccg-drawer-item {
    display: flex;
    gap: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #f7f7f7;
    animation: wccg-fade-in 0.4s ease forwards;
}

.wccg-drawer-item-img {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.wccg-drawer-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.wccg-drawer-item-info {
    flex: 1;
}

.wccg-drawer-item-title {
    font-size: 14px;
    margin: 0 0 5px;
}

.wccg-drawer-item-title a {
    text-decoration: none;
    color: var(--wccg-title-color);
}

.wccg-drawer-item-price {
    display: block;
    color: var(--wccg-price-color);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 8px;
}

.wccg-drawer-item-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.wccg-drawer-item-atc {
    font-size: 11px !important;
    padding: 4px 10px !important;
    background: var(--wccg-primary-color) !important;
    color: #fff !important;
    border-radius: 4px !important;
    text-decoration: none;
}

.wccg-drawer-item-remove {
    background: none;
    border: none;
    font-size: 11px;
    color: #999;
    cursor: pointer;
    text-decoration: underline;
}

.wccg-drawer-empty {
    text-align: center;
    padding: 50px 20px;
    color: #999;
}

.wccg-drawer-footer {
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
}

.wccg-drawer-clear {
    background: var(--wccg-bg);
    border: 1px solid var(--wccg-border-color);
    padding: 8px 20px;
    border-radius: var(--wccg-border-radius, 10px);
    cursor: pointer;
    font-size: 13px;
    color: var(--wccg-text-color);
    transition: all var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-drawer-clear:hover {
    background: var(--wccg-btn-hover);
    color: var(--wccg-primary-color);
    border-color: var(--wccg-primary-color);
}

.wccg-drawer-loader {
    display: flex;
    justify-content: center;
    padding: 50px 0;
}


/* ====================================================
   CATEGORIES: Harmony Upgrades (Boxed + Rounded)
==================================================== */
.wccg-cat-card, .wccg-cat-minimal {
    transition: all 0.3s var(--wccg-transition-cubic);
    background: var(--wccg-bg) !important;
    border-radius: var(--wccg-border-radius, 10px) !important;
    border: 1px solid #f0f0f0 !important;
    overflow: hidden !important;
    padding: 15px !important; /* Boxed inset — applied here so the image div fills correctly */
    display: flex;
    flex-direction: column;
    box-sizing: border-box !important;
}

.wccg-cat-card .wccg-cat-card-image, 
.wccg-cat-minimal .wccg-cat-minimal-image {
    margin: 0; /* Inset now handled by padding on the parent card */
    width: 100%;
    border-radius: calc(var(--wccg-border-radius, 10px) - 4px);
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1/1;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .wccg-cat-card,
    .wccg-cat-minimal {
        padding: 10px !important;
    }
    .wccg-cat-card .wccg-cat-card-image, 
    .wccg-cat-minimal .wccg-cat-minimal-image {
        margin: 0;
    }
}

.wccg-cat-card-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.wccg-cat-card-name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.wccg-cat-card-count {
    font-size: 12px;
    opacity: 0.8;
}

/* ====================================================
   STANDALONE PAGES: Wishlist & Compare
==================================================== */
.wccg-compare-page-wrapper {
    padding: 40px 0;
}

.wccg-compare-table-container {
    background: #fff;
    border-radius: var(--wccg-border-radius, 12px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    overflow-x: auto;
    position: relative;
    min-height: 300px;
}

.wccg-compare-table {
    width: 100%;
    border-collapse: collapse;
}

.wccg-compare-table th, .wccg-compare-table td {
    padding: 20px;
    border: 1px solid #f0f0f0 !important;
    text-align: center;
    min-width: 250px;
}

.wccg-compare-label {
    background: #fbfbfb !important;
    font-weight: 700;
    text-align: left !important;
    width: 200px;
    min-width: 200px !important;
    color: #666;
}

.wccg-compare-product-img {
    max-width: 150px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.wccg-compare-product-name {
    font-weight: 700;
    color: var(--wccg-primary-color);
    text-decoration: none;
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}

.wccg-compare-remove-col {
    background: #fff;
    border: 1px solid #eee;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 11px;
    color: #999;
    cursor: pointer;
    transition: all 0.3s;
}

.wccg-compare-remove-col:hover {
    background: #ff4d4d;
    color: #fff;
    border-color: #ff4d4d;
}

.wccg-compare-table-loader {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* ====================================================
   Add to Cart Micro-Interactions
==================================================== */
.wccg-atc-loading {
    opacity: 0.7 !important;
    pointer-events: none;
}

.wccg-atc-success {
    background-color: var(--wccg-badge-bg, #83b735) !important;
    color: white !important;
    border-color: var(--wccg-badge-bg, #83b735) !important;
    transition: all 0.3s ease;
}

/* Icon Buttons (Base/XStore style) */
.wccg-action-btn.wccg-atc-success svg {
    display: none !important;
}
.wccg-action-btn.wccg-atc-success::after {
    content: '';
    display: block !important;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Text Buttons (Catalog/Minimal style) */
.wccg-add-btn a.wccg-atc-success,
.wccg-catalog-action-bar .wccg-atc-btn.wccg-atc-success {
    font-size: 0 !important; 
    position: relative;
    pointer-events: none;
}

.wccg-add-btn a.wccg-atc-success::after,
.wccg-catalog-action-bar .wccg-atc-btn.wccg-atc-success::after {
    content: 'Added!';
    font-size: 13px !important; 
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    color: #fff !important;
}

.wccg-add-btn a.wccg-atc-success::before,
.wccg-catalog-action-bar .wccg-atc-btn.wccg-atc-success::before {
    content: '';
    display: inline-block !important;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 4px;
}

/* ====================================================
   Premium Product Swiper
==================================================== */
.wccg-hero-swiper {
    position: relative;
    border-radius: var(--wccg-border-radius, 10px);
    overflow: hidden;
    background: var(--wccg-bg);
}

.wccg-hero-slide-inner {
    display: flex;
    align-items: stretch;
    min-height: 400px;
    background: #fdfdfd;
}

.wccg-hero-content {
    flex: 1;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    position: relative;
    background: inherit;
}

.wccg-hero-image {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.wccg-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

/* Animations Base States */
.wccg-hero-swiper.wccg-hero-swiper-ready .wccg-hero-title,
.wccg-hero-swiper.wccg-hero-swiper-ready .wccg-hero-desc,
.wccg-hero-swiper.wccg-hero-swiper-ready .wccg-hero-btn {
    opacity: 0;
}

.wccg-hero-title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--wccg-title-color);
}

.wccg-hero-desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--wccg-text-color);
    margin-bottom: 30px;
}

.wccg-hero-btn {
    align-self: flex-start;
    padding: 15px 35px;
    background: var(--wccg-primary-color) !important;
    color: #fff !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background 0.3s, transform 0.3s !important;
    border: none;
}

.wccg-hero-btn:hover {
    background: var(--wccg-primary-hover) !important;
    transform: translateY(-2px);
}

.wccg-hero-swiper .wccg-hero-prev,
.wccg-hero-swiper .wccg-hero-next {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(31,31,31,0.08) !important;
    background: rgba(255,255,255,0.92) !important;
    color: var(--wccg-primary-color, #1f1f1f) !important;
    box-shadow: 0 14px 34px rgba(17,24,39,0.14);
    backdrop-filter: blur(12px);
    opacity: 1 !important;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.wccg-hero-swiper .wccg-hero-prev {
    left: auto !important;
    right: 82px !important;
}

.wccg-hero-swiper .wccg-hero-next {
    right: 18px !important;
}

.wccg-hero-swiper .wccg-hero-prev::after,
.wccg-hero-swiper .wccg-hero-next::after {
    display: none !important;
}

.wccg-hero-swiper .wccg-hero-prev::before,
.wccg-hero-swiper .wccg-hero-next::before {
    content: "";
    width: 9px;
    height: 9px;
    display: block;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.wccg-hero-swiper .wccg-hero-prev::before {
    transform: rotate(-135deg);
    margin-left: 4px;
}

.wccg-hero-swiper .wccg-hero-next::before {
    transform: rotate(45deg);
    margin-right: 4px;
}

.wccg-hero-swiper .wccg-hero-prev:hover,
.wccg-hero-swiper .wccg-hero-next:hover {
    transform: scale(1.04) !important;
    background: var(--wccg-primary-color, #1f1f1f) !important;
    border-color: var(--wccg-primary-color, #1f1f1f) !important;
    color: #fff !important;
}

.wccg-hero-swiper .wccg-hero-pagination {
    bottom: 18px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wccg-hero-swiper .wccg-hero-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 !important;
    border-radius: 999px;
    background: rgba(31,31,31,0.24);
    opacity: 1;
    transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.wccg-hero-swiper .wccg-hero-pagination .swiper-pagination-bullet-active {
    width: 24px;
    background: var(--wccg-primary-color, #1f1f1f);
}

/* Image Base State */
.wccg-hero-image img {
    transform: scale(1);
    transition: transform 6s ease-out; /* Long slow zoom */
}

/* 1. Fade Up (Staggered) */
.wccg-hero-anim-fade_up .wccg-hero-title,
.wccg-hero-anim-fade_up .wccg-hero-desc,
.wccg-hero-anim-fade_up .wccg-hero-btn {
    transform: translateY(30px);
    transition: opacity 0.8s var(--wccg-transition-cubic), transform 0.8s var(--wccg-transition-cubic);
}

.wccg-hero-anim-fade_up .swiper-slide.is-animated .wccg-hero-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.18s;
}

.wccg-hero-anim-fade_up .swiper-slide.is-animated .wccg-hero-desc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.34s;
}

.wccg-hero-anim-fade_up .swiper-slide.is-animated .wccg-hero-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

/* 2. Diagonal Slide (Right-to-Left + Slow Up) */
.wccg-hero-anim-diagonal .wccg-hero-title,
.wccg-hero-anim-diagonal .wccg-hero-desc,
.wccg-hero-anim-diagonal .wccg-hero-btn {
    transform: translate(80px, 40px);
}

.wccg-hero-anim-diagonal .swiper-slide.is-animated .wccg-hero-title {
    animation: wccgSlideDiagonal 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.18s;
}

.wccg-hero-anim-diagonal .swiper-slide.is-animated .wccg-hero-desc {
    animation: wccgSlideDiagonal 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.34s;
}

.wccg-hero-anim-diagonal .swiper-slide.is-animated .wccg-hero-btn {
    animation: wccgSlideDiagonal 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.5s;
}

@keyframes wccgSlideDiagonal {
    0% {
        opacity: 0;
        transform: translate(80px, 40px);
    }
    60% {
        opacity: 1;
        transform: translate(0, 16px);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/* 3. Blur In (Cinematic Focus) */
.wccg-hero-anim-blur_in .wccg-hero-title,
.wccg-hero-anim-blur_in .wccg-hero-desc,
.wccg-hero-anim-blur_in .wccg-hero-btn {
    transform: scale(1.1);
    filter: blur(10px);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wccg-hero-anim-blur_in .swiper-slide.is-animated .wccg-hero-title {
    opacity: 1; transform: scale(1); filter: blur(0); transition-delay: 0.18s;
}
.wccg-hero-anim-blur_in .swiper-slide.is-animated .wccg-hero-desc {
    opacity: 1; transform: scale(1); filter: blur(0); transition-delay: 0.34s;
}
.wccg-hero-anim-blur_in .swiper-slide.is-animated .wccg-hero-btn {
    opacity: 1; transform: scale(1); filter: blur(0); transition-delay: 0.5s;
}

/* 4. Curtain Reveal (Masked) */
.wccg-hero-anim-curtain .wccg-hero-title,
.wccg-hero-anim-curtain .wccg-hero-desc,
.wccg-hero-anim-curtain .wccg-hero-btn {
    transform: translateY(60px);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), clip-path 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}

.wccg-hero-anim-curtain .swiper-slide.is-animated .wccg-hero-title {
    opacity: 1; transform: translateY(0); clip-path: inset(-20% -20% -20% -20%); transition-delay: 0.18s;
}
.wccg-hero-anim-curtain .swiper-slide.is-animated .wccg-hero-desc {
    opacity: 1; transform: translateY(0); clip-path: inset(-20% -20% -20% -20%); transition-delay: 0.34s;
}
.wccg-hero-anim-curtain .swiper-slide.is-animated .wccg-hero-btn {
    opacity: 1; transform: translateY(0); clip-path: inset(-20% -20% -20% -20%); transition-delay: 0.5s;
}

/* 5. 3D Flip (Perspective) */
.wccg-hero-anim-flip_3d .swiper-wrapper {
    perspective: 1000px;
}
.wccg-hero-anim-flip_3d .wccg-hero-title,
.wccg-hero-anim-flip_3d .wccg-hero-desc,
.wccg-hero-anim-flip_3d .wccg-hero-btn {
    transform: rotateX(-90deg);
    transform-origin: bottom center;
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
}

.wccg-hero-anim-flip_3d .swiper-slide.is-animated .wccg-hero-title {
    opacity: 1; transform: rotateX(0deg); transition-delay: 0.18s;
}
.wccg-hero-anim-flip_3d .swiper-slide.is-animated .wccg-hero-desc {
    opacity: 1; transform: rotateX(0deg); transition-delay: 0.34s;
}
.wccg-hero-anim-flip_3d .swiper-slide.is-animated .wccg-hero-btn {
    opacity: 1; transform: rotateX(0deg); transition-delay: 0.5s;
}

/* 6. Elastic Bounce */
.wccg-hero-anim-elastic .wccg-hero-title,
.wccg-hero-anim-elastic .wccg-hero-desc,
.wccg-hero-anim-elastic .wccg-hero-btn {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.6s ease;
}

.wccg-hero-anim-elastic .swiper-slide.is-animated .wccg-hero-title {
    opacity: 1; transform: translateY(0); transition-delay: 0.18s;
}
.wccg-hero-anim-elastic .swiper-slide.is-animated .wccg-hero-desc {
    opacity: 1; transform: translateY(0); transition-delay: 0.34s;
}
.wccg-hero-anim-elastic .swiper-slide.is-animated .wccg-hero-btn {
    opacity: 1; transform: translateY(0); transition-delay: 0.5s;
}

/* 7. Scale Down (Zoom Out) */
.wccg-hero-anim-scale_down .wccg-hero-title,
.wccg-hero-anim-scale_down .wccg-hero-desc,
.wccg-hero-anim-scale_down .wccg-hero-btn {
    transform: scale(1.2);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
}

.wccg-hero-anim-scale_down .swiper-slide.is-animated .wccg-hero-title {
    opacity: 1; transform: scale(1); transition-delay: 0.18s;
}
.wccg-hero-anim-scale_down .swiper-slide.is-animated .wccg-hero-desc {
    opacity: 1; transform: scale(1); transition-delay: 0.34s;
}
.wccg-hero-anim-scale_down .swiper-slide.is-animated .wccg-hero-btn {
    opacity: 1; transform: scale(1); transition-delay: 0.5s;
}

/* Alternate Direction Zooming "In-Space" */
/* Odd Slides zoom and pan left slightly */
.swiper-slide:nth-child(odd).is-animated .wccg-hero-image img {
    transform: scale(1.15) translateX(-2%);
}

/* Even Slides zoom and pan right slightly */
.swiper-slide:nth-child(even).is-animated .wccg-hero-image img {
    transform: scale(1.15) translateX(2%);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .wccg-hero-slide-inner {
        flex-direction: column-reverse;
    }
    
    .wccg-hero-image {
        min-height: 250px;
        flex: none;
    }
    
    .wccg-hero-content {
        padding: 30px 20px;
        flex: none;
    }
    
    .wccg-hero-title {
        font-size: 28px;
    }
}

/* ====================================================
   MEGA MENU DRAWER STYLES
   ==================================================== */
.wccg-mega-drawer-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.wccg-mega-drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 1025px) {
    body.wccg-mega-drawer-present {
        padding-left: 70px !important;
        transition: padding-left 0.3s cubic-bezier(0.25, 1, 0.5, 1), padding-right 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }
    body.wccg-mega-drawer-present.wccg-mega-drawer-rtl {
        padding-left: 0 !important;
        padding-right: 70px !important;
    }
}

.wccg-mega-drawer {
    --wccg-mega-icon-rail-width: 70px;
    --wccg-mega-sidebar-collapsed-width: var(--wccg-mega-icon-rail-width);
    --wccg-mega-sidebar-expanded-width: calc(280px + var(--wccg-mega-sidebar-padding-left, 10px) + var(--wccg-mega-sidebar-padding-right, 10px));
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: var(--wccg-mega-sidebar-collapsed-width);
    background: var(--wccg-drawer-bg, #fff);
    z-index: 100001;
    box-shadow: 8px 0 24px rgba(0,0,0,0.05);
    transition: width var(--wccg-transition-duration) var(--wccg-transition-cubic), transform var(--wccg-transition-duration) var(--wccg-transition-cubic), box-shadow var(--wccg-transition-duration) var(--wccg-transition-cubic);
    will-change: width, transform;
    overflow: visible;
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(0,0,0,0.06);
}

/* RTL Support */
.wccg-mega-drawer[dir="ltr"] { left: 0; }
.wccg-mega-drawer[dir="rtl"] { 
    right: 0; 
    box-shadow: -8px 0 24px rgba(0,0,0,0.05);
    border-right: none;
    border-left: 1px solid rgba(0,0,0,0.05);
    border-radius: 0;
}

.wccg-mega-drawer-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    gap: 3px;
    box-sizing: border-box;
}

/* Scrollbar styles for the drawer */
.wccg-mega-drawer-nav::-webkit-scrollbar {
    width: 4px;
}
.wccg-mega-drawer-nav::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 4px;
}

.wccg-mega-hamburger {
    padding: 16px var(--wccg-mega-sidebar-padding-right, 10px) 16px var(--wccg-mega-sidebar-padding-left, 10px);
    display: flex;
    justify-content: flex-start;
    flex-shrink: 0; /* Don't squish */
    height: 82px;
    box-sizing: border-box;
}
.wccg-mega-drawer[dir="rtl"] .wccg-mega-hamburger {
    justify-content: flex-end;
}
.wccg-mega-hamburger .wccg-mega-link {
    background: var(--wccg-pill-bg);
    color: var(--wccg-pill-text);
    border-radius: 999px;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: width var(--wccg-transition-duration) var(--wccg-transition-cubic), max-width var(--wccg-transition-duration) var(--wccg-transition-cubic), background var(--wccg-transition-duration) var(--wccg-transition-cubic), color var(--wccg-transition-duration) var(--wccg-transition-cubic);
    overflow: hidden !important; 
    z-index: 10;
}
.wccg-mega-drawer.expanded .wccg-mega-hamburger .wccg-mega-link {
    width: 100%;
    max-width: 100%;
}
.wccg-mega-drawer:hover .wccg-mega-hamburger .wccg-mega-link {
    width: 100%;
    max-width: 100%;
}
.wccg-mega-hamburger:hover .wccg-mega-link {
    background: var(--wccg-primary-color);
    color: #fff;
}
.wccg-mega-hamburger .wccg-mega-icon {
    flex: 0 0 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wccg-mega-hamburger .wccg-mega-text {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-left: 0;
    line-height: 1;
}

.wccg-mega-item {
    position: relative;
    width: 100%;
}

.wccg-mega-link {
    display: flex;
    align-items: center;
    padding: 0;
    height: 48px;
    min-height: 48px;
    color: var(--wccg-drawer-text);
    text-decoration: none;
    transition: background var(--wccg-transition-duration) var(--wccg-transition-cubic), color var(--wccg-transition-duration) var(--wccg-transition-cubic);
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
}

.wccg-mega-drawer:not(.expanded) .wccg-mega-item:not(.wccg-mega-hamburger) .wccg-mega-link {
    width: 100%;
}

.wccg-mega-link:hover {
    background: rgba(31, 31, 31, 0.055);
    color: var(--wccg-primary-color);
}

.wccg-mega-icon {
    flex: 0 0 var(--wccg-mega-icon-rail-width);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    line-height: 1;
}

.wccg-mega-drawer:not(:hover):not(.expanded):not(.mobile-active) .wccg-mega-item:not(.wccg-mega-hamburger) .wccg-mega-text,
.wccg-mega-drawer:not(:hover):not(.expanded):not(.mobile-active) .wccg-mega-item:not(.wccg-mega-hamburger) .wccg-mega-arrow {
    display: none;
}

.wccg-mega-icon svg, .wccg-cat-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.wccg-mega-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding-left: var(--wccg-mega-sidebar-padding-left, 10px);
    padding-right: var(--wccg-mega-sidebar-padding-right, 10px);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity var(--wccg-transition-duration) var(--wccg-transition-cubic), transform var(--wccg-transition-duration) var(--wccg-transition-cubic);
}
.wccg-mega-drawer[dir="rtl"] .wccg-mega-text {
    transform: translateX(10px);
}

/* Drawer Hover State */
.wccg-mega-drawer.expanded {
    width: var(--wccg-mega-sidebar-expanded-width);
}
.wccg-mega-drawer:hover,
.wccg-mega-drawer.expanded {
    width: var(--wccg-mega-sidebar-expanded-width);
}
.wccg-mega-drawer:hover .wccg-mega-text,
.wccg-mega-drawer.expanded .wccg-mega-text {
    opacity: 1;
    transform: translateX(0);
}

.wccg-mega-arrow {
    margin-left: auto;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity var(--wccg-transition-duration) var(--wccg-transition-cubic), transform var(--wccg-transition-duration) var(--wccg-transition-cubic), color var(--wccg-transition-duration) var(--wccg-transition-cubic);
    color: var(--wccg-drawer-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    height: 24px;
    line-height: 1;
    position: relative;
    z-index: 2;
}
.wccg-mega-drawer:hover .wccg-mega-arrow,
.wccg-mega-drawer.expanded .wccg-mega-arrow {
    opacity: 1;
    transform: translateX(0);
    display: flex;
}
.wccg-mega-item:hover .wccg-mega-arrow {
    color: var(--wccg-primary-color);
    transform: translateX(5px);
}

.wccg-mega-drawer[dir="rtl"] .wccg-mega-arrow {
    margin-left: 0;
    margin-right: auto;
    transform: rotate(180deg) translateX(-10px);
}
.wccg-mega-drawer[dir="rtl"].expanded .wccg-mega-arrow {
    transform: rotate(180deg) translateX(0);
}
.wccg-mega-drawer[dir="rtl"] .wccg-mega-item:hover .wccg-mega-arrow {
    transform: rotate(180deg) translateX(5px);
}

/* Mega Panel */
.wccg-mega-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: min(540px, calc(100vw - var(--wccg-mega-sidebar-expanded-width) - 24px));
    background: var(--wccg-drawer-bg, #fff);
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s var(--wccg-transition-cubic), visibility 0.18s var(--wccg-transition-cubic), left var(--wccg-transition-duration) var(--wccg-transition-cubic), right var(--wccg-transition-duration) var(--wccg-transition-cubic);
    pointer-events: none;
    z-index: 100000;
    border-radius: 0;
    border-left: 1px solid rgba(17,17,17,0.04);
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    box-sizing: border-box;
}

.wccg-mega-drawer[dir="ltr"] .wccg-mega-panel { left: var(--wccg-mega-sidebar-collapsed-width); }
.wccg-mega-drawer[dir="ltr"]:hover .wccg-mega-panel,
.wccg-mega-drawer[dir="ltr"].expanded .wccg-mega-panel { left: var(--wccg-mega-sidebar-expanded-width); }

.wccg-mega-drawer[dir="rtl"] .wccg-mega-panel { right: var(--wccg-mega-sidebar-collapsed-width); background: var(--wccg-drawer-bg, #fff); box-shadow: none; border-left: none; border-right: 1px solid rgba(17,17,17,0.04); border-radius: 0; }
.wccg-mega-drawer[dir="rtl"]:hover .wccg-mega-panel,
.wccg-mega-drawer[dir="rtl"].expanded .wccg-mega-panel { right: var(--wccg-mega-sidebar-expanded-width); }

.wccg-mega-drawer.panels-ready .wccg-mega-item:hover .wccg-mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s; /* Open instantly */
}

.wccg-mega-drawer:hover .wccg-mega-item:hover .wccg-mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0.16s;
}

/* When moving between items, prevent the panel from disappearing too fast */
.wccg-mega-item .wccg-mega-panel {
    transition-delay: 0.08s;
}

/* BUT if the drawer itself is no longer hovered, hide the panels instantly! */
.wccg-mega-drawer:not(:hover) .wccg-mega-panel {
    transition-delay: 0s !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Keep the drawer and mega panel below the admin bar. */
.admin-bar .wccg-mega-drawer,
.admin-bar .wccg-mega-panel {
    top: 32px;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar .wccg-mega-drawer,
    .admin-bar .wccg-mega-panel {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }
}

.wccg-mega-panel-inner {
    display: flex;
    flex-direction: column;
    padding: 12px 28px 28px;
    gap: 24px;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 0 var(--wccg-border-radius, 10px) var(--wccg-border-radius, 10px) 0;
}

.wccg-mega-drawer[dir="rtl"] .wccg-mega-panel-inner {
    border-radius: var(--wccg-border-radius, 10px) 0 0 var(--wccg-border-radius, 10px);
}

/* Make sure the scrollbar is clean */
.wccg-mega-panel-inner::-webkit-scrollbar {
    width: 6px;
}
.wccg-mega-panel-inner::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}

.wccg-mega-col-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wccg-title-color);
}

.wccg-mega-col-subs { flex: 1; }
.wccg-mega-col-subs ul { list-style: none; padding: 0; margin: 0; column-count: 2; column-gap: 30px; }
.wccg-mega-col-subs li { margin-bottom: 10px; break-inside: avoid; }
.wccg-mega-col-subs a { color: var(--wccg-text-color); text-decoration: none; transition: color var(--wccg-transition-duration) var(--wccg-transition-cubic); font-size: 14px; }
.wccg-mega-col-subs a:hover { color: var(--wccg-primary-color); }

.wccg-mega-col-prods { 
    flex: none; 
    width: 100%;
}
.wccg-mega-prods-section {
    position: relative;
    width: 100%;
}
.wccg-mega-products-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 12px;
    box-sizing: border-box;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.22) transparent;
}
.wccg-mega-products-scroll::-webkit-scrollbar {
    height: 6px;
}
.wccg-mega-products-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.wccg-mega-products-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 999px;
}

.wccg-mega-prod-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 0 0 160px;
    width: 160px;
    max-width: 160px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    background: #faf9f7;
    padding: 9px;
    border: 1px solid rgba(0,0,0,0.045);
    border-radius: 10px;
    scroll-snap-align: start;
    transition: transform var(--wccg-transition-duration) var(--wccg-transition-cubic), box-shadow var(--wccg-transition-duration) var(--wccg-transition-cubic), border-color var(--wccg-transition-duration) var(--wccg-transition-cubic);
}
.wccg-mega-prod-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0,0,0,0.08);
    box-shadow: var(--wccg-soft-shadow);
}
.wccg-mega-prod-img { width: 100%; height: 120px; border-radius: 8px; overflow: hidden; background: #f4f2ee; }
.wccg-mega-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.wccg-mega-prod-info { text-align: center; }
.wccg-mega-prod-info h4 { margin: 0 0 5px 0; font-size: 12.5px; font-weight: 600; color: var(--wccg-title-color); line-height: 1.35; }
.wccg-mega-prod-info .price { font-weight: 650; color: var(--wccg-primary-color); font-size: 13px; }
.wccg-mega-col-banner { flex: none; display: block; }
.wccg-mega-banner {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.wccg-mega-banner img { width: 100%; height: 100%; object-fit: cover; }
.wccg-mega-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.64) 0%, rgba(0,0,0,0.14) 62%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
    color: #fff;
    pointer-events: none;
}
.wccg-mega-banner-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff !important;
}
.wccg-mega-banner-btn {
    align-self: flex-start;
    background: var(--wccg-primary-color);
    color: #fff !important;
    padding: 8px 18px;
    border-radius: 40px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: transform var(--wccg-transition-duration) var(--wccg-transition-cubic), background var(--wccg-transition-duration) var(--wccg-transition-cubic), color var(--wccg-transition-duration) var(--wccg-transition-cubic);
    pointer-events: auto;
}
.wccg-mega-banner-btn:hover {
    transform: translateY(-1px);
    background: #fff;
    color: #000 !important;
}

/* Mobile Drawer (Hidden off-canvas) */
@media (max-width: 1024px) {
    .wccg-mega-drawer {
        width: min(var(--wccg-mega-sidebar-expanded-width), 92vw);
        transform: translateX(-100%); /* hidden by default */
        box-shadow: none;
    }
    .wccg-mega-link,
    .wccg-mega-drawer.expanded .wccg-mega-hamburger .wccg-mega-link {
        width: 100%;
    }
    .wccg-mega-drawer[dir="ltr"] { transform: translateX(-100%); left: 0; }
    .wccg-mega-drawer[dir="rtl"] { transform: translateX(100%); right: 0; }

    .wccg-mega-drawer.mobile-active[dir="ltr"] { transform: translateX(0); box-shadow: 2px 0 15px rgba(0,0,0,0.1); }
    .wccg-mega-drawer.mobile-active[dir="rtl"] { transform: translateX(0); box-shadow: -2px 0 15px rgba(0,0,0,0.1); }

    .wccg-mega-text { opacity: 1; transform: translateX(0); }
    .wccg-mega-panel { display: none !important; /* No mega panels on mobile */ }
}

/* ====================================================
   PRODUCT GRID STYLES: PUSH UP & EXPAND
   ==================================================== */

/* --- PUSH UP --- */
.wccg-style-pushup {
    overflow: hidden !important;
}
.wccg-style-pushup .wccg-product-element-bottom {
    position: relative;
    background: var(--wccg-bg);
    z-index: 10;
    padding-bottom: 0;
}
.wccg-style-pushup .wccg-product-info-wrap {
    background: var(--wccg-bg);
    transition: transform var(--wccg-transition-duration) var(--wccg-transition-cubic);
    padding: 15px;
}
.wccg-style-pushup .wccg-pushup-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 15px 15px 15px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform var(--wccg-transition-duration) var(--wccg-transition-cubic), opacity var(--wccg-transition-duration);
}

/* Hover State */
@media (hover: hover) {
    .wccg-style-pushup:hover .wccg-product-info-wrap {
        transform: translateY(-40px); /* Push up over the image */
    }
    .wccg-style-pushup:hover .wccg-pushup-actions {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- EXPAND --- */
.wccg-style-expand {
    position: relative;
    overflow: visible !important; /* Required to allow expanding out of bounds */
}
.wccg-style-expand .wccg-product-element-top {
    position: relative;
    z-index: 1;
}
.wccg-style-expand .wccg-product-element-bottom {
    background: var(--wccg-bg);
    position: absolute; /* Take out of flow on hover */
    left: 0; right: 0; top: 100%;
    padding: 15px;
    z-index: 20;
    transition: box-shadow var(--wccg-transition-duration) ease;
    border-radius: 0 0 var(--wccg-border-radius) var(--wccg-border-radius);
}
.wccg-style-expand .wccg-expand-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--wccg-transition-duration) var(--wccg-transition-cubic), opacity var(--wccg-transition-duration);
}
.wccg-style-expand .wccg-expand-desc {
    font-size: 13px;
    color: var(--wccg-cat-color);
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Hover State */
@media (hover: hover) {
    .wccg-style-expand:hover {
        z-index: 30; /* Bring to front */
    }
    .wccg-style-expand:hover .wccg-product-element-bottom {
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .wccg-style-expand:hover .wccg-expand-content {
        max-height: 200px;
        opacity: 1;
    }
}

/* Mobile Resets for Hover Effects */
@media (max-width: 1024px) {
    /* Push Up acts static on mobile */
    .wccg-style-pushup .wccg-pushup-actions {
        position: relative;
        transform: none;
        opacity: 1;
        padding: 10px 0 0 0;
    }
    
    /* Expand acts static on mobile */
    .wccg-style-expand .wccg-product-element-bottom {
        position: relative;
        top: auto;
    }
    .wccg-style-expand .wccg-expand-content {
        max-height: none;
        opacity: 1;
        overflow: visible;
    }
    .wccg-style-expand .wccg-expand-desc {
        display: none; /* Hide description on mobile to save space */
    }
}

/* ====================================================
   CATEGORY GRID STYLES: LIST
   ==================================================== */
.wccg-cat-style-list {
    display: flex;
    gap: 20px;
    background: #fff;
    border-radius: var(--wccg-border-radius);
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
    height: 100%;
    align-items: center;
}
.wccg-cat-list-left {
    flex: 0 0 112px;
    width: 112px;
    height: 112px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #f7f7f7;
}
.wccg-cat-list-img-link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.wccg-cat-list-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wccg-cat-list-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.wccg-cat-list-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 700;
}
.wccg-cat-list-title a {
    color: var(--wccg-title-color);
    text-decoration: none;
    transition: color 0.2s;
}
.wccg-cat-list-title a:hover {
    color: var(--wccg-primary-color);
}
.wccg-cat-list-children {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wccg-cat-list-children li a {
    color: var(--wccg-cat-color);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}
.wccg-cat-list-children li a:hover {
    color: var(--wccg-primary-color);
}

@media (max-width: 480px) {
    .wccg-cat-style-list {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .wccg-cat-list-left {
        width: 120px;
        flex: 0 0 120px;
        height: 120px;
    }
}

.wccg-categories-grid .wccg-cat-circle,
.wccg-swiper .wccg-cat-circle,
.wccg-products-grid .wccg-cat-circle {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.wccg-categories-grid .wccg-cat-circle-link,
.wccg-swiper .wccg-cat-circle-link,
.wccg-products-grid .wccg-cat-circle-link {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ====================================================
   SLIDING MARQUEE
   ==================================================== */
.wccg-marquee-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    user-select: none;
    background: var(--wccg-primary-color);
    color: #fff;
    padding: 12px 0;
    font-family: var(--theme-font-family, inherit);
}

.wccg-marquee-viewport {
    display: flex;
    overflow: hidden;
    gap: var(--marquee-gap, 50px);
}

.wccg-marquee-is-top {
    position: relative;
    z-index: 10000;
    margin: 0;
    width: 100%;
}

.wccg-marquee-theme-colors {
    background: var(--theme-palette-color-1, var(--wccg-primary-color, #000000));
    color: var(--theme-palette-color-8, #ffffff);
}

.wccg-marquee-has-close {
    padding-right: 44px !important;
}

.wccg-marquee-close {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 2;
    width: 28px;
    height: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 9%, transparent);
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.wccg-marquee-close:hover {
    background: color-mix(in srgb, currentColor 16%, transparent);
    transform: translateY(-50%) scale(1.04);
}

body.wccg-top-marquee-dismissed .wccg-marquee-is-top {
    display: none !important;
}

.wccg-marquee-layout-contained {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.wccg-marquee-track {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: 100%;
    gap: var(--marquee-gap, 50px);
}

.wccg-marquee-dir-left .wccg-marquee-track {
    animation: wccg-scroll-left var(--marquee-speed, 20s) linear infinite;
}

.wccg-marquee-dir-right .wccg-marquee-track {
    animation: wccg-scroll-right var(--marquee-speed, 20s) linear infinite;
}

.wccg-marquee-wrapper:hover .wccg-marquee-track {
    animation-play-state: paused;
}

.wccg-marquee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-size: inherit;
    font-weight: 600;
}

.wccg-marquee-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.wccg-marquee-item a:hover {
    opacity: 0.8;
}

.wccg-marquee-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

@media (min-width: 769px) {
    .wccg-marquee-device-mobile {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .wccg-marquee-device-desktop {
        display: none !important;
    }

    .wccg-marquee-has-close {
        padding-right: 38px !important;
    }

    .wccg-marquee-close {
        right: 8px;
        width: 26px;
        height: 26px;
        min-height: 26px;
    }
}

@keyframes wccg-scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - var(--marquee-gap, 50px))); }
}

@keyframes wccg-scroll-right {
    from { transform: translateX(calc(-100% - var(--marquee-gap, 50px))); }
    to { transform: translateX(0); }
}

/* ====================================================
   CATEGORIES GRID WITH CHILDREN
   ==================================================== */
.wccg-categories-grid {
    display: grid;
    gap: 20px;
    margin: 20px 0;
}
.wccg-categories-grid.wccg-columns-4 { grid-template-columns: repeat(4, 1fr); }
.wccg-categories-grid.wccg-columns-3 { grid-template-columns: repeat(3, 1fr); }
.wccg-categories-grid.wccg-columns-2 { grid-template-columns: repeat(2, 1fr); }
.wccg-categories-grid.wccg-columns-5 { grid-template-columns: repeat(5, 1fr); }
.wccg-categories-grid.wccg-columns-6 { grid-template-columns: repeat(6, 1fr); }

.wccg-cat-grid-item {
    background: #fff;
    border-radius: var(--wccg-radius, 10px);
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}
.wccg-cat-grid-item:hover {
    transform: translateY(-5px);
}
.wccg-cat-grid-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}
.wccg-cat-grid-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}
.wccg-cat-grid-top h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}
.wccg-cat-grid-top h3 a {
    text-decoration: none;
    color: var(--wccg-title-color, #000);
}
.wccg-cat-grid-children {
    list-style: none;
    padding: 0;
    margin: 0;
}
.wccg-cat-grid-children li {
    margin-bottom: 8px;
    font-size: 14px;
}
.wccg-cat-grid-children li a {
    text-decoration: none;
    color: #666;
    transition: color 0.2s;
}
.wccg-cat-grid-children li a:hover {
    color: var(--wccg-primary-color);
}

@media (max-width: 768px) {
    .wccg-categories-grid.wccg-products-grid.wccg-columns-3,
    .wccg-categories-grid.wccg-products-grid.wccg-columns-4,
    .wccg-categories-grid.wccg-products-grid.wccg-columns-5,
    .wccg-categories-grid.wccg-products-grid.wccg-columns-6,
    .wccg-categories-grid.wccg-columns-3,
    .wccg-categories-grid.wccg-columns-4,
    .wccg-categories-grid.wccg-columns-5,
    .wccg-categories-grid.wccg-columns-6 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 14px;
    }
}
@media (max-width: 480px) {
    .wccg-categories-grid.wccg-products-grid,
    .wccg-categories-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
    .wccg-categories-grid .wccg-cat-banner-image {
        min-height: 170px;
    }
    .wccg-cat-banner-overlay {
        padding: 14px;
    }
    .wccg-cat-banner-cta {
        padding: 5px 14px;
        font-size: 10px;
    }
}

/* ====================================================
 * PRODUCT BADGES & STACKING
 * ==================================================== */
.wccg-product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
    max-width: calc(100% - 20px);
    pointer-events: none;
}
.wccg-product-badges .onsale {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    float: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    background: var(--wccg-badge-bg, #83b735) !important;
    color: var(--wccg-badge-text, #fff) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    pointer-events: none;
    transform: none !important;
}
.wccg-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    white-space: nowrap;
}
.wccg-badge-sale { background: #e74c3c; }
.wccg-badge-oos  { background: #95a5a6; }
.wccg-badge-new  { background: #2ecc71; }
.wccg-badge-hot  { background: #f39c12; }

/* ====================================================
 * MOBILE BOTTOM NAVIGATION BAR
 * ==================================================== */
.wccg-mobile-nav {
    display: none;
}

@media (max-width: 991px) {
    body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

    .wccg-mobile-nav {
        position: fixed;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        left: 14px;
        right: 14px;
        height: 64px;
        background: var(--wccg-mobile-nav-bg, #fff);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        z-index: 999999;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .wccg-mobile-nav-inner {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-around;
        align-items: center;
        gap: 4px;
        padding: 0 12px;
    }

    .wccg-nav-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--wccg-mobile-nav-inactive, #999);
        transition: color 0.24s ease, transform 0.24s ease, opacity 0.24s ease;
        z-index: 2;
        flex: 1;
        min-width: 0;
        gap: 4px;
    }

    .wccg-nav-icon svg, .wccg-nav-icon i {
        width: 22px;
        height: 22px;
        transition: color 0.24s ease, transform 0.24s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .wccg-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        min-height: 24px;
        border-radius: 15px;
        transition: background-color 0.24s ease, color 0.24s ease, padding 0.24s ease, transform 0.24s ease;
    }

    .wccg-nav-label {
        font-size: 10px;
        font-weight: 700;
        line-height: 1.2;
        min-height: 12px;
        opacity: 1;
        transition: color 0.24s ease, opacity 0.24s ease, transform 0.24s ease;
    }

    /* STYLE: PILL */
    .wccg-mobile-nav-style-pill .wccg-nav-item.active {
        color: var(--wccg-mobile-nav-active);
        flex: 1.25;
        transform: translateY(-1px);
    }
    .wccg-mobile-nav-style-pill .wccg-nav-item.active .wccg-nav-icon {
        background: var(--wccg-mobile-nav-active);
        color: #fff !important;
        padding: 8px 14px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .wccg-mobile-nav-style-pill .wccg-nav-item.active .wccg-nav-icon svg,
    .wccg-mobile-nav-style-pill .wccg-nav-item.active .wccg-nav-icon i {
        color: #fff !important;
    }
    .wccg-mobile-nav-style-pill .wccg-nav-item.active .wccg-nav-label {
        opacity: 0;
        transform: translateY(4px);
    }

    /* STYLE: NOTCH */
    .wccg-mobile-nav-style-notch {
        background: var(--wccg-mobile-nav-bg, #000) !important;
        border-radius: 0 0 20px 20px;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(70px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .wccg-mobile-nav-style-notch .wccg-mobile-nav-inner {
        filter: url('#wccg-goo');
    }
    .wccg-mobile-nav-style-notch .wccg-nav-item {
        color: #fff;
    }
    .wccg-mobile-nav-style-notch .wccg-nav-indicator {
        position: absolute;
        top: -35px;
        left: 0;
        width: 70px;
        height: 70px;
        background: var(--wccg-mobile-nav-active);
        border-radius: 50%;
        border: 8px solid #f5f5f7; /* Match the body/background color usually */
        transition: transform 0.34s cubic-bezier(0.175, 0.885, 0.32, 1.12);
        will-change: transform;
        z-index: 1;
    }
    .wccg-mobile-nav-style-notch .wccg-nav-item.active {
        transform: translateY(-35px);
        will-change: transform;
    }
    .wccg-mobile-nav-style-notch .wccg-nav-item.active .wccg-nav-icon {
        color: #fff !important;
    }
}

/* ====================================================
 * APEX LUXURY HERO SLIDER
 * ==================================================== */
.wccg-apex-shell {
    width: 100%;
}

.wccg-apex-width-contained {
    max-width: var(--wccg-apex-content-width, 1300px);
    margin-inline: auto;
}

.wccg-apex-width-theme {
    max-width: var(--wccg-container-width, 1290px);
    margin-inline: auto;
}

.wccg-apex-width-full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.wccg-apex-slider {
    position: relative;
    width: 100%;
    min-height: min(var(--wccg-apex-height, 620px), 90vh);
    height: var(--wccg-apex-height, min(76vh, 720px));
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 1;
}

.wccg-apex-container {
    max-width: var(--wccg-apex-content-width, 1300px);
    width: 100%;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
}

/* Legacy layout classes remain on the markup, but desktop placement is now driven by content and image position classes. */

/* Content Typography */
.wccg-apex-content {
    flex: 0 0 45%;
    z-index: 5;
    position: relative;
    inset-inline-start: var(--wccg-apex-content-offset-x, 0px);
    top: var(--wccg-apex-content-offset-y, 0px);
}
.wccg-apex-subtitle {
    display: block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--wccg-primary-color);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: wccg-apex-fade-up 0.8s forwards 0.2s;
}
.wccg-apex-title {
    font-size: 64px;
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(30px);
    animation: wccg-apex-fade-up 1s forwards 0.4s;
}
.wccg-apex-btn {
    opacity: 0;
    transform: translateY(20px);
    animation: wccg-apex-fade-up 0.8s forwards 0.7s;
    padding: 18px 40px !important;
    font-size: 16px !important;
    border-radius: 50px !important;
    background: var(--wccg-primary-color) !important;
    border: none !important;
}

/* Floating PNG Product */
.wccg-apex-float-wrap {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    width: var(--wccg-apex-slide-image-width, var(--wccg-apex-image-width, 52%));
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    perspective: 1000px;
    opacity: 0;
    transform: translate(calc(var(--wccg-apex-float-anchor-x, -50%) + var(--wccg-apex-float-x, 0px)), calc(-50% + var(--wccg-apex-float-y, 0px)));
    animation: wccg-apex-float-entry 0.9s var(--wccg-transition-cubic, cubic-bezier(0.22, 1, 0.36, 1)) 0.2s forwards;
}

.wccg-apex-image-left .wccg-apex-float-wrap {
    inset-inline-start: 5%;
    inset-inline-end: auto;
    --wccg-apex-float-anchor-x: 0%;
}
.wccg-apex-image-center .wccg-apex-float-wrap {
    inset-inline-start: 50%;
    inset-inline-end: auto;
    --wccg-apex-float-anchor-x: -50%;
}
.wccg-apex-image-right .wccg-apex-float-wrap {
    inset-inline-start: auto;
    inset-inline-end: 5%;
    --wccg-apex-float-anchor-x: 0%;
}

.wccg-apex-float-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: var(--wccg-apex-float-max-height, 70vh);
    object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.3));
    
    /* THE SIGNATURE DRIFT */
    animation: wccg-apex-float 6s ease-in-out infinite;
    will-change: transform;
}

@keyframes wccg-apex-float {
    0% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(1deg); }
    66% { transform: translateY(10px) rotate(-1.5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes wccg-apex-float-entry {
    from {
        opacity: 0;
        transform: translate(calc(var(--wccg-apex-float-anchor-x, -50%) + var(--wccg-apex-float-x, 0px)), calc(-50% + var(--wccg-apex-float-y, 0px) - 46px));
    }
    to {
        opacity: 1;
        transform: translate(calc(var(--wccg-apex-float-anchor-x, -50%) + var(--wccg-apex-float-x, 0px)), calc(-50% + var(--wccg-apex-float-y, 0px)));
    }
}

@keyframes wccg-apex-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

.wccg-apex-entry-fade .wccg-apex-subtitle,
.wccg-apex-entry-fade .wccg-apex-title,
.wccg-apex-entry-fade .wccg-apex-btn {
    transform: none;
    animation-name: wccg-apex-fade;
}

.wccg-apex-entry-slide_left .wccg-apex-subtitle,
.wccg-apex-entry-slide_left .wccg-apex-title,
.wccg-apex-entry-slide_left .wccg-apex-btn {
    transform: translateX(-34px);
    animation-name: wccg-apex-slide-left;
}

.wccg-apex-entry-slide_right .wccg-apex-subtitle,
.wccg-apex-entry-slide_right .wccg-apex-title,
.wccg-apex-entry-slide_right .wccg-apex-btn {
    transform: translateX(34px);
    animation-name: wccg-apex-slide-right;
}

.wccg-apex-entry-zoom .wccg-apex-subtitle,
.wccg-apex-entry-zoom .wccg-apex-title,
.wccg-apex-entry-zoom .wccg-apex-btn {
    transform: scale(0.96);
    animation-name: wccg-apex-zoom-in;
}

.wccg-apex-entry-none .wccg-apex-subtitle,
.wccg-apex-entry-none .wccg-apex-title,
.wccg-apex-entry-none .wccg-apex-btn {
    opacity: 1;
    transform: none;
    animation: none;
}

.wccg-apex-entry-none .wccg-apex-float-wrap {
    opacity: 1;
    animation: none;
}

@keyframes wccg-apex-fade {
    to { opacity: 1; }
}

@keyframes wccg-apex-slide-left {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes wccg-apex-slide-right {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes wccg-apex-zoom-in {
    to { opacity: 1; transform: scale(1); }
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .wccg-apex-slider {
        height: var(--wccg-apex-mobile-height, 700px);
        min-height: 0;
        padding: clamp(34px, 6vw, 64px) 0;
        box-sizing: border-box;
    }
    .wccg-apex-container {
        flex-direction: column !important;
        justify-content: center;
        text-align: center;
        gap: clamp(18px, 4vw, 34px);
        min-height: 0;
        box-sizing: border-box;
    }
    .wccg-apex-content {
        flex: 0 1 auto;
        margin-bottom: 0;
        inset-inline-start: 0;
        top: 0;
        max-width: min(var(--wccg-apex-content-max-width, 560px), 92vw);
    }
    .wccg-apex-mobile-text-left .wccg-apex-content { text-align: left; margin-inline: 0 auto; }
    .wccg-apex-mobile-text-center .wccg-apex-content { text-align: center; margin-inline: auto; }
    .wccg-apex-mobile-text-right .wccg-apex-content { text-align: right; margin-inline: auto 0; }
    .wccg-apex-title { font-size: 42px; }
    .wccg-apex-float-wrap {
        position: relative;
        inset: auto;
        top: auto;
        flex: 0 1 auto;
        width: var(--wccg-apex-tablet-image-width, 60%);
        max-width: min(560px, 88vw);
        min-height: 0;
        opacity: 1;
        transform: translate(0, 0) !important;
        animation: none;
    }
    .wccg-apex-float-img {
        max-height: min(34vh, 280px);
        animation-duration: 8s;
    }
    .wccg-apex-hide-mobile-float .wccg-apex-float-wrap { display: none; }
    .wccg-apex-mobile-image_first .wccg-apex-container { flex-direction: column-reverse !important; }
    .wccg-apex-mobile-hide_image .wccg-apex-float-wrap { display: none; }
    .wccg-apex-preset-product_launch .wccg-apex-content {
        padding: 0;
        background: transparent;
        backdrop-filter: none;
    }
    .wccg-apex-preset-dark_commerce .wccg-apex-title {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .wccg-apex-slider {
        height: var(--wccg-apex-mobile-height, 640px);
        padding: 34px 0;
    }
    .wccg-apex-container {
        gap: 16px;
    }
    .wccg-apex-title {
        font-size: clamp(30px, 10vw, 42px);
        line-height: 1.05;
    }
    .wccg-apex-subtitle {
        margin-bottom: 12px;
        letter-spacing: 2px;
    }
    .wccg-apex-actions {
        margin-top: clamp(14px, var(--wccg-apex-button-gap, 30px), 24px);
    }
    .wccg-apex-float-wrap {
        flex: 0 1 auto;
        width: var(--wccg-apex-mobile-image-width, 70%);
        max-width: min(360px, 86vw);
    }
    .wccg-apex-float-img {
        max-height: min(28vh, 210px);
    }
}

@media (max-width: 420px) {
    .wccg-apex-slider {
        height: min(var(--wccg-apex-mobile-height, 620px), 92vh);
        padding: 28px 0;
    }
    .wccg-apex-float-img {
        max-height: 24vh;
    }
}

/* ====================================================
   REUSABLE TOOLKIT: Image-Led Category Library + Home Sections
   ==================================================== */
.wccg-categories-grid {
    gap: 22px;
}

.wccg-block-instance {
    box-sizing: border-box;
}

.wccg-block-instance.wccg-block-profile-product,
.wccg-block-instance.wccg-block-profile-category,
.wccg-block-instance.wccg-block-profile-category-grid,
.wccg-block-instance.wccg-block-profile-tabs,
.wccg-block-instance.wccg-block-profile-hero,
.wccg-block-instance.wccg-block-profile-promo-grid,
.wccg-block-instance.wccg-block-profile-brands,
.wccg-block-instance.wccg-block-profile-reels,
.wccg-block-instance.wccg-block-profile-wishlist,
.wccg-block-instance.wccg-block-profile-compare,
.wccg-block-instance.wccg-block-profile-marquee {
    width: min(100%, var(--wccg-container-width, 1290px));
}

.wccg-block-instance .wccg-home-section,
.wccg-block-instance .wccg-main-wrapper,
.wccg-block-instance .wccg-products-grid,
.wccg-block-instance .wccg-categories-grid {
    font-family: var(--theme-font-family, inherit);
}

.wccg-block-instance .button,
.wccg-block-instance button,
.wccg-home-btn,
.wccg-apex-btn,
.wccg-hero-btn {
    min-height: var(--wccg-button-height, 42px);
    border-radius: var(--wccg-button-radius, var(--wccg-border-radius, 12px));
}

.wccg-cat-card,
.wccg-cat-banner,
.wccg-cat-circle,
.wccg-cat-minimal,
.wccg-cat-style-list,
.wccg-cat-spotlight,
.wccg-cat-split,
.wccg-cat-tile {
    height: 100%;
}

.wccg-cat-card a,
.wccg-cat-banner a,
.wccg-cat-circle a,
.wccg-cat-minimal a,
.wccg-cat-style-list a,
.wccg-cat-spotlight a,
.wccg-cat-split a,
.wccg-cat-tile a {
    text-decoration: none !important;
}

.wccg-cat-card-image,
.wccg-cat-banner-image,
.wccg-cat-circle-image,
.wccg-cat-minimal-image,
.wccg-cat-list-image,
.wccg-cat-spotlight-image,
.wccg-cat-split-image,
.wccg-cat-tile-image {
    display: block !important;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.wccg-cat-card-image::before,
.wccg-cat-banner-image::before,
.wccg-cat-spotlight-image::before,
.wccg-cat-tile-image::before,
.wccg-hero-promo-shade,
.wccg-promo-card-shade {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wccg-cat-card-image::before,
.wccg-cat-banner-image::before,
.wccg-cat-spotlight-image::before {
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 20%, rgba(0,0,0,0.72) 100%);
}

.wccg-cat-fallback-initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.28);
    font-size: 86px;
    font-weight: 800;
    line-height: 1;
}

.wccg-cat-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.wccg-cat-card-link,
.wccg-cat-banner-link,
.wccg-cat-spotlight-link,
.wccg-cat-tile-link {
    display: block !important;
    height: 100%;
    color: #fff !important;
}

.wccg-cat-card-image {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(17,24,39,0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wccg-cat-card:hover .wccg-cat-card-image,
.wccg-cat-banner:hover .wccg-cat-banner-image,
.wccg-cat-spotlight:hover .wccg-cat-spotlight-image,
.wccg-cat-tile:hover .wccg-cat-tile-image {
    transform: translateY(-3px);
    box-shadow: 0 24px 52px rgba(17,24,39,0.18);
}

.wccg-cat-card-overlay,
.wccg-cat-banner-overlay,
.wccg-cat-spotlight-overlay {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    z-index: 2;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 7px;
    padding: 20px !important;
    background: transparent !important;
    color: #fff !important;
    text-align: left !important;
}

.wccg-cat-card-name,
.wccg-cat-banner-name,
.wccg-cat-spotlight-name,
.wccg-cat-tile-name {
    color: #fff !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
}

.wccg-cat-card-count,
.wccg-cat-circle-badge,
.wccg-cat-tile-count {
    position: absolute !important;
    z-index: 3;
    top: 14px;
    right: 14px;
    min-width: 34px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
    border-radius: 999px;
    background: rgba(255,255,255,0.94) !important;
    color: #111827 !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.16) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.wccg-cat-card-cta,
.wccg-cat-banner-cta,
.wccg-cat-spotlight-cta,
.wccg-cat-split-cta {
    color: rgba(255,255,255,0.9) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.wccg-cat-banner {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.wccg-cat-banner-image {
    min-height: 220px !important;
    aspect-ratio: 16 / 8 !important;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(17,24,39,0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wccg-cat-banner-count,
.wccg-cat-spotlight-count,
.wccg-cat-split-count,
.wccg-cat-list-count,
.wccg-cat-minimal-count {
    color: var(--wccg-primary-color) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wccg-cat-circle {
    text-align: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.wccg-cat-circle-link {
    width: auto;
    min-height: 0;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}

.wccg-cat-circle-image {
    width: 148px !important;
    height: 148px !important;
    margin: 0 !important;
    border-radius: 50%;
    box-shadow: 0 16px 34px rgba(17,24,39,0.14);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wccg-cat-circle:hover .wccg-cat-circle-image {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 22px 44px rgba(17,24,39,0.18);
}

.wccg-cat-circle-name {
    color: var(--wccg-title-color, #111827) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    text-align: center;
}

.wccg-cat-circle-badge {
    top: auto;
    right: 8px;
    bottom: 9px;
}

.wccg-cat-minimal {
    padding: 0 !important;
    border: 1px solid rgba(17,24,39,0.08) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(17,24,39,0.06) !important;
    overflow: hidden !important;
}

.wccg-cat-minimal-link {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) 34px;
    align-items: center !important;
    gap: 14px;
    padding: 12px !important;
    color: inherit !important;
}

.wccg-cat-minimal-image {
    width: 82px !important;
    height: 82px !important;
    border-radius: 10px;
}

.wccg-cat-minimal-name,
.wccg-cat-list-title a,
.wccg-cat-split-name a {
    color: var(--wccg-title-color, #111827) !important;
    font-weight: 800 !important;
}

.wccg-cat-minimal-arrow {
    position: static;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: var(--wccg-primary-color);
}

.wccg-cat-style-list {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 16px !important;
    align-items: center !important;
    padding: 14px !important;
    border: 1px solid rgba(17,24,39,0.08) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(17,24,39,0.06) !important;
}

.wccg-cat-list-left {
    display: block !important;
    width: 118px !important;
    height: 118px !important;
    flex: 0 0 118px !important;
    border-radius: 10px;
    overflow: hidden;
}

.wccg-cat-list-img-link,
.wccg-cat-list-image {
    display: block !important;
    width: 100%;
    height: 100%;
}

.wccg-cat-list-right,
.wccg-cat-minimal-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wccg-cat-list-title {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

.wccg-cat-list-children,
.wccg-cat-split-children {
    display: flex !important;
    flex-wrap: wrap;
    gap: 7px !important;
    padding: 0 !important;
    margin: 4px 0 0 !important;
    list-style: none !important;
}

.wccg-cat-list-children a,
.wccg-cat-split-children a {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f7f7f7;
    color: var(--wccg-cat-color, #4b5563) !important;
    font-size: 12px !important;
    font-weight: 700;
}

.wccg-cat-spotlight-image {
    min-height: 340px;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(17,24,39,0.14);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wccg-cat-spotlight-overlay {
    padding: 26px !important;
}

.wccg-cat-spotlight-name {
    font-size: 30px !important;
}

.wccg-cat-split {
    height: 100%;
    display: grid;
    grid-template-columns: 45% minmax(0, 1fr);
    background: #fff;
    border: 1px solid rgba(17,24,39,0.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(17,24,39,0.08);
}

.wccg-cat-split-image {
    min-height: 230px;
}

.wccg-cat-split-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 22px;
}

.wccg-cat-split-name {
    margin: 0;
    font-size: 22px;
    line-height: 1.12;
}

.wccg-cat-split-cta {
    color: var(--wccg-primary-color) !important;
    margin-top: 4px;
}

.wccg-cat-tile-image {
    aspect-ratio: 1 / 0.82;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(17,24,39,0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wccg-cat-tile-image::before {
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.62) 100%);
}

.wccg-cat-tile-bar {
    position: absolute;
    z-index: 2;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wccg-cat-tile-name {
    font-size: 15px !important;
}

.wccg-cat-tile-count {
    position: static !important;
    flex: 0 0 auto;
}

.wccg-home-section {
    margin: 32px 0;
}

.wccg-home-kicker {
    display: inline-flex;
    color: var(--wccg-primary-color);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wccg-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--wccg-primary-color);
    color: #fff !important;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none !important;
    text-transform: uppercase;
}

.wccg-hero-promo {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #111827, #475569);
    background-size: cover;
    background-position: center;
    color: #fff;
}

.wccg-hero-promo-shade {
    background: linear-gradient(90deg, rgba(0,0,0,0.72), rgba(0,0,0,0.18));
}

.wccg-hero-promo-center .wccg-hero-promo-shade {
    background: rgba(0,0,0,0.48);
}

.wccg-hero-promo-right .wccg-hero-promo-shade {
    background: linear-gradient(270deg, rgba(0,0,0,0.72), rgba(0,0,0,0.18));
}

.wccg-hero-promo-inner {
    position: relative;
    z-index: 2;
    max-width: 560px;
    padding: 58px;
}

.wccg-hero-promo-center {
    justify-content: center;
    text-align: center;
}

.wccg-hero-promo-center .wccg-hero-promo-inner {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.wccg-hero-promo-right {
    justify-content: flex-end;
}

.wccg-hero-promo-title {
    color: #fff;
    font-size: 46px;
    line-height: 1;
    margin: 10px 0 14px;
}

.wccg-hero-promo-subtitle {
    color: rgba(255,255,255,0.86);
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 24px;
}

.wccg-promo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.wccg-promo-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wccg-promo-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wccg-promo-card {
    min-height: 230px;
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #111827, #64748b);
    background-size: cover;
    background-position: center;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 16px 38px rgba(17,24,39,0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wccg-promo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 52px rgba(17,24,39,0.18);
}

.wccg-promo-card-shade {
    background: linear-gradient(180deg, transparent 18%, rgba(0,0,0,0.72) 100%);
}

.wccg-promo-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 22px;
}

.wccg-promo-card strong {
    color: #fff;
    font-size: 22px;
    line-height: 1.1;
}

.wccg-promo-card span:not(.wccg-home-kicker):not(.wccg-promo-card-content):not(.wccg-promo-card-shade) {
    color: rgba(255,255,255,0.82);
}

.wccg-product-tabs .wccg-section-header {
    gap: 18px;
}

.wccg-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wccg-tab-btn {
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid rgba(17,24,39,0.1);
    border-radius: 999px;
    background: #fff;
    color: #111827;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.wccg-tab-btn.is-active {
    background: var(--wccg-primary-color);
    border-color: var(--wccg-primary-color);
    color: #fff;
}

.wccg-tab-panel {
    display: none;
}

.wccg-tab-panel.is-active {
    display: block;
}

.wccg-brand-carousel {
    overflow: hidden;
}

.wccg-brand-carousel .wccg-section-title {
    margin-bottom: 16px;
}

.wccg-brand-track-wrap {
    overflow: hidden;
    border: 1px solid rgba(17,24,39,0.08);
    border-radius: 14px;
    background: #fff;
}

.wccg-brand-track {
    display: flex;
    width: max-content;
    animation: wccg-brand-scroll var(--wccg-brand-speed, 24s) linear infinite;
}

.wccg-brand-track:hover {
    animation-play-state: paused;
}

.wccg-brand-item {
    width: 180px;
    min-height: 94px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-right: 1px solid rgba(17,24,39,0.08);
    color: #111827 !important;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-decoration: none !important;
}

.wccg-brand-item img {
    max-width: 130px !important;
    max-height: 52px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.78;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.wccg-brand-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

@keyframes wccg-brand-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.wccg-shop-reels {
    --wccg-reels-panel: 360px;
}

.wccg-reels-nav {
    display: inline-flex;
    gap: 8px;
}

.wccg-reels-nav button {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(17,24,39,0.1);
    border-radius: 999px;
    background: #fff;
    color: #111827;
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.wccg-shop-reels-shell {
    display: grid;
    grid-template-columns: minmax(280px, 430px) minmax(280px, var(--wccg-reels-panel));
    justify-content: center;
    align-items: stretch;
    gap: 22px;
}

.wccg-shop-reels-track {
    height: var(--wccg-reels-height, 680px);
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    border-radius: 18px;
    background: #0f172a;
    scrollbar-width: none;
    box-shadow: 0 24px 58px rgba(17,24,39,0.16);
}

.wccg-shop-reels-track::-webkit-scrollbar {
    display: none;
}

.wccg-shop-reel {
    height: var(--wccg-reels-height, 680px);
    position: relative;
    scroll-snap-align: start;
    overflow: hidden;
    background: #111827;
}

.wccg-shop-reel-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.wccg-shop-reel-overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.72));
}

.wccg-shop-reel-overlay h3 {
    color: #fff;
    font-size: 26px;
    line-height: 1.05;
    margin: 8px 0 8px;
}

.wccg-shop-reel-overlay p {
    color: rgba(255,255,255,0.84);
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
}

.wccg-shop-reels-products {
    min-height: var(--wccg-reels-height, 680px);
    border: 1px solid rgba(17,24,39,0.08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(17,24,39,0.09);
    overflow: hidden;
}

.wccg-reel-products-panel {
    display: none;
    height: 100%;
    padding: 18px;
    overflow-y: auto;
}

.wccg-reel-products-panel.is-active {
    display: block;
}

.wccg-reel-products-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(17,24,39,0.08);
}

.wccg-reel-products-head span {
    color: #111827;
    font-size: 15px;
    font-weight: 900;
}

.wccg-reel-products-head strong {
    min-width: 30px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--wccg-primary-color);
    color: #fff;
    font-size: 12px;
}

.wccg-reel-product {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(17,24,39,0.06);
    color: inherit !important;
    text-decoration: none !important;
}

.wccg-reel-product-img {
    width: 74px;
    height: 74px;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
}

.wccg-reel-product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.wccg-reel-product-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wccg-reel-product-info strong {
    color: var(--wccg-title-color, #111827);
    font-size: 13px;
    line-height: 1.25;
}

.wccg-reel-product-price {
    color: var(--wccg-primary-color);
    font-size: 13px;
    font-weight: 900;
}

.wccg-reel-product-arrow {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--wccg-primary-color);
}

.wccg-reel-empty {
    color: #6b7280;
    margin: 0;
}

/* ====================================================
   Premium Defaults: Remaining Blocks
   ==================================================== */
.wccg-brand-carousel,
.wccg-product-tabs,
.wccg-shop-reels,
.wccg-promo-grid,
.wccg-categories-grid,
.wccg-marquee-wrapper {
    --wccg-premium-border: rgba(31,31,31,0.075);
    --wccg-premium-surface: #ffffff;
    --wccg-premium-soft: #f7f6f3;
}

.wccg-slider-nav .swiper-button-next,
.wccg-slider-nav .swiper-button-prev,
.wccg-swiper .swiper-button-next,
.wccg-swiper .swiper-button-prev,
.wccg-hero-swiper .swiper-button-next,
.wccg-hero-swiper .swiper-button-prev,
.wccg-apex-carousel .swiper-button-next,
.wccg-apex-carousel .swiper-button-prev,
.wccg-reels-nav button {
    width: var(--wccg-swiper-arrow-size, 38px) !important;
    height: var(--wccg-swiper-arrow-size, 38px) !important;
    border: 1px solid var(--wccg-swiper-arrow-border, var(--wccg-premium-border, rgba(31,31,31,0.08))) !important;
    border-radius: var(--wccg-swiper-arrow-radius, 999px) !important;
    background: var(--wccg-swiper-arrow-bg, #fff) !important;
    color: var(--wccg-swiper-arrow-color, var(--wccg-primary-color, #1f1f1f)) !important;
    box-shadow: var(--wccg-swiper-arrow-shadow, var(--wccg-soft-shadow));
    transition: background var(--wccg-transition-duration) var(--wccg-transition-cubic), color var(--wccg-transition-duration) var(--wccg-transition-cubic), transform var(--wccg-transition-duration) var(--wccg-transition-cubic), border-color var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-slider-nav .swiper-button-next::after,
.wccg-slider-nav .swiper-button-prev::after,
.wccg-swiper .swiper-button-next::after,
.wccg-swiper .swiper-button-prev::after,
.wccg-hero-swiper .swiper-button-next::after,
.wccg-hero-swiper .swiper-button-prev::after,
.wccg-apex-carousel .swiper-button-next::after,
.wccg-apex-carousel .swiper-button-prev::after {
    font-size: var(--wccg-swiper-arrow-icon-size, 14px) !important;
    font-weight: 700;
}

.wccg-slider-nav .swiper-button-next:hover,
.wccg-slider-nav .swiper-button-prev:hover,
.wccg-swiper .swiper-button-next:hover,
.wccg-swiper .swiper-button-prev:hover,
.wccg-hero-swiper .swiper-button-next:hover,
.wccg-hero-swiper .swiper-button-prev:hover,
.wccg-apex-carousel .swiper-button-next:hover,
.wccg-apex-carousel .swiper-button-prev:hover,
.wccg-reels-nav button:hover {
    transform: translateY(-1px) !important;
    background: var(--wccg-swiper-arrow-hover-bg, var(--wccg-primary-color, #1f1f1f)) !important;
    border-color: var(--wccg-swiper-arrow-hover-bg, var(--wccg-primary-color, #1f1f1f)) !important;
    color: var(--wccg-swiper-arrow-hover-color, #fff) !important;
}

.wccg-categories-grid {
    gap: var(--wccg-grid-gap, 22px);
    margin: 24px 0;
}

.wccg-cat-grid-item {
    border: 1px solid var(--wccg-premium-border, rgba(31,31,31,0.075));
    border-radius: var(--wccg-border-radius, 12px);
    padding: 18px;
    box-shadow: none;
    transition: transform var(--wccg-transition-duration) var(--wccg-transition-cubic), box-shadow var(--wccg-transition-duration) var(--wccg-transition-cubic), border-color var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-cat-grid-item:hover {
    transform: translateY(-2px);
    border-color: rgba(31,31,31,0.12);
    box-shadow: var(--wccg-soft-shadow);
}

.wccg-cat-grid-top {
    gap: 12px;
    margin-bottom: 13px;
    padding-bottom: 13px;
    border-bottom-color: var(--wccg-premium-border, rgba(31,31,31,0.075));
}

.wccg-cat-grid-img {
    width: 54px;
    height: 54px;
    border-radius: 14px;
}

.wccg-cat-grid-top h3 {
    font-size: 16px;
    line-height: 1.25;
}

.wccg-cat-grid-children li {
    margin-bottom: 7px;
    font-size: 13px;
}

.wccg-cat-card-image,
.wccg-cat-banner-image,
.wccg-cat-spotlight-image,
.wccg-cat-tile-image {
    box-shadow: var(--wccg-soft-shadow) !important;
    transition: transform var(--wccg-transition-img) var(--wccg-transition-cubic), box-shadow var(--wccg-transition-img) var(--wccg-transition-cubic) !important;
}

.wccg-cat-card:hover .wccg-cat-card-image,
.wccg-cat-banner:hover .wccg-cat-banner-image,
.wccg-cat-spotlight:hover .wccg-cat-spotlight-image,
.wccg-cat-tile:hover .wccg-cat-tile-image {
    transform: translateY(-2px) !important;
    box-shadow: var(--wccg-card-shadow) !important;
}

.wccg-cat-card-image::before,
.wccg-cat-banner-image::before,
.wccg-cat-spotlight-image::before,
.wccg-cat-tile-image::before {
    background: linear-gradient(180deg, rgba(0,0,0,0.02) 24%, rgba(0,0,0,0.58) 100%) !important;
}

.wccg-cat-card-image.has-fallback,
.wccg-cat-banner-image.has-fallback,
.wccg-cat-spotlight-image.has-fallback,
.wccg-cat-tile-image.has-fallback,
.wccg-cat-circle-image.has-fallback,
.wccg-cat-minimal-image.has-fallback,
.wccg-cat-list-image.has-fallback,
.wccg-cat-split-image.has-fallback {
    background: var(--wccg-category-placeholder-bg, var(--wccg-primary-color, #1f1f1f)) !important;
}

.wccg-cat-card-image.has-fallback::before,
.wccg-cat-banner-image.has-fallback::before,
.wccg-cat-spotlight-image.has-fallback::before,
.wccg-cat-tile-image.has-fallback::before {
    background: transparent !important;
}

.wccg-cat-card-image.has-fallback .wccg-cat-fallback-initial,
.wccg-cat-banner-image.has-fallback .wccg-cat-fallback-initial,
.wccg-cat-spotlight-image.has-fallback .wccg-cat-fallback-initial,
.wccg-cat-tile-image.has-fallback .wccg-cat-fallback-initial,
.wccg-cat-circle-image.has-fallback .wccg-cat-fallback-initial,
.wccg-cat-minimal-image.has-fallback .wccg-cat-fallback-initial,
.wccg-cat-list-image.has-fallback .wccg-cat-fallback-initial,
.wccg-cat-split-image.has-fallback .wccg-cat-fallback-initial {
    color: var(--wccg-category-placeholder-text, rgba(255,255,255,0.42)) !important;
}

.wccg-cat-card-overlay,
.wccg-cat-banner-overlay,
.wccg-cat-spotlight-overlay {
    padding: 18px !important;
    background: transparent !important;
}

.wccg-cat-card:hover .wccg-cat-card-overlay,
.wccg-cat-banner:hover .wccg-cat-banner-overlay {
    padding-bottom: 20px !important;
}

.wccg-cat-card-name,
.wccg-cat-banner-name,
.wccg-cat-spotlight-name,
.wccg-cat-tile-name {
    font-size: clamp(17px, 2vw, 20px) !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
}

.wccg-cat-card-count,
.wccg-cat-banner-count,
.wccg-cat-spotlight-count,
.wccg-cat-tile-count,
.wccg-cat-circle-badge {
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: 0.02em;
}

.wccg-cat-banner-cta,
.wccg-cat-card-cta,
.wccg-cat-spotlight-cta,
.wccg-cat-split-cta {
    border-width: 1px !important;
    border-radius: 999px !important;
    padding: 7px 16px !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: 0.04em !important;
}

.wccg-hero-promo {
    min-height: clamp(360px, 48vw, 540px);
    border-radius: var(--wccg-border-radius, 18px);
    box-shadow: var(--wccg-card-shadow);
}

.wccg-hero-promo.has-fallback {
    background: var(--wccg-hero-placeholder-bg, var(--wccg-primary-color, #1f1f1f)) !important;
}

.wccg-hero-promo.has-fallback .wccg-hero-promo-shade {
    background: rgba(0,0,0,0.08) !important;
}

.wccg-hero-promo-shade {
    background: linear-gradient(90deg, rgba(0,0,0,0.62), rgba(0,0,0,0.16)) !important;
}

.wccg-hero-promo-center .wccg-hero-promo-shade {
    background: rgba(0,0,0,0.42) !important;
}

.wccg-hero-promo-right .wccg-hero-promo-shade {
    background: linear-gradient(270deg, rgba(0,0,0,0.62), rgba(0,0,0,0.16)) !important;
}

.wccg-hero-promo-inner {
    padding: clamp(34px, 5vw, 54px);
}

.wccg-home-kicker,
.wccg-apex-subtitle {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

.wccg-hero-promo-title,
.wccg-apex-title {
    font-size: clamp(34px, 5.2vw, 58px) !important;
    line-height: 1.04 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em;
}

.wccg-hero-promo-subtitle {
    max-width: 48ch;
    font-size: clamp(15px, 1.5vw, 17px);
    color: rgba(255,255,255,0.84);
}

.wccg-home-btn,
.wccg-apex-btn,
.wccg-hero-btn,
.wccg-promo-card .wccg-promo-card-cta,
.wccg-compare-now-btn,
.wccg-explore-btn {
    min-height: 40px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform var(--wccg-transition-duration) var(--wccg-transition-cubic), background var(--wccg-transition-duration) var(--wccg-transition-cubic), color var(--wccg-transition-duration) var(--wccg-transition-cubic), box-shadow var(--wccg-transition-duration) var(--wccg-transition-cubic) !important;
}

.wccg-home-btn:hover,
.wccg-apex-btn:hover,
.wccg-hero-btn:hover,
.wccg-compare-now-btn:hover,
.wccg-explore-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}

.wccg-promo-grid {
    gap: var(--wccg-grid-gap, 20px);
}

.wccg-promo-card {
    min-height: 220px;
    border-radius: var(--wccg-border-radius, 14px);
    box-shadow: var(--wccg-soft-shadow);
    transition: transform var(--wccg-transition-img) var(--wccg-transition-cubic), box-shadow var(--wccg-transition-img) var(--wccg-transition-cubic);
}

.wccg-promo-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--wccg-card-shadow);
}

.wccg-promo-card-shade {
    background: linear-gradient(180deg, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.62) 100%) !important;
}

.wccg-promo-card.has-fallback {
    background: var(--wccg-promo-placeholder-bg, var(--wccg-primary-color, #1f1f1f)) !important;
}

.wccg-promo-card.has-fallback .wccg-promo-card-shade {
    background: rgba(0,0,0,0.08) !important;
}

.wccg-promo-card-content {
    gap: 6px;
    padding: 20px;
}

.wccg-promo-card strong {
    font-size: clamp(19px, 2.6vw, 22px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.wccg-apex-slider {
    min-height: min(var(--wccg-apex-height, 620px), 90vh);
    height: var(--wccg-apex-height, min(76vh, 720px));
}

.wccg-apex-content {
    max-width: 560px;
}

.wccg-apex-float-img {
    filter: drop-shadow(0 18px 38px rgba(0,0,0,0.22));
    animation-duration: 7.5s;
}

@keyframes wccg-apex-float {
    0% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(0.5deg); }
    66% { transform: translateY(6px) rotate(-0.75deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

.wccg-apex-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--wccg-apex-overlay-opacity, 0.32);
    background: var(--wccg-apex-overlay-color, #000);
}

.wccg-apex-overlay-left .wccg-apex-overlay {
    background: linear-gradient(90deg, var(--wccg-apex-overlay-color, #000) 0%, rgba(0,0,0,0.54) 42%, rgba(0,0,0,0.06) 100%);
}

.wccg-apex-overlay-right .wccg-apex-overlay {
    background: linear-gradient(270deg, var(--wccg-apex-overlay-color, #000) 0%, rgba(0,0,0,0.54) 42%, rgba(0,0,0,0.06) 100%);
}

.wccg-apex-overlay-center .wccg-apex-overlay {
    background: radial-gradient(circle at center, rgba(0,0,0,0.18) 0%, var(--wccg-apex-overlay-color, #000) 100%);
}

.wccg-apex-content {
    max-width: var(--wccg-apex-content-max-width, 560px);
}

.wccg-apex-content-x-left .wccg-apex-container { justify-content: flex-start; }
.wccg-apex-content-x-center .wccg-apex-container { justify-content: center; }
.wccg-apex-content-x-right .wccg-apex-container { justify-content: flex-end; }
.wccg-apex-content-y-top .wccg-apex-container { align-items: flex-start; padding-top: clamp(48px, 8vw, 92px); }
.wccg-apex-content-y-center .wccg-apex-container { align-items: center; }
.wccg-apex-content-y-bottom .wccg-apex-container { align-items: flex-end; padding-bottom: clamp(48px, 8vw, 92px); }
.wccg-apex-text-left .wccg-apex-content { text-align: left; }
.wccg-apex-text-center .wccg-apex-content { text-align: center; margin-inline: auto; }
.wccg-apex-text-right .wccg-apex-content { text-align: right; margin-left: auto; }

.wccg-apex-title {
    margin-bottom: var(--wccg-apex-title-gap, 22px) !important;
}

.wccg-apex-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: var(--wccg-apex-button-gap, 30px);
}

.wccg-apex-btn,
.wccg-apex-btn.button {
    min-height: 44px !important;
    padding: 0 24px !important;
    border-radius: var(--wccg-apex-button-radius, 999px) !important;
    background: var(--wccg-apex-button-bg, var(--wccg-primary-color, #111)) !important;
    color: var(--wccg-apex-button-text, #fff) !important;
    border: 1px solid var(--wccg-apex-button-bg, var(--wccg-primary-color, #111)) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}

.wccg-apex-btn:hover {
    background: var(--wccg-apex-button-hover-bg, #fff) !important;
    color: var(--wccg-apex-button-hover-text, #111) !important;
}

.wccg-apex-btn-secondary,
.wccg-apex-btn-secondary.button {
    background: rgba(255,255,255,0.14) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.38) !important;
    box-shadow: none;
}

.wccg-apex-btn-outline .wccg-apex-btn {
    background: transparent !important;
    color: var(--wccg-apex-button-text, #fff) !important;
    border-color: currentColor !important;
    box-shadow: none;
}

.wccg-apex-btn-glass .wccg-apex-btn {
    background: rgba(255,255,255,0.14) !important;
    color: var(--wccg-apex-button-text, #fff) !important;
    border-color: rgba(255,255,255,0.36) !important;
    backdrop-filter: blur(16px);
}

.wccg-apex-btn-link .wccg-apex-btn {
    min-height: auto !important;
    padding: 0 0 5px !important;
    background: transparent !important;
    color: var(--wccg-apex-button-text, #fff) !important;
    border: 0 !important;
    border-bottom: 1px solid currentColor !important;
    border-radius: 0 !important;
    box-shadow: none;
}

.wccg-apex-btn-size-small .wccg-apex-btn { min-height: 36px !important; padding-inline: 18px !important; font-size: 11px !important; }
.wccg-apex-btn-size-large .wccg-apex-btn { min-height: 52px !important; padding-inline: 32px !important; font-size: 13px !important; }

.wccg-apex-dir-rtl .wccg-apex-content { direction: rtl; }
.wccg-apex-dir-ltr .wccg-apex-content { direction: ltr; }

.wccg-apex-preset-luxury_split .wccg-apex-title {
    max-width: 10.5ch;
    letter-spacing: -0.055em;
}
.wccg-apex-preset-luxury_split .wccg-apex-subtitle {
    color: rgba(255,255,255,0.78);
}
.wccg-apex-preset-luxury_split .wccg-apex-float-img {
    filter: drop-shadow(0 34px 70px rgba(0,0,0,0.36));
}

.wccg-apex-preset-editorial_center .wccg-apex-container {
    justify-content: center;
}
.wccg-apex-preset-editorial_center .wccg-apex-content {
    flex-basis: auto;
    margin-inline: auto;
}
.wccg-apex-preset-editorial_center .wccg-apex-title {
    max-width: 13ch;
    margin-inline: auto;
    letter-spacing: -0.045em;
}
.wccg-apex-preset-editorial_center .wccg-apex-subtitle {
    color: rgba(255,255,255,0.74);
}
.wccg-apex-preset-editorial_center .wccg-apex-float-wrap {
    width: min(30vw, 420px);
    opacity: 0.42;
}

.wccg-apex-preset-product_launch .wccg-apex-slider {
    border-radius: var(--wccg-border-radius, 18px);
    background-color: #f7f3ec;
}
.wccg-apex-preset-product_launch .wccg-apex-title {
    max-width: 11ch;
    color: #fff;
}
.wccg-apex-preset-product_launch .wccg-apex-content {
    padding: clamp(22px, 4vw, 46px);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(0,0,0,0.24), rgba(0,0,0,0.04));
    backdrop-filter: blur(10px);
}
.wccg-apex-preset-product_launch .wccg-apex-float-img {
    transform-origin: 50% 80%;
    filter: drop-shadow(0 28px 58px rgba(0,0,0,0.28));
}

.wccg-apex-preset-minimal_banner .wccg-apex-slider {
    background-color: #f8f7f4;
}
.wccg-apex-preset-minimal_banner .wccg-apex-overlay {
    opacity: var(--wccg-apex-overlay-opacity, 0.12);
}
.wccg-apex-preset-minimal_banner .wccg-apex-title {
    color: var(--wccg-title-color, #1f1f1f);
    max-width: 15ch;
    margin-inline: auto;
    font-size: clamp(34px, 5vw, 58px);
}
.wccg-apex-preset-minimal_banner .wccg-apex-subtitle {
    color: var(--wccg-text-color, #555);
}
.wccg-apex-preset-minimal_banner .wccg-apex-float-wrap {
    display: none;
}

.wccg-apex-preset-dark_commerce .wccg-apex-slider {
    background-color: #0e0e10;
}
.wccg-apex-preset-dark_commerce .wccg-apex-container {
    justify-content: space-between;
}
.wccg-apex-preset-dark_commerce .wccg-apex-content {
    flex-basis: 42%;
}
.wccg-apex-preset-dark_commerce .wccg-apex-title {
    max-width: 12ch;
    margin-left: auto;
}
.wccg-apex-preset-dark_commerce .wccg-apex-subtitle {
    color: rgba(255,255,255,0.68);
}
.wccg-apex-preset-dark_commerce .wccg-apex-float-img {
    filter: drop-shadow(0 30px 80px rgba(0,0,0,0.54));
}

.wccg-apex-arrows-glass .wccg-apex-prev,
.wccg-apex-arrows-glass .wccg-apex-next,
.wccg-apex-arrows-solid .wccg-apex-prev,
.wccg-apex-arrows-solid .wccg-apex-next,
.wccg-apex-arrows-minimal .wccg-apex-prev,
.wccg-apex-arrows-minimal .wccg-apex-next {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    top: 50%;
    margin-top: -21px;
    transition: transform var(--wccg-transition-duration) var(--wccg-transition-cubic), background var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-apex-shell .wccg-apex-prev {
    left: clamp(28px, 4.5vw, 72px) !important;
    right: auto !important;
}

.wccg-apex-shell .wccg-apex-next {
    right: clamp(28px, 4.5vw, 72px) !important;
    left: auto !important;
}

.wccg-apex-shell .wccg-apex-prev::after,
.wccg-apex-shell .wccg-apex-next::after {
    font-size: 12px;
    font-weight: 800;
}

.wccg-apex-arrows-glass .wccg-apex-prev,
.wccg-apex-arrows-glass .wccg-apex-next {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    backdrop-filter: blur(14px);
}

.wccg-apex-arrows-solid .wccg-apex-prev,
.wccg-apex-arrows-solid .wccg-apex-next {
    background: var(--wccg-primary-color, #111);
}

.wccg-apex-arrows-minimal .wccg-apex-prev,
.wccg-apex-arrows-minimal .wccg-apex-next {
    background: transparent;
}

.wccg-apex-prev:hover,
.wccg-apex-next:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .wccg-apex-arrows-glass .wccg-apex-prev,
    .wccg-apex-arrows-glass .wccg-apex-next,
    .wccg-apex-arrows-solid .wccg-apex-prev,
    .wccg-apex-arrows-solid .wccg-apex-next,
    .wccg-apex-arrows-minimal .wccg-apex-prev,
    .wccg-apex-arrows-minimal .wccg-apex-next {
        width: 36px;
        height: 36px;
        margin-top: -18px;
    }

    .wccg-apex-shell .wccg-apex-prev {
        left: 16px !important;
    }

    .wccg-apex-shell .wccg-apex-next {
        right: 16px !important;
    }

    .wccg-apex-shell .wccg-apex-prev::after,
    .wccg-apex-shell .wccg-apex-next::after {
        font-size: 10px;
    }
}

.wccg-apex-dots-line .wccg-apex-pagination .swiper-pagination-bullet {
    width: 28px;
    height: 3px;
    border-radius: 999px;
}

.wccg-apex-dots-dots .wccg-apex-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.wccg-apex-dots-numbers .wccg-apex-pagination {
    counter-reset: apex-dot;
}

.wccg-apex-dots-numbers .wccg-apex-pagination .swiper-pagination-bullet {
    width: 24px;
    height: 24px;
    color: #fff;
    background: transparent;
    opacity: 0.58;
    counter-increment: apex-dot;
}

.wccg-apex-dots-numbers .wccg-apex-pagination .swiper-pagination-bullet::before {
    content: counter(apex-dot, decimal-leading-zero);
    font-size: 11px;
    font-weight: 700;
}

.wccg-apex-dots-numbers .wccg-apex-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

@media (max-width: 991px) {
    .wccg-apex-mobile-image_first .wccg-apex-container { flex-direction: column-reverse !important; }
    .wccg-apex-mobile-hide_image .wccg-apex-float-wrap { display: none; }
    .wccg-apex-content-y-top .wccg-apex-container,
    .wccg-apex-content-y-bottom .wccg-apex-container { padding-top: 70px; padding-bottom: 70px; }
    .wccg-apex-actions { justify-content: center; }
}

.wccg-product-tabs .wccg-section-header {
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.wccg-tab-nav {
    gap: 7px;
}

.wccg-tab-btn {
    min-height: 36px;
    padding: 0 14px;
    border-color: var(--wccg-premium-border, rgba(31,31,31,0.075));
    background: #fff;
    color: var(--wccg-text-color, #5f5f5f);
    font-size: 12px;
    font-weight: 650;
    transition: background var(--wccg-transition-duration) var(--wccg-transition-cubic), color var(--wccg-transition-duration) var(--wccg-transition-cubic), border-color var(--wccg-transition-duration) var(--wccg-transition-cubic), transform var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-tab-btn:hover,
.wccg-tab-btn.is-active {
    transform: translateY(-1px);
    background: var(--wccg-primary-color);
    border-color: var(--wccg-primary-color);
    color: #fff;
}

.wccg-brand-track-wrap {
    border-color: var(--wccg-premium-border, rgba(31,31,31,0.075));
    border-radius: var(--wccg-border-radius, 14px);
    background: #fff;
    box-shadow: none;
}

.wccg-brand-item {
    width: 170px;
    min-height: 88px;
    padding: 16px;
    border-right-color: rgba(31,31,31,0.065);
    font-size: 14px;
    font-weight: 750;
}

.wccg-brand-item img {
    max-width: 124px !important;
    max-height: 48px;
    opacity: 0.7;
    transition: filter var(--wccg-transition-duration) var(--wccg-transition-cubic), opacity var(--wccg-transition-duration) var(--wccg-transition-cubic), transform var(--wccg-transition-duration) var(--wccg-transition-cubic);
}

.wccg-brand-item:hover img {
    transform: translateY(-1px);
}

.wccg-marquee-wrapper {
    padding: 10px 0;
    background: var(--wccg-primary-color);
}

.wccg-marquee-viewport,
.wccg-marquee-track {
    gap: var(--marquee-gap, 42px);
}

.wccg-marquee-item {
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.wccg-marquee-icon {
    width: 20px;
    height: 20px;
}

.wccg-shop-reels {
    --wccg-reels-panel: 350px;
}

.wccg-shop-reels-shell {
    gap: 20px;
}

.wccg-shop-reels-track,
.wccg-shop-reels-products {
    border-radius: var(--wccg-border-radius, 18px);
    box-shadow: var(--wccg-card-shadow);
}

.wccg-shop-reels-track {
    background: #111;
}

.wccg-shop-reel-overlay {
    padding: 22px;
    background: linear-gradient(180deg, transparent 10%, rgba(0,0,0,0.66));
}

.wccg-shop-reel-overlay h3 {
    font-size: clamp(22px, 3vw, 26px);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.wccg-shop-reel-overlay p {
    color: rgba(255,255,255,0.8);
}

.wccg-shop-reels-products {
    border-color: var(--wccg-premium-border, rgba(31,31,31,0.075));
}

.wccg-reel-products-panel {
    padding: 16px;
}

.wccg-reel-products-head {
    border-bottom-color: var(--wccg-premium-border, rgba(31,31,31,0.075));
}

.wccg-reel-products-head span {
    font-size: 14px;
    font-weight: 750;
}

.wccg-reel-product {
    grid-template-columns: 68px minmax(0, 1fr) 28px;
    gap: 11px;
    padding: 10px 0;
    border-bottom-color: rgba(31,31,31,0.065);
}

.wccg-reel-product-img {
    width: 68px;
    height: 68px;
    border-radius: 10px;
}

.wccg-reel-product-info strong {
    font-weight: 650;
}

.wccg-reel-product-price {
    font-weight: 700;
}

.wccg-compare-bar {
    border-top: 1px solid var(--wccg-premium-border, rgba(31,31,31,0.075));
    box-shadow: 0 -10px 34px rgba(0,0,0,0.08);
}

.wccg-compare-bar-inner {
    padding: 12px 22px;
}

@media (max-width: 768px) {
    .wccg-cat-split,
    .wccg-cat-style-list {
        grid-template-columns: 1fr;
    }

    .wccg-cat-split-image {
        min-height: 210px;
    }

    .wccg-promo-grid,
    .wccg-promo-columns-2,
    .wccg-promo-columns-4 {
        grid-template-columns: 1fr;
    }

    .wccg-hero-promo-inner {
        padding: 34px 24px;
    }

    .wccg-hero-promo-title {
        font-size: 34px;
    }

    .wccg-shop-reels-shell {
        grid-template-columns: 1fr;
    }

    .wccg-shop-reels-track,
    .wccg-shop-reel {
        height: min(var(--wccg-reels-height, 680px), 76vh);
    }

    .wccg-shop-reels-products {
        min-height: 0;
    }

    .wccg-reel-products-panel {
        max-height: 260px;
    }
}

@media (max-width: 480px) {
    .wccg-cat-card-name,
    .wccg-cat-banner-name,
    .wccg-cat-spotlight-name {
        font-size: 18px !important;
    }

    .wccg-cat-circle-image {
        width: 118px !important;
        height: 118px !important;
    }

    .wccg-cat-minimal-link {
        grid-template-columns: 72px minmax(0, 1fr) 30px;
    }

.wccg-cat-minimal-image {
        width: 72px !important;
        height: 72px !important;
    }
}

/* ====================================================
   V1 MOBILE PRODUCT ACTION SYSTEM
==================================================== */
@media (min-width: 1025px) {
    .wccg-desktop-wishlist-off .wccg-wishlist-btn,
    .wccg-desktop-compare-off .wccg-compare-btn,
    .wccg-desktop-quickview-off .wccg-quickview-btn,
    .wccg-desktop-buy_now-off .wccg-buy-now-btn,
    .wccg-desktop-buy_now-off .wccg-minimal-buy-now-btn,
    .wccg-desktop-buy_now-off .wccg-xstore-buy-now-btn,
    .wccg-desktop-buy_now-off .wccg-catalog-buy-now-btn {
        display: none !important;
    }

    .wccg-desktop-wishlist-off.wccg-desktop-compare-off.wccg-desktop-quickview-off .wccg-floating-actions {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .wccg-mobile-wishlist-off .wccg-wishlist-btn,
    .wccg-mobile-compare-off .wccg-compare-btn,
    .wccg-mobile-quickview-off .wccg-quickview-btn,
    .wccg-mobile-buy_now-off .wccg-buy-now-btn,
    .wccg-mobile-buy_now-off .wccg-minimal-buy-now-btn,
    .wccg-mobile-buy_now-off .wccg-xstore-buy-now-btn,
    .wccg-mobile-buy_now-off .wccg-catalog-buy-now-btn {
        display: none !important;
    }

    .wccg-mobile-wishlist-off.wccg-mobile-compare-off.wccg-mobile-quickview-off .wccg-floating-actions {
        display: none !important;
    }

    .wccg-product-wrapper .wccg-floating-actions {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateX(8px) !important;
        pointer-events: none;
    }

    .wccg-product-wrapper.wccg-mobile-actions-active .wccg-floating-actions {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        pointer-events: auto;
    }

    .wccg-style-base .wccg-inside-add-to-cart,
    .wccg-style-pushup .wccg-pushup-actions,
    .wccg-style-expand .wccg-expand-actions,
    .wccg-style-xstore .wccg-xstore-hover-actions,
    .wccg-style-catalog .wccg-catalog-action-bar,
    .wccg-style-minimal .wccg-minimal-actions {
        gap: 8px;
    }

    .wccg-style-base .wccg-inside-add-to-cart {
        gap: 0;
    }

    .wccg-style-expand .wccg-expand-content {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    .wccg-style-xstore .wccg-xstore-hover-actions {
        justify-content: center;
        padding-top: 10px;
        background: transparent !important;
    }

    .wccg-style-base.wccg-mobile-actions-inactive .wccg-inside-add-to-cart {
        transform: translateY(100%) !important;
    }

    .wccg-style-base.wccg-mobile-actions-active .wccg-inside-add-to-cart {
        transform: translateY(0) !important;
    }

    .wccg-style-xstore.wccg-mobile-actions-inactive .wccg-xstore-hover-actions {
        bottom: -50px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .wccg-style-xstore.wccg-mobile-actions-active .wccg-xstore-hover-actions {
        bottom: 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .wccg-product-wrapper.wccg-mobile-actions-inactive :is(.wccg-inside-add-to-cart, .wccg-pushup-actions, .wccg-expand-actions, .wccg-xstore-hover-actions, .wccg-catalog-action-bar, .wccg-minimal-actions) :is(.wccg-wishlist-btn, .wccg-compare-btn, .wccg-quickview-btn, .wccg-buy-now-btn, .wccg-minimal-buy-now-btn, .wccg-xstore-buy-now-btn, .wccg-catalog-buy-now-btn) {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(6px) !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-width: 0 !important;
        overflow: hidden !important;
    }

    .wccg-product-wrapper.wccg-mobile-actions-active :is(.wccg-inside-add-to-cart, .wccg-pushup-actions, .wccg-expand-actions, .wccg-xstore-hover-actions, .wccg-catalog-action-bar, .wccg-minimal-actions) :is(.wccg-wishlist-btn, .wccg-compare-btn, .wccg-quickview-btn, .wccg-buy-now-btn, .wccg-minimal-buy-now-btn, .wccg-xstore-buy-now-btn, .wccg-catalog-buy-now-btn) {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        width: auto !important;
        min-width: unset !important;
        max-width: none !important;
        overflow: visible !important;
    }
}