/* =================================================================
   SINGLE PRODUCT - ELEGANT FLOW DESIGN
   ================================================================= */

:root {
    /* Softer, more sophisticated palette */
    --soft-cream: #fdfbf8;
    --warm-sand: #f7f3ed;
    --muted-gold: #d4a574;
    --soft-gold: #e5c19f;
    --charcoal: #2c2c2c;
    --gentle-gray: #666666;
    --whisper-gray: #999999;
    --cloud: #f9f9f9;
    
    /* Smooth shadows - no harsh edges */
    --soft-shadow: 0 8px 32px rgba(0,0,0,0.06);
    --hover-shadow: 0 12px 48px rgba(0,0,0,0.08);
    --glow: 0 0 40px rgba(212, 165, 116, 0.15);
}

* {
    box-sizing: border-box;
}

/* Smooth base */
.single-product-premium {
    background: var(--soft-cream);
    overflow-x: hidden;
}


/* Fix for lazy loading issues on related products */
.related.products ul.products li.product img,
.related.products ul.products li.product a img,
.upsells.products ul.products li.product img,
.upsells.products ul.products li.product a img,
.cross-sells ul.products li.product img,
.cross-sells ul.products li.product a img {
    contain: none !important;
    height: auto !important;
    max-height: 300px !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    background: #f5f5f5; /* Placeholder color while loading */
}

/* Ensure proper dimensions for related products grid */
.related.products ul.products li.product,
.upsells.products ul.products li.product,
.cross-sells ul.products li.product {
    overflow: visible !important;
}

