/* Beta Page Styles - Category Tabs Layout */

/* Category Headers - ensure they work properly on beta page */
.beta-category-products-container .category-header-enhanced {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 200px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    margin-bottom: 2rem;
    width: 100%;
}

.beta-category-products-container .category-header-content-full {
    flex: 0 0 60%;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 8px;
    margin: 1rem;
    text-align: left;
    z-index: 1;
}

.beta-category-products-container .category-header-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}

.beta-category-products-container .category-header-title i {
    font-size: 1.8rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.beta-category-products-container .category-header-title .category-name {
    font-size: 2rem;
    font-weight: 700;
}

.beta-category-products-container .category-header-details {
    font-size: 1.1rem;
    margin-bottom: 0;
    opacity: 0.95;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .beta-category-products-container .category-header-enhanced {
        min-height: 150px;
    }
    
    .beta-category-products-container .category-header-content-full {
        flex: 0 0 80%;
        padding: 15px;
    }
    
    .beta-category-products-container .category-header-title {
        font-size: 1.5rem;
    }
    
    .beta-category-products-container .category-header-title .category-name {
        font-size: 1.5rem;
    }
}

/* Category Tabs Grid - 2 columns */
.beta-category-tabs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Keep 2 columns on mobile */
/* @media (max-width: 768px) {
    .beta-category-tabs-grid {
        grid-template-columns: 1fr;
    }
} */

/* Category Tab */
.beta-category-tab {
    background: var(--bs-body-bg, #fff);
    border: 2px solid var(--bs-border-color, #e0e0e0);
    border-radius: 0;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    grid-row: auto;
}

.dark-theme .beta-category-tab {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color, #495057);
}

/* Category Tab with Image - no overlay when expanded */
.beta-category-tab[style*="background-image"]:not(.expanded) {
    background-color: rgba(0, 0, 0, 0.3);
}

.beta-category-tab[style*="background-image"]:not(.expanded)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
    z-index: 0;
    pointer-events: none;
}

/* Remove overlay when expanded */
.beta-category-tab.expanded[style*="background-image"]::before {
    display: none;
}

.beta-category-tab:hover {
    border-color: #28a745;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.beta-category-tab.expanded {
    border-color: #28a745;
    background: #f8f9fa;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
}

.beta-category-tab-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
    min-height: 100%;
}

.beta-category-tab-icon {
    font-size: 2rem;
    color: #28a745;
    flex-shrink: 0;
}

.beta-category-tab-info {
    flex: 1;
}

.beta-category-tab-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.beta-category-tab-count {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.25rem;
}

.beta-category-tab-arrow {
    font-size: 1.5rem;
    color: #28a745;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.beta-category-tab.expanded .beta-category-tab-arrow {
    transform: rotate(180deg);
}

/* Product Group Tabs - same styling as category tabs but span full width */
.beta-product-group-tab {
    background: var(--bs-body-bg, #fff);
    border: 2px solid var(--bs-border-color, #e0e0e0);
    border-radius: 0;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    grid-row: auto;
    grid-column: 1 / -1; /* Span full width (both columns) */
}

.dark-theme .beta-product-group-tab {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color, #495057);
}

.beta-product-group-tab[style*="background-image"]:not(.expanded) {
    background-color: rgba(0, 0, 0, 0.3);
}

.beta-product-group-tab[style*="background-image"]:not(.expanded)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
    z-index: 0;
    pointer-events: none;
}

.beta-product-group-tab.expanded[style*="background-image"]::before {
    display: none;
}

.beta-product-group-tab:hover {
    border-color: #28a745;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.beta-product-group-tab.expanded {
    border-color: #28a745;
    background: #f8f9fa;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
}

.beta-product-group-tab-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    min-height: 100%;
    text-align: center;
}

.beta-product-group-tab-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.beta-product-group-tab-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.beta-product-group-tab-count {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.25rem;
}

.beta-product-group-tab-arrow {
    font-size: 1.5rem;
    color: #28a745;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.beta-product-group-tab.expanded .beta-product-group-tab-arrow {
    transform: rotate(180deg);
}

/* Product Group Products Container */
.beta-product-group-products-container {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    background: var(--bs-body-bg, #fff);
    border-radius: 0;
    border: 1px solid var(--bs-border-color, #e0e0e0);
    animation: slideDown 0.3s ease-out;
}

.dark-theme .beta-product-group-products-container {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color, #495057);
}

/* Product group products use same styling as category products */
.beta-product-group-products-container .category-products,
.beta-product-group-products-container .products-grid {
    width: 100% !important;
}

.beta-product-group-products-container .category-products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.beta-product-group-products-container .category-products .product-item {
    flex: 0 0 calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
    min-width: 0;
    transition: flex 0.4s ease, max-width 0.4s ease, width 0.4s ease !important;
    margin-bottom: 0;
}

/* Converted cards in product groups (listview style) - 100% width, same as featured/special */
.beta-product-group-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded):not(.featured-product):not(.product-in-specials),
.beta-product-group-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded):not(.featured-product):not(.product-in-specials) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
}

/* Featured and single-item-wide products in groups should be full width */
.beta-product-group-products-container .category-products .product-item.single-item-wide:not([data-converted-to-two-item="true"]),
.beta-product-group-products-container .category-products .product-item.featured-product,
.beta-product-group-products-container .category-products .product-item.product-in-specials {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Two-item category layout in groups */
.beta-product-group-products-container .category-products.two-item-category .product-item:not(.product-expanded):not(.single-item-wide):not(.featured-product):not(.product-in-specials),
.beta-product-group-products-container .category-products .product-item.two-item-layout-card:not(.product-expanded):not(.single-item-wide):not(.featured-product):not(.product-in-specials) {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
}

/* Expanded products in groups - must override base product-item rules */
.beta-product-group-products-container .category-products .product-item.product-expanded,
.beta-product-group-products-container .category-products.two-item-category .product-item.product-expanded,
.beta-product-group-products-container .category-products.single-item-category .product-item.product-expanded,
.beta-product-group-products-container .category-products .product-item.product-expanded:not(.single-item-wide):not(.two-item-layout) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    margin-bottom: 15px !important; /* Same spacing as regular cards */
    margin-top: 0 !important; /* No extra top margin */
    height: auto !important; /* Allow expanded cards to grow */
    min-height: auto !important; /* Remove fixed height for expanded cards */
}

