/* ============================================
   TEMPLATE SELECTION GRID & CARDS
   ============================================ */

.template-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* 3D Modern Template Card */
.template-card-modern {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 20px;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.template-card-modern:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #fbbf24;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5), 0 0 20px rgba(251, 191, 36, 0.2);
}

.template-card-modern.selected {
    border: 2px solid #fbbf24;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.1), 0 20px 40px -10px rgba(0,0,0,0.6);
    transform: translateY(-4px);
}

/* Selected Indicator Badge */
.selected-indicator {
    position: absolute;
    top: -12px;
    right: -12px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4);
    border: 3px solid #0f172a;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.selected-indicator svg {
    width: 16px;
    height: 16px;
}

@keyframes popIn {
    0% { transform: scale(0) rotate(-45deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Realistic Phone Preview Area */
.template-preview-screen {
    padding: 30px 20px 0;
    background: radial-gradient(circle at top, #334155 0%, #1e293b 100%);
    border-radius: 19px 19px 0 0;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Soft glow behind the phone */
.template-preview-screen::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: var(--card-primary-glow, rgba(255,255,255,0.1));
    filter: blur(40px);
    border-radius: 50%;
    z-index: 0;
    transition: background 0.3s;
}

.template-card-modern:hover .template-preview-screen::before {
    filter: blur(50px);
    width: 180px;
}

/* The Phone Frame */
.phone-frame {
    width: 160px;
    height: 320px;
    background: #000;
    border-radius: 24px 24px 0 0;
    padding: 6px 6px 0 6px;
    position: relative;
    z-index: 10;
    box-shadow: 
        inset 0 0 0 1px #475569, /* metal edge */
        0 15px 35px rgba(0,0,0,0.4), /* drop shadow */
        0 5px 15px rgba(0,0,0,0.5); /* close shadow */
    transition: transform 0.4s ease;
    border-bottom: none;
}

.template-card-modern:hover .phone-frame {
    transform: translateY(-5px);
}

/* Phone Notch/Dynamic Island */
.phone-frame::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 14px;
    background: #000;
    border-radius: 0 0 10px 10px;
    z-index: 30;
}

/* The Screen Inside */
.phone-screen {
    width: 100%;
    height: 100%;
    background: #0f172a;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Glass reflection effect */
}

.phone-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        rgba(255,255,255,0.1) 0%,
        rgba(255,255,255,0.02) 40%,
        transparent 50%
    );
    pointer-events: none;
    z-index: 20;
    transform: rotate(15deg) translateY(-20px);
}

/* Screen Content UI Simulation */
.screen-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px 10px 10px;
    z-index: 10;
}