/* Fix for main product images */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery img,
.single-product div.product .images img {
    contain: none !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* Fix thumbnail gallery */
.flex-control-thumbs img,
ol.flex-control-nav img {
    contain: none !important;
    height: auto !important;
    max-height: 100px !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* =================================================================
   FULL WIDTH LAYOUT - MOBILE FIRST
   ================================================================= */

/* Force full width on single product pages */
.single-product .site,
.single-product .site-content,
.single-product .content-area,
.single-product .site-main,
.single-product main,
.single-product article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Override GeneratePress containers */
.single-product .grid-container,
.single-product .inside-article,
.single-product .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
}

/* Mobile: Full edge-to-edge */
@media (max-width: 768px) {
    .single-product-premium {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden;
    }
    
    /* Hero section - full width on mobile */
    .product-hero-section {
        margin: 0 !important;
        padding: 1rem 0 3rem !important;
        width: 100% !important;
    }
    
    .hero-grid {
        padding: 0 1rem !important; /* Only minimal edge padding */
        gap: 2rem !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Purchase section - full width */
    .product-purchase-section.premium {
        margin: 0 !important;
        padding: 3rem 0 !important;
        width: 100% !important;
    }
    
    .purchase-wrapper {
        padding: 0 1rem !important; /* Minimal edge padding */
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .purchase-card {
        margin: 0 !important;
        border-radius: 16px !important; /* Slightly less radius on mobile */
        padding: 2rem 1.5rem !important;
    }
    
    /* Tabs section - full width */
    .product-info-tabs-section {
        margin: 0 !important;
        padding: 2rem 0 3rem !important;
        width: 100% !important;
    }
    
    .product-info-tabs-section .container {
        padding: 0 1rem !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .woocommerce-tabs {
        margin: 0 !important;
        border-radius: 12px !important;
    }
}

/* Desktop: Reasonable max-width with centering */
@media (min-width: 769px) {
    .product-hero-section {
        padding: 2rem 0 6rem;
    }
    
    .hero-grid {
        max-width: 1400px; /* Increased from 1200px */
        margin: 0 auto;
        padding: 0 2rem;
    }
    
    .purchase-wrapper {
        max-width: 900px; /* Increased from 800px */
        margin: 0 auto;
        padding: 0 2rem;
    }
    
    .product-info-tabs-section .container {
        max-width: 1400px; /* Increased from 1200px */
        margin: 0 auto;
        padding: 0 2rem;
    }
}

/* Large desktop: Even more generous */
@media (min-width: 1200px) {
    .hero-grid {
        max-width: 1600px;
        padding: 0 3rem;
    }
    
    .purchase-wrapper {
        max-width: 1000px;
        padding: 0 3rem;
    }
    
    .product-info-tabs-section .container {
        max-width: 1600px;
        padding: 0 3rem;
    }
}

/* =================================================================
   SURGICAL LEFT ALIGNMENT - CONTENT ONLY
   ================================================================= */

/* Target ONLY the product info flexbox container - not other containers */
.single-product {
    align-items: flex-start !important; /* This is the key - forces flex children left */
}

/* Ensure the summary content itself is left-aligned */
.single-product .summary.entry-summary {
    text-align: left !important;
    width: 100% !important;
}

/* Target specific content elements within summary for extra safety */
.single-product .summary.entry-summary h1,
.single-product .summary.entry-summary .product-title,
.single-product .summary.entry-summary .price,
.single-product .summary.entry-summary .price-block,
.single-product .summary.entry-summary .current-price,
.single-product .summary.entry-summary .subscription-savings,
.single-product .summary.entry-summary .product-description,
.single-product .summary.entry-summary p,
.single-product .summary.entry-summary div {
    text-align: left !important;
}

/* Ensure flexbox elements align their content left */
.single-product .product-origin-process {
    justify-content: flex-start !important;
}

.single-product .notes-grid {
    justify-content: flex-start !important;
}

/* =================================================================
   BREADCRUMB - MINIMAL & ELEGANT
   ================================================================= */

.product-breadcrumb-bar {
    background: transparent;
    padding: 2rem 0 1rem;
    border: none;
}

.product-breadcrumb-bar .woocommerce-breadcrumb {
    font-size: 0.875rem;
    color: var(--whisper-gray);
    font-weight: 400;
    letter-spacing: 0.5px;
}

.product-breadcrumb-bar .woocommerce-breadcrumb a {
    color: var(--gentle-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-breadcrumb-bar .woocommerce-breadcrumb a:hover {
    color: var(--muted-gold);
}

/* =================================================================
   HERO SECTION - BALANCED PRESENTATION
   ================================================================= */

.product-hero-section {
    background: linear-gradient(to bottom, var(--soft-cream) 0%, var(--warm-sand) 100%);
    padding: 2rem 0 6rem;
    position: relative;
}

/* Subtle background decoration */
.product-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: -20%;
    width: 40%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(212, 165, 116, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 45% 55%; /* Rebalance: smaller gallery, larger content */
    gap: 4rem; /* Reduce gap for better balance */
    align-items: start; /* Align to top instead of center */
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 0 2rem; /* Add padding to prevent edge overflow */
}

/* =================================================================
   GALLERY - FLEXSLIDER COMPATIBLE
   ================================================================= */

/* Main gallery container */
.woocommerce-product-gallery {
    background: transparent;
    border: none;
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

/* FlexSlider viewport - the "window" that shows one image */
.woocommerce-product-gallery .flex-viewport {
    overflow: hidden !important;
    position: relative !important;
    border-radius: 20px !important;
    background: white !important;
    box-shadow: var(--soft-shadow) !important;
    transition: all 0.3s ease;
}

/* Gallery wrapper - DO NOT override FlexSlider's width! */
.woocommerce-product-gallery__wrapper {
    /* Remove ALL width overrides - let FlexSlider set width: 1200% */
    /* Remove ALL transform overrides - let FlexSlider handle transforms */
    position: relative !important;
    /* Don't round corners on wrapper - only on viewport */
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    /* FlexSlider needs these: */
    display: block !important;
    overflow: visible !important;
}

/* Individual slides */
.woocommerce-product-gallery__image {
    /* FlexSlider requires float: left for slides */
    float: left !important;
    display: block !important;
    position: relative !important;
    margin-right: 0 !important;
    /* Let FlexSlider control width via inline styles */
}

/* Images within slides */
.woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    /* No border radius on individual images */
    border-radius: 0 !important;
}

/* Hover effect on the viewport, not wrapper */
.woocommerce-product-gallery .flex-viewport:hover {
    transform: translateY(-5px);
    box-shadow: var(--hover-shadow) !important;
}

/* Thumbnails */
.woocommerce-product-gallery .flex-control-thumbs {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    background: transparent;
    padding: 1.5rem 0 0;
    border-radius: 0;
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    flex-shrink: 0;
    cursor: pointer;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.woocommerce-product-gallery .flex-control-thumbs li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.woocommerce-product-gallery .flex-control-thumbs li.flex-active {
    border-color: var(--muted-gold);
    transform: scale(1.05);
}

/* Badges positioning */
.sale-badge.premium,
.stock-badge {
    position: absolute;
    top: 30px;
    z-index: 20;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    backdrop-filter: blur(10px);
    border: none;
}

.sale-badge.premium {
    left: 30px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--charcoal);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.stock-badge {
    right: 30px;
    background: rgba(255, 107, 107, 0.9);
    color: white;
}

/* Zoom trigger */
.woocommerce-product-gallery__trigger {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 15;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.woocommerce-product-gallery__trigger:hover {
    background: var(--muted-gold);
    color: white;
    transform: scale(1.1);
}

/* =================================================================
   PRODUCT INFO COLUMN - REDESIGNED FOR FLOW & CLARITY
   ================================================================= */

.product-info-column {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* Consistent spacing between sections */
    width: 100%;
    min-width: 0;
    padding: 2rem 0; /* Add breathing room */
}

.product-info-wrapper {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}

/* =================================================================
   SECTION 1: PRODUCT IDENTITY (Header, Title, Basics)
   ================================================================= */

.product-identity-section {
    border-bottom: 1px solid rgba(212, 165, 116, 0.1);
    padding-bottom: 2rem;
}

/* Roaster badge - clean and subtle */
.roaster-badge.premium {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--warm-sand);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--charcoal);
    border: 1px solid rgba(212, 165, 116, 0.15);
    text-align: left;
}

.roaster-badge.premium i {
    color: var(--muted-gold);
    font-size: 1rem;
}

/* Product title - hero typography */
.product-title.premium {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--charcoal);
    font-weight: 300;
    letter-spacing: -1px;
    word-wrap: break-word;
    text-align: left;
}

/* Origin & Process - organized badges */
.product-origin-process {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.product-origin-process span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    color: var(--charcoal);
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(212, 165, 116, 0.2);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.product-origin-process span:hover {
    background: var(--warm-sand);
    border-color: var(--muted-gold);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.product-origin-process span i {
    color: var(--muted-gold);
    font-size: 0.8rem;
}

/* =================================================================
   SECTION 2: PRICING & VALUE (Price, Savings)
   ================================================================= */

.pricing-section {
    background: linear-gradient(135deg, var(--cloud) 0%, #ffffff 100%);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(212, 165, 116, 0.08);
    margin-bottom: 0; /* Remove margin since we use gap */
}

.price-block.premium {
    background: transparent;
    padding: 0;
    border: none;
    margin: 0;
    width: 100%;
    text-align: left;
}

.current-price {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 300;
    color: var(--charcoal);
    margin-bottom: 0.75rem;
    letter-spacing: -0.51px;
    text-align: left;
    line-height: 1.1;
}

.current-price del {
    opacity: 0.4;
    font-size: 0.7em;
    margin-right: 0.75rem;
}

/* Clean up the price range display */
.current-price .woocommerce-Price-range {
    display: block;
    font-size: 0.9em; /* Make range smaller */
    line-height: 1.3;
}

/* Style the "per cup" text to be less prominent */
.current-price .price-per-cup,
.current-price br + * {
    font-size: 0.5em !important; /* Much smaller */
    color: var(--gentle-gray) !important;
    font-weight: 400 !important;
    display: block !important;
    margin-top: 0.5rem !important;
    opacity: 0.8;
}




/* Clean up shipping text */
.current-price .shipping-text,
.current-price [class*="shipping"] {
    font-size: 0.45em !important; /* Even smaller for shipping */
    color: var(--muted-gold) !important;
    font-weight: 500 !important;
    margin-top: 0.25rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subscription-savings {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(39, 174, 96, 0.2);
}

.subscription-savings i {
    color: #27ae60;
}

/* =================================================================
   SECTION 3: PRODUCT STORY (Tasting Notes, Description)
   ================================================================= */

.product-story-section {
    /* No background - let it breathe */
}

/* Tasting Notes - pill layout */
.tasting-notes.premium {
    margin-bottom: 2rem;
}

.tasting-notes.premium h3 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tasting-notes.premium h3 i {
    color: var(--muted-gold);
    font-size: 1.1rem;
}

.notes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start;
}

.note-pill {
    background: var(--muted-gold);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    flex-shrink: 0;
    border: none;
    box-shadow: 0 2px 8px rgba(212, 165, 116, 0.3);
}

.note-pill:hover {
    background: #c09560;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4);
}

/* Product Description - readable prose */
.product-description.premium {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--gentle-gray);
    font-weight: 400;
    text-align: left;
    margin-top: 1.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    box-sizing: border-box;
}

/* =================================================================
   SECTION 4: PRODUCT ATTRIBUTES (Technical Details)
   ================================================================= */

.product-attributes.premium {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2rem;
    margin: 1.5rem 0;
    background: var(--warm-sand);
    border-radius: 20px;
    border: 1px solid rgba(212, 165, 116, 0.1);
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box;
}

.attribute-item {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important; /* Icon, Label, Value */
    gap: 0.75rem !important;
    padding: 1rem !important;
    background: white !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.attribute-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: rgba(212, 165, 116, 0.2);
}

.attribute-item i {
    color: var(--secondary-color) !important;
    font-size: 1.2rem !important;
    width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.attr-label {
    font-weight: 500 !important;
    color: var(--gentle-gray) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
}

.attr-value {
    font-weight: 600 !important;
    color: var(--charcoal) !important;
    font-size: 0.9rem !important;
    text-align: right !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    min-width: 0 !important; /* Allows shrinking */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Alternative layout for very long attribute values */
@media (max-width: 768px) {
    .attribute-item {
        grid-template-columns: auto 1fr !important; /* Stack icon+label, then value below */
        grid-template-rows: auto auto !important;
        gap: 0.5rem !important;
    }
    
    .attr-label {
        grid-column: 2 !important;
        text-align: left !important;
    }
    
    .attr-value {
        grid-template-columns: auto 1fr !important; /* Stack icon+label, then value below */
        grid-template-rows: auto auto !important;
        gap: 0.5rem !important;
    }
}

/* Ensure parent containers don't constrain width */
.tasting-notes.premium,
.product-description.premium {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix any flex containers that might be causing issues */
.premium {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}



/* =================================================================
   PURCHASE SECTION - STREAMLINED JOURNEY
   ================================================================= */

.product-purchase-section.premium {
    background: linear-gradient(to bottom, var(--warm-sand) 0%, white 100%);
    padding: 6rem 0;
    position: relative;
}

.purchase-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.purchase-card {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border: 1px solid rgba(212, 165, 116, 0.08);
    border-radius: 24px;
    padding: 3.5rem 3rem;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 8px 25px rgba(212, 165, 116, 0.05);
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.purchase-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.12),
        0 12px 35px rgba(212, 165, 116, 0.08);
    border-color: rgba(212, 165, 116, 0.15);
}

/* Subtle background pattern */
.purchase-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 20%, rgba(212, 165, 116, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(212, 165, 116, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure all content is above the background */
.purchase-card > * {
    position: relative;
    z-index: 1;
}

/* =================================================================
   PURCHASE HEADER - REFINED
   ================================================================= */

.purchase-header {
    text-align: left;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(212, 165, 116, 0.1);
    position: relative;
}

.purchase-header h2 {
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--charcoal);
    margin: 0 0 1rem 0;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.purchase-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--muted-gold), transparent);
    border-radius: 1px;
}

.stock-status {
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.stock-status .in-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #27ae60;
    font-weight: 500;
    background: rgba(39, 174, 96, 0.08);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(39, 174, 96, 0.15);
}

.stock-status .in-stock i {
    font-size: 0.8rem;
}

/* =================================================================
   FORM WRAPPER - ORGANIZED SECTIONS
   ================================================================= */

.purchase-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* =================================================================
   VARIATIONS - MODERN BUTTONS
   ================================================================= */

.woocommerce div.product form.cart .variations {
    background: var(--warm-sand);
    border: 1px solid rgba(212, 165, 116, 0.1);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.woocommerce div.product form.cart .variations td.label {
    font-weight: 500;
    color: var(--charcoal);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding-bottom: 1rem;
    border-bottom: none;
}

.woocommerce div.product form.cart .variations select {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    font-size: 1rem;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 300;
}

.woocommerce div.product form.cart .variations select:hover,
.woocommerce div.product form.cart .variations select:focus {
    border-color: var(--muted-gold);
    outline: none;
}

.variation-buttons-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.variation-button {
    background: white;
    border: 2px solid rgba(212, 165, 116, 0.2);
    color: var(--charcoal);
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.variation-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.1), transparent);
    transition: left 0.5s ease;
}

.variation-button:hover {
    border-color: var(--muted-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 165, 116, 0.25);
    background: rgba(212, 165, 116, 0.05);
}

.variation-button:hover::before {
    left: 100%;
}

/* FIXED: Selected state with proper contrast */
.variation-button.selected,
.variation-button:focus {
    background: var(--charcoal) !important;
    border-color: var(--charcoal) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(44, 44, 44, 0.3);
}

/* =================================================================
   QUANTITY & ADD TO CART - REFINED
   ================================================================= */

.woocommerce div.product form.cart .cart {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.5rem;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
}

.quantity {
    position: relative;
}

.quantity input[type="number"] {
    width: 80px;
    padding: 1rem;
    border: 2px solid rgba(212, 165, 116, 0.2);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    background: white;
    transition: all 0.3s ease;
}

.quantity input[type="number"]:focus {
    outline: none;
    border-color: var(--muted-gold);
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}

/* Elegant Add to Cart Button - FIXED COLORS */
.single_add_to_cart_button {
    background: linear-gradient(135deg, var(--muted-gold) 0%, #c09560 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: 200px;
    box-shadow: 0 4px 15px rgba(212, 165, 116, 0.3);
}

.single_add_to_cart_button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.single_add_to_cart_button:hover {
    background: linear-gradient(135deg, #c09560 0%, #b08650 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 165, 116, 0.4);
    color: white !important;
}

.single_add_to_cart_button:hover::before {
    left: 100%;
}

.single_add_to_cart_button:active {
    transform: translateY(0);
}

/* Fix any other cart form styling that might be purple */
.woocommerce div.product form.cart .cart .single_add_to_cart_button {
    background: linear-gradient(135deg, var(--muted-gold) 0%, #c09560 100%) !important;
    color: white !important;
}

.woocommerce div.product form.cart .cart .single_add_to_cart_button:hover {
    background: linear-gradient(135deg, #c09560 0%, #b08650 100%) !important;
    color: white !important;
}

/* Force override any purple/conflicting button styles */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--muted-gold) !important;
    color: white !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: #c09560 !important;
    color: white !important;
}

.subscribe-button {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
    color: white !important;
    border: 2px solid transparent !important;
    border-radius: 12px;
    padding: 1rem 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.subscribe-button:hover {
    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
    color: white !important;
}

.subscribe-button:hover i {
    transform: rotate(360deg);
}

.linked-product-button-wrapper {
    margin-top: 1rem;
    width: 100%;
}

.linked-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.5rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.linked-button i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

/* One-off Purchase Button Styling */
.one-off-button {
    background: transparent !important;
    color: var(--muted-gold) !important;
    border: 2px solid var(--muted-gold) !important;
}

.one-off-button:hover {
    background: var(--muted-gold) !important;
    color: white !important;
    border-color: var(--muted-gold) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 165, 116, 0.3);
}

.one-off-button:hover i {
    transform: scale(1.1);
}

/* Button shine effect */
.linked-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.linked-button:hover::before {
    left: 100%;
}

/* =================================================================
   URGENCY SECTION - SUBTLE ALERTS
   ================================================================= */

.purchase-urgency {
    background: linear-gradient(135deg, #fff3e6 0%, #fff8f0 100%);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
}

.urgency-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #8b4513;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.urgency-item:last-child {
    margin-bottom: 0;
}

.urgency-item i {
    color: #ff6b35;
    font-size: 1rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.urgency-item strong {
    color: #d2691e;
}
/* =================================================================
   GALLERY TRUST BADGES - POSITIONED BELOW THUMBNAILS
   ================================================================= */

/* Remove absolute positioning and make them part of the normal flow */
.gallery-trust-badges.always-visible {
    position: static !important; /* Change from absolute to static */
    display: flex !important;
    gap: 0.75rem !important;
    z-index: 25 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 1.5rem 0 0 !important; /* Add top padding to separate from thumbnails */
    margin: 0 !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    border-top: 1px solid rgba(212, 165, 116, 0.1) !important; /* Add subtle separator */
}

.gallery-trust-badges .trust-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    color: var(--charcoal) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 50px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border: 1px solid rgba(212, 165, 116, 0.2) !important; /* Slightly more visible border */
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.gallery-trust-badges .trust-badge:hover {
    background: var(--warm-sand) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    border-color: var(--muted-gold) !important;
}

.gallery-trust-badges .trust-badge i {
    color: var(--muted-gold) !important;
    font-size: 0.8rem !important;
}

/* Ensure the gallery wrapper can contain the badges */
.gallery-wrapper {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Make sure thumbnails have proper spacing above badges */
.woocommerce-product-gallery .flex-control-thumbs {
    margin-bottom: 0 !important; /* Remove bottom margin since badges will handle spacing */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .gallery-trust-badges.always-visible {
        padding: 1rem 0 0 !important;
        gap: 0.5rem !important;
    }
    
    .gallery-trust-badges .trust-badge {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.7rem !important;
    }

    .linked-product-button-wrapper {
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .linked-button {
        padding: 0.875rem 1rem !important;
        font-size: 0.875rem !important;
        gap: 0.5rem;
        border-radius: 10px !important;
    }
    
    .linked-button i {
        font-size: 1rem;
    }

}

@media (max-width: 480px) {
    .gallery-trust-badges.always-visible {
        padding: 1rem 0 0 !important;
        gap: 0.4rem !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .gallery-trust-badges .trust-badge {
        padding: 0.3rem 0.7rem !important;
        font-size: 0.65rem !important;
        width: 100% !important;
        justify-content: center !important;
        max-width: 280px !important;
    }
}

    /* Stack buttons on very small screens */
    @media (max-width: 380px) {
        .linked-button span {
            font-size: 0.8rem;
        }
        
        .linked-button {
            padding: 0.75rem 0.75rem !important;
        }
    }

/* =================================================================
   TRUST POINTS - REDESIGNED & ELEGANT
   ================================================================= */

.trust-points.premium {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, var(--cloud) 0%, #ffffff 100%);
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

/* Subtle background pattern */
.trust-points.premium::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.02) 0%, transparent 70%);
    pointer-events: none;
}

/* Individual trust point styling */
.trust-point {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.trust-point:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-color: rgba(212, 165, 116, 0.1);
}

/* Icon container - modern gradient background */
.trust-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--muted-gold) 0%, var(--soft-gold) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.2);
    position: relative;
    overflow: hidden;
}

/* Icon shine effect */
.trust-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.trust-point:hover .trust-icon::before {
    opacity: 1;
    left: 100%;
}

.trust-icon i {
    font-size: 1.4rem;
    color: white;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Content styling */
.trust-content {
    flex: 1;
    min-width: 0;
}

.trust-content strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--charcoal);
    line-height: 1.3;
}

.trust-content span {
    font-size: 0.9rem;
    color: var(--gentle-gray);
    font-weight: 400;
    line-height: 1.4;
}

/* =================================================================
   PAYMENT METHODS - CLEAN FINISH
   ================================================================= */

.payment-methods {
    text-align: left;
    padding-top: 2rem;
    border-top: 1px solid rgba(212, 165, 116, 0.15);
    margin-top: 1rem;
}

.payment-methods span {
    font-size: 0.85rem;
    color: var(--gentle-gray);
    display: block;
    margin-bottom: 1rem;
    font-weight: 500;
}

.payment-methods img {
    max-width: 200px;
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.payment-methods img:hover {
    opacity: 1;
}

/* =================================================================
   PRODUCT INFO TABS SECTION - FIXED STYLING
   ================================================================= */

.product-info-tabs-section {
    padding: 4rem 0 6rem;
    background: linear-gradient(to bottom, white 0%, var(--soft-cream) 100%);
    border-top: 1px solid rgba(212, 165, 116, 0.1);
}

.product-info-tabs-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* WooCommerce Tabs Wrapper */
.woocommerce-tabs {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    border: 1px solid rgba(212, 165, 116, 0.08);
    margin: 0;
}

/* Tabs Navigation */
.woocommerce-tabs ul.tabs {
    background: var(--warm-sand);
    border-bottom: 1px solid rgba(212, 165, 116, 0.15);
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-tabs ul.tabs li {
    flex: 1;
    margin: 0;
    list-style: none;
}

.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 1.5rem 2rem;
    text-align: center;
    font-weight: 500;
    color: var(--gentle-gray);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    background: transparent;
    border-right: 1px solid rgba(212, 165, 116, 0.15);
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
}

.woocommerce-tabs ul.tabs li:last-child a {
    border-right: none;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    background: white;
    color: var(--charcoal);
    border-bottom-color: var(--muted-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Tab Content Panels */
.woocommerce-tabs .panel {
    padding: 3rem;
    background: white;
    min-height: 300px;
}

.woocommerce-tabs .panel h2 {
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--charcoal);
    margin: 0 0 2rem 0;
    letter-spacing: -0.5px;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(212, 165, 116, 0.15);
}

.woocommerce-tabs .panel p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--gentle-gray);
    margin-bottom: 1.5rem;
}

/* Product Attributes Table */
.woocommerce-product-attributes {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    border: 1px solid rgba(212, 165, 116, 0.08);
}



.woocommerce-product-attributes tr {
    border-bottom: 1px solid rgba(212, 165, 116, 0.08);
}

.woocommerce-product-attributes tr:last-child {
    border-bottom: none;
}

.woocommerce-product-attributes th {
    background: var(--warm-sand);
    padding: 1rem 1.5rem;
    text-align: left;
    font-weight: 600;
    color: var(--charcoal);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 30%;
    vertical-align: top;
}

.woocommerce-product-attributes td {
    padding: 1rem 1.5rem;
    color: var(--gentle-gray);
    font-size: 1rem;
    line-height: 1.5;
    vertical-align: top;
}

.woocommerce-product-attributes td p {
    margin: 0;
    font-size: 1rem;
    color: var(--gentle-gray);
}




/* Judge.me Reviews Styling */
#judgeme_product_reviews {
    margin-top: 2rem;
}

.jdgm-rev-widg__header {
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(212, 165, 116, 0.15);
    margin-bottom: 2rem;
}

.jdgm-rev-widg__title {
    font-size: 1.8rem !important;
    font-weight: 300 !important;
    color: var(--charcoal) !important;
    margin: 0 0 1rem 0 !important;
    letter-spacing: -0.5px !important;
}

/* Up-sells and Related Products */
.up-sells,
.related {
    margin-top: 4rem;
    padding: 3rem 0;
    background: var(--soft-cream);
    border-radius: 20px;
    border: 1px solid rgba(212, 165, 116, 0.08);
}

.up-sells h2,
.related h2 {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--charcoal);
    text-align: center;
    margin: 0 0 3rem 0;
    letter-spacing: -0.5px;
}

.up-sells .products,
.related .products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0 2rem;
    list-style: none;
}

/* =================================================================
   RESPONSIVE - TABS SECTION
   ================================================================= */

@media (max-width: 768px) {
    .product-info-tabs-section {
        padding: 3rem 0 4rem;
    }
    
    .product-info-tabs-section .container {
        padding: 0 1rem;
    }
    
    .woocommerce-tabs ul.tabs {
        flex-direction: column;
    }
    
    .woocommerce-tabs ul.tabs li a {
        padding: 1rem 1.5rem;
        border-right: none;
        border-bottom: 1px solid rgba(212, 165, 116, 0.15);
    }
    
    .woocommerce-tabs ul.tabs li:last-child a {
        border-bottom: none;
    }
    
    .woocommerce-tabs ul.tabs li.active a {
        transform: none;
        border-left: 3px solid var(--muted-gold);
        border-bottom: 1px solid rgba(212, 165, 116, 0.15);
    }
    
    .woocommerce-tabs .panel {
        padding: 2rem 1.5rem;
    }
    
    .woocommerce-tabs .panel h2 {
        font-size: 1.5rem;
    }
    
    .woocommerce-product-attributes th {
        width: 40%;
        padding: 0.8rem 1rem;
        font-size: 0.8rem;
    }
    
    .woocommerce-product-attributes td {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
    
    .up-sells .products,
    .related .products {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        padding: 0 1rem;
    }

    .linked-button {
        max-width: 400px;
        margin: 1rem auto;
        display: flex !important;
    }
    
    .linked-product-button-wrapper {
        display: flex;
        justify-content: center;
    }

    .woocommerce div.product form.cart {
        display: block !important;
    }
    
    .woocommerce div.product form.cart .quantity {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    .woocommerce div.product form.cart .quantity input {
        width: 100% !important;
        text-align: center;
    }
    
    .single_add_to_cart_button {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Variation buttons on mobile */
    .variation-buttons-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        margin: 1rem 0 !important;
    }
    
    .variation-button {
        margin: 0 !important;
        padding: 0.75rem 0.5rem !important;
        font-size: 0.85rem !important;
        text-align: center;
        width: 100% !important;
    }

    .trust-points.premium {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 1rem;
        padding: 1.5rem 1rem; /* Reduced padding */
        margin: 0; /* Remove margins */
    }

    .trust-point {
        flex-direction: row; /* Side by side on mobile */
        text-align: left;
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .trust-icon {
        width: 44px; /* Slightly smaller on mobile */
        height: 44px;
        flex-shrink: 0;
    }
    
    .trust-content strong {
        font-size: 0.95rem;
        margin-bottom: 0.25rem;
    }
    
    .trust-content span {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
}

@media (max-width: 480px) {
    .product-info-tabs-section {
        padding: 2rem 0 3rem;
    }
    
    .woocommerce-tabs {
        border-radius: 16px;
        margin: 0 -0.5rem;
    }
    
    .woocommerce-tabs ul.tabs li a {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
    
    .woocommerce-tabs .panel {
        padding: 1.5rem 1rem;
    }
    
    .woocommerce-tabs .panel h2 {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }
    
    .woocommerce-tabs .panel p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .woocommerce-product-attributes {
        margin: 1.5rem -0.5rem;
        border-radius: 8px;
    }
    
    .woocommerce-product-attributes th,
    .woocommerce-product-attributes td {
        padding: 0.6rem 0.8rem;
    }
    
    .woocommerce-product-attributes th {
        font-size: 0.75rem;
    }
    
    .woocommerce-product-attributes td {
        font-size: 0.85rem;
    }
    
    .up-sells .products,
    .related .products {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .hero-grid {
        padding: 0 0.75rem !important; /* Minimal padding */
        gap: 1.5rem !important;
    }
    
    .product-title.premium {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }
    
    .current-price {
        font-size: clamp(1.25rem, 6vw, 1.75rem);
    }
    
    /* Stack origin/process vertically on very small screens */
    .product-origin-process {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .product-origin-process span {
        width: 100%;
        justify-content: center;
    }
    
    .purchase-card {
        padding: 1.5rem 1rem !important;
        border-radius: 12px !important;
    }
    
    /* Purchase form - mobile optimized */
    .purchase-header h2 {
        font-size: 1.25rem;
    }
    
    .variation-buttons-row {
        grid-template-columns: 1fr 1fr; /* Two columns max */
        gap: 0.5rem;
    }
    
    .variation-button {
        padding: 0.6rem 0.5rem;
        font-size: 0.8rem;
        text-align: center;
    }
    
    /* Attribute items - very compact */
    .attribute-item {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .attribute-item i {
        font-size: 1rem;
        width: 16px;
    }
    
    .attr-label,
    .attr-value {
        font-size: 0.8rem;
    }
}

/* =================================================================
   HIDE UNWANTED ELEMENTS
   ================================================================= */

/* Hide Units Sold and similar unwanted meta */
.woocommerce div.product .product_meta span:contains("Units Sold"),
.product_meta .sku_wrapper:contains("Units Sold"),
.product-meta-sold,
.units-sold,
[class*="units-sold"],
[class*="sold-count"] {
    display: none !important;
}

/* Hide specific WooCommerce meta if it contains units sold */
.woocommerce div.product .product_meta span {
    &:contains("sold") {
        display: none !important;
    }
}



/* =================================================================
   COFFEE MATCH STORY - ENHANCED STYLING
   ================================================================= */

.product-match-info {
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
}

.product-match-info::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.product-match-info > * {
    position: relative;
    z-index: 1;
}

.match-header h3 {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.match-score-large {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(212, 165, 116, 0.15);
}

.score-value {
    font-size: 3rem;
    font-weight: 300;
    color: var(--muted-gold);
    line-height: 1;
}

.score-label {
    font-size: 1.1rem;
    color: var(--gentle-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.match-story {
    margin-bottom: 1.5rem;
}

.match-story h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.story-content {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--gentle-gray);
    font-weight: 400;
}

.story-content .story-highlight {
    color: var(--muted-gold);
    font-weight: 500;
}

.match-description {
    background: rgba(212, 165, 116, 0.1);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--charcoal);
    text-align: center;
    border: 1px solid rgba(212, 165, 116, 0.2);
}

/* Guest/No Quiz States */
.product-match-info.guest,
.product-match-info.no-quiz {
    background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
    border-color: rgba(66, 139, 202, 0.2);
    text-align: center;
}

.match-cta p {
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--gentle-gray);
    margin: 0;
}

.match-cta a {
    color: var(--muted-gold);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.match-cta a:hover {
    border-bottom-color: var(--muted-gold);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .product-match-info {
        padding: 1.5rem;
        margin: 1.5rem 0;
        border-radius: 16px;
    }
    
    .match-header h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    
    .score-value {
        font-size: 2.5rem;
    }
    
    .score-label {
        font-size: 1rem;
    }
    
    .story-content {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .match-description {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .product-match-info {
        padding: 1rem;
        margin: 1rem -0.5rem;
    }
    
    .match-score-large {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        text-align: center;
    }
    
    .score-value {
        font-size: 2.2rem;
    }
    
    .match-story h4 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .story-content {
        font-size: 0.95rem;
    }
}


/* =================================================================
   RESPONSIVE DESIGN
   ================================================================= */

@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        padding: 0 1.5rem;
    }
    
    .product-title.premium {
        font-size: 2.5rem;
    }
    
    .current-price {
        font-size: 2rem;
    }

    .trust-points.premium {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        padding: 2rem;
    }
    
    .trust-point {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.5rem 1rem;
    }
    
    .trust-icon {
        margin: 0 auto;
    }
    
    .trust-content strong {
        margin-bottom: 0.3rem;
        font-size: 0.95rem;
    }
    
    .trust-content span {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .product-info-column {
        gap: 1.5rem;
        padding: 0;
    }
    
    .product-identity-section {
        padding-bottom: 1rem;
        margin-bottom: 0;
    }
    
    .pricing-section {
        padding: 1.5rem 1rem;
        border-radius: 12px;
        margin: 0;
    }
    
    .product-title.premium {
        font-size: clamp(1.75rem, 6vw, 2.5rem); /* More responsive sizing */
        margin-bottom: 0.75rem;
        line-height: 1.1;
    }
    
    .current-price {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: 0.5rem;
    }
    
    .product-origin-process {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
        flex: 1; /* Take available width */
        text-align: center;
        min-width: 0;
    }   
    
    .product-origin-process span {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .notes-grid {
        gap: 0.5rem;
    }
    
    .note-pill {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
        flex: 0 1 auto; /* Don't grow, allow shrink */
        min-width: 0;
    }
    
    .product-attributes.premium {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1rem; /* Reduced padding */
        margin: 0; /* Remove margins */
        border-radius: 12px;
    }
    
    .attribute-item {
        padding: 0.75rem; /* Reduced padding */
        gap: 0.5rem;
        grid-template-columns: auto 1fr; /* Icon and content side by side */
        align-items: center;
    }

    .attribute-item i {
        margin: 0;
        align-self: flex-start;
    }

    .attr-label,
    .attr-value {
        text-align: left;
        font-size: 0.85rem;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }

    .gallery-column {
        order: 1;
    }
    
    .product-info-column {
        order: 2;
    }

    .purchase-wrapper {
        padding: 0 1rem;
    }

    .purchase-card {
        padding: 2.5rem 2rem;
        border-radius: 20px;
    }
    
    .purchase-header h2 {
        font-size: 1.5rem;
    }

    .variation-buttons-row {
        gap: 0.5rem;
    }

    .variation-button {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }

    .woocommerce div.product form.cart .cart {
        flex-direction: column;
        gap: 1rem;
    }
    
    .single_add_to_cart_button {
        width: 100%;
        min-width: auto;
    }

    .trust-points.premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 2rem;
    }
    
    .trust-point {
        flex-direction: row;
        text-align: left;
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .trust-icon {
        margin: 0;
    }

    .product-description.premium {
        font-size: 1rem;
        line-height: 1.6;
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    .product-info-column {
        gap: 1.5rem;
    }

    .product-attributes.premium {
        padding: 1rem;
        margin: 0 -1rem; /* Extend to edge on very small screens */
        border-radius: 16px;
    }
    
    .attribute-item {
        padding: 0.6rem;
    }
    
    .attr-label {
        font-size: 0.75rem;
    }
    
    .attr-value {
        font-size: 0.85rem;
    }
    
    .roaster-badge.premium {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    
    .product-origin-process {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .pricing-section {
        padding: 1rem;
    }
    
    .subscription-savings {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }

    .hero-grid {
        padding: 0 0.5rem;
    }
    
    .purchase-card {
        padding: 2rem 1.5rem;
    }

    .woocommerce-product-gallery .flex-control-thumbs li {
        width: 50px;
        height: 50px;
    }
    
    .notes-grid {
        gap: 0.25rem;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    .note-pill {
        padding: 0.3rem 0.8rem;
        font-size: 0.8rem;
    }

    .trust-points.premium {
        grid-template-columns: 1fr;
    }
    
    .trust-point {
        flex-direction: row;
        text-align: left;
    }

    .variation-buttons-row {
        justify-content: center;
    }
}

/* =================================================================
   RELATED PRODUCTS - SMART GRID SYSTEM
   ================================================================= */

/* Use CSS custom property for dynamic columns */
.related.products .products {
    display: grid !important;
    /* Use CSS variable that will be set by JavaScript */
    grid-template-columns: repeat(var(--grid-columns, 4), 1fr) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

/* Up-sells should use the same system */
.up-sells.upsells .products {
    display: grid !important;
    grid-template-columns: repeat(var(--grid-columns, 4), 1fr) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 2rem !important;
    list-style: none !important;
}

/* Mobile overrides - let CSS handle mobile completely */
@media (max-width: 768px) {
    .related.products .products,
    .up-sells.upsells .products {
        /* Force 2 columns on mobile, ignore JavaScript */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    .related.products .products,
    .up-sells.upsells .products {
        /* Can still be 2 columns on very small screens or 1 if you prefer */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* Fallback for when JavaScript hasn't loaded yet */
@media (min-width: 769px) and (max-width: 1024px) {
    .related.products .products:not([style*="--grid-columns"]),
    .up-sells.upsells .products:not([style*="--grid-columns"]) {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 1025px) and (max-width: 1400px) {
    .related.products .products:not([style*="--grid-columns"]),
    .up-sells.upsells .products:not([style*="--grid-columns"]) {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (min-width: 1401px) {
    .related.products .products:not([style*="--grid-columns"]),
    .up-sells.upsells .products:not([style*="--grid-columns"]) {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* =================================================================
   SECTION TRANSITIONS & ANIMATIONS
   ================================================================= */

.product-identity-section,
.pricing-section,
.product-story-section,
.product-attributes-section {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.pricing-section {
    animation-delay: 0.1s;
}

.product-story-section {
    animation-delay: 0.2s;
}

.product-attributes-section {
    animation-delay: 0.3s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================================================================
   SMOOTH TRANSITIONS & MICRO-INTERACTIONS
   ================================================================= */

/* Page load fade-in */
.product-hero-section,
.product-purchase-section,
.product-info-tabs-section {
    animation: fadeInUp 0.8s ease-out;
}

/* Smooth hover states */
a, button, input, select, .note-pill, .trust-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading state - elegant spinner */
.woocommerce div.product form.cart .single_add_to_cart_button.loading {
    color: transparent;
    pointer-events: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button.loading:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 2px solid white;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =================================================================
   LOADING STATES FOR LINKED BUTTONS
   ================================================================= */

   .linked-button.loading {
    pointer-events: none;
    opacity: 0.7;
}

.linked-button.loading i {
    animation: spin 1s linear infinite;
}

/* Success state */
.added_to_cart {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--muted-gold);
    color: white;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 400;
    animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Remove all harsh elements */
* {
    outline: none;
}

*:focus {
    outline: 2px solid rgba(212, 165, 116, 0.3);
    outline-offset: 4px;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* =================================================================
   URGENCY SECTION - REAL SALES DATA
   ================================================================= */

.purchase-urgency {
    background: linear-gradient(135deg, #fff3e6 0%, #fff8f0 100%);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
}

.urgency-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #8b4513;
    margin-bottom: 0;
    font-weight: 500;
}

.urgency-item i {
    color: #ff6b35;
    font-size: 1rem;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

.urgency-item strong {
    color: #d2691e;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* =================================================================
   VISUAL HIERARCHY IMPROVEMENTS
   ================================================================= */

/* Add separator between main cart and linked products */
.linked-product-button-wrapper:first-of-type {
    position: relative;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.linked-product-button-wrapper:first-of-type::before {
    content: 'OR';
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 0 1rem;
    color: #999;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Add subtle divider line */
.linked-product-button-wrapper:first-of-type::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #e0e0e0 20%, #e0e0e0 80%, transparent);
}

/* =================================================================
   ACCESSIBILITY IMPROVEMENTS
   ================================================================= */

   .linked-button:focus {
    outline: 3px solid rgba(212, 165, 116, 0.5);
    outline-offset: 2px;
}

.linked-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .linked-button {
        border-width: 3px !important;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .linked-button,
    .linked-button i,
    .linked-button::before {
        transition: none !important;
    }
    
    .linked-button:hover i {
        transform: none !important;
    }
} 

/* =================================================================
   MOBILE GALLERY OPTIMIZATIONS
   ================================================================= */

@media (max-width: 768px) {
    /* Gallery - full width on mobile */
    .woocommerce-product-gallery {
        margin: 0;
        width: 100%;
    }
    
    .woocommerce-product-gallery .flex-viewport {
        border-radius: 12px !important; /* Less radius on mobile */
        margin: 0;
    }
    
    /* Thumbnails - smaller and more compact */
    .woocommerce-product-gallery .flex-control-thumbs {
        padding: 1rem 0 0;
        gap: 0.5rem;
        justify-content: flex-start;
    }
    
    .woocommerce-product-gallery .flex-control-thumbs li {
        width: 50px;
        height: 50px;
        border-radius: 8px;
    }
    
    /* Trust badges - mobile positioning */
    .gallery-trust-badges.always-visible {
        padding: 1rem 0 0 !important;
        gap: 0.5rem !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
    
    .gallery-trust-badges .trust-badge {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.7rem !important;
        border-radius: 20px !important;
        flex: 0 1 auto; /* Don't grow */
    }
}

@media (max-width: 480px) {
    .woocommerce-product-gallery .flex-control-thumbs li {
        width: 45px;
        height: 45px;
    }
    
    .gallery-trust-badges .trust-badge {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.65rem !important;
    }
}

/* =================================================================
   COFFEE MATCH STORY - LEFT COLUMN LAYOUT
   ================================================================= */

.gallery-match-story-wrapper {
    margin-top: 2rem;
    width: 100%;
}

/* Update the existing .product-match-info styles for left column */
.gallery-match-story-wrapper .product-match-info {
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 0; /* Remove default margin */
    position: relative;
    overflow: hidden;
}

.gallery-match-story-wrapper .product-match-info::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.gallery-match-story-wrapper .product-match-info > * {
    position: relative;
    z-index: 1;
}

.gallery-match-story-wrapper .match-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    justify-content: center;
}

.gallery-match-story-wrapper .match-score-large {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(212, 165, 116, 0.15);
    justify-content: center;
}

.gallery-match-story-wrapper .score-value {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--muted-gold);
    line-height: 1;
}

.gallery-match-story-wrapper .score-label {
    font-size: 1rem;
    color: var(--gentle-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gallery-match-story-wrapper .match-story {
    margin-bottom: 1rem;
}

.gallery-match-story-wrapper .match-story h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.gallery-match-story-wrapper .story-content {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--gentle-gray);
    font-weight: 400;
    text-align: left;
}

.gallery-match-story-wrapper .story-content .story-highlight {
    color: var(--muted-gold);
    font-weight: 500;
}

.gallery-match-story-wrapper .match-description {
    background: rgba(212, 165, 116, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--charcoal);
    text-align: center;
    border: 1px solid rgba(212, 165, 116, 0.2);
    margin-top: 1rem;
}

/* Guest/No Quiz States - Left Column */
.gallery-match-story-wrapper .product-match-info.guest,
.gallery-match-story-wrapper .product-match-info.no-quiz {
    background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
    border-color: rgba(66, 139, 202, 0.2);
    text-align: center;
}

.gallery-match-story-wrapper .match-cta p {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--gentle-gray);
    margin: 0;
}

.gallery-match-story-wrapper .match-cta a {
    color: var(--muted-gold);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.gallery-match-story-wrapper .match-cta a:hover {
    border-bottom-color: var(--muted-gold);
}

/* =================================================================
   MOBILE RESPONSIVE - LEFT COLUMN
   ================================================================= */

@media (max-width: 768px) {
    .gallery-match-story-wrapper {
        margin-top: 1.5rem;
    }
    
    .gallery-match-story-wrapper .product-match-info {
        padding: 1.25rem;
        border-radius: 12px;
    }
    
    .gallery-match-story-wrapper .match-header h3 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .gallery-match-story-wrapper .score-value {
        font-size: 2rem;
    }
    
    .gallery-match-story-wrapper .score-label {
        font-size: 0.9rem;
    }
    
    .gallery-match-story-wrapper .story-content {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .gallery-match-story-wrapper .match-description {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .gallery-match-story-wrapper .product-match-info {
        padding: 1rem;
        margin: 1rem -0.5rem 0; /* Extend to edges on very small screens */
    }
    
    .gallery-match-story-wrapper .match-score-large {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        text-align: center;
    }
    
    .gallery-match-story-wrapper .score-value {
        font-size: 1.8rem;
    }
    
    .gallery-match-story-wrapper .match-story h4 {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }
    
    .gallery-match-story-wrapper .story-content {
        font-size: 0.85rem;
    }
}


/* =================================================================
   ENSURE PROPER GALLERY LAYOUT
   ================================================================= */

/* Make sure the gallery area can accommodate the extra content */
.woocommerce div.product div.images {
    margin-bottom: 0;
}

.woocommerce-product-gallery {
    margin-bottom: 0;
}

/* Ensure gallery area has proper spacing */
@media (min-width: 769px) {
    .gallery-match-story-wrapper {
        max-width: 100%;
        margin-top: 2rem;
    }
}

/* Hide any duplicate match displays that might appear */
.woocommerce-tabs .product-match-info {
    display: none !important;
}

.woocommerce-product-details__short-description .product-match-info {
    display: none !important;
}

/* =================================================================
   RELATED PRODUCTS - IMPROVED LAYOUT
   ================================================================= */

/* Related products section container */
.related.products {
    margin-top: 4rem !important;
    padding: 3rem 0 !important; /* Reduced from 4rem */
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(212, 165, 116, 0.08) !important;
    overflow: hidden !important;
}

/* Make sure container is full width */
.related.products .container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    width: 100% !important;
}

/* Section heading */
.related.products h2 {
    font-size: 1.8rem !important; /* Reduced from 2.2rem */
    font-weight: 300 !important;
    color: var(--charcoal) !important;
    text-align: center !important;
    margin: 0 0 2rem 0 !important; /* Reduced from 3rem */
    letter-spacing: -0.5px !important;
}

.related.products h2::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--muted-gold) 0%, #c09560 100%);
    border-radius: 2px;
}

/* Products grid - responsive and spacious */
.related.products .products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; /* Reduced from 280px */
    gap: 1.5rem !important; /* Reduced from 2.5rem */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    width: 100% !important;
}

/* Fix pseudo-element issue - CRITICAL */
.related.products .products::before,
.related.products .products::after {
    display: none !important;
    content: none !important;
}

/* Fix any theme-specific constraints */
.woocommerce ul.products li.product:nth-child(4n),
.woocommerce ul.products li.product:nth-child(4n+1) {
    clear: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Remove the .columns-4 class effects if present */
.related.products .products.columns-4 li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* Individual product cards - V2 STYLING */
.related.products .products li.product {
    background: var(--shop-white) !important;
    border-radius: 10px !important; /* Slightly smaller radius */
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; /* Lighter shadow */
    transition: var(--shop-transition) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 280px !important; /* Reduced from 350px */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem !important; /* Reduced from 1rem */
    border: 1px solid rgba(0, 0, 0, 0.06) !important; /* Lighter border */
    position: relative !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
}

/* Remove any theme-specific width constraints */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
}


.related.products .products li.product:hover {
    transform: translateY(-4px) !important; /* Less dramatic hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.12) !important;
    border-color: rgba(212, 165, 116, 0.2) !important;
}

/* Product Image - V2 Style */
.related.products .products li.product a {
    display: block !important;
    position: relative !important;
    margin-bottom: 1rem !important;
}


/* Product image styling */
.related.products .products li.product a img {
    width: 100% !important;
    height: 160px !important; /* Reduced from 200px */
    object-fit: cover !important;
    border-radius: 6px !important; /* Smaller radius */
    transition: transform 0.4s ease !important;
    display: block !important;
    margin-bottom: 0.75rem !important; /* Reduced spacing */
}

.related.products .products li.product:hover a img {
    transform: scale(1.02) !important; /* Subtler zoom */
}

/* Product Info Section - V2 Style */
.related.products .products li.product .product-info-v2,
.related.products .products li.product .woocommerce-loop-product__title {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Product title */
.related.products .products li.product h2,
.related.products .products li.product .woocommerce-loop-product__title {
    font-size: 0.9rem !important; /* Reduced from default */
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
    font-weight: 500 !important;
    color: var(--charcoal) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.related.products .products li.product h2 a,
.related.products .products li.product .woocommerce-loop-product__title a {
    color: var(--muted-gold) !important;

}

.related.products .products li.product:hover h2 a,
.related.products .products li.product:hover .woocommerce-loop-product__title a {
    color: var(--muted-gold) !important;
}

/* Price - V2 Style */
.related.products .products li.product .price {
    margin-top: auto !important;
    font-size: 0.95rem !important; /* Slightly smaller */
    font-weight: 600 !important;
    color: var(--charcoal) !important;
    margin-bottom: 0.5rem !important;
}

.related.products .products li.product .price del {
    color: #666 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

.related.products .products li.product .price ins {
    text-decoration: none !important;
    color: var(--muted-gold) !important;
}

/* Add to Cart Button - V2 Style */
.related.products .products li.product .button,
.related.products .products li.product .add_to_cart_button {
    width: auto !important;
    min-width: 100px !important; /* Reduced from 120px */
    max-width: 180px !important; /* Reduced from 200px */
    padding: 0.6rem 1.2rem !important; /* Reduced padding */
    background: var(--muted-gold) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 0.7rem !important; /* Smaller text */
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: block !important;
    margin: 0 auto !important;
}

.related.products .products li.product .button:hover,
.related.products .products li.product .add_to_cart_button:hover {
    background: #c09560 !important;
    transform: translateY(-1px) !important;
    color: white !important;
}

.related.products .products li.product .button:active,
.related.products .products li.product .add_to_cart_button:active {
    background: #c09560 !important;
    transform: translateY(0) !important;
}



/* Product info container */
.related.products .products li.product .product-info {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* =================================================================
   MOBILE RESPONSIVE - RELATED PRODUCTS
   ================================================================= */

   @media (max-width: 768px) {
    .related.products {
        margin-top: 3rem !important;
        padding: 3rem 0 !important;
        border-radius: 16px !important;
    }
    
    .related.products .container {
        padding: 0 1rem !important;
    }
    
    .related.products h2 {
        font-size: 1.8rem !important;
        margin-bottom: 2rem !important;
    }
    
    .related.products .products {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 1.5rem !important;
    }
    
    .related.products .products li.product {
        padding: 1rem !important;
        border-radius: 12px !important;
        min-height: 320px !important;
    }
    
    .related.products .products li.product a img {
        height: 180px !important;
    }
    
    .related.products .products li.product h2,
    .related.products .products li.product .woocommerce-loop-product__title {
        font-size: 0.875rem !important;
    }
    
    .related.products .products li.product .button,
    .related.products .products li.product .add_to_cart_button {
        padding: 0.6rem 1rem !important;
        font-size: 0.7rem !important;
        min-width: 100px !important;
    }
}

@media (max-width: 480px) {
    .related.products .products {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .related.products .products li.product {
        padding: 1rem !important;
        min-height: 300px !important;
    }
    
    .related.products .products li.product a img {
        height: 160px !important;
    }
}

/* =================================================================
   DESKTOP ENHANCEMENTS
   ================================================================= */

@media (min-width: 1200px) {
    .related.products .products {
        grid-template-columns: repeat(5, 1fr) !important; /* Show 5 products */
        gap: 1.25rem !important;
    } 
    
    .related.products .products li.product a img {
        height: 220px !important;
    }

    .up-sells.upsells .products {
        grid-template-columns: repeat(5, 1fr) !important; /* Show 5 products */
        gap: 1.25rem !important;
    }

    .related.products .products li.product a img,
    .up-sells.upsells .products li.product a img {
        height: 140px !important; /* Even smaller on desktop when showing more */
    }
}

@media (min-width: 1400px) {
    .related.products .container {
        max-width: 1600px !important;
    }
    
    .related.products .products {
        grid-template-columns: repeat(6, 1fr) !important; /* Show 6 products on large screens */
    }
    
    .up-sells.upsells .products {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* =================================================================
   TABLET - APPROPRIATE SIZING
   ================================================================= */

   @media (max-width: 1024px) and (min-width: 769px) {
    .related.products .products,
    .up-sells.upsells .products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1rem !important;
    }
    
    .related.products .products li.product,
    .up-sells.upsells .products li.product {
        min-height: 260px !important;
    }
    
    .related.products .products li.product a img,
    .up-sells.upsells .products li.product a img {
        height: 140px !important;
    }
}

/* =================================================================
   MOBILE - MAINTAIN READABILITY
   ================================================================= */

   @media (max-width: 768px) {
    .related.products .products,
    .up-sells.upsells .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .related.products .products li.product,
    .up-sells.upsells .products li.product {
        min-height: 240px !important;
        padding: 0.6rem !important;
    }
    
    .related.products .products li.product a img,
    .up-sells.upsells .products li.product a img {
        height: 120px !important;
    }
}

@media (max-width: 480px) {
    .related.products .products,
    .up-sells.upsells .products {
        grid-template-columns: repeat(2, 1fr) !important; /* Keep 2 columns even on small screens */
        gap: 0.75rem !important;
    }
    
    .related.products .products li.product,
    .up-sells.upsells .products li.product {
        min-height: 220px !important;
        padding: 0.5rem !important;
    }
    
    .related.products .products li.product a img,
    .up-sells.upsells .products li.product a img {
        height: 100px !important;
    }
    
    .related.products .products li.product h2,
    .up-sells.upsells .products li.product h2,
    .related.products .products li.product .woocommerce-loop-product__title,
    .up-sells.upsells .products li.product .woocommerce-loop-product__title {
        font-size: 0.8rem !important;
    }
    
    .related.products .products li.product .price,
    .up-sells.upsells .products li.product .price {
        font-size: 0.85rem !important;
    }
}

/* =================================================================
   UP-SELLS SECTION (same V2 styling)
   ================================================================= */

   .up-sells.upsells {
    margin-top: 4rem !important;
    padding: 3rem 0 !important; /* Reduced from 4rem */
    background: linear-gradient(135deg, #f8f6f3 0%, #ffffff 100%) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(212, 165, 116, 0.08) !important;
}

.up-sells.upsells h2 {
    font-size: 1.8rem !important; /* Reduced from 2.2rem */
    font-weight: 300 !important;
    color: var(--charcoal) !important;
    text-align: center !important;
    margin: 0 0 2rem 0 !important; /* Reduced from 3rem */
    letter-spacing: -0.5px !important;
}

.up-sells.upsells .products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 1.5rem !important; /* Reduced from 2rem */
    margin: 0 !important;
    padding: 0 2rem !important;
    list-style: none !important;
}

/* Fix pseudo-element issue for up-sells too */
.up-sells.upsells .products::before,
.up-sells.upsells .products::after {
    display: none !important;
    content: none !important;
}

.up-sells.upsells .products li.product {
    background: var(--shop-white) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    transition: var(--shop-transition) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 280px !important; /* Reduced from 350px */
    padding: 0.75rem !important; /* Reduced from 1rem */
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    clear: none !important;
}

.up-sells.upsells .products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.12) !important;
    border-color: rgba(212, 165, 116, 0.2) !important;
}

/* Apply all the same styling to up-sells buttons, images, etc. */
.up-sells.upsells .products li.product a img {
    width: 100% !important;
    height: 160px !important; /* Reduced from 200px */
    object-fit: cover !important;
    border-radius: 6px !important;
    transition: transform 0.4s ease !important;
    margin-bottom: 0.75rem !important;
}

.up-sells.upsells .products li.product:hover a img {
    transform: scale(1.02) !important;
}

.up-sells.upsells .products li.product .button,
.up-sells.upsells .products li.product .add_to_cart_button {
    width: auto !important;
    min-width: 100px !important;
    max-width: 180px !important;
    padding: 0.6rem 1.2rem !important;
    background: var(--muted-gold) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    margin: 0 auto !important;
    display: block !important;
}

.up-sells.upsells .products li.product .button:hover,
.up-sells.upsells .products li.product .add_to_cart_button:hover {
    background: #c09560 !important;
    transform: translateY(-1px) !important;
    color: white !important;
}

/* =================================================================
   FORCE STYLING ON DEFAULT WOOCOMMERCE ELEMENTS
   ================================================================= */

/* Product Title - Default WooCommerce Hook */
.single-product .entry-title,
.single-product .product_title,
.single-product h1.entry-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 1rem !important;
    color: var(--charcoal) !important;
    font-weight: 300 !important;
    letter-spacing: -1px !important;
    word-wrap: break-word !important;
    text-align: left !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* Product Price - Default WooCommerce Hook */
.single-product .price,
.single-product .woocommerce-price-suffix,
.single-product .summary .price {
    font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
    font-weight: 300 !important;
    color: var(--charcoal) !important;
    margin-bottom: 0.75rem !important;
    letter-spacing: -0.5px !important;
    text-align: left !important;
    line-height: 1.1 !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

.single-product .price del {
    opacity: 0.4 !important;
    font-size: 0.7em !important;
    margin-right: 0.75rem !important;
}

/* Price range styling */
.single-product .price .woocommerce-Price-range {
    display: block !important;
    font-size: 0.9em !important;
    line-height: 1.3 !important;
}

/* Per cup pricing */
.single-product .price .woocommerce-price-suffix,
.single-product .price-per-cup {
    font-size: 0.5em !important;
    color: var(--gentle-gray) !important;
    font-weight: 400 !important;
    display: block !important;
    margin-top: 0.5rem !important;
    opacity: 0.8 !important;
}

/* Short Description */
.single-product .woocommerce-product-details__short-description,
.single-product .summary .woocommerce-product-details__short-description p {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: var(--gentle-gray) !important;
    font-weight: 400 !important;
    text-align: left !important;
    margin-top: 1.5rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* Product Meta (SKU, Categories, etc.) */
.single-product .product_meta {
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(212, 165, 116, 0.1) !important;
    background: transparent !important;
}

.single-product .product_meta span {
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.9rem !important;
    color: var(--gentle-gray) !important;
    text-align: left !important;
}

.single-product .product_meta a {
    color: var(--muted-gold) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.single-product .product_meta a:hover {
    color: var(--charcoal) !important;
}

/* Mobile responsive for default elements */
@media (max-width: 768px) {
    .single-product .entry-title,
    .single-product .product_title {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.1 !important;
    }
    
    .single-product .price {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        margin-bottom: 0.5rem !important;
    }
    
    .single-product .woocommerce-product-details__short-description {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-top: 1rem !important;
    }
}

@media (max-width: 480px) {
    .single-product .entry-title,
    .single-product .product_title {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }
    
    .single-product .price {
        font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
    }
    
    .single-product .woocommerce-product-details__short-description {
        font-size: 0.95rem !important;
    }
}

/* =================================================================
   IMPORT V2 STYLES FOR RELATED PRODUCTS
   ================================================================= */

/* Product Info Section V2 - for related products */
.related.products .product-info-section-v2,
.up-sells.upsells .product-info-section-v2 {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Product Roaster V2 */
.related.products .product-roaster-v2,
.up-sells.upsells .product-roaster-v2 {
    font-size: 0.75rem !important;
    color: var(--muted-gold) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0.25rem !important;
}

/* Product Title V2 */
.related.products .product-title-v2,
.up-sells.upsells .product-title-v2 {
    margin: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

.related.products .product-title-v2 a,
.up-sells.upsells .product-title-v2 a {
    color: var(--charcoal) !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color 0.3s ease !important;
}

.related.products .product-title-v2 a:hover,
.up-sells.upsells .product-title-v2 a:hover {
    color: var(--muted-gold) !important;
}

/* Product Meta Pills V2 */
.related.products .product-meta-v2,
.up-sells.upsells .product-meta-v2 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    margin: 0.5rem 0 !important;
}

.related.products .meta-pill-v2,
.up-sells.upsells .meta-pill-v2 {
    background: rgba(212, 165, 116, 0.1) !important;
    color: var(--charcoal) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 12px !important;
    font-size: 0.625rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
}

.related.products .meta-pill-v2 i,
.up-sells.upsells .meta-pill-v2 i {
    font-size: 0.5rem !important;
    color: var(--muted-gold) !important;
}

/* Product Price V2 */
.related.products .product-price-v2,
.up-sells.upsells .product-price-v2 {
    margin-top: auto !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--charcoal) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 0.5rem !important;
}

.related.products .product-price-v2 .price-per-cup,
.up-sells.upsells .product-price-v2 .price-per-cup {
    display: block !important;
    font-size: 0.75rem !important;
    color: var(--gentle-gray) !important;
    font-weight: 400 !important;
    margin-top: 0.25rem !important;
}

.related.products .product-price-v2 .shipping-text,
.up-sells.upsells .product-price-v2 .shipping-text {
    display: block !important;
    font-size: 0.7rem !important;
    color: var(--muted-gold) !important;
    font-weight: 500 !important;
    margin-top: 0.25rem !important;
}

.related.products .product-price-v2 del,
.up-sells.upsells .product-price-v2 del {
    color: #999 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

.related.products .product-price-v2 ins,
.up-sells.upsells .product-price-v2 ins {
    text-decoration: none !important;
    color: var(--muted-gold) !important;
}

/* Product Actions V2 */
.related.products .product-actions-v2,
.up-sells.upsells .product-actions-v2 {
    margin-top: 0.5rem !important;
}

.related.products .product-actions-v2 .button,
.related.products .product-actions-v2 .add_to_cart_button,
.up-sells.upsells .product-actions-v2 .button,
.up-sells.upsells .product-actions-v2 .add_to_cart_button {
    width: 100% !important;
    padding: 0.75rem 1.5rem !important;
    background: var(--muted-gold) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: block !important;
    box-sizing: border-box !important;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.06) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.related.products .product-actions-v2 .button:hover,
.related.products .product-actions-v2 .add_to_cart_button:hover,
.up-sells.upsells .product-actions-v2 .button:hover,
.up-sells.upsells .product-actions-v2 .add_to_cart_button:hover {
    background: #c09560 !important;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
    color: white !important;
}

/* =================================================================
   UNIFIED MATCH BADGES - Same as Shop
   ================================================================= */

/* Match badges for related products - inherit shop styling */
.related.products .shop-match-badge,
.up-sells.upsells .shop-match-badge {
    position: absolute !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    color: white !important;
    padding: 0.4rem 0.6rem !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
    z-index: 2 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: transform 0.2s ease !important;
    min-width: 50px !important;
    height: auto !important;
}
/* =================================================================
   MATCH BADGE COLOR CODING - COMPLETE
   ================================================================= */

/* Default badge style */
.shop-match-badge {
    background: #9e9e9e !important; /* Default gray */
}

/* Generate all match percentages */
/* 90-100% - Green (Perfect match) */
.shop-match-badge[data-match="90"],
.shop-match-badge[data-match="91"],
.shop-match-badge[data-match="92"],
.shop-match-badge[data-match="93"],
.shop-match-badge[data-match="94"],
.shop-match-badge[data-match="95"],
.shop-match-badge[data-match="96"],
.shop-match-badge[data-match="97"],
.shop-match-badge[data-match="98"],
.shop-match-badge[data-match="99"],
.shop-match-badge[data-match="100"] {
    background: #4caf50 !important; /* Green */
}

/* 75-89% - Orange (Great match) */
.shop-match-badge[data-match="75"],
.shop-match-badge[data-match="76"],
.shop-match-badge[data-match="77"],
.shop-match-badge[data-match="78"],
.shop-match-badge[data-match="79"],
.shop-match-badge[data-match="80"],
.shop-match-badge[data-match="81"],
.shop-match-badge[data-match="82"],
.shop-match-badge[data-match="83"],
.shop-match-badge[data-match="84"],
.shop-match-badge[data-match="85"],
.shop-match-badge[data-match="86"],
.shop-match-badge[data-match="87"],
.shop-match-badge[data-match="88"],
.shop-match-badge[data-match="89"] {
    background: #ff9800 !important; /* Orange */
}

/* 60-74% - Gold (Good match) */
.shop-match-badge[data-match="60"],
.shop-match-badge[data-match="61"],
.shop-match-badge[data-match="62"],
.shop-match-badge[data-match="63"],
.shop-match-badge[data-match="64"],
.shop-match-badge[data-match="65"],
.shop-match-badge[data-match="66"],
.shop-match-badge[data-match="67"],
.shop-match-badge[data-match="68"],
.shop-match-badge[data-match="69"],
.shop-match-badge[data-match="70"],
.shop-match-badge[data-match="71"],
.shop-match-badge[data-match="72"],
.shop-match-badge[data-match="73"],
.shop-match-badge[data-match="74"] {
    background: #d4a574 !important; /* Gold */
}

/* 40-59% - Light gray (Fair match) */
.shop-match-badge[data-match="40"],
.shop-match-badge[data-match="41"],
.shop-match-badge[data-match="42"],
.shop-match-badge[data-match="43"],
.shop-match-badge[data-match="44"],
.shop-match-badge[data-match="45"],
.shop-match-badge[data-match="46"],
.shop-match-badge[data-match="47"],
.shop-match-badge[data-match="48"],
.shop-match-badge[data-match="49"],
.shop-match-badge[data-match="50"],
.shop-match-badge[data-match="51"],
.shop-match-badge[data-match="52"],
.shop-match-badge[data-match="53"],
.shop-match-badge[data-match="54"],
.shop-match-badge[data-match="55"],
.shop-match-badge[data-match="56"],
.shop-match-badge[data-match="57"],
.shop-match-badge[data-match="58"],
.shop-match-badge[data-match="59"] {
    background: #bdbdbd !important; /* Light gray */
}

/* Below 40% - Dark gray (Low match) */
.shop-match-badge[data-match="15"],
.shop-match-badge[data-match="16"],
.shop-match-badge[data-match="17"],
.shop-match-badge[data-match="18"],
.shop-match-badge[data-match="19"],
.shop-match-badge[data-match="20"],
.shop-match-badge[data-match="21"],
.shop-match-badge[data-match="22"],
.shop-match-badge[data-match="23"],
.shop-match-badge[data-match="24"],
.shop-match-badge[data-match="25"],
.shop-match-badge[data-match="26"],
.shop-match-badge[data-match="27"],
.shop-match-badge[data-match="28"],
.shop-match-badge[data-match="29"],
.shop-match-badge[data-match="30"],
.shop-match-badge[data-match="31"],
.shop-match-badge[data-match="32"],
.shop-match-badge[data-match="33"],
.shop-match-badge[data-match="34"],
.shop-match-badge[data-match="35"],
.shop-match-badge[data-match="36"],
.shop-match-badge[data-match="37"],
.shop-match-badge[data-match="38"],
.shop-match-badge[data-match="39"] {
    background: #757575 !important; /* Dark gray */
}


/* =================================================================
   BREW METHOD COMPATIBILITY BADGE
   ================================================================= */

.brew-method-match {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 1rem 0;
    transition: all 0.3s ease;
}

.brew-method-match.match {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(102, 187, 106, 0.1) 100%);
    border: 2px solid #4caf50;
    color: #2e7d32;
}

.brew-method-match.match i {
    color: #4caf50;
    font-size: 1.2rem;
}

.brew-method-match.different {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 183, 77, 0.1) 100%);
    border: 2px solid #ff9800;
    color: #e65100;
}

.brew-method-match.different i {
    color: #ff9800;
    font-size: 1.2rem;
}

.brew-method-match:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* =================================================================
   RELATED PRODUCTS IMAGE FIX - Force proper display
   ================================================================= */

/* Fix for product card v2 images in related products */
.related.products .bean-product-card-v2 .product-image-section-v2,
.up-sells.upsells .bean-product-card-v2 .product-image-section-v2 {
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    height: 200px !important; /* Fixed height container */
    overflow: hidden !important;
    background: #f5f5f5 !important; /* Placeholder while loading */
    border-radius: 8px !important;
    margin-bottom: 1rem !important;
}

.related.products .bean-product-card-v2 .product-image-v2,
.up-sells.upsells .bean-product-card-v2 .product-image-v2 {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* CRITICAL FIX: Force images to display properly */
.related.products .bean-product-card-v2 .product-image-v2 img,
.up-sells.upsells .bean-product-card-v2 .product-image-v2 img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* Contain within the box */
    object-position: center !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Remove problematic styles */
    contain: layout style !important; /* NOT 'none' - use proper contain values */
    aspect-ratio: auto !important; /* Let browser calculate */
}

/* Ensure lazy-enhance class doesn't hide images */
.related.products .lazy-enhance,
.up-sells.upsells .lazy-enhance {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Alternative selectors for different markup structures */
.related.products ul.products li.product img,
.up-sells.upsells ul.products li.product img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix for WooCommerce default image containers */
.related.products .attachment-woocommerce_thumbnail,
.up-sells.upsells .attachment-woocommerce_thumbnail {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Loading state - show placeholder */
.related.products .product-image-v2 img:not([src]),
.related.products .product-image-v2 img[src=""],
.up-sells.upsells .product-image-v2 img:not([src]),
.up-sells.upsells .product-image-v2 img[src=""] {
    opacity: 0 !important;
}

/* After loading */
.related.products .product-image-v2 img[src]:not([src=""]),
.up-sells.upsells .product-image-v2 img[src]:not([src=""]) {
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
}