/* Responsive sizing for product groups - same as categories */
@media (max-width: 1200px) {
    .beta-product-group-products-container .category-products .product-item:not(.single-item-wide):not(.two-item-layout) {
        flex: 0 0 calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
    }
}

@media (max-width: 992px) {
    .beta-product-group-products-container .category-products .product-item:not(.single-item-wide):not(.two-item-layout) {
        flex: 0 0 calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
    }
}

/* Mobile styles consolidated in main mobile media query below */

/* Products Container for each category (appears under the tab) */
.beta-category-products-container {
    grid-column: 1 / -1; /* Span full width below both tabs */
    /* grid-row will be set dynamically via JavaScript */
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    padding: 0.1rem;
    background: var(--bs-body-bg, #fff);
    border-radius: 8px;
    border: 1px solid var(--bs-border-color, #e0e0e0);
    animation: slideDown 0.3s ease-out;
}

.dark-theme .beta-category-products-container {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color, #495057);
}

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

/* Products grid container */
.beta-category-products-container .products-grid {
    width: 100% !important;
}

/* Category products container - this is where products are actually placed */
.beta-category-products-container .category-products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    width: 100% !important;
    justify-content: center !important; /* Center cards to align with tabs above */
}

@media (max-width: 576px) {
    .beta-category-products-container .category-products {
        gap: 10px !important;
    }
}

/* Product items - use same sizing as store page */
.beta-category-products-container .category-products .product-item {
    flex: 0 0 calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
    min-width: 0;
    transition: flex 0.4s ease, max-width 0.4s ease, width 0.4s ease !important;
    /* Ensure consistent card heights - account for 3-line titles and larger images */
    display: flex;
    flex-direction: column;
    margin-bottom: 5px; /* Consistent spacing between cards */
}

/* CRITICAL: Converted cards MUST override the base 25% width - put this IMMEDIATELY after base rule */
/* Converted cards (listview style) - 100% width, internal structure is two-item layout (image left, text right) */
/* MAXIMUM SPECIFICITY - must override ALL other rules */
.beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"],
.beta-category-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"],
.beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"].single-item-wide {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    display: flex !important;
}

/* Converted cards MUST override the base 25% width rule - put this RIGHT AFTER the base rule */
.beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"],
.beta-category-products-container .category-products .product-item.two-item-layout-card[data-converted-to-two-item="true"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
}

/* Converted single cards should be listview (100% width) - MAXIMUM SPECIFICITY */
/* This MUST override ALL other rules including expanded, featured, etc. */
/* Internal structure uses two-item layout (image left, text right) */
/* Converted cards (listview style) - 100% width, same as featured/special */
.beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded):not(.featured-product):not(.product-in-specials),
.beta-category-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded):not(.featured-product):not(.product-in-specials) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
}

