/*
Theme Name: MSB - Manly Surfboards
Description: Exact replica of dev.manlysurfboards.com.au header and styling
Author: Manly Surfboards Development Team
Version: 1.0.0
Text Domain: msb
*/

/* ==========================================================================
   MOBILE-FIRST DESIGN APPROACH
   ==========================================================================
   All CSS is written mobile-first. Base styles target mobile devices (320px+).
   Progressive enhancement adds styles for larger screens using min-width media queries.
   Breakpoints: 768px (tablet), 1024px (desktop)
   ========================================================================== */

/* ==========================================================================
   Mobile-First Base Styles
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Hero Slider - Mobile First (Full Width)
   ========================================================================== */

.msb-hero-slider {
    position: relative;
    width: calc(100% + 1rem); /* Compensate for parent 0.5rem margins on mobile */
    height: 400px; /* Mobile height */
    overflow: hidden;
    background-color: #000;
    margin: -0.5rem -0.5rem 1rem -0.5rem; /* Break out of #content.site-content margins */
}

/* Desktop: Break out of 2em content margins */
@media (min-width: 768px) {
    .msb-hero-slider {
        width: calc(100% + 4em); /* Compensate for parent 2em margins */
        margin: -2em -2em 1.5rem -2em; /* Break out of desktop margins */
        height: 500px; /* Taller on desktop */
    }
}

.msb-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Individual Slides */
.msb-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
    z-index: 1;
}

.msb-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Slide Picture Element - for WebP fallback support */
.msb-slide-picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Slide Images */
.msb-slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Slide Overlay - Light overlay for better image visibility */
.msb-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.25) 100%);
    z-index: 3;
}

/* Alternative: No overlay (uncomment to remove overlay completely)
.msb-slide-overlay {
    display: none;
}
*/

/* Slide Content */
.msb-slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--msb-slider-text-color, #fff);
    z-index: 4;
    width: 90%;
    max-width: 600px;
    padding: 20px;
}

.msb-slide-title {
    font-size: var(--msb-slider-font-size, 28px);
    font-family: var(--msb-slider-font-family, inherit);
    font-weight: var(--msb-slider-font-weight, 700);
    margin: 0 0 12px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    letter-spacing: 0.5px;
    color: var(--msb-slider-text-color, #fff);
}

.msb-slide-description {
    font-size: var(--msb-slider-desc-font-size, 16px);
    font-family: var(--msb-slider-desc-font-family, inherit);
    font-weight: var(--msb-slider-desc-font-weight, 400);
    margin: 0 0 20px 0;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    color: var(--msb-slider-text-color, #fff);
}

/* Material Design Button */
.msb-slide-button {
    display: inline-block;
    padding: 12px 32px;
    background-color: var(--msb-slider-button-bg, #fff);
    color: var(--msb-slider-button-color, #333);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.msb-slide-button:hover,
.msb-slide-button:focus {
    background-color: #007cba;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

/* Slider Navigation Arrows - Bold white chevrons without circles */
.msb-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    padding: 10px;
}

.msb-slider-nav:hover,
.msb-slider-nav:focus {
    transform: translateY(-50%) scale(1.2);
    outline: none;
}

.msb-slider-prev {
    left: 20px;
}

.msb-slider-next {
    right: 20px;
}

.msb-slider-nav i {
    font-size: 40px;
    color: #fff;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.msb-slider-nav:hover i,
.msb-slider-nav:focus i {
    text-shadow: 0 4px 12px rgba(0,0,0,0.7);
}

/* Slider Indicators - Hidden */
.msb-slider-indicators {
    display: none;
}

/* ==========================================================================
   Category Grid - Mobile First (Rectangular cards)
   ========================================================================== */

.msb-category-grid {
    padding: 20px 0; /* Reduced from 40px for mobile */
    background-color: #f9f9f9;
}

.msb-category-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    gap: 8px; /* Reduced from 16px */
}

.msb-category-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.msb-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.msb-category-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Mobile: Rectangular image wrapper (16:9 aspect ratio) */
.msb-category-image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio for mobile rectangle */
    overflow: hidden;
    background-color: #f0f0f0;
}

.msb-category-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
}

.msb-category-card:hover .msb-category-image {
    transform: translate(-50%, -50%) scale(1.05);
}

/* Placeholder for categories without images */
.msb-category-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 48px;
}

/* Category info section */
.msb-category-info {
    padding: 16px;
    text-align: center;
}

.msb-category-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.msb-category-count {
    font-size: 13px;
    color: #666;
    font-weight: 400;
}

/* ==========================================================================
   Shop/Archive Pages - Breadcrumb & Subcategory Section
   ========================================================================== */

/* WooCommerce Breadcrumb */
nav.woocommerce-breadcrumb {
    width: auto;
    max-width: 1400px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.5rem 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1976D2 !important;
}

/* Category Hero - Full Width on Mobile */
.msb-category-hero,
.msb-brand-hero {
    margin: -0.5rem -0.5rem 1rem -0.5rem !important;
    width: calc(100% + 1rem) !important;
    padding: 0 !important;
}

/* Category Hero - Full Width on Desktop */
@media (min-width: 768px) {
    .msb-category-hero,
    .msb-brand-hero {
        margin: -2em -2em 1.5rem -2em !important;
        width: calc(100% + 4em) !important;
        padding: 0 !important;
        position: relative;
        left: 0;
        right: 0;
    }

    /* Remove any padding/margin from first child in site-content when hero is present */
    .woocommerce-products-header + .msb-category-hero,
    .woocommerce-products-header + .msb-brand-hero,
    .site-content > .msb-category-hero:first-child,
    .site-content > .msb-brand-hero:first-child {
        margin-top: -2em !important;
    }
}

nav.woocommerce-breadcrumb a {
    color: #1976D2 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: color 0.3s ease;
}

nav.woocommerce-breadcrumb a:hover {
    color: #4CAF50 !important;
}

/* ==========================================================================
   Brand Category Filter (Mobile-First)
   ========================================================================== */

.msb-brand-category-filter {
    margin: 1rem 0.5rem;
    padding: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Mobile Dropdown Toggle */
.msb-filter-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #007cba;
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.msb-filter-toggle:active {
    background: #006399;
}

.msb-filter-label {
    font-weight: 600;
    font-size: 0.9375rem;
    margin: 0;
}

.msb-filter-icon {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

/* Rotate icon when expanded */
.msb-brand-category-filter.expanded .msb-filter-icon {
    transform: rotate(180deg);
}

/* Filter buttons container - hidden by default on mobile */
.msb-filter-buttons {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: #f5f5f5;
}

/* Show buttons when expanded */
.msb-brand-category-filter.expanded .msb-filter-buttons {
    display: flex;
}

.msb-filter-button {
    display: block;
    padding: 0.875rem 1.25rem;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.2s ease;
    text-align: left;
}

.msb-filter-button:last-child {
    border-bottom: none;
}

.msb-filter-button:hover {
    background: #f5f5f5;
    color: #007cba;
    padding-left: 1.5rem;
}

.msb-filter-button.active {
    background: #007cba;
    color: #fff;
    font-weight: 600;
}

.msb-filter-button.active:hover {
    background: #006399;
}

/* Desktop: Traditional horizontal filter */
@media (min-width: 768px) {
    .msb-brand-category-filter {
        margin: 1.5rem auto;
        padding: 1.25rem 1.5rem;
        max-width: 1200px;
        background: #f5f5f5;
        box-shadow: none;
        text-align: center;
    }
    
    /* Hide mobile toggle on desktop */
    .msb-filter-toggle {
        display: none;
    }
    
    .msb-filter-label {
        font-size: 1rem;
        margin-bottom: 1rem;
        color: #333;
    }
    
    /* Always show buttons on desktop */
    .msb-filter-buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
        padding: 0;
        background: transparent;
    }
    
    .msb-filter-button {
        display: inline-block;
        padding: 0.625rem 1.25rem;
        font-size: 0.9375rem;
        border-radius: 20px;
        border: 2px solid #e0e0e0;
        background: #fff;
        text-align: center;
    }
    
    .msb-filter-button:hover {
        background: #f5f5f5;
        border-color: #007cba;
        color: #007cba;
        transform: translateY(-1px);
        padding-left: 1.25rem;
    }
    
    .msb-filter-button.active {
        background: #007cba;
        color: #fff;
        border-color: #007cba;
    }
    
    .msb-filter-button.active:hover {
        background: #006399;
        border-color: #006399;
    }
}

.msb-shop-container {
    min-height: 60vh;
    background: #f5f5f5;
    padding-top: 5px;
}

.msb-subcategory-grid {
    padding: 20px 0;
}

.msb-subcategory-grid .msb-section-title {
    margin-bottom: 30px;
    padding: 0 8px;
}

/* Reuse the same category card styles from front page */
.msb-subcategory-grid .msb-category-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 8px;
}

/* ==========================================================================
   WooCommerce Product Grid - Match Featured Products Style
   ========================================================================== */

/* Hide WooCommerce result count and sorting */
.woocommerce-result-count,
.woocommerce-ordering {
    display: none !important;
}

/* Add margin to products section */
.msb-products-grid {
    margin-top: 0;
    padding: 20px 8px 0 8px;
}

/* Product description box at bottom */
.woocommerce-products-header {
    width: 100%;
    padding: 20px 8px;
    box-sizing: border-box;
    margin: 10px 0 20px 0;
    background: #f5f5f5;
}

.woocommerce-products-header__title,
.woocommerce-products-header .term-description {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 1em; /* Mobile padding */
}

.woocommerce-products-header__title {
    margin-bottom: 20px;
    font-size: 28px;
}

/* Desktop: Match product grid width for uniform layout */
@media (min-width: 1024px) {
    .woocommerce-products-header {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Desktop: 5em padding */
    .woocommerce-products-header__title,
    .woocommerce-products-header .term-description {
        padding: 5em;
    }
}

/* WooCommerce Pagination - Sexy Modern Style */
nav.woocommerce-pagination {
    margin: 1.25rem 0 0.625rem 0 !important;
    padding: 0.625rem 0.5rem !important;
    background: transparent !important;
    text-align: center !important;
}

nav.woocommerce-pagination ul {
    display: inline-flex !important;
    gap: 0.25rem !important;
    padding: 0.5rem 0.625rem !important;
    background: #fff !important;
    border-radius: 3.125rem !important;
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.15) !important;
    border: none !important;
}

nav.woocommerce-pagination ul li {
    margin: 0 !important;
    border: none !important;
}

nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #1976D2 !important;
    background: transparent !important;
    border: 2px solid transparent !important;
    border-radius: 1.125rem !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

nav.woocommerce-pagination ul li a:hover {
    background: #E3F2FD !important;
    color: #1565C0 !important;
    transform: translateY(-0.125rem) !important;
    box-shadow: 0 0.25rem 0.75rem rgba(25, 118, 210, 0.2) !important;
}

nav.woocommerce-pagination ul li span.current {
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%) !important;
    color: #fff !important;
    border-color: #1976D2 !important;
    box-shadow: 0 0.25rem 0.75rem rgba(25, 118, 210, 0.3) !important;
}

nav.woocommerce-pagination ul li a.prev,
nav.woocommerce-pagination ul li a.next {
    font-size: 1rem !important;
    min-width: 2.5rem !important;
}

/* WooCommerce products list - use same grid as featured products */
ul.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0 8px;
}

