/* ============================================
   RED THEME - CSS Variable Overrides
   (--accent, --accent-hover, --accent-light are set
    by JS inline; only additional vars here)
   ============================================ */
[data-theme="red"] {
  --accent-rgb: 220, 38, 38;
  --info: #ef4444;
  --info-light: var(--accent-light);
  --shadow-blue: 0 4px 14px rgba(var(--accent-rgb), 0.3);
  --blueprint: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23DC2626' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================
   RED THEME - Component Overrides
   For places where CSS uses hardcoded blue values
   ============================================ */

/* Buttons */
[data-theme="red"] .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.25);
}
[data-theme="red"] .btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), #991b1b);
  box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.4);
}
[data-theme="red"] .btn-gradient {
  background: linear-gradient(135deg, var(--accent), #e11d48);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
}
[data-theme="red"] .btn-gradient:hover {
  background: linear-gradient(135deg, var(--accent-hover), #be123c);
  box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.45);
}
[data-theme="red"] .btn-accent-outline {
  color: var(--accent);
  border-color: var(--accent);
}
[data-theme="red"] .btn-accent-outline:hover {
  background: var(--accent);
  box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.3);
}

/* Hero - blue text gradient */
[data-theme="red"] .hero-text h1 .highlight {
  background: linear-gradient(135deg, var(--accent), #f87171);
  -webkit-background-clip: text;
  background-clip: text;
}
[data-theme="red"] .hero-badge {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
[data-theme="red"] .hero-badge .pulse-dot {
  background: var(--accent);
}
[data-theme="red"] .hero-shape-1 {
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
}

/* Navbar */
[data-theme="red"] .nav-link::after { background: var(--accent); }
[data-theme="red"] .header-action-btn .badge { background: var(--accent); }

/* Clock */
[data-theme="red"] .nav-clock {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.15);
}
[data-theme="red"] .nav-clock i { color: #f87171; }
[data-theme="red"] .nav-clock .nav-clock-time { color: #f87171; }
[data-theme="red"] .nav-clock:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* Sections */
[data-theme="red"] .section-title h2::after {
  background: linear-gradient(90deg, var(--accent), #111827);
}
[data-theme="red"] .section-label { background: var(--accent-light); color: var(--accent); }
[data-theme="red"] .feature-icon {
  background: var(--accent-light);
  color: var(--accent);
}
[data-theme="red"] .feature-item:hover .feature-icon {
  background: var(--accent);
}
[data-theme="red"] .product-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 30px 80px rgba(var(--accent-rgb),0.08);
}
[data-theme="red"] .product-card::before {
  background: linear-gradient(90deg, var(--accent), #f87171, var(--accent));
}
[data-theme="red"] .product-card::after {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.02), transparent, rgba(var(--accent-rgb),0.01));
}
[data-theme="red"] .product-title:hover { color: var(--accent); }
[data-theme="red"] .product-brand { color: var(--accent); }
[data-theme="red"] .product-badge.sale {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}
[data-theme="red"] .category-card:hover { border-color: var(--accent); }
[data-theme="red"] .category-explore { color: var(--accent); }
[data-theme="red"] .carousel-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
}

/* Why Choose */
[data-theme="red"] .why-choose-card:hover { border-color: var(--accent); }
[data-theme="red"] .why-choose-card::after {
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.03) 0%, transparent 50%);
}
[data-theme="red"] .why-choose-icon {
  background: var(--accent-light);
  color: var(--accent);
}
[data-theme="red"] .why-choose-card:hover .why-choose-icon {
  background: var(--accent);
}
[data-theme="red"] .why-choose-card::before {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.02), transparent);
}
[data-theme="red"] .why-choose-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 30px 80px rgba(var(--accent-rgb),0.06);
}

