/*
Theme Name: Tantuj WPTheme
Theme URI: https://github.com/wassayknp/tantuj-wptheme
Author: wassayknp
Author URI: https://github.com/wassayknp
Description: 🇮🇳 Made in India — Premium wholesale handloom WordPress theme for sarees, cotton gamcha & textile businesses. Built for Supreme Handloom, Kanpur. Features WooCommerce B2B integration, WhatsApp bulk inquiry, dynamic customizer, hero slider & mobile-first responsive design.
Version: 1.2.0
Text Domain: supreme-handloom
*/

:root {
    /* ── Supreme Handloom Brand Palette (India-Inspired) ── */
    /* India tricolor accents */
    --india-saffron: #FF9933;
    --india-green:   #138808;
    --india-blue:    #000080;
    /* Primary: Logo Blue */
    --primary-color:  #1C9DD8;
    --primary-light:  #55C0EE;
    --primary-dark:   #1278A8;
    --primary-pale:   #E6F6FD;

    /* Secondary: Logo Crimson Red */
    --secondary-color: #E8174B;
    --secondary-light: #FF5277;
    --secondary-dark:  #B50F36;
    --secondary-pale:  #FDEAEE;

    /* Neutral / Surface */
    --bg-light:  #F7FBFE;   /* very light blue-tinted white */
    --bg-mid:    #EAF5FC;   /* soft blue-grey section bg   */
    --bg-dark:   #0D2233;   /* deep navy for topbar/footer  */
    --bg-card:   #FFFFFF;

    /* Text */
    --text-main:  #1A2F40;
    --text-muted: #5A7A90;
    --text-light: #F0F8FF;
    --white:      #FFFFFF;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-hero:    linear-gradient(135deg, rgba(28,157,216,0.88) 0%, rgba(232,23,75,0.88) 100%);
    --gradient-card:    linear-gradient(135deg, var(--primary-pale) 0%, var(--secondary-pale) 100%);

    /* Shadows */
    --shadow-sm:      0 1px 3px rgba(28,157,216,0.08);
    --shadow-md:      0 4px 12px rgba(28,157,216,0.14);
    --shadow-lg:      0 10px 30px rgba(28,157,216,0.18);
    --shadow-xl:      0 20px 40px rgba(28,157,216,0.20);
    --shadow-colored: 0 12px 30px rgba(232,23,75,0.28);

    /* Radii */
    --border-radius-sm:   0.375rem;
    --border-radius-md:   0.5rem;
    --border-radius-lg:   1rem;
    --border-radius-xl:   1.5rem;
    --border-radius-full: 9999px;

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body:    'Inter', sans-serif;

    /* Transitions */
    --transition-fast:   0.2s ease;
    --transition-normal: 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg-light);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bg-dark);
}

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

a:hover {
    color: var(--primary-dark);
}

ul {
    list-style: none;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ==========================================================================
   WooCommerce Overrides
   ========================================================================== */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: var(--secondary-color) !important;
}

.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    background: var(--gradient-primary) !important;
    color: var(--white) !important;
    border-radius: var(--border-radius-full) !important;
    padding: 0.875rem 2rem !important;
    font-family: var(--font-heading) !important;
    border: none !important;
    font-weight: 600 !important;
}

.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-2px);
}

.woocommerce span.onsale {
    background-color: var(--secondary-color) !important;
    border-radius: var(--border-radius-full) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--primary-color) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--primary-color) !important;
}

.woocommerce-message, .woocommerce-info {
    border-top-color: var(--primary-color) !important;
}

.woocommerce-message::before, .woocommerce-info::before {
    color: var(--primary-color) !important;
}


/* Utilities */
.text-center { text-align: center; }
.section-padding { padding: 2.5rem 0; }
.mt-2 { margin-top: 0.75rem; }
.mt-3 { margin-top: 1.25rem; }
.mt-5 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.75rem; }
.mb-3 { margin-bottom: 1.25rem; }
.mb-4 { margin-bottom: 1.5rem; }
.relative { position: relative; }
.bg-light { background: var(--bg-light); }
/* Compact utility */
.compact-section { padding: 1.5rem 0; }
@media (max-width: 768px) { .compact-section { padding: 1rem 0; } }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    font-weight: 600;
    border-radius: var(--border-radius-full);
    transition: var(--transition-normal);
    cursor: pointer;
    font-family: var(--font-heading);
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--white);
    box-shadow: var(--shadow-colored);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 25px 30px -5px rgba(99, 102, 241, 0.5);
    color: var(--white);
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: var(--white);
}

.btn-white {
    background: var(--white);
    color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.btn-white:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Topbar Header */
.topbar {
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding: 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 500;
}

.topbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-left i { margin-right: 0.5rem; color: var(--secondary-light); }
.topbar-right a { color: var(--text-light); margin-left: 1.5rem; }
.topbar-right a:hover { color: var(--primary-light); }

/* Main Navbar */
.navbar {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    font-family: var(--font-heading);
    font-size: 1.0rem;
    font-weight: 600;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-brand img {
    height: 40px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    color: var(--text-main);
    font-weight: 600;
    font-size: 1rem;
    position: relative;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--primary-color);
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

.nav-links a:hover::after, .nav-links a.active::after {
    width: 100%;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background-color: var(--bg-dark);
    border-radius: 3px;
    transition: var(--transition-fast);
}

/* SaaS Hero Section */

.hero {
    position: relative;
    padding: 6rem 0 4rem;
    overflow: hidden;
    background: var(--bg-dark);
}

/* Remove padding when hero is a slider (padding already in clamp height) */
.hero.hero-slider-wrapper {
    padding: 0;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-hero);
    z-index: 2;
}

/* ── Dual texture overlay: film grain noise + woven fabric ── */
.hero-overlay::after,
.page-header::after,
.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
                      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0l24 24M24 0L0 24' stroke='rgba(255,255,255,0.04)' stroke-width='0.6'/%3E%3Cpath d='M0 12h24M12 0v24' stroke='rgba(255,255,255,0.015)' stroke-width='0.3'/%3E%3C/svg%3E");
    background-repeat: repeat, repeat;
    mix-blend-mode: overlay;
    z-index: 1;
    pointer-events: none;
}