/* Product items use .msb-product-card class from content-product.php template */

/* ==========================================================================
   Featured Products Section - Mobile First
   ========================================================================== */

.msb-featured-products {
    padding: 20px 0; /* Reduced from 60px for mobile */
    background-color: #fff;
}

.msb-section-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 20px 0; /* Reduced from 40px for mobile */
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.msb-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    gap: 8px; /* Reduced from 20px */
    margin-bottom: 20px; /* Reduced from 40px */
}

.msb-product-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.msb-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.msb-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

/* Product Image */
.msb-product-image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Square aspect ratio */
    overflow: hidden;
    background-color: #f8f8f8;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.msb-product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.msb-product-card:hover .msb-product-image {
    transform: scale(1.05);
}

.msb-product-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 48px;
}

/* Product Badge (Sale) */
.msb-product-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 2;
}

.msb-badge-sale {
    background-color: #ff6b35;
    color: #fff;
}

.msb-badge-out-of-stock {
    background-color: #757575;
    color: #fff;
}

/* Product Info */
.msb-product-info {
    padding: 16px;
}

.msb-product-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.msb-product-price {
    font-size: 16px;
    font-weight: 700;
    color: #1976D2;
}

.msb-product-price del {
    color: #999;
    font-weight: 400;
    margin-right: 8px;
}

.msb-product-price ins {
    text-decoration: none;
    color: #d32f2f !important;
}

/* Product Actions */
.msb-product-actions {
    padding: 0 16px 16px;
}

.msb-add-to-cart-button,
.msb-view-product-button {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background-color: #007cba;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.msb-add-to-cart-button:hover,
.msb-view-product-button:hover {
    background-color: #005a87;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.msb-add-to-cart-button i {
    margin-right: 8px;
}

/* View All Products Button */
.msb-view-all-products {
    text-align: center;
}

.msb-button {
    display: inline-block;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.msb-button-primary {
    background-color: #333;
    color: #fff;
    border: 2px solid #333;
}

.msb-button-primary:hover {
    background-color: #fff;
    color: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.msb-no-products {
    text-align: center;
    padding: 40px 20px;
    font-size: 16px;
    color: #666;
}

/* ==========================================================================
   Specials Section - Mobile First
   ========================================================================== */

.msb-specials-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #fff5e6 0%, #ffe6cc 100%);
}

.msb-specials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.msb-special-card {
    background: #fff;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.msb-special-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.msb-special-link {
    text-decoration: none;
    color: inherit;
}

.msb-special-image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    background: #f8f8f8;
    border-radius: 12px 12px 0 0;
}

.msb-special-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.msb-special-card:hover .msb-special-image {
    transform: scale(1.05);
}

.msb-special-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #ddd;
}

.msb-special-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #dc3545;
    color: #fff;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    z-index: 10;
}

.msb-special-info {
    padding: 20px;
}

.msb-special-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #333;
}

.msb-special-price {
    font-size: 20px;
    font-weight: 700;
    color: #ff6b35;
    margin-bottom: 15px;
}

.msb-special-price del {
    color: #999;
    font-size: 16px;
    margin-right: 8px;
}

.msb-special-actions {
    padding: 0 20px 20px;
}

.msb-special-actions .msb-add-to-cart-button,
.msb-special-actions .msb-view-product-button {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: center;
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.msb-special-actions .msb-add-to-cart-button:hover,
.msb-special-actions .msb-view-product-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.msb-no-products {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 18px;
}

/* Tablet - 2 columns */
@media (min-width: 768px) {
    .msb-specials-section {
        padding: 80px 0;
    }
    
    .msb-specials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* Desktop - 4 columns */
@media (min-width: 1024px) {
    .msb-specials-section {
        padding: 100px 0;
    }
    
    .msb-specials-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        max-width: 1400px;
        margin: 0 auto 60px;
    }
    
    .msb-special-title {
        font-size: 20px;
    }
    
    .msb-special-price {
        font-size: 22px;
    }
}

/* ==========================================================================
   Blog Carousel - Mobile First
   ========================================================================== */

.msb-blog-carousel-section {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.msb-blog-carousel-wrapper {
    position: relative;
    padding: 30px 50px; /* Space for nav arrows and vertical spacing for shadows */
}

.msb-blog-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding: 30px 0; /* Extra space top and bottom for box shadows */
}

.msb-blog-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.msb-blog-slide {
    flex: 0 0 280px; /* Fixed width for consistent sizing */
    scroll-snap-align: start;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.msb-blog-slide:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.msb-blog-slide-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.msb-blog-slide-image {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    overflow: hidden;
    background-color: #f0f0f0;
    position: relative;
}

.msb-blog-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.msb-blog-slide:hover .msb-blog-slide-image img {
    transform: scale(1.05);
}

.msb-blog-slide-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 48px;
}

.msb-blog-slide-content {
    padding: 16px;
}

.msb-blog-slide-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #333;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.msb-blog-slide-excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.msb-blog-slide-more {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #007cba;
    transition: all 0.3s ease;
}

.msb-blog-slide:hover .msb-blog-slide-more {
    color: #005a87;
}

/* Carousel Navigation Arrows */
.msb-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.95);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.msb-carousel-nav:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.msb-carousel-prev {
    left: 5px;
}

.msb-carousel-next {
    right: 5px;
}

.msb-carousel-nav i {
    font-size: 18px;
    color: #333;
}

/* ==========================================================================
   Latest Blog Posts Section - Mobile First (OLD - CAN BE REMOVED)
   ========================================================================== */

.msb-latest-blog {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.msb-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    gap: 16px;
}

.msb-blog-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.msb-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.msb-blog-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Blog Post Image */
.msb-blog-image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 60%; /* 5:3 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.msb-blog-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.msb-blog-card:hover .msb-blog-image {
    transform: scale(1.05);
}

.msb-blog-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 48px;
}

.msb-blog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.msb-blog-card:hover .msb-blog-overlay {
    opacity: 1;
}

/* Blog Post Content */
.msb-blog-content {
    padding: 20px;
}

.msb-blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #666;
}

.msb-blog-date,
.msb-blog-category {
    display: flex;
    align-items: center;
    gap: 6px;
}

.msb-blog-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #333;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.msb-blog-card:hover .msb-blog-title {
    color: #007cba;
}

.msb-blog-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 16px;
}

.msb-blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #007cba;
    transition: gap 0.3s ease;
}

.msb-blog-card:hover .msb-blog-read-more {
    gap: 12px;
}

.msb-no-posts {
    text-align: center;
    padding: 40px 20px;
    font-size: 16px;
    color: #666;
}

html {
    font-size: 16px; /* Base font size for mobile */
    line-height: 1.5;
}

/* Mobile-first body styles */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent horizontal scroll on mobile */
    overflow-x: hidden;
}

/* Mobile-first touch targets (minimum 44px) */
button,
.msb-mobile-menu-toggle,
.msb-mobile-menu-close,
.msb-header-action {
    min-height: 44px;
    min-width: 44px;
}