/* Ensure product cards have proper structure and styling */
.beta-category-products-container .category-products .product-item .card,
.beta-category-products-container .category-products .product-item .product-card {
    display: flex;
    flex-direction: column;
    height: 520px; /* Fixed height so all cards are the same size */
    min-height: 520px; /* Increased to accommodate larger images (320px) + content */
    width: 100%;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.15s ease-in-out;
    background: var(--bs-body-bg, #fff);
}

.dark-theme .beta-category-products-container .category-products .product-item .card,
.dark-theme .beta-category-products-container .category-products .product-item .product-card {
    background: var(--bs-dark, #212529) !important;
    border-color: var(--bs-border-color, #495057);
}

.beta-category-products-container .category-products .product-item .card:hover,
.beta-category-products-container .category-products .product-item .product-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Reduce product title font size by 1 level (h5 -> h6 size) and make smaller */
.beta-category-products-container .product-title,
.beta-category-products-container h5.product-title,
.beta-category-products-container .card-title,
.beta-category-products-container h5.card-title,
.beta-product-group-products-container .product-title,
.beta-product-group-products-container h5.product-title,
.beta-product-group-products-container .card-title,
.beta-product-group-products-container h5.card-title {
    font-size: 0.9rem !important; /* Smaller than h6 (1rem) */
    font-weight: 600;
    line-height: 1.3 !important;
    /* Allow up to 3 lines with ellipsis if needed */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3; /* Standard property for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Fixed height to account for exactly 3 lines - ensures all cards same size */
    height: calc(0.9rem * 1.3 * 3); /* Exactly 3 lines height */
    min-height: calc(0.9rem * 1.3 * 3); /* 3 lines minimum */
    max-height: calc(0.9rem * 1.3 * 3); /* 3 lines maximum */
}

.beta-category-products-container .category-products .product-item .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    padding-bottom: 0.75rem; /* Reduce bottom padding */
    background: var(--bs-body-bg, #fff);
}

.dark-theme .beta-category-products-container .category-products .product-item .card-body {
    background: var(--bs-dark, #212529);
    color: var(--bs-body-color, #f1f1f1);
}

.beta-category-products-container .category-products .product-item .card-img-top,
.beta-category-products-container .category-products .product-item .product-image,
.beta-category-products-container .category-products .product-item img,
.beta-category-products-container .category-products .product-item .single-item-image img,
.beta-category-products-container .category-products .product-item .two-item-image img {
    width: 100%;
    height: auto; /* Let images use their natural aspect ratio */
    min-height: 200px; /* Minimum height to ensure images aren't too small */
    max-height: 350px; /* Increased max height to allow larger images */
    object-fit: contain;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0; /* Remove padding from images themselves */
    display: block;
    flex-shrink: 0; /* Prevent image from shrinking */
    border-radius: 0 !important; /* Remove rounded corners to match regular cards */
}

/* Ensure image containers have consistent sizing */
.beta-category-products-container .category-products .product-item .single-item-image,
.beta-category-products-container .category-products .product-item .two-item-image {
    width: 100%; /* Fill container width */
    height: auto; /* Let container adapt to image */
    min-height: 200px; /* Minimum height for consistency */
    max-height: 350px; /* Increased max height to allow larger images */
    overflow: hidden;
    display: flex;
    align-items: stretch; /* Stretch to fill container height */
    justify-content: center;
    flex-shrink: 0;
    padding: 0; /* No padding at all */
    margin: 0; /* Remove any margins */
    border-radius: 0 !important; /* Remove rounded corners to match regular cards */
}

/* Override common.css rounded corners on two-item images */
.beta-category-products-container .category-products .product-item .two-item-image .product-image,
.beta-category-products-container .category-products .product-item.two-item-layout-card .two-item-image .product-image,
.beta-category-products-container .category-products.two-item-category .product-item .two-item-image .product-image {
    border-radius: 0 !important; /* Remove rounded corners to match regular cards */
}

.beta-product-group-products-container .category-products .product-item .two-item-image .product-image,
.beta-product-group-products-container .category-products .product-item.two-item-layout-card .two-item-image .product-image,
.beta-product-group-products-container .category-products.two-item-category .product-item .two-item-image .product-image {
    border-radius: 0 !important; /* Remove rounded corners to match regular cards */
}

/* Ensure two-item cards have same height as regular cards */
.beta-category-products-container .category-products .product-item.two-item-layout-card,
.beta-category-products-container .category-products.two-item-category .product-item,
.beta-product-group-products-container .category-products .product-item.two-item-layout-card,
.beta-product-group-products-container .category-products.two-item-category .product-item {
    height: 520px !important; /* Fixed height to match regular cards */
    min-height: 520px !important; /* Match regular cards */
}

.beta-category-products-container .category-products .product-item.two-item-layout-card .card,
.beta-category-products-container .category-products.two-item-category .product-item .card,
.beta-category-products-container .category-products .product-item.two-item-layout-card .product-card,
.beta-category-products-container .category-products.two-item-category .product-item .product-card,
.beta-product-group-products-container .category-products .product-item.two-item-layout-card .card,
.beta-product-group-products-container .category-products.two-item-category .product-item .card,
.beta-product-group-products-container .category-products .product-item.two-item-layout-card .product-card,
.beta-product-group-products-container .category-products.two-item-category .product-item .product-card {
    height: 520px !important; /* Fixed height to match regular cards */
    min-height: 520px !important; /* Match regular cards */
}

/* Ensure two-item cards have same attribute badge positioning as regular cards (bottom left) */
.beta-category-products-container .category-products .product-item.two-item-layout-card .product-attribute-icons,
.beta-category-products-container .category-products.two-item-category .product-item .product-attribute-icons,
.beta-product-group-products-container .category-products .product-item.two-item-layout-card .product-attribute-icons,
.beta-product-group-products-container .category-products.two-item-category .product-item .product-attribute-icons {
    position: absolute !important;
    bottom: 10px !important; /* Match regular cards - bottom left positioning */
    left: 10px !important; /* Match regular cards - bottom left positioning */
    top: auto !important;
    right: auto !important;
    z-index: 10 !important; /* Match regular cards z-index */
}

/* Reduce spacing for expanded cards - images should fill more space */
.beta-category-products-container .category-products .product-item.product-expanded .single-item-image,
.beta-category-products-container .category-products .product-item.product-expanded .two-item-image {
    padding: 0 !important; /* No padding for expanded cards */
    margin: 0 !important;
    align-items: stretch !important; /* Stretch to fill container */
}

.beta-category-products-container .category-products .product-item.product-expanded .single-item-image img,
.beta-category-products-container .category-products .product-item.product-expanded .two-item-image img,
.beta-category-products-container .category-products .product-item.product-expanded .product-image {
    padding: 0 !important;
    margin: 0 !important;
    max-height: 400px !important; /* Allow larger images in expanded cards */
}

/* Remove padding from parent content containers for expanded cards */
.beta-category-products-container .category-products .product-item.product-expanded .single-item-content,
.beta-category-products-container .category-products .product-item.product-expanded .two-item-content {
    padding-top: 0 !important; /* Remove top padding */
    padding-bottom: 0 !important; /* Remove bottom padding */
    margin-top: 0 !important; /* Remove top margin */
    margin-bottom: 0 !important; /* Remove bottom margin */
}

.beta-category-products-container .category-products .product-item.product-expanded .single-item-content .single-item-image,
.beta-category-products-container .category-products .product-item.product-expanded .two-item-content .two-item-image {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove all spacing above images and below cards - override common.css */
/* BUT converted cards need padding like featured/special items */
.beta-category-products-container .category-products .product-item:not([data-converted-to-two-item="true"]) .single-item-content,
.beta-category-products-container .category-products .product-item:not([data-converted-to-two-item="true"]) .two-item-content {
    padding: 0 !important; /* Override common.css padding: 15px - remove all padding */
    margin: 0 !important; /* Remove all margins */
    gap: 0 !important; /* Remove gap between image and content */
}

.beta-category-products-container .category-products .product-item .card,
.beta-category-products-container .category-products .product-item .product-card {
    padding: 0 !important; /* No padding on card */
    margin-bottom: 0 !important; /* No bottom margin on card */
}

.beta-category-products-container .category-products .product-item .single-item-info,
.beta-category-products-container .category-products .product-item .two-item-info,
.beta-category-products-container .category-products .product-item .card-body {
    padding: 0.5rem 0.75rem !important; /* Minimal padding inside info section */
    margin: 0 !important; /* No margins */
}

/* Force product details to display on separate lines - override any inline styles or other CSS */
.beta-category-products-container .category-products .product-item .product-details small.d-block,
.beta-category-products-container .category-products .product-item .product-details small {
    display: block !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.4 !important;
    width: 100% !important;
}

.beta-category-products-container .category-products .product-item .product-details small:last-child {
    margin-bottom: 0 !important;
}

.beta-category-products-container .category-products .product-item .product-details small:last-child {
    margin-bottom: 0 !important;
}

/* Also apply to product groups */
.beta-product-group-products-container .category-products .product-item .product-details small.d-block,
.beta-product-group-products-container .category-products .product-item .product-details small {
    display: block !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.4 !important;
    width: 100% !important;
}

.beta-product-group-products-container .category-products .product-item .product-details small:last-child {
    margin-bottom: 0 !important;
}

.beta-category-products-container .category-products .product-item .single-item-content .single-item-image,
.beta-category-products-container .category-products .product-item .two-item-content .two-item-image {
    margin: 0 !important;
    padding: 0 !important;
}

/* Product group cards - same consistent sizing */
.beta-product-group-products-container .category-products .product-item .card,
.beta-product-group-products-container .category-products .product-item .product-card {
    min-height: 520px; /* Increased to accommodate larger images (320px) + content */
    height: 520px; /* Fixed height so all cards are the same size */
    display: flex;
    flex-direction: column;
}

/* Expanded cards in product groups - ensure card is full width */
.beta-product-group-products-container .category-products .product-item.product-expanded .card,
.beta-product-group-products-container .category-products .product-item.product-expanded .product-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
}

.beta-product-group-products-container .category-products .product-item .product-image,
.beta-product-group-products-container .category-products .product-item img,
.beta-product-group-products-container .category-products .product-item .single-item-image img,
.beta-product-group-products-container .category-products .product-item .two-item-image img {
    width: 100% !important; /* Fill container width */
    height: auto !important; /* Let images use their natural aspect ratio */
    max-height: 350px !important; /* Increased max height to allow larger images */
    object-fit: contain;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 !important; /* Remove padding from images themselves */
    display: block;
    flex-shrink: 0; /* Prevent image from shrinking */
    border-radius: 0 !important; /* Remove rounded corners to match regular cards */
}

.beta-product-group-products-container .category-products .product-item .single-item-image,
.beta-product-group-products-container .category-products .product-item .two-item-image {
    width: 100% !important; /* Fill container width */
    height: auto !important; /* Let container adapt to image */
    max-height: 350px !important; /* Increased max height to allow larger images */
    overflow: hidden !important;
    display: flex;
    align-items: stretch !important; /* Stretch to fill container height */
    justify-content: center;
    padding: 0 !important; /* No padding at all */
    margin: 0 !important; /* Remove any margins */
    flex-shrink: 0;
    border-radius: 0 !important; /* Remove rounded corners to match regular cards */
}

/* Reduce spacing for expanded cards in product groups */
.beta-product-group-products-container .category-products .product-item.product-expanded .single-item-image,
.beta-product-group-products-container .category-products .product-item.product-expanded .two-item-image {
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important; /* Stretch to fill container */
}

.beta-product-group-products-container .category-products .product-item.product-expanded .single-item-image img,
.beta-product-group-products-container .category-products .product-item.product-expanded .two-item-image img,
.beta-product-group-products-container .category-products .product-item.product-expanded .product-image {
    padding: 0 !important;
    margin: 0 !important;
    max-height: 400px !important; /* Allow larger images in expanded cards */
}

/* Remove padding from parent content containers for expanded cards in product groups */
.beta-product-group-products-container .category-products .product-item.product-expanded .single-item-content,
.beta-product-group-products-container .category-products .product-item.product-expanded .two-item-content {
    padding-top: 0 !important; /* Remove top padding */
    padding-bottom: 0 !important; /* Remove bottom padding */
}

.beta-product-group-products-container .category-products .product-item.product-expanded .single-item-content .single-item-image,
.beta-product-group-products-container .category-products .product-item.product-expanded .two-item-content .two-item-image {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure product cards have proper styling */
.beta-category-products-container .products-grid .product-item .product-card,
.beta-category-products-container .products-grid .product-item .card {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.beta-category-products-container .products-grid .product-item .product-image,
.beta-category-products-container .products-grid .product-item img.product-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Responsive sizing - same as store page */
@media (max-width: 1200px) {
    .beta-category-products-container .category-products .product-item:not(.single-item-wide):not(.two-item-layout) {
        flex: 0 0 calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
    }
}

@media (max-width: 992px) {
    .beta-category-products-container .category-products .product-item:not(.single-item-wide):not(.two-item-layout) {
        flex: 0 0 calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
    }
}

@media (max-width: 768px) {
    /* MOBILE: Force 2 columns for regular items - override ALL other rules including common.css */
    /* Even if items have single-item-wide class, force 2 columns if category is regular (not list-view-active, not single-item-category) */
    /* This specifically overrides common.css rules that force single-item-wide to be 100% width */
    /* EXCLUDE converted cards - they should be 100% width (listview) */
    .beta-category-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded):not([data-converted-to-two-item="true"]),
    .beta-category-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item.single-item-wide:not(.featured-product):not(.product-in-specials):not(.product-expanded):not([data-converted-to-two-item="true"]) {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        min-width: calc(50% - 10px) !important;
    }
    
    /* MOBILE: Converted cards MUST be 100% width (listview) - override the 50% rule above */
    .beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded),
    .beta-category-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Hide descriptions on mobile for regular, featured, and special cards (not expanded) */
    .beta-category-products-container .category-products .product-item:not(.product-expanded) .product-description,
    .beta-category-products-container .category-products .product-item:not(.product-expanded) .card-body .product-description,
    .beta-category-products-container .category-products .product-item:not(.product-expanded) .single-item-info .product-description,
    .beta-category-products-container .category-products .product-item:not(.product-expanded) .two-item-info .product-description,
    .beta-category-products-container .category-products .product-item.featured-product:not(.product-expanded) .product-description,
    .beta-category-products-container .category-products .product-item.single-item-wide:not(.product-expanded) .product-description,
    .beta-category-products-container .category-products .product-item:not(.product-expanded) .card-text.product-description,
    .beta-category-products-container .category-products .product-item:not(.product-expanded) p.product-description {
        display: none !important;
    }
    
    /* Show descriptions when expanded on mobile */
    .beta-category-products-container .category-products .product-item.product-expanded .product-description,
    .beta-category-products-container .category-products .product-item.product-expanded .product-expanded-description,
    .beta-category-products-container .category-products .product-item.product-expanded .card-text.product-description,
    .beta-category-products-container .category-products .product-item.product-expanded p.product-description {
        display: block !important;
    }
    
    /* ALL cards on mobile: image full width, content below (stacked layout) */
    /* Force stacked layout for regular items (2 columns) even if they have single-item-wide structure */
    /* EXCLUDE converted cards (data-converted-to-two-item) - they should be two columns like featured/special */
    .beta-category-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded):not([data-converted-to-two-item="true"]) .single-item-content,
    .beta-category-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded):not([data-converted-to-two-item="true"]) .two-item-content,
    .beta-category-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded):not([data-converted-to-two-item="true"]) .card {
        flex-direction: column !important;
        display: flex !important;
    }
    
    /* Converted cards (listview style) - two columns (image left, text right) on mobile, same as featured/special */
    /* MAXIMUM SPECIFICITY - MUST override ALL other rules including common.css */
    .beta-category-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-content,
    .beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"].single-item-wide:not(.product-expanded) .single-item-content,
    .beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-content {
        display: flex !important;
        flex-direction: row !important; /* Image left, text right - same as featured/special */
        align-items: flex-start !important;
        gap: 15px !important;
        padding: 15px !important; /* Add padding like featured/special items */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Image container - must be 33% width, NOT full width - MAXIMUM SPECIFICITY */
    .beta-category-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-image,
    .beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"].single-item-wide:not(.product-expanded) .single-item-image,
    .beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-image {
        flex: 0 0 33% !important; /* Same as featured/special items */
        max-width: 33% !important;
        min-width: 33% !important;
        width: 33% !important;
        /* Override any full-width rules */
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Image inside - must NOT be full width - MAXIMUM SPECIFICITY */
    .beta-category-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-image .product-image,
    .beta-category-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-image img,
    .beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-image .product-image,
    .beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-image img {
        width: 100% !important; /* 100% of the 33% container */
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    /* Info container - must be flex: 1 to take remaining space - MAXIMUM SPECIFICITY */
    .beta-category-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-info,
    .beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"].single-item-wide:not(.product-expanded) .single-item-info,
    .beta-category-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-info {
        flex: 1 1 auto !important;
        width: auto !important; /* NOT full width */
        max-width: 67% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Expanded cards on mobile: image full width, content below (stacked) */
    .beta-category-products-container .category-products .product-item.product-expanded .single-item-content,
    .beta-category-products-container .category-products .product-item.product-expanded .two-item-content,
    .beta-category-products-container .category-products .product-item.product-expanded .card {
        flex-direction: column !important;
        display: flex !important;
    }
    
    /* Regular items (2 columns): image and content should stack */
    .beta-category-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded) .single-item-image,
    .beta-category-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded) .two-item-image,
    .beta-category-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded) .product-image {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }
    
    .beta-category-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded) .single-item-info,
    .beta-category-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded) .two-item-info,
    .beta-category-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded) .card-body {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }
    
    /* Expanded cards on mobile: image full width, content below */
    .beta-category-products-container .category-products .product-item.product-expanded .single-item-image,
    .beta-category-products-container .category-products .product-item.product-expanded .two-item-image,
    .beta-category-products-container .category-products .product-item.product-expanded .product-image,
    .beta-category-products-container .category-products .product-item.product-expanded img.product-image {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .beta-category-products-container .category-products .product-item.product-expanded .single-item-info,
    .beta-category-products-container .category-products .product-item.product-expanded .two-item-info,
    .beta-category-products-container .category-products .product-item.product-expanded .card-body {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }
    
    /* MOBILE: Product groups - Force 2 columns for regular items */
    .beta-product-group-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded),
    .beta-product-group-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item.single-item-wide:not(.featured-product):not(.product-in-specials):not(.product-expanded) {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        min-width: calc(50% - 10px) !important;
    }
    
    /* Only featured items or items in list-view-active categories should be full width for product groups */
    .beta-product-group-products-container .category-products.list-view-active .product-item,
    .beta-product-group-products-container .category-products.single-item-category .product-item,
    .beta-product-group-products-container .category-products .product-item.featured-product {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .beta-product-group-products-container .category-products .product-item:not(.product-expanded) .product-description,
    .beta-product-group-products-container .category-products .product-item:not(.product-expanded) .card-body .product-description,
    .beta-product-group-products-container .category-products .product-item:not(.product-expanded) .single-item-info .product-description,
    .beta-product-group-products-container .category-products .product-item:not(.product-expanded) .two-item-info .product-description,
    .beta-product-group-products-container .category-products .product-item.featured-product:not(.product-expanded) .product-description,
    .beta-product-group-products-container .category-products .product-item.single-item-wide:not(.product-expanded) .product-description,
    .beta-product-group-products-container .category-products .product-item:not(.product-expanded) .card-text.product-description,
    .beta-product-group-products-container .category-products .product-item:not(.product-expanded) p.product-description {
        display: none !important;
    }
    
    /* Show descriptions when expanded on mobile */
    .beta-product-group-products-container .category-products .product-item.product-expanded .product-description,
    .beta-product-group-products-container .category-products .product-item.product-expanded .product-expanded-description,
    .beta-product-group-products-container .category-products .product-item.product-expanded .card-text.product-description,
    .beta-product-group-products-container .category-products .product-item.product-expanded p.product-description {
        display: block !important;
    }
    
    /* ALL cards on mobile: image full width, content below (stacked layout) for product groups */
    /* EXCLUDE converted cards (data-converted-to-two-item) - they should be two columns like featured/special */
    .beta-product-group-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded):not([data-converted-to-two-item="true"]) .single-item-content,
    .beta-product-group-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded):not([data-converted-to-two-item="true"]) .two-item-content,
    .beta-product-group-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded):not([data-converted-to-two-item="true"]) .card {
        flex-direction: column !important;
        display: flex !important;
    }
    
    /* Converted cards (listview style) in product groups - two columns (image left, text right) on mobile, same as featured/special */
    /* MUST override all stacking rules for converted cards */
    .beta-product-group-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-content,
    .beta-product-group-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-content {
        display: flex !important;
        flex-direction: row !important; /* Image left, text right - same as featured/special */
        align-items: flex-start !important;
        gap: 15px !important;
        padding: 15px !important; /* Add padding like featured/special items */
    }
    
    /* Image container - must be 33% width, NOT full width */
    .beta-product-group-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-image,
    .beta-product-group-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-image {
        flex: 0 0 33% !important; /* Same as featured/special items */
        max-width: 33% !important;
        min-width: 0 !important;
        width: 33% !important;
        /* Override any full-width rules */
        flex-shrink: 0 !important;
    }
    
    /* Image inside - must NOT be full width */
    .beta-product-group-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-image .product-image,
    .beta-product-group-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-image img,
    .beta-product-group-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-image .product-image,
    .beta-product-group-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-image img {
        width: 100% !important; /* 100% of the 33% container */
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    /* Info container - must be flex: 1 to take remaining space */
    .beta-product-group-products-container .category-products .product-item[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-info,
    .beta-product-group-products-container .category-products .product-item.single-item-wide[data-converted-to-two-item="true"]:not(.product-expanded) .single-item-info {
        flex: 1 !important;
        width: auto !important; /* NOT full width */
        max-width: none !important;
    }
    
    /* Regular items (2 columns): image and content should stack for product groups */
    .beta-product-group-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded) .single-item-image,
    .beta-product-group-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded) .two-item-image,
    .beta-product-group-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded) .product-image {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }
    
    .beta-product-group-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded) .single-item-info,
    .beta-product-group-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded) .two-item-info,
    .beta-product-group-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.featured-product):not(.product-in-specials):not(.product-expanded) .card-body {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }
    
    /* Expanded cards on mobile: image full width, content below (stacked) */
    .beta-product-group-products-container .category-products .product-item.product-expanded .single-item-content,
    .beta-product-group-products-container .category-products .product-item.product-expanded .two-item-content,
    .beta-product-group-products-container .category-products .product-item.product-expanded .card {
        flex-direction: column !important;
        display: flex !important;
    }
    
    .beta-product-group-products-container .category-products .product-item.product-expanded .single-item-image,
    .beta-product-group-products-container .category-products .product-item.product-expanded .two-item-image,
    .beta-product-group-products-container .category-products .product-item.product-expanded .product-image,
    .beta-product-group-products-container .category-products .product-item.product-expanded img.product-image {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .beta-product-group-products-container .category-products .product-item.product-expanded .single-item-info,
    .beta-product-group-products-container .category-products .product-item.product-expanded .two-item-info,
    .beta-product-group-products-container .category-products .product-item.product-expanded .card-body {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }
}