/* Footer texture sits behind content (unlike hero/page-header where content has explicit z-index) */
.footer::after {
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 4;
    text-align: center;
    color: var(--white);
    max-width: 800px;
    margin: 0 auto;
}

.hero-subtitle {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-title {
    font-size: 4rem;
    color: var(--white);
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.hero-text {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .hero-title { font-size: 1.6rem; }
    .hero-text { font-size: 0.9rem; }
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ── Hero Slider ── */
.hero-slider-wrapper {
    position: relative;
    height: clamp(160px, 12vw, 220px);
}

.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    z-index: 1;
}

.hero-slider .slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 3;
}

/* ── Ken Burns Background Layer ── */
.hero-slider .slide .slide-bg {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transform: scale(1);
    transition: transform 11s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-slider .slide.active .slide-bg {
    transform: scale(1.08);
}

/* Ken Burns zoom-out on inactive slides for a reverse transition feel */
.hero-slider .slide:not(.active) .slide-bg {
    transform: scale(1);
}

/* Slider Navigation Buttons */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.hero-slider-wrapper:hover .slider-btn {
    opacity: 1;
}

.slider-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 1.5rem;
}

.next-btn {
    right: 1.5rem;
}

/* Slider Dots */
.slider-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.dot.active {
    background: white;
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

/* Grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
/* grid-4 now defined via auto-fill below */

/* Sections */
.section-title {
    font-size: 2.2rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.section-title.left {
    text-align: left;
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.section-subtitle.left {
    text-align: left;
    margin-left: 0;
}

@media (max-width: 768px) {
    .section-title { font-size: 1.8rem; }
    .section-subtitle { font-size: 0.95rem; }
}

/* Cards (SaaS Style) */
.category-card {
    position: relative;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    display: block;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
}

.category-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.category-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    background: linear-gradient(to top, rgba(15,23,42,0.9), transparent);
    color: var(--white);
}

.category-title {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.category-content span {
    font-weight: 600;
    color: var(--secondary-light);
    display: inline-block;
    transition: var(--transition-fast);
}

.category-card:hover .category-content span {
    transform: translateX(5px);
}

/* Features SaaS */
.features-section {
    background-color: var(--white);
    position: relative;
}

.feature-box {
    background: var(--white);
    padding: 2rem 1.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0,0,0,0.05);
    transition: var(--transition-normal);
    text-align: center;
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.feature-icon-wrapper {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--primary-color);
    position: relative;
    z-index: 1;
}

.feature-icon-wrapper::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transform: scale(0.8);
    transition: var(--transition-normal);
}

.feature-box:hover .feature-icon-wrapper {
    color: var(--white);
}

.feature-box:hover .feature-icon-wrapper::after {
    opacity: 1;
    transform: scale(1);
}

.feature-title {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.feature-box p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Interactive Products */
.products-bg {
    background-color: var(--bg-light);
}

.product-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    border: 1px solid rgba(0,0,0,0.05);
}

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

.product-img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
}

.product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-img-wrapper img {
    transform: scale(1.1);
}

.product-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--secondary-color);
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.product-info {
    padding: 1.25rem;
}