/* Mobile-first form elements */
input,
textarea,
select {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Mobile-first images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Top Bar with Phone Number (Mobile-First)
   ========================================================================== */

.msb-top-bar {
    background-color: #000;
    color: #fff;
    padding: 0.2rem 1rem;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1001;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hide top bar when mobile menu is open */
body.mobile-menu-open .msb-top-bar {
    z-index: 1;
}

.msb-top-bar.hidden {
    transform: translateY(-100%);
    opacity: 0;
}

.msb-top-bar-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.msb-top-bar-phone {
    color: #fff;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}

.msb-top-bar-phone:hover {
    color: #007cba;
}

.msb-top-bar-phone i {
    font-size: 1.125rem;
}

/* Desktop: slightly larger */
@media (min-width: 768px) {
    .msb-top-bar {
        padding: 0.2rem 1rem;
    }
    
    .msb-top-bar-phone {
        font-size: 1.25rem;
    }
    
    .msb-top-bar-phone i {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Mobile-First Header (Base: Mobile)
   ========================================================================== */

.site-header {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Mobile-first: full width, no padding */
    width: 100%;
}

/* Mobile header - optimized for touch */
.msb-mobile-header {
    height: 70px; /* Fixed height for CLS */
    padding: 0 16px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.msb-mobile-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    gap: 16px;
    height: 100%;
}

/* Left Section - Menu Button */
.msb-mobile-header-left {
    flex: 0 0 64px; /* Fixed width to prevent CLS */
    width: 64px;
    height: 70px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.msb-mobile-menu-toggle {
    background: transparent !important; /* Completely remove any background */
    border: none !important; /* Ensure no borders */
    padding: 8px;
    cursor: pointer;
    color: #333;
    font-size: 32px; /* Doubled from default 16px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: none; /* Remove transition to prevent any visual changes */
    min-width: 48px;
    min-height: 48px;
    -webkit-appearance: none; /* Remove default button appearance */
    -moz-appearance: none;
    appearance: none;
}

.msb-mobile-menu-toggle:hover,
.msb-mobile-menu-toggle:focus,
.msb-mobile-menu-toggle:active {
    background: transparent !important; /* Completely remove any background on all states */
    outline: none !important;
    color: #333 !important;
    box-shadow: none !important; /* Remove any box shadows */
}

.msb-search-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #fff; /* White color for visibility on dark background */
    font-size: 24px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    z-index: 10003 !important; /* Above mobile nav (10002) to ensure close button always works */
}

.msb-mobile-menu-toggle:hover,
.msb-mobile-menu-toggle:focus {
    background-color: #f5f5f5;
    outline: none;
}

/* Center Section - Logo */
.msb-mobile-header-center {
    flex: 1;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    min-width: 0;
}

.custom-logo-link {
    display: flex;
    height: 50px;
    max-width: 100%;
    align-items: center;
    justify-content: center;
}

.custom-logo {
    height: 50px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* Fallback text logo when no custom logo is set */
.custom-logo-link .site-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right Section - Action Buttons */
.msb-mobile-header-right {
    flex: 0 0 64px; /* Fixed width matching left side to prevent CLS */
    width: 64px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.msb-header-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: #333;
    text-decoration: none;
    font-size: 32px; /* Doubled from 16px */
    border-radius: 4px;
    transition: background-color 0.2s ease;
    position: relative;
    border: none; /* Remove any borders */
    background: none; /* Remove background */
    min-width: 48px;
    min-height: 48px;
}

.msb-header-action:hover,
.msb-header-action:focus {
    background-color: transparent; /* Remove gray background */
    text-decoration: none;
    color: #333;
    outline: none;
}

.cart-count {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: #ff6b35;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* ==========================================================================
   Mobile-First Navigation (Base: Mobile)
   ========================================================================== *//* ==========================================================================
   Fibosearch FontAwesome Icon Styling
   ========================================================================== */

.dgwt-wcas-search-icon .fa-magnifying-glass {
    font-size: 32px;
    color: #333;
    transition: color 0.2s ease;
}

.dgwt-wcas-search-icon:hover .fa-magnifying-glass {
    color: #007cba;
}

/* Adjust search icon position - bring in from right edge */
.msb-mobile-header-right {
    margin-right: 10px;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Mini cart in header */
.msb-mobile-header-right .msb-mini-cart-toggle {
    display: flex;
    align-items: center;
}

.msb-mobile-header-right .msb-mini-cart__toggle-button {
    width: 40px;
    height: 40px;
    padding: 8px;
}

/* Cart icon size on mobile - smaller than desktop */
@media (max-width: 767px) {
    .msb-mobile-header-right .msb-mini-cart__icon svg {
        width: 36px;
        height: 36px;
    }
}

/* ==========================================================================
   Responsive Search Display
   ========================================================================== */

/* ==========================================================================
   Mobile-First Navigation (Base: Mobile)
   ========================================================================== */.msb-search-icon:hover {
    color: #007cba;
}

/* ==========================================================================
   Mobile-First Navigation (Base: Mobile)
   ========================================================================== */

/* Mobile menu overlay - gray backdrop */
.msb-mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Gray semi-transparent overlay */
    z-index: 10001 !important; /* Above top bar (1001) and header (1000) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.msb-mobile-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.msb-mobile-nav {
    position: fixed;
    top: 0;
    left: -80%; /* Start offscreen by menu width */
    width: 80%; /* Mobile: 80% of screen width */
    height: 100vh;
    background-color: #fff;
    z-index: 10002 !important; /* Above overlay (10001) */
    transition: left 0.3s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

.msb-mobile-nav.is-open {
    left: 0;
}

/* Mobile navigation header */
.msb-mobile-nav-header {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    /* Mobile-first: touch-friendly close button */
    min-height: 60px;
}

/* Mobile menu items - touch optimized */
.msb-mobile-nav-menu a {
    display: block;
    padding: 16px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    /* Mobile-first: larger touch targets */
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 2em; /* Space between icon and text */
    position: relative;
    overflow: hidden;
}

/* Sexy hover effect - background slide and color change */
.msb-mobile-nav-menu a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #007cba;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.msb-mobile-nav-menu a:hover {
    background: linear-gradient(90deg, rgba(0, 124, 186, 0.1) 0%, rgba(0, 124, 186, 0) 100%);
    color: #007cba;
    padding-left: 24px;
}

.msb-mobile-nav-menu a:hover::before {
    transform: scaleY(1);
}

.msb-mobile-nav-menu a:active {
    background: rgba(0, 124, 186, 0.15);
}

/* Remove list bullets */
.msb-mobile-nav-menu,
.msb-mobile-nav-menu ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Menu Icons */
.msb-menu-icon {
    font-size: 1.25rem;
    width: 28px;
    min-width: 28px;
    text-align: center;
    color: #007cba; /* WordPress blue / brand blue */
    transition: transform 0.2s ease, color 0.2s ease;
}

.msb-mobile-nav-menu a:hover .msb-menu-icon {
    transform: scale(1.15);
    color: #005a87; /* Darker blue on hover */
}

/* Submenu Styles */
.msb-mobile-nav-menu .sub-menu {
    background-color: #f8f8f8;
    padding-left: 0;
    display: none; /* Initially hidden - controlled by JavaScript */
    list-style: none;
    margin: 0;
}

.msb-mobile-nav-menu .sub-menu .sub-menu {
    background-color: #f0f0f0; /* Slightly different color for nested sub-menus */
    padding-left: 0;
    list-style: none;
}

.msb-mobile-nav-menu .sub-menu .sub-menu .sub-menu {
    background-color: #e8e8e8; /* Even lighter for deeper nesting */
    padding-left: 0;
    list-style: none;
}

.msb-mobile-nav-menu .sub-menu a {
    padding: 12px 20px 12px 68px; /* Indent submenu items (28px icon + 20px gap + 20px base = 68px) */
    font-weight: 400;
    font-size: 16px; /* Increased from 14px for better readability */
}

.msb-mobile-nav-menu .sub-menu .sub-menu a {
    padding-left: 88px; /* Further indent for nested submenus */
    font-size: 15px; /* Increased from 13px */
}

.msb-mobile-nav-menu .sub-menu .sub-menu .sub-menu a {
    padding-left: 108px; /* Even further indent for deeply nested items */
    font-size: 14px; /* Increased from 12px */
}

/* Visual indicator for active/expanded items - persistent blue highlight */
.msb-mobile-nav-menu li.is-open > a {
    background: linear-gradient(90deg, rgba(0, 124, 186, 0.15) 0%, rgba(0, 124, 186, 0.05) 100%);
    color: #007cba;
    font-weight: 600;
    border-left: 4px solid #007cba;
    padding-left: 20px; /* Adjust for border */
}

/* Keep parent highlighted when viewing subcategories */
.msb-mobile-nav-menu li.menu-item-has-children.is-open > a {
    background: linear-gradient(90deg, rgba(0, 124, 186, 0.15) 0%, rgba(0, 124, 186, 0.05) 100%);
    color: #007cba;
}

/* Accordion Toggle Buttons */
.msb-submenu-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #666;
    font-size: 20px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Top-level menu items (direct children of main menu) - inline chevron */
.msb-mobile-nav-menu > li.menu-item-has-children {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allow submenu to wrap below */
}

.msb-mobile-nav-menu > li.menu-item-has-children > a {
    flex: 0 0 auto; /* Don't grow, stay natural size */
    display: flex;
    align-items: center;
}

.msb-mobile-nav-menu > li.menu-item-has-children > .msb-submenu-toggle {
    position: static;
    transform: none;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    padding: 0 12px;
    margin: 0;
}

/* Submenu takes full width on new line */
.msb-mobile-nav-menu > li.menu-item-has-children > .sub-menu {
    flex: 0 0 100%;
    width: 100%;
}

.msb-submenu-toggle:hover {
    color: #333;
    background-color: rgba(0, 0, 0, 0.05);
}

/* No hover background for inline chevrons */
.msb-mobile-nav-menu > li > .msb-submenu-toggle:hover {
    background-color: transparent;
}

.msb-submenu-toggle:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.msb-submenu-toggle i {
    transition: transform 0.2s ease;
    font-size: 14px;
}

/* Icon changes when expanded (handled by JavaScript class changes) */
.msb-submenu-toggle[aria-expanded="true"] i {
    transform: none; /* Icon swap handled via class changes in JS */
}

/* Menu items with sub-menus need relative positioning */
.msb-mobile-nav-menu li {
    position: relative;
}

.msb-mobile-nav-menu li > a {
    display: block;
    padding-right: 40px; /* Make room for toggle button */
}

/* Top-level menu links - inline display for chevron */
.msb-mobile-nav-menu > li > a {
    display: inline-block;
    padding-right: 0; /* No extra padding needed for inline chevron */
}

/* Submenu links still need block display and padding */
.msb-mobile-nav-menu .sub-menu li > a {
    display: block;
    padding-right: 40px;
}

/* ==========================================================================
   Layout & Content
   ========================================================================== */

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content.site-content {
    flex: 1;
    padding: 0;
    margin: 0.5rem;
}

/* Desktop: 2em margin */
@media (min-width: 768px) {
    #content.site-content {
        margin: 2em;
    }
}

/* Add spacing only to non-front-page content */
body:not(.home) .site-content {
    padding: 0 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Mobile: Ensure container content stays within bounds */
@media (max-width: 767px) {
    .container {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* Homepage sections - 80% width on desktop, full width on mobile */
.msb-category-grid .container,
.msb-featured-products .container,
.msb-subcategory-grid .container {
    width: 100%;
    max-width: none;
    padding: 0 8px; /* Minimal side padding on mobile */
}

/* 80% width only on larger screens */
@media (min-width: 768px) {
    .msb-category-grid .container,
    .msb-featured-products .container,
    .msb-subcategory-grid .container {
        width: 80%;
        padding: 0 16px;
    }
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 16px 0;
    font-weight: 600;
    line-height: 1.2;
    color: #333;
}

p {
    margin: 0 0 16px 0;
    line-height: 1.6;
}

a {
    color: #007cba;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: #005a87;
    text-decoration: underline;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ==========================================================================
   MOBILE-FIRST RESPONSIVE DESIGN
   ==========================================================================
   Base styles: Mobile (320px+)
   Tablet: 768px+
   Desktop: 1024px+
   ========================================================================== */

/* Tablet/Desktop Styles - Progressive enhancement from mobile base */
@media (min-width: 768px) {
    .container {
        padding: 0 24px;
    }

    .msb-mobile-header {
        padding: 16px 24px;
    }

    /* Tablet: Side-sliding navigation instead of full overlay */
    .msb-mobile-nav {
        width: 320px;
        left: -320px; /* Slide from side on tablets */
    }

    .msb-mobile-nav.is-open {
        left: 0;
    }

    /* Larger touch targets for tablets */
    .msb-mobile-nav-menu a {
        padding: 18px 24px;
        min-height: 52px;
    }

    /* Hero Slider - Tablet */
    .msb-hero-slider {
        height: 500px;
    }

    .msb-slide-title {
        font-size: var(--msb-slider-font-size, 36px);
        margin-bottom: 16px;
    }

    .msb-slide-description {
        font-size: var(--msb-slider-desc-font-size, 18px);
        margin-bottom: 24px;
    }

    .msb-slide-button {
        padding: 14px 40px;
        font-size: 15px;
    }

    /* Tablet: Larger chevrons */
    .msb-slider-nav i {
        font-size: 50px;
    }

    .msb-slider-prev {
        left: 30px;
    }

    .msb-slider-next {
        right: 30px;
    }

    /* Category Grid - Tablet (3 columns, still rectangular) */
    .msb-category-grid {
        padding: 60px 0;
    }

    .msb-category-grid-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .msb-category-title {
        font-size: 18px;
    }

    .msb-category-count {
        font-size: 14px;
    }

    .msb-category-info {
        padding: 20px;
    }

    /* Subcategory Grid - Tablet */
    .msb-subcategory-grid .msb-category-grid-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Featured Products - Tablet (3 columns) */
    .msb-featured-products {
        padding: 80px 0;
    }

    .msb-section-title {
        font-size: 32px;
        margin-bottom: 50px;
    }

    /* Blog Carousel - Tablet */
    .msb-blog-carousel-section {
        padding: 60px 0;
    }

    .msb-blog-carousel-wrapper {
        padding: 0 60px;
    }

    .msb-blog-slide {
        flex: 0 0 320px;
    }

    .msb-blog-slide-image {
        height: 220px;
    }

    .msb-carousel-nav {
        width: 50px;
        height: 50px;
    }

    .msb-carousel-nav i {
        font-size: 20px;
    }

    .msb-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .msb-product-title {
        font-size: 15px;
    }

    .msb-product-info {
        padding: 20px;
    }

    .msb-product-actions {
        padding: 0 20px 20px;
    }

    /* Latest Blog - Tablet (2 columns) */
    .msb-latest-blog {
        padding: 80px 0;
    }

    .msb-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .msb-blog-title {
        font-size: 20px;
    }

    .msb-blog-excerpt {
        font-size: 15px;
    }

    .msb-blog-content {
        padding: 24px;
    }
}

/* Desktop Styles - Progressive enhancement */
@media (min-width: 1024px) {
    .container {
        padding: 0 32px;
    }

    .msb-mobile-header {
        height: 80px; /* Fixed height for desktop */
        padding: 0 32px;
        display: flex;
        align-items: center;
    }

    .custom-logo {
        max-height: 60px;
    }

    /* Desktop: Centered header content with max width */
    .msb-mobile-header-content {
        max-width: 1400px;
        margin: 0 auto;
        gap: 24px; /* Larger gap on desktop */
        height: 100%;
    }

    /* Desktop: Logo doesn't need to be perfectly centered with search bar present */
    .msb-mobile-header-center {
        flex: 0 1 auto;
        text-align: left;
        padding: 0;
    }

    /* Desktop navigation - potentially show desktop menu */
    /* .msb-desktop-nav { display: block; } - future enhancement */

    /* Enhanced spacing for desktop */
    .msb-mobile-nav-menu a {
        padding: 20px 24px;
    }

    /* Desktop: Mobile menu slides out at 30% width */
    .msb-mobile-nav {
        width: 30%;
        left: -30%;
    }

    .msb-mobile-nav.is-open {
        left: 0;
    }

    /* Hero Slider - Desktop */
    .msb-hero-slider {
        height: 600px;
    }

    .msb-slide-title {
        font-size: var(--msb-slider-font-size, 48px);
        margin-bottom: 20px;
        letter-spacing: 1px;
    }

    .msb-slide-description {
        font-size: var(--msb-slider-desc-font-size, 20px);
        margin-bottom: 28px;
        line-height: 1.6;
    }

    .msb-slide-button {
        padding: 16px 48px;
        font-size: 16px;
    }

    /* Desktop: Even larger bold chevrons */
    .msb-slider-nav i {
        font-size: 60px;
    }

    .msb-slider-prev {
        left: 40px;
    }

    .msb-slider-next {
        right: 40px;
    }

    /* Category Grid - Desktop (4-5 columns, SQUARE images) */
    .msb-category-grid {
        padding: 80px 0;
    }

    .msb-category-grid-container {
        grid-template-columns: repeat(5, 1fr); /* 5 columns on large screens */
        gap: 24px;
        max-width: 1400px;
        margin: 0 auto;
    }

    /* Desktop: SQUARE image wrapper (1:1 aspect ratio) */
    .msb-category-image-wrapper {
        padding-bottom: 100%; /* 1:1 aspect ratio = perfect square */
    }

    .msb-category-title {
        font-size: 18px;
    }

    .msb-category-count {
        font-size: 14px;
    }

    /* Subcategory Grid - Desktop */
    .msb-subcategory-grid .msb-category-grid-container {
        grid-template-columns: repeat(5, 1fr);
        gap: 24px;
        max-width: 1400px;
        margin: 0 auto;
    }

    .msb-subcategory-grid .msb-category-image-wrapper {
        padding-bottom: 100%; /* Square on desktop */
    }

    .msb-category-info {
        padding: 24px;
    }

    .msb-category-placeholder {
        font-size: 64px;
    }

    /* Featured Products - Desktop (4 columns) */
    .msb-featured-products {
        padding: 100px 0;
    }

    .msb-section-title {
        font-size: 36px;
        margin-bottom: 60px;
    }

    .msb-products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        max-width: 1400px;
        margin: 0 auto 60px;
    }

    .msb-product-title {
        font-size: 16px;
    }

    .msb-product-price {
        font-size: 18px;
    }

    .msb-product-info {
        padding: 24px;
    }

    .msb-product-actions {
        padding: 0 24px 24px;
    }

    .msb-add-to-cart-button,
    .msb-view-product-button {
        padding: 14px 20px;
        font-size: 15px;
    }

    .msb-product-placeholder {
        font-size: 64px;
    }

    /* WooCommerce Product Archives - Desktop (4 columns to match featured products) */
    ul.products {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        max-width: 1400px;
        margin: 0 auto 60px;
        padding: 0;
    }

    /* Latest Blog - Desktop (4 columns) */
    .msb-latest-blog {
        padding: 100px 0;
    }

    .msb-blog-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        max-width: 1400px;
        margin: 0 auto;
    }

    .msb-blog-title {
        font-size: 20px;
    }

    .msb-blog-excerpt {
        font-size: 15px;
    }

    .msb-blog-content {
        padding: 24px;
    }

    .msb-blog-meta {
        font-size: 14px;
    }

    .msb-blog-placeholder {
        font-size: 64px;
    }

    /* Blog Carousel - Desktop */
    .msb-blog-carousel-section {
        padding: 80px 0;
    }

    .msb-blog-carousel-wrapper {
        padding: 0 80px;
    }

    .msb-blog-slide {
        flex: 0 0 360px;
    }

    .msb-blog-slide-image {
        height: 240px;
    }

    .msb-carousel-nav {
        width: 60px;
        height: 60px;
    }

    .msb-carousel-nav i {
        font-size: 24px;
    }

    .msb-blog-slide-title {
        font-size: 20px;
    }

    .msb-blog-slide-excerpt {
        font-size: 15px;
    }

}

/* Adjust for medium desktops (4 columns) */
@media (min-width: 1024px) and (max-width: 1400px) {
    .msb-category-grid-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   Mobile-First Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .msb-mobile-header {
        border-bottom: 2px solid #000;
    }

    .msb-mobile-nav-menu a {
        border-bottom: 1px solid #000;
    }
}

/* ==========================================================================
   Single Product Page - Mobile First
   ========================================================================== */

/* Product page container */
.single-product .site-content {
    padding: 1rem 0;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

/* Product gallery wrapper - NO background/padding here */
.woocommerce-product-gallery {
    margin: 0 0 1.5rem 0 !important;
    box-sizing: border-box;
}

.woocommerce-product-gallery__wrapper {
    margin: 0;
    position: relative; /* Zoom trigger positions relative to this */
    background: #fff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15);
}

/* Main image viewport inside wrapper */
.woocommerce-product-gallery .flex-viewport {
    overflow: hidden !important;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15);
}

/* Zoom trigger positioning - handles both possible DOM structures */

/* Mobile: Trigger in top right corner of image */
@media (max-width: 1023px) {
    .woocommerce div.product div.images > .woocommerce-product-gallery__trigger {
        position: absolute;
        top: 10px;
        right: 10px; /* No offset needed - thumbnails below */
        z-index: 10;
    }
    
    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__trigger {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
    }
}

/* Desktop: Adjust for thumbnails on right */
@media (min-width: 1024px) {
    /* 3a. If the trigger is a direct child of .images (common WooCommerce output) */
    .woocommerce div.product div.images > .woocommerce-product-gallery__trigger {
        position: absolute;
        top: 10px;
        right: 130px; /* Same as padding-right so it lands over the image */
        z-index: 10;
    }

    /* 3b. If your theme puts the trigger inside the wrapper instead, catch that too */
    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__trigger {
        position: absolute;
        top: 10px;
        right: 10px; /* Inside the actual image */
        z-index: 10;
    }
}

/* Desktop: Thumbnails on right side - absolute positioning */
@media (min-width: 1024px) {
    /* 1. Make the whole images area a positioning context */
    .woocommerce div.product div.images {
        position: relative;
        max-width: 100%; /* Full width for our design */
        padding-right: 120px; /* Make room for the right-side thumbs */
    }

    /* 2. Make sure the main gallery can still be 100% wide inside its area */
    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
        width: 100%;
    }

    /* 3. Right-side vertical thumbnails */
    .woocommerce div.product div.images .flex-control-thumbs {
        position: absolute;
        top: 0;
        right: 0;
        width: 110px; /* Width of thumb column */
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
        overflow-y: auto;
        max-height: 500px;
    }

    /* 4. Thumbnail boxes with Material Design styling */
    .woocommerce div.product div.images .flex-control-thumbs li {
        margin: 0 !important;
        float: none !important;
        width: 100% !important;
    }

    .woocommerce div.product div.images .flex-control-thumbs li img {
        display: block;
        width: 100%;
        padding: 0.25rem;
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
        border: 2px solid transparent;
        background: #fff;
        object-fit: cover;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
    .woocommerce div.product div.images .flex-control-thumbs li img:hover {
        box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.15);
        border-color: #1976D2; /* Material Blue */
    }
}

/* Mobile: Thumbnails in horizontal row */
@media (max-width: 1023px) {
    .woocommerce div.product div.images {
        padding-right: 0;
        max-width: 100%;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs {
        position: static;
        flex-direction: row;
        width: 100%;
        gap: 0.5rem;
        margin: 1rem 0 0 0;
        padding: 0;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li {
        flex: 0 0 auto !important;
        width: 80px !important;
        min-width: 80px !important;
        margin: 0 !important;
        float: none !important;
        scroll-snap-align: start;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li img {
        width: 100%;
        padding: 0.25rem;
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
        border: 2px solid transparent;
        background: #fff;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li img:hover,
    .woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
        box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.15);
        border-color: #1976D2;
    }
}

.woocommerce-product-gallery .flex-viewport {
    overflow: hidden !important;
    border-radius: 0.5rem;
}

/* Main product image - Material Design elevated card */
.woocommerce-product-gallery__image {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 !important;
}

.woocommerce-product-gallery__image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    border-radius: 0.5rem;
}

/* Gallery thumbnails - below main image */
.woocommerce-product-gallery ol.flex-control-thumbs {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto; /* Allow horizontal scrolling on mobile */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.woocommerce-product-gallery ol.flex-control-thumbs li {
    flex: 0 0 auto; /* Don't grow or shrink */
    margin: 0;
    padding: 0;
    width: 80px; /* Fixed width for scrollable thumbnails */
}

.woocommerce-product-gallery ol.flex-control-thumbs li img {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
    padding: 0.375rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
    border: 2px solid transparent;
}

.woocommerce-product-gallery ol.flex-control-thumbs li img:hover {
    box-shadow: 0 0.375rem 1rem rgba(0,0,0,0.2);
    border: 2px solid #1976D2;
}

.woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
    border-color: #1976D2;
    box-shadow: 0 0.25rem 0.75rem rgba(25, 118, 210, 0.3);
}


/* Product summary section */
.single-product .summary {
    padding: 0 0.5rem;
}

/* Product title */
.single-product .product_title {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    color: #212121;
}

/* Product price */
.single-product .price {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1976D2 !important;
    margin-bottom: 1rem;
}

.single-product .price del {
    color: #757575;
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

/* Force all price elements to be blue */
.woocommerce-Price-amount,
.amount,
.price .woocommerce-Price-amount {
    color: #1976D2 !important;
}

/* Sale prices in red */
.price ins,
.price ins .woocommerce-Price-amount,
ins .amount {
    color: #d32f2f !important;
}

/* Product meta */
.product_meta {
    padding: 1rem 0;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
    margin: 1.5rem 0;
    font-size: 0.875rem;
    color: #616161;
}

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

.product_meta a {
    color: #1976D2;
    text-decoration: none;
}

.product_meta a:hover {
    text-decoration: underline;
}

/* Product description */
.woocommerce-product-details__short-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #424242;
    margin-bottom: 1.5rem;
}

/* Hide product description heading */
.woocommerce-product-details__short-description h2,
.woocommerce-product-details__short-description .product-description-title {
    display: none;
}

/* Add padding to description panel content */
.woocommerce-Tabs-panel--description {
    padding: 0.5em !important;
}

/* Add padding to additional information panel */
.woocommerce-Tabs-panel--additional_information {
    padding: 0.5em !important;
}

/* Add padding to reviews panel */
.woocommerce-Tabs-panel--reviews {
    padding: 0.5em !important;
}

/* Add to cart form */
.single-product form.cart {
    margin-bottom: 1.5rem;
}

/* Product Variation Dropdowns - Prominent but clean Material Design */
.single-product form.cart .variations {
    margin-bottom: 1.5rem;
    background: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15);
}

.single-product form.cart .variations tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.single-product form.cart .variations tr:last-child {
    margin-bottom: 0;
}

.single-product form.cart .variations label {
    font-weight: 700;
    font-size: 1.125rem;
    color: #212121;
    margin-bottom: 0.5rem;
}

.single-product form.cart .variations select {
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #212121;
    background: #fff;
    border: 2px solid #E0E0E0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5rem;
    padding-right: 3rem;
}

.single-product form.cart .variations select:hover {
    border-color: #1976D2;
    box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.single-product form.cart .variations select:focus {
    outline: none;
    border-color: #1976D2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

.single-product form.cart .variations select option {
    padding: 1rem;
    font-size: 1rem;
}

/* Variation reset link */
.single-product form.cart .reset_variations {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    color: #1976D2 !important;
    text-decoration: none;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.single-product form.cart .reset_variations:hover {
    color: #1565C0 !important;
    text-decoration: underline;
}

.single-product .quantity {
    display: inline-block;
    margin-right: 0.5rem;
}

.single-product .quantity input {
    width: 4rem;
    padding: 0.75rem;
    border: 2px solid #E0E0E0;
    border-radius: 0.25rem;
    font-size: 1rem;
    text-align: center;
}

.single-product button.single_add_to_cart_button {
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
    color: #fff;
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 0.75rem rgba(25, 118, 210, 0.3);
}

.single-product button.single_add_to_cart_button:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1rem rgba(25, 118, 210, 0.4);
}

/* Mobile optimization for variation dropdowns */
@media (max-width: 767px) {
    .single-product form.cart .variations {
        padding: 1rem;
    }
    
    .single-product form.cart .variations label {
        font-size: 1rem;
    }
    
    .single-product form.cart .variations select {
        font-size: 1rem;
        padding: 0.875rem 1rem;
        padding-right: 2.75rem;
        background-size: 1.25rem;
    }
}

/* Tablet and up - increase prominence */
@media (min-width: 768px) {
    .single-product form.cart .variations {
        padding: 2rem;
    }
    
    .single-product form.cart .variations label {
        font-size: 1.25rem;
    }
    
    .single-product form.cart .variations select {
        font-size: 1.25rem;
    }
}

/* Product tabs - Material Design 3 */
.woocommerce-tabs,
.wc-tabs-wrapper {
    margin-top: 2rem;
    padding: 2rem 0.5rem;
    scroll-margin-top: 100px; /* Prevent scroll jump when tabs are clicked */
}

/* Desktop: Increase margin around content */
@media (min-width: 1024px) {
    .single-product #content.site-content {
        margin: 2em;
    }
    
    .woocommerce-tabs,
    .wc-tabs-wrapper {
        padding: 0;
        margin: 0;
        scroll-margin-top: 150px; /* Larger offset for desktop */
    }
}

/* Mobile-first tabs styling */
.woocommerce-tabs ul.tabs.wc-tabs {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.6rem !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 2rem 0 !important;
    list-style: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
    border: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
    display: none !important;
}

.woocommerce-tabs ul.tabs li {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    background: none !important;
    border: none !important;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
    display: none !important;
}

.woocommerce-tabs ul.tabs li a {
    display: block !important;
    padding: 0.75rem 0.5rem !important;
    color: #616161 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    text-align: center !important;
    border-radius: 2rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #f5f5f5 !important;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1) !important;
    border: 2px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.woocommerce-tabs ul.tabs li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.woocommerce-tabs ul.tabs li a:hover {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%) !important;
    color: #1976D2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0.5rem 1.25rem rgba(25, 118, 210, 0.25) !important;
}

.woocommerce-tabs ul.tabs li a:hover::before {
    left: 100%;
}

.woocommerce-tabs ul.tabs li.active a {
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%) !important;
    color: #fff !important;
    box-shadow: 0 0.5rem 1.5rem rgba(25, 118, 210, 0.4) !important;
    font-weight: 700 !important;
    border-color: #1565C0 !important;
    transform: translateY(-2px) !important;
}

.woocommerce-tabs .panel {
    padding: 1rem !important;
    background: #fff !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15) !important;
}

/* Desktop tabs - larger sizing */
@media (min-width: 768px) {
    .woocommerce-tabs ul.tabs.wc-tabs {
        gap: 1rem !important;
        padding: 1em !important;
        overflow-x: visible !important;
    }
    
    .woocommerce-tabs ul.tabs li {
        flex: none !important;
    }
    
    .woocommerce-tabs ul.tabs li a {
        padding: 1rem 2rem !important;
        font-size: 1.125rem !important;
        white-space: normal !important;
    }
    
    .woocommerce-tabs .panel {
        padding: 2rem !important;
    }
}

/* Related products */
.related.products {
    margin-top: 3rem;
    padding: 0 0.5rem;
}

.related.products h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: #212121;
}

/* Related products inherit msb-products-grid styling from content-product.php template */
.related.products ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 8px !important;
    width: 100% !important;
    gap: 0 !important;
}

.related.products ul.products li.product {
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    margin: 0 4px 16px 4px !important;
    float: none !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.related.products .msb-product-card {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.related.products .msb-product-image-wrapper {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.related.products .msb-product-image {
    display: block !important;
    opacity: 1 !important;
}

/* Desktop: 4 products in a single row */
@media (min-width: 1024px) {
    .related.products ul.products li.product {
        width: calc(25% - 8px) !important;
        max-width: calc(25% - 8px) !important;
    }
}


/* Stock status */
.stock {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.stock.in-stock {
    background: #E8F5E9;
    color: #2E7D32;
}

.stock.out-of-stock {
    background: #FFEBEE;
    color: #C62828;
}

/* ==========================================================================
   Cart Page - Material Design Styling
   ========================================================================== */

/* Cart table - Material Design card styling */
.woocommerce-cart-form {
    margin-bottom: 2rem;
}

.shop_table.cart {
    border: none;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1.5rem;
    overflow-x: auto;
    box-sizing: border-box;
}

.shop_table.cart thead {
    border-bottom: 2px solid #E0E0E0;
}

.shop_table.cart thead th {
    padding: 1rem;
    font-weight: 500;
    color: #212121;
    border: none;
    text-align: left;
}

.shop_table.cart tbody tr {
    border-bottom: 1px solid #F5F5F5;
}

.shop_table.cart tbody td {
    padding: 1.5rem 1rem;
    vertical-align: middle;
    border: none;
}

/* Cart totals - Material Design card styling */
.cart_totals {
    background: transparent;
}

.cart_totals h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: #212121;
}

.shop_table_responsive {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1.5rem;
    border: none;
}

.cart_totals table {
    border: none;
}

.cart_totals table th,
.cart_totals table td {
    padding: 0.75rem 0;
    border: none;
    border-bottom: 1px solid #F5F5F5;
}

.cart_totals table tr:last-child th,
.cart_totals table tr:last-child td {
    border-bottom: none;
    font-weight: 500;
    font-size: 1.125rem;
}

/* Coupon code input and buttons */
.coupon {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.coupon input[type="text"] {
    flex: 1;
    min-width: 250px;
    height: 48px;
    padding: 0 1rem;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    font-size: 1rem;
    color: #212121;
    transition: border-color 0.2s ease;
}

.coupon input[type="text"]:focus {
    outline: none;
    border-color: #006A6B;
    box-shadow: 0 0 0 2px rgba(0, 106, 107, 0.1);
}

.coupon button[name="apply_coupon"],
button[name="update_cart"] {
    height: 48px;
    padding: 0 1.5rem;
    background: #006A6B;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.coupon button[name="apply_coupon"]:hover,
button[name="update_cart"]:hover {
    background: #005556;
    box-shadow: 0 2px 8px rgba(0, 106, 107, 0.3);
    transform: translateY(-1px);
}

.coupon button[name="apply_coupon"]:active,
button[name="update_cart"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 106, 107, 0.3);
}

/* Mobile optimization */
@media (max-width: 767px) {
    .woocommerce-cart-form {
        padding: 0;
        margin: 0;
    }
    
    .cart_totals {
        padding: 0;
        margin: 0;
    }
    
    .shop_table.cart {
        padding: 1rem 0.5rem;
        margin: 0;
        width: 100%;
        max-width: 100%;
        display: block;
    }
    
    .shop_table_responsive {
        padding: 1rem 0.5rem;
        width: 100%;
        max-width: 100%;
        display: block;
    }
    
    .shop_table.cart thead {
        display: none;
    }
    
    .shop_table.cart tbody {
        display: block;
        width: 100%;
    }
    
    .shop_table.cart tbody tr {
        display: block;
        padding: 1rem;
        margin-bottom: 1rem;
        border: none;
        border-bottom: 2px solid #E0E0E0;
        position: relative;
    }
    
    .shop_table.cart tbody td {
        display: block;
        width: 100% !important;
        padding: 0.5rem 0;
        text-align: left;
        border: none;
    }
    
    .shop_table.cart tbody td::before {
        content: attr(data-title) ": ";
        font-weight: 600;
        color: #212121;
    }
    
    .shop_table.cart .product-remove {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
    
    .shop_table.cart .product-thumbnail {
        text-align: center;
        padding-bottom: 1rem;
    }
    
    .shop_table.cart .product-thumbnail img {
        max-width: 150px;
    }
    
    /* Stack coupon form vertically on mobile */
    .coupon {
        flex-direction: column;
        align-items: stretch;
    }
    
    .coupon input[type="text"] {
        width: 100%;
        min-width: 100%;
    }
    
    .coupon button[name="apply_coupon"] {
        width: 100%;
    }
}

/* ==========================================================================
   Cart Cross-Sells - "You may be interested in" Products
   Match site product card styling
   ========================================================================== */

.cross-sells {
    margin-top: 0;
    padding: 0;
    clear: both;
}

.cross-sells h2 {
    margin-bottom: 1.5rem;
}

/* Mobile/Tablet only: h2 styling */
@media (max-width: 1023px) {
    .cross-sells h2 {
        font-size: 1.5rem;
        font-weight: 500;
        margin-bottom: 1.5rem;
        color: #212121;
        padding: 0 1rem;
    }
}

/* Product grid - Match msb-products-grid styling */
.cross-sells ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    gap: 0 !important;
}

.cross-sells ul.products li.product {
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    margin: 0 4px 16px 4px !important;
    float: none !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure product cards display properly */
.cross-sells .msb-product-card {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.cross-sells .msb-product-image-wrapper {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.cross-sells .msb-product-image {
    display: block !important;
    opacity: 1 !important;
}

.cross-sells .msb-product-info {
    display: block !important;
}

.cross-sells .msb-product-actions {
    padding: 0 16px 16px 16px;
}

.cross-sells .msb-product-actions .button,
.cross-sells .msb-product-actions .msb-view-product-button {
    width: 100%;
    display: block;
    text-align: center;
}

/* Desktop: 3 products per row */
@media (min-width: 1024px) {
    /* Two-column layout: cross-sells on left, cart totals on right */
    .cart-collaterals {
        display: flex;
        flex-direction: row-reverse;
        gap: 0;
        align-items: flex-start;
        padding: 0;
    }
    
    .cart-collaterals .cross-sells {
        flex: 1;
        max-width: 65%;
        padding: 0;
        padding-right: 1rem;
    }
    
    .cart-collaterals .cart_totals {
        flex: 0 0 auto;
        min-width: 300px;
        max-width: 400px;
    }
    
    .cross-sells ul.products li.product {
        width: calc(33.333% - 8px) !important;
        max-width: calc(33.333% - 8px) !important;
    }
}

/* Tablet: 3 products per row */
@media (min-width: 768px) and (max-width: 1023px) {
    .cross-sells ul.products li.product {
        width: calc(33.333% - 8px) !important;
        max-width: calc(33.333% - 8px) !important;
    }
}

/* ==========================================================================
   Streamlined Checkout - Material Design (Shopify-style)
   Mobile-First Implementation
   ========================================================================== */

/* Base Checkout Canvas */
.msb-checkout-canvas {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
    background: #fff;
}

.msb-checkout-canvas * {
    box-sizing: border-box;
}

/* Main Container - Two Column Layout */
.msb-checkout-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    min-height: 100vh;
}

/* Mobile: Stack vertically, sidebar first (order summary on top) */
@media (max-width: 767px) {
    .msb-checkout-container {
        flex-direction: column-reverse;
    }
}

/* Left Column - Checkout Form */
.msb-checkout-form {
    width: 57%;
    padding: 3rem 4rem 3rem 2.5rem;
}

@media (max-width: 767px) {
    .msb-checkout-form {
        width: 100%;
        padding: 1.5rem 1rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .msb-checkout-form {
        width: 55%;
        padding: 2rem;
    }
}

/* Right Column - Order Summary Sidebar */
.msb-checkout-sidebar {
    position: relative;
    width: 43%;
    padding: 3rem 2.5rem;
    background: #fafafa;
    border-left: 1px solid #e1e1e1;
}

.msb-checkout-sidebar::after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #fafafa;
    z-index: -1;
    box-shadow: 1px 0 0 #e1e1e1 inset;
}

@media (max-width: 767px) {
    .msb-checkout-sidebar {
        width: 100%;
        border-left: none;
        border-bottom: 1px solid #e1e1e1;
        padding: 1.5rem 1rem;
    }
    
    .msb-checkout-sidebar::after {
        box-shadow: none;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .msb-checkout-sidebar {
        width: 45%;
        padding: 2rem;
    }
}

/* Checkout Header - Logo & Breadcrumbs */
.msb-checkout-header {
    margin-bottom: 2.5rem;
}

/* Hide WooCommerce default elements that duplicate our custom checkout */
.msb-checkout-container .woocommerce-checkout #payment button#place_order,
.msb-checkout-container .woocommerce-NoticeGroup-checkout + form[name="checkout"] input#coupon_code {
    display: none !important;
}

/* Hide the entire default WooCommerce place order section since we have custom */
.msb-checkout-container #order_review button.button.alt {
    display: none !important;
}

.msb-checkout-logo {
    margin-bottom: 1.5rem;
}

.msb-checkout-logo img {
    max-width: 200px;
    height: auto;
}

.msb-site-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
}

.msb-site-title a {
    color: #212121;
    text-decoration: none;
}

/* Breadcrumb Navigation */
.msb-checkout-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    gap: 1.5rem;
}

.msb-breadcrumb-item {
    position: relative;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.msb-breadcrumb-item a {
    color: #1976D2;
    text-decoration: none;
}

.msb-breadcrumb-item a:hover {
    text-decoration: underline;
}

.msb-breadcrumb-item.active {
    color: #212121;
    font-weight: 600;
}

/* Breadcrumb Chevron */
.msb-breadcrumb-item:not(:last-child)::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-bottom: 2px solid #616161;
    border-right: 2px solid #616161;
    transform: rotate(-45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: -12px;
}

/* Checkout Sections */
.msb-checkout-section {
    margin-bottom: 2rem;
}

.msb-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.msb-section-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #212121;
    margin: 0;
}

.msb-login-link {
    font-size: 0.875rem;
    color: #616161;
    margin: 0;
}

.msb-login-link a {
    color: #1976D2;
    text-decoration: none;
}

.msb-login-link a:hover {
    text-decoration: underline;
}

/* Form Fields - Material Design */
.woocommerce-checkout .form-row {
    position: relative;
    margin-bottom: 1rem;
}

.woocommerce-checkout .form-row label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #424242;
    font-weight: 500;
}

.woocommerce-checkout .form-row label .required {
    color: #d32f2f;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: #212121;
    border: 1px solid #d9d9d9;
    border-radius: 0.3125rem;
    background: #fff;
    transition: all 0.3s ease;
    line-height: 1.5;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    outline: none;
    border-color: #1976D2;
    box-shadow: 0 0 0 1px #1976D2;
}

.woocommerce-checkout .form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23616161' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Phone field with country code selector */
.woocommerce-checkout .form-row.woocommerce-validated input[type="tel"],
.woocommerce-checkout #billing_phone_field input[type="tel"],
.woocommerce-checkout input[type="tel"].input-text {
    padding-left: 3.5rem !important;
}

/* Ensure the country selector/flag has space */
.woocommerce-checkout .iti {
    width: 100%;
}

.woocommerce-checkout .iti__flag-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

/* Field Layouts */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    flex: 1 0 calc(50% - 0.375rem);
    min-width: calc(50% - 0.375rem);
}

.woocommerce-checkout .form-row-wide {
    flex: 0 0 100%;
}

@media (max-width: 767px) {
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        flex: 0 0 100%;
        min-width: 100%;
    }
}

/* Ship to Different Address */
.woocommerce-checkout #ship-to-different-address {
    margin: 1.5rem 0 1rem 0;
}

.woocommerce-checkout #ship-to-different-address label {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: #212121;
    cursor: pointer;
    position: relative;
    padding: 0;
    background: none;
}

.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
    margin-right: 0.75rem;
}

/* Shipping Methods Table */
.msb-shipping-methods {
    width: 100%;
}

.msb-shipping-methods ul,
.woocommerce-shipping-methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.msb-shipping-methods li,
.woocommerce-shipping-methods li {
    padding: 1rem !important;
    border: 2px solid #E0E0E0 !important;
    border-radius: 0.5rem !important;
    margin-bottom: 0.75rem !important;
    display: block !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
    background: #fff !important;
}

.msb-shipping-methods li:hover,
.woocommerce-shipping-methods li:hover {
    border-color: #1976D2 !important;
    background-color: #F5F5F5 !important;
}

/* Selected state - when radio is checked */
.msb-shipping-methods li:has(input[type="radio"]:checked),
.woocommerce-shipping-methods li:has(input[type="radio"]:checked) {
    border-color: #1976D2 !important;
    background-color: #E3F2FD !important;
}

/* Fallback for older browsers without :has() support */
.msb-shipping-methods li.selected,
.woocommerce-shipping-methods li.selected {
    border-color: #1976D2 !important;
    background-color: #E3F2FD !important;
}

.msb-shipping-methods input[type="radio"],
.woocommerce-shipping-methods input[type="radio"] {
    margin-right: 0.75rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.msb-shipping-methods label,
.woocommerce-shipping-methods label {
    display: inline !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    vertical-align: middle !important;
}

.msb-shipping-methods .woocommerce-Price-amount,
.woocommerce-shipping-methods .woocommerce-Price-amount {
    margin-left: 1rem !important;
    color: #1976D2 !important;
    font-weight: 700 !important;
}

/* Payment Methods */
.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    border: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
    margin-bottom: 0.75rem;
    background: none;
    border: none;
    padding: 0;
    position: relative;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    display: flex;
    align-items: center;
    padding: 1rem;
    padding-left: 3rem;
    border: 2px solid #E0E0E0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background: #fff;
}

/* Custom radio button indicator */
.woocommerce-checkout #payment ul.payment_methods li label::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #E0E0E0;
    border-radius: 50%;
    background: #fff;
    transition: all 0.3s ease;
}

.woocommerce-checkout #payment ul.payment_methods li label:hover {
    border-color: #1976D2;
    background: #E3F2FD;
}

