@charset "UTF-8";
/**
 * Miss Baker Shop - Custom Styles
 * Animations, transitions, and component-specific styles
 */

/* CSS Custom Properties */
:root {
    --mb-red: #fc0303;
    --mb-red-dark: #d00000;
    --mb-red-light: #ff4444;
    --mb-accent: #d00000;
    --mb-accent-light: #ff4444;
    --mb-gradient: linear-gradient(135deg, #fc0303 0%, #d00000 100%);
    --mb-gradient-hero: linear-gradient(to right, #fc0303, #d00000);
    --mb-bg-accent: rgba(252, 3, 3, 0.05);
    --mb-cream: #faf3e6;
    --mb-dark: #1a1a2e;
    --mb-gray: #16213e;

    --header-height: 72px;
    --cart-width: 400px;

    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Spacing for compact mode */
    --card-padding: 1rem;
    --grid-gap: 1.5rem;
    --card-radius: 0.75rem;
}

/* Search bar icon positioning fix */
#search-input + svg,
#search-input ~ svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Theme: Christmas - Green & Red */
body.theme-christmas {
    --mb-accent: #165B33;
    --mb-accent-light: #1E7B46;
    --mb-gradient: linear-gradient(135deg, #165B33 0%, #22c55e 50%, #dc2626 100%);
    --mb-gradient-hero: linear-gradient(to right, #165B33, #22c55e, #dc2626);
    --mb-bg-accent: #f0fdf4;
    --mb-border-accent: #165B33;
    background-color: #f0fdf4;
}

body.theme-christmas .product-card {
    border: 1px solid #bbf7d0;
}

body.theme-christmas .product-card:hover {
    border-color: var(--mb-accent);
}

body.theme-christmas .btn-increase,
body.theme-christmas .btn-add-cart {
    background: linear-gradient(135deg, #165B33, #22c55e);
}

body.theme-christmas .btn-increase:hover,
body.theme-christmas .btn-add-cart:hover {
    background: linear-gradient(135deg, #0f4429, #16a34a);
}

body.theme-christmas .cart-badge {
    background-color: #165B33;
    color: white;
}

body.theme-christmas header {
    border-bottom: 2px solid #165B33;
}

body.theme-christmas .site-footer {
    background: linear-gradient(135deg, #1a1a2e, #165B33) !important;
}

body.theme-christmas #open-cart-btn,
body.theme-christmas #checkout-btn,
body.theme-christmas #scroll-top-btn,
body.theme-christmas #header-checkout-desktop,
body.theme-christmas #header-checkout-bar a {
    background: linear-gradient(135deg, #165B33, #22c55e);
}

body.theme-christmas #open-cart-btn:hover,
body.theme-christmas #checkout-btn:hover,
body.theme-christmas #scroll-top-btn:hover,
body.theme-christmas #header-checkout-desktop:hover,
body.theme-christmas #header-checkout-bar a:hover {
    background: linear-gradient(135deg, #0f4429, #16a34a);
}

body.theme-christmas .category-tab.active,
body.theme-christmas .category-tab:hover {
    border-color: #165B33;
    color: #165B33;
}

body.theme-christmas #cart-total,
body.theme-christmas .text-mb-red {
    color: #165B33;
}

/* Theme: Easter - Yellow & Green */
body.theme-easter {
    --mb-accent: #7CB518;
    --mb-accent-light: #9BD631;
    --mb-gradient: linear-gradient(135deg, #F4D03F 0%, #7CB518 100%);
    --mb-gradient-hero: linear-gradient(to right, #F4D03F, #7CB518);
    --mb-bg-accent: #fefef3;
    --mb-border-accent: #d4e157;
    background-color: #fffef5;
}

body.theme-easter .product-card {
    border: 1px solid #e8f5c8;
}

body.theme-easter .product-card:hover {
    border-color: var(--mb-accent);
}

body.theme-easter .btn-increase,
body.theme-easter .btn-add-cart {
    background: linear-gradient(135deg, #F4D03F, #7CB518);
}

body.theme-easter .btn-increase:hover,
body.theme-easter .btn-add-cart:hover {
    background: linear-gradient(135deg, #d4b32f, #5a8412);
}

body.theme-easter .cart-badge {
    background-color: #7CB518;
    color: white;
}

body.theme-easter header {
    border-bottom: 2px solid #d4e157;
}

body.theme-easter .site-footer {
    background: linear-gradient(135deg, #2d4a0f, #1a3006) !important;
}

body.theme-easter #open-cart-btn,
body.theme-easter #checkout-btn,
body.theme-easter #scroll-top-btn,
body.theme-easter #header-checkout-desktop,
body.theme-easter #header-checkout-bar a {
    background: linear-gradient(135deg, #F4D03F, #7CB518);
}

body.theme-easter #open-cart-btn:hover,
body.theme-easter #checkout-btn:hover,
body.theme-easter #scroll-top-btn:hover,
body.theme-easter #header-checkout-desktop:hover,
body.theme-easter #header-checkout-bar a:hover {
    background: linear-gradient(135deg, #d4b32f, #5a8412);
}

body.theme-easter .category-tab.active,
body.theme-easter .category-tab:hover {
    border-color: #7CB518;
    color: #7CB518;
}

body.theme-easter #cart-total,
body.theme-easter .text-mb-red {
    color: #7CB518;
}

body.theme-easter .cart-badge {
    background-color: #7CB518 !important;
    color: white !important;
}

/* Theme: Spring - Fresh Greens & Pink */
body.theme-spring {
    --mb-accent: #10b981;
    --mb-accent-light: #34d399;
    --mb-gradient: linear-gradient(135deg, #a7f3d0 0%, #10b981 100%);
    --mb-gradient-hero: linear-gradient(to right, #6ee7b7, #10b981);
    --mb-bg-accent: #ecfdf5;
    --mb-border-accent: #6ee7b7;
    background-color: #f0fdf4;
}

body.theme-spring .product-card {
    border: 1px solid #bbf7d0;
}

body.theme-spring .product-card:hover {
    border-color: var(--mb-accent);
}

body.theme-spring .btn-increase,
body.theme-spring .btn-add-cart {
    background: linear-gradient(135deg, #34d399, #10b981);
}

body.theme-spring .btn-increase:hover,
body.theme-spring .btn-add-cart:hover {
    background: linear-gradient(135deg, #10b981, #059669);
}

body.theme-spring .cart-badge {
    background-color: #10b981;
    color: white;
}

body.theme-spring header {
    border-bottom: 2px solid #6ee7b7;
}

body.theme-spring .site-footer {
    background: linear-gradient(135deg, #064e3b, #022c22) !important;
}

body.theme-spring #open-cart-btn,
body.theme-spring #checkout-btn,
body.theme-spring #scroll-top-btn,
body.theme-spring #header-checkout-desktop,
body.theme-spring #header-checkout-bar a {
    background: linear-gradient(135deg, #34d399, #10b981);
}

body.theme-spring #open-cart-btn:hover,
body.theme-spring #checkout-btn:hover,
body.theme-spring #scroll-top-btn:hover,
body.theme-spring #header-checkout-desktop:hover,
body.theme-spring #header-checkout-bar a:hover {
    background: linear-gradient(135deg, #10b981, #059669);
}

body.theme-spring .category-tab.active,
body.theme-spring .category-tab:hover {
    border-color: #10b981;
    color: #10b981;
}

body.theme-spring #cart-total,
body.theme-spring .text-mb-red {
    color: #10b981;
}

body.theme-spring .cart-badge {
    background-color: #10b981 !important;
    color: white !important;
}

/* Theme: Winter - Icy Blue */
/* Theme: Winter - Icy Blue */
body.theme-winter {
    --mb-accent: #38bdf8;
    --mb-accent-light: #bae6fd;
    --mb-gradient: linear-gradient(135deg, #bae6fd 0%, #38bdf8 100%);
    --mb-gradient-hero: linear-gradient(to right, #7dd3fc, #0ea5e9);
    --mb-bg-accent: #f0f9ff;
    --mb-border-accent: #7dd3fc;
    background-color: #f0f9ff;
}

body.theme-winter .product-card {
    border: 1px solid #bfdbfe;
}

body.theme-winter .product-card:hover {
    border-color: var(--mb-accent);
}

body.theme-winter .btn-increase,
body.theme-winter .btn-add-cart {
    background: linear-gradient(135deg, #7dd3fc, #0284c7);
}

body.theme-winter .btn-increase:hover,
body.theme-winter .btn-add-cart:hover {
    background: linear-gradient(135deg, #38bdf8, #0369a1);
}

body.theme-winter header {
    border-bottom: 2px solid #A5D8FF;
}

body.theme-winter .site-footer {
    background: linear-gradient(135deg, #0c4a6e, #0369a1) !important;
}

body.theme-winter #open-cart-btn,
body.theme-winter #checkout-btn,
body.theme-winter #scroll-top-btn,
body.theme-winter #header-checkout-desktop,
body.theme-winter #header-checkout-bar a {
    background: linear-gradient(135deg, #7dd3fc, #0284c7);
}

body.theme-winter #open-cart-btn:hover,
body.theme-winter #checkout-btn:hover,
body.theme-winter #scroll-top-btn:hover,
body.theme-winter #header-checkout-desktop:hover,
body.theme-winter #header-checkout-bar a:hover {
    background: linear-gradient(135deg, #38bdf8, #0369a1);
}

body.theme-winter .category-tab.active,
body.theme-winter .category-tab:hover {
    border-color: #38bdf8;
    color: #0284c7;
}

body.theme-winter #cart-total,
body.theme-winter .text-mb-red {
    color: #0284c7;
}

body.theme-winter .cart-badge {
    background-color: #0ea5e9 !important;
    color: white !important;
}

/* Theme: Valentine's Day - Pink & Red */
body.theme-valentine {
    --mb-accent: #ec4899;
    --mb-accent-light: #f472b6;
    --mb-gradient: linear-gradient(135deg, #fce7f3 0%, #ec4899 100%);
    --mb-gradient-hero: linear-gradient(to right, #f472b6, #db2777);
    --mb-bg-accent: #fdf2f8;
    --mb-border-accent: #f9a8d4;
    background-color: #fdf2f8;
}

body.theme-valentine .product-card {
    border: 1px solid #fbcfe8;
}

body.theme-valentine .product-card:hover {
    border-color: var(--mb-accent);
}

body.theme-valentine .btn-increase,
body.theme-valentine .btn-add-cart {
    background: linear-gradient(135deg, #f472b6, #db2777);
}

body.theme-valentine .btn-increase:hover,
body.theme-valentine .btn-add-cart:hover {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

body.theme-valentine .cart-badge {
    background-color: #ec4899 !important;
    color: white !important;
}

body.theme-valentine header {
    border-bottom: 2px solid #f9a8d4;
}

body.theme-valentine .site-footer {
    background: linear-gradient(135deg, #831843, #9d174d) !important;
}

body.theme-valentine #open-cart-btn,
body.theme-valentine #checkout-btn,
body.theme-valentine #scroll-top-btn,
body.theme-valentine #header-checkout-desktop,
body.theme-valentine #header-checkout-bar a {
    background: linear-gradient(135deg, #f472b6, #db2777);
}

body.theme-valentine #open-cart-btn:hover,
body.theme-valentine #checkout-btn:hover,
body.theme-valentine #scroll-top-btn:hover,
body.theme-valentine #header-checkout-desktop:hover,
body.theme-valentine #header-checkout-bar a:hover {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

body.theme-valentine .category-tab.active,
body.theme-valentine .category-tab:hover {
    border-color: #ec4899;
    color: #db2777;
}

body.theme-valentine #cart-total,
body.theme-valentine .text-mb-red {
    color: #db2777;
}

/* Theme: Halloween - Orange & Black */
body.theme-halloween {
    --mb-accent: #f97316;
    --mb-accent-light: #fb923c;
    --mb-gradient: linear-gradient(135deg, #fdba74 0%, #f97316 50%, #1c1917 100%);
    --mb-gradient-hero: linear-gradient(to right, #f97316, #ea580c, #292524);
    --mb-bg-accent: #fff7ed;
    --mb-border-accent: #fed7aa;
    background-color: #fffbeb;
}

body.theme-halloween .product-card {
    border: 1px solid #fed7aa;
}

body.theme-halloween .product-card:hover {
    border-color: var(--mb-accent);
}

body.theme-halloween .btn-increase,
body.theme-halloween .btn-add-cart {
    background: linear-gradient(135deg, #f97316, #c2410c);
}

body.theme-halloween .btn-increase:hover,
body.theme-halloween .btn-add-cart:hover {
    background: linear-gradient(135deg, #ea580c, #9a3412);
}

body.theme-halloween .cart-badge {
    background-color: #f97316 !important;
    color: white !important;
}

body.theme-halloween header {
    border-bottom: 2px solid #f97316;
}

body.theme-halloween .site-footer {
    background: linear-gradient(135deg, #1c1917, #292524) !important;
}

body.theme-halloween #open-cart-btn,
body.theme-halloween #checkout-btn,
body.theme-halloween #scroll-top-btn,
body.theme-halloween #header-checkout-desktop,
body.theme-halloween #header-checkout-bar a {
    background: linear-gradient(135deg, #f97316, #c2410c);
}

body.theme-halloween #open-cart-btn:hover,
body.theme-halloween #checkout-btn:hover,
body.theme-halloween #scroll-top-btn:hover,
body.theme-halloween #header-checkout-desktop:hover,
body.theme-halloween #header-checkout-bar a:hover {
    background: linear-gradient(135deg, #ea580c, #9a3412);
}

body.theme-halloween .category-tab.active,
body.theme-halloween .category-tab:hover {
    border-color: #f97316;
    color: #ea580c;
}

body.theme-halloween #cart-total,
body.theme-halloween .text-mb-red {
    color: #ea580c;
}

/* Theme: Summer - Sunny Yellow & Orange */
body.theme-summer {
    --mb-accent: #eab308;
    --mb-accent-light: #facc15;
    --mb-gradient: linear-gradient(135deg, #fef08a 0%, #eab308 100%);
    --mb-gradient-hero: linear-gradient(to right, #facc15, #f59e0b);
    --mb-bg-accent: #fefce8;
    --mb-border-accent: #fde047;
    background-color: #fefce8;
}

body.theme-summer .product-card {
    border: 1px solid #fef08a;
}

body.theme-summer .product-card:hover {
    border-color: var(--mb-accent);
}

body.theme-summer .btn-increase,
body.theme-summer .btn-add-cart {
    background: linear-gradient(135deg, #facc15, #d97706);
}

body.theme-summer .btn-increase:hover,
body.theme-summer .btn-add-cart:hover {
    background: linear-gradient(135deg, #eab308, #b45309);
}

body.theme-summer .cart-badge {
    background-color: #eab308 !important;
    color: white !important;
}

body.theme-summer header {
    border-bottom: 2px solid #fde047;
}

body.theme-summer .site-footer {
    background: linear-gradient(135deg, #78350f, #92400e) !important;
}

body.theme-summer #open-cart-btn,
body.theme-summer #checkout-btn,
body.theme-summer #scroll-top-btn,
body.theme-summer #header-checkout-desktop,
body.theme-summer #header-checkout-bar a {
    background: linear-gradient(135deg, #facc15, #d97706);
}

body.theme-summer #open-cart-btn:hover,
body.theme-summer #checkout-btn:hover,
body.theme-summer #scroll-top-btn:hover,
body.theme-summer #header-checkout-desktop:hover,
body.theme-summer #header-checkout-bar a:hover {
    background: linear-gradient(135deg, #eab308, #b45309);
}

body.theme-summer .category-tab.active,
body.theme-summer .category-tab:hover {
    border-color: #eab308;
    color: #ca8a04;
}

body.theme-summer #cart-total,
body.theme-summer .text-mb-red {
    color: #ca8a04;
}

/* Theme: Autumn - Orange & Brown */
body.theme-autumn {
    --mb-accent: #c2410c;
    --mb-accent-light: #ea580c;
    --mb-gradient: linear-gradient(135deg, #fed7aa 0%, #c2410c 100%);
    --mb-gradient-hero: linear-gradient(to right, #ea580c, #9a3412);
    --mb-bg-accent: #fff7ed;
    --mb-border-accent: #fdba74;
    background-color: #fffbeb;
}

body.theme-autumn .product-card {
    border: 1px solid #fed7aa;
}

body.theme-autumn .product-card:hover {
    border-color: var(--mb-accent);
}

body.theme-autumn .btn-increase,
body.theme-autumn .btn-add-cart {
    background: linear-gradient(135deg, #ea580c, #78350f);
}

body.theme-autumn .btn-increase:hover,
body.theme-autumn .btn-add-cart:hover {
    background: linear-gradient(135deg, #c2410c, #451a03);
}

body.theme-autumn .cart-badge {
    background-color: #c2410c !important;
    color: white !important;
}

body.theme-autumn header {
    border-bottom: 2px solid #ea580c;
}

body.theme-autumn .site-footer {
    background: linear-gradient(135deg, #451a03, #78350f) !important;
}

body.theme-autumn #open-cart-btn,
body.theme-autumn #checkout-btn,
body.theme-autumn #scroll-top-btn,
body.theme-autumn #header-checkout-desktop,
body.theme-autumn #header-checkout-bar a {
    background: linear-gradient(135deg, #ea580c, #78350f);
}

body.theme-autumn #open-cart-btn:hover,
body.theme-autumn #checkout-btn:hover,
body.theme-autumn #scroll-top-btn:hover,
body.theme-autumn #header-checkout-desktop:hover,
body.theme-autumn #header-checkout-bar a:hover {
    background: linear-gradient(135deg, #c2410c, #451a03);
}

body.theme-autumn .category-tab.active,
body.theme-autumn .category-tab:hover {
    border-color: #c2410c;
    color: #9a3412;
}

body.theme-autumn #cart-total,
body.theme-autumn .text-mb-red {
    color: #9a3412;
}

/* Theme: Luxury - Black & Gold */
body.theme-luxury {
    --mb-accent: #d4af37;
    --mb-accent-light: #f4d03f;
    --mb-gradient: linear-gradient(135deg, #d4af37 0%, #1a1a1a 100%);
    --mb-gradient-hero: linear-gradient(to right, #d4af37, #b8860b, #1a1a1a);
    --mb-bg-accent: #fffef5;
    --mb-border-accent: #d4af37;
    background-color: #fafafa;
}

body.theme-luxury .product-card {
    border: 1px solid #e5e5e5;
}

body.theme-luxury .product-card:hover {
    border-color: var(--mb-accent);
}

body.theme-luxury .btn-increase,
body.theme-luxury .btn-add-cart {
    background: linear-gradient(135deg, #d4af37, #1a1a1a);
}

body.theme-luxury .btn-increase:hover,
body.theme-luxury .btn-add-cart:hover {
    background: linear-gradient(135deg, #b8860b, #000000);
}

body.theme-luxury .cart-badge {
    background-color: #d4af37 !important;
    color: #1a1a1a !important;
}

body.theme-luxury header {
    border-bottom: 2px solid #d4af37;
}

body.theme-luxury .site-footer {
    background: linear-gradient(135deg, #1a1a1a, #0a0a0a) !important;
}

body.theme-luxury #open-cart-btn,
body.theme-luxury #checkout-btn,
body.theme-luxury #scroll-top-btn,
body.theme-luxury #header-checkout-desktop,
body.theme-luxury #header-checkout-bar a {
    background: linear-gradient(135deg, #d4af37, #1a1a1a);
}

body.theme-luxury #open-cart-btn:hover,
body.theme-luxury #checkout-btn:hover,
body.theme-luxury #scroll-top-btn:hover,
body.theme-luxury #header-checkout-desktop:hover,
body.theme-luxury #header-checkout-bar a:hover {
    background: linear-gradient(135deg, #b8860b, #000000);
}

body.theme-luxury .category-tab.active,
body.theme-luxury .category-tab:hover {
    border-color: #d4af37;
    color: #b8860b;
}

body.theme-luxury #cart-total,
body.theme-luxury .text-mb-red {
    color: #b8860b;
}

/* Theme: Martisor - Traditional Red & White */
body.theme-martisor {
    --mb-accent: #dc2626;
    --mb-accent-light: #ef4444;
    --mb-gradient: linear-gradient(135deg, #dc2626 0%, #fecaca 50%, #dc2626 100%);
    --mb-gradient-hero: repeating-linear-gradient(
        135deg,
        #dc2626 0px, #dc2626 30px,
        #ffffff 30px, #ffffff 60px
    );
    --mb-bg-accent: rgba(220, 38, 38, 0.05);
    --mb-border-accent: #fecaca;
    background-color: #fef2f2;
}

body.theme-martisor .hero-gradient h1,
body.theme-martisor .hero-gradient #shop-description {
    color: #dc2626 !important;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    display: inline-block;
    opacity: 1 !important;
}

body.theme-martisor .product-card {
    border: 1px solid #fecaca;
}

body.theme-martisor .product-card:hover {
    border-color: var(--mb-accent);
}

body.theme-martisor .btn-increase,
body.theme-martisor .btn-add-cart {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

body.theme-martisor .btn-increase:hover,
body.theme-martisor .btn-add-cart:hover {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
}

body.theme-martisor .cart-badge {
    background-color: #dc2626 !important;
    color: white !important;
}

body.theme-martisor header {
    border-bottom: 2px solid #dc2626;
}

body.theme-martisor .site-footer {
    background: linear-gradient(135deg, #7f1d1d, #991b1b) !important;
}

body.theme-martisor #open-cart-btn,
body.theme-martisor #checkout-btn,
body.theme-martisor #scroll-top-btn,
body.theme-martisor #header-checkout-desktop,
body.theme-martisor #header-checkout-bar a {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

body.theme-martisor #open-cart-btn:hover,
body.theme-martisor #checkout-btn:hover,
body.theme-martisor #scroll-top-btn:hover,
body.theme-martisor #header-checkout-desktop:hover,
body.theme-martisor #header-checkout-bar a:hover {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
}

body.theme-martisor .category-tab.active,
body.theme-martisor .category-tab:hover {
    border-color: #dc2626;
    color: #b91c1c;
}

body.theme-martisor #cart-total,
body.theme-martisor .text-mb-red {
    color: #b91c1c;
}

/* =============================================
   DENSITY: COMPACT
   ============================================= */
body.density-compact {
    --card-padding: 0.75rem;
    --grid-gap: 1rem;
    --card-radius: 0.5rem;
}

/* Compact - Product Grid */
body.density-compact #product-grid {
    gap: var(--grid-gap);
}

body.density-compact .product-card,
body.density-compact .skeleton-card {
    border-radius: var(--card-radius);
}

body.density-compact .product-card .p-4,
body.density-compact .skeleton-card .p-4 {
    padding: var(--card-padding);
}

body.density-compact .product-card h3 {
    font-size: 1rem;
}

body.density-compact .product-card .text-xl {
    font-size: 1.125rem;
}

body.density-compact .product-card .text-sm {
    font-size: 0.8125rem;
}

/* Compact - Cart actions container - fixed height to prevent layout shift */
body.density-compact .cart-actions {
    min-height: 2.5rem;
}

/* Compact - Icon button style */
body.density-compact .btn-add-cart.w-12 {
    width: 2.5rem;
    height: 2.5rem;
}

body.density-compact .btn-add-cart.w-12 svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Compact - Text button style */
body.density-compact .btn-add-cart.h-12 {
    height: 2.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.75rem;
}

/* Compact - Quantity controls */
body.density-compact .quantity-controls {
    padding: 0.25rem;
    gap: 0.125rem;
}

body.density-compact .btn-decrease,
body.density-compact .btn-increase {
    width: 2rem;
    height: 2rem;
}

body.density-compact .btn-decrease svg,
body.density-compact .btn-increase svg {
    width: 1rem;
    height: 1rem;
}

body.density-compact .cart-qty-display {
    width: 1.5rem;
    font-size: 0.875rem;
}

/* Compact - Image container */
body.density-compact .card-image-container {
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

/* Compact - Details section */
body.density-compact .product-details-section {
    /* No extra margin/padding - inherit from standard */
}

body.density-compact .expand-toggle {
    font-size: 0.6875rem;
}

/* Compact - Checkout page */
body.density-compact .section-card,
body.density-compact .bg-white.rounded-xl:not(.product-card):not(.skeleton-card) {
    padding: 1rem;
}

@media (max-width: 1023px) {
    body.density-compact .section-card,
    body.density-compact .bg-white.rounded-xl:not(.product-card):not(.skeleton-card),
    body.density-compact .p-6 {
        padding: 0.75rem;
    }
}

body.density-compact .accordion-section .p-6 {
    padding: 1rem;
}

/* Compact - space-y-4 inherits from Tailwind */

body.density-compact input[type="text"]:not(#search-input),
body.density-compact input[type="email"],
body.density-compact input[type="tel"],
body.density-compact textarea {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

body.density-compact .payment-option {
    padding: 0.75rem;
}

/* =============================================
   DENSITY: SUPER-COMPACT
   ============================================= */
body.density-super-compact {
    --card-padding: 0.5rem;
    --grid-gap: 0.5rem;
    --card-radius: 0.375rem;
}

/* Super Compact - Product Grid */
body.density-super-compact #product-grid {
    gap: var(--grid-gap);
}

body.density-super-compact .product-card,
body.density-super-compact .skeleton-card {
    border-radius: var(--card-radius);
}

body.density-super-compact .product-card .p-4,
body.density-super-compact .skeleton-card .p-4 {
    padding: var(--card-padding);
}

body.density-super-compact .product-card h3 {
    font-size: 0.875rem;
    line-height: 1.2;
}

body.density-super-compact .product-card .text-xl {
    font-size: 1rem;
}

body.density-super-compact .product-card .text-sm {
    font-size: 0.75rem;
}

/* Super Compact - Details section visible (same as standard) */

/* Super Compact - Cart actions container - fixed height to prevent layout shift */
body.density-super-compact .cart-actions {
    min-height: 2rem;
}

/* Super Compact - Icon button style */
body.density-super-compact .btn-add-cart.w-12 {
    width: 2rem;
    height: 2rem;
}

body.density-super-compact .btn-add-cart.w-12 svg {
    width: 1rem;
    height: 1rem;
}

/* Super Compact - Text button style */
body.density-super-compact .btn-add-cart.h-12 {
    height: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.625rem;
}

/* Super Compact - Quantity controls */
body.density-super-compact .quantity-controls {
    padding: 0.25rem;
    gap: 0;
}

body.density-super-compact .btn-decrease,
body.density-super-compact .btn-increase {
    width: 1.5rem;
    height: 1.5rem;
}

body.density-super-compact .btn-decrease svg,
body.density-super-compact .btn-increase svg {
    width: 0.75rem;
    height: 0.75rem;
}

body.density-super-compact .cart-qty-display {
    width: 1.25rem;
    font-size: 0.75rem;
}

/* Super Compact - Image container */
body.density-super-compact .card-image-container {
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

/* Super Compact - Hero section */
body.density-super-compact .hero-gradient {
    padding: 1.5rem 2rem !important;
}

body.density-super-compact .hero-gradient h1 {
    font-size: 1.5rem;
}

body.density-super-compact .hero-gradient > div {
    font-size: 0.875rem;
}

/* Super Compact - Header */
body.density-super-compact header .h-16 {
    height: 3.5rem;
}

body.density-super-compact .pt-24 {
    padding-top: 5rem;
}

/* Super Compact - Checkout page */
body.density-super-compact .section-card,
body.density-super-compact .bg-white.rounded-xl:not(.product-card):not(.skeleton-card) {
    padding: 0.75rem;
}

@media (max-width: 1023px) {
    body.density-super-compact .section-card,
    body.density-super-compact .bg-white.rounded-xl:not(.product-card):not(.skeleton-card),
    body.density-super-compact .p-6 {
        padding: 0.75rem;
    }
}

body.density-super-compact .accordion-section .p-6 {
    padding: 0.75rem;
}

/* Super Compact - space-y-4 inherits from Tailwind */

body.density-super-compact input[type="text"]:not(#search-input),
body.density-super-compact input[type="email"],
body.density-super-compact input[type="tel"],
body.density-super-compact textarea {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
}

body.density-super-compact .payment-option {
    padding: 0.5rem;
}

body.density-super-compact .text-lg {
    font-size: 1rem;
}

body.density-super-compact .text-xl {
    font-size: 1.125rem;
}

/* Header desktop checkout button - hidden by default, shown on md+ when has items */
#header-checkout-desktop {
    display: none !important;
}

@media (min-width: 768px) {
    #header-checkout-desktop.visible {
        display: flex !important;
    }
}

/* Apply theme gradient to hero section */
.hero-gradient {
    background: var(--mb-gradient-hero);
}

/* Apply theme accent to various elements */
.theme-accent-bg {
    background-color: var(--mb-accent);
}

.theme-accent-text {
    color: var(--mb-accent);
}

/* Theme styles for checkout section badges and submit button */
body.theme-christmas .section-badge,
body.theme-christmas #submit-order {
    background: linear-gradient(135deg, #165B33, #22c55e) !important;
}

body.theme-easter .section-badge,
body.theme-easter #submit-order {
    background: linear-gradient(135deg, #F4D03F, #7CB518) !important;
}

body.theme-spring .section-badge,
body.theme-spring #submit-order {
    background: linear-gradient(135deg, #34d399, #10b981) !important;
}

body.theme-winter .section-badge,
body.theme-winter #submit-order {
    background: linear-gradient(135deg, #7dd3fc, #0284c7) !important;
}

body.theme-valentine .section-badge,
body.theme-valentine #submit-order {
    background: linear-gradient(135deg, #f472b6, #db2777) !important;
}

body.theme-halloween .section-badge,
body.theme-halloween #submit-order {
    background: linear-gradient(135deg, #f97316, #c2410c) !important;
}

body.theme-summer .section-badge,
body.theme-summer #submit-order {
    background: linear-gradient(135deg, #facc15, #d97706) !important;
}

body.theme-autumn .section-badge,
body.theme-autumn #submit-order {
    background: linear-gradient(135deg, #ea580c, #78350f) !important;
}

body.theme-luxury .section-badge,
body.theme-luxury #submit-order {
    background: linear-gradient(135deg, #d4af37, #1a1a1a) !important;
}

body.theme-martisor .section-badge,
body.theme-martisor #submit-order {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
}

/* Theme link colors */
body.theme-christmas a.text-mb-red,
body.theme-christmas .hover\:text-mb-red:hover {
    color: #165B33;
}

body.theme-easter a.text-mb-red,
body.theme-easter .hover\:text-mb-red:hover {
    color: #7CB518;
}

body.theme-spring a.text-mb-red,
body.theme-spring .hover\:text-mb-red:hover {
    color: #10b981;
}

body.theme-winter a.text-mb-red,
body.theme-winter .hover\:text-mb-red:hover {
    color: #0284c7;
}

body.theme-valentine a.text-mb-red,
body.theme-valentine .hover\:text-mb-red:hover {
    color: #db2777;
}

body.theme-halloween a.text-mb-red,
body.theme-halloween .hover\:text-mb-red:hover {
    color: #ea580c;
}

body.theme-summer a.text-mb-red,
body.theme-summer .hover\:text-mb-red:hover {
    color: #ca8a04;
}

body.theme-autumn a.text-mb-red,
body.theme-autumn .hover\:text-mb-red:hover {
    color: #9a3412;
}

body.theme-luxury a.text-mb-red,
body.theme-luxury .hover\:text-mb-red:hover {
    color: #b8860b;
}

body.theme-martisor a.text-mb-red,
body.theme-martisor .hover\:text-mb-red:hover {
    color: #b91c1c;
}

/* Base styles */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f9fafb;
    min-height: 100vh;
}

body.cart-open,
body.modal-open {
    overflow: hidden;
}

/* Cart Sidebar */
.cart-sidebar {
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    width: var(--cart-width);
    max-width: 100vw;
}

.cart-sidebar.open {
    transform: translateX(0);
}

@media (max-width: 640px) {
    .cart-sidebar {
        width: 100vw;
    }
}

/* Cart Overlay */
.cart-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.cart-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Modal */
.modal-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    transform: scale(0.95);
    opacity: 0;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.modal-overlay.visible .modal-content {
    transform: scale(1);
    opacity: 1;
}

/* Product Card */
.product-card {
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.product-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* Add to Cart Button Animation - Pulse & Bounce */
@keyframes addToCartPulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.2); }
    50% { transform: scale(0.95); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes addToCartSuccess {
    0% { background-color: #fc0303; }
    50% { background-color: #22c55e; }
    100% { background-color: #fc0303; }
}

.btn-add-cart.adding,
.btn-increase.adding {
    animation: addToCartPulse 0.4s ease-out, addToCartSuccess 0.4s ease-out;
}

/* Quantity controls adding animation */
.quantity-controls.adding {
    animation: addToCartPulse 0.3s ease-out;
}

/* Checkout Button Gradient Shift + Border Animation */
@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.btn-checkout-glow {
    background: linear-gradient(90deg, var(--mb-red), var(--mb-accent), var(--mb-red));
    background-size: 200% 100%;
    animation: gradientShift 3s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-checkout-glow:hover {
    background: linear-gradient(90deg, var(--mb-red-dark), var(--mb-accent), var(--mb-red-dark));
    background-size: 200% 100%;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Cart Badge Bounce */
@keyframes badgeBounce {
    0% { transform: scale(1); }
    25% { transform: scale(1.5); }
    50% { transform: scale(0.9); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.cart-badge.updated {
    animation: badgeBounce 0.5s ease-out;
}

/* Cart button shake when item added */
@keyframes cartShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

#open-cart-btn.shake {
    animation: cartShake 0.4s ease-out;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Category Pills */
.category-pill {
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.category-pill:hover {
    background-color: rgba(252, 3, 3, 0.1);
}

.category-pill.active {
    background-color: var(--mb-red);
    color: white;
    border-color: var(--mb-red);
}

/* Accordion */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal) ease-out;
}

.accordion-section.open .accordion-content {
    max-height: 1000px;
}

.accordion-chevron {
    transition: transform var(--transition-fast);
}

.accordion-section.open .accordion-chevron {
    transform: rotate(180deg);
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    transform: translateY(-100%);
    opacity: 0;
    transition: all var(--transition-normal);
}

.toast.visible {
    transform: translateY(0);
    opacity: 1;
}

/* Image Gallery */
.gallery-thumbnail {
    opacity: 0.6;
    transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.gallery-thumbnail:hover,
.gallery-thumbnail.active {
    opacity: 1;
}

.gallery-thumbnail.active {
    border-color: var(--mb-red);
}

/* Quantity Controls */
.quantity-btn {
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.quantity-btn:hover {
    background-color: var(--mb-red);
    color: white;
}

.quantity-btn:active {
    transform: scale(0.95);
}

/* Form Inputs */
.form-input {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
    border-color: var(--mb-red);
    box-shadow: 0 0 0 3px rgba(252, 3, 3, 0.1);
    outline: none;
}

.form-input.error {
    border-color: #ef4444;
}

.form-input.error:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    outline: none;
}

.form-input.valid {
    border-color: #22c55e;
}

.form-input.valid:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    outline: none;
}

/* Validation icon (checkmark/X) inside input */
.field-validation-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
}

.field-validation-icon.visible {
    opacity: 1;
}

/* Error summary banner on submit */
.error-summary-banner {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    animation: errorBannerSlide 0.3s ease;
}

.error-summary-banner ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
}

.error-summary-banner li {
    color: #dc2626;
    font-size: 0.8125rem;
    padding: 0.2rem 0;
    cursor: pointer;
}

.error-summary-banner li:hover {
    text-decoration: underline;
}

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

/* Warning text for phone validation */
.field-warning-text {
    color: #d97706;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Date Picker */
.date-cell {
    transition: all var(--transition-fast);
}

.date-cell.selected {
    background-color: var(--mb-accent, var(--mb-red)) !important;
    color: white;
}

.date-cell.selected span,
.date-cell.selected div {
    color: white !important;
}

.date-cell.selected > div {
    border-color: white !important;
}

/* Time Slot */
.time-slot {
    transition: all var(--transition-fast);
}

.time-slot:hover:not(.disabled) {
    border-color: var(--mb-accent, var(--mb-red));
    background-color: var(--mb-bg-accent, rgba(252, 3, 3, 0.05));
}

.time-slot.selected {
    background-color: var(--mb-accent, var(--mb-red));
    color: white;
    border-color: var(--mb-accent, var(--mb-red));
}

.time-slot.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Payment Method Cards */
.payment-option {
    transition: all var(--transition-fast);
}

.payment-option:hover {
    border-color: var(--mb-accent, var(--mb-red));
}

.payment-option.selected {
    border-color: var(--mb-accent, var(--mb-red));
    background-color: var(--mb-bg-accent, rgba(252, 3, 3, 0.05));
}

.payment-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.payment-option.disabled:hover {
    border-color: #d1d5db;
}

.payment-disabled-message {
    display: none;
    padding: 0.75rem 1rem;
    background-color: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #92400e;
}

.payment-disabled-message.visible {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Hide scrollbar on horizontal scroll containers */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Loading spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--mb-red);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Responsive utilities */
@media (max-width: 640px) {
    :root {
        --header-height: 64px;
    }

    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 641px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Product Card Image Carousel */
.card-image-container .carousel-arrow {
    opacity: 0;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

.card-image-container:hover .carousel-arrow {
    opacity: 1;
}

.carousel-arrow:hover {
    background-color: white;
}

/* Card image carousel push-slide transition */
.card-images-track {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 0.4s ease;
}

.card-images-track .card-main-image,
.card-images-track .card-incoming-image {
    width: 50%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.card-images-track.slide-left {
    transform: translateX(-50%);
}

.card-images-track.no-transition {
    transition: none;
}

.carousel-dots span {
    transition: background-color var(--transition-fast);
}

/* Expandable Product Details */
.expandable-details .expand-icon {
    transition: transform var(--transition-fast);
}

.expandable-details .details-content.hidden {
    display: none;
}

.expandable-details .details-content {
    animation: fadeIn 0.2s ease;
}

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

/* Product card entrance animation */
@keyframes cardFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.product-card-hidden,
.product-card-animate {
    opacity: 0;
}

.product-card-animate {
    animation: cardFadeInUp 0.5s ease forwards;
}

@media (max-width: 640px) {
    .product-card-animate {
        animation-name: cardFadeIn;
    }
}

/* Line clamp for descriptions */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* VIP Toggle Switch */
.vip-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Gift order section */
#gift-fields {
    transition: all var(--transition-normal);
}

/* Checkbox styling */
input[type="checkbox"] {
    accent-color: var(--mb-red);
}

/* Accordion step numbers */
.accordion-section.open .w-10.bg-gray-300 {
    background-color: var(--mb-red);
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* București Unavailable State - Hide all shopping elements */
body.bucuresti-unavailable #search-input,
body.bucuresti-unavailable .flex-1:has(#search-input),
body.bucuresti-unavailable #open-cart-btn,
body.bucuresti-unavailable #header-checkout-desktop,
body.bucuresti-unavailable #header-checkout-bar,
body.bucuresti-unavailable #product-grid,
body.bucuresti-unavailable #loading-indicator,
body.bucuresti-unavailable #cart-summary-bar,
body.bucuresti-unavailable #cart-sidebar,
body.bucuresti-unavailable #cart-overlay,
body.bucuresti-unavailable #scroll-top-btn,
body.bucuresti-unavailable #toast-container,
body.bucuresti-unavailable footer,
body.bucuresti-unavailable section.bg-gray-50 {
    display: none !important;
    visibility: hidden !important;
}