.product-category {
    font-size: 0.875rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.product-name {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.product-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bg-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-add {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: var(--transition-fast);
}

.product-card:hover .product-add {
    background: var(--gradient-primary);
    color: var(--white);
}

/* Split Section SaaS */
.split-section {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.split-image {
    flex: 1;
    position: relative;
}

.split-image img {
    width: 100%;
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
}

.split-content {
    flex: 1;
}

/* Footer & Bottom SaaS */
.footer {
    background: var(--bg-dark);
    color: var(--text-light);
    padding: 4rem 0 0;
    position: relative;
}

.footer-cta {
    background: var(--gradient-primary);
    border-radius: var(--border-radius-xl);
    padding: 2.5rem 2rem;
    text-align: center;
    max-width: 1000px;
    margin: -6rem auto 2.5rem;
    position: relative;
    z-index: 10;
    box-shadow: var(--shadow-colored);
}

.footer-cta h3 {
    color: var(--white);
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.footer-cta p {
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.footer-brand h4 {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-desc {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: var(--transition-fast);
}

.social-links a:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
}

.footer-links h4 {
    color: var(--white);
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.footer-links ul li {
    margin-bottom: 1rem;
}

.footer-links a {
    color: var(--text-muted);
}

.footer-links a:hover {
    color: var(--secondary-light);
    padding-left: 5px;
}

.footer-links i {
    color: var(--primary-light);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.footer-bottom-links {
    display: flex;
    gap: 2rem;
}

.footer-bottom-links a {
    color: var(--text-muted);
}

.footer-bottom-links a:hover {
    color: var(--white);
}

/* ── Auto-grid with min-width fallback ── */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 280px), 1fr));
    gap: 2rem;
}

@media (min-width: 1025px) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .hero.hero-slider-wrapper { padding: 0; }
    .hero-slider-wrapper { height: clamp(160px, 14vw, 240px); }
    .hero-slider .slide { padding: 0; }
    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { margin-bottom: 0.75rem; }
    .hero-text { margin-bottom: 0.75rem; font-size: 1rem; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .topbar { display: none; }
    
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 2rem;
        box-shadow: var(--shadow-md);
        gap: 1.5rem;
    }
    
    .nav-links.active { display: flex; }
    .mobile-menu-btn { display: flex; }
    
    .hero { padding: 8rem 0 6rem; }
    .hero.hero-slider-wrapper { padding: 0; }
    .hero-slider-wrapper { height: clamp(140px, 10vw, 200px); }
    .hero-slider .slide { padding: 0; }
    .hero-title { font-size: 1.6rem; }
    .hero-buttons { flex-direction: column; }

    /* Slider responsive */
    .slider-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        opacity: 0.7;
    }
    .prev-btn { left: 0.75rem; }
    .next-btn { right: 0.75rem; }
    .slider-dots { bottom: 1rem; gap: 0.5rem; }
    .dot { width: 10px; height: 10px; }
    
    .split-section { flex-direction: column; }
    
    .footer-cta { margin-top: 0; border-radius: 0; padding: 3rem 1.5rem; }
    .footer { padding-top: 0; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ── Short viewport: reduce hero padding so content doesn't get cramped ── */
@media (max-height: 700px) {
    .hero-slider-wrapper { height: clamp(140px, 10vh, 180px); }
    .hero-slider .slide {
        padding: 0;
    }
    .hero-title { font-size: 2.2rem; margin-bottom: 0.35rem; }
    .hero-text { margin-bottom: 0.5rem; font-size: 0.95rem; }
    .hero-subtitle { margin-bottom: 0.5rem; padding: 0.3rem 1rem; font-size: 0.75rem; }
    .hero-buttons { gap: 0.75rem; }
    .hero-buttons .btn { padding: 0.5rem 1.25rem; font-size: 0.85rem; }
}

@media (max-height: 500px) {
    .hero-slider-wrapper { height: clamp(120px, 8vh, 150px); }
    .hero-slider .slide {
        padding: 0;
    }
    .hero-title { font-size: 1.6rem; }
    .hero-subtitle { display: none; }
    .hero-text { display: none; }
}

/* ── Smooth scroll ── */
html {
    scroll-behavior: smooth;
}

/* ── Floating shapes (hero decorative) ── */
.hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.12;
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: var(--primary-color);
    top: -80px;
    right: -60px;
}

.shape-2 {
    width: 200px;
    height: 200px;
    background: var(--secondary-color);
    bottom: -40px;
    left: -40px;
}

.shape-3 {
    width: 150px;
    height: 150px;
    background: var(--primary-light);
    bottom: 30%;
    right: 10%;
}


/* ── Split section decorative pseudo ── */
.split-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    border-radius: var(--border-radius-xl);
    z-index: -1;
    opacity: 0.5;
    transition: var(--transition-normal);
}

.split-section:hover .split-image::before {
    top: -24px;
    left: -24px;
    opacity: 0.7;
}

/* ==========================================================================
   Modern WooCommerce Wrappers & Filters
   ========================================================================== */
.woo-modern-wrapper {
    margin-top: -3rem;
    position: relative;
    z-index: 10;
}

.woocommerce-result-count {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    margin-bottom: 2rem !important;
}

.woocommerce-ordering select {
    appearance: none;
    background: var(--bg-light) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%231C9DD8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 1rem center;
    background-size: 1.2rem;
    padding: 0.75rem 3rem 0.75rem 1.25rem !important;
    border: 1px solid rgba(28,157,216,0.2) !important;
    border-radius: var(--border-radius-full) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    color: var(--primary-dark) !important;
    box-shadow: var(--shadow-sm) !important;
    cursor: pointer;
    transition: var(--transition-fast) !important;
}

.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: var(--shadow-md) !important;
    outline: none !important;
}

.woocommerce .woocommerce-product-search {
    position: relative;
    display: flex;
    margin-bottom: 2rem;
}

.woocommerce .woocommerce-product-search input[type="search"] {
    width: 100%;
    padding: 0.875rem 1.5rem;
    border: 1px solid #E2E8F0;
    border-radius: var(--border-radius-full) 0 0 var(--border-radius-full);
    font-size: 1rem;
    transition: var(--transition-fast);
}

.woocommerce .woocommerce-product-search input[type="search"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(28,157,216,0.1);
}

.woocommerce .woocommerce-product-search button[type="submit"] {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none;
    padding: 0 2rem;
    border-radius: 0 var(--border-radius-full) var(--border-radius-full) 0;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.woocommerce .woocommerce-product-search button[type="submit"]:hover {
    transform: none !important;
    filter: brightness(1.1);
}

.woocommerce-products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #F1F5F9;
}

/* ══════════════════════════════════════════════════════════════
   AJAX PRODUCT FILTER PANEL
   ══════════════════════════════════════════════════════════════ */
.shop-filters-panel {
    background: var(--bg-light);
    border-radius: var(--border-radius-lg);
    margin-bottom: 2rem;
    border: 1px solid #eef2f6;
}

.shop-filters-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

.shop-filters-toggle {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--white);
    border: 1px solid #e2e8f0;
    color: var(--text-main);
    border-radius: var(--border-radius-full);
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all var(--transition-fast);
}

.shop-filters-toggle:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.shop-filters-toggle .filter-chevron {
    transition: transform 0.3s ease;
    font-size: 0.75rem;
    margin-left: 2px;
}

.shop-filters-active {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 0.85rem;
    min-height: 32px;
}

.filter-active-label {
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 4px;
}

.filter-active-tag {
    display: inline-flex;
    align-items: center;
    background: var(--primary-pale);
    color: var(--primary-dark);
    padding: 2px 10px;
    border-radius: var(--border-radius-full);
    font-size: 0.8rem;
    font-weight: 500;
    gap: 4px;
}

.shop-filters-body {
    border-top: 1px solid #eef2f6;
    padding: 1.25rem;
}

.shop-filters-body[hidden] {
    display: none;
}

.shop-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Filter Widget */
.filter-widget {
    background: var(--white);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid #f0f0f0;
}

.filter-widget-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bg-dark);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.filter-widget-title i {
    color: var(--primary-color);
    font-size: 0.8rem;
    width: 18px;
    text-align: center;
}

.filter-widget-content {
    font-size: 0.9rem;
}

/* Checkbox list */
.filter-checkbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

.filter-checkbox-list::-webkit-scrollbar {
    width: 4px;
}