.woocommerce-checkout #payment ul.payment_methods li label:hover::before {
    border-color: #1976D2;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked ~ label {
    border-color: #1976D2;
    background: #E3F2FD;
    box-shadow: 0 0 0 1px #1976D2;
}

/* Checked state - filled circle */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked ~ label::before {
    border-color: #1976D2;
    background: #1976D2;
    box-shadow: inset 0 0 0 4px #fff;
}

.woocommerce-checkout #payment .payment_box {
    background: #f5f5f5;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 0.75rem 0 0 0;
}

/* Navigation Buttons */
.msb-checkout-navigation {
    margin-top: 2rem;
}

.msb-btn {
    display: inline-block;
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
}

.msb-btn-primary {
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
    color: #fff;
    box-shadow: 0 0.5rem 1.5rem rgba(25, 118, 210, 0.3);
}

.msb-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.75rem 2rem rgba(25, 118, 210, 0.4);
}

.msb-btn-primary:active {
    transform: translateY(0);
}

.msb-back-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    color: #1976D2;
    text-decoration: none;
    font-size: 0.875rem;
}

.msb-back-link:hover {
    text-decoration: underline;
}

/* Order Summary Sidebar */
.msb-order-summary {
    position: sticky;
    top: 2rem;
}

/* Product List in Sidebar */
.msb-checkout__product-list {
    margin-bottom: 1.5rem;
}