.screen-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.screen-logo {
    font-size: 16px;
    background: rgba(255,255,255,0.1);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.screen-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.screen-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Horizontal List Item Mockup */
.screen-item {
    background: #1e293b;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.item-image {
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.item-details {
    flex: 1;
}

.item-name {
    font-size: 8px;
    font-weight: 600;
    margin-bottom: 3px;
    color: #f1f5f9;
}

.item-price {
    font-size: 8px;
    font-weight: 700;
}

.screen-button {
    margin-top: auto;
    width: 100%;
    padding: 8px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Card Info Section */
.template-info-modern {
    padding: 24px;
    border-top: 1px solid #334155;
    background: #1e293b;
    border-radius: 0 0 19px 19px;
}

.template-name-modern {
    font-size: 18px;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.template-badge-modern {
    font-size: 10px;
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.template-desc-modern {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.5;
    margin-bottom: 16px;
}

/* Color Dots */
.template-colors-modern {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.color-dot-wrapper {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.2s;
}

.color-dot-wrapper:hover {
    transform: scale(1.15);
}

.color-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border: none;
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.color-dot::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-dot::-webkit-color-swatch {
    border: none;
}

.color-dot-hint {
    font-size: 10px;
    color: #64748b;
    margin-bottom: 16px;
    font-style: italic;
}

/* Features */
.template-features-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-tag {
    font-size: 11px;
    background: #0f172a;
    color: #cbd5e1;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #334155;
    font-weight: 500;
}

/* ============================================
   RESTAURANT TEMPLATES - ACTUAL STYLES
   ============================================ */

/* General Light Background for Storefront Pages Only */
body.page-storefront[class*="template-"] {
    background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%) !important;
    color: #212529 !important;
}

/* Topbar */
body.page-storefront[class*="template-"] .topbar {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.page-storefront[class*="template-"] .topbar .logo-orb {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Headings */
body.page-storefront[class*="template-"] .hero-title,
body.page-storefront[class*="template-"] h1,
body.page-storefront[class*="template-"] h2,
body.page-storefront[class*="template-"] h3,
body.page-storefront[class*="template-"] h4 {
    color: #212529 !important;
    -webkit-text-fill-color: #212529 !important;
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

/* Text & Paragraphs */
body.page-storefront[class*="template-"] p,
body.page-storefront[class*="template-"] span,
body.page-storefront[class*="template-"] div,
body.page-storefront[class*="template-"] label,
body.page-storefront[class*="template-"] .category-nav-name {
    color: #495057 !important;
}

/* Announcement Box */
body.page-storefront[class*="template-"] .hero-main p {
    color: #495057 !important;
}

/* Cards & Containers */
body.page-storefront[class*="template-"] .menu-category,
body.page-storefront[class*="template-"] .item-card,
body.page-storefront[class*="template-"] .feature-card,
body.page-storefront[class*="template-"] .menu-item-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Checkout Form */
body.page-storefront[class*="template-"] .bg-slate-900,
body.page-storefront[class*="template-"] form > div {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body.page-storefront[class*="template-"] .bg-slate-800,
body.page-storefront[class*="template-"] input,
body.page-storefront[class*="template-"] textarea {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
}

body.page-storefront[class*="template-"] input::placeholder,
body.page-storefront[class*="template-"] textarea::placeholder {
    color: #6c757d !important;
}

/* Text Colors Override */
body.page-storefront[class*="template-"] .text-slate-100,
body.page-storefront[class*="template-"] .text-slate-200,
body.page-storefront[class*="template-"] .text-slate-300 {
    color: #495057 !important;
}

body.page-storefront[class*="template-"] .text-slate-400,
body.page-storefront[class*="template-"] .text-slate-500,
body.page-storefront[class*="template-"] .text-slate-600 {
    color: #6c757d !important;
}

/* Pills & Buttons */
body.page-storefront[class*="template-"] .pill {
    color: #495057 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.page-storefront[class*="template-"] .pill:hover {
    background: #ffffff !important;
}

/* Price Display */
body.page-storefront[class*="template-"] .item-price {
    color: #212529 !important;
    font-weight: 700;
}

/* Item Name in Cards */
body.page-storefront[class*="template-"] .menu-item-card h3 {
    color: #212529 !important;
}

/* Success Message */
body.page-storefront[class*="template-"] .bg-emerald-500\/10 {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

body.page-storefront[class*="template-"] .text-emerald-200 {
    color: #059669 !important;
}

/* Modern Template - Default */
body.template-modern .hero-main,
body.template-modern .menu-category {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

body.template-modern .category-nav-item.active,
body.template-modern .feature-card:hover {
    border-color: #667eea;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

body.template-modern .btn-cta {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

body.template-modern .promo-bar {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
}

/* Classic Template */
body.template-classic {
    font-family: 'Georgia', serif;
}

body.template-classic .hero-title {
    font-family: 'Georgia', serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

body.template-classic .category-nav-name {
    font-family: 'Georgia', serif;
}

body.template-classic .hero-main,
body.template-classic .menu-category {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.05) 0%, rgba(52, 73, 94, 0.05) 100%);
}

body.template-classic .category-nav-item.active,
body.template-classic .feature-card:hover {
    border-color: #34495e;
    box-shadow: 0 8px 20px rgba(52, 73, 94, 0.3);
}

body.template-classic .btn-cta {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.template-classic .promo-bar {
    background: linear-gradient(135deg, #2c3e50, #34495e) !important;
}

/* Minimal Template */
body.template-minimal {
    background: #fafafa;
}

body.template-minimal .topbar {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #e0e0e0;
}

body.template-minimal .hero-main {
    background: #ffffff;
}

body.template-minimal .feature-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

body.template-minimal .category-nav-item.active {
    background: #f5f5f5;
    border-color: #333;
    color: #333;
}

body.template-minimal .btn-cta {
    background: #333;
}

body.template-minimal .promo-bar {
    background: #333 !important;
}

/* Bold Template */
body.template-bold .hero-main,
body.template-bold .menu-category {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.08) 0%, rgba(238, 90, 111, 0.08) 100%);
}

body.template-bold .category-nav-item.active,
body.template-bold .feature-card:hover {
    border-color: #ff6b6b;
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
}

body.template-bold .btn-cta {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
}

body.template-bold .hero-title {
    font-weight: 900;
}

body.template-bold .promo-bar {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f) !important;
}

/* Elegant Template */
body.template-elegant {
    font-family: 'Cairo', sans-serif;
}

body.template-elegant .hero-main {
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.05) 0%, rgba(192, 57, 43, 0.05) 100%);
}

body.template-elegant .category-nav-item.active,
body.template-elegant .feature-card:hover {
    border-color: #8e44ad;
    box-shadow: 0 8px 20px rgba(142, 68, 173, 0.3);
}

body.template-elegant .btn-cta {
    background: linear-gradient(135deg, #8e44ad, #c0392b);
}

body.template-elegant .promo-bar {
    background: linear-gradient(135deg, #8e44ad, #c0392b) !important;
}

/* Foodie Template */
body.template-foodie .hero-main,
body.template-foodie .menu-category {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.05) 0%, rgba(230, 126, 34, 0.05) 100%);
}

body.template-foodie .category-nav-item.active,
body.template-foodie .feature-card:hover {
    border-color: #f39c12;
    box-shadow: 0 8px 20px rgba(243, 156, 18, 0.3);
}

body.template-foodie .btn-cta {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

body.template-foodie .promo-bar {
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
}

/* Fast Food Template */
body.template-fastfood .hero-main,
body.template-fastfood .menu-category {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.05) 0%, rgba(192, 57, 43, 0.05) 100%);
}

body.template-fastfood .category-nav-item.active,
body.template-fastfood .feature-card:hover {
    border-color: #e74c3c;
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.3);
}

body.template-fastfood .btn-cta {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

body.template-fastfood .promo-bar {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
}

/* Cafe Template */
body.template-cafe {
    background: #f5f1ed;
}

body.template-cafe .hero-main,
body.template-cafe .menu-category {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.05) 0%, rgba(210, 105, 30, 0.05) 100%);
}

body.template-cafe .category-nav-item.active,
body.template-cafe .feature-card:hover {
    border-color: #8b4513;
    box-shadow: 0 8px 20px rgba(139, 69, 19, 0.3);
}

body.template-cafe .btn-cta {
    background: linear-gradient(135deg, #8b4513, #d2691e);
}

body.template-cafe .promo-bar {
    background: linear-gradient(135deg, #8b4513, #d2691e) !important;
}

/* Seafood Template */
body.template-seafood .hero-main,
body.template-seafood .menu-category {
    background: linear-gradient(135deg, rgba(0, 119, 190, 0.05) 0%, rgba(0, 168, 232, 0.05) 100%);
}

body.template-seafood .category-nav-item.active,
body.template-seafood .feature-card:hover {
    border-color: #0077be;
    box-shadow: 0 8px 20px rgba(0, 119, 190, 0.3);
}

body.template-seafood .btn-cta {
    background: linear-gradient(135deg, #0077be, #00a8e8);
}

body.template-seafood .promo-bar {
    background: linear-gradient(135deg, #0077be, #00a8e8) !important;
}

/* Pizza Template */
body.template-pizza .hero-main,
body.template-pizza .menu-category {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.05) 0%, rgba(34, 153, 84, 0.05) 100%);
}

body.template-pizza .category-nav-item.active,
body.template-pizza .feature-card:hover {
    border-color: #27ae60;
    box-shadow: 0 8px 20px rgba(39, 174, 96, 0.3);
}

body.template-pizza .btn-cta {
    background: linear-gradient(135deg, #27ae60, #229954);
}

body.template-pizza .promo-bar {
    background: linear-gradient(135deg, #27ae60, #229954) !important;
}

/* Asian Template */
body.template-asian .hero-main,
body.template-asian .menu-category {
    background: linear-gradient(135deg, rgba(192, 57, 43, 0.05) 0%, rgba(142, 68, 173, 0.05) 100%);
}

body.template-asian .category-nav-item.active,
body.template-asian .feature-card:hover {
    border-color: #c0392b;
    box-shadow: 0 8px 20px rgba(192, 57, 43, 0.3);
}

body.template-asian .btn-cta {
    background: linear-gradient(135deg, #c0392b, #8e44ad);
}

body.template-asian .promo-bar {
    background: linear-gradient(135deg, #c0392b, #8e44ad) !important;
}

/* Dessert Template */
body.template-dessert {
    background: linear-gradient(135deg, #ffe5f0 0%, #fff0f8 100%);
}

body.template-dessert .hero-main,
body.template-dessert .menu-category {
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.05) 0%, rgba(255, 20, 147, 0.05) 100%);
}

body.template-dessert .category-nav-item.active,
body.template-dessert .feature-card:hover {
    border-color: #ff69b4;
    box-shadow: 0 8px 20px rgba(255, 105, 180, 0.3);
}

body.template-dessert .btn-cta {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
}

body.template-dessert .promo-bar {
    background: linear-gradient(135deg, #ff69b4, #ff1493) !important;
}

/* Healthy Template */
body.template-healthy {
    background: #f0f8f4;
}

body.template-healthy .hero-main,
body.template-healthy .menu-category {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.05) 0%, rgba(26, 188, 156, 0.05) 100%);
}

body.template-healthy .category-nav-item.active,
body.template-healthy .feature-card:hover {
    border-color: #27ae60;
    box-shadow: 0 8px 20px rgba(39, 174, 96, 0.3);
}

body.template-healthy .btn-cta {
    background: linear-gradient(135deg, #27ae60, #1abc9c);
}

body.template-healthy .promo-bar {
    background: linear-gradient(135deg, #27ae60, #1abc9c) !important;
}

/* Grill Template */
body.template-grill .hero-main,
body.template-grill .menu-category {
    background: linear-gradient(135deg, rgba(121, 85, 72, 0.05) 0%, rgba(93, 64, 55, 0.05) 100%);
}

body.template-grill .category-nav-item.active,
body.template-grill .feature-card:hover {
    border-color: #795548;
    box-shadow: 0 8px 20px rgba(121, 85, 72, 0.3);
}

body.template-grill .btn-cta {
    background: linear-gradient(135deg, #795548, #5d4037);
}

body.template-grill .promo-bar {
    background: linear-gradient(135deg, #795548, #5d4037) !important;
}
/* ============================================
   OVERRIDE DARK BACKGROUND ELEMENTS
   ============================================ */

/* Hide dark tech background elements from app.css in storefront pages only */
body.page-storefront[class*="template-"]::before,
body.page-storefront[class*="template-"]::after {
    display: none !important;
}

body.page-storefront[class*="template-"] .tech-particles,
body.page-storefront[class*="template-"] .circuit-lines,
body.page-storefront[class*="template-"] .glow-orb,
body.page-storefront[class*="template-"] .hexagon-deco,
body.page-storefront[class*="template-"] .tech-corner,
body.page-storefront[class*="template-"] .data-stream,
body.page-storefront[class*="template-"] .bg-ambient {
    display: none !important;
}

/* Ensure text is readable on light background */
body.page-storefront[class*="template-"] .text-slate-100,
body.page-storefront[class*="template-"] .text-slate-200,
body.page-storefront[class*="template-"] .text-slate-300 {
    color: #495057 !important;
}

body.page-storefront[class*="template-"] .text-slate-400,
body.page-storefront[class*="template-"] .text-slate-500 {
    color: #6c757d !important;
}

/* Category navigation styling for light theme */
body.page-storefront[class*="template-"] .categories-nav {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

body.page-storefront[class*="template-"] .category-nav-item {
    background: #ffffff;
    border: 2px solid #e9ecef;
    color: #495057;
}

body.page-storefront[class*="template-"] .category-nav-item:hover {
    border-color: #dee2e6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body.page-storefront[class*="template-"] .category-nav-item.active {
    border-color: var(--accent, #f59e0b);
    background: rgba(245, 158, 11, 0.05);
}

/* Item cards styling for light theme */
body.page-storefront[class*="template-"] .item-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.page-storefront[class*="template-"] .item-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Price and button styling */
body.page-storefront[class*="template-"] .item-price {
    color: #212529 !important;
    font-weight: 700;
}

body.page-storefront[class*="template-"] .add-to-cart-btn,
body.page-storefront[class*="template-"] .checkout-btn {
    background: var(--accent, #f59e0b);
    color: #ffffff;
}

body.page-storefront[class*="template-"] .add-to-cart-btn:hover,
body.page-storefront[class*="template-"] .checkout-btn:hover {
    opacity: 0.9;
}

/* ============================================
   ADDITIONAL OVERRIDES FOR INLINE STYLES
   ============================================ */

/* Buttons Override */
body.page-storefront[class*="template-"] .btn,
body.page-storefront[class*="template-"] .btn-secondary,
body.page-storefront[class*="template-"] .btn-cta,
body.page-storefront[class*="template-"] .btn-accent,
body.page-storefront[class*="template-"] button[type="submit"] {
    color: #ffffff !important;
}

body.page-storefront[class*="template-"] .btn-secondary {
    background: #6c757d !important;
}

body.page-storefront[class*="template-"] .btn-cta {
    background: var(--accent, #f59e0b) !important;
}

/* Category Header Gradient Text Fix */
body.page-storefront[class*="template-"] .menu-category h2 {
    color: #212529 !important;
    -webkit-text-fill-color: #212529 !important;
    background: none !important;
}

/* SVG Icons Color */
body.page-storefront[class*="template-"] svg {
    color: inherit !important;
}

/* Empty State Text */
body.page-storefront[class*="template-"] .text-2xl,
body.page-storefront[class*="template-"] .text-xl,
body.page-storefront[class*="template-"] .text-lg {
    color: #212529 !important;
}

/* Hero Section Background */
body.page-storefront[class*="template-"] .hero-main {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Border Colors */
body.page-storefront[class*="template-"] .border-slate-700,
body.page-storefront[class*="template-"] .border-slate-800 {
    border-color: #dee2e6 !important;
}

/* Category Navigation Icon Background */
body.page-storefront[class*="template-"] .category-nav-icon {
    background: #ffffff !important;
}