/* =============================================================================
   SUPER POWER MICROGREENS - COMPLETE STYLESHEET
   This file contains ALL styles with high specificity to override inline styles
   ============================================================================= */

/* Reset and Base Styles */
body {
    font-family: 'Roboto', sans-serif !important;
    background-color: #FFFFFF !important;
    color: #333333 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================================================
   HEADER STYLES - GREEN GRADIENT WITH WHITE TEXT (MAXIMUM OVERRIDE POWER)
   ============================================================================= */
header, header.site-header, .site-header, header.site-header.site-header {
    background: linear-gradient(135deg, #228B22, #32CD32, #90EE90) !important;
    background-image: none !important; /* Override any image backgrounds */
    background-color: #228B22 !important; /* Fallback color */
    height: 150px !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 15px !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    text-align: left !important;
    color: white !important;
    padding-top: 15px !important;
}

/* Force remove any background images with multiple selectors */
header::before, header.site-header::before {
    content: none !important;
    background: none !important;
    background-image: none !important;
}

header::after, header.site-header::after {
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/* LEFT SIDE - Company name and tagline */
.header-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    flex: 1 !important;
}

.header-logo {
    display: none !important; /* Hide the logo icon */
}

.header-text h1, header h1, header.site-header h1 {
    font-family: 'Bubblegum Sans', cursive !important;
    color: white !important;
    margin: 0 !important;
    font-size: 1.8rem !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
    line-height: 1 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

.header-subtitle, header p {
    font-family: 'Bubblegum Sans', cursive !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.95rem !important;
    font-weight: 300 !important;
    margin: 0 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
    margin-top: 2px !important;
    margin-left: 0 !important; /* Remove left margin */
    position: static !important;
    top: auto !important;
    left: auto !important;
}

/* RIGHT SIDE - Fresh Healthy Sustainable and Powered by Innovation */
.header-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    gap: 5px !important;
}

.header-tagline {
    font-family: 'Bubblegum Sans', cursive !important;
    color: white !important;
    font-size: 1.8rem !important; /* Same size as main title */
    font-weight: 500 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
    margin: 0 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
}

.header-trademark {
    font-family: 'Bubblegum Sans', cursive !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.95rem !important; /* Same size as subtitle */
    font-weight: 300 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
    margin: 0 !important;
}

.header-trademark i {
    font-size: 1rem !important;
    animation: leafFloat 3s ease-in-out infinite !important;
}

@keyframes leafFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(2deg); }
}

/* =============================================================================
   NAVIGATION STYLES - 30% SMALLER HEIGHT
   ============================================================================= */
nav {
    background-color: #1a4d0f !important;
    padding: 5px 0 !important; /* 30% smaller than 15px */
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    gap: 25px !important;
}

nav a {
    color: white !important;
    text-decoration: none !important;
    padding: 5px 12px !important; /* 30% smaller than 10px 20px */
    border-radius: 5px !important;
    transition: background-color 0.3s !important;
    font-weight: 500 !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
}

nav a:hover {
    background-color: #228B22 !important;
    color: white !important;
}

/* =============================================================================
   PRODUCT CARD STYLES - 4 PER ROW WITH 80% REDUCED PADDING
   ============================================================================= */

/* Override Bootstrap column padding - MAXIMUM reduction */
.col-sm-6, .col-md-4, .col-lg-3 {
    padding-left: 2px !important; /* Much smaller padding */
    padding-right: 2px !important; /* Much smaller padding */
}

.product-card {
    background-color: white !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    margin-bottom: 4px !important; /* 80% reduction from 21px */
    overflow: hidden !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    transform: none !important; /* REMOVED scaling - this was creating fake spacing */
    transform-origin: center !important;
    margin: 1px !important; /* Minimal margin */
    border: 1px solid #90EE90 !important;
    text-align: center !important;
    padding: 0 !important; /* Reset any existing padding */
}