/* Concrete pipes */
[data-theme="red"] .concrete-pipes-text .highlight-text {
  background: linear-gradient(135deg, #f87171, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
}
[data-theme="red"] .cp-stat-number { color: #f87171; }
[data-theme="red"] .cp-feature-icon {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: #f87171;
}
[data-theme="red"] .concrete-pipes-feature:hover {
  border-color: rgba(var(--accent-rgb), 0.2);
}
[data-theme="red"] .concrete-pipes-feature:hover .cp-feature-icon {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.4);
}
[data-theme="red"] .concrete-pipes-video-glow {
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb),0.08) 0%, transparent 60%);
}
[data-theme="red"] .concrete-pipes-video-wrapper {
  box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 80px rgba(var(--accent-rgb),0.06);
}
[data-theme="red"] .concrete-pipes-badge {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.08));
  border-color: rgba(var(--accent-rgb), 0.25);
  color: #f87171;
}

/* FAQ */
[data-theme="red"] .faq-item:hover { border-color: var(--accent); box-shadow: 0 4px 20px rgba(var(--accent-rgb),0.04); }
[data-theme="red"] .faq-item.active { border-color: var(--accent); box-shadow: 0 8px 30px rgba(var(--accent-rgb),0.08); }
[data-theme="red"] .faq-question:hover { color: var(--accent); }
[data-theme="red"] .faq-item.active .faq-icon { color: var(--accent); }
[data-theme="red"] .faq-form-card::before {
  background: linear-gradient(90deg, var(--accent), #f87171, var(--accent));
}
[data-theme="red"] .faq-form-card:hover { border-color: var(--accent); box-shadow: 0 20px 40px rgba(var(--accent-rgb),0.08), 0 30px 80px rgba(var(--accent-rgb),0.04); }
[data-theme="red"] .faq-form-icon {
  background: linear-gradient(135deg, var(--accent-light), #fecaca);
  color: var(--accent);
}
[data-theme="red"] .faq-form-card:hover .faq-form-icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
}
[data-theme="red"] .faq-form-input-wrap input:focus,
[data-theme="red"] .faq-form-input-wrap select:focus,
[data-theme="red"] .faq-form-input-wrap textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.08);
}

/* Footer */
[data-theme="red"] .footer::before {
  background: linear-gradient(90deg, var(--accent), #111827, var(--accent));
}
[data-theme="red"] .footer-contact-item i { color: var(--accent); }
[data-theme="red"] .social-link:hover {
  background: var(--accent);
  border-color: var(--accent);
}
[data-theme="red"] .footer-col h4::after { background: var(--accent); }
[data-theme="red"] .footer-col ul li a:hover { color: var(--accent); }
[data-theme="red"] .footer-bottom-links a:hover { color: var(--accent); }
[data-theme="red"] .footer-newsletter-form button { background: var(--accent); }
[data-theme="red"] .footer-newsletter-form button:hover { background: var(--accent-hover); }

/* Reviews */
[data-theme="red"] .review-card:hover { border-color: var(--accent); }
[data-theme="red"] .review-card::before { background: linear-gradient(90deg, var(--accent), #f87171, transparent); }
[data-theme="red"] .review-avatar { background: var(--accent); }

/* Promo banner */
[data-theme="red"] .promo-badge {
  background: rgba(var(--accent-rgb), 0.2);
  color: #f87171;
}
[data-theme="red"] .promo-banner-text .promo-highlight { color: var(--accent); }
[data-theme="red"] .promo-discount-circle {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 20px 40px rgba(var(--accent-rgb), 0.3);
}

/* Modal */
[data-theme="red"] .modal-content { border-top-color: var(--accent); }
[data-theme="red"] .toast { border-left-color: var(--accent); }

/* Scroll to top */
[data-theme="red"] .scroll-to-top { background: var(--accent); }
[data-theme="red"] .scroll-to-top:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
}

/* Shop / filters */
[data-theme="red"] .breadcrumb a { color: var(--accent); }
[data-theme="red"] .filter-option input[type="checkbox"],
[data-theme="red"] .filter-option input[type="radio"] { accent-color: var(--accent); }
[data-theme="red"] .sort-select:focus { border-color: var(--accent); }
[data-theme="red"] .filter-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="red"] .view-btn.active, [data-theme="red"] .view-btn:hover { color: var(--accent); }
[data-theme="red"] .page-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="red"] .page-btn.active { background: var(--accent); border-color: var(--accent); }
[data-theme="red"] .thumbnail:hover, [data-theme="red"] .thumbnail.active { border-color: var(--accent); }
[data-theme="red"] .option-btn:hover, [data-theme="red"] .option-btn.active { border-color: var(--accent); color: var(--accent); }
[data-theme="red"] .color-swatch:hover, [data-theme="red"] .color-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent);
}
[data-theme="red"] .cart-item:hover { border-color: var(--accent); }
[data-theme="red"] .promo-code input:focus { border-color: var(--accent); }
[data-theme="red"] .form-group input:focus,
[data-theme="red"] .form-group select:focus,
[data-theme="red"] .form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}
[data-theme="red"] .payment-method-option:hover { border-color: var(--accent); }
[data-theme="red"] .payment-method-option.selected { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.04); }
[data-theme="red"] .payment-method-option input[type="radio"] { accent-color: var(--accent); }
[data-theme="red"] .contact-info-item:hover { border-color: var(--accent); }
[data-theme="red"] .contact-icon { background: rgba(var(--accent-rgb), 0.06); color: var(--accent); }
[data-theme="red"] .stat-number { color: var(--accent); }

