/* ===================================================================
   GROWERP PREMIUM BUSINESS THEME
   A modern, professional design system for business websites
   =================================================================== */

/* CSS Custom Properties - Design Tokens */
:root {
    /* Header/Footer: primaryContainer is the Lumina token meant for a large brand-tinted
       surface (primary itself is for small filled elements and glares full-bleed).
       --l-on-primary-container carries its readable on-colour, see store.xml. */
    --header-footer-bg: rgb(var(--l-primary-container));
    --header-footer-text: rgb(var(--l-on-primary-container));
    /* channel form, for the translucent tints and hovers layered on the chrome */
    --header-footer-text-rgb: var(--l-on-primary-container);
    
    /* All ramps below are derived from the --l-* Lumina tokens, which are declared in the
       :root near the bottom of this sheet (search "LUMINA design tokens"). Custom
       properties resolve at use time, so referencing them ahead of their declaration is
       fine. This is what makes the legacy template set follow the website colour setting;
       nothing here may be a fixed brand colour. */

    /* Two roles the ramps must keep working in BOTH a light and a dark scheme:
       - the light end (50..300) are page/panel surfaces, so they mix toward --l-surface
       - the dark end (600..900) are text/emphasis, so they mix toward --l-contrast
       --l-contrast is white on dark schemes and black on light schemes (see store.xml),
       i.e. it is always "further away from the page background". */

    /* Primary Palette - the brand colour */
    --primary-50:  color-mix(in srgb, rgb(var(--l-primary)) 10%, rgb(var(--l-surface)));
    --primary-100: color-mix(in srgb, rgb(var(--l-primary)) 22%, rgb(var(--l-surface)));
    --primary-200: color-mix(in srgb, rgb(var(--l-primary)) 38%, rgb(var(--l-surface)));
    --primary-300: color-mix(in srgb, rgb(var(--l-primary)) 55%, rgb(var(--l-surface)));
    --primary-400: color-mix(in srgb, rgb(var(--l-primary)) 78%, rgb(var(--l-surface)));
    --primary-500: rgb(var(--l-primary));
    --primary-600: color-mix(in srgb, rgb(var(--l-primary)) 90%, #000);
    --primary-700: color-mix(in srgb, rgb(var(--l-primary)) 78%, #000);
    --primary-800: color-mix(in srgb, rgb(var(--l-primary)) 66%, #000);
    --primary-900: color-mix(in srgb, rgb(var(--l-primary)) 48%, #000);

    /* Accent Palette - the secondary brand colour */
    --accent-50:  color-mix(in srgb, rgb(var(--l-tertiary)) 10%, rgb(var(--l-surface)));
    --accent-100: color-mix(in srgb, rgb(var(--l-tertiary)) 22%, rgb(var(--l-surface)));
    --accent-200: color-mix(in srgb, rgb(var(--l-tertiary)) 38%, rgb(var(--l-surface)));
    --accent-300: color-mix(in srgb, rgb(var(--l-tertiary)) 55%, rgb(var(--l-surface)));
    --accent-400: color-mix(in srgb, rgb(var(--l-tertiary)) 78%, rgb(var(--l-surface)));
    --accent-500: rgb(var(--l-tertiary));
    --accent-600: color-mix(in srgb, rgb(var(--l-tertiary)) 88%, #000);
    --accent-700: color-mix(in srgb, rgb(var(--l-tertiary)) 76%, #000);
    --accent-800: color-mix(in srgb, rgb(var(--l-tertiary)) 64%, #000);
    --accent-900: color-mix(in srgb, rgb(var(--l-tertiary)) 50%, #000);

    /* Neutral Palette - the surface -> text ladder */
    --neutral-50:  rgb(var(--l-surface-container-lowest));
    --neutral-100: rgb(var(--l-surface-container-low));
    --neutral-200: rgb(var(--l-surface-container));
    --neutral-300: rgb(var(--l-surface-container-high));
    --neutral-400: rgb(var(--l-outline-variant));
    --neutral-500: rgb(var(--l-outline));
    --neutral-600: rgb(var(--l-on-surface-variant));
    --neutral-700: color-mix(in srgb, rgb(var(--l-on-surface)) 75%, rgb(var(--l-on-surface-variant)));
    --neutral-800: rgb(var(--l-on-surface));
    --neutral-900: color-mix(in srgb, rgb(var(--l-on-surface)) 88%, rgb(var(--l-contrast)));

    /* Card/panel surface - what used to be hardcoded #ffffff. One step up the elevation
       ramp from the #store-root page gradient (--neutral-50 -> --neutral-100), otherwise
       cards land between the two gradient stops and disappear on a dark scheme. */
    --surface-solid: rgb(var(--l-surface-container));
    /* Text that sits on a primary/accent filled element */
    --on-brand: rgb(var(--l-on-primary));

    /* Special Colors - gold stays fixed, it is semantic (ratings), not brand */
    --gold: #f59e0b;
    --gold-light: #fbbf24;
    --success: #10b981;
    --warning: #f59e0b;
    --error: rgb(var(--l-error));

    /* Glass Effect */
    --glass-bg: rgb(var(--l-surface-container) / 0.85);
    --glass-border: rgb(var(--l-outline-variant) / 0.5);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
}

/* ===================================================================
   BASE STYLES & TYPOGRAPHY
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

#store-root {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--neutral-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: var(--neutral-800);
}

a {
    color: var(--primary-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-700);
    text-decoration: none;
}

/* ===================================================================
   NAVBAR - PREMIUM DESIGN
   =================================================================== */

nav.navbar,
.navbar.navbar-expand-md.navbar-dark.bg-dark {
    background: var(--header-footer-bg) !important;
    background-color: var(--header-footer-bg) !important;
    padding: var(--space-4) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgb(var(--header-footer-text-rgb) / 0.1);
    box-shadow: var(--shadow-lg);
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-500), var(--primary-500));
    background-size: 200% 100%;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

nav.navbar .moqui-navbar {
    width: 100%;
    background: transparent !important;
    text-align: center !important;
}

nav.navbar.bg-dark,
.navbar-dark.bg-dark {
    background: var(--header-footer-bg) !important;
    background-color: var(--header-footer-bg) !important;
}

.main-navbar {
    align-items: center;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: transform var(--transition-base);
}

.navbar-brand:hover {
    transform: translateY(-2px);
}

.moqui-dynamic {
    width: 55px;
    height: 55px;
    margin: 0;
    border-radius: var(--radius-md);
    padding: 4px;
    background: rgb(var(--header-footer-text-rgb) / 0.1);
    border: 2px solid rgb(var(--header-footer-text-rgb) / 0.2);
    box-shadow: 0 4px 15px rgb(var(--l-primary) / 0.3);
    transition: all var(--transition-base);
}

.navbar-brand:hover .moqui-dynamic {
    box-shadow: 0 6px 20px rgb(var(--l-primary) / 0.5);
    border-color: var(--primary-400);
}

.navbar-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--header-footer-text);
    letter-spacing: -0.5px;
    margin: 0;
    display: inline-block;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--header-footer-text);
    font-weight: 500;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: rgb(var(--header-footer-text-rgb));
    background: rgb(var(--header-footer-text-rgb) / 0.1);
}

.navbar-dark .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-400);
    transition: all var(--transition-fast);
    transform: translateX(-50%);
}

.navbar-dark .navbar-nav .nav-link:hover::after {
    width: 80%;
}

.icon-down {
    margin-left: var(--space-2);
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
}

.nav-link:hover .icon-down {
    transform: rotate(180deg);
}

/* Dropdown Menus */
.dropdown-menu {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-2);
    margin-top: var(--space-2);
    animation: dropdown-fade 0.2s ease;
}

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

.dropdown-item {
    color: var(--neutral-700);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.dropdown-item:hover,
.item-color:hover {
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
    color: var(--primary-700) !important;
    transform: translateX(4px);
}

.item-color {
    color: var(--primary-600) !important;
}

/* Cart Badge */
.cart-quantity {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
    font-weight: 600;
    /* the badge sits on the chrome, so it takes the chrome's own colours inverted: keying
       it to accent made it invisible whenever the brand's tertiary was close to its
       primaryContainer (the default green palette being exactly that case) */
    background: rgb(var(--header-footer-text-rgb));
    color: var(--header-footer-bg);
    border-radius: var(--radius-full);
    display: inline-flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    margin-left: -8px;
    margin-top: -8px;
    box-shadow: 0 2px 8px rgb(var(--header-footer-text-rgb) / 0.35);
    animation: pulse-badge 2s ease infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Search Input */
.search-input {
    width: 100%;
    max-width: 300px;
    margin: 0;
    position: relative;
}

.search-input input {
    background: rgb(var(--header-footer-text-rgb) / 0.1);
    border: 1px solid rgb(var(--header-footer-text-rgb) / 0.2);
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-4);
    padding-right: 50px;
    width: 100%;
    color: var(--header-footer-text);
    font-size: 0.9rem;
    transition: all var(--transition-base);
}

.search-input input::placeholder {
    color: rgb(var(--header-footer-text-rgb) / 0.5);
}

.search-input input:focus {
    background: rgb(var(--header-footer-text-rgb) / 0.15);
    border-color: var(--primary-400);
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--l-primary) / 0.2);
}