.product-card:hover {
    transform: translateY(-5px) !important; /* Only move up, no scaling */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.product-image {
    width: 100% !important;
    height: 140px !important; /* 30% smaller than 200px */
    object-fit: cover !important;
    border-radius: 0 !important; /* Remove border radius from image */
}

.product-info {
    padding: 7px !important; /* 50% smaller than 14px */
}

.product-name {
    color: #228B22 !important;
    font-size: 1.05em !important; /* 30% smaller than 1.5em */
    margin-bottom: 10px !important;
    font-weight: bold !important;
}

/* =============================================================================
   SIZE SELECTION STYLES
   ============================================================================= */
.size-options {
    display: flex !important;
    gap: 3.5px !important; /* 50% smaller than 7px */
    margin: 5px 0 !important; /* 50% smaller than 10px */
    flex-wrap: wrap !important;
}

.size-option {
    flex: 1 !important;
    min-width: 28px !important; /* 50% smaller than 56px */
}

.size-option input[type="radio"] {
    display: none !important;
}

.size-option label {
    display: block !important;
    padding: 3px 4px !important; /* 50% smaller than 6px 8px */
    background-color: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-radius: 5px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    font-weight: 500 !important;
    font-size: 0.85em !important;
}

.size-option input[type="radio"]:checked + label {
    background-color: #228B22 !important;
    color: white !important;
    border-color: #228B22 !important;
}

.size-option label:hover {
    border-color: #228B22 !important;
}

/* =============================================================================
   DELIVERY DATE SECTION
   ============================================================================= */
.delivery-date-section {
    background-color: #f8f9fa !important;
    padding: 5px !important; /* 50% smaller than 10px */
    border-radius: 8px !important;
    margin: 5px 0 !important; /* 50% smaller than 10px */
    border: 1px solid #e9ecef !important;
}

.delivery-date-section h6 {
    color: #228B22 !important;
    margin-bottom: 3.5px !important; /* 50% smaller than 7px */
    font-weight: bold !important;
    font-size: 0.9em !important;
}

.delivery-date-select {
    width: 100% !important;
    padding: 3px 4px !important; /* 50% smaller than 6px 8px */
    border: 2px solid #e9ecef !important;
    border-radius: 5px !important;
    background-color: white !important;
    font-size: 0.85em !important;
}

.delivery-date-select:focus {
    border-color: #228B22 !important;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(34, 139, 34, 0.25) !important;
}

/* =============================================================================
   QUANTITY CONTROLS AND BUTTON STYLES
   ============================================================================= */
.quantity-controls {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 7.5px 0 !important;
}

.quantity-input {
    width: 40px !important;
    text-align: center !important;
    border: 2px solid #e9ecef !important;
    border-radius: 5px !important;
    padding: 4px !important;
    font-size: 0.85em !important;
}

.btn-add-cart {
    background-color: #228B22 !important;
    color: white !important;
    border: none !important;
    padding: 6px 12.5px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    transition: background-color 0.3s !important;
    width: 100% !important;
    margin-top: 5px !important;
    font-size: 0.9rem !important;
}

.btn-add-cart:hover {
    background-color: #1e7b1e !important;
    color: white !important;
}

.btn-subscribe {
    background-color: #ff9800 !important;
    color: white !important;
    border: none !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    transition: all 0.3s !important;
    text-decoration: none !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    margin-top: 2.5px !important;
    font-size: 0.9rem !important;
}

.btn-subscribe:hover {
    background-color: #e68900 !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

.subscription-mode-message {
    background-color: #fff3cd !important;
    border: 1px solid #ffeaa7 !important;
    color: #856404 !important;
    padding: 5px !important;
    border-radius: 5px !important;
    text-align: center !important;
    margin-top: 5px !important;
    font-size: 0.85em !important;
}

/* =============================================================================
   BUTTON STYLES
   ============================================================================= */
.btn-add-to-cart {
    background: linear-gradient(135deg, #228B22, #32CD32) !important;
    color: white !important;
    border: none !important;
    padding: 4px 8px !important; /* 50% smaller than 8px 16px */
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    width: 100% !important;
    margin-top: 5px !important; /* 50% smaller than 10px */
}

.btn-add-to-cart:hover {
    background: linear-gradient(135deg, #1e7e1e, #2eb82e) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(34, 139, 34, 0.3) !important;
}

/* Product action buttons container */
.product-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 3.5px !important; /* 50% smaller than 7px */
    margin-top: 5px !important; /* 50% smaller than 10px */
}

/* =============================================================================
   FORM STYLES
   ============================================================================= */
.add-to-cart-form {
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================================================
   ALERT STYLES
   ============================================================================= */
.alert {
    padding: 10px 15px !important;
    margin-bottom: 14px !important;
    border-radius: 8px !important;
    font-size: 0.9em !important;
}

.alert-success {
    background-color: #d4edda !important;
    border: 1px solid #c3e6cb !important;
    color: #155724 !important;
}

.alert-danger {
    background-color: #f8d7da !important;
    border: 1px solid #f5c6cb !important;
    color: #721c24 !important;
}

/* =============================================================================
   SUBSCRIPTION MODE STYLES
   ============================================================================= */
.subscription-mode-notice {
    background: linear-gradient(135deg, #ff9800, #ffb74d) !important;
    color: white !important;
    padding: 20px !important;
    border-radius: 12px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3) !important;
}

.subscription-mode-notice h5 {
    margin-bottom: 15px !important;
    font-weight: bold !important;
}

.subscription-buttons {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    margin-top: 20px !important;
    flex-wrap: wrap !important;
}

.btn-subscription-primary {
    background-color: white !important;
    color: #ff9800 !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    transition: all 0.3s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.btn-subscription-primary:hover {
    background-color: #f5f5f5 !important;
    color: #e68900 !important;
    transform: translateY(-2px) !important;
}

.btn-subscription-secondary {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    transition: all 0.3s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 2px solid white !important;
}

.btn-subscription-secondary:hover {
    background-color: white !important;
    color: #ff9800 !important;
}

/* =============================================================================
   LEGACY BUTTON STYLES (for compatibility)
   ============================================================================= */
.btn-add {
    background-color: #228B22 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 1em !important;
    font-weight: normal !important;
}

.btn-add:hover {
    background-color: #FFA500 !important;
}

.btn-benefits {
    background-color: #90EE90 !important;
    color: #333333 !important;
    border: none !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
}

.btn-benefits:hover {
    background-color: #FFA500 !important;
}

/* =============================================================================
   MISCELLANEOUS STYLES
   ============================================================================= */
.sold-out-date {
    text-decoration: line-through !important;
    color: #6c757d !important;
    background-color: #f8f9fa !important;
}

footer {
    background-color: #90EE90 !important;
    text-align: center !important;
    padding: 10px !important;
    margin-top: 20px !important;
}

.benefits-text {
    font-size: 0.9em !important;
    color: #228B22 !important;
    margin-top: 0 !important;
    text-align: center !important;
}

.benefits-container {
    display: none !important;
}

/* Legacy product card form styles */
.product-card form {
    margin-top: 0 !important; /* Override 3em */
}

.product-card button[type="button"] {
    margin-top: 0 !important; /* Override 3em */
}

.product-card img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}

/* =============================================================================
   MOBILE RESPONSIVENESS - HEADER ONLY
   ============================================================================= */
@media (max-width: 768px) {
    header, header.site-header {
        height: 120px !important;
        padding: 15px !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: center !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .header-brand {
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 5px !important;
        order: 1 !important;
    }
    
    .header-text {
        width: 100% !important;
        text-align: center !important;
    }
    
    .header-text h1, header h1, header.site-header h1 {
        font-size: 1.6rem !important;
        text-align: center !important;
    }
    
    .header-subtitle, header p {
        margin-left: 0 !important;
        text-align: center !important;
        order: 3 !important;
    }
    
    .header-right {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        gap: 5px !important;
        order: 2 !important;
    }
    
    .header-tagline {
        font-size: 1.6rem !important; /* Same as main title on mobile */
        text-align: center !important;
        order: 2 !important;
    }
    
    .header-trademark {
        font-size: 0.95rem !important; /* Same as subtitle on mobile */
        text-align: center !important;
        justify-content: center !important;
        order: 4 !important;
    }

    /* Mobile order: 
       1. Super Power Microgreens
       2. Fresh Healthy Sustainable  
       3. Grown with Stackable Farm Technology
       4. Powered by Innovation */

    nav {
        gap: 8px !important;
        padding: 3px 7px !important;
        flex-wrap: wrap !important;
    }

    nav a {
        font-size: 0.8rem !important;
        padding: 3px 6px !important;
        white-space: nowrap !important;
    }

    .size-options {
        justify-content: center !important;
    }

    .col-sm-6, .col-md-4, .col-lg-3 {
        padding-left: 1.5px !important; /* 80% reduction for mobile (7.5px * 0.2 = 1.5px) */
        padding-right: 1.5px !important; /* 80% reduction for mobile (7.5px * 0.2 = 1.5px) */
    }

    .product-card {
        transform: scale(0.9) !important;
        margin: 1.5px !important; /* 50% smaller than 3px */
    }

    .product-card:hover {
        transform: scale(0.9) translateY(-3px) !important;
    }
}

/* =============================================================================
   DESKTOP LAYOUT (768px and up)
   ============================================================================= */
@media (min-width: 768px) {
    .product-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .product-row {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .product-row .col-12.col-lg-12 {
        padding-bottom: 0 !important;
    }
    
    .buttons-section {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 10px 20px !important;
        align-items: start !important;
    }
    
    .benefits-container {
        display: block !important;
        width: 100% !important;
        margin-top: 15px !important;
        padding: 0 15px !important;
    }
    
    .benefits-text {
        text-align: left !important;
        padding: 10px !important;
        background-color: #f8f9fa !important;
        border-radius: 5px !important;
        border-left: 3px solid #228B22 !important;
    }
    
    .btn-benefits {
        display: none !important;
    }
    
    .blank-space {
        height: 1em !important;
        min-height: 0 !important;
    }
    
    .product-card {
        padding-bottom: 0 !important;
    }
}

/* =============================================================================
   MOBILE SPECIFIC OVERRIDES (767px and below)
   ============================================================================= */
@media (max-width: 767px) {
    .product-card .blank-space {
        height: 0.2em !important;
    }
    
    .product-card .col-12 {
        padding-top: 0.1em !important;
        padding-bottom: 0.1em !important;
    }
    
    .btn-benefits {
        width: auto !important;
        margin-right: 0px !important;
    }
    
    .btn-add {
        width: 16ch !important;
        padding: 8px 16px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        font-size: 0.9em !important;
        margin-bottom: 0.2em !important;
        margin-top: 0 !important;
    }
    
    .product-card select {
        width: 16ch !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        margin-bottom: 0.1em !important;
        margin-top: 0 !important;
    }
    
    .product-card h3 {
        font-size: 0.9em !important;
        font-weight: bold !important;
        margin-bottom: 0.1em !important;
    }
    
    .product-card label {
        margin-bottom: 0.1em !important;
        margin-top: 0 !important;
        font-size: 0.9em !important;
    }
    
    .benefits-container {
        display: none !important;
    }
    
    .buttons-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        margin-top: 0.1em !important;
        padding: 0 !important;
    }
    
    .button-column {
        margin: 0 !important;
        padding: 0 !important;
    }
}