@media (max-width: 576px) {
    /* MOBILE: Small screens - still 2 columns for regular items */
    .beta-category-products-container .category-products:not(.list-view-active) .product-item:not(.single-item-wide):not(.two-item-layout):not(.product-expanded):not(.featured-product):not(.product-in-specials),
    .beta-category-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.single-item-wide):not(.two-item-layout):not(.product-expanded):not(.featured-product):not(.product-in-specials) {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        min-width: calc(50% - 10px) !important;
    }
    
    .beta-product-group-products-container .category-products:not(.list-view-active) .product-item:not(.single-item-wide):not(.two-item-layout):not(.product-expanded):not(.featured-product):not(.product-in-specials),
    .beta-product-group-products-container .category-products:not(.list-view-active):not(.single-item-category) .product-item:not(.single-item-wide):not(.two-item-layout):not(.product-expanded):not(.featured-product):not(.product-in-specials) {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        min-width: calc(50% - 10px) !important;
    }
    
    /* Ensure single-item-wide, featured, and specials are full width */
    /* BUT converted cards with two-item-layout-card should be 50% width */
    .beta-category-products-container .category-products .product-item.single-item-wide:not(.two-item-layout-card),
    .beta-category-products-container .category-products .product-item.featured-product,
    .beta-category-products-container .category-products .product-item.product-in-specials,
    .beta-product-group-products-container .category-products .product-item.single-item-wide:not(.two-item-layout-card),
    .beta-product-group-products-container .category-products .product-item.featured-product,
    .beta-product-group-products-container .category-products .product-item.product-in-specials {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Two-item category layout */
.beta-category-products-container .category-products.two-item-category .product-item:not(.product-expanded):not(.single-item-wide):not(.featured-product):not(.product-in-specials),
.beta-category-products-container .category-products .product-item.two-item-layout-card:not(.product-expanded):not(.single-item-wide):not(.featured-product):not(.product-in-specials) {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
}

/* Expanded products should span full width (4 columns) and move to top - Desktop default */
/* BUT converted cards should stay at 50% width even if expanded class is added */
.beta-category-products-container .category-products .product-item.product-expanded:not([data-converted-to-two-item="true"]),
.beta-category-products-container .category-products.two-item-category .product-item.product-expanded:not([data-converted-to-two-item="true"]),
.beta-category-products-container .category-products.single-item-category .product-item.product-expanded:not([data-converted-to-two-item="true"]),
.beta-category-products-container .category-products .product-item.single-item-wide.product-expanded:not([data-converted-to-two-item="true"]),
.beta-product-group-products-container .category-products .product-item.product-expanded:not([data-converted-to-two-item="true"]) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
 /* Move to top of flex container */
    margin-bottom: 15px !important; /* Same spacing as regular cards */
    margin-top: 0 !important; /* No extra top margin */
    height: auto !important; /* Allow expanded cards to grow */
    min-height: auto !important; /* Remove fixed height for expanded cards */
    transition: flex 0.4s ease, max-width 0.4s ease, width 0.4s ease !important;
}