.search-input .search-button {
    background: var(--primary-500);
    border: none;
    border-radius: var(--radius-full);
    height: 36px;
    width: 36px;
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    color: var(--on-brand);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.search-input .search-button:hover {
    background: var(--primary-600);
    transform: translateY(-50%) scale(1.05);
}

/* ===================================================================
   HERO SECTION (for home page)
   =================================================================== */

.hero-section {
    /* chrome surface, not the neutral text ramp: --neutral-800/900 are now the on-surface
       text colours and would invert this panel */
    background: linear-gradient(135deg, var(--header-footer-bg) 0%, var(--neutral-100) 50%, var(--primary-900) 100%);
    padding: var(--space-16) 0;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgb(var(--l-primary) / 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgb(var(--l-tertiary) / 0.1) 0%, transparent 40%);
}

/* ===================================================================
   CONTENT SECTIONS
   =================================================================== */

.container-top {
    padding-top: var(--space-8);
}

/* Section Headers */
.modal-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--neutral-800);
    margin-bottom: var(--space-6);
    position: relative;
    display: inline-block;
}

.modal-text::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-500));
    border-radius: var(--radius-full);
}

.modal-title {
    font-family: 'Outfit', sans-serif;
    color: var(--neutral-800);
    font-size: 2rem;
    font-weight: 700;
}

/* Customer Menu Sidebar */
.customer-menu {
    background: var(--surface-solid);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 100px;
}

.customer-menu a {
    color: var(--primary-600) !important;
    font-weight: 500;
    transition: all var(--transition-fast);
    display: block;
    padding: var(--space-2) 0;
}