.filter-checkbox-list::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
}

.filter-checkbox-list li {
    margin-bottom: 4px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background var(--transition-fast);
    position: relative;
}

.filter-checkbox:hover {
    background: var(--primary-pale);
}

.filter-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.filter-checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    transition: all var(--transition-fast);
}

.filter-checkbox input:checked ~ .filter-checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.filter-checkbox input:checked ~ .filter-checkmark::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filter-checkbox input:focus-visible ~ .filter-checkmark {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.filter-label {
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.85rem;
}

.filter-count {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: auto;
}

/* Price range inputs */
.price-range-inputs {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 0.75rem;
}

.price-input-group {
    flex: 1;
}

.price-input-group label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 4px;
}

.price-input {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-family: var(--font-body);
    transition: border-color var(--transition-fast);
    background: var(--bg-light);
}

.price-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(28,157,216,0.1);
}

.price-range-sep {
    color: var(--text-muted);
    padding-bottom: 0.5rem;
    font-size: 0.9rem;
}

.price-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.price-preset-btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-full);
    background: var(--white);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-body);
    font-weight: 500;
}

.price-preset-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-pale);
}

.price-preset-btn.active {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

/* Sort select */
.filter-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-family: var(--font-body);
    background: var(--bg-light);
    color: var(--text-main);
    cursor: pointer;
    transition: border-color var(--transition-fast);
    appearance: auto;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Search input */
.filter-search-wrap {
    position: relative;
}

.filter-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.2rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-family: var(--font-body);
    background: var(--bg-light);
    transition: border-color var(--transition-fast);
}

.filter-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(28,157,216,0.1);
}

.filter-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Filter actions bar */
.shop-filters-actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #eef2f6;
}

.shop-filters-actions .btn {
    padding: 0.6rem 1.5rem;
    font-size: 0.85rem;
}

/* Loading state for products container */
.shop-products-loading {
    position: relative;
    pointer-events: none;
    min-height: 300px;
}

.shop-products-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: shop-filter-spin 0.7s linear infinite;
    z-index: 10;
}

@keyframes shop-filter-spin {
    to { transform: rotate(360deg); }
}

/* No results area */
.no-products-found {
    text-align: center;
    padding: 3rem 1rem;
}

.no-products-found i {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.no-products-found h3 {
    margin-bottom: 0.5rem;
}

.no-products-found p {
    color: var(--text-muted);
}

/* Filter panel responsive */
@media (max-width: 768px) {
    .shop-filters-header {
        flex-wrap: wrap;
    }

    .shop-filters-active {
        width: 100%;
        order: 2;
    }

    .shop-filters-grid {
        grid-template-columns: 1fr;
    }

    .price-range-inputs {
        flex-direction: row;
    }

    .shop-filters-actions {
        flex-direction: column;
    }

    .shop-filters-actions .btn {
        width: 100%;
    }
}

/* ── Bulk Quote Modal ── */
.bulk-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 44, 0.7);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 1.5rem;
}

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

.bulk-modal {
    background: white;
    border-radius: var(--border-radius-xl);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.5rem;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s ease;
}

.bulk-modal-overlay.active .bulk-modal {
    transform: scale(1) translateY(0);
}

.bulk-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-light);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.bulk-modal-close:hover {
    background: var(--secondary-color);
    color: white;
}

.bulk-modal-header {
    text-align: center;
    margin-bottom: 2rem;
}

.bulk-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
    color: #25D366;
}

.bulk-modal-header h3 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.bulk-modal-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.bulk-form-group {
    margin-bottom: 1.25rem;
}

.bulk-form-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    color: var(--text-main);
}

.bulk-form-group label i {
    color: var(--primary-color);
    font-size: 0.85rem;
}

.bulk-form-group input,
.bulk-form-group select,
.bulk-form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-md);
    font-size: 0.95rem;
    font-family: var(--font-body);
    transition: border-color 0.2s;
    background: var(--bg-light);
}

.bulk-form-group input:focus,
.bulk-form-group select:focus,
.bulk-form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(28, 157, 216, 0.1);
}

.bulk-submit-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25D366;
    border-color: #25D366;
}

.bulk-submit-btn:hover {
    background: #1da851;
    border-color: #1da851;
}

/* ── Blog Specific Styles ── */
.blog-pagination {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-full);
    background: white;
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid #e2e8f0;
    transition: all var(--transition-fast);
}

.blog-pagination .page-numbers.current {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
}

.blog-pagination .page-numbers:hover:not(.current) {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ── WooCommerce Bulk / Wholesale Enhancements ── */
.product-moq {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.product-moq i {
    color: var(--primary-color);
}

.woocommerce ul.products li.product .button {
    margin-top: 0.5rem;
}

/* WooCommerce product columns override for 3-col layout */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* Ensure product thumbnails on WooCommerce shop page match our card style */
.woocommerce ul.products li.product a img {
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    margin: 0;
}

/* ── Page Header Polish ── */
.page-header {
    position: relative;
    overflow: hidden;
}

.page-header .hero-shapes .shape {
    opacity: 0.08;
}

/* ── Smooth scroll global ── */
html {
    scroll-behavior: smooth;
}

/* ── Back to Top Button ── */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: var(--shadow-colored);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-normal);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* ── Navbar scrolled state ── */
.navbar-scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* ── Responsive image helper ── */
img {
    max-width: 100%;
    height: auto;
}

/* ── 404 bounce animation ── */
@keyframes bounce-404 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* ── Reduced motion for WCAG 2.2 AA ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-slider .slide.active .slide-bg {
        transform: scale(1) !important;
    }
    .product-card:hover {
        transform: none !important;
    }
    .feature-box:hover {
        transform: none !important;
    }
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
    .shop-products-loading::after {
        animation-duration: 0.01ms !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   FAQ ACCORDION
   ══════════════════════════════════════════════════════════════ */
.faq-section {
    background: var(--bg-light);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    border: 1px solid #eef2f6;
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.faq-item:hover {
    box-shadow: var(--shadow-sm);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-main);
    text-align: left;
    transition: background var(--transition-fast);
    line-height: 1.4;
}

.faq-question:hover {
    background: var(--bg-light);
}

.faq-question:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: var(--border-radius-lg);
}

.faq-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-pale);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all var(--transition-normal);
}