.msb-checkout__product-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #E0E0E0;
}

.msb-checkout__product-item:first-child {
    padding-top: 0;
}

.msb-checkout__product-item:last-child {
    border-bottom: none;
}

.msb-checkout__product-image {
    position: relative;
    flex-shrink: 0;
}

.msb-checkout__product-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid #E0E0E0;
}

.msb-checkout__product-qty {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #616161;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.msb-checkout__product-details {
    flex: 1;
    min-width: 0;
}

.msb-checkout__product-name {
    font-weight: 600;
    color: #212121;
    margin-bottom: 0.25rem;
}

.msb-checkout__product-name a {
    color: #212121;
    text-decoration: none;
}

.msb-checkout__product-variant {
    font-size: 0.875rem;
    color: #616161;
}

.msb-checkout__product-price {
    flex-shrink: 0;
    font-weight: 700;
    color: #1976D2;
}

/* Coupon Section */
.msb-coupon-section {
    margin-bottom: 1.5rem;
}

.woocommerce-checkout .checkout_coupon {
    padding: 0;
    border: none;
    margin: 0;
}

.woocommerce-checkout .checkout_coupon p:first-child {
    margin-bottom: 1rem;
}

.woocommerce-checkout .checkout_coupon .form-row {
    display: flex;
    gap: 0.5rem;
}