.customer-menu a:hover {
    color: var(--primary-700) !important;
    transform: translateX(4px);
}

.customer-orders-ul {
    list-style-type: none;
    font-size: 0.95rem;
    margin-left: 0;
    padding-left: var(--space-4);
    border-left: 2px solid var(--neutral-200);
}

.customer-orders-ul li {
    margin-top: var(--space-3);
    cursor: pointer;
}

.customer-orders-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--neutral-800);
}

/* ===================================================================
   PRODUCT CARDS & CAROUSEL
   =================================================================== */

.carousel {
    padding: var(--space-4) 0;
}

.carousel-item {
    transition: transform 0.5s ease-in-out;
}

.category-product {
    display: block;
    color: var(--primary-600);
    transition: all var(--transition-base);
}

.category-product:hover {
    color: var(--primary-700);
}

.category-product .figure {
    background: var(--surface-solid);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    margin: var(--space-2);
    overflow: hidden;
}

.category-product:hover .figure {
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
}

.figure-img {
    border: none;
    border-radius: var(--radius-md);
    transition: transform var(--transition-base);
}

.category-product:hover .figure-img {
    transform: scale(1.05);
}

.title-product-text {
    font-family: 'Outfit', sans-serif;
    color: var(--neutral-800);
    font-weight: 600;
    font-size: 1rem;
    margin-top: var(--space-3);
    transition: color var(--transition-fast);
}

.category-product:hover .title-product-text {
    color: var(--primary-600);
}

/* Star Rating */
.star-rating {
    color: var(--gold);
}

/* Product Price */
.product-price-text {
    color: var(--accent-600);
    font-size: 1.25rem;
    font-weight: 700;
}

.product-last-price {
    color: var(--neutral-400);
    font-size: 0.9rem;
}

.product-last-price del {
    text-decoration-color: var(--accent-500);
}

/* Carousel Controls */
.carousel-prev,
.carousel-next {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    border: none;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-brand);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    transform: translateY(-50%) scale(1.1);
    box-shadow: var(--shadow-lg);
}

.carousel-prev {
    left: -20px;
}

.carousel-next {
    right: -20px;
}

.carousel .carousel-control-prev,
.carousel .carousel-control-next {
    width: 60px;
    height: 100%;
    background: none;
    opacity: 1;
}

/* ===================================================================
   PRODUCT DETAIL PAGE
   =================================================================== */

.product-title {
    font-family: 'Outfit', sans-serif;
    color: var(--neutral-800);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.product-description {
    color: var(--neutral-600);
    font-size: 1rem;
    line-height: 1.7;
}

.product-star {
    margin-top: var(--space-2);
}

.product-img {
    border-radius: var(--radius-lg);
    cursor: pointer;
    margin-bottom: var(--space-4);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.product-img:hover {
    box-shadow: var(--shadow-xl);
    transform: scale(1.02);
}

.product-img-select {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.product-cate-text {
    color: var(--primary-600);
    font-weight: 500;
}

.product-hr {
    height: 1px;
    background: var(--neutral-200);
    border: none;
    margin: var(--space-6) 0;
}

/* Reviews */
.review {
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: var(--surface-solid);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.review-text-size {
    font-size: 0.95rem;
}

.review-date {
    color: var(--neutral-400);
    font-size: 0.85rem;
}

.review-text {
    margin-top: var(--space-2);
    color: var(--neutral-600);
}

.review-btn {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: var(--on-brand);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.review-btn:hover {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ===================================================================
   BUTTONS
   =================================================================== */

.btn-continue {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: var(--on-brand);
    border: none;
    border-radius: var(--radius-md);
    height: 50px;
    min-width: 160px;
    font-weight: 600;
    font-size: 1rem;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.btn-continue:hover {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--on-brand);
}

.btn-login {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: var(--on-brand);
    border: none;
    border-radius: var(--radius-md);
    height: 50px;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.btn-login:hover {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    transform: translateY(-2px);
}

.btn-create-account {
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
    color: var(--on-brand);
    border: none;
    border-radius: var(--radius-md);
    height: 50px;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.btn-create-account:hover {
    background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-700) 100%);
    transform: translateY(-2px);
}

.btn-place-order {
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
    color: var(--on-brand);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-8);
    font-weight: 600;
    font-size: 1.1rem;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.btn-place-order:hover {
    background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-700) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--on-brand);
}

/* ===================================================================
   FOOTER
   =================================================================== */

.footer {
    background: var(--header-footer-bg);
    color: var(--header-footer-text);
    padding: var(--space-12) 0 var(--space-8);
    position: relative;
    margin-top: var(--space-16);
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-500), var(--primary-500));
}

.footer p {
    font-size: 0.9rem;
    color: var(--primary-400);
    margin: 0;
}

.footer a {
    color: var(--primary-400);
    transition: color var(--transition-fast);
}

.footer a:hover {
    color: var(--primary-300);
}

.footer-ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.footer-ul li {
    margin-top: var(--space-3);
}

.footer-ul li a {
    color: var(--header-footer-text);
    opacity: 0.7;
    transition: all var(--transition-fast);
}

.footer-ul li a:hover {
    color: rgb(var(--header-footer-text-rgb));
    padding-left: var(--space-2);
}

.footer-follow-text {
    color: var(--neutral-400);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    margin-bottom: var(--space-3);
}

.footer-icons {
    font-size: 1.5rem;
    margin-right: var(--space-4);
    color: var(--header-footer-text);
    opacity: 0.6;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.footer-icons:hover {
    color: var(--primary-400);
    transform: translateY(-3px);
}

.footer-a {
    color: var(--header-footer-text) !important;
    opacity: 0.7;
}

/* Footer Additional Classes */
.footer-logo {
    width: 45px;
    height: 45px;
    border-radius: var(--radius-md);
    margin-right: 12px;
}

.footer-brand-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--header-footer-text);
}

.footer-description {
    color: var(--header-footer-text);
    opacity: 0.7;
    font-size: 0.9rem;
    line-height: 1.7;
}

.footer-heading {
    color: var(--header-footer-text);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1.25rem;
}

.footer-contact {
    font-size: 0.9rem;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
}

.footer-contact-icon {
    color: var(--primary-400);
}

.footer-contact-text {
    color: var(--header-footer-text);
    opacity: 0.7;
}

.footer-bottom {
    border-top: 1px solid var(--neutral-300);
}

.footer-copyright {
    margin: 0;
    color: var(--header-footer-text);
    opacity: 0.5;
    font-size: 0.85rem;
}

.footer-credits {
    margin: 0;
    font-size: 0.85rem;
}

.footer-credit-link {
    color: var(--primary-400);
}

.footer-separator {
    color: var(--header-footer-text);
    opacity: 0.3;
    margin: 0 10px;
}

/* ===================================================================
   FEATURES BAR
   =================================================================== */

.features {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: var(--on-brand);
    padding: var(--space-6) 0;
    box-shadow: var(--shadow-md);
}

.features .feature {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.features .feature .feature-icon {
    font-size: 2rem;
    opacity: 0.9;
}

.features .feature .feature-info .title {
    font-weight: 600;
    font-size: 0.95rem;
}

.features .feature .feature-info .subtitle {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* ===================================================================
   CHECKOUT & CART
   =================================================================== */

.cart-div {
    background: var(--surface-solid);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
}

.cart-form-price {
    color: var(--neutral-600);
}

.price-text {
    color: var(--accent-600);
    font-size: 1.75rem;
    font-weight: 700;
}

.cart-form-btn {
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
    color: var(--on-brand);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.cart-form-btn:hover {
    background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-700) 100%);
    transform: translateY(-2px);
}

.title-cart-item {
    color: var(--neutral-700) !important;
    font-weight: 600;
    font-size: 1.2rem;
}

.order-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--neutral-700);
}