.faq-item.active .faq-icon {
    background: var(--secondary-color);
    color: var(--white);
    transform: rotate(45deg);
}

.faq-item.active .faq-question {
    background: var(--bg-light);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-item.active .faq-answer {
    max-height: 600px;
}

.faq-answer-inner {
    padding: 0 1.5rem 1.25rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.faq-answer-inner p {
    margin-bottom: 0.75rem;
}

.faq-answer-inner p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .faq-question {
        font-size: 0.95rem;
        padding: 1rem 1.25rem;
    }
    .faq-answer-inner {
        padding: 0 1.25rem 1rem;
        font-size: 0.9rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS CAROUSEL
   ══════════════════════════════════════════════════════════════ */
.testimonials-section {
    background: var(--white);
    overflow: hidden;
}

.testimonials-carousel-wrapper {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.testimonials-track {
    display: flex;
    overflow: hidden;
    position: relative;
    min-height: 280px;
}

.testimonial-card {
    flex: 0 0 100%;
    width: 100%;
    padding: 2rem;
    background: var(--bg-light);
    border-radius: var(--border-radius-xl);
    border: 1px solid #eef2f6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    min-height: 260px;
}

.testimonial-card.active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
    pointer-events: auto;
}

.testimonial-content {
    flex: 1;
}

.testimonial-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 1rem;
}

.testimonial-quote {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-main);
    margin: 0;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eef2f6;
}

.testimonial-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-avatar-placeholder {
    background: var(--gradient-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.3rem;
}

.testimonials-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.testimonial-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid #e2e8f0;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: 0.9rem;
}

.testimonial-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.testimonial-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.testimonial-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dde3ea;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}

.testimonial-dot.active {
    width: 28px;
    border-radius: 5px;
    background: var(--gradient-primary);
}

.testimonial-dot:hover {
    background: var(--primary-light);
}