.woocommerce-checkout .checkout_coupon input.input-text {
    flex: 1;
    padding: 0.75rem 1rem;
}

.woocommerce-checkout .checkout_coupon button {
    padding: 0.75rem 1.5rem;
    background: #1976D2;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.woocommerce-checkout .checkout_coupon button:hover {
    background: #1565C0;
}

/* Order Review Table */
.woocommerce-checkout-review-order-table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 0.75rem 0;
    border-bottom: 1px solid #E0E0E0;
    text-align: left;
}

.woocommerce-checkout-review-order-table th {
    font-weight: 600;
    color: #616161;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td {
    font-weight: normal;
    color: #616161;
    padding-top: 1rem;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-size: 1.125rem;
    font-weight: 700;
    color: #212121;
    border-top: 2px solid #212121;
    border-bottom: none;
    padding-top: 1rem;
}

.woocommerce-checkout-review-order-table .woocommerce-Price-amount {
    color: #1976D2;
    font-weight: 700;
}

/* Error/Success Messages */
.msb-checkout__notices,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
    background: #FFEBEE;
    color: #C62828;
    padding: 1rem 1.5rem;
    border-left: 4px solid #C62828;
    border-radius: 0.25rem;
    margin-bottom: 1.5rem;
}

.woocommerce-checkout .woocommerce-message {
    background: #E8F5E9;
    color: #2E7D32;
    border-left-color: #2E7D32;
}