.order-link-text {
    color: var(--primary-600);
    font-weight: 500;
}

.order-link-text:hover {
    color: var(--primary-700);
}

.order-text-color {
    color: var(--neutral-600);
}

.order-status {
    color: var(--accent-600);
    font-weight: 600;
}

/* Checkout Steps */
.order-navbar-circle {
    width: 44px;
    height: 44px;
    color: var(--neutral-400);
    border: 2px solid var(--neutral-300);
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    transition: all var(--transition-base);
}

.order-navbar-circle-red {
    color: var(--on-brand);
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
    border: none;
    box-shadow: 0 4px 12px rgb(var(--l-tertiary) / 0.4);
}

.order-navbar-circle-blue {
    color: var(--on-brand);
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    border: none;
    box-shadow: 0 4px 12px rgb(var(--l-primary) / 0.4);
}

.hr-active {
    background: linear-gradient(90deg, var(--accent-500), var(--accent-400));
    height: 3px;
    border-radius: var(--radius-full);
}

.hr-complete {
    background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
    height: 3px;
    border-radius: var(--radius-full);
}

/* Step Indicators */
.step-active .circle {
    color: var(--on-brand);
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: none;
    box-shadow: 0 2px 8px rgb(var(--l-tertiary) / 0.4);
}

.step-active .text-address {
    color: var(--accent-600);
    font-weight: 600;
}

.step-complete .circle {
    color: var(--on-brand);
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: none;
    box-shadow: 0 2px 8px rgb(var(--l-primary) / 0.4);
}

.step-complete .text-address {
    color: var(--primary-600);
    font-weight: 600;
}

/* ===================================================================
   FORMS
   =================================================================== */

.form-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--neutral-800);
}

.input-border {
    border: none;
    border-bottom: 2px solid var(--neutral-200);
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-3) var(--space-2);
    transition: all var(--transition-fast);
}

.input-border:hover {
    border-bottom-color: var(--neutral-300);
}

.input-border:focus {
    border-bottom-color: var(--primary-500);
    box-shadow: none;
    outline: none;
}

/* Login & Account Forms */
.login-form,
.new-customer {
    background: var(--surface-solid);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
    color: var(--neutral-600);
}

.login-forgot {
    color: var(--primary-600);
    font-size: 0.9rem;
    font-weight: 500;
}

.sign-in {
    color: var(--primary-600);
    cursor: pointer;
    font-weight: 600;
}

.account-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--neutral-800);
}

/* ===================================================================
   MODALS
   =================================================================== */

.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
    border-bottom: 1px solid var(--neutral-200);
    padding: var(--space-5) var(--space-6);
}

.modal-body {
    padding: var(--space-6);
    color: var(--neutral-600);
}

.modal-footer {
    border-top: 1px solid var(--neutral-200);
    padding: var(--space-4) var(--space-6);
}

.modal-footer .btn-info {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    font-weight: 600;
}

/* ===================================================================
   CATEGORY & SEARCH PAGES
   =================================================================== */