/* Blog - comprehensive overrides */
[data-theme="red"] .blog-card:hover { border-color: var(--accent); }
[data-theme="red"] .blog-category { background: var(--accent-light); color: var(--accent); }
[data-theme="red"] .blog-read-more { color: var(--accent); }
[data-theme="red"] .blog-card-read { color: var(--accent) !important; }
/* Recipe card overrides */
[data-theme="red"] .recipe-card:hover { box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.12); border-color: var(--accent); }
[data-theme="red"] .recipe-card aside .button { background: var(--accent); }
[data-theme="red"] .recipe-card article h3 { color: var(--accent); }
[data-theme="red"] .recipe-card aside .button:hover { box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.3); }
/* Blog page inline style overrides */
[data-theme="red"] .blog-hero::before {
  background: radial-gradient(circle at 30% 50%, rgba(var(--accent-rgb),0.08) 0%, transparent 60%),
              radial-gradient(circle at 70% 50%, rgba(var(--accent-rgb),0.06) 0%, transparent 60%) !important;
}
[data-theme="red"] .blog-hero h1 span {
  background: linear-gradient(135deg, #f87171, var(--accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
[data-theme="red"] .blog-card-author-avatar {
  background: linear-gradient(135deg, var(--accent), #f87171) !important;
}
[data-theme="red"] .blog-modal-category {
  background: rgba(var(--accent-rgb), 0.1) !important;
  color: var(--accent) !important;
}
[data-theme="red"] .blog-modal-author-avatar {
  background: linear-gradient(135deg, var(--accent), #f87171) !important;
}
[data-theme="red"] .blog-newsletter::before {
  background: radial-gradient(circle at 30% 70%, rgba(var(--accent-rgb),0.1) 0%, transparent 50%) !important;
}
[data-theme="red"] .blog-search-bar button {
  background: var(--accent) !important;
}
[data-theme="red"] .blog-search-bar button:hover {
  background: var(--accent-hover) !important;
}
[data-theme="red"] .blog-filter-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
[data-theme="red"] .blog-filter-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
[data-theme="red"] .blog-page-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
[data-theme="red"] .blog-page-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
[data-theme="red"] .blog-newsletter-form button {
  background: var(--accent) !important;
}
[data-theme="red"] .blog-newsletter-form button:hover {
  background: var(--accent-hover) !important;
}
[data-theme="red"] .blog-featured-card .blog-card-body span[style*="rgba(59,130,246,0.1)"] {
  background: rgba(var(--accent-rgb), 0.1) !important;
  color: var(--accent) !important;
}
/* Inline featured badge rendered via JS */
[data-theme="red"] .blog-modal-body .blog-modal-category {
  background: rgba(var(--accent-rgb), 0.1) !important;
  color: var(--accent) !important;
}

/* Tabs */
[data-theme="red"] .tab-btn:hover { color: var(--accent); }
[data-theme="red"] .tab-btn.active { color: var(--accent); }
[data-theme="red"] .tab-btn.active::after { background: var(--accent); }

/* Spinner */
[data-theme="red"] .spinner { border-top-color: var(--accent); }

/* Wishlist */
[data-theme="red"] .product-wishlist:hover { background: var(--accent); }

/* Accordion / status */
[data-theme="red"] .status-badge.pending { background: var(--accent-light); color: var(--accent); }

/* About page overrides */
[data-theme="red"] .about-hero-badge {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
[data-theme="red"] .about-contact-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.25);
}
[data-theme="red"] .about-contact-btn:hover {
  background: linear-gradient(135deg, var(--accent-hover), #991b1b);
  box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.4);
}

/* Concrete pipes section BG */
[data-theme="red"] .concrete-pipes-section::before {
  background-image: 
    linear-gradient(rgba(var(--accent-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.04) 1px, transparent 1px);
}

/* Promo banner section BG */
[data-theme="red"] .promo-banner-section .promo-highlight {
  color: var(--accent);
}

/* Hero section overlay */
[data-theme="red"] .hero-overlay {
  background-image: 
    linear-gradient(rgba(var(--accent-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.03) 1px, transparent 1px);
}

/* Features bar - all hardcoded blues */
[data-theme="red"] .featured-carousel-section::before {
  opacity: 0.2;
}

/* Bulk order section */
[data-theme="red"] .bulk-order-content .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
}

/* 3D container glow */
[data-theme="red"] .hero-3d-container::after {
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb),0.08) 0%, transparent 60%);
}

/* ============================================
   RED THEME - Background & Section Overrides
   Changes all blue-tinted backgrounds to red-tinted
   ============================================ */

/* Body & general backgrounds */
[data-theme="red"] body {
  background: #fef2f2;
}
[data-theme="red"] .bg-primary { background: #fef2f2; }

/* Categories section */
[data-theme="red"] .categories-section {
  background: linear-gradient(135deg, #fef2f2 0%, var(--accent-light) 30%, #fef2f2 70%, #fff5f5 100%);
}

/* Why choose section */
[data-theme="red"] .why-choose-section {
  background: linear-gradient(135deg, #fff5f5 0%, var(--accent-light) 30%, #fef2f2 60%, #fff5f5 100%);
}

/* FAQ section */
[data-theme="red"] .faq-section {
  background: linear-gradient(135deg, #fef2f2 0%, var(--accent-light) 30%, #fef2f2 70%, #fff5f5 100%);
}

/* Section rich backgrounds */
[data-theme="red"] .section-rich-light {
  background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 50%, var(--accent-light) 100%);
}
[data-theme="red"] .section-rich-gradient {
  background: linear-gradient(135deg, #fef2f2 0%, var(--accent-light) 30%, #fff5f5 60%, #fef2f2 100%);
}
[data-theme="red"] .section-rich-blue {
  background: linear-gradient(135deg, #1a0f0f 0%, #2a1a1a 50%, #1a0f0f 100%);
}

/* Reviews section */
[data-theme="red"] .reviews-section {
  background: #fef2f2;
}
[data-theme="red"] .review-card {
  background: #fff5f5;
}

/* Best sellers & featured carousel */
[data-theme="red"] .best-sellers-section {
  background: #fef2f2;
}
[data-theme="red"] .featured-carousel-section {
  background: #fef2f2;
}

/* Products sections */
[data-theme="red"] .products-section.bg-light {
  background: #fef2f2;
}
[data-theme="red"] .products-section.bg-white {
  background: #fff5f5;
}

/* Inner page header */
[data-theme="red"] .inner-page-header {
  background: #fef2f2;
  border-bottom-color: var(--accent);
}
[data-theme="red"] .page-header {
  background: #fef2f2;
  border-bottom-color: var(--accent);
}

/* About page sections */
[data-theme="red"] .about-hero {
  background: linear-gradient(135deg, #0a0a1e 0%, #1a0f0f 30%, #2a1a1a 60%, #0f0a0a 100%);
}
[data-theme="red"] .about-trust-section {
  background: linear-gradient(135deg, #fff5f5 0%, var(--accent-light) 30%, #fef2f2 70%, #fff5f5 100%);
}
[data-theme="red"] .about-office-section {
  background: #fef2f2;
}
[data-theme="red"] .about-story-section {
  background: #fff5f5;
}

/* Concrete pipes section - darker red theme */
[data-theme="red"] .concrete-pipes-section {
  background: linear-gradient(135deg, #0a0a1e 0%, #1a0f0f 30%, #2a1515 60%, #0f0a0a 100%);
}

/* Shop sidebar & toolbar */
[data-theme="red"] .shop-sidebar {
  background: #fff5f5;
}
[data-theme="red"] .shop-toolbar {
  background: #fff5f5;
}

/* Cart summary */
[data-theme="red"] .cart-summary {
  background: #fff5f5;
}
[data-theme="red"] .order-summary {
  background: #fff5f5;
}

/* Features bar */
[data-theme="red"] .features-bar {
  background: #fff5f5;
}
[data-theme="red"] .feature-item {
  background: #fff5f5;
}
[data-theme="red"] .feature-item:hover {
  background: var(--accent-light);
}

/* Why choose cards */
[data-theme="red"] .why-choose-card {
  background: #fff5f5;
}

/* Ambient blobs - red version */
[data-theme="red"] .ambient-blob-1 {
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%);
}
[data-theme="red"] .ambient-blob-2 {
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.06) 0%, transparent 70%);
}
[data-theme="red"] .ambient-blob-3 {
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.05) 0%, transparent 70%);
}

/* FAQ cards */
[data-theme="red"] .faq-item {
  background: #fff5f5;
}
[data-theme="red"] .faq-form-card {
  background: #fff5f5;
}

/* Modal */
[data-theme="red"] .modal-content {
  background: #fff5f5;
}

/* Toast */
[data-theme="red"] .toast {
  background: #fff5f5;
}

/* Product card backgrounds */
[data-theme="red"] .product-card {
  background: #fff5f5;
}
[data-theme="red"] .product-image {
  background: #fef2f2;
}

/* Category cards */
[data-theme="red"] .category-card {
  background: #2a1515;
}

/* Contact page */
[data-theme="red"] .contact-info-item {
  background: #fff5f5;
}

/* Form inputs */
[data-theme="red"] .faq-form-input-wrap input,
[data-theme="red"] .faq-form-input-wrap select,
[data-theme="red"] .faq-form-input-wrap textarea {
  background: #fef2f2;
}

/* Shop page backgrounds */
[data-theme="red"] .stat-item {
  background: #fff5f5;
}

/* Blog card */[data-theme="red"] .blog-card { background: #fff5f5; }
[data-theme="red"] .recipe-card { background: #fff5f5; border-color: rgba(var(--accent-rgb), 0.08); }
[data-theme="red"] .recipe-card:hover { box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.12); }
[data-theme="red"] .recipe-card article .ingredients span { color: var(--accent); }

/* Filter section */
[data-theme="red"] .filter-section {
  border-bottom-color: var(--accent-light);
}

/* Cart item */
[data-theme="red"] .cart-item {
  background: #fff5f5;
}
[data-theme="red"] .cart-item-image {
  background: #fef2f2;
}

/* Checkout */
[data-theme="red"] .checkout-section h3 {
  border-bottom-color: var(--accent-light);
}

/* Payment method */
[data-theme="red"] .payment-method-option {
  background: #fff5f5;
}

/* Order item */
[data-theme="red"] .order-item {
  border-bottom-color: var(--accent-light);
}
[data-theme="red"] .order-item-img {
  background: #fef2f2;
}

/* About hero bg */
[data-theme="red"] .about-hero-bg {
  background: linear-gradient(135deg, #0a0a1e, #1a0f0f);
}
[data-theme="red"] .about-hero-grid {
  background-image: 
    linear-gradient(rgba(var(--accent-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.04) 1px, transparent 1px);
}
[data-theme="red"] .about-hero-orb {
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0%, transparent 60%);
}

/* Milestone */
[data-theme="red"] .about-milestone-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
}
[data-theme="red"] .about-milestone-content {
  background: #fff5f5;
}

/* Trust cards */
[data-theme="red"] .about-trust-card {
  background: #fff5f5;
}
[data-theme="red"] .about-trust-card-glow {
  background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.06), transparent 70%);
}
[data-theme="red"] .about-trust-icon {
  background: var(--accent-light);
  color: var(--accent);
}
[data-theme="red"] .about-trust-card:hover .about-trust-icon {
  background: var(--accent);
}
[data-theme="red"] .about-trust-card:hover {
  border-color: var(--accent);
}

/* Office cards */
[data-theme="red"] .about-office-card {
  background: #fff5f5;
}

/* Contact form card */
[data-theme="red"] .about-contact-form-card {
  background: #fff5f5;
}
[data-theme="red"] .about-contact-input-wrap input,
[data-theme="red"] .about-contact-input-wrap select,
[data-theme="red"] .about-contact-input-wrap textarea {
  background: #fef2f2;
}
[data-theme="red"] .about-contact-card {
  background: rgba(var(--accent-rgb), 0.04);
}
[data-theme="red"] .about-contact-card-icon {
  background: var(--accent-light);
  color: var(--accent);
}

/* Promo banner section */
[data-theme="red"] .promo-banner-section {
  background: linear-gradient(135deg, #1a0f0f 0%, #2a1515 50%, #1a0f0f 100%);
}

/* Bulk order section */
[data-theme="red"] .bulk-order-section .bulk-order-bg::before {
  background: linear-gradient(135deg, rgba(26,15,15,0.92) 0%, rgba(26,15,15,0.7) 100%);
}

/* ============================================
   Since --accent, --accent-hover, --accent-light, --accent-rgb
   are now smoothly animated by JS through Blue→Orange→Red,
   the [data-theme="red"] overrides above automatically
   follow the animation. No snapping occurs.
   ============================================ */


/* ============================================
   PREMIUM BREADCRUMBS - SVG Icon Style
   ============================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-500);
  margin-top: 20px;
  margin-bottom: 12px;
}
.breadcrumb button[aria-label="Home"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  transition: opacity 0.2s ease;
}
.breadcrumb button[aria-label="Home"]:hover {
  opacity: 0.7;
}
.breadcrumb svg {
  flex-shrink: 0;
}
.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 500;
}
.breadcrumb a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
.breadcrumb .current {
  color: var(--accent);
  font-weight: 600;
}

[data-theme="red"] .breadcrumb {
  background: transparent;
}

/* ============================================
   CONTACT DROPDOWN - Phone > Call/WhatsApp
   ============================================ */
.contact-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.contact-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  padding: 6px 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
}
.contact-dropdown-wrap:hover .contact-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.contact-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: rgba(255,255,255,0.65);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.contact-dropdown-item:hover {
  color: var(--white);
  background: rgba(255,255,255,0.06);
  padding-left: 26px;
}
.contact-dropdown-item i {
  width: 20px;
  text-align: center;
  font-size: 1rem;
}
.contact-dropdown-item .fa-whatsapp {
  color: #25D366;
}
.contact-dropdown-item .fa-phone {
  color: #60a5fa;
}
[data-theme="red"] .contact-dropdown-item .fa-phone {
  color: #f87171;
}

/* Table / list item backgrounds */
[data-theme="red"] .about-milestone::before {
  background: var(--accent-light);
}