.woocommerce-checkout .woocommerce-info {
    background: #E3F2FD;
    color: #1976D2;
    border-left-color: #1976D2;
}

/* Loading State */
.woocommerce-checkout.processing {
    opacity: 0.6;
    pointer-events: none;
}

.woocommerce-checkout.processing::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    border: 4px solid #E0E0E0;
    border-top-color: #1976D2;
    border-radius: 50%;
    animation: msb-spin 0.6s linear infinite;
    z-index: 9999;
}

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

/* Terms and Conditions */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin: 1.5rem 0;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
    margin-right: 0.75rem;
    margin-top: 0.25rem;
}

.woocommerce-checkout .woocommerce-privacy-policy-text {
    font-size: 0.875rem;
    color: #616161;
    margin-top: 1rem;
}

/* Hide Default WooCommerce Elements */
.woocommerce-checkout .woocommerce-additional-fields {
    margin-top: 1.5rem;
}

.woocommerce-checkout .woocommerce-additional-fields h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .msb-checkout-header {
        margin-bottom: 1.5rem;
    }
    
    .msb-checkout-breadcrumb {
        font-size: 0.8125rem;
        gap: 1rem;
    }
    
    .msb-checkout-section {
        margin-bottom: 1.5rem;
    }
}

/* ==========================================================================
   MINI CART WIDGET
   Material Design 3 slide-out cart implementation
   Mobile-first with minimal JavaScript
   ========================================================================== */