.deals-ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.deals-ul li {
    padding: var(--space-2) 0;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.deals-ul li:hover {
    color: var(--primary-600);
    padding-left: var(--space-2);
}

.deals-subtitle {
    color: var(--neutral-500);
    font-size: 0.9rem;
}

.deals-sellers {
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
}

.deals-sortby-text {
    color: var(--neutral-600);
    font-weight: 500;
}

/* ===================================================================
   UTILITY CLASSES
   =================================================================== */

.pointer {
    cursor: pointer;
}

.customer-link {
    color: var(--primary-600) !important;
    cursor: pointer;
    font-weight: 500;
}

.customer-link:hover {
    color: var(--primary-700) !important;
}

.text-add {
    color: var(--primary-600) !important;
    cursor: pointer;
    font-weight: 500;
}

.span-link {
    color: var(--primary-600);
    cursor: pointer;
    font-weight: 500;
}

.response-text {
    color: var(--error);
    font-size: 0.9rem;
}

/* Save Circle */
.save-circle {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    border-radius: var(--radius-full);
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--neutral-800);
    position: absolute;
    margin-left: 70%;
    margin-top: -10px;
    box-shadow: var(--shadow-lg);
}

/* Loader */
.loader {
    border: 4px solid var(--neutral-100);
    border-top: 4px solid var(--primary-500);
    border-radius: var(--radius-full);
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Spinner */
.spinner {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--neutral-200);
    border-top-color: var(--primary-500);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
}

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

@media (max-width: 991px) {
    .navbar-title {
        font-size: 1.4rem;
    }
    
    .customer-menu {
        position: static;
        margin-bottom: var(--space-6);
    }
    
    .carousel-prev {
        left: 5px;
    }
    
    .carousel-next {
        right: 5px;
    }
}

@media (max-width: 767px) {
    .navbar-brand {
        gap: var(--space-2);
    }
    
    .moqui-dynamic {
        width: 45px;
        height: 45px;
    }
    
    .navbar-title {
        font-size: 1.2rem;
    }
    
    .modal-text {
        font-size: 1.25rem;
    }
    
    .product-title {
        font-size: 1.75rem;
    }
    
    .customer-orders-title {
        font-size: 1.75rem;
    }
    
    .footer {
        padding: var(--space-8) 0 var(--space-6);
    }
}

/* ===================================================================
   LEGACY OVERRIDES FOR BACKWARD COMPATIBILITY
   =================================================================== */

/* These override any inline styles or legacy Bootstrap defaults */
.text-primary {
    color: var(--primary-600) !important;
}

.bg-dark {
    background: transparent !important;
}

.navbar-dark {
    background: transparent !important;
}

hr {
    border-color: var(--neutral-200);
    opacity: 1;
}

/* ===================================================================
   CRITICAL FIXES FOR LAYOUT ISSUES
   =================================================================== */

/* Fix navbar dark background */
.navbar.navbar-dark.bg-dark,
.navbar.navbar-expand-md.navbar-dark {
    background: linear-gradient(135deg, var(--header-footer-bg) 0%, var(--neutral-100) 100%) !important;
}

/* Fix double brand visibility on desktop - hide mobile brand on larger screens */
@media (min-width: 576px) {
    .navbar-brand.d-flex.d-sm-none {
        display: none !important;
    }
}

/* Fix carousel item layout - critical for multi-item carousel */
.carousel-inner .carousel-item > div {
    max-width: 25%;
    flex: 0 0 25%;
}

@media (max-width: 991px) {
    .carousel-inner .carousel-item > div {
        max-width: 33.333%;
        flex: 0 0 33.333%;
    }
}

@media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
        max-width: 50%;
        flex: 0 0 50%;
    }
}