.testimonial-dot:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .testimonial-card {
        padding: 1.5rem;
        min-height: 220px;
    }
    .testimonial-quote {
        font-size: 0.9rem;
    }
    .testimonial-avatar {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 480px) {
    .testimonial-card {
        padding: 1.25rem;
        min-height: 200px;
    }
    .testimonials-nav {
        gap: 0.75rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   MEGA MENU
   ══════════════════════════════════════════════════════════════ */

/* ── Main menu in nav-links ── */
.main-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    align-items: center;
}

.main-menu > .menu-item {
    position: relative;
}

.main-menu > .menu-item > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.5rem 0.75rem;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.main-menu > .menu-item > a:hover,
.main-menu > .menu-item > a:focus {
    color: var(--primary-color);
}

.main-menu > .menu-item > a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 2px;
    left: 0.75rem;
    right: 0.75rem;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

.main-menu > .menu-item > a:hover::after,
.main-menu > .menu-item > a:focus::after {
    width: calc(100% - 1.5rem);
}

/* Arrow icon for top-level items with children */
.menu-item-arrow {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    transition: transform 0.3s ease;
    margin-left: 2px;
}

.main-menu > .menu-item:hover > a .menu-item-arrow {
    transform: rotate(180deg);
}

/* ── Badge on menu items ── */
.menu-item-badge {
    display: inline-block;
    background: var(--secondary-color);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
    line-height: 1.3;
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════
   MEGA MENU DROPDOWN
   ══════════════════════════════════════════════════════════════ */

/* ── Standard dropdown (non-mega) ── */
.main-menu .standard-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid #eef2f6;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 100;
    padding: 0.5rem 0;
}

.main-menu > .menu-item:hover > .standard-dropdown,
.main-menu > .menu-item:focus-within > .standard-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.standard-dropdown .menu-item {
    padding: 0;
}

.standard-dropdown .menu-item a {
    display: block;
    padding: 0.5rem 1.25rem;
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.standard-dropdown .menu-item a:hover,
.standard-dropdown .menu-item a:focus {
    background: var(--primary-pale);
    color: var(--primary-color);
    padding-left: 1.5rem;
}

/* ── Mega Menu Dropdown ── */
.mega-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: calc(100vw - 3rem);
    max-width: 1200px;
    background: #fff;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid #eef2f6;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 200;
    padding: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Background overlay for readability when using a bg image */
.mega-menu-dropdown[style*="background-image"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    z-index: 0;
    pointer-events: none;
}

.main-menu > .menu-item.mega-menu:hover > .mega-menu-dropdown,
.main-menu > .menu-item.mega-menu:focus-within > .mega-menu-dropdown,
.main-menu > .menu-item.mega-menu.mega-menu-open > .mega-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ── Mega Menu Container Grid ── */
.mega-menu-container {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

/* The sub-menu <ul> at depth 0 inside a mega menu wraps column <li> items
   for valid HTML. display: contents makes it invisible to the grid layout
   so column items become direct grid children. */
.mega-menu-container > .sub-menu {
    display: contents;
}

.mega-menu-cols-2 {
    grid-template-columns: 1fr 1fr;
}

.mega-menu-cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.mega-menu-cols-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.mega-menu-cols-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.mega-menu-col {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu-col > a.mega-col-heading {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bg-dark);
    padding: 0 0 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-pale);
    pointer-events: none;
}

.mega-menu-col > a.mega-col-heading:hover {
    color: var(--bg-dark);
}

/* ── Mega menu sublist (links within a column) ── */
.mega-menu-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-sublist .menu-item {
    margin-bottom: 2px;
}

.mega-menu-sublist .menu-item a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.45rem 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    line-height: 1.4;
}

.mega-menu-sublist .menu-item a:hover,
.mega-menu-sublist .menu-item a:focus {
    color: var(--primary-color);
    padding-left: 4px;
}

/* ── Mega menu item images ── */
.mega-menu-item-img {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
}

.mega-menu-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Featured column ── */
.mega-menu-col.mega-menu-featured {
    background: var(--gradient-card);
    border-radius: var(--border-radius-md);
    padding: 1rem;
}

.mega-menu-col.mega-menu-featured > a.mega-col-heading {
    border-bottom-color: var(--secondary-pale);
}

.mega-menu-col.mega-menu-featured .mega-menu-item-img {
    width: 100%;
    height: 100px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.5rem;
}

.mega-menu-col.mega-menu-featured .mega-menu-item-img img {
    object-fit: cover;
}

/* ── Responsive Mega Menu ── */
@media (max-width: 1024px) {
    .mega-menu-cols-4,
    .mega-menu-cols-5 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 768px) {
    /* Mega menu collapses to full-width on mobile */
    .mega-menu-dropdown {
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        border: none;
        opacity: 1;
        visibility: visible;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }

    .main-menu > .menu-item.mega-menu:hover > .mega-menu-dropdown,
    .main-menu > .menu-item.mega-menu:focus-within > .mega-menu-dropdown,
    .main-menu > .menu-item.mega-menu.mega-menu-open > .mega-menu-dropdown {
        transform: none;
        max-height: 2000px;
    }

    .mega-menu-container {
        grid-template-columns: 1fr 1fr !important;
        padding: 1rem;
        gap: 1rem;
    }

    .mega-menu-col.mega-menu-featured {
        grid-column: 1 / -1;
    }

    .main-menu > .menu-item > a {
        padding: 0.6rem 0;
        font-size: 0.9rem;
    }

    .main-menu > .menu-item > a::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .mega-menu-container {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   HIGH CONTRAST: FAQ & TESTIMONIAL OVERRIDES
   ══════════════════════════════════════════════════════════════ */
body.a11y-high-contrast .faq-question {
    border: 1px solid #000 !important;
}
body.a11y-high-contrast .faq-icon {
    background: #0055CC !important;
    color: #FFFFFF !important;
}
body.a11y-high-contrast .testimonial-card {
    border: 2px solid #000 !important;
}
body.a11y-high-contrast .testimonial-dot.active {
    background: #000 !important;
}

/* ══════════════════════════════════════════════════════════════
   INDIAN MARKET TRUST SIGNALS
   ══════════════════════════════════════════════════════════════ */

/* ── Made in India Badge ── */
.india-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.3rem 0.9rem;
    background: linear-gradient(135deg, #FF9933 0%, #ffffff 50%, #138808 100%);
    border-radius: var(--border-radius-full);
    font-weight: 700;
    font-size: 0.8rem;
    color: #000080;
    white-space: nowrap;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.india-badge i {
    font-size: 1rem;
}

/* ── Trust Badges Strip ── */
.trust-strip {
    background: white;
    padding: 2.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.trust-item {
    padding: 1rem 0.5rem;
    transition: transform 0.3s ease;
}

.trust-item:hover {
    transform: translateY(-4px);
}

.trust-item .trust-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.3rem;
}

.trust-icon.blue {
    background: var(--primary-pale);
    color: var(--primary-color);
}

.trust-icon.saffron {
    background: rgba(255, 153, 51, 0.12);
    color: #FF9933;
}

.trust-icon.green {
    background: rgba(19, 136, 8, 0.12);
    color: #138808;
}

.trust-icon.red {
    background: var(--secondary-pale);
    color: var(--secondary-color);
}

.trust-icon.purple {
    background: rgba(128, 0, 128, 0.1);
    color: #800080;
}

.trust-item h5 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.trust-item p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Floating WhatsApp Button ── */
.floating-whatsapp {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 10px;
}

.floating-whatsapp .wa-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: white;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    animation: wa-pulse 2s infinite;
    text-decoration: none;
}

.floating-whatsapp .wa-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
    color: white;
}

.floating-whatsapp .wa-tooltip {
    background: white;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-full);
    box-shadow: var(--shadow-md);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    border: 1px solid #e2e8f0;
}

.floating-whatsapp:hover .wa-tooltip {
    opacity: 1;
    transform: translateX(0);
}

@keyframes wa-pulse {
    0% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 4px 25px rgba(37, 211, 102, 0.7); }
    100% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); }
}

/* ── PAN India Map Badge ── */
.pan-india-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FF9933 0%, #ffffff 50%, #138808 100%);
    padding: 0.5rem 1.2rem;
    border-radius: var(--border-radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
}

/* ── COD Badge ── */
.cod-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.3rem 0.9rem;
    background: rgba(19, 136, 8, 0.1);
    border: 1px solid rgba(19, 136, 8, 0.3);
    border-radius: var(--border-radius-full);
    font-weight: 600;
    font-size: 0.8rem;
    color: #138808;
}

/* ── Animated Counter ── */
.counter-number {
    font-size: 2.2rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

/* ── Tamil/Regional language toggle hint ── */
.lang-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    border-left: 2px solid var(--primary-light);
    padding-left: 0.75rem;
    opacity: 0.7;
}

/* ── Mobile responsive for trust strip ── */
@media (max-width: 768px) {
    .floating-whatsapp {
        bottom: 1.2rem;
        left: 1.2rem;
    }
    .floating-whatsapp .wa-btn {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }
    .floating-whatsapp .wa-tooltip {
        display: none;
    }
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .counter-number {
        font-size: 1.8rem;
    }
    .india-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.7rem;
    }
}