/* Desktop: Ensure expanded products work correctly and move to top */
@media (min-width: 769px) {
    .beta-category-products-container .category-products .product-item.product-expanded,
    .beta-category-products-container .category-products.two-item-category .product-item.product-expanded,
    .beta-category-products-container .category-products.single-item-category .product-item.product-expanded,
    .beta-category-products-container .category-products .product-item.product-expanded:not(.single-item-wide):not(.two-item-layout),
    .beta-category-products-container .category-products .product-item.single-item-wide.product-expanded,
    .beta-product-group-products-container .category-products .product-item.product-expanded,
    .beta-product-group-products-container .category-products.two-item-category .product-item.product-expanded,
    .beta-product-group-products-container .category-products.single-item-category .product-item.product-expanded,
    .beta-product-group-products-container .category-products .product-item.product-expanded:not(.single-item-wide):not(.two-item-layout),
    .beta-product-group-products-container .category-products .product-item.single-item-wide.product-expanded {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
 /* Move to top */
        margin-bottom: 15px !important; /* Same spacing as regular cards */
        margin-top: 0 !important; /* No extra top margin */
        height: auto !important; /* Allow expanded cards to grow */
        min-height: auto !important; /* Remove fixed height for expanded cards */
    }
    
    /* Ensure the card itself is also full width for product groups */
    .beta-product-group-products-container .category-products .product-item.product-expanded .card,
    .beta-product-group-products-container .category-products .product-item.product-expanded .product-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Ensure parent container allows wrapping */
    .beta-category-products-container .category-products,
    .beta-product-group-products-container .category-products {
        flex-wrap: wrap !important;
    }
}