@media (max-width: 575px) {
    .carousel-inner .carousel-item > div {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* Fix product image sizes in carousel */
.carousel .figure-img,
.carousel-item .figure-img {
    max-height: 200px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Fix product card in carousel */
.carousel .category-product .figure,
.carousel-item .category-product .figure {
    min-height: 320px;
    max-width: 100%;
    padding: var(--space-4);
}

/* Fix product image wrapper */
.product-image-wrapper img {
    max-height: 180px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Fix for carousel bootstrap overrides */
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
    flex-wrap: nowrap;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
    transform: translateX(25%);
}

.carousel-inner .carousel-item-left.active, 
.carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
}
  
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
    transform: translateX(0);
}

/* Fix figure element sizing */
.category-product .figure {
    width: 100%;
    margin: 0 !important;
}

/* Ensure product small images have proper sizing */
.product-small-img {
    max-height: 180px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Fix for category page product grid */
.col-lg-4 .category-product .figure,
.col-md-6 .category-product .figure {
    min-height: auto;
}

/* Constrain all product listing images */
.category-product img,
.category-product .figure-img {
    max-height: 200px;
    object-fit: contain;
}

/* Better cart quantity badge positioning */
.cart-icon-wrapper {
    position: relative;
    display: inline-block;
}

.cart-icon-wrapper .cart-quantity {
    position: absolute;
    top: -8px;
    right: -12px;
    margin: 0;
}

/* Fix navbar collapse alignment */
#nav_collapse1 {
    justify-content: space-between;
}

#nav_collapse1 .navbar-nav:first-child {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Fix nav item spacing */
.navbar-nav .nav-item {
    margin: 0 2px;
}

/* Placeholder image styling */
.placeholder-image {
    background: var(--neutral-100) !important;
    border-radius: var(--radius-md);
}

/* Fix features bar visibility and styling */
.features.d-none.d-sm-none.d-md-block {
    display: block !important;
}

@media (max-width: 767px) {
    .features.d-none.d-sm-none.d-md-block {
        display: none !important;
    }
}


/* ===================================================================
   GROWERP MARKETING HOMEPAGE STYLES (STITCH REDESIGN)
   Dark Mode Glassmorphism with Flutter Green Theme
   Scoped to the GrowERP official store (productStoreId 100000)
   =================================================================== */

:root {
    /* Flutter Green Theme Palette */
    --gx-primary: #62a66c;
    --gx-secondary: #429281;
    --gx-tertiary: #73a492;
    --gx-dark: #246532;
    
    /* Dark Surface Palette */
    --gx-surface-bg: #0b1326;
    --gx-surface-card: rgba(30, 41, 59, 0.4);
    --gx-surface-border: rgba(255, 255, 255, 0.1);
    --gx-text-main: #f8fafc;
    --gx-text-muted: #94a3b8;
}

/* Global Body Override for Store 100000 */
body.growerp-store-100000 {
    background-color: var(--gx-surface-bg);
    color: var(--gx-text-main);
}

/* --- Hero Section --- */
.growerp-hero {
    background: radial-gradient(circle at top right, rgba(66, 146, 129, 0.15) 0%, transparent 40%),
                radial-gradient(circle at bottom left, rgba(36, 101, 50, 0.2) 0%, var(--gx-surface-bg) 60%);
    padding: 6rem 1rem 5rem;
    position: relative;
    overflow: hidden;
    color: var(--gx-text-main);
}

.growerp-hero-content {
    position: relative;
    z-index: 1;
}

.growerp-hero-title {
    font-family: 'Inter', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
    background: linear-gradient(to right, #ffffff, var(--gx-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.growerp-hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    color: var(--gx-text-muted);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 600px;
}

.growerp-hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.growerp-hero-note {
    font-size: 0.9rem;
    color: var(--gx-tertiary);
    margin-bottom: 0;
}

/* --- Buttons --- */
.growerp-btn-primary {
    background: linear-gradient(135deg, var(--gx-primary), var(--gx-secondary));
    color: #ffffff !important;
    border: none;
    padding: 0.85rem 2.2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(98, 166, 108, 0.3);
}

.growerp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(66, 146, 129, 0.4);
    background: linear-gradient(135deg, var(--gx-secondary), var(--gx-primary));
}

.growerp-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--gx-text-main) !important;
    border: 1px solid var(--gx-surface-border);
    padding: 0.85rem 2.2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
}

.growerp-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* --- Glassmorphic Cards --- */
.growerp-glass-card, .growerp-benefit-card, .growerp-app-card, .growerp-testimonial-card, .growerp-pricing-card {
    background: var(--gx-surface-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--gx-surface-border);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    color: var(--gx-text-main);
    height: 100%;
}

.growerp-glass-card:hover, .growerp-benefit-card:hover, .growerp-app-card:hover, .growerp-testimonial-card:hover, .growerp-pricing-card:hover {
    transform: translateY(-5px);
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(98, 166, 108, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(98, 166, 108, 0.1);
}

/* --- Benefits Section --- */
.growerp-benefits {
    padding: 5rem 0;
    background: var(--gx-surface-bg);
}

.growerp-benefit-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(98, 166, 108, 0.15);
    border: 1px solid rgba(98, 166, 108, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--gx-primary);
    transition: all 0.3s ease;
}

.growerp-glass-card:hover .growerp-benefit-icon {
    background: var(--gx-primary);
    color: #ffffff;
    box-shadow: 0 0 20px rgba(98, 166, 108, 0.4);
}

.growerp-benefit-card h5 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--gx-text-main);
}

.growerp-benefit-card p {
    color: var(--gx-text-muted);
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- Section Titles --- */
.growerp-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--gx-text-main);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.growerp-section-subtitle {
    font-size: 1.15rem;
    color: var(--gx-text-muted);
    margin-bottom: 3rem;
}

/* --- Apps Showcase --- */
.growerp-apps {
    padding: 5rem 0;
    background: var(--gx-surface-bg);
    position: relative;
}

.growerp-app-card {
    display: block;
    text-decoration: none !important;
    height: 100%;
}

.growerp-app-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(66, 146, 129, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    color: var(--gx-secondary);
}

.growerp-app-card h5 {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--gx-text-main);
}

.growerp-app-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gx-primary);
    margin-top: 1rem;
    display: inline-block;
}

/* --- Testimonials --- */
.growerp-testimonials {
    padding: 5rem 0;
    background: #060b17;
}

.growerp-testimonial-text {
    font-style: italic;
    color: var(--gx-text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.growerp-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gx-primary), var(--gx-secondary));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-right: 1rem;
}

.growerp-testimonial-author {
    display: flex;
    align-items: center;
}

.growerp-testimonial-author h6 {
    color: var(--gx-text-main);
    margin-bottom: 0;
    font-weight: 700;
}

.growerp-testimonial-author small {
    color: var(--gx-tertiary);
}

/* --- Stats Bar --- */
.growerp-stats-bar {
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.growerp-stat-item {
    text-align: center;
}

.growerp-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--gx-primary);
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
}

.growerp-stat-label {
    font-size: 0.95rem;
    color: var(--gx-text-muted);
    font-weight: 500;
}