@media (max-width: 480px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .trust-item {
        padding: 0.75rem 0.25rem;
    }
    .trust-item .trust-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   STICKY MOBILE BOTTOM NAVIGATION
   ══════════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99992;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    padding: 0.4rem 0 env(safe-area-inset-bottom, 0.4rem) 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    transform: translateY(0);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-bottom-nav.hidden {
    transform: translateY(100%);
}

.mbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.35rem 0.6rem;
    border-radius: var(--border-radius-md);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    min-width: 56px;
    -webkit-tap-highlight-color: transparent;
}

.mbn-item i {
    font-size: 1.25rem;
    transition: transform 0.2s ease;
}

.mbn-item span {
    font-size: 0.6rem;
    line-height: 1;
    letter-spacing: 0.3px;
}

.mbn-item:hover,
.mbn-item:focus-visible {
    color: var(--primary-color);
    background: var(--primary-pale);
    outline: none;
}

.mbn-item:hover i {
    transform: scale(1.1);
}

.mbn-item.active {
    color: var(--primary-color);
}

.mbn-item.active::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 0 0 3px 3px;
}

/* ── Cart icon with badge ── */
.mbn-cart-icon {
    position: relative;
    display: inline-flex;
}

.mbn-cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    border-radius: var(--border-radius-full);
    background: var(--secondary-color);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(232, 23, 75, 0.4);
    line-height: 1;
}

.mbn-cart-count:empty,
.mbn-cart-count[data-count="0"] {
    display: none;
}

/* ── WhatsApp item special styling ── */
.mbn-wa {
    color: #25D366;
}

.mbn-wa:hover,
.mbn-wa:focus-visible {
    color: #1da851;
    background: rgba(37, 211, 102, 0.1);
}

.mbn-wa i {
    font-size: 1.35rem;
}

/* ── Show only on small screens ── */
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}    @media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }

    /* Push page content up so it's not hidden behind the bar */
    body {
        padding-bottom: 3.8rem;
    }

    /* Adjust back-to-top button so it doesn't overlap */
    .back-to-top {
        bottom: 5rem;
    }

    /* Adjust floating WhatsApp button so it doesn't overlap */
    .floating-whatsapp {
        bottom: 5rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   EXIT-INTENT WHATSAPP POPUP
   ══════════════════════════════════════════════════════════════ */
.exit-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 44, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.exit-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.exit-popup {
    background: white;
    border-radius: var(--border-radius-xl);
    width: 100%;
    max-width: 420px;
    padding: 2.5rem 2rem;
    position: relative;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(30px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.exit-popup-overlay.active .exit-popup {
    transform: scale(1) translateY(0);
}

.exit-popup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-light);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.exit-popup-close:hover {
    background: var(--secondary-color);
    color: white;
}

.exit-popup-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366, #128C7E);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 2.2rem;
    color: white;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.35);
    animation: exit-wa-pulse 2s infinite;
}

@keyframes exit-wa-pulse {
    0% { box-shadow: 0 8px 25px rgba(37, 211, 102, 0.35); }
    50% { box-shadow: 0 8px 35px rgba(37, 211, 102, 0.55); }
    100% { box-shadow: 0 8px 25px rgba(37, 211, 102, 0.35); }
}

.exit-popup h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--bg-dark);
}

.exit-popup-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.exit-popup-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
    padding: 0 0.5rem;
}

.exit-popup-benefits span {
    font-size: 0.9rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.exit-popup-benefits i {
    color: #25D366;
    font-size: 0.85rem;
}

.exit-popup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-heading);
    border: none;
    border-radius: var(--border-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    margin-bottom: 1rem;
}

.exit-popup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
    color: white;
}

.exit-popup-btn i {
    font-size: 1.3rem;
}

.exit-popup-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0.25rem;
    transition: color var(--transition-fast);
}

.exit-popup-dismiss:hover {
    color: var(--text-main);
}

/* ── Mobile responsive ── */
@media (max-width: 480px) {
    .exit-popup {
        padding: 2rem 1.25rem;
    }
    .exit-popup-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }
    .exit-popup h3 {
        font-size: 1.25rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY CONTROL WIDGET
   ══════════════════════════════════════════════════════════════ */
.accessibility-btn {
    position: fixed;
    bottom: 6.5rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-dark);
    color: var(--white);
    border: 2px solid rgba(255,255,255,0.15);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.accessibility-btn:hover {
    transform: scale(1.1);
    border-color: var(--primary-color);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.accessibility-panel {
    position: fixed;
    bottom: 11.5rem;
    right: 2rem;
    width: 240px;
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    z-index: 9998;
    padding: 1.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transform-origin: bottom right;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.accessibility-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.accessibility-panel h4 {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: var(--bg-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
}

.accessibility-panel h4 i {
    color: var(--primary-color);
}

.a11y-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.a11y-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-md);
    border: 1px solid #eef2f6;
    background: var(--bg-light);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-main);
}

.a11y-option:hover {
    border-color: var(--primary-color);
    background: var(--primary-pale);
}

.a11y-option.active {
    border-color: var(--primary-color);
    background: var(--primary-pale);
    color: var(--primary-dark);
}

.a11y-option i {
    width: 20px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--primary-color);
}

.a11y-option .a11y-badge {
    margin-left: auto;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--border-radius-full);
    background: var(--primary-color);
    color: white;
    font-weight: 600;
}

/* ── Accessibility state classes on body ── */
body.a11y-large-text {
    font-size: 1.125rem !important;
}
body.a11y-large-text p,
body.a11y-large-text li,
body.a11y-large-text .hero-text,
body.a11y-large-text .section-subtitle {
    font-size: 1.2rem !important;
}
body.a11y-large-text .hero-title {
    font-size: 4.2rem !important;
}
body.a11y-large-text h2.section-title {
    font-size: 2.6rem !important;
}