/* Single item wide and featured items */
/* BUT converted cards with two-item-layout-card should be 50% width */
/* Featured and single-item-wide products should be full width (including converted cards) */
.beta-category-products-container .category-products .product-item.single-item-wide,
.beta-category-products-container .category-products .product-item.featured-product,
.beta-category-products-container .category-products .product-item.product-in-specials {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* List view active (mobile) */
.beta-category-products-container .category-products.list-view-active .product-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Product group banners - span full width BETWEEN category tab rows */
.beta-category-tabs-grid .product-group-banner-container {
    grid-column: 1 / -1; /* Span full width of grid */
    margin: 0.25rem 0;
    width: 100%;
}

/* Product group banner hero styling - match store page */
.beta-category-tabs-grid .product-group-banner-hero {
    position: relative;
    width: 100%;
    min-height: 200px;
    margin-bottom: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.beta-category-tabs-grid .product-group-banner-media {
    width: 100%;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.beta-category-tabs-grid .product-group-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.beta-category-tabs-grid .product-group-banner-overlay .container {
    position: relative;
    z-index: 1;
}

.beta-category-tabs-grid .product-group-banner-overlay .row {
    align-items: center;
}

.beta-category-tabs-grid .product-group-banner-overlay .col-md-8 {
    text-align: left;
}

.beta-category-tabs-grid .product-group-banner-overlay .col-md-4 {
    text-align: right;
}

.beta-category-tabs-grid .product-group-banner-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.beta-category-tabs-grid .product-group-banner-description {
    font-size: 1.1rem;
    margin: 0;
    opacity: 0.95;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Also apply to product-group-banner-hero without beta-category-tabs-grid prefix for consistency */
.product-group-banner-hero {
    position: relative;
    width: 100%;
    min-height: 200px;
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.product-group-banner-media {
    width: 100%;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.product-group-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.product-group-banner-overlay .container {
    position: relative;
    z-index: 1;
}

.product-group-banner-overlay .row {
    align-items: center;
}

.product-group-banner-overlay .col-md-8 {
    text-align: left;
}

.product-group-banner-overlay .col-md-4 {
    text-align: right;
}

.product-group-banner-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.product-group-banner-description {
    font-size: 1.1rem;
    margin: 0;
    opacity: 0.95;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.product-group-banner-subtitle {
    font-size: 0.95rem;
    margin-top: 0.5rem;
    opacity: 0.9;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .beta-category-tabs-grid .product-group-banner-hero,
    .product-group-banner-hero {
        min-height: 150px;
    }
    
    .beta-category-tabs-grid .product-group-banner-media,
    .product-group-banner-media {
        min-height: 150px;
    }
    
    .beta-category-tabs-grid .product-group-banner-overlay,
    .product-group-banner-overlay {
        padding: 1.5rem;
    }
    
    .beta-category-tabs-grid .product-group-banner-title,
    .product-group-banner-title {
        font-size: 1.6rem;
    }
    
    .beta-category-tabs-grid .product-group-banner-description,
    .product-group-banner-description {
        font-size: 1rem;
    }
}

/* Products Container (old - for backward compatibility) */
.beta-products-container {
    margin-top: 2rem;
    animation: fadeIn 0.4s ease;
}

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

/* Products Grid - same as store page */
.beta-products-container #products-grid {
    width: 100%;
}

.beta-products-container #products-grid .category-products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    width: 100% !important;
}

.beta-products-container #products-grid .product-item {
    flex: 0 0 calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
    min-width: 0;
    transition: flex 0.4s ease, max-width 0.4s ease, width 0.4s ease !important;
}

/* Override for special layouts */
.beta-products-container #products-grid .category-products.single-item-category .product-item,
.beta-products-container #products-grid .category-products.list-view-active .product-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

.beta-products-container #products-grid .category-products.two-item-category .product-item {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
}

@media (max-width: 992px) {
    .beta-products-container #products-grid .product-item {
        flex: 0 0 calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
    }
}

@media (max-width: 768px) {
    .beta-products-container #products-grid .product-item {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }
}

@media (max-width: 576px) {
    .beta-products-container #products-grid .product-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Beta unified scrollers - one layout for all sections */
.beta-unified-scrollers {
    margin-bottom: 2rem;
}
.beta-unified-section {
    margin-bottom: 1.5rem;
}
.beta-unified-section-header {
    padding: 0.5rem 0 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}
.beta-unified-section-header-visual {
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.beta-unified-section-header-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.beta-unified-section-header-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    padding: 0.35rem 0.85rem;
    border-radius: 8px; /* match container .beta-unified-section-header */
    background: rgba(0, 0, 0, 0.5);
    max-width: 90%;
}
.beta-unified-section-header:not(.beta-unified-section-header-visual) .beta-unified-section-header-inner {
    background: rgba(0, 0, 0, 0.06);
}
.beta-unified-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: inherit;
}
.beta-unified-section-header-visual .beta-unified-section-title {
    font-size: 1.15rem;
}
.beta-unified-scrollers .horizontal-scroller {
    margin: 0;
}
.beta-unified-scrollers .horizontal-scroller-container {
    position: relative;
}
.beta-unified-scrollers .horizontal-scroller-list {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 0.25rem 0;
    list-style: none;
    margin: 0;
}

/* Narrower tiles in horizontal scrollers (less width, image height unchanged) */
.beta-unified-scrollers .horizontal-scroller-list .horizontal-scroller-item {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}

/* Single-item section: same horizontal padding as scroller list so tile width aligns */
.beta-unified-single-card {
    margin: 0.5rem 0;
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
}
.beta-unified-single-card-inner {
    padding: 0.25rem 0;
    width: 100%;
    box-sizing: border-box;
}
.beta-unified-single-card-inner .horizontal-scroller-list {
    width: 100%;
}
.beta-unified-section-single .beta-unified-single-card .horizontal-scroller-list {
    display: flex;
    overflow: visible;
    padding: 0;
    gap: 0;
    width: 100%;
}
.beta-unified-section-single .beta-unified-single-card .horizontal-scroller-item {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    list-style: none;
}
.beta-unified-section-single .beta-unified-single-card .product-tile {
    display: grid !important;
    grid-template-columns: minmax(140px, 42%) 1fr;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.75rem 1rem;
    align-items: center;
    min-height: 0;
    padding: 0.5rem;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
}
.beta-unified-section-single .beta-unified-single-card .product-tile-image-container {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    min-height: 120px;
}
.beta-unified-section-single .beta-unified-single-card .product-tile-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.beta-unified-section-single .beta-unified-single-card .product-tile-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
}
.beta-unified-section-single .beta-unified-single-card .product-tile-title {
    font-size: 1rem;
    line-height: 1.25;
    margin: 0;
    font-weight: 600;
}
.beta-unified-section-single .beta-unified-single-card .product-tile-pricing {
    margin: 0.25rem 0;
}

/* Beta scrollers: circle top-right of card (parent .product-tile), expands left; collapses on scroll/timer/trash/click-outside */
.beta-unified-scrollers .product-tile {
    position: relative;
}
/* Special items: yellow tile border and verbage (same as TikTok/store) */
.beta-unified-scrollers .product-tile.special-item {
    border: 2px solid #ffc107;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.25);
}
.beta-unified-scrollers .product-tile.special-item .product-tile-price-line .product-tile-old-price {
    text-decoration: line-through;
    color: rgba(255, 193, 7, 0.6);
    font-size: 0.85em;
}
.beta-unified-scrollers .product-tile.special-item .product-tile-price-line .product-tile-price,
.beta-unified-scrollers .product-tile.special-item .product-tile-pricing .product-tile-savings-text {
    color: #ffc107 !important;
    font-weight: 600;
}
.beta-unified-scrollers .product-tile.special-item .product-tile-price-line .product-tile-price {
    font-size: 1rem;
}
.beta-unified-scrollers .product-tile.special-item .product-tile-pricing .product-tile-savings-text {
    font-size: 0.75rem;
}
.beta-unified-scrollers .product-tile.special-item .product-tile-pricing .product-tile-requirements {
    color: #ffc107 !important;
    font-size: 0.75rem;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    min-height: 0;
    min-width: 28px;
    z-index: 2;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded {
    min-height: 36px;
}
.beta-unified-scrollers .beta-cart-circle {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    border: 2px solid #dc3545;
    background: #dc3545;
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease;
    padding: 0;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.beta-unified-scrollers .beta-cart-circle:hover {
    background: #c82333;
}
.beta-unified-scrollers .beta-cart-circle.special-item {
    background: #ffc107;
    border-color: #ffc107;
}
.beta-unified-scrollers .beta-cart-circle.special-item:hover {
    background: #ffc107;
    border-color: #ffc107;
}
.beta-unified-scrollers .beta-cart-circle .beta-cart-circle-content {
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px; /* Slight nudge so + sits visually centered in circle on desktop */
}
@media (max-width: 768px) {
    .beta-unified-scrollers .beta-cart-circle .beta-cart-circle-content {
        padding-bottom: 0;
    }
}

/* No pulse/bounce when quantity updates (override common.css .unified-cart-btn-container.updating) */
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.updating {
    animation: none !important;
}

/* Collapsed: show circle only; pill is present but shrunk and invisible so it can animate */
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable .beta-cart-expanded {
    position: absolute !important;
    top: 0;
    right: 0;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    max-width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    padding: 4px 6px;
    border: 2px solid transparent;
    border-radius: 30px;
    /* One smooth collapse: max-width + opacity (no display toggles or circle pop) */
    transition: max-width 0.22s ease-out, opacity 0.18s ease-out;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable .beta-cart-circle {
    display: flex !important;
}

/* Collapse: one motion – pill shrinks (max-width + opacity), circle already visible; no extra button fade */

/* Expanded: show pill only, hide circle */
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-circle {
    display: none !important;
}
/* Expanded: pill anchored top-right, grows left; overflow visible so + button is not clipped */
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded {
    position: absolute !important;
    top: 0;
    right: 0;
    max-width: 320px;
    min-width: 0;
    opacity: 1;
    overflow: visible !important;
    pointer-events: auto;
    background: #2d2d2d;
    border: 2px solid #dc3545;
    border-radius: 30px;
    box-shadow: none;
    outline: none;
    backdrop-filter: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: max-width 0.22s ease-out, opacity 0.18s ease-out;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded:hover {
    background: #383838;
    border-color: #c82333;
}
/* Specials: yellow border (same yellow as special badges) */
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded:has(.special-item) .beta-cart-expanded {
    border-color: #ffc107;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded:has(.special-item) .beta-cart-expanded:hover {
    border-color: #ffc107;
}
/* In-cart: minus / qty / plus – TikTok-style round buttons and pill qty */
/* No !important so JS can set display:none when item removed (trash) and show add button only */
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-inCart {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    min-height: 0;
    height: auto;
    border: none;
    background: transparent;
    border-radius: 0;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-left,
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-right {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-left i,
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-right i {
    font-size: 1.05rem;
    line-height: 1;
    vertical-align: middle;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-left:hover,
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-right:hover {
    background: rgba(255, 255, 255, 0.2);
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-left:active,
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-right:active,
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-add:active {
    transform: none;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-center {
    min-width: 26px;
    height: 26px;
    padding: 0 6px 2px 6px;
    margin: 0 2px;
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: rgba(220, 53, 69, 0.8);
    border-radius: 8px;
    border: none;
}
/* Special items: yellow/amber quantity pill to match the yellow circle – white text and icons */
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-inCart.special-item .unified-cart-btn-center {
    background: rgba(255, 193, 7, 0.85);
    color: #fff !important;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-inCart.special-item .unified-cart-btn-center .cart-quantity {
    color: #fff !important;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-inCart.special-item .unified-cart-btn-left i,
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-inCart.special-item .unified-cart-btn-right i {
    color: #fff !important;
}
/* Add button when expanded (not in cart yet) – same pill, single add; no !important so JS can hide it when in cart. No transform/box-shadow (override common.css). */
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 12px 6px 12px;
    min-height: 0;
    height: 28px;
    border: none;
    background: transparent;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease;
    transform: none;
    box-shadow: none;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-add:hover,
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-add:active,
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-add:focus {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    transform: none !important;
    box-shadow: none !important;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-add i {
    font-size: 1.05rem;
    line-height: 1;
    vertical-align: middle;
}
.beta-unified-scrollers .unified-cart-btn-container.beta-cart-expandable.expanded .beta-cart-expanded .unified-cart-btn-add i:not(:first-of-type) {
    display: none;
}

@media (max-width: 768px) {
    .beta-unified-section-title {
        font-size: 1.1rem;
    }
    .beta-unified-section-single .beta-unified-single-card .product-tile {
        grid-template-columns: minmax(120px, 38%) 1fr;
        padding: 0.4rem;
        gap: 0.5rem 0.75rem;
    }
}