/* --- Footer CTA --- */
.growerp-footer-cta {
    padding: 4rem 0;
    background: linear-gradient(to right, var(--gx-dark), var(--gx-surface-bg));
    border-top: 1px solid rgba(98, 166, 108, 0.2);
}

.growerp-footer-cta-title {
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
}

/* --- Navbar Trial Button --- */
.growerp-nav-trial-btn {
    background: rgba(98, 166, 108, 0.15) !important;
    border: 1px solid rgba(98, 166, 108, 0.4) !important;
    border-radius: 8px !important;
    padding: 0.5rem 1.25rem !important;
    font-weight: 600 !important;
    color: var(--gx-primary) !important;
    backdrop-filter: blur(8px);
}

.growerp-nav-trial-btn:hover {
    background: var(--gx-primary) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* --- Pricing Table (Dark Mode Glass) --- */
.growerp-pricing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 2rem;
}
.growerp-pricing-table th, .growerp-pricing-table td {
    padding: 1.25rem;
    border-bottom: 1px solid var(--gx-surface-border);
    text-align: center;
    color: var(--gx-text-muted);
}
.growerp-pricing-table th {
    background: rgba(255,255,255,0.02);
    color: var(--gx-text-main);
    font-weight: 600;
}
.growerp-pricing-table th:first-child, .growerp-pricing-table td:first-child {
    text-align: left;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .growerp-hero-title { font-size: 2.75rem; }
    .growerp-section-title { font-size: 2rem; }
    .growerp-stats-bar { gap: 2rem; }
}

@media (max-width: 767px) {
    .growerp-hero { padding: 4rem 1rem 3rem; }
    .growerp-hero-title { font-size: 2.25rem; }
    .growerp-hero-cta { flex-direction: column; }
    .growerp-hero-cta .btn { width: 100%; }
    .growerp-stats-bar { flex-direction: column; gap: 1.5rem; }
}

/* --- Content Page Layout (Sidebar & Main Area) --- */
body.growerp-store-100000 .content-breadcrumb-home {
    color: var(--gx-primary);
}
body.growerp-store-100000 .content-breadcrumb-active {
    color: var(--gx-text-muted);
}
body.growerp-store-100000 .content-sidebar-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--gx-text-main);
    margin-bottom: 1rem;
}
body.growerp-store-100000 .content-sidebar-icon {
    color: var(--gx-secondary);
}
body.growerp-store-100000 .content-sidebar-link {
    color: var(--gx-text-main);
    text-decoration: none;
    transition: color 0.2s;
}
body.growerp-store-100000 .content-sidebar-link:hover {
    color: var(--gx-primary);
}
body.growerp-store-100000 .content-sidebar-link-sub {
    color: var(--gx-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
body.growerp-store-100000 .content-sidebar-link-sub:hover {
    color: var(--gx-primary);
}
body.growerp-store-100000 .content-sidebar-bullet {
    font-size: 0.7rem;
    color: var(--gx-tertiary);
}
body.growerp-store-100000 .growerp-content-area {
    color: var(--gx-text-main);
    line-height: 1.7;
}
body.growerp-store-100000 .growerp-content-area h1,
body.growerp-store-100000 .growerp-content-area h2,
body.growerp-store-100000 .growerp-content-area h3 {
    color: var(--gx-text-main);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
body.growerp-store-100000 .growerp-content-area a {
    color: var(--gx-primary);
    text-decoration: none;
}
body.growerp-store-100000 .growerp-content-area a:hover {
    text-decoration: underline;
}

/* Fallback for light mode / other stores */
body:not(.growerp-store-100000) .content-breadcrumb-home { color: var(--primary-600); }
body:not(.growerp-store-100000) .content-breadcrumb-active { color: var(--neutral-500); }
body:not(.growerp-store-100000) .content-sidebar-title { font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--neutral-800); margin-bottom: 1rem; }
body:not(.growerp-store-100000) .content-sidebar-icon { color: var(--primary-500); }
body:not(.growerp-store-100000) .content-sidebar-link { color: inherit; }
body:not(.growerp-store-100000) .content-sidebar-link-sub { color: inherit; }
body:not(.growerp-store-100000) .content-sidebar-bullet { font-size: 0.7rem; color: var(--primary-400); }

/* Fix opaque layout wrappers in dark mode */
body.growerp-store-100000 #store-root {
    background: transparent !important;
}
body.growerp-store-100000 .customer-menu {
    background: var(--gx-surface-card) !important;
    border: 1px solid var(--gx-surface-border) !important;
    border-radius: 12px;
    padding: 1.5rem;
}

/* ==================================================================== */
/* ==== LUMINA design tokens & helpers (modern template set only) ==== */
/* Tokens are "R G B" channel triplets so Tailwind can apply opacity    */
/* modifiers via rgb(var(--l-x) / <alpha>). Defaults = Lumina palette;  */
/* per-store override via "lumina" object in websiteColor.json.         */
/* Scoped with --l- prefix + body.lumina so legacy set is unaffected.  */
/* ==================================================================== */
:root {
    --l-surface: 11 19 38;
    --l-surface-container-lowest: 6 14 32;
    --l-surface-container-low: 19 27 46;
    --l-surface-container: 23 31 51;
    --l-surface-container-high: 34 42 61;
    --l-surface-container-highest: 45 52 73;
    --l-on-surface: 218 226 253;
    --l-on-surface-variant: 188 202 192;
    --l-primary: 104 219 169;
    --l-on-primary: 0 56 37;
    --l-primary-container: 37 164 117;
    --l-secondary: 78 222 163;
    --l-tertiary: 69 223 164;
    --l-error: 255 180 171;
    --l-outline: 135 148 139;
    --l-outline-variant: 61 74 66;
    /* server-derived (from luminaBrightness), not part of the 16-token contract:
       white on dark themes, black on light themes */
    --l-contrast: 0 0 0;
    /* black or white, whichever is readable on --l-primary-container (store.xml picks it
       from that colour's luminance); the legacy header/footer are painted with it */
    --l-on-primary-container: 0 0 0;
}

body.lumina {
    background: rgb(var(--l-surface));
    color: rgb(var(--l-on-surface));
    scroll-behavior: smooth;
}
/* The legacy base sheet above paints #store-root with a light gradient and
   dark text; neutralise it inside the modern set so the Lumina surface shows */
body.lumina #store-root {
    background: transparent;
    color: inherit;
}
body.lumina :where(h1, h2, h3, h4, h5, h6)[id], body.lumina a[name] { scroll-margin-top: 6rem; }