body.a11y-high-contrast {
    --text-main: #000000 !important;
    --text-muted: #000000 !important;
    --bg-light: #FFFFFF !important;
    --bg-dark: #000000 !important;
    --primary-color: #0055CC !important;
    --secondary-color: #CC0033 !important;
    --white: #FFFFFF !important;
    --text-light: #FFFFFF !important;
    --primary-light: #0055CC !important;
    --primary-dark: #003380 !important;
    --primary-pale: #E6F0FF !important;
    --secondary-light: #CC0033 !important;
    --secondary-dark: #990026 !important;
    --secondary-pale: #FFE6EC !important;
    --bg-mid: #F0F4F8 !important;
    --bg-card: #FFFFFF !important;
    --shadow-sm: none !important;
    --shadow-md: none !important;
    --shadow-lg: none !important;
    --shadow-xl: none !important;
    --shadow-colored: none !important;
}
body.a11y-high-contrast .btn-outline {
    border-width: 3px !important;
}
body.a11y-high-contrast a {
    text-decoration: underline !important;
}
body.a11y-high-contrast .btn-primary {
    background: var(--primary-color) !important;
    box-shadow: none !important;
}
body.a11y-high-contrast .btn-white {
    background: #FFFFFF !important;
    color: #0055CC !important;
    border: 2px solid #0055CC !important;
}
body.a11y-high-contrast .nav-brand {
    -webkit-text-fill-color: #0055CC !important;
    background: none !important;
    color: #0055CC !important;
}
body.a11y-high-contrast .counter-number {
    -webkit-text-fill-color: #0055CC !important;
    background: none !important;
    color: #0055CC !important;
}
body.a11y-high-contrast .hero-subtitle {
    background: #000000 !important;
    border-color: #FFFFFF !important;
}
body.a11y-high-contrast .feature-box:hover .feature-icon-wrapper {
    color: var(--primary-color) !important;
}
body.a11y-high-contrast .feature-icon-wrapper::after {
    display: none !important;
}
body.a11y-high-contrast .product-add {
    background: #0055CC !important;
    color: #FFFFFF !important;
}
body.a11y-high-contrast .product-card:hover .product-add {
    background: #003380 !important;
}
body.a11y-high-contrast .gradient-text,
body.a11y-high-contrast [style*="background-clip: text"],
body.a11y-high-contrast [style*="-webkit-background-clip: text"] {
    background: none !important;
    -webkit-text-fill-color: inherit !important;
    color: var(--text-main) !important;
}
body.a11y-high-contrast .trust-icon {
    background: var(--primary-pale) !important;
    color: var(--primary-color) !important;
}
body.a11y-high-contrast .slider-btn {
    background: #000000 !important;
    border-color: #FFFFFF !important;
    opacity: 1 !important;
}
body.a11y-high-contrast .dot {
    background: rgba(255,255,255,0.5) !important;
    border-color: #FFFFFF !important;
}
body.a11y-high-contrast .dot.active {
    background: #FFFFFF !important;
}
body.a11y-high-contrast .footer-cta {
    border: 2px solid #FFFFFF !important;
}
body.a11y-high-contrast .topbar-right a {
    color: #FFFFFF !important;
}
body.a11y-high-contrast .wholesale-pricing-panel {
    border: 2px solid #0055CC !important;
}
body.a11y-high-contrast .footer-brand h4 {
    -webkit-text-fill-color: #FFFFFF !important;
    background: none !important;
    color: #FFFFFF !important;
}
body.a11y-high-contrast .india-badge,
body.a11y-high-contrast .pan-india-badge {
    background: #FFFFFF !important;
    border: 2px solid #000080 !important;
    color: #000080 !important;
}

body.a11y-grayscale {
    filter: grayscale(1) !important;
    -webkit-filter: grayscale(1) !important;
}

body.a11y-inverted {
    filter: invert(1) hue-rotate(180deg) !important;
    -webkit-filter: invert(1) hue-rotate(180deg) !important;
}
body.a11y-inverted img,
body.a11y-inverted video,
body.a11y-inverted [style*="background-image"] {
    filter: invert(1) hue-rotate(180deg) !important;
    -webkit-filter: invert(1) hue-rotate(180deg) !important;
}

/* ── Post content styles for single blog ── */
.post-content h2 {
    font-size: 1.75rem;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-pale);
}
.post-content h3 {
    font-size: 1.35rem;
    margin: 1.5rem 0 0.75rem;
}
.post-content h4 {
    font-size: 1.15rem;
    margin: 1.25rem 0 0.5rem;
}
.post-content p {
    margin-bottom: 1.25rem;
}
.post-content ul, .post-content ol {
    margin: 1rem 0 1.25rem 1.5rem;
}
.post-content ul {
    list-style: disc;
}
.post-content ol {
    list-style: decimal;
}
.post-content li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}
.post-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--bg-light);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    font-style: italic;
    color: var(--text-muted);
}
.post-content img {
    border-radius: var(--border-radius-lg);
    margin: 1.5rem 0;
}
.post-content figure.wp-block-image {
    margin: 1.5rem 0;
}
.post-content figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
.post-content pre {
    background: var(--bg-dark);
    color: var(--text-light);
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
    overflow-x: auto;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}
.post-content code {
    background: var(--bg-light);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
}
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}
.post-content th, .post-content td {
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    text-align: left;
}
.post-content th {
    background: var(--bg-light);
    font-weight: 600;
}
.post-content iframe {
    max-width: 100%;
    border-radius: var(--border-radius-lg);
}
.post-content .wp-block-button__link {
    border-radius: var(--border-radius-full);
}

@media (max-width: 768px) {
    .post-content h2 { font-size: 1.4rem; }
    .post-content h3 { font-size: 1.2rem; }
    .post-content { font-size: 1rem; }
}

/* Adjust accessibility widget position on mobile */
@media (max-width: 768px) {
    .accessibility-btn {
        bottom: 5.5rem;
        right: 1rem;
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    .accessibility-panel {
        bottom: 10rem;
        right: 0.75rem;
        width: 220px;
    }
    .back-to-top {
        bottom: 5rem;
    }
    .floating-whatsapp {
        bottom: 5rem;
    }
}