/* Mini Cart Toggle Button (Cart Icon) */
.msb-mini-cart-toggle {
    position: relative;
    display: inline-block;
}

.msb-mini-cart__toggle-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.msb-mini-cart__toggle-button:hover {
    color: #006A6B;
}

.msb-mini-cart__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.msb-mini-cart__icon svg {
    width: 48px;  /* Double size from 24px */
    height: 48px; /* Double size from 24px */
}

/* Cart Count Badge */
.msb-mini-cart__count {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ff0000; /* Bright red */
    color: #ffffff;      /* White text */
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Mini Cart Container (Overlay + Sidebar) */
.msb-mini-cart-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001; /* Above top bar (1001) and header (1000) */
    pointer-events: none;
    visibility: hidden;
}

.msb-mini-cart-container.msb-mini-cart--open {
    pointer-events: all;
    visibility: visible;
}

/* Overlay Background */
.msb-mini-cart__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.msb-mini-cart--open .msb-mini-cart__overlay {
    background: rgba(0, 0, 0, 0.5);
}

/* Sidebar Cart */
.msb-mini-cart__sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    background: #fff;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.msb-mini-cart--open .msb-mini-cart__sidebar {
    transform: translateX(0);
}

/* Mobile: Full width sidebar */
@media (max-width: 767px) {
    .msb-mini-cart__sidebar {
        max-width: 100%;
    }
}

/* Cart Header */
.msb-mini-cart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    background: #f5f5f5;
}

.msb-mini-cart__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.msb-mini-cart__close-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #666;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.msb-mini-cart__close-button:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

.msb-mini-cart__close-button svg {
    width: 24px;
    height: 24px;
}

/* Cart Content (Scrollable) */
.msb-mini-cart__content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
}

/* Empty Cart Message */
.msb-mini-cart__empty {
    padding: 3rem 1.5rem;
    text-align: center;
}

.msb-mini-cart__empty-message {
    margin: 0;
    font-size: 1rem;
    color: #666;
}

/* Cart Products List */
.msb-mini-cart__products {
    margin-bottom: 1.5rem;
}

/* Single Product Item */
.msb-mini-cart__product {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.msb-mini-cart__product:last-child {
    border-bottom: none;
}

/* Product Image */
.msb-mini-cart__product-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.msb-mini-cart__product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.msb-mini-cart__product-image a {
    display: block;
}

/* Product Details */
.msb-mini-cart__product-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.msb-mini-cart__product-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

.msb-mini-cart__product-name a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.msb-mini-cart__product-name a:hover {
    color: #006A6B;
}

.msb-mini-cart__product-price {
    font-size: 0.875rem;
    color: #666;
}

.msb-mini-cart__product-price .quantity {
    display: block;
}

.msb-mini-cart__product-price .product-quantity {
    font-weight: 600;
    color: #333;
}

/* Remove Button */
.msb-mini-cart__product-remove {
    display: flex;
    align-items: flex-start;
}

.msb-remove-from-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #999;
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.msb-remove-from-cart:hover {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

/* Remove Animation */
.msb-mini-cart__product.removing {
    opacity: 0.5;
    pointer-events: none;
}

/* Cart Subtotal */
.msb-mini-cart__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    border-top: 2px solid #e0e0e0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
}

.msb-mini-cart__subtotal-amount {
    color: #006A6B;
}

/* Cart Buttons */
.msb-mini-cart__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}

.msb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 2rem;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.msb-button--view-cart {
    background: #fff;
    color: #006A6B;
    border: 2px solid #006A6B;
    box-shadow: none;
}

.msb-button--view-cart:hover {
    background: #f0f9f9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 106, 107, 0.2);
}

.msb-button--checkout {
    background: linear-gradient(135deg, #006A6B 0%, #008B8C 100%);
    color: #fff;
    border: 2px solid transparent;
}

.msb-button--checkout:hover {
    background: linear-gradient(135deg, #005555 0%, #007070 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 106, 107, 0.3);
}

/* Mobile: Stack buttons vertically */
@media (max-width: 480px) {
    .msb-mini-cart__buttons {
        grid-template-columns: 1fr;
    }
}

/* Prevent body scroll when cart is open */
body.msb-mini-cart-open {
    overflow: hidden;
}

/* Desktop: Larger sidebar */
@media (min-width: 768px) {
    .msb-mini-cart__sidebar {
        max-width: 480px;
    }
    
    .msb-mini-cart__header {
        padding: 1.5rem 2rem;
    }
    
    .msb-mini-cart__content {
        padding: 2rem;
    }
    
    .msb-mini-cart__product {
        grid-template-columns: 100px 1fr auto;
        gap: 1.25rem;
    }
    
    .msb-mini-cart__product-image {
        width: 100px;
        height: 100px;
    }
}

/* ==========================================================================
   Mobile Performance & UX Optimizations
   ========================================================================== */