/* Glassmorphic card / panel */
body.lumina .l-glass {
    background: rgb(var(--l-surface-container-low) / 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(var(--l-contrast) / 0.10);
}
/* Primary button glow */
body.lumina .l-glow { box-shadow: 0 0 20px rgb(var(--l-primary) / 0.30); }
body.lumina .l-glow:hover { box-shadow: 0 0 30px rgb(var(--l-primary) / 0.45); }
/* Gradient headline text */
body.lumina .l-gradient-text {
    background: linear-gradient(90deg, rgb(var(--l-primary)), rgb(var(--l-tertiary)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Native dialog styling */
body.lumina dialog::backdrop { background: rgb(0 0 0 / 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.lumina dialog {
    background: rgb(var(--l-surface-container));
    color: rgb(var(--l-on-surface));
    border: 1px solid rgb(var(--l-contrast) / 0.10);
    border-radius: 1rem;
}
/* Toast */
body.lumina .l-toast {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100;
    background: rgb(var(--l-surface-container-high) / 0.9);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgb(var(--l-primary) / 0.4);
    color: rgb(var(--l-on-surface));
    padding: 0.75rem 1.25rem; border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.4);
}
body.lumina .l-toast.l-toast-error { border-color: rgb(var(--l-error) / 0.5); }

/* Server-rendered markdown/wiki content (Tailwind preflight resets everything) */
body.lumina .prose-lumina { color: rgb(var(--l-on-surface-variant)); line-height: 1.75; }
body.lumina .prose-lumina h1, body.lumina .prose-lumina h2, body.lumina .prose-lumina h3,
body.lumina .prose-lumina h4, body.lumina .prose-lumina h5 {
    color: rgb(var(--l-on-surface)); font-weight: 600; letter-spacing: -0.01em;
    margin: 1.75rem 0 0.75rem 0; line-height: 1.25;
}
body.lumina .prose-lumina h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; }
body.lumina .prose-lumina h2 { font-size: 1.75rem; }
body.lumina .prose-lumina h3 { font-size: 1.375rem; }
body.lumina .prose-lumina h4 { font-size: 1.125rem; }
body.lumina .prose-lumina p { margin: 0 0 1rem 0; }
body.lumina .prose-lumina a { color: rgb(var(--l-primary)); text-decoration: none; }
body.lumina .prose-lumina a:hover { text-decoration: underline; }
body.lumina .prose-lumina strong { color: rgb(var(--l-on-surface)); font-weight: 600; }
body.lumina .prose-lumina ul, body.lumina .prose-lumina ol { margin: 0 0 1rem 0; padding-left: 1.5rem; }
body.lumina .prose-lumina ul { list-style: disc; }
body.lumina .prose-lumina ol { list-style: decimal; }
body.lumina .prose-lumina li { margin-bottom: 0.375rem; }
body.lumina .prose-lumina code {
    font-family: 'Geist', monospace; font-size: 0.85em;
    background: rgb(var(--l-surface-container-high));
    border: 1px solid rgb(var(--l-contrast) / 0.08);
    border-radius: 0.375rem; padding: 0.125rem 0.375rem;
}
body.lumina .prose-lumina pre {
    background: rgb(var(--l-surface-container-lowest));
    border: 1px solid rgb(var(--l-contrast) / 0.08);
    border-radius: 0.75rem; padding: 1rem; overflow-x: auto; margin: 0 0 1rem 0;
}
body.lumina .prose-lumina pre code { background: none; border: none; padding: 0; }
body.lumina .prose-lumina blockquote {
    border-left: 3px solid rgb(var(--l-primary));
    padding-left: 1rem; margin: 0 0 1rem 0; font-style: italic;
}
body.lumina .prose-lumina table { width: 100%; border-collapse: collapse; margin: 0 0 1rem 0; }
body.lumina .prose-lumina th, body.lumina .prose-lumina td {
    border: 1px solid rgb(var(--l-contrast) / 0.10); padding: 0.5rem 0.75rem; text-align: left;
}
body.lumina .prose-lumina th { color: rgb(var(--l-on-surface)); background: rgb(var(--l-surface-container)); }
body.lumina .prose-lumina img { max-width: 100%; border-radius: 0.75rem; margin: 1rem 0; }
body.lumina .prose-lumina hr { border: none; border-top: 1px solid rgb(var(--l-contrast) / 0.10); margin: 2rem 0; }