/* ==========================================================================
   POPPINS TYPEFACE (INDIAN TYPE FOUNDRY)
   Modern geometric sans-serif typeface designed by Satya Rajpurohit & Ninad Kahale.
   Weights: 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold),
            700 (Bold), 800 (ExtraBold)
   ========================================================================== */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   NOHEMI TYPEFACE (9 CRAFTED WEIGHTS)
   Designed by Rajesh Rajput.
   Weights: 100 (Thin), 200 (ExtraLight), 300 (Light), 400 (Regular),
            500 (Medium), 600 (SemiBold), 700 (Bold), 800 (ExtraBold), 900 (Black)
   ========================================================================== */
@font-face {
    font-family: 'Nohemi';
    src: url('fonts/Nohemi-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('fonts/Nohemi-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('fonts/Nohemi-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('fonts/Nohemi-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('fonts/Nohemi-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('fonts/Nohemi-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('fonts/Nohemi-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('fonts/Nohemi-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('fonts/Nohemi-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* S3 Brand palette — matched to the logo (red cube, gold tagline, black ground) */
    --clr-primary: #d9151c;       /* Logo red (deepened for text/button contrast) */
    --clr-primary-dark: #a50f15;  /* Deep crimson */
    --clr-primary-light: #fdeaea; /* Soft red tint */
    --clr-secondary: #059669;     /* Natural herbal green (check marks) */
    --clr-accent: #dba855;        /* Logo tagline gold */
    --clr-gold: #b8862f;          /* Deep gold for text on light backgrounds */
    --clr-whatsapp: #25d366;      /* WhatsApp Brand Green */
    --clr-whatsapp-dark: #128c7e;

    /* Subtle brown — secondary accent only */
    --clr-brown: #7b5136;
    --clr-brown-soft: #f5efe9;

    /* Neutrals */
    --clr-dark: #141211;          /* Logo black / charcoal */
    --clr-dark-surface: #1f1c1a;
    --clr-text: #2e2a28;          /* Neutral charcoal text */
    --clr-muted: #6d6662;         /* Soft neutral gray */
    --clr-light: #faf8f6;         /* Clean off-white background */
    --clr-studio-bg: #e0cdb4;     /* Hero animation studio backdrop (matches frames) */
    --clr-white: #ffffff;
    --clr-border: #ebe6e2;        /* Soft border */

    /* Gradients */
    --grad-primary: linear-gradient(135deg, #e3191f, #a50f15);
    --grad-water: linear-gradient(135deg, #e3191f 10%, #b8862f 100%);   /* headline highlight: red → gold */
    --grad-eco: linear-gradient(135deg, #059669, #047857);
    --grad-gold: linear-gradient(90deg, #f61f25, #dba855);
    --grad-dark: linear-gradient(135deg, #1f1c1a, #0b0a09);

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

    /* Shadows & Radii */
    --shadow-soft: 0 10px 25px -5px rgba(20, 18, 17, 0.06), 0 8px 10px -6px rgba(20, 18, 17, 0.03);
    --shadow-card: 0 14px 32px -8px rgba(90, 50, 35, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 10px 30px -5px rgba(217, 21, 28, 0.35);
    --radius-sm: 0.5rem;
    --radius-md: 0.85rem;
    --radius-lg: 1.5rem;
    --radius-full: 9999px;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--clr-text);
    background-color: var(--clr-white);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

h1, h2, h3, h4, .logo {
    font-family: var(--font-heading);
    color: var(--clr-dark);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Ambient Canvas */
.ambient-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.65;
}

/* Typography Utilities */
.gradient-text {
    background: var(--grad-water);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.text-gold { color: var(--clr-accent); }
.text-cyan { color: #0284c7; }
.text-blue { color: var(--clr-primary); }
.text-green { color: var(--clr-secondary); }
.text-huge { font-size: 3.5rem; }

/* Layout Utilities */
.container {
    width: 92%;
    max-width: 1220px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.section {
    padding: 5.5rem 0;
    position: relative;
    z-index: 1;
}

.section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.section-header p {
    color: var(--clr-muted);
    font-size: 1.1rem;
    max-width: 650px;
    margin: 0 auto;
}

.bg-light {
    background-color: var(--clr-light);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(217, 21, 28, 0.1);
    color: var(--clr-primary-dark);
    border: 1px solid rgba(217, 21, 28, 0.2);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: none;
    font-size: 0.95rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

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

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -5px rgba(217, 21, 28, 0.45);
    color: var(--clr-white);
}

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

.btn-secondary:hover {
    background: rgba(217, 21, 28, 0.08);
    transform: translateY(-2px);
}

.btn-whatsapp {
    background: var(--clr-whatsapp);
    color: var(--clr-white);
    box-shadow: 0 8px 20px -4px rgba(37, 211, 102, 0.4);
}

.btn-whatsapp:hover {
    background: #1ebd5a;
    color: var(--clr-white);
    transform: translateY(-2px);
}

.btn-lg {
    padding: 0.95rem 2rem;
    font-size: 1.05rem;
}

.btn-sm {
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
}

.btn-full {
    width: 100%;
}

.btn-buy-now {
    background: linear-gradient(135deg, #d9151c, #a50f15);
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 18px -4px rgba(217, 21, 28, 0.5);
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius-full);
}

.btn-buy-now:hover {
    background: linear-gradient(135deg, #a50f15, #7f0b10);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 24px -4px rgba(217, 21, 28, 0.65);
}

.btn-add-cart {
    background: #ffffff;
    color: var(--clr-dark);
    border: 1.5px solid var(--clr-border);
    padding: 0.7rem 1rem;
}

.btn-add-cart:hover {
    background: var(--clr-light);
    border-color: var(--clr-primary);
    color: var(--clr-primary);
}

.pulse-hover:hover {
    box-shadow: 0 0 20px rgba(217, 21, 28, 0.45);
}

/* ========================================================
   NAVBAR & STICKY NAVIGATION
   ======================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    z-index: 1000;
    transition: all 0.35s ease;
    background: rgba(20, 18, 17, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(219, 168, 85, 0.18);
}

.navbar.scrolled {
    background: rgba(20, 18, 17, 0.98);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(219, 168, 85, 0.35);
}

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

.brand-logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 44px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

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

.nav-links a {
    color: #ebe6e2;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.25s ease;
    position: relative;
}

.nav-links a:hover {
    color: var(--clr-accent);
}

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

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

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.nav-search-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(219, 168, 85, 0.3);
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.nav-search-btn:hover {
    background: var(--clr-primary);
    transform: scale(1.05);
}

.cart-toggle-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(219, 168, 85, 0.3);
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cart-toggle-btn:hover {
    background: var(--clr-primary);
    transform: scale(1.05);
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--clr-accent);
    color: var(--clr-dark);
    font-size: 0.72rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #ffffff;
    cursor: pointer;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 380px;
    height: 100vh;
    background: var(--clr-dark);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem 1.8rem 2rem;
    transition: right 0.35s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: -10px 0 35px rgba(0,0,0,0.6);
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(219, 168, 85, 0.2);
}

.mobile-logo-img {
    height: 38px;
    width: auto;
}

.close-menu {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #ffffff;
    cursor: pointer;
}

.mobile-menu ul {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 2rem 0;
}

.mobile-menu a {
    color: #f1ede8;
    font-size: 1.15rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.mobile-menu a:hover {
    color: var(--clr-accent);
}

.mobile-contact-note {
    font-size: 0.75rem;
    color: #a39d98;
    text-align: center;
    margin-top: 1rem;
}

/* ========================================================
   NEW HERO SCROLL ANIMATION SYSTEM (215 FRAMES)
   ======================================================== */
.hero-scroll-container {
    position: relative;
    height: 420vh;
    background-color: var(--clr-studio-bg);
    overflow: visible;
}

.hero-sticky-track {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-studio-bg);
}

.hero-scroll-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: block;
}

.hero-canvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(224, 205, 180, 0.05) 30%, rgba(224, 205, 180, 0.45) 75%, rgba(224, 205, 180, 0.9) 100%);
}

.hero-story-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    pointer-events: none;
    height: 100%;
    padding-top: 5rem;
    padding-bottom: 5.5rem;
}

.hero-story-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    will-change: opacity, transform;
}

.hero-story-slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* Story Cards */
.story-card {
    border-radius: var(--radius-lg);
    padding: 1.6rem 2rem;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    color: #ffffff;
    border: 1px solid rgba(219, 168, 85, 0.35);
}

.glass-panel-dark {
    background: rgba(18, 16, 15, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Slide Placements */
.slide-1 .story-card {
    max-width: 480px;
    margin-left: 2%;
}

.slide-2 .story-card {
    max-width: 460px;
    margin-left: auto;
    margin-right: 2%;
}

.slide-3 .story-card {
    max-width: 480px;
    margin-left: 2%;
}

.slide-4 .story-card.center-card {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
}

.hero-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.8rem;
    background: rgba(219, 168, 85, 0.15);
    color: var(--clr-accent);
    border: 1px solid rgba(219, 168, 85, 0.3);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

.story-card h1 {
    font-size: 2.1rem;
    color: #ffffff;
    line-height: 1.18;
    margin-bottom: 0.45rem;
    letter-spacing: -0.01em;
}

.story-card h2 {
    font-size: 1.85rem;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 0.45rem;
}

.hero-slide-sub {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--clr-accent);
    margin-bottom: 0.65rem;
}

.hero-slide-desc {
    font-size: 0.9rem;
    color: #ebe6e2;
    line-height: 1.55;
    margin-bottom: 1.2rem;
}

.feature-bullets-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.f-bullet {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: #f1ede8;
}

.f-bullet i {
    font-size: 1.05rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.center-actions {
    justify-content: center;
    margin-top: 1.2rem;
}

.hero-scroll-prompt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    font-size: 0.82rem;
    color: #c6c0bb;
}

.mouse-mini {
    width: 18px;
    height: 28px;
    border: 1.8px solid var(--clr-accent);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.wheel-mini {
    width: 2.5px;
    height: 6px;
    background: var(--clr-accent);
    border-radius: 2px;
    animation: wheelScroll 1.6s infinite;
}

.gstin-tag {
    font-size: 0.8rem;
    color: #b9b2ad;
    margin-top: 1.25rem;
}

/* Interactive Timeline Controller */
.hero-scroll-controller {
    position: absolute;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
    width: 90%;
    max-width: 520px;
    background: rgba(20, 18, 17, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.75rem 1.4rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(219, 168, 85, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.timeline-steps {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    justify-content: space-between;
}

.timeline-step-btn {
    background: none;
    border: none;
    color: #b9b2ad;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
}

.timeline-step-btn .step-num {
    color: var(--clr-accent);
    font-weight: 800;
}

.timeline-step-btn:hover {
    color: #ffffff;
}

.timeline-step-btn.active {
    color: #ffffff;
    background: rgba(219, 168, 85, 0.2);
}

.timeline-progress-track {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.timeline-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
    transition: width 0.1s linear;
}

.timeline-footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 0.75rem;
    color: #a39d98;
}

.frame-counter strong {
    color: #ffffff;
}

.skip-animation-link {
    color: var(--clr-accent);
    font-weight: 600;
    transition: text-decoration 0.2s;
}

.skip-animation-link:hover {
    text-decoration: underline;
}

/* ========================================================
   ABOUT US SECTION
   ======================================================== */
.about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
    align-items: center;
}

.about-image-wrapper {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.about-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    transition: transform 0.6s ease;
}

.about-image-wrapper:hover .about-img {
    transform: scale(1.03);
}

.about-stamp {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    background: rgba(20, 18, 17, 0.92);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(219, 168, 85, 0.3);
    text-align: center;
    backdrop-filter: blur(8px);
}

.about-stamp span {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--clr-accent);
}

.about-stamp small {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.about-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
}

.about-text p {
    color: var(--clr-muted);
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
}

.about-features {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.feature-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.feature-item i {
    font-size: 1.4rem;
    margin-top: 0.2rem;
    background: rgba(217, 21, 28, 0.1);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.feature-item h4,
.feature-item h3 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.feature-item p {
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* ========================================================
   WHY CHOOSE US SECTION
   ======================================================== */
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.why-card {
    background: #ffffff;
    padding: 2.25rem 1.8rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--clr-border);
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--grad-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.why-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card);
    border-color: rgba(217, 21, 28, 0.3);
}

.why-card:hover::before {
    transform: scaleX(1);
}

.why-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: var(--radius-md);
    background: rgba(217, 21, 28, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.why-card:hover .why-icon-wrap {
    background: var(--clr-primary);
    transform: rotate(6deg);
}

.why-card:hover .why-icon-wrap i {
    color: #ffffff !important;
}

.why-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.why-card p {
    color: var(--clr-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ========================================================
   PRODUCTS CATALOGUE & TOOLBAR
   ======================================================== */
.catalogue-toolbar {
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.search-input-wrap {
    position: relative;
    width: 100%;
    max-width: 540px;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 1.2rem;
    transform: translateY(-50%);
    color: var(--clr-muted);
    font-size: 1rem;
}

.search-input-wrap input {
    width: 100%;
    padding: 0.85rem 2.8rem 0.85rem 3rem;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--clr-border);
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
    transition: all 0.25s ease;
}

.search-input-wrap input:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 4px rgba(217, 21, 28, 0.15);
}

.clear-search-btn {
    position: absolute;
    top: 50%;
    right: 1.1rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1rem;
    display: none;
}

.clear-search-btn.active {
    display: block;
}

.category-filters {
    display: flex;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.filter-btn {
    background: #ffffff;
    border: 1.5px solid var(--clr-border);
    padding: 0.55rem 1.3rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--clr-text);
    cursor: pointer;
    transition: all 0.25s ease;
}

.filter-btn:hover {
    border-color: var(--clr-primary);
    color: var(--clr-primary);
}

.filter-btn.active {
    background: var(--clr-dark);
    color: #ffffff;
    border-color: var(--clr-dark);
    box-shadow: 0 4px 12px rgba(20, 18, 17, 0.25);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 2rem;
}

.no-products-msg {
    text-align: center;
    padding: 4rem 1rem;
}

.no-products-msg i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

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

.no-products-msg p {
    color: var(--clr-muted);
    margin-bottom: 1.25rem;
}

/* Product Card */
.product-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--clr-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card);
    border-color: rgba(217, 21, 28, 0.35);
}

.product-card-top {
    position: relative;
    background: #f8f6f4;
    padding: 1.5rem 1rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    cursor: pointer;
    overflow: hidden;
}

.product-card-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(20, 18, 17, 0.88);
    color: #fdeaea;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-full);
    letter-spacing: 0.03em;
    z-index: 2;
}

.product-pack-img {
    height: 250px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,0.18));
    transition: transform 0.4s ease;
}

.product-card:hover .product-pack-img {
    transform: scale(1.06);
}

.product-card-body {
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--clr-dark);
    cursor: pointer;
    transition: color 0.2s ease;
}

.product-card-title:hover {
    color: var(--clr-primary);
}

.product-card-fragrance {
    font-size: 0.85rem;
    color: var(--clr-primary-dark);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.btn-card-details {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: none;
    padding: 0.2rem 0;
    margin-bottom: 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--clr-primary);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    align-self: flex-start;
}

.btn-card-details i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.btn-card-details:hover {
    color: var(--clr-primary-dark);
}

.btn-card-details:hover i {
    transform: translateX(3px);
}

.product-card-quote {
    font-size: 0.82rem;
    color: var(--clr-muted);
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-malayalam {
    font-size: 0.8rem;
    color: #67605b;
    line-height: 1.4;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding: 0.85rem 0;
    border-top: 1px solid var(--clr-border);
    margin-bottom: 1rem;
}

.product-price-tag {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--clr-dark);
}

.product-price-tag span {
    font-size: 0.85rem;
    color: var(--clr-muted);
    font-weight: 500;
}

.product-pack-weight {
    background: rgba(217, 21, 28, 0.08);
    color: var(--clr-primary-dark);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-sm);
}

/* Card Controls */
.product-card-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.product-card-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-card-qty-row label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clr-muted);
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: #ffffff;
}

.stepper-btn {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--clr-dark);
    transition: background 0.2s ease;
}

.stepper-btn:hover {
    background: var(--clr-light);
    color: var(--clr-primary);
}

.qty-stepper input {
    width: 38px;
    border: none;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--clr-dark);
    background: transparent;
    -moz-appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

/* ========================================================
   CHECKOUT / ORDER ENQUIRY SECTION
   ======================================================== */
.booking-container {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3.5rem;
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    padding: 3.2rem;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--clr-border);
}

.booking-info h2 {
    font-size: 2.4rem;
    line-height: 1.2;
    margin-bottom: 0.85rem;
}

.booking-info p {
    color: var(--clr-muted);
    font-size: 1.05rem;
}

.selected-product-summary-box {
    margin: 2rem 0;
    background: var(--clr-light);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.preview-empty-state {
    text-align: center;
    padding: 1.5rem 1rem;
}

.preview-empty-state i {
    font-size: 2.2rem;
    margin-bottom: 0.75rem;
}

.preview-empty-state p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.preview-item-card {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.preview-item-img-wrap {
    width: 80px;
    height: 110px;
    background: #ffffff;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid var(--clr-border);
    flex-shrink: 0;
}

.preview-pack-img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.preview-item-info {
    flex: 1;
}

.preview-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--clr-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}

.preview-item-info h3 {
    font-size: 1.25rem;
    margin-bottom: 0.2rem;
}

.checkout-item-sub {
    font-size: 0.88rem;
    color: var(--clr-muted);
    margin-bottom: 0.75rem;
}

.checkout-qty-control {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.checkout-qty-control label {
    font-size: 0.85rem;
    font-weight: 600;
}

.checkout-line-total {
    margin-left: auto;
    font-size: 0.95rem;
}

.checkout-line-total strong {
    color: var(--clr-dark);
    font-size: 1.15rem;
}

.booking-perks {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.booking-perks li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--clr-text);
}

.booking-form-wrapper {
    background: var(--clr-light);
    padding: 2.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
}

.booking-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    max-width: 180px;
}

.step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    color: var(--clr-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border: 2px solid var(--clr-border);
    transition: all 0.3s ease;
}

.step.active {
    background: var(--clr-dark);
    color: #ffffff;
    border-color: var(--clr-dark);
    box-shadow: 0 0 12px rgba(20, 18, 17, 0.25);
}

.step-line {
    flex: 1;
    height: 2px;
    background: var(--clr-border);
    margin: 0 10px;
}

.form-step h3 {
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

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

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--clr-dark);
}

.required {
    color: #dc2626;
}

.form-control {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: #ffffff;
    color: var(--clr-dark);
}

.form-control:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(217, 21, 28, 0.15);
}

.form-error {
    display: none;
    color: #dc2626;
    font-size: 0.78rem;
    margin-top: 0.3rem;
}

.form-group.has-error .form-control {
    border-color: #dc2626;
    background-color: #fef2f2;
}

.form-group.has-error .form-error {
    display: block;
}

.order-summary-box {
    background: #ffffff;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 1.1rem;
    margin: 1.5rem 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.92rem;
    color: var(--clr-muted);
}

.summary-row strong {
    color: var(--clr-dark);
}

.grand-total-row {
    border-top: 1px dashed var(--clr-border);
    padding-top: 0.65rem;
    margin-top: 0.65rem;
    font-size: 1.15rem;
    color: var(--clr-dark);
    font-weight: 700;
}

.btn-place-order {
    font-size: 1.05rem;
    padding: 0.95rem 1.5rem;
}

.form-disclaimer {
    font-size: 0.78rem;
    color: var(--clr-muted);
    margin-top: 0.85rem;
    line-height: 1.4;
    text-align: center;
}

.success-message {
    text-align: center;
    padding: 1rem 0;
}

.success-message i.text-huge {
    font-size: 3.5rem;
    margin-bottom: 0.85rem;
}

.order-ref-badge {
    display: inline-block;
    background: rgba(5, 150, 105, 0.12);
    color: var(--clr-secondary);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    padding: 0.4rem 1.2rem;
    border-radius: var(--radius-full);
    margin: 1rem 0;
}

.order-confirmation-details {
    background: #ffffff;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    text-align: left;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}

.success-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ========================================================
   DISTRIBUTOR & TRADE SECTION
   ======================================================== */
.distributor-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 3.2rem;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--clr-border);
}

.distributor-content h2 {
    font-size: 2.3rem;
    margin-bottom: 1rem;
}

.distributor-perks {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

.perk-card {
    background: var(--clr-light);
    padding: 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
}

.perk-card i {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.perk-card h4,
.perk-card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.perk-card p {
    font-size: 0.88rem;
    color: var(--clr-muted);
}

.distributor-form-wrap {
    background: var(--clr-light);
    padding: 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
}

.distributor-form h3 {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
}

/* ========================================================
   TESTIMONIALS SECTION
   ======================================================== */
.slider-container {
    max-width: 1050px;
    margin: 0 auto;
}

.slider-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: #ffffff;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
}

.stars {
    color: #dba855;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.review-text {
    font-size: 0.95rem;
    color: var(--clr-text);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex: 1;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.client-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--clr-dark);
    color: #fdeaea;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.client-info h4 {
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
}

.client-info span {
    font-size: 0.78rem;
    color: var(--clr-muted);
}

/* ========================================================
   CONTACT US & COMPANY VERIFICATION SECTION
   ======================================================== */
.company-official-banner-wrap {
    margin-bottom: 3rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--clr-border);
    background: #141211;
}

.company-banner-img {
    width: 100%;
    height: auto;
    display: block;
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.contact-card {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 1.8rem;
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

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

.contact-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: rgba(217, 21, 28, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
}

.contact-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.contact-card p {
    font-size: 0.92rem;
    color: var(--clr-muted);
    line-height: 1.6;
}

.contact-numbers-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-numbers-list a {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--clr-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}

.contact-numbers-list a:hover {
    color: var(--clr-primary);
}

/* ========================================================
   PRODUCT DETAIL MODAL
   ======================================================== */
.product-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 1.5rem;
}

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

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 9, 8, 0.75);
    backdrop-filter: blur(8px);
}

.modal-content {
    position: relative;
    z-index: 1;
    background: #ffffff;
    max-width: 860px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
    border: 1px solid var(--clr-border);
    animation: modalScale 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes modalScale {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: var(--clr-light);
    border: 1px solid var(--clr-border);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--clr-dark);
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: var(--clr-dark);
    color: #ffffff;
}

.modal-body {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 2.5rem;
    padding: 2.5rem;
}

.modal-image-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
}

.modal-pack-wrap {
    background: var(--clr-light);
    border-radius: var(--radius-md);
    padding: 2rem 1.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--clr-border);
}

.modal-pack-img {
    max-height: 320px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,0.2));
}

.modal-banner-wrap {
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--clr-border);
}

.modal-banner-img {
    width: 100%;
    height: auto;
    display: block;
}

.modal-info-col h2 {
    font-size: 2.1rem;
    margin-bottom: 0.25rem;
}

.modal-subtitle {
    font-size: 1rem;
    color: var(--clr-primary-dark);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.modal-price-row {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-border);
}

.modal-price {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--clr-dark);
}

.modal-weight {
    background: var(--clr-primary-light);
    color: var(--clr-primary-dark);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
}

.modal-quotes {
    margin-bottom: 1.2rem;
}

.modal-quote-en {
    font-size: 0.95rem;
    color: var(--clr-text);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    padding-left: 0.85rem;
    border-left: 3px solid var(--clr-accent);
}

.modal-quote-ml {
    font-size: 0.88rem;
    color: #5f5955;
    line-height: 1.5;
    padding-left: 0.85rem;
    border-left: 3px solid #cbd5e1;
}

.modal-desc {
    font-size: 0.92rem;
    color: var(--clr-muted);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.modal-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.tag-pill {
    background: var(--clr-light);
    border: 1px solid var(--clr-border);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-muted);
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-full);
}

.modal-action-box {
    background: var(--clr-light);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.modal-qty-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.modal-qty-row label {
    font-size: 0.9rem;
    font-weight: 600;
}

.modal-subtotal {
    margin-left: auto;
    font-size: 0.95rem;
}

.modal-subtotal strong {
    font-size: 1.2rem;
    color: var(--clr-dark);
}

.modal-btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.btn-modal-buy {
    background: linear-gradient(135deg, #d9151c, #a50f15);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(217, 21, 28, 0.4);
}

.btn-modal-cart {
    background: #ffffff;
    border: 1.5px solid var(--clr-border);
    color: var(--clr-dark);
}

.modal-wa-direct {
    text-align: center;
}

.btn-link-wa {
    color: var(--clr-whatsapp-dark);
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-link-wa:hover {
    text-decoration: underline;
}

/* ========================================================
   SHOPPING CART SLIDE-IN DRAWER
   ======================================================== */
.cart-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cart-drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: #ffffff;
    z-index: 1501;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 35px rgba(0,0,0,0.25);
    transition: right 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cart-drawer.active {
    right: 0;
}

.cart-drawer-header {
    padding: 1.4rem 1.5rem;
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-drawer-header h3 {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cart-drawer-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--clr-dark);
    cursor: pointer;
}

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.cart-empty-message {
    text-align: center;
    padding: 3rem 1rem;
}

.cart-empty-message i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.cart-empty-message p {
    color: var(--clr-muted);
    margin-bottom: 1.5rem;
}

.cart-item-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--clr-border);
}

.cart-item-img {
    width: 55px;
    height: 75px;
    background: var(--clr-light);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    border: 1px solid var(--clr-border);
    flex-shrink: 0;
}

.cart-item-img img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.cart-item-details {
    flex: 1;
}

.cart-item-details h4 {
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.cart-item-pack {
    font-size: 0.78rem;
    color: var(--clr-muted);
    margin-bottom: 0.4rem;
}

.cart-item-price-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cart-item-price {
    font-weight: 700;
    color: var(--clr-dark);
    font-size: 0.95rem;
}

.cart-item-remove {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 0.95rem;
    transition: color 0.2s ease;
    padding: 0.3rem;
}

.cart-item-remove:hover {
    color: #dc2626;
}

.cart-drawer-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--clr-border);
    background: var(--clr-light);
}

.cart-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.cart-summary-line strong {
    font-size: 1.4rem;
}

.cart-note {
    font-size: 0.78rem;
    color: var(--clr-muted);
    margin-bottom: 1rem;
    text-align: center;
}

/* ========================================================
   FLOATING QUICK WHATSAPP BUTTON
   ======================================================== */
.floating-whatsapp-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 58px;
    height: 58px;
    background: var(--clr-whatsapp);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.45);
    z-index: 1200;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.floating-whatsapp-btn:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.6);
    color: #ffffff;
}

.floating-whatsapp-btn .tooltip {
    position: absolute;
    right: 70px;
    background: var(--clr-dark);
    color: #ffffff;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.floating-whatsapp-btn:hover .tooltip {
    opacity: 1;
}

/* ========================================================
   FOOTER
   ======================================================== */
.footer {
    background: var(--clr-dark);
    color: white;
    padding-top: 4.5rem;
    border-top: 3px solid rgba(219, 168, 85, 0.4);
    position: relative;
    z-index: 1;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.6fr 1.2fr 1fr;
    gap: 3.5rem;
    margin-bottom: 3.5rem;
}

.footer-logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    margin-bottom: 1.2rem;
}

.brand-col p {
    color: #aaa39e;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 380px;
}

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

.social-links a {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #ffffff;
    transition: all 0.25s ease;
}

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

.footer-col h4 {
    color: #ffffff;
    margin-bottom: 1.25rem;
    font-size: 1.15rem;
    position: relative;
    padding-bottom: 0.6rem;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--clr-accent);
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
    color: #aaa39e;
    font-size: 0.92rem;
}

.contact-info a {
    color: #aaa39e;
    transition: color 0.2s ease;
}

.contact-info a:hover {
    color: var(--clr-accent);
}

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

.footer-links a {
    color: #aaa39e;
    font-size: 0.92rem;
    transition: all 0.2s ease;
}

.footer-links a:hover {
    color: var(--clr-accent);
    padding-left: 4px;
}

.footer-bottom {
    text-align: center;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #8a8480;
    font-size: 0.85rem;
}

/* ========================================================
   RESPONSIVENESS (Desktops, Laptops, Tablets & Mobiles)
   ======================================================== */

/* Desktop & Laptop Fine-Tuning (1025px - 1280px) */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1.5rem;
    }

    .about-grid {
        gap: 2.5rem;
    }

    .distributor-wrapper {
        gap: 2.5rem;
        padding: 2.8rem;
    }
}

/* Tablet Landscape & Small Laptops (861px - 1024px) */
@media (max-width: 1024px) {
    .nav-links {
        gap: 1.25rem;
    }

    .nav-links a {
        font-size: 0.88rem;
    }

    .nav-cta {
        padding: 0.55rem 1rem;
        font-size: 0.85rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .about-image-wrapper {
        max-width: 520px;
        margin: 0 auto;
    }

    .why-us-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .distributor-wrapper {
        grid-template-columns: 1fr;
        padding: 2.5rem;
        gap: 2.5rem;
    }

    .modal-body {
        grid-template-columns: 1fr;
        padding: 2rem;
        gap: 2rem;
    }

    .modal-pack-wrap {
        padding: 1.5rem;
    }

    .modal-pack-img {
        max-height: 250px;
    }

    .contact-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

/* Tablet Portrait & Large Phones (641px - 860px) */
@media (max-width: 860px) {
    .nav-links, .nav-cta {
        display: none;
    }

    .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-scroll-container {
        height: 380vh;
    }

    .story-card {
        padding: 1.5rem;
        border-radius: var(--radius-md);
    }

    .slide-1 .story-card,
    .slide-2 .story-card,
    .slide-3 .story-card,
    .slide-4 .story-card.center-card {
        max-width: 94%;
        width: 94%;
        margin: 0 auto;
        bottom: 5.5rem;
        position: absolute;
        left: 3%;
        right: 3%;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }

    .story-card h1 {
        font-size: clamp(1.5rem, 4.5vw, 1.95rem);
    }

    .story-card h2 {
        font-size: clamp(1.35rem, 4vw, 1.75rem);
    }

    .hero-slide-sub {
        font-size: 0.92rem;
    }

    .hero-slide-desc {
        font-size: 0.85rem;
        margin-bottom: 0.85rem;
    }

    .hero-scroll-controller {
        bottom: 0.75rem;
        padding: 0.5rem 1rem;
        max-width: 94%;
        width: 94%;
    }

    .timeline-steps {
        display: none;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .distributor-wrapper {
        padding: 2rem;
    }

    .distributor-form-wrap {
        padding: 1.75rem;
    }
}

/* Mobile Phones (up to 640px) */
@media (max-width: 640px) {
    .container {
        padding: 0 1rem;
    }

    .section {
        padding: 3.5rem 0;
    }

    .section-header {
        margin-bottom: 2.25rem;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .section-header p {
        font-size: 0.9rem;
    }

    /* Hero adjustments */
    .story-card {
        padding: 1.25rem 1.1rem;
    }

    .hero-pill-badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.65rem;
    }

    .hero-slide-desc {
        font-size: 0.82rem;
        line-height: 1.5;
        margin-bottom: 0.75rem;
    }

    .hero-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        margin-bottom: 0.75rem;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 0.65rem 1rem;
        font-size: 0.88rem;
    }

    .hero-scroll-prompt {
        display: none;
    }

    .hero-scroll-controller {
        bottom: 0.5rem;
        padding: 0.45rem 0.75rem;
        max-width: 96%;
        width: 96%;
    }

    .skip-animation-link {
        font-size: 0.8rem;
    }

    /* Products Grid */
    .products-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
        gap: 1.25rem;
    }

    .product-card-top {
        min-height: 240px;
        padding: 1.25rem 1rem 0.5rem;
    }

    .product-pack-img {
        height: 210px;
    }

    .product-card-body {
        padding: 1.2rem 1.1rem;
    }

    .product-card-title {
        font-size: 1.22rem;
    }

    .product-price-tag {
        font-size: 1.25rem;
    }

    .product-btn-grid {
        gap: 0.5rem;
    }

    .product-btn-grid .btn {
        padding: 0.65rem 0.5rem;
        font-size: 0.82rem;
        text-align: center;
        justify-content: center;
    }

    .product-btn-grid .btn i {
        font-size: 0.8rem;
    }

    /* Filters & Search */
    .catalogue-toolbar {
        margin-bottom: 2rem;
        gap: 1rem;
    }

    .search-input-wrap input {
        padding: 0.75rem 2.8rem 0.75rem 2.6rem;
        font-size: 0.9rem;
    }

    .category-filters {
        gap: 0.45rem;
    }

    .filter-btn {
        padding: 0.45rem 0.9rem;
        font-size: 0.8rem;
    }

    /* Why Us */
    .why-us-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .why-card {
        padding: 1.4rem 1.1rem;
    }

    /* About Us Features */
    .about-stamp {
        display: none;
    }

    .about-features {
        gap: 1rem;
    }

    .feature-item {
        gap: 0.85rem;
    }

    .feature-item i {
        font-size: 1.2rem;
    }

    .feature-item h4,
    .feature-item h3 {
        font-size: 0.95rem;
    }

    .feature-item p {
        font-size: 0.85rem;
    }

    /* Distributor */
    .distributor-wrapper {
        padding: 1.5rem 1.1rem;
        border-radius: var(--radius-md);
    }

    .distributor-content h2 {
        font-size: 1.65rem;
    }

    .distributor-perks {
        gap: 0.75rem;
        margin-top: 1.25rem;
    }

    .perk-card {
        padding: 1rem;
    }

    .distributor-form-wrap {
        padding: 1.4rem 1.1rem;
        border-radius: var(--radius-sm);
    }

    .distributor-form h3 {
        font-size: 1.25rem;
    }

    /* Contact Cards */
    .contact-cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .contact-card {
        padding: 1.4rem 1.1rem;
    }

    /* Testimonials */
    .slider-wrapper {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .testimonial-card {
        padding: 1.4rem 1.1rem;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .floating-whatsapp-btn {
        bottom: 18px;
        right: 18px;
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    /* Product Detail Modal */
    .product-modal {
        padding: 0.6rem 0.4rem;
    }

    .modal-content {
        max-height: 94vh;
        width: 100%;
        border-radius: var(--radius-md);
    }

    .modal-body {
        padding: 2.75rem 1rem 1.25rem;
        gap: 1rem;
    }

    .modal-close {
        top: 0.65rem;
        right: 0.65rem;
        width: 34px;
        height: 34px;
        font-size: 1.1rem;
    }

    .modal-pack-wrap {
        padding: 1rem;
    }

    .modal-pack-img {
        max-height: 180px;
    }

    .modal-info-col h2 {
        font-size: 1.4rem;
    }

    .modal-btn-row {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .modal-action-box {
        padding: 1rem;
    }

    /* Cart Drawer */
    .cart-drawer {
        width: 100%;
        max-width: 100%;
        right: -100%;
    }

    .cart-drawer-header {
        padding: 1.1rem 1.25rem;
    }

    .cart-drawer-body {
        padding: 1.1rem 1.25rem;
    }

    .cart-drawer-footer {
        padding: 1.1rem 1.25rem;
    }
}

/* Extra Small Phones (<= 380px, e.g. iPhone SE / Fold) */
@media (max-width: 380px) {
    .brand-logo .logo-img {
        height: 32px;
    }

    .nav-search-btn, .cart-toggle-btn {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .mobile-toggle {
        font-size: 1.25rem;
    }

    .story-card {
        padding: 1.1rem 0.85rem;
    }

    .story-card h1 {
        font-size: 1.35rem;
    }

    .story-card h2 {
        font-size: 1.2rem;
    }

    .product-btn-grid {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .product-card-top {
        min-height: 200px;
    }

    .product-pack-img {
        height: 175px;
    }

    .filter-btn {
        padding: 0.38rem 0.7rem;
        font-size: 0.75rem;
    }

    .modal-price {
        font-size: 1.45rem;
    }

    .modal-weight {
        font-size: 0.8rem;
    }
}


/* ========================================================
   HERO SCROLL — RESPONSIVE MOBILE & TABLET LAYOUT
   Desktop (landscape, > 1024px or mouse devices) is untouched.
   - Portrait phones/tablets: image stage on top, story card
     docked at bottom (JS fits the frame into the free space).
   - Landscape phones/tablets: story card left, image right.
   ======================================================== */

/* ---------- PORTRAIT: phones & tablets ---------- */
@media (max-width: 1024px) and (orientation: portrait) {
    .hero-scroll-container {
        height: 380vh;
    }

    .hero-sticky-track {
        height: 100vh;
        height: 100svh;
    }

    .hero-canvas-overlay {
        background: radial-gradient(ellipse at 50% 30%, rgba(224, 205, 180, 0) 55%, rgba(224, 205, 180, 0.35) 100%);
    }

    .hero-story-layer {
        padding: 0;
        max-width: none;
    }

    .hero-story-slide {
        align-items: flex-end;
        justify-content: center;
        padding: 0 1rem 5.6rem;
    }

    .slide-1 .story-card,
    .slide-2 .story-card,
    .slide-3 .story-card,
    .slide-4 .story-card.center-card {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
        max-height: 46svh;
        overflow: hidden;
        text-align: left;
    }

    .slide-4 .story-card.center-card {
        text-align: center;
    }

    .story-card {
        padding: 1.4rem 1.6rem;
        border-radius: 18px;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
    }

    .story-card h1 { font-size: clamp(1.4rem, 4.2vw, 2rem); margin-bottom: 0.35rem; }
    .story-card h2 { font-size: clamp(1.25rem, 3.8vw, 1.8rem); margin-bottom: 0.35rem; }
    .hero-slide-sub { font-size: clamp(0.84rem, 2.2vw, 1rem); margin-bottom: 0.45rem; }

    .hero-slide-desc {
        font-size: clamp(0.8rem, 2vw, 0.95rem);
        line-height: 1.5;
        margin-bottom: 0.75rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .feature-bullets-grid { gap: 0.45rem; margin-bottom: 0; }
    .f-bullet { font-size: clamp(0.8rem, 2vw, 0.92rem); gap: 0.55rem; }

    .hero-actions,
    .center-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.6rem;
        margin: 0.25rem 0 0;
        width: 100%;
    }

    .hero-actions .btn {
        flex: 1 1 0;
        width: auto;
        justify-content: center;
        white-space: nowrap;
    }

    .hero-scroll-prompt,
    .gstin-tag,
    .slide-2 .story-card > .btn {
        display: none;
    }

    /* Step bar: full width, clear of the floating WhatsApp button */
    .hero-scroll-controller {
        left: 1rem;
        right: 88px;
        bottom: 0.9rem;
        width: auto;
        max-width: none;
        transform: none;
        gap: 0.4rem;
        padding: 0.5rem 1rem;
        border-radius: 18px;
    }

    .timeline-steps { display: flex; justify-content: space-between; }
    .timeline-footer { justify-content: center; }
}

/* Portrait phones */
@media (max-width: 640px) and (orientation: portrait) {
    .hero-story-slide { padding: 0 0.75rem 5.1rem; }

    .story-card { padding: 1rem 1.1rem; border-radius: 16px; }

    .hero-pill-badge {
        font-size: 0.64rem;
        line-height: 1.3;
        padding: 0.25rem 0.6rem;
        margin-bottom: 0.5rem;
    }

    .story-card h1 { font-size: 1.42rem; }
    .story-card h2 { font-size: 1.28rem; }

    .hero-actions .btn {
        padding: 0.62rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Two long CTAs on the last slide stack neatly */
    .slide-4 .center-actions { flex-direction: column; }
    .slide-4 .center-actions .btn { width: 100%; flex: none; }
    .slide-4 .hero-slide-desc { -webkit-line-clamp: 2; line-clamp: 2; }

    .hero-scroll-controller {
        left: 0.6rem;
        right: 76px;
        bottom: 0.6rem;
        padding: 0.4rem 0.7rem 0.45rem;
    }

    .timeline-step-btn { padding: 0.2rem 0.55rem; }
    .timeline-step-btn .step-label { display: none; }
}

@media (max-width: 380px) and (orientation: portrait) {
    .story-card h1 { font-size: 1.28rem; }
    .story-card h2 { font-size: 1.16rem; }
    .hero-slide-desc { -webkit-line-clamp: 2; line-clamp: 2; }
    .hero-actions .btn { font-size: 0.74rem; }
}

/* ---------- LANDSCAPE: phones & touch tablets ---------- */
@media (orientation: landscape) and (max-height: 540px),
       (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1366px) {
    .hero-sticky-track {
        height: 100vh;
        height: 100svh;
    }

    .hero-canvas-overlay {
        background: linear-gradient(90deg, rgba(224, 205, 180, 0.55) 0%, rgba(224, 205, 180, 0) 45%);
    }

    .hero-story-layer {
        padding: 0;
        max-width: none;
    }

    .hero-story-slide {
        align-items: center;
        justify-content: flex-start;
        padding: 4.5rem 1.25rem 4.25rem;
    }

    .slide-1 .story-card,
    .slide-2 .story-card,
    .slide-3 .story-card,
    .slide-4 .story-card.center-card {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: 44%;
        max-width: 460px;
        margin: 0;
        max-height: 100%;
        overflow: hidden;
        text-align: left;
    }

    .story-card {
        padding: 1.1rem 1.25rem;
        border-radius: 16px;
    }

    .hero-slide-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0.7rem;
    }

    .hero-actions,
    .center-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem;
        margin: 0.25rem 0 0;
    }

    .hero-actions .btn {
        flex: 1 1 auto;
        width: auto;
        justify-content: center;
    }

    .hero-scroll-prompt,
    .gstin-tag {
        display: none;
    }

    .hero-scroll-controller {
        left: 1.25rem;
        right: auto;
        bottom: 0.6rem;
        width: 44%;
        max-width: 460px;
        transform: none;
        gap: 0.3rem;
        padding: 0.4rem 0.9rem;
        border-radius: 16px;
    }

    .timeline-steps { display: flex; justify-content: space-between; }
    .timeline-footer { justify-content: center; }
}

/* Short landscape phones: tighter card */
@media (orientation: landscape) and (max-height: 540px) {
    .hero-story-slide { padding: 4rem 1rem 3.6rem; }
    .story-card { padding: 0.8rem 1rem; }
    .hero-pill-badge { font-size: 0.62rem; padding: 0.2rem 0.55rem; margin-bottom: 0.4rem; }
    .story-card h1 { font-size: 1.2rem; margin-bottom: 0.25rem; }
    .story-card h2 { font-size: 1.1rem; margin-bottom: 0.25rem; }
    .hero-slide-sub { font-size: 0.78rem; margin-bottom: 0.3rem; }
    .hero-slide-desc { font-size: 0.74rem; -webkit-line-clamp: 2; line-clamp: 2; margin-bottom: 0.45rem; }
    .feature-bullets-grid { display: none; }
    .slide-2 .story-card > .btn { margin-top: 0.4rem !important; }
    .hero-actions .btn { padding: 0.45rem 0.6rem; font-size: 0.74rem; }
    .timeline-step-btn { font-size: 0.68rem; padding: 0.1rem 0.45rem; }
    .timeline-step-btn .step-label { display: none; }
    .skip-animation-link { font-size: 0.72rem; }
    .floating-whatsapp-btn { width: 44px; height: 44px; font-size: 1.3rem; bottom: 12px; right: 12px; }
}

/* Short landscape phones: keep each card fully between navbar and step bar */
@media (orientation: landscape) and (max-height: 540px) {
    .navbar { padding: 0.4rem 0; }
    .hero-story-slide { padding: 4.1rem 1rem 4.4rem; }
    .hero-slide-desc { display: none; }
    .hero-slide-sub { margin-bottom: 0.5rem; }
    .story-card h1 br { display: none; }
}

@media (orientation: landscape) and (max-height: 420px) {
    .hero-pill-badge { display: none; }
}

/* ========================================================
   PRODUCT CARD IMAGES — consistent, centred, never cropped
   Every card gets the same image box; the pack is scaled with
   object-fit: contain (no distortion, nothing cut off) and
   centred with equal top/bottom spacing that also clears the
   corner badge. Hover zoom stays inside the box.
   ======================================================== */
.product-card-top {
    height: 340px;
    min-height: 0;
    padding: 3rem 1.25rem;
    box-sizing: border-box;
}

.product-pack-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    transform-origin: center center;
    margin: 0 auto;
}

.product-card:hover .product-pack-img {
    transform: scale(1.04);
}

@media (max-width: 1024px) {
    .product-card-top { height: 320px; padding: 2.9rem 1rem; }
}

@media (max-width: 860px) {
    .product-card-top { height: 300px; }
}

@media (max-width: 640px) {
    .product-card-top { height: 300px; padding: 3rem 1rem; }
    .product-pack-img { height: 100%; }
}

@media (max-width: 380px) {
    .product-card-top { height: 285px; padding: 3rem 0.9rem; }
    .product-pack-img { height: 100%; }
}

/* ==========================================================================
   BRAND MOTION & VISUAL POLISH
   Colours taken from the S3 logo: cube red #f61f25, tagline gold #dba855.
   Pure presentation layer — no content, layout structure or sizing changes.
   ========================================================================== */
:root {
    --clr-logo-red: #f61f25;
    --clr-logo-red-deep: #c8141a;
    --clr-logo-gold: #dba855;
    --clr-logo-gold-deep: #a97a2c;
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 0.22s;
    --dur-med: 0.45s;
    --dur-slow: 0.8s;
}

::selection {
    background: rgba(219, 168, 85, 0.35);
    color: var(--clr-dark);
}

/* Brand focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--clr-logo-gold);
    outline-offset: 3px;
}

/* ---------- Scroll reveal (activated by JS: html.motion-ready) ---------- */
html.motion-ready .reveal-on-scroll,
html.motion-ready .reveal-up,
html.motion-ready .reveal-left,
html.motion-ready .reveal-right,
html.motion-ready .reveal-fade {
    opacity: 0;
    transition:
        opacity var(--dur-slow) var(--ease-out-soft),
        translate var(--dur-slow) var(--ease-out-soft);
    transition-delay: calc(var(--i, 0) * 90ms);
    will-change: opacity, translate;
}

html.motion-ready .reveal-on-scroll { translate: 0 22px; transition-delay: 0ms; }
html.motion-ready .reveal-up        { translate: 0 30px; }
html.motion-ready .reveal-left      { translate: -36px 0; }
html.motion-ready .reveal-right     { translate: 36px 0; }

html.motion-ready .reveal-on-scroll.is-revealed,
html.motion-ready .reveal-up.is-revealed,
html.motion-ready .reveal-left.is-revealed,
html.motion-ready .reveal-right.is-revealed,
html.motion-ready .reveal-fade.is-revealed {
    opacity: 1;
    translate: 0 0;
}

/* Section headings: logo-style tagline badge + red/gold accent bar */
.section-header .badge,
.about-text .badge,
.distributor-content .badge {
    font-family: var(--font-heading);
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 600;
    border-color: rgba(219, 168, 85, 0.45);
    background: linear-gradient(135deg, rgba(219, 168, 85, 0.14), rgba(219, 168, 85, 0.06));
}

.section-header h2 {
    position: relative;
    padding-bottom: 0.9rem;
}

.section-header h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--clr-logo-red) 0 32%, var(--clr-logo-gold) 32% 100%);
    transform: translateX(-50%) scaleX(1);
    transform-origin: center;
    transition: transform 0.9s var(--ease-out-soft) 0.25s;
}

html.motion-ready .reveal-on-scroll:not(.is-revealed) .section-header h2::after {
    transform: translateX(-50%) scaleX(0);
}

/* ---------- Navigation ---------- */
.navbar {
    transition: padding var(--dur-med) var(--ease-out-soft),
                background-color var(--dur-med) ease,
                box-shadow var(--dur-med) ease;
}

.logo-img {
    transition: transform var(--dur-med) var(--ease-spring), filter var(--dur-med) ease;
}

.logo-img:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 4px 10px rgba(246, 31, 37, 0.35));
}

.nav-links a::after {
    width: 100%;
    transform: scaleX(0);
    transform-origin: right;
    background: linear-gradient(90deg, var(--clr-logo-red), var(--clr-logo-gold));
    transition: transform 0.35s var(--ease-out-soft);
}

.nav-links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ---------- Buttons ---------- */
.btn {
    transition:
        transform var(--dur-fast) var(--ease-out-soft),
        box-shadow var(--dur-fast) var(--ease-out-soft),
        background-color var(--dur-fast) ease,
        border-color var(--dur-fast) ease,
        color var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
}

/* Light sweep across filled buttons on hover */
.btn-primary::after,
.btn-buy-now::after,
.btn-whatsapp::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.6s var(--ease-out-soft);
}

.btn-primary:hover::after,
.btn-buy-now:hover::after,
.btn-whatsapp:hover::after {
    left: 130%;
}

.btn:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

.btn i {
    transition: transform var(--dur-fast) var(--ease-spring);
}

.btn:hover i.fa-arrow-right {
    transform: translateX(3px);
}

.btn-add-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(217, 21, 28, 0.45);
}

.filter-btn {
    transition:
        transform var(--dur-fast) var(--ease-out-soft),
        background-color var(--dur-fast) ease,
        color var(--dur-fast) ease,
        border-color var(--dur-fast) ease,
        box-shadow var(--dur-fast) ease;
}

.filter-btn:hover {
    transform: translateY(-2px);
}

.filter-btn.active {
    box-shadow: 0 6px 14px rgba(20, 18, 17, 0.22), inset 0 -2px 0 var(--clr-logo-gold);
}

/* ---------- Product cards ---------- */
.product-card {
    transition:
        transform var(--dur-med) var(--ease-out-soft),
        box-shadow var(--dur-med) var(--ease-out-soft),
        border-color var(--dur-med) ease,
        opacity var(--dur-slow) var(--ease-out-soft),
        translate var(--dur-slow) var(--ease-out-soft);
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(219, 168, 85, 0.55);
    box-shadow: 0 22px 40px -14px rgba(90, 50, 35, 0.28), 0 6px 14px rgba(0, 0, 0, 0.05);
}

.product-card-top {
    isolation: isolate;
}

/* Soft warm halo behind the pack */
.product-card-top::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%) scale(0.85);
    background: radial-gradient(closest-side, rgba(219, 168, 85, 0.22), rgba(219, 168, 85, 0));
    opacity: 0.6;
    z-index: -1;
    transition: transform var(--dur-slow) var(--ease-out-soft), opacity var(--dur-slow) ease;
    pointer-events: none;
}

.product-card:hover .product-card-top::before {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
}

/* Diagonal sheen across the image area */
.product-card-top::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 1;
    transition: left 0.9s var(--ease-out-soft);
}

.product-card:hover .product-card-top::after {
    left: 130%;
}

.product-pack-img {
    transition:
        transform 0.6s var(--ease-out-soft),
        filter 0.6s var(--ease-out-soft);
}

.product-card:hover .product-pack-img {
    transform: translateY(-4px) scale(1.04);
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.22));
}

.product-card-badge {
    transition: transform var(--dur-med) var(--ease-spring);
}

.product-card-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--clr-logo-red);
    vertical-align: 1px;
}

.product-card:hover .product-card-badge {
    transform: translateY(-1px);
}

.product-card-title {
    transition: color var(--dur-fast) ease;
}

/* ---------- Other cards ---------- */
.why-card,
.testimonial-card,
.contact-card {
    transition:
        transform var(--dur-med) var(--ease-out-soft),
        box-shadow var(--dur-med) var(--ease-out-soft),
        border-color var(--dur-med) ease,
        opacity var(--dur-slow) var(--ease-out-soft),
        translate var(--dur-slow) var(--ease-out-soft);
}

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

.contact-card:hover,
.testimonial-card:hover {
    border-color: rgba(219, 168, 85, 0.5);
}

.about-img {
    transition: transform 1s var(--ease-out-soft);
}

/* Floating WhatsApp: gentle attention pulse */
.floating-whatsapp-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.55);
    animation: s3Ripple 2.6s var(--ease-out-soft) infinite;
    pointer-events: none;
}

@keyframes s3Ripple {
    0%   { transform: scale(1);   opacity: 0.8; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Brand scrollbar (desktop) */
@media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: var(--clr-light); }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--clr-logo-gold), var(--clr-primary));
        border-radius: 10px;
        border: 2px solid var(--clr-light);
    }
}

/* Touch devices: no hover-lift jitter, keep press feedback */
@media (hover: none) {
    .product-card:hover,
    .why-card:hover,
    .testimonial-card:hover,
    .contact-card:hover {
        transform: none;
    }
    .product-card:hover .product-card-top::after { left: -60%; }
    .product-card:active {
        transform: scale(0.99);
    }
}

/* Smaller reveal distance on phones */
@media (max-width: 640px) {
    html.motion-ready .reveal-up    { translate: 0 20px; }
    html.motion-ready .reveal-left  { translate: 0 20px; }
    html.motion-ready .reveal-right { translate: 0 20px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
    }
    html.motion-ready .reveal-on-scroll,
    html.motion-ready .reveal-up,
    html.motion-ready .reveal-left,
    html.motion-ready .reveal-right,
    html.motion-ready .reveal-fade {
        opacity: 1;
        translate: none;
    }
}

/* ==========================================================================
   ABOUT SECTION — AUTO-SCROLLING PRODUCT CATALOGUE GALLERY
   ========================================================================== */
.about-image-wrapper {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(219, 168, 85, 0.18), rgba(219, 168, 85, 0) 60%),
        linear-gradient(165deg, #fbf8f3 0%, #f3e8d8 100%);
    border: 1px solid rgba(219, 168, 85, 0.35);
}

.about-gallery {
    --gallery-h: 210px;
    --gallery-gap: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 2rem 0 6.75rem;   /* bottom space keeps the S3 stamp clear of the packs */
    user-select: none;
}

.about-gallery-row {
    position: relative;
    overflow: hidden;
    /* soft fade at both ends so packs glide in and out */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.about-gallery-track {
    display: flex;
    align-items: center;
    gap: var(--gallery-gap);
    width: max-content;
    padding: 0.9rem 0;
    animation: aboutGalleryLeft var(--gallery-duration, 48s) linear infinite;
    will-change: transform;
}

/* each set ends with the same gap it starts with, so -50% is a perfect seam */
.about-gallery-track::after {
    content: '';
    flex: 0 0 0;
    margin-left: calc(var(--gallery-gap) * -1);
}

.about-gallery-row[data-direction="right"] .about-gallery-track {
    animation-name: aboutGalleryRight;
}

@keyframes aboutGalleryLeft {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-50% - var(--gallery-gap) / 2), 0, 0); }
}

@keyframes aboutGalleryRight {
    from { transform: translate3d(calc(-50% - var(--gallery-gap) / 2), 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* Pause: hover (mouse), touch, or when scrolled off screen */
@media (hover: hover) and (pointer: fine) {
    .about-gallery:hover .about-gallery-track {
        animation-play-state: paused;
    }
}

.about-gallery.is-paused .about-gallery-track,
.about-gallery.is-offscreen .about-gallery-track {
    animation-play-state: paused;
}

.about-gallery-item {
    flex: 0 0 auto;
    height: var(--gallery-h);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s var(--ease-out-soft, ease), filter 0.5s ease;
}

.about-gallery-item img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;            /* full pack, never cropped or stretched */
    border-radius: 3px;
    filter: drop-shadow(0 10px 12px rgba(20, 18, 17, 0.22));
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .about-gallery-item:hover {
        transform: translateY(-6px) scale(1.05);
        filter: drop-shadow(0 0 14px rgba(219, 168, 85, 0.45));
    }
}

/* Image area no longer zooms as a whole */
.about-image-wrapper:hover .about-img { transform: none; }

.about-stamp {
    z-index: 2;
    box-shadow: 0 10px 24px -8px rgba(20, 18, 17, 0.45);
}

/* Tablet */
@media (max-width: 1024px) {
    .about-gallery {
        --gallery-h: 185px;
        --gallery-gap: 1.35rem;
        gap: 1.35rem;
    }
}

/* Single-column layout */
@media (max-width: 860px) {
    .about-gallery {
        --gallery-h: 175px;
        padding: 1.6rem 0 6.25rem;
    }
}

/* Phones */
@media (max-width: 640px) {
    .about-gallery {
        --gallery-h: 150px;
        --gallery-gap: 1.1rem;
        gap: 1rem;
        padding: 1.25rem 0 5.75rem;
    }
    .about-gallery-row {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
}

@media (max-width: 380px) {
    .about-gallery { --gallery-h: 130px; }
}

/* Reduced motion: no auto-scroll, let people swipe/scroll the rows instead */
@media (prefers-reduced-motion: reduce) {
    .about-gallery-row { overflow-x: auto; }
    .about-gallery-track { animation: none !important; transform: none !important; }
}

/* Keep the long gallery track from widening the About grid column */
.about-grid > * {
    min-width: 0;
}

.about-image-wrapper {
    min-width: 0;
}

.about-gallery,
.about-gallery-row {
    min-width: 0;
    max-width: 100%;
}

/* Phones: the S3 stamp is hidden by the existing design, so balance the padding */
@media (max-width: 640px) {
    .about-gallery {
        padding: 1.25rem 0;
    }
}

@media (max-width: 860px) {
    .about-image-wrapper {
        width: 100%;
    }
}

/* ==========================================================================
   LOGO COLOUR SYSTEM — red primary, gold accent, charcoal, subtle brown
   ========================================================================== */
:root {
    --clr-red-bright: #ff4046;      /* logo red, brightened for dark backgrounds */
}

/* Gold icons: deep gold on light sections, logo gold on dark surfaces */
.text-gold { color: var(--clr-gold); }

.navbar .text-gold,
.mobile-menu .text-gold,
.story-card .text-gold,
.glass-panel-dark .text-gold,
.hero-scroll-controller .text-gold,
.footer .text-gold,
footer .text-gold,
.about-stamp .text-gold,
.distributor .text-gold,
.cart-drawer-header .text-gold {
    color: var(--clr-accent);
}

/* Navigation highlights in logo red */
.nav-links a:hover,
.mobile-menu a:hover {
    color: var(--clr-red-bright);
}

.cart-badge {
    background: var(--clr-logo-red, #f61f25);
    color: #ffffff;
}

/* Section labels: subtle brown text on a soft gold tint */
.badge {
    color: var(--clr-brown);
    background: linear-gradient(135deg, rgba(219, 168, 85, 0.14), rgba(219, 168, 85, 0.05));
    border-color: rgba(219, 168, 85, 0.45);
}

/* Secondary (outline) buttons: red outline, red text */
.btn-secondary {
    color: var(--clr-primary);
    border-color: var(--clr-primary);
}

.btn-secondary:hover {
    background: rgba(217, 21, 28, 0.07);
    color: var(--clr-primary-dark);
}

/* Outline buttons placed on dark hero cards stay readable */
.story-card .btn-secondary {
    color: #ffffff;
    border-color: rgba(255, 64, 70, 0.75);
}

.story-card .btn-secondary:hover {
    background: rgba(255, 64, 70, 0.14);
    color: #ffffff;
}

/* Filled call-to-action buttons */
.btn-primary,
.btn-buy-now {
    background: var(--grad-primary);
}

.btn-buy-now:hover {
    background: linear-gradient(135deg, #c8141a, #8f0d12);
    box-shadow: 0 12px 24px -6px rgba(217, 21, 28, 0.5);
}

/* Product cards: red title hover, subtle brown pack-size chip */
.product-card-title:hover {
    color: var(--clr-primary);
}

/* Filter chips: red hover, charcoal + gold active */
.filter-btn:hover {
    border-color: var(--clr-primary);
    color: var(--clr-primary);
}

/* Hero story cards: neutral charcoal glass instead of brown */
.glass-panel-dark {
    background: rgba(18, 16, 15, 0.86);
}

.story-card {
    border-color: rgba(219, 168, 85, 0.35);
}

/* Inputs: red focus */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 3px rgba(217, 21, 28, 0.12) !important;
}

/* Selection */
::selection {
    background: rgba(246, 31, 37, 0.18);
    color: var(--clr-dark);
}

/* ==========================================================================
   HERO STORY CARDS — COMPACT SIZE
   Narrower boxes, tighter padding/spacing, slightly smaller type.
   Same content, colours, layout positions and animations.
   ========================================================================== */
.story-card {
    padding: 1.2rem 1.45rem;
    border-radius: 18px;
}

.slide-1 .story-card { max-width: 400px; }
.slide-2 .story-card { max-width: 385px; }
.slide-3 .story-card { max-width: 400px; }
.slide-4 .story-card.center-card { max-width: 450px; }

.hero-pill-badge {
    font-size: 0.68rem;
    padding: 0.24rem 0.7rem;
    margin-bottom: 0.6rem;
    gap: 0.4rem;
}

.story-card h1 {
    font-size: 1.75rem;
    line-height: 1.16;
    margin-bottom: 0.35rem;
}

.story-card h2 {
    font-size: 1.55rem;
    line-height: 1.18;
    margin-bottom: 0.35rem;
}

.hero-slide-sub {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.hero-slide-desc {
    font-size: 0.84rem;
    line-height: 1.5;
    margin-bottom: 0.85rem;
}

.feature-bullets-grid {
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.f-bullet {
    font-size: 0.84rem;
    gap: 0.55rem;
}

.f-bullet i { font-size: 0.95rem; }

.story-card .hero-actions { gap: 0.65rem; }

.story-card .btn-lg {
    padding: 0.7rem 1.35rem;
    font-size: 0.9rem;
}

.story-card .btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
}

.slide-2 .story-card > .btn { margin-top: 0.85rem !important; }

.center-actions { margin-top: 0.85rem; }

.hero-scroll-prompt {
    margin-top: 1rem;
    font-size: 0.78rem;
}

.gstin-tag {
    margin-top: 0.85rem;
    font-size: 0.74rem;
}

/* Portrait tablets & phones (docked card) */
@media (max-width: 1024px) and (orientation: portrait) {
    .slide-1 .story-card,
    .slide-2 .story-card,
    .slide-3 .story-card,
    .slide-4 .story-card.center-card {
        max-width: 540px;
    }

    .story-card { padding: 1.1rem 1.3rem; }
    .story-card h1 { font-size: clamp(1.25rem, 3.6vw, 1.7rem); }
    .story-card h2 { font-size: clamp(1.12rem, 3.3vw, 1.5rem); }
    .hero-slide-sub { font-size: clamp(0.8rem, 2vw, 0.9rem); margin-bottom: 0.35rem; }
    .hero-slide-desc { font-size: clamp(0.78rem, 1.9vw, 0.86rem); margin-bottom: 0.6rem; }
    .f-bullet { font-size: clamp(0.78rem, 1.9vw, 0.86rem); }
    .feature-bullets-grid { gap: 0.35rem; margin-bottom: 0; }
}

@media (max-width: 640px) and (orientation: portrait) {
    .story-card { padding: 0.85rem 0.95rem; border-radius: 14px; }
    .hero-pill-badge { font-size: 0.6rem; margin-bottom: 0.4rem; padding: 0.2rem 0.55rem; }
    .story-card h1 { font-size: 1.28rem; }
    .story-card h2 { font-size: 1.15rem; }
    .hero-slide-sub { font-size: 0.8rem; }
    .hero-slide-desc { font-size: 0.77rem; line-height: 1.45; }
    .f-bullet { font-size: 0.77rem; }
    .f-bullet i { font-size: 0.85rem; }
    .story-card .btn-lg,
    .hero-actions .btn { padding: 0.55rem 0.5rem; font-size: 0.76rem; }
    .slide-4 .center-actions { gap: 0.45rem; }
}

@media (max-width: 380px) and (orientation: portrait) {
    .story-card h1 { font-size: 1.18rem; }
    .story-card h2 { font-size: 1.08rem; }
}

/* Landscape phones & touch tablets (card beside the image) */
@media (orientation: landscape) and (max-height: 540px),
       (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1366px) {
    .slide-1 .story-card,
    .slide-2 .story-card,
    .slide-3 .story-card,
    .slide-4 .story-card.center-card {
        width: 40%;
        max-width: 400px;
    }
    .hero-scroll-controller { width: 40%; max-width: 400px; }
}

@media (orientation: landscape) and (max-height: 540px) {
    .story-card { padding: 0.7rem 0.9rem; }
    .story-card h1 { font-size: 1.08rem; }
    .story-card h2 { font-size: 1rem; }
    .hero-slide-sub { font-size: 0.74rem; }
    .story-card .btn-lg,
    .hero-actions .btn { padding: 0.42rem 0.55rem; font-size: 0.72rem; }
}

/* Compact cards: keep the two CTAs on one row on desktop, and a clean gap above the step bar on phones */
.story-card .hero-actions:not(.center-actions) {
    flex-wrap: nowrap;
}

.story-card .hero-actions:not(.center-actions) .btn-lg {
    padding: 0.68rem 1.05rem;
    font-size: 0.86rem;
    white-space: nowrap;
}

@media (max-width: 640px) and (orientation: portrait) {
    .hero-story-slide { padding-bottom: 5.65rem; }
}

/* Office address → Google Maps link (looks like the existing text) */
.office-map-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease, color 0.2s ease;
}

.office-map-link:hover,
.office-map-link:focus-visible {
    color: var(--clr-primary);
    background-size: 100% 1px;
}

.footer .office-map-link:hover,
.footer .office-map-link:focus-visible {
    color: var(--clr-red-bright, #ff4046);
}

/* ==========================================================================
   LIGHT ELEGANT THEME — ivory & cream, light beige, subtle light brown,
   soft logo-red highlights. Colours only: no layout / font / content change.
   ========================================================================== */
:root {
    /* Core palette */
    --lt-ivory: #fffcf6;          /* cards, panels */
    --lt-cream: #faf4ea;          /* alternate section background */
    --lt-cream-2: #f6eddf;        /* footer / deeper cream */
    --lt-beige: #efe2cf;          /* soft accents, chips, tracks */
    --lt-beige-line: #e6d6bf;     /* borders & dividers */
    --lt-brown-light: #a98563;    /* icons, labels */
    --lt-brown: #7c5c42;          /* secondary text accents */
    --lt-ink: #3a2d24;            /* headings / primary text (warm, not black) */
    --lt-ink-soft: #5c4b3e;       /* body text */
    --lt-muted: #8a786a;          /* muted text */
    --lt-red: #d23a40;            /* soft logo red */
    --lt-red-deep: #b42d33;
    --lt-red-tint: #fbebe8;

    /* Map onto existing variables used across the site */
    --clr-primary: var(--lt-red);
    --clr-primary-dark: var(--lt-red-deep);
    --clr-primary-light: var(--lt-red-tint);
    --clr-accent: #c9a26a;        /* soft gold-beige accent */
    --clr-gold: var(--lt-brown-light);
    --clr-brown: var(--lt-brown);
    --clr-dark: var(--lt-ink);
    --clr-dark-surface: #4a3a2e;
    --clr-text: var(--lt-ink-soft);
    --clr-muted: var(--lt-muted);
    --clr-light: var(--lt-cream);
    --clr-border: var(--lt-beige-line);
    --clr-red-bright: var(--lt-red);
    --clr-logo-red: #e2363c;

    --grad-primary: linear-gradient(135deg, #dc464c, #bd3036);
    --grad-water: linear-gradient(135deg, #d23a40 0%, #b0805a 100%);
    --grad-gold: linear-gradient(90deg, #e2363c, #d8b788);

    --shadow-soft: 0 10px 25px -8px rgba(124, 92, 66, 0.10), 0 6px 10px -6px rgba(124, 92, 66, 0.06);
    --shadow-card: 0 16px 34px -12px rgba(124, 92, 66, 0.18), 0 4px 12px rgba(124, 92, 66, 0.05);
    --shadow-glow: 0 10px 26px -8px rgba(210, 58, 64, 0.35);
}

body { background-color: var(--lt-ivory); color: var(--lt-ink-soft); }
h1, h2, h3, h4, h5, h6 { color: var(--lt-ink); }
.bg-light { background-color: var(--lt-cream); }
::selection { background: rgba(210, 58, 64, 0.16); color: var(--lt-ink); }

/* ---------- Navigation ---------- */
.navbar,
.navbar.scrolled {
    background: rgba(255, 252, 246, 0.94);
    border-bottom: 1px solid var(--lt-beige-line);
    box-shadow: 0 6px 20px -14px rgba(124, 92, 66, 0.35);
}
.nav-links a { color: var(--lt-ink-soft); }
.nav-links a:hover { color: var(--lt-red); }

.nav-search-btn,
.cart-toggle-btn {
    background: var(--lt-cream);
    border: 1px solid var(--lt-beige-line);
    color: var(--lt-ink);
}
.nav-search-btn:hover,
.cart-toggle-btn:hover {
    background: var(--lt-red);
    border-color: var(--lt-red);
    color: #ffffff;
}
.cart-badge { background: var(--lt-red); color: #ffffff; }
.mobile-toggle,
.close-menu { color: var(--lt-ink); }

.mobile-menu {
    background: var(--lt-ivory);
    box-shadow: -10px 0 35px rgba(124, 92, 66, 0.25);
}
.mobile-menu-header { border-bottom-color: var(--lt-beige-line); }
.mobile-menu a { color: var(--lt-ink); }
.mobile-menu a:hover { color: var(--lt-red); }
.mobile-contact-note { color: var(--lt-muted); }

/* White "S3 BRAND" wordmark → warm ink on light backgrounds (image file untouched) */
.logo-img,
.mobile-logo-img,
.footer-logo-img {
    filter: url(#s3LogoOnLight);
}
.logo-img:hover {
    filter: url(#s3LogoOnLight) drop-shadow(0 4px 10px rgba(210, 58, 64, 0.25));
}

/* ---------- Hero ---------- */
.glass-panel-dark {
    background: rgba(255, 252, 246, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.story-card {
    color: var(--lt-ink-soft);
    border: 1px solid var(--lt-beige-line);
    box-shadow: 0 18px 40px -16px rgba(124, 92, 66, 0.35);
}
.story-card h1,
.story-card h2 { color: var(--lt-ink); }
.hero-slide-sub { color: var(--lt-brown); }
.hero-slide-desc { color: var(--lt-ink-soft); }
.f-bullet { color: var(--lt-ink-soft); }
.hero-pill-badge {
    background: var(--lt-cream);
    color: var(--lt-brown);
    border-color: var(--lt-beige-line);
}
.story-card .text-gold,
.glass-panel-dark .text-gold,
.hero-scroll-controller .text-gold { color: var(--lt-brown-light); }
.hero-scroll-prompt,
.gstin-tag { color: var(--lt-muted); }
.mouse-mini { border-color: var(--lt-brown-light); }
.wheel-mini { background: var(--lt-brown-light); }

.story-card .btn-secondary {
    color: var(--lt-red);
    border-color: var(--lt-red);
    background: transparent;
}
.story-card .btn-secondary:hover {
    background: var(--lt-red-tint);
    color: var(--lt-red-deep);
}

.hero-scroll-controller {
    background: rgba(255, 252, 246, 0.92);
    border: 1px solid var(--lt-beige-line);
    box-shadow: 0 10px 26px -12px rgba(124, 92, 66, 0.35);
}
.timeline-step-btn { color: var(--lt-muted); }
.timeline-step-btn:hover { color: var(--lt-ink); }
.timeline-step-btn.active { color: var(--lt-ink); background: var(--lt-beige); }
.timeline-step-btn .step-num { color: var(--lt-red); }
.timeline-progress-track { background: var(--lt-beige); }
.timeline-progress-bar { background: linear-gradient(90deg, var(--lt-red), #d8b788); }
.skip-animation-link { color: var(--lt-red); }

/* ---------- Badges, chips, filters ---------- */
.badge {
    color: var(--lt-brown);
    background: var(--lt-cream);
    border-color: var(--lt-beige-line);
}
.text-gold { color: var(--lt-brown-light); }

.filter-btn {
    background: var(--lt-ivory);
    border-color: var(--lt-beige-line);
    color: var(--lt-ink-soft);
}
.filter-btn.active {
    background: var(--lt-red);
    border-color: var(--lt-red);
    color: #ffffff;
    box-shadow: 0 6px 14px -6px rgba(210, 58, 64, 0.5);
}

/* ---------- Product cards ---------- */
.product-card {
    background: var(--lt-ivory);
    border-color: var(--lt-beige-line);
}
.product-card:hover { border-color: #dcc4a3; }
.product-card-top { background: var(--lt-cream); }
.product-card-badge {
    background: rgba(255, 252, 246, 0.95);
    color: var(--lt-brown);
    border: 1px solid var(--lt-beige-line);
}

/* ---------- Other surfaces ---------- */
.why-card,
.testimonial-card,
.contact-card,
.distributor-wrapper {
    background: var(--lt-ivory);
    border-color: var(--lt-beige-line);
}
.why-icon-wrap { background: var(--lt-red-tint); }
.client-avatar { background: var(--lt-beige); color: var(--lt-brown); }
.step.active { background: var(--lt-red); color: #ffffff; }
.company-official-banner-wrap { background: var(--lt-cream-2); }
.modal-backdrop { background: rgba(58, 45, 36, 0.45); }
.modal-close:hover { background: var(--lt-red); color: #ffffff; }
.floating-whatsapp-btn .tooltip { background: var(--lt-ink); color: var(--lt-ivory); }

.about-stamp {
    background: rgba(255, 252, 246, 0.95);
    color: var(--lt-brown);
    border: 1px solid var(--lt-beige-line);
}
.about-stamp span { color: var(--lt-red); }
.about-image-wrapper {
    background: linear-gradient(165deg, var(--lt-ivory) 0%, var(--lt-beige) 100%);
    border-color: var(--lt-beige-line);
}

/* ---------- Footer ---------- */
.footer {
    background: var(--lt-cream-2);
    color: var(--lt-ink-soft);
    border-top: 1px solid var(--lt-beige-line);
}
.brand-col p,
.contact-info li,
.contact-info a,
.footer-links a { color: var(--lt-ink-soft); }
.footer-col h4 { color: var(--lt-ink); }
.footer-col h4::after { background: var(--lt-red); }
.contact-info a:hover,
.footer-links a:hover,
.footer .office-map-link:hover,
.footer .office-map-link:focus-visible { color: var(--lt-red); }
.footer .text-gold { color: var(--lt-brown-light); }
.social-links a {
    background: var(--lt-ivory);
    border: 1px solid var(--lt-beige-line);
    color: var(--lt-brown);
}
.social-links a:hover { background: var(--lt-red); border-color: var(--lt-red); color: #ffffff; }
.footer-bottom {
    border-top-color: var(--lt-beige-line);
    color: var(--lt-muted);
}

/* Scrollbar */
@media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar-track { background: var(--lt-cream); }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #d8b788, var(--lt-brown-light));
        border-color: var(--lt-cream);
    }
}

/* ==========================================================================
   NAVBAR — ORIGINAL COLOURS (restored exactly; light palette applies elsewhere)
   ========================================================================== */
.navbar {
    background: rgba(30, 19, 12, 0.94);
    border-bottom: 1px solid rgba(245, 158, 11, 0.18);
    box-shadow: none;
}

.navbar.scrolled {
    background: rgba(30, 19, 12, 0.98);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(245, 158, 11, 0.35);
}

.navbar .nav-links a { color: #ede4d8; }
.navbar .nav-links a:hover { color: #f59e0b; }
.navbar .nav-links a::after { background: #f59e0b; }

.navbar .nav-search-btn,
.navbar .cart-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #ffffff;
}

.navbar .nav-search-btn:hover,
.navbar .cart-toggle-btn:hover {
    background: #c26910;
    border-color: rgba(245, 158, 11, 0.3);
    color: #ffffff;
}

.navbar .cart-badge {
    background: #f59e0b;
    color: #1e130c;
}

.navbar .mobile-toggle { color: #ffffff; }

.navbar .text-gold { color: #f59e0b; }

/* Logo shown exactly as originally on the dark navbar */
.navbar .logo-img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.navbar .logo-img:hover {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 4px 10px rgba(245, 158, 11, 0.3));
}

/* ==========================================================================
   FINAL THEME — "SANDALWOOD & TEMPLE RED"
   Sandalwood ivory content · white product cards · espresso navbar & footer
   · temple red (logo) actions · antique gold (logo tagline) details
   · herbal green for "natural" marks. Colours only.
   ========================================================================== */
:root {
    --th-ivory: #fbf7f0;        /* page background — warm sandalwood ivory */
    --th-paper: #ffffff;        /* cards & panels */
    --th-sandal: #f5ecdf;       /* alternate sections, image wells */
    --th-sandal-2: #ecdfca;     /* chips, tracks, soft fills */
    --th-line: #e6d8c3;         /* borders & dividers */
    --th-espresso: #1e130c;     /* navbar (original) & footer */
    --th-espresso-2: #2a1c13;
    --th-ink: #2b2019;          /* headings */
    --th-body: #4b3f35;         /* body text */
    --th-muted: #7b6b5d;        /* secondary text */
    --th-red: #c41e26;          /* temple red — from the logo */
    --th-red-deep: #9e1820;
    --th-red-tint: #fbeceb;
    --th-gold: #a9822f;         /* antique gold for text/icons on light */
    --th-gold-bright: #dba855;  /* logo tagline gold, on dark */
    --th-herbal: #3f7a55;       /* natural / check marks */

    /* feed the existing variables */
    --lt-ivory: var(--th-paper);
    --lt-cream: var(--th-sandal);
    --lt-cream-2: var(--th-sandal);
    --lt-beige: var(--th-sandal-2);
    --lt-beige-line: var(--th-line);
    --lt-brown-light: var(--th-gold);
    --lt-brown: #6e5442;
    --lt-ink: var(--th-ink);
    --lt-ink-soft: var(--th-body);
    --lt-muted: var(--th-muted);
    --lt-red: var(--th-red);
    --lt-red-deep: var(--th-red-deep);
    --lt-red-tint: var(--th-red-tint);

    --clr-primary: var(--th-red);
    --clr-primary-dark: var(--th-red-deep);
    --clr-primary-light: var(--th-red-tint);
    --clr-secondary: var(--th-herbal);
    --clr-accent: var(--th-gold-bright);
    --clr-gold: var(--th-gold);
    --clr-dark: var(--th-ink);
    --clr-text: var(--th-body);
    --clr-muted: var(--th-muted);
    --clr-light: var(--th-sandal);
    --clr-border: var(--th-line);

    --grad-primary: linear-gradient(135deg, #cf2830, #a81c23);
    --grad-water: linear-gradient(120deg, #c41e26 0%, #b07a2a 100%);
    --grad-gold: linear-gradient(90deg, #c41e26, #dba855);

    --shadow-soft: 0 8px 22px -10px rgba(43, 32, 25, 0.14), 0 2px 6px rgba(43, 32, 25, 0.04);
    --shadow-card: 0 18px 36px -16px rgba(43, 32, 25, 0.22), 0 3px 10px rgba(43, 32, 25, 0.05);
    --shadow-glow: 0 10px 24px -8px rgba(196, 30, 38, 0.38);
}

body { background-color: var(--th-ivory); color: var(--th-body); }
h1, h2, h3, h4, h5, h6 { color: var(--th-ink); }
.bg-light { background-color: var(--th-sandal); }
::selection { background: rgba(196, 30, 38, 0.15); color: var(--th-ink); }

/* Section labels & icons in antique gold */
.badge {
    color: #7a5d24;
    background: #fbf3e4;
    border-color: #e4cf9f;
}
.text-gold { color: var(--th-gold); }
.text-green { color: var(--th-herbal); }

/* Buttons */
.btn-primary,
.btn-buy-now { background: var(--grad-primary); box-shadow: var(--shadow-glow); }
.btn-primary:hover,
.btn-buy-now:hover { background: linear-gradient(135deg, #b8222a, #8c141b); box-shadow: 0 14px 28px -8px rgba(196, 30, 38, 0.5); }
.btn-secondary,
.story-card .btn-secondary { color: var(--th-red); border-color: var(--th-red); background: transparent; }
.btn-secondary:hover,
.story-card .btn-secondary:hover { background: var(--th-red-tint); color: var(--th-red-deep); }
.btn-add-cart { background: var(--th-paper); color: var(--th-ink); border-color: var(--th-line); }
.btn-add-cart:hover { background: var(--th-paper); color: var(--th-red); border-color: var(--th-red); }

/* Filters */
.filter-btn { background: var(--th-paper); border-color: var(--th-line); color: var(--th-body); }
.filter-btn:hover { border-color: var(--th-red); color: var(--th-red); }
.filter-btn.active { background: var(--th-espresso); border-color: var(--th-espresso); color: #ffffff; box-shadow: 0 6px 14px -6px rgba(30, 19, 12, 0.45), inset 0 -2px 0 var(--th-gold-bright); }

/* Product cards: white card, sandalwood image well */
.product-card { background: var(--th-paper); border-color: var(--th-line); }
.product-card:hover { border-color: #d9bf8f; }
.product-card-top { background: var(--th-sandal); }
.product-card-badge { background: rgba(255, 255, 255, 0.95); color: #6e5442; border: 1px solid var(--th-line); }
.product-card-title { color: var(--th-ink); }
.product-price-tag { color: var(--th-ink); }
.product-pack-weight { background: #fbf3e4; color: #7a5d24; }

/* Other content cards */
.why-card,
.testimonial-card,
.contact-card,
.distributor-wrapper { background: var(--th-paper); border-color: var(--th-line); }
.why-icon-wrap { background: var(--th-red-tint); }
.feature-item i { background: #fbf3e4; }
.stars { color: #d39b2a; }
.client-avatar { background: var(--th-sandal-2); color: #6e5442; }

/* Hero: white glass cards on the beige studio frames */
.glass-panel-dark { background: rgba(255, 255, 255, 0.92); }
.story-card { border-color: var(--th-line); color: var(--th-body); }
.story-card h1,
.story-card h2 { color: var(--th-ink); }
.hero-slide-sub { color: #8a6524; }
.hero-pill-badge { background: #fbf3e4; color: #7a5d24; border-color: #e4cf9f; }
.hero-scroll-controller { background: rgba(255, 255, 255, 0.94); border-color: var(--th-line); }
.timeline-step-btn.active { background: var(--th-sandal-2); color: var(--th-ink); }
.timeline-step-btn .step-num,
.skip-animation-link { color: var(--th-red); }
.timeline-progress-track { background: var(--th-sandal-2); }
.timeline-progress-bar { background: linear-gradient(90deg, var(--th-red), var(--th-gold-bright)); }

/* About gallery panel & stamp */
.about-image-wrapper {
    background: linear-gradient(165deg, #fffdf9 0%, var(--th-sandal-2) 100%);
    border-color: var(--th-line);
}
.about-stamp { background: var(--th-espresso); color: #e9dfd2; border-color: rgba(219, 168, 85, 0.4); }
.about-stamp span { color: var(--th-gold-bright); }

/* Phone menu matches the espresso navbar */
.mobile-menu { background: var(--th-espresso); box-shadow: -10px 0 35px rgba(0, 0, 0, 0.45); }
.mobile-menu-header { border-bottom-color: rgba(219, 168, 85, 0.2); }
.mobile-menu a { color: #ede4d8; }
.mobile-menu a:hover { color: var(--th-gold-bright); }
.mobile-menu .close-menu { color: #ffffff; }
.mobile-menu .text-gold { color: var(--th-gold-bright); }
.mobile-contact-note { color: #a89a8f; }
.mobile-logo-img { filter: none; }

/* Footer: espresso, bookending the navbar */
.footer {
    background: var(--th-espresso);
    color: #cbbfb2;
    border-top: 3px solid rgba(219, 168, 85, 0.45);
}
.footer-logo-img { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); }
.brand-col p,
.contact-info li,
.contact-info a,
.footer-links a { color: #bfb2a5; }
.footer-col h4 { color: #ffffff; }
.footer-col h4::after { background: var(--th-gold-bright); }
.footer .text-gold { color: var(--th-gold-bright); }
.contact-info a:hover,
.footer-links a:hover,
.footer .office-map-link:hover,
.footer .office-map-link:focus-visible { color: var(--th-gold-bright); }
.social-links a { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: #ffffff; }
.social-links a:hover { background: var(--th-red); border-color: var(--th-red); color: #ffffff; }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.08); color: #9a8c7f; }

/* Scrollbar */
@media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar-track { background: var(--th-ivory); }
    ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--th-gold-bright), var(--th-gold)); border-color: var(--th-ivory); }
}

/* ==========================================================================
   LESS RED — sandalwood brown is the main action colour, antique gold for
   details; logo red kept only for tiny brand touches (badge dots, heading bar).
   ========================================================================== */
:root {
    --th-brown: #7a5230;        /* sandalwood brown — buttons, links, active states */
    --th-brown-deep: #5b3b21;
    --th-brown-tint: #f4ebdf;

    /* re-point the former "red" roles to sandalwood brown */
    --th-red: var(--th-brown);
    --th-red-deep: var(--th-brown-deep);
    --th-red-tint: var(--th-brown-tint);

    --clr-primary: var(--th-brown);
    --clr-primary-dark: var(--th-brown-deep);
    --clr-primary-light: var(--th-brown-tint);

    --grad-primary: linear-gradient(135deg, #8a5d36, #634024);
    --grad-water: linear-gradient(120deg, #7a5230 0%, #b8893a 100%);   /* headline highlight: brown → gold */
    --grad-gold: linear-gradient(90deg, #b8893a, #dba855);
    --shadow-glow: 0 10px 24px -8px rgba(99, 64, 36, 0.38);
}

/* Buttons */
.btn-primary,
.btn-buy-now {
    background: var(--grad-primary);
    box-shadow: var(--shadow-glow);
}
.btn-primary:hover,
.btn-buy-now:hover {
    background: linear-gradient(135deg, #774f2d, #4f321b);
    box-shadow: 0 14px 28px -8px rgba(99, 64, 36, 0.5);
}
.btn-secondary,
.story-card .btn-secondary {
    color: var(--th-brown);
    border-color: var(--th-brown);
}
.btn-secondary:hover,
.story-card .btn-secondary:hover {
    background: var(--th-brown-tint);
    color: var(--th-brown-deep);
}
.btn-add-cart:hover,
.filter-btn:hover {
    color: var(--th-brown);
    border-color: var(--th-brown);
}

/* Product card text: gold subtitle, brown link */
.product-card-fragrance { color: #8a6524; }
.btn-card-details,
.btn-card-details i { color: var(--th-brown); }
.product-card-title:hover { color: var(--th-brown); }

/* Hero details */
.timeline-step-btn .step-num { color: #a9822f; }
.skip-animation-link { color: var(--th-brown); }
.timeline-progress-bar { background: linear-gradient(90deg, #a9822f, #dba855); }

/* Small brand touches that may stay logo red */
.product-card-badge::before { background: #c41e26; }
.section-header h2::after {
    background: linear-gradient(90deg, #c41e26 0 28%, #dba855 28% 100%);
}

/* Footer & misc hovers in gold/brown instead of red */
.social-links a:hover { background: #a9822f; border-color: #a9822f; color: #ffffff; }
.why-icon-wrap { background: var(--th-brown-tint); }
input:focus,
select:focus,
textarea:focus {
    border-color: var(--th-brown) !important;
    box-shadow: 0 0 0 3px rgba(122, 82, 48, 0.14) !important;
}
::selection { background: rgba(219, 168, 85, 0.3); color: var(--th-ink); }
.office-map-link:hover,
.office-map-link:focus-visible { color: var(--th-brown); }

/* ==========================================================================
   PRODUCT LISTING — LUXURY STUDIO PRESENTATION
   Pure CSS studio set (no extra images): warm off-white sweep, overhead golden
   spotlight, ivory podium with gold rim, contact shadow, faint incense wisp.
   Product images are shown exactly as provided.
   ========================================================================== */
.product-card {
    --stage-h: 360px;     /* studio (image area) height */
    --pack-h: 236px;      /* product image height */
    --podium-w: 150px;
    --podium-h: 26px;
    --podium-b: 28px;     /* podium distance from the bottom of the studio */
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #ece0cd;
    box-shadow: 0 14px 30px -18px rgba(70, 48, 28, 0.25), 0 2px 6px rgba(70, 48, 28, 0.04);
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: #dcc39a;
    box-shadow: 0 26px 46px -20px rgba(70, 48, 28, 0.38), 0 4px 12px rgba(70, 48, 28, 0.06);
}

/* Studio backdrop: wall sweeping softly into the floor */
.product-card-top {
    position: relative;
    display: block;
    height: var(--stage-h);
    min-height: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(70% 55% at 50% -8%, rgba(255, 247, 230, 1) 0%, rgba(255, 247, 230, 0) 70%),
        linear-gradient(180deg, #fbf6ee 0%, #f4eadb 58%, #eadcc6 70%, #f1e6d6 100%);
}

/* Retire the earlier halo / sheen layers */
.product-card-top::before,
.product-card-top::after {
    content: none;
    display: none;
}

.studio-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;   /* clicks still open product details */
}

/* Overhead golden spotlight cone */
.studio-spot {
    position: absolute;
    top: -6%;
    left: 50%;
    width: 78%;
    height: 92%;
    transform: translateX(-50%);
    background: radial-gradient(60% 100% at 50% 0%, rgba(255, 224, 160, 0.55) 0%, rgba(255, 224, 160, 0.18) 45%, rgba(255, 224, 160, 0) 75%);
    clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
    filter: blur(8px);
    opacity: 0.6;
    z-index: 0;
    transition: opacity 0.6s ease;
}

/* Podium: ivory cylinder with a subtle gold rim */
.studio-podium {
    position: absolute;
    left: 50%;
    bottom: var(--podium-b);
    width: var(--podium-w);
    height: var(--podium-h);
    transform: translateX(-50%);
    background: linear-gradient(90deg, #d8c5a8 0%, #efe3d1 22%, #fbf7f0 48%, #f1e6d6 72%, #d2bc9b 100%);
    border-radius: 0 0 50% 50% / 0 0 12px 12px;
    z-index: 2;
}

.studio-podium::before {               /* top surface */
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -11px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 35%, #fffdf9 0%, #f6eee2 55%, #e6d6be 100%);
    box-shadow: inset 0 -1.5px 0 rgba(201, 162, 106, 0.75), 0 0 0 1px rgba(201, 162, 106, 0.28);
}

.studio-podium::after {                /* soft floor shadow under the podium */
    content: '';
    position: absolute;
    left: 50%;
    bottom: -12px;
    width: 135%;
    height: 18px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(70, 48, 28, 0.28), rgba(70, 48, 28, 0));
    z-index: -1;
}

/* Contact shadow where the pack meets the podium */
.studio-contact {
    position: absolute;
    left: 50%;
    top: -7px;
    width: 62%;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(40, 26, 14, 0.45), rgba(40, 26, 14, 0));
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

/* The product itself — exactly as provided, standing on the podium */
.product-card .product-pack-img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--podium-b) + var(--podium-h) - 2px);
    width: 100%;
    height: var(--pack-h);
    max-height: none;
    margin: 0;
    object-fit: contain;
    object-position: 50% 100%;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 12px 14px rgba(55, 36, 20, 0.24)) drop-shadow(0 2px 3px rgba(55, 36, 20, 0.18));
    z-index: 3;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease;
}

/* Incense wisp — faint and still; drifts gently only on hover */
.studio-smoke {
    position: absolute;
    left: 50%;
    bottom: calc(var(--podium-b) + var(--podium-h) + var(--pack-h) * 0.55);
    width: 90px;
    height: calc(var(--pack-h) * 0.75);
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0.55;
    transition: opacity 0.6s ease;
}

.studio-smoke i {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 46px;
    height: 70%;
    margin-left: -23px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(236, 226, 212, 0.35) 60%, rgba(255, 255, 255, 0));
    filter: blur(7px);
    animation: studioSmoke 7s ease-in-out infinite;
    animation-play-state: paused;
    will-change: transform, opacity;
}

.studio-smoke i:nth-child(2) {
    width: 34px;
    margin-left: -6px;
    height: 55%;
    animation-delay: -3.5s;
    opacity: 0.7;
}

@keyframes studioSmoke {
    0%   { transform: translate3d(0, 12px, 0) scale(0.8, 0.9); opacity: 0; }
    25%  { opacity: 0.85; }
    60%  { transform: translate3d(-8px, -26px, 0) scale(1.15, 1.2); opacity: 0.55; }
    100% { transform: translate3d(6px, -60px, 0) scale(1.4, 1.35); opacity: 0; }
}

/* Badge sits above the studio set */
.product-card-badge { z-index: 4; }

/* Gold hairline between studio and details */
.product-card-body {
    border-top: 1px solid rgba(201, 162, 106, 0.32);
}

/* ---------- Hover: lift, brighter light, drifting smoke ---------- */
@media (hover: hover) and (pointer: fine) {
    .product-card:hover .product-pack-img {
        transform: translateY(-8px) scale(1.04);
        filter: drop-shadow(0 20px 18px rgba(55, 36, 20, 0.22)) drop-shadow(0 3px 4px rgba(55, 36, 20, 0.14));
    }
    .product-card:hover .studio-contact {
        transform: translateX(-50%) scale(0.82);
        opacity: 0.55;
    }
    .product-card:hover .studio-spot { opacity: 0.95; }
    .product-card:hover .studio-smoke { opacity: 1; }
    .product-card:hover .studio-smoke i { animation-play-state: running; }
}

/* Touch screens: no hover lift jitter */
@media (hover: none) {
    .product-card:hover .product-pack-img { transform: none; }
}

/* ---------- Responsive studio sizes ---------- */
@media (max-width: 1024px) {
    .product-card {
        --stage-h: 330px;
        --pack-h: 212px;
        --podium-w: 136px;
        --podium-h: 24px;
        --podium-b: 26px;
    }
}

@media (max-width: 860px) {
    .product-card {
        --stage-h: 320px;
        --pack-h: 204px;
        --podium-w: 132px;
        --podium-b: 24px;
    }
}

@media (max-width: 640px) {
    .product-card {
        --stage-h: 330px;
        --pack-h: 214px;
        --podium-w: 140px;
        --podium-b: 24px;
        border-radius: 18px;
    }
}

@media (max-width: 380px) {
    .product-card {
        --stage-h: 292px;
        --pack-h: 182px;
        --podium-w: 122px;
        --podium-h: 22px;
        --podium-b: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .studio-smoke i { animation: none; }
}

/* ==========================================================================
   PRODUCT IMAGE PRESENTATION — complete, crisp, never cropped or stretched
   ========================================================================== */
/* Catalogue cards: full pack always visible, centred, proportions preserved,
   with a hairline edge so light-coloured packs stand clear of the backdrop */
.product-card .product-pack-img {
    object-fit: contain;
    object-position: 50% 100%;
    max-width: 100%;
    filter:
        drop-shadow(0 0 0.6px rgba(40, 26, 14, 0.45))
        drop-shadow(0 12px 14px rgba(55, 36, 20, 0.24))
        drop-shadow(0 2px 3px rgba(55, 36, 20, 0.18));
}

@media (hover: hover) and (pointer: fine) {
    .product-card:hover .product-pack-img {
        filter:
            drop-shadow(0 0 0.6px rgba(40, 26, 14, 0.45))
            drop-shadow(0 20px 18px rgba(55, 36, 20, 0.22))
            drop-shadow(0 3px 4px rgba(55, 36, 20, 0.14));
    }
}

/* Product pop-up: whole pack centred in a neutral panel, never wider than the panel */
.modal-pack-wrap {
    background: #faf6ef;
    overflow: hidden;
}

.modal-pack-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
    filter: drop-shadow(0 0 0.6px rgba(40, 26, 14, 0.45)) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}

/* Cart thumbnails: complete pack, centred in its tile */
.cart-item-img {
    background: #faf6ef;
    overflow: hidden;
}

.cart-item-img img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 0 0.5px rgba(40, 26, 14, 0.4));
}

/* About gallery: complete packs at one height */
.about-gallery-item img {
    object-fit: contain;
    object-position: center;
}

/* ========================================================
   ABOUT — ISO 9001:2015 CERTIFICATE CARD + VIEWER
   ======================================================== */
.about-cert {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1.1rem;
    background: var(--th-paper, #fff);
    border: 1px solid var(--th-line, #e6d8c3);
    border-radius: 16px;
    box-shadow: 0 10px 28px -18px rgba(43, 32, 25, 0.35);
}
.about-cert-thumb {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--th-line, #e6d8c3);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: zoom-in;
    box-shadow: 0 6px 16px -10px rgba(43, 32, 25, 0.45);
    transition: transform .3s ease, box-shadow .3s ease;
}
.about-cert-thumb img { display: block; width: 100%; height: auto; }
.about-cert-thumb:hover,
.about-cert-thumb:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 26px -14px rgba(43, 32, 25, 0.5); }
.about-cert-zoom {
    position: absolute; right: 6px; bottom: 6px;
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(30, 19, 12, 0.78); color: #fff; font-size: .75rem;
}
.about-cert-tag {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    color: var(--th-gold, #a9822f);
    background: var(--th-sandal, #f5ecdf);
    border: 1px solid var(--th-line, #e6d8c3);
    padding: .3rem .7rem; border-radius: 999px; margin-bottom: .55rem;
}
.about-cert h3 { font-size: 1.1rem; margin-bottom: .35rem; color: var(--th-ink, #2b2019); }
.about-text .about-cert p { font-size: .92rem; margin-bottom: .7rem; color: var(--th-body, #4b3f35); }
.about-cert-meta {
    list-style: none; margin: 0 0 .8rem; padding: 0;
    display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
}
.about-cert-meta li { display: flex; flex-direction: column; font-size: .85rem; line-height: 1.3; }
.about-cert-meta span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--th-muted, #7b6b5d); }
.about-cert-meta strong { color: var(--th-ink, #2b2019); font-weight: 600; }
.about-cert-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font: inherit; font-size: .85rem; font-weight: 600;
    color: var(--th-brown, #7a5230);
    background: transparent;
    border: 1px solid currentColor; border-radius: 999px;
    padding: .45rem 1rem; cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.about-cert-btn:hover,
.about-cert-btn:focus-visible { background: var(--th-brown, #7a5230); color: #fff; border-color: var(--th-brown, #7a5230); }

.cert-lightbox {
    padding: 0; border: 0; background: transparent;
    max-width: min(92vw, 640px); width: 100%;
    max-height: 94vh; overflow: visible;
}
.cert-lightbox::backdrop { background: rgba(20, 12, 7, 0.82); backdrop-filter: blur(3px); }
.cert-lightbox[open] { animation: certIn .28s ease both; }
@keyframes certIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.cert-lightbox img {
    display: block; width: 100%; height: auto;
    max-height: calc(94vh - 56px); object-fit: contain;
    border-radius: 10px; background: #fff;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}
.cert-lightbox-close {
    position: absolute; top: -14px; right: -14px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%; border: 0;
    background: #fff; color: var(--th-ink, #2b2019); font-size: 1.1rem;
    cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.cert-lightbox-link {
    display: block; text-align: center; margin-top: .7rem;
    color: #f3e9dc; font-size: .85rem; text-decoration: none;
}
.cert-lightbox-link:hover { text-decoration: underline; }

@media (max-width: 575px) {
    .about-cert { grid-template-columns: 96px minmax(0, 1fr); gap: .9rem; padding: .9rem; }
    .about-cert-meta { gap: .35rem .9rem; }
    .cert-lightbox-close { top: 6px; right: 6px; }
}
@media (max-width: 380px) {
    .about-cert { grid-template-columns: 1fr; text-align: left; }
    .about-cert-thumb { max-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
    .cert-lightbox[open] { animation: none; }
    .about-cert-thumb { transition: none; }
}
/* certificate viewer — centre in the viewport (global reset removes dialog auto-margins) and size to the image */
.cert-lightbox {
    position: fixed; inset: 0; margin: auto;
    width: fit-content; height: fit-content;
    max-width: 92vw; max-height: 96vh;
}
.cert-lightbox img {
    width: auto; max-width: min(92vw, 640px);
    max-height: calc(96vh - 48px);
}

/* ==========================================================================
   HERO SLIDE 4 — BOX ON THE SIDE (keeps the scrolling product image visible)
   Same as slides 1 & 3: card on the left, product image free on the right.
   Portrait phones/tablets keep the docked card below the image.
   ========================================================================== */
.slide-4 .story-card.center-card { text-align: left; }
.slide-4 .center-actions { justify-content: flex-start; }

@media (min-width: 1025px), (orientation: landscape) {
    .slide-4 .story-card.center-card {
        max-width: 420px;
        margin-left: 2%;
        margin-right: auto;
    }
}
@media (orientation: landscape) and (max-height: 540px),
       (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1366px) {
    .slide-4 .story-card.center-card { margin-left: 0; }
}

/* ==========================================================================
   HERO STEP BAR REMOVED (01 Purity … 04 23 Blends / Skip to Catalogue)
   The bar's markup was removed from index.html; hide any leftover and give
   the space it reserved under the hero boxes back to the layout.
   ========================================================================== */
.hero-scroll-controller { display: none !important; }

/* portrait: keep the docked box just above the floating WhatsApp button */
@media (max-width: 1024px) and (orientation: portrait) {
    .hero-story-slide { padding-bottom: 5rem; }
}
@media (max-width: 640px) and (orientation: portrait) {
    .hero-story-slide { padding-bottom: 4.75rem; }
}
@media (orientation: landscape) and (max-height: 540px),
       (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1366px) {
    .hero-story-slide { padding-bottom: 1.25rem; }
}

/* Hero slide 1: single "Explore Catalogue" button (Quick Buy Now removed) — keep it its natural width */
#heroSlide1 .hero-actions .btn { flex: 0 0 auto; width: auto; }
/* Hero slide 1: centre the "Explore Catalogue" button inside the box */
#heroSlide1 .hero-actions { justify-content: center; }

/* ==========================================================================
   B2B & TRADE PARTNERS — ARRANGED LAYOUT & ALIGNMENT
   Same content. Benefit cards: icon tile beside the text. Form: every field
   labelled and evenly spaced; on desktop it matches the left column's height
   (message box grows, button sits at the bottom) — no empty gap.
   ========================================================================== */
.distributor-content,
.distributor-form-wrap { min-width: 0; }

.distributor-content h2 { line-height: 1.2; margin-bottom: 0.9rem; }
.distributor-content > p { margin-bottom: 0; }

.distributor-perks { margin-top: 1.6rem; gap: 0.9rem; }

.perk-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
    padding: 1.05rem 1.2rem;
}
.perk-card i {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 1.1rem;
    border-radius: 12px;
    background: var(--th-paper, #ffffff);
    border: 1px solid var(--th-line, #e6d8c3);
}
.perk-card h4,
.perk-card h3 { grid-column: 2; margin: 0.15rem 0 0.25rem; font-size: 1rem; line-height: 1.35; }
.perk-card p { grid-column: 2; margin: 0; font-size: 0.88rem; line-height: 1.55; }

.distributor-form-wrap { display: flex; flex-direction: column; }
.distributor-form { display: flex; flex-direction: column; flex: 1; }
.distributor-form h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 1.1rem;
}
.distributor-form .form-group { margin-bottom: 0.95rem; }
.distributor-form .form-group label { display: block; margin-bottom: 0.4rem; }
.distributor-form textarea.form-control { min-height: 92px; resize: vertical; line-height: 1.5; }
.distributor-form .btn-full {
    width: 100%;
    margin-top: 0.35rem;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
}

/* Desktop: two equal-height columns, form fills its column */
@media (min-width: 1025px) {
    .distributor-wrapper {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        align-items: stretch;
    }
    .distributor-form .form-group:last-of-type { flex: 1; display: flex; flex-direction: column; }
    .distributor-form .form-group:last-of-type textarea.form-control { flex: 1; }
}

/* Phones */
@media (max-width: 640px) {
    .perk-card { grid-template-columns: 40px minmax(0, 1fr); column-gap: 0.85rem; padding: 0.95rem 1rem; }
    .perk-card i { width: 40px; height: 40px; font-size: 1rem; border-radius: 10px; }
    .distributor-form .btn-full { font-size: 0.92rem; padding-left: 1rem; padding-right: 1rem; }
    .distributor-form textarea.form-control { min-height: 118px; }
}

/* ==========================================================================
   NAVBAR LOGO — GLOW ANIMATION
   1) a soft warm-gold halo that slowly "breathes" behind the logo
   2) a light shine that sweeps across the logo every few seconds,
      clipped to the logo's own shape (mask) so it never shows as a box.
   Only opacity/transform/background-position animate → light on the GPU.
   ========================================================================== */
.navbar .brand-logo {
    position: relative;
    isolation: isolate;
    line-height: 0;
}

/* 1) breathing halo */
.navbar .brand-logo::before {
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    top: -55%;
    bottom: -55%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 22% 50%, rgba(245, 158, 11, 0.55), rgba(245, 158, 11, 0) 70%),
        radial-gradient(closest-side at 60% 50%, rgba(219, 168, 85, 0.38), rgba(219, 168, 85, 0) 75%);
    filter: blur(6px);
    opacity: 0.35;
    transform: scale(0.92);
    animation: s3LogoHalo 3.6s ease-in-out infinite;
}

/* 2) shine sweep, masked to the logo artwork */
.navbar .brand-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 244, 214, 0.85) 50%,
        rgba(255, 255, 255, 0) 62%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    background-position: 160% 0;
    -webkit-mask: url("images/logo.png") center / 100% 100% no-repeat;
            mask: url("images/logo.png") center / 100% 100% no-repeat;
    mix-blend-mode: screen;
    animation: s3LogoShine 5.5s ease-in-out infinite 1.2s;
}

@keyframes s3LogoHalo {
    0%, 100% { opacity: 0.30; transform: scale(0.92); }
    50%      { opacity: 0.85; transform: scale(1.06); }
}

@keyframes s3LogoShine {
    0%   { background-position: 160% 0; }
    28%  { background-position: -60% 0; }
    100% { background-position: -60% 0; }
}

/* brighter on hover/focus */
.navbar .brand-logo:hover::before,
.navbar .brand-logo:focus-visible::before {
    animation-duration: 1.8s;
}

@media (prefers-reduced-motion: reduce) {
    .navbar .brand-logo::before { animation: none; opacity: 0.55; transform: none; }
    .navbar .brand-logo::after  { animation: none; opacity: 0; }
}

/* ==========================================================================
   RESPONSIVE POLISH & BUG FIXES (October 2026)
   - Mobile menu backdrop with blur overlay & smooth drawer transitions
   - Cart notification: responsive positioning clear of floating WhatsApp button
   - Cart badge pop animation & clean zero-item state
   - Touch devices: suppress floating WhatsApp tooltip on mobile
   - Tablet navbar fine-tuning: prevents zero-gap crowding
   - Safe-area insets for modern mobile screens (iPhone notch / home indicator)
   - Mobile modal & drawer touch improvements
   ========================================================================== */

/* Mobile Menu Backdrop */
.mobile-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 10, 7, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Cart Notification Pill */
.cart-notification {
    position: fixed;
    bottom: 92px;
    right: 24px;
    background: #fffcf6;
    color: #3a2d24;
    padding: 12px 22px;
    border-radius: 9999px;
    box-shadow: 0 14px 32px -8px rgba(78, 52, 34, 0.35);
    font-size: 0.92rem;
    font-weight: 600;
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e6d8c3;
    animation: cartNotifIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.cart-notification.is-hiding {
    opacity: 0;
    transform: translateY(8px);
}

@keyframes cartNotifIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    .cart-notification {
        bottom: 82px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: calc(100vw - 32px);
        font-size: 0.85rem;
        padding: 10px 18px;
        white-space: nowrap;
        text-align: center;
        justify-content: center;
    }

    .cart-notification.is-hiding {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
}

/* Cart Badge: clean appearance, pops when items exist */
.navbar .cart-badge {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
}

.navbar .cart-badge.has-items {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Touch devices: disable tooltip on the floating WhatsApp button */
@media (hover: none) {
    .floating-whatsapp-btn .tooltip {
        display: none !important;
    }
}

/* Safe area insets for modern notched phones (iPhone, etc.) */
.mobile-menu-footer {
    padding-bottom: max(1.5rem, calc(1rem + env(safe-area-inset-bottom)));
}

.cart-drawer-footer {
    padding-bottom: max(1.5rem, calc(1rem + env(safe-area-inset-bottom)));
}

.floating-whatsapp-btn {
    bottom: max(25px, calc(16px + env(safe-area-inset-bottom)));
}

@media (max-width: 640px) {
    .floating-whatsapp-btn {
        bottom: max(18px, calc(12px + env(safe-area-inset-bottom)));
        right: max(18px, calc(12px + env(safe-area-inset-right)));
    }
}

/* Tablet Navbar spacing between 861px and 1024px */
@media (min-width: 861px) and (max-width: 1024px) {
    .nav-content {
        gap: 0.75rem;
    }
    .nav-links {
        gap: 0.85rem;
    }
    .nav-links a {
        font-size: 0.84rem;
        padding: 0.25rem 0.2rem;
    }
    .nav-cta {
        padding: 0.45rem 0.75rem;
        font-size: 0.8rem;
    }
}


/* ==========================================================================
   FIRST-VISIT BRAND INTRO — "S3 Brand Agarbattis"
   Shown once per browser session (html.s3-intro-on set in <head>).
   Letter reveal + gentle scale, gold hairline, faint incense smoke,
   then a soft fade into the homepage (~2.3s + 0.75s). Tap/click/key skips.
   Only opacity / transform (and a one-off blur on 8 letters) animate.
   ========================================================================== */
.s3-intro { display: none; }

html.s3-intro-on,
html.s3-intro-on body { overflow: hidden; }

html.s3-intro-on .s3-intro {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 50% at 50% 46%, rgba(219, 168, 85, 0.16), rgba(219, 168, 85, 0) 70%),
        linear-gradient(180deg, #24170f 0%, #1e130c 55%, #160e09 100%);
    transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.75s;
}
.s3-intro.is-leaving { opacity: 0; visibility: hidden; }
.s3-intro.is-leaving .s3-intro-inner { transform: scale(1.04) translateY(-6px); opacity: 0; }

.s3-intro-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 6vw;
    transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
    animation: s3IntroScale 2.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.s3-intro-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

/* BIG: "S3 Brand" */
.s3-intro-big {
    display: inline-flex;
    font-weight: 600;
    font-size: clamp(3.6rem, 15vw, 8.5rem);
    letter-spacing: 0.01em;
    line-height: 0.95;
    color: #f1d9a6;
}
.s3-intro-big span {
    display: inline-block;
    background: linear-gradient(180deg, #fbeccb 0%, #e9c27a 48%, #c89545 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transform: translateY(0.28em);
    filter: blur(8px);
    animation: s3IntroLetter 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(0.18s + var(--i) * 0.07s);
}

/* small: "Agarbattis" */
.s3-intro-small {
    margin-top: 0.35em;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.35rem, 4.2vw, 2.6rem);
    letter-spacing: 0.34em;
    padding-left: 0.34em;            /* balance trailing tracking so it stays centred */
    color: #ede4d8;
    opacity: 0;
    transform: translateY(8px);
    animation: s3IntroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}

/* gold hairline that draws out from the centre */
.s3-intro-line {
    display: block;
    width: clamp(120px, 26vw, 260px);
    height: 1px;
    margin-top: clamp(1.1rem, 2.6vw, 1.7rem);
    background: linear-gradient(90deg, rgba(219, 168, 85, 0), #dba855 50%, rgba(219, 168, 85, 0));
    transform: scaleX(0);
    animation: s3IntroLine 1s cubic-bezier(0.22, 1, 0.36, 1) 1.15s forwards;
}

/* faint incense smoke rising behind the name */
.s3-intro-smoke {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.s3-intro-smoke i {
    position: absolute;
    bottom: -12%;
    width: clamp(160px, 26vw, 340px);
    height: clamp(260px, 46vh, 520px);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(237, 228, 216, 0.10), rgba(237, 228, 216, 0) 68%);
    filter: blur(22px);
    opacity: 0;
    animation: s3IntroSmoke 3.2s ease-out forwards;
}
.s3-intro-smoke i:nth-child(1) { left: 22%; animation-delay: 0.1s; }
.s3-intro-smoke i:nth-child(2) { left: 46%; animation-delay: 0.45s; width: clamp(140px, 22vw, 300px); }
.s3-intro-smoke i:nth-child(3) { left: 62%; animation-delay: 0.8s; }

@keyframes s3IntroLetter {
    to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes s3IntroFadeUp {
    to { opacity: 1; transform: none; }
}
@keyframes s3IntroLine {
    to { transform: scaleX(1); }
}
@keyframes s3IntroScale {
    from { transform: scale(0.965); }
    to   { transform: scale(1); }
}
@keyframes s3IntroSmoke {
    0%   { opacity: 0;    transform: translate3d(0, 12%, 0) scale(0.85, 0.9); }
    35%  { opacity: 1; }
    100% { opacity: 0.55; transform: translate3d(-4%, -22%, 0) scale(1.05, 1.15); }
}

/* Small phones: keep the name on screen */
@media (max-width: 380px) {
    .s3-intro-small { letter-spacing: 0.26em; padding-left: 0.26em; }
}

/* Reduced motion: simple short fade, no movement */
@media (prefers-reduced-motion: reduce) {
    .s3-intro-inner,
    .s3-intro-big span,
    .s3-intro-small,
    .s3-intro-line,
    .s3-intro-smoke i { animation: none; }
    .s3-intro-big span,
    .s3-intro-small { opacity: 1; transform: none; filter: none; }
    .s3-intro-line { transform: scaleX(1); }
    .s3-intro-smoke { display: none; }
}

/* ==========================================================================
   BRAND INTRO — LOGO WITH GOLDEN GLOW (added on top of the existing intro)
   The original logo image is shown untouched (no filter / recolour).
   Layers: gold halo + warm-white core glow (pulsing) behind the logo,
   a golden light sweep clipped to the logo shape, floating gold particles.
   Timing fits inside the existing 2.3s intro: logo 0.05–0.95s, text as before.
   ========================================================================== */
.s3-intro-logo {
    position: relative;
    display: block;
    width: clamp(180px, 32vw, 390px);
    margin-bottom: clamp(1rem, 2.6vw, 1.6rem);
    /* the logo file has empty space on its right: nudge so the artwork is visually centred */
    transform: translateX(6.8%);
    opacity: 0;
    animation: s3LogoIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}
.s3-intro-logo img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
}

/* layered glow (behind the logo, centred on the artwork) */
.s3-intro-glow {
    position: absolute;
    z-index: 1;
    left: 41%;
    top: 50%;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
}
.s3-intro-glow--gold {
    width: 150%;
    height: 340%;
    background: radial-gradient(closest-side, rgba(219, 168, 85, 0.42), rgba(219, 168, 85, 0.14) 55%, rgba(219, 168, 85, 0) 100%);
    filter: blur(14px);
    animation: s3GlowPulse 1.5s ease-in-out 0.45s infinite alternate;
}
.s3-intro-glow--white {
    width: 95%;
    height: 190%;
    background: radial-gradient(closest-side, rgba(255, 244, 222, 0.30), rgba(255, 244, 222, 0) 100%);
    filter: blur(10px);
    animation: s3GlowPulse 1.5s ease-in-out 0.7s infinite alternate;
}

/* golden light sweep, clipped to the logo artwork */
.s3-intro-sweep {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 236, 190, 0.9) 50%,
        rgba(255, 255, 255, 0) 62%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    background-position: 160% 0;
    -webkit-mask: url("images/logo.png") center / 100% 100% no-repeat;
            mask: url("images/logo.png") center / 100% 100% no-repeat;
    mix-blend-mode: screen;
    animation: s3LogoSweep 1.1s cubic-bezier(0.45, 0, 0.25, 1) 0.75s forwards;
}

/* floating golden particles */
.s3-intro-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.s3-intro-particles i {
    position: absolute;
    left: var(--x);
    bottom: 22%;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: #f3d79b;
    box-shadow: 0 0 6px 1px rgba(243, 215, 155, 0.75);
    opacity: 0;
    will-change: transform, opacity;
    animation: s3Particle var(--t) ease-out var(--d) forwards;
}

@keyframes s3LogoIn {
    0%   { opacity: 0; transform: translateX(6.8%) scale(0.88); }
    100% { opacity: 1; transform: translateX(6.8%) scale(1); }
}
@keyframes s3GlowPulse {
    0%   { opacity: 0.35; transform: translate(-50%, -50%) scale(0.88); }
    100% { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes s3LogoSweep {
    from { background-position: 160% 0; }
    to   { background-position: -60% 0; }
}
@keyframes s3Particle {
    0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(0.6); }
    20%  { opacity: 0.9; }
    100% { opacity: 0;   transform: translate3d(var(--dx), -42vh, 0) scale(1); }
}

/* phones: slightly smaller logo so logo + name sit comfortably */
@media (max-width: 480px) {
    .s3-intro-logo { width: clamp(150px, 46vw, 220px); }
}

/* Reduced motion: logo and soft glow shown still; no sweep, pulse or particles */
@media (prefers-reduced-motion: reduce) {
    .s3-intro-logo { animation: none; opacity: 1; }
    .s3-intro-glow { animation: none; opacity: 0.6; transform: translate(-50%, -50%); }
    .s3-intro-sweep,
    .s3-intro-particles { display: none; }
}

/* Intro: "Agarbattis" in Cinzel (classic inscription capitals), warm gold-white, wide tracking */
.s3-intro-small {
    font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
    font-style: normal;
    font-weight: 600;
    font-size: clamp(1.05rem, 2.6vw, 1.7rem);
    letter-spacing: 0.42em;
    padding-left: 0.42em;            /* keep it optically centred despite trailing tracking */
    color: #f0dfbf;
    margin-top: 0.55em;
}
@media (max-width: 380px) {
    .s3-intro-small { letter-spacing: 0.32em; padding-left: 0.32em; }
}

/* ==========================================================================
   HERO TEXT — OPEN EDITORIAL STYLE (no boxes)
   The four hero slides no longer sit in white boxes: text floats directly on
   the studio background with
   - a thin gold vertical accent line beside the text,
   - a soft, feathered warm light behind it for readability (no visible edges),
   - the pill badge turned into a gold-line eyebrow.
   Same fonts, text, buttons, positions and scroll animation.
   ========================================================================== */
.hero-story-slide .story-card,
.hero-story-slide .story-card.glass-panel-dark {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    padding: 0.4rem 0 0.4rem 1.6rem;
}

/* feathered light behind the text (keeps it readable over smoke/image) */
.hero-story-slide .story-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -28% -30% -28% -26%;
    pointer-events: none;
    background: radial-gradient(ellipse 58% 54% at 42% 50%,
        rgba(251, 246, 238, 0.82) 0%,
        rgba(251, 246, 238, 0.55) 48%,
        rgba(251, 246, 238, 0) 78%);
}

/* thin gold accent line beside the text */
.hero-story-slide .story-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        rgba(219, 168, 85, 0) 0%,
        #dba855 14%,
        #a9822f 62%,
        rgba(169, 130, 47, 0) 100%);
}

/* badge → eyebrow with a short gold rule */
.hero-story-slide .hero-pill-badge {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0;
    color: #7a5d24 !important;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}
.hero-story-slide .hero-pill-badge::before {
    content: "";
    width: 26px;
    height: 1.5px;
    background: linear-gradient(90deg, #a9822f, #dba855);
    flex: none;
}
.hero-story-slide .hero-pill-badge i { display: none; }

.hero-story-slide .story-card h1,
.hero-story-slide .story-card h2 {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hero-story-slide .hero-slide-desc { color: #4b3f35; }
.hero-story-slide .gstin-tag { color: #6f6152; }

/* Desktop: a little more presence now that the box is gone */
@media (min-width: 1025px) {
    .slide-1 .story-card,
    .slide-3 .story-card,
    .slide-4 .story-card.center-card { max-width: 440px; }
    .slide-2 .story-card { max-width: 425px; }
    .hero-story-slide .story-card h1 { font-size: 2.15rem; line-height: 1.12; }
    .hero-story-slide .story-card h2 { font-size: 1.95rem; line-height: 1.14; }
}

/* Portrait phones/tablets: keep the docked position, drop the box */
@media (max-width: 1024px) and (orientation: portrait) {
    .hero-story-slide .story-card,
    .hero-story-slide .story-card.glass-panel-dark { padding: 0.2rem 0 0.2rem 1.1rem; }
    .hero-story-slide .story-card::before {
        inset: -22% -12% -18% -12%;
        background: radial-gradient(ellipse 72% 62% at 50% 52%,
            rgba(251, 246, 238, 0.88) 0%,
            rgba(251, 246, 238, 0.6) 52%,
            rgba(251, 246, 238, 0) 82%);
    }
    .hero-story-slide .hero-pill-badge { margin-bottom: 0.45rem; }
}

/* Landscape phones & touch tablets */
@media (orientation: landscape) and (max-height: 540px),
       (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1366px) {
    .hero-story-slide .story-card,
    .hero-story-slide .story-card.glass-panel-dark { padding: 0.2rem 0 0.2rem 1.1rem; }
}
/* open hero: let the feathered light extend past the text block (no clipped edges) */
.hero-story-slide .story-card,
.hero-story-slide .story-card.glass-panel-dark { overflow: visible !important; }
/* gold accent words: deeper gold so they stay crisp on the light background */
.hero-story-slide .story-card .gradient-text {
    background: linear-gradient(90deg, #7d5a1f 0%, #a9822f 55%, #8a6524 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-story-slide .story-card .gradient-text { text-shadow: none; }
@media (max-width: 1024px) and (orientation: portrait) {
    .hero-story-slide .story-card::before {
        background: radial-gradient(ellipse 70% 60% at 50% 52%,
            rgba(251, 246, 238, 0.7) 0%,
            rgba(251, 246, 238, 0.38) 50%,
            rgba(251, 246, 238, 0) 80%);
    }
}

/* ==========================================================================
   HERO TEXT — ENTRANCE ANIMATION (replays each time a slide becomes active)
   accent line draws down → eyebrow + gold dash → headline words rise from a
   mask one by one → gold words rise with a shimmer → sub-line, description,
   points and buttons fade up. Waits for the brand intro to finish.
   Only transform / opacity / background-position animate.
   ========================================================================== */
.hero-story-slide .hw {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}
.hero-story-slide .hw-i {
    display: inline-block;
    transform: translateY(110%);
}
.hero-story-slide.active .hw-i {
    animation: heroWordUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(0.2s + var(--w, 0) * 0.07s);
}

/* gold words: rise + one shimmer pass */
.hero-story-slide .story-card .gradient-text {
    background: linear-gradient(90deg,
        #7d5a1f 0%, #a9822f 30%, #a9822f 44%,
        #f1d48f 50%,
        #a9822f 56%, #a9822f 70%, #8a6524 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transform: translateY(0.35em);
}
.hero-story-slide.active .story-card .gradient-text {
    animation:
        heroGoldIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        heroGoldShimmer 1.4s ease-in-out forwards;
    animation-delay:
        calc(0.2s + var(--w, 0) * 0.07s),
        calc(0.75s + var(--w, 0) * 0.07s);
}

/* gold accent line draws downward */
.hero-story-slide .story-card::after {
    transform: scaleY(0);
    transform-origin: top center;
}
.hero-story-slide.active .story-card::after {
    animation: heroLineDraw 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

/* eyebrow + its gold dash */
.hero-story-slide .hero-pill-badge {
    opacity: 0;
    transform: translateX(-10px);
}
.hero-story-slide .hero-pill-badge::before {
    transform: scaleX(0);
    transform-origin: left center;
}
.hero-story-slide.active .hero-pill-badge {
    animation: heroFadeSide 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.hero-story-slide.active .hero-pill-badge::before {
    animation: heroDashDraw 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

/* supporting text and actions fade up in sequence */
.hero-story-slide .hero-slide-sub,
.hero-story-slide .hero-slide-desc,
.hero-story-slide .feature-bullets-grid,
.hero-story-slide .hero-actions,
.hero-story-slide .hero-scroll-prompt,
.hero-story-slide .gstin-tag {
    opacity: 0;
    transform: translateY(14px);
}
.hero-story-slide.active .hero-slide-sub        { animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards; }
.hero-story-slide.active .hero-slide-desc       { animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.72s forwards; }
.hero-story-slide.active .feature-bullets-grid  { animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.84s forwards; }
.hero-story-slide.active .hero-actions          { animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards; }
.hero-story-slide.active .hero-scroll-prompt,
.hero-story-slide.active .gstin-tag             { animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.08s forwards; }

@keyframes heroWordUp     { to { transform: translateY(0); } }
@keyframes heroGoldIn     { to { opacity: 1; transform: translateY(0); } }
@keyframes heroGoldShimmer { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes heroLineDraw   { to { transform: scaleY(1); } }
@keyframes heroDashDraw   { to { transform: scaleX(1); } }
@keyframes heroFadeSide   { to { opacity: 1; transform: none; } }
@keyframes heroFadeUp     { to { opacity: 1; transform: none; } }

/* first load: hold the hero text animation until the brand intro has finished */
html.s3-intro-on .hero-story-slide .hw-i,
html.s3-intro-on .hero-story-slide .gradient-text,
html.s3-intro-on .hero-story-slide .story-card::after,
html.s3-intro-on .hero-story-slide .hero-pill-badge,
html.s3-intro-on .hero-story-slide .hero-pill-badge::before,
html.s3-intro-on .hero-story-slide .hero-slide-sub,
html.s3-intro-on .hero-story-slide .hero-slide-desc,
html.s3-intro-on .hero-story-slide .feature-bullets-grid,
html.s3-intro-on .hero-story-slide .hero-actions,
html.s3-intro-on .hero-story-slide .hero-scroll-prompt,
html.s3-intro-on .hero-story-slide .gstin-tag {
    animation-play-state: paused !important;
}

/* Reduced motion: show everything immediately */
@media (prefers-reduced-motion: reduce) {
    .hero-story-slide .hw-i,
    .hero-story-slide .story-card .gradient-text,
    .hero-story-slide .story-card::after,
    .hero-story-slide .hero-pill-badge,
    .hero-story-slide .hero-pill-badge::before,
    .hero-story-slide .hero-slide-sub,
    .hero-story-slide .hero-slide-desc,
    .hero-story-slide .feature-bullets-grid,
    .hero-story-slide .hero-actions,
    .hero-story-slide .hero-scroll-prompt,
    .hero-story-slide .gstin-tag {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .hero-story-slide .story-card .gradient-text { background-position: 0% 0; }
}
/* Hero slide 4: single "View All 23 Fragrances" button (Quick WhatsApp Order removed) — natural width */
#heroSlide4 .center-actions .btn { width: auto; flex: 0 0 auto; }

/* ==========================================================================
   NAVBAR — SHOW / HIDE ON SCROLL (original dark colours kept)
   Hides when scrolling down, slides back when scrolling up (app.js toggles .nav-hidden).
   ========================================================================== */
.navbar {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.35s ease,
                box-shadow 0.35s ease,
                padding 0.35s ease;
    will-change: transform;
}
.navbar.nav-hidden {
    transform: translateY(calc(-100% - 4px));
    box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    .navbar { transition: background-color 0.2s ease; }
}


/* ==========================================================
   HERO — PREMIUM AGARBATTI BRAND STAGE (29 Oct 2026, v5)
   Deep maroon / espresso stage, gold temple arch behind the
   ambassador, gold-foil "S3 BRAND" title, lotus divider,
   gold corner ornaments, curling incense smoke.
   Animations: arch draws in, title foil reveal, text rises in
   sequence, ambassador rises, badge pops, smoke + gold dust,
   gentle mouse parallax (app.js). Held until the brand intro
   finishes; off for reduced-motion users.
   Phones & portrait tablets: ambassador on top, copy below.
   ========================================================== */
.pr-hero {
    --g1: #f6dca0;
    --g2: #dba855;
    --g3: #a9822f;
    --ivory: #fbf3e6;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    background: #150b07;
    color: #e9dccb;
    isolation: isolate;
}

/* ---- background ---- */
.pr-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pr-bg::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(55% 75% at 74% 52%, #571a12 0%, #36130d 40%, rgba(21, 11, 7, 0) 78%),
        radial-gradient(60% 60% at 10% 90%, rgba(90, 26, 18, 0.35) 0%, rgba(21, 11, 7, 0) 70%),
        linear-gradient(180deg, #1c0f09 0%, #150b07 100%);
}
.pr-bg::after {            /* vignette */
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
}
.pr-pattern {              /* faint mandala-like lattice on the left */
    position: absolute; left: -8%; top: 50%;
    width: min(60vw, 760px); aspect-ratio: 1;
    transform: translateY(-50%);
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, rgba(219, 168, 85, 0.07) 0 1px, transparent 1px 28px);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 70%);
            mask-image: radial-gradient(circle, #000 0%, transparent 70%);
    opacity: 0.8;
}
.pr-glow {
    position: absolute; right: 12%; top: 48%;
    width: min(46vw, 620px); aspect-ratio: 1;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(219, 128, 60, 0.32) 0%, rgba(196, 30, 38, 0.14) 42%, rgba(196, 30, 38, 0) 70%);
    filter: blur(8px);
}
.pr-dust { position: absolute; inset: 0; overflow: hidden; }
.pr-dust i {
    position: absolute; bottom: -10px; left: var(--x);
    width: var(--s); height: var(--s); border-radius: 50%;
    background: var(--g1);
    box-shadow: 0 0 6px 1px rgba(246, 220, 160, 0.55);
    opacity: 0;
    animation: prDust var(--t) linear var(--d) infinite;
}

/* gold corner ornaments */
.pr-corner { position: absolute; z-index: 3; width: 64px; height: 64px; pointer-events: none; top: 104px; }
.pr-corner--tl { left: 24px; }
.pr-corner--tr { right: 24px; transform: scaleX(-1); }
.pr-corner svg { width: 100%; height: 100%; fill: none; stroke: var(--g2); stroke-width: 1.2; opacity: 0.55; }
.pr-corner circle { fill: var(--g2); stroke: none; }
/* bottom gold rule */
.pr-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 4;
    background: linear-gradient(90deg, transparent, var(--g3) 25%, var(--g1) 50%, var(--g3) 75%, transparent);
    opacity: 0.75;
}

/* ---- layout ---- */
.pr-inner {
    position: relative;
    min-height: inherit;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
    padding-top: 92px;
}

/* ---- copy ---- */
.pr-copy { position: relative; z-index: 5; max-width: 580px; padding: 0.5rem 0 2.2rem; }
.pr-eyebrow {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--g2);
    margin-bottom: 1rem;
}
.pr-eyebrow::before { content: ""; width: 34px; height: 1.5px; background: linear-gradient(90deg, var(--g3), var(--g1)); }

.pr-heading { margin: 0 0 1.1rem; display: flex; flex-direction: column; align-items: flex-start; }
.pr-title {
    font-family: 'Cinzel', serif; font-weight: 800;
    font-size: clamp(3.2rem, 5.6vw, 5.4rem);
    line-height: 0.95; letter-spacing: 0.03em;
    background-image: linear-gradient(100deg, #a9822f 0%, #dba855 25%, #fff2cc 42%, #f6dca0 50%, #dba855 66%, #a9822f 100%);
    background-size: 240% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--g2);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}
.pr-title-tag {
    margin-top: 0.6rem;
    font-family: 'Outfit', sans-serif; font-weight: 600;
    font-size: clamp(0.8rem, 1.05vw, 1rem);
    letter-spacing: 0.46em; text-transform: uppercase;
    color: #e3c48a;
}
.pr-lotus { display: block; width: 150px; margin: 0.7rem 0 0; }
.pr-lotus svg { display: block; width: 100%; height: auto; overflow: visible; }
.pr-lotus-line { fill: none; stroke: var(--g3); stroke-width: 1; }
.pr-lotus-flower { fill: var(--g2); }
.pr-h1 {
    margin-top: 0.8rem;
    font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: clamp(1.45rem, 2.2vw, 2.05rem);
    line-height: 1.2;
    color: var(--ivory);
}
.pr-sub {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600;
    font-size: clamp(1.12rem, 1.4vw, 1.32rem);
    color: #e3c48a;
    margin: 0 0 0.8rem;
}
.pr-desc { font-size: 1rem; line-height: 1.7; color: rgba(240, 228, 212, 0.8); max-width: 520px; margin: 0 0 1.5rem; }
.pr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.pr-hero .pr-btn {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #d42a2f 0%, #a3161d 100%);
    color: #fff;
    border: 1px solid rgba(246, 220, 160, 0.4);
    box-shadow: 0 14px 30px -10px rgba(212, 42, 47, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform .25s ease, box-shadow .25s ease;
}
.pr-hero .pr-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -10px rgba(212, 42, 47, 0.75), 0 0 0 4px rgba(219, 168, 85, 0.15); }
.pr-hero .pr-btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0));
    transform: translateX(-130%) skewX(-20deg);
    pointer-events: none;
}
.pr-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-weight: 600; color: var(--ivory); text-decoration: none;
    border-bottom: 1.5px solid rgba(219, 168, 85, 0.6); padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.pr-link:hover { color: var(--g1); border-color: var(--g1); gap: 0.75rem; }
.pr-trust {
    list-style: none; padding: 1rem 0 0; margin: 1.6rem 0 0;
    display: flex; max-width: 440px;
    border-top: 1px solid rgba(219, 168, 85, 0.25);
}
.pr-trust li { flex: 1; display: flex; flex-direction: column; padding: 0 1rem; border-left: 1px solid rgba(219, 168, 85, 0.25); }
.pr-trust li:first-child { padding-left: 0; border-left: 0; }
.pr-trust strong {
    font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 700; line-height: 1.1;
    background: linear-gradient(180deg, var(--g1), var(--g3));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--g2);
}
.pr-trust span { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(233, 220, 203, 0.65); }

/* ---- ambassador stage ---- */
.pr-figure {
    position: relative; margin: 0;
    align-self: end; justify-self: center;
    width: 100%;
    height: calc(100svh - 92px);
    max-height: 880px; min-height: 540px;
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 2;
}
.pr-smoke {
    position: absolute; z-index: 2;
    left: 50%; top: 9%;
    width: 34%; height: 32%;
    transform: translateX(-46%);
    overflow: visible; pointer-events: none;
}
.pr-smoke path {
    fill: none; stroke: rgba(255, 246, 232, 0.55); stroke-width: 5; stroke-linecap: round;
    filter: blur(5px);
    stroke-dasharray: 120 400;
    stroke-dashoffset: 520;
    opacity: 0;
}
.pr-person {
    position: relative; z-index: 1;
    height: 94%; width: auto; max-width: 100%;
    object-fit: contain; object-position: bottom center;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
}
.pr-badge {
    position: absolute; z-index: 3;
    left: 50%; bottom: 3%;
    transform: translateX(-50%);
    white-space: nowrap;
    display: flex; align-items: center; gap: 0.65rem;
    background: rgba(26, 13, 8, 0.72);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(219, 168, 85, 0.5);
    border-radius: 999px;
    padding: 0.4rem 1.1rem 0.4rem 0.45rem;
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.7);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.95rem;
    color: var(--ivory);
}
.pr-badge > span:last-child { display: flex; align-items: baseline; gap: 0.35rem; }
.pr-badge small { font-weight: 600; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--g2); }
.pr-badge-icon {
    width: 30px; height: 30px; flex: none; border-radius: 50%;
    display: grid; place-items: center; font-size: 0.85rem;
    background: linear-gradient(135deg, var(--g1), var(--g3)); color: #2a1a0e;
}

/* parallax layers (values set by app.js on pointer move) */
.pr-glow, .pr-pattern { translate: var(--px, 0) var(--py, 0); transition: translate 0.6s cubic-bezier(.2,.7,.2,1); }
.pr-glow    { --px: calc(var(--mx, 0) * -14px); --py: calc(var(--my, 0) * -10px); }
.pr-pattern { --px: calc(var(--mx, 0) * 10px);  --py: calc(var(--my, 0) * 8px); }

/* ==========================================================
   animations
   ========================================================== */
@keyframes prUp      { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes prFoil    { from { opacity: 0; clip-path: inset(0 100% 0 0); background-position: 100% 0; letter-spacing: 0.1em; }
                       to   { opacity: 1; clip-path: inset(0 0 0 0);    background-position: 0% 0;   letter-spacing: 0.03em; } }
@keyframes prShimmer { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@keyframes prDraw    { to { stroke-dashoffset: 0; } }
@keyframes prFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes prRise    { from { opacity: 0; transform: translateY(60px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes prPop     { 0% { opacity: 0; transform: translate(-50%, 14px) scale(0.92); } 70% { opacity: 1; transform: translate(-50%, -3px) scale(1.02); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes prBloom   { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes prLine    { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } }
@keyframes prCorner  { from { opacity: 0; transform: translate(-10px, -10px); } to { opacity: 1; transform: none; } }
@keyframes prCornerR { from { opacity: 0; transform: scaleX(-1) translate(-10px, -10px); } to { opacity: 1; transform: scaleX(-1); } }
@keyframes prSmoke   { 0% { stroke-dashoffset: 520; opacity: 0; } 15% { opacity: 0.9; } 70% { opacity: 0.5; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes prDust    { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 0.9; } 85% { opacity: 0.6; } 100% { opacity: 0; transform: translate(var(--dx), -65vh); } }
@keyframes prShine   { 0%, 72% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(270%) skewX(-20deg); } }
@keyframes prGlow    { from { opacity: 0; } to { opacity: 1; } }

/* copy: staggered rise (--i set inline) */
.pr-reveal { animation: prUp 0.8s cubic-bezier(.2,.7,.2,1) calc(0.35s + var(--i, 0) * 0.11s) both; }
.pr-title.pr-reveal {
    animation: prFoil 1.3s cubic-bezier(.3,.7,.2,1) 0.45s both,
               prShimmer 7s ease-in-out 2.5s infinite;
}
.pr-eyebrow::before { transform-origin: left; animation: prFade 0.6s ease 0.4s both; }
.pr-lotus-line { stroke-dasharray: 44; animation: prLine 0.9s ease 1.0s both; }
.pr-lotus-flower { transform-box: fill-box; transform-origin: center; animation: prBloom 0.7s cubic-bezier(.2,.8,.3,1.3) 1.1s both; }

/* stage */
.pr-glow { animation: prGlow 1.6s ease 0.2s both; }
.pr-corner--tl { animation: prCorner 0.9s ease 0.3s both; }
.pr-corner--tr { animation: prCornerR 0.9s ease 0.3s both; }
/* ambassador photo: no animation — kept perfectly still */
.pr-badge  { animation: prPop 0.7s cubic-bezier(.2,.8,.3,1.2) 1.7s both; }
.pr-smoke path { animation: prSmoke 6.5s ease-out infinite; }
.pr-smoke path:nth-child(1) { animation-delay: 2.2s; }
.pr-smoke path:nth-child(2) { animation-delay: 4.3s; stroke-width: 4; }
.pr-smoke path:nth-child(3) { animation-delay: 6.1s; stroke-width: 3.5; }
.pr-hero .pr-btn::after { animation: prShine 5s ease-in-out 3s infinite; }

/* hold everything until the brand intro overlay has finished */
html.s3-intro-on .pr-hero *,
html.s3-intro-on .pr-hero *::before,
html.s3-intro-on .pr-hero *::after { animation-play-state: paused !important; }

/* short laptop screens: keep everything inside one screen */
@media (min-width: 861px) and (max-height: 820px) {
    .pr-title { font-size: clamp(3rem, 5vw, 4.6rem); }
    .pr-h1 { font-size: clamp(1.35rem, 1.9vw, 1.8rem); }
    .pr-desc { line-height: 1.6; margin-bottom: 1.2rem; }
    .pr-trust { margin-top: 1.2rem; }
}

/* ---- tablets / small laptops ---- */
@media (max-width: 1100px) {
    .pr-title { font-size: clamp(3rem, 6.2vw, 4.6rem); }
    .pr-corner { display: none; }
}

/* ---- phones & portrait tablets ---- */
@media (max-width: 860px) {
    .pr-hero { min-height: 0; }
    .pr-bg::before {
        background:
            radial-gradient(90% 55% at 50% 28%, #571a12 0%, #36130d 42%, rgba(21, 11, 7, 0) 80%),
            linear-gradient(180deg, #1c0f09 0%, #150b07 100%);
    }
    .pr-glow { right: 50%; top: 26%; transform: translate(50%, -50%); width: 110vw; }
    .pr-pattern { left: 50%; top: 78%; transform: translate(-50%, -50%); width: 120vw; opacity: 0.5; }
    .pr-inner { grid-template-columns: 1fr; padding-top: 80px; gap: 0; }
    .pr-figure { order: -1; height: min(64svh, 560px); min-height: 380px; }
    .pr-person { height: 94%; }
    .pr-smoke { width: 40%; }
    .pr-badge { font-size: 0.82rem; bottom: 2.5%; }
    .pr-badge-icon { width: 26px; height: 26px; font-size: 0.75rem; }
    .pr-copy { max-width: 620px; margin: 0 auto; padding: 1.8rem 0 3.2rem; text-align: center; }
    .pr-eyebrow { justify-content: center; font-size: 0.68rem; letter-spacing: 0.12em; }
    .pr-eyebrow::before { display: none; }
    .pr-heading { align-items: center; }
    .pr-title { font-size: clamp(3rem, 15vw, 4.4rem); }
    .pr-title-tag { letter-spacing: 0.34em; padding-left: 0.34em; }
    .pr-lotus { margin-left: auto; margin-right: auto; }
    .pr-desc { margin-left: auto; margin-right: auto; font-size: 0.95rem; }
    .pr-actions { justify-content: center; }
    .pr-trust { margin-left: auto; margin-right: auto; }
    .pr-trust li { align-items: center; }
    .pr-trust li:first-child { padding-left: 1rem; }
}
@media (max-width: 400px) {
    .pr-h1 { font-size: 1.3rem; }
    .pr-trust strong { font-size: 1.3rem; }
    .pr-trust li { padding: 0 0.6rem; }
}
@media (orientation: landscape) and (max-height: 540px) {
    .pr-inner { grid-template-columns: 1.1fr 0.9fr; padding-top: 66px; }
    .pr-figure { order: 0; height: calc(100svh - 66px); min-height: 0; }
    .pr-copy { text-align: left; padding: 1rem 0 2rem; }
    .pr-heading { align-items: flex-start; }
    .pr-title { font-size: 3rem; }
    .pr-h1 { font-size: 1.2rem; margin-top: 0.5rem; }
    .pr-desc, .pr-trust, .pr-sub, .pr-lotus { display: none; }
    .pr-eyebrow, .pr-actions { justify-content: flex-start; }
    .pr-corner { display: none; }
}

/* reduced motion: static, fully visible */
@media (prefers-reduced-motion: reduce) {
    .pr-hero *, .pr-hero *::before, .pr-hero *::after { animation: none !important; transition: none !important; }
    .pr-smoke, .pr-dust { display: none; }
    .pr-title { background-position: 40% 0; }
}

/* fallback (set by app.js) when animations can't run: final state, no motion */
.pr-hero.pr-static *, .pr-hero.pr-static *::before, .pr-hero.pr-static *::after { animation: none !important; }
.pr-hero.pr-static .pr-smoke, .pr-hero.pr-static .pr-dust { display: none; }


/* ==========================================================================
   HERO — BRAND AMBASSADOR IN THE S3 OFFICE (30 Oct 2026)
   Photo (images/hero-ambassador-office.webp) fills the right ~64%, fading
   into a deep espresso panel on the left that holds the text.
   Fonts: Playfair Display (headings) + Manrope (text).
   Gentle one-time fade-up of the text only; the photo stays still.
   ========================================================================== */
.am-hero {
    --am-gold: #d9ad5f;
    --am-gold-lt: #f1d79c;
    --am-ink: #fbf5ec;
    --am-scroll-y: 0px;
    --am-scroll-opacity: 1;
    --am-scroll-scale: 1;
    --am-scroll-blur: 0px;
    --am-img-y: 0px;
    --am-img-scale: 1;
    --am-badge-y: 0px;
    --am-badge-opacity: 1;
    --am-hint-opacity: 1;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    background: #140c08;
    color: #e8ddcf;
    font-family: 'Poppins', 'Manrope', 'Inter', sans-serif;
    isolation: isolate;
    display: flex; align-items: center;
}
.am-photo {
    position: absolute; z-index: -2;
    top: 0; right: 0; bottom: 0;
    width: 64%;
    margin: 0;
    overflow: hidden;
}
.am-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 55% 30%;
    display: block;
    will-change: transform;
    transform: translate3d(0, var(--am-img-y, 0px), 0) scale(var(--am-img-scale, 1));
    transform-origin: 55% 30%;
}
/* fade the photo into the text panel + soft vignette */
.am-photo::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, #140c08 0%, rgba(20, 12, 8, 0.92) 12%, rgba(20, 12, 8, 0.45) 30%, rgba(20, 12, 8, 0) 50%),
        linear-gradient(180deg, rgba(20, 12, 8, 0.55) 0%, rgba(20, 12, 8, 0) 18%, rgba(20, 12, 8, 0) 75%, rgba(20, 12, 8, 0.7) 100%);
}
.am-hero::before {                       /* warm glow behind the text */
    content: ""; position: absolute; z-index: -1;
    left: -10%; top: 15%;
    width: 55%; height: 80%;
    background: radial-gradient(closest-side, rgba(150, 50, 25, 0.28), rgba(150, 50, 25, 0));
    pointer-events: none;
}
.am-hero::after {                        /* gold hairline at the bottom */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217, 173, 95, 0.6) 30%, rgba(217, 173, 95, 0.6) 70%, transparent);
}

.am-inner { width: 100%; padding-top: 118px; padding-bottom: 48px; padding-left: max(24px, 4vw); padding-right: max(24px, 4vw); }
@media (min-width: 1240px) { .am-inner { padding-left: 1rem; padding-right: 1rem; } }
.am-copy {
    max-width: 500px;
    will-change: transform, opacity;
    transform: translate3d(0, calc(var(--am-scroll-y, 0px) * -1), 0) scale(var(--am-scroll-scale, 1));
    opacity: var(--am-scroll-opacity, 1);
    filter: blur(var(--am-scroll-blur, 0px));
    transform-origin: left center;
}

.am-eyebrow {
    display: inline-flex; align-items: center; gap: 0.75rem;
    font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--am-gold);
}
.am-eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--am-gold); }

.am-heading { margin: 1.1rem 0 0; display: flex; flex-direction: column; align-items: flex-start; }
.am-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 800;
    font-size: clamp(3.2rem, 5.6vw, 5.4rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, #f6e1ad 0%, #d9ad5f 60%, #b18435 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--am-gold);
}
.am-tag {
    margin-top: 0.7rem;
    font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.42em; text-transform: uppercase;
    color: #cdb48a;
}
.am-h1 {
    margin-top: 1.5rem;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(217, 173, 95, 0.28);
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.25;
    color: var(--am-ink);
}
.am-sub {
    margin: 0.7rem 0 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic; font-weight: 500;
    font-size: 1.08rem;
    color: var(--am-gold-lt);
}
.am-desc {
    margin: 1rem 0 0;
    font-size: 0.98rem; line-height: 1.75;
    color: rgba(232, 221, 207, 0.78);
}
.am-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; margin-top: 1.8rem;
    will-change: transform;
    transform: translate3d(0, calc(var(--am-scroll-y, 0px) * -0.08), 0);
}
.am-hero .am-btn {
    font-family: 'Poppins', 'Manrope', sans-serif; font-weight: 700; letter-spacing: 0.01em;
    padding: 0.95rem 1.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #d42a2f 0%, #a3161d 100%) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px -12px rgba(212, 42, 47, 0.7) !important;
    display: inline-flex; align-items: center; gap: 0.6rem;
}
.am-hero .am-btn i { transition: transform .25s ease; }
.am-hero .am-btn:hover i { transform: translateX(4px); }
.am-link {
    font-weight: 700; font-size: 0.95rem;
    color: var(--am-ink); text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1.5px solid rgba(217, 173, 95, 0.6);
    transition: color .2s ease, border-color .2s ease;
}
.am-link:hover { color: var(--am-gold-lt); border-color: var(--am-gold-lt); }

.am-trust {
    list-style: none; margin: 2.2rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr);
    max-width: 420px;
    border: 1px solid rgba(217, 173, 95, 0.25);
    border-radius: 14px;
    background: rgba(20, 12, 8, 0.45);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    will-change: transform;
    transform: translate3d(0, calc(var(--am-scroll-y, 0px) * -0.14), 0);
}
.am-trust li { padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.am-trust li + li { border-left: 1px solid rgba(217, 173, 95, 0.2); }
.am-trust strong { font-family: 'Poppins', 'Playfair Display', Georgia, serif; font-size: 1.55rem; font-weight: 700; color: var(--am-gold-lt); line-height: 1.1; }
.am-trust span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232, 221, 207, 0.6); }

.am-badge {
    position: absolute; left: 50%; bottom: 6%;
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 1.1rem 0.55rem 0.8rem;
    border-radius: 999px;
    background: rgba(20, 12, 8, 0.7);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(217, 173, 95, 0.4);
    font-weight: 700; font-size: 0.88rem; color: var(--am-ink);
    will-change: transform, opacity;
    transform: translate3d(0, var(--am-badge-y, 0px), 0);
    opacity: var(--am-badge-opacity, 1);
}
.am-badge small { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--am-gold); font-weight: 700; }
.am-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--am-gold); box-shadow: 0 0 0 4px rgba(217, 173, 95, 0.2); }

/* gentle one-time fade-up of the text (photo stays still) */
@keyframes amUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.am-in { animation: amUp .8s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--i, 0) * .09s) both; }
html.s3-intro-on .am-in { animation-play-state: paused; }

/* laptops */
@media (max-width: 1180px) {
    .am-photo { width: 68%; }
    .am-copy { max-width: 440px; }
    .am-desc { font-size: 0.92rem; }
}
/* short screens */
@media (min-width: 861px) and (max-height: 760px) {
    .am-inner { padding-top: 100px; }
    .am-title { font-size: clamp(2.8rem, 4.8vw, 4.2rem); }
    .am-h1 { margin-top: 1.1rem; padding-top: 1rem; font-size: 1.5rem; }
    .am-actions { margin-top: 1.3rem; }
    .am-trust { margin-top: 1.5rem; }
}

/* phones & portrait tablets: photo on top, text below */
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero {
        display: block !important;
        min-height: 0 !important;
        padding-top: 74px !important;
        background: #140c08 !important;
        color: #e8ddcf !important;
    }
    .am-photo {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 0.95 !important;
        z-index: 0 !important;
    }
    .am-photo img {
        object-position: 60% 0% !important;
    }
    .am-photo::after {
        display: block !important;
        content: "" !important;
        background: linear-gradient(180deg, rgba(20, 12, 8, 0.35) 0%, rgba(20, 12, 8, 0) 25%, rgba(20, 12, 8, 0.65) 70%, #140c08 100%) !important;
    }
    .am-inner {
        padding: 1.8rem max(20px, 4vw) 3.2rem !important;
        background: #140c08 !important;
        position: relative !important;
        margin-top: 0 !important;
    }
    .am-copy {
        max-width: none !important;
        text-align: center !important;
        transform-origin: center top !important;
    }
    .am-heading { align-items: center !important; }
    .am-eyebrow {
        font-size: 0.72rem !important;
        letter-spacing: 0.12em !important;
        color: #d9ad5f !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .am-eyebrow::before {
        content: "" !important;
        display: inline-block !important;
        width: 22px !important;
        height: 1.5px !important;
        background: #d9ad5f !important;
        margin-right: 0.6rem !important;
    }
    .am-title {
        font-size: clamp(2.8rem, 13vw, 4rem) !important;
        background: linear-gradient(180deg, #f6e1ad 0%, #d9ad5f 60%, #b18435 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    .am-tag {
        letter-spacing: 0.28em !important;
        color: #e8d4ad !important;
        margin-top: 0.5rem !important;
    }
    .am-h1 {
        font-size: clamp(1.35rem, 5vw, 1.65rem) !important;
        color: #fbf5ec !important;
        align-self: stretch !important;
        border-top: 1px solid rgba(217, 173, 95, 0.3) !important;
        margin-top: 1rem !important;
        padding-top: 0.9rem !important;
    }
    .am-sub {
        color: #f1d79c !important;
        font-size: 0.98rem !important;
        margin-top: 0.6rem !important;
    }
    .am-desc {
        color: rgba(232, 221, 207, 0.85) !important;
        font-size: 0.92rem !important;
        line-height: 1.7 !important;
        margin-top: 0.8rem !important;
    }
    .am-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.9rem 1.4rem !important;
        margin-top: 1.5rem !important;
        transform: none !important;
    }
    .am-link {
        color: #fbf5ec !important;
        border-bottom: 1.5px solid rgba(217, 173, 95, 0.6) !important;
        font-weight: 600 !important;
    }
    .am-trust {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 380px !important;
        margin: 1.8rem auto 0 !important;
        background: rgba(20, 12, 8, 0.55) !important;
        border: 1px solid rgba(217, 173, 95, 0.35) !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        transform: none !important;
    }
    .am-trust li {
        align-items: center !important;
        padding: 0.75rem 0.6rem !important;
    }
    .am-trust strong {
        color: #f1d79c !important;
        font-size: 1.45rem !important;
    }
    .am-trust span {
        color: rgba(232, 221, 207, 0.65) !important;
        font-size: 0.68rem !important;
    }
    .am-badge {
        top: calc(74px + 95vw - 3.8rem) !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translate3d(-50%, var(--am-badge-y, 0px), 0) !important;
        background: rgba(20, 12, 8, 0.75) !important;
        border: 1px solid rgba(217, 173, 95, 0.45) !important;
        color: #fbf5ec !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }
}
@media (orientation: landscape) and (max-height: 540px) {
    .am-photo { width: 55%; }
    .am-copy { max-width: 48%; }
    .am-inner { padding-top: 70px; padding-bottom: 20px; }
    .am-desc { font-size: 0.82rem !important; line-height: 1.5 !important; }
    .am-sub { font-size: 0.9rem !important; }
    .am-trust { margin-top: 1rem !important; }
    .am-trust strong { font-size: 1.25rem !important; }
    .am-trust span { font-size: 0.6rem !important; }
    .am-title { font-size: 2.4rem !important; }
    .am-h1 { font-size: 1.15rem !important; margin-top: 0.6rem !important; padding-top: 0.5rem !important; }
    .am-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .am-in { animation: none !important; }
    .am-copy,
    .am-photo img,
    .am-actions,
    .am-trust,
    .am-badge {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        animation: none !important;
    }
}


/* ==========================================================================
   SITE THEME — WHITE (everything except the hero) · 29 Oct 2026
   Clean white pages, soft ivory alternate sections, antique-gold details,
   espresso headings, temple-red main buttons (same red as the hero).
   The hero (.pr-hero) keeps its own dark maroon styles.
   ========================================================================== */
:root {
    --th-ivory: #ffffff;        /* page background */
    --th-paper: #ffffff;        /* cards & panels */
    --th-sandal: #faf6ef;       /* alternate sections, image wells */
    --th-sandal-2: #f3ebdd;     /* chips, tracks, soft fills */
    --th-line: #ece2d1;
    --th-espresso: #1e130c;
    --th-ink: #2b2019;
    --th-body: #4b3f35;
    --th-muted: #7b6b5d;
    --th-gold: #a9822f;
    --th-gold-bright: #dba855;
    --th-herbal: #3f7a55;

    --th-red: #c41e26;
    --th-red-deep: #9e1820;
    --th-red-tint: #fdf0ef;
    --th-brown: #c41e26;
    --th-brown-deep: #9e1820;
    --th-brown-tint: #fdf0ef;
    --clr-primary: #c41e26;
    --clr-primary-dark: #9e1820;
    --clr-primary-light: #fdf0ef;

    --grad-primary: linear-gradient(135deg, #d42a2f 0%, #a3161d 100%);
    --grad-water: linear-gradient(100deg, #a9822f 0%, #c8973d 50%, #8a6524 100%);
    --grad-gold: linear-gradient(90deg, #a9822f, #dba855);
    --shadow-soft: 0 8px 24px -12px rgba(60, 40, 20, 0.16);
    --shadow-card: 0 18px 40px -22px rgba(60, 40, 20, 0.28), 0 2px 8px rgba(60, 40, 20, 0.04);
    --shadow-glow: 0 12px 26px -10px rgba(196, 30, 38, 0.45);
}

/* ---- page & sections ---- */
html, body { background-color: #ffffff; }
body { color: var(--th-body); }
h1, h2, h3, h4, h5, h6 { color: var(--th-ink); }
::selection { background: rgba(219, 168, 85, 0.3); color: var(--th-ink); }

.section { background: #ffffff; position: relative; }
.bg-light { background: linear-gradient(180deg, #faf6ef 0%, #fdfbf7 100%) !important; }
.section + .section::before {          /* thin gold rule between sections */
    content: ""; position: absolute; left: 50%; top: 0; width: min(70%, 900px); height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(169, 130, 47, 0.35), transparent);
    pointer-events: none;
}

/* section headers */
.badge {
    color: #8a6524 !important;
    background: #fbf5ea !important;
    border: 1px solid #e8d6b0 !important;
}
.section-header h2 { color: var(--th-ink); }
.section-header p { color: var(--th-muted); }
.section-header h2::after { background: linear-gradient(90deg, #c41e26 0 30%, #dba855 30% 100%); }
.gradient-text {
    background: linear-gradient(100deg, #a9822f 0%, #c8973d 50%, #8a6524 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: #a9822f !important;
}
.text-gold { color: var(--th-gold) !important; }
.text-green { color: var(--th-herbal) !important; }

/* ---- shared card look ---- */
.why-card,
.testimonial-card,
.contact-card,
.distributor-wrapper,
.about-cert,
.product-card {
    background: #ffffff !important;
    border: 1px solid var(--th-line) !important;
    box-shadow: var(--shadow-card) !important;
}
.why-card, .testimonial-card, .contact-card, .product-card, .perk-card, .about-cert {
    transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .35s ease,
                opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 110ms),
                translate .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 110ms),
                scale .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 110ms) !important;
}
.why-card:hover,
.testimonial-card:hover,
.contact-card:hover,
.product-card:hover {
    transform: translateY(-8px) !important;
    border-color: #dcc39a !important;
    box-shadow: 0 30px 50px -24px rgba(60, 40, 20, 0.35), 0 0 0 1px rgba(219, 168, 85, 0.18) !important;
}

/* icon tiles */
.why-icon-wrap,
.contact-card-icon,
.feature-item i,
.perk-card i {
    background: linear-gradient(135deg, #fbf3e4, #f5e8cf) !important;
    border: 1px solid #ead7b2;
    color: var(--th-gold) !important;
    transition: transform .5s cubic-bezier(.2,.8,.3,1.4), background .3s ease;
}
.why-icon-wrap i, .contact-card-icon i { color: var(--th-gold) !important; }
.why-card:hover .why-icon-wrap,
.contact-card:hover .contact-card-icon,
.perk-card:hover i,
.feature-item:hover i { transform: translateY(-4px) rotate(-8deg) scale(1.08); background: linear-gradient(135deg, #f6dca0, #dba855) !important; }
.why-card:hover .why-icon-wrap i,
.contact-card:hover .contact-card-icon i,
.perk-card:hover i,
.feature-item:hover i { color: #fff !important; }

/* ---- buttons ---- */
.btn-primary,
.btn-buy-now {
    position: relative; overflow: hidden;
    background: var(--grad-primary) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: var(--shadow-glow) !important;
}
.btn-primary:hover,
.btn-buy-now:hover {
    background: linear-gradient(135deg, #e0353a 0%, #b01b22 100%) !important;
    box-shadow: 0 16px 30px -10px rgba(196, 30, 38, 0.55) !important;
}
/* shine sweep on hover */
.btn-primary::after,
.btn-buy-now::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.4), rgba(255,255,255,0));
    transform: translateX(-140%) skewX(-20deg);
    transition: transform .7s ease;
    pointer-events: none;
}
.btn-primary:hover::after,
.btn-buy-now:hover::after { transform: translateX(300%) skewX(-20deg); }

.btn-secondary,
.btn-add-cart,
.about-cert-btn {
    background: #ffffff !important;
    color: var(--th-ink) !important;
    border: 1px solid #d9c49c !important;
}
.btn-secondary:hover,
.btn-add-cart:hover,
.about-cert-btn:hover,
.about-cert-btn:focus-visible {
    background: #fbf5ea !important;
    color: var(--th-red) !important;
    border-color: var(--th-red) !important;
}
.btn-card-details, .btn-card-details i { color: var(--th-gold) !important; }
.btn-card-details:hover { color: var(--th-red) !important; }

/* ---- products ---- */
.search-input-wrap input,
#productSearch {
    background: #ffffff !important;
    border: 1px solid var(--th-line) !important;
    color: var(--th-ink) !important;
    box-shadow: 0 8px 22px -14px rgba(60, 40, 20, 0.25);
}
.search-input-wrap .search-icon, .clear-search-btn { color: var(--th-gold) !important; }
.filter-btn {
    background: #ffffff !important;
    border: 1px solid var(--th-line) !important;
    color: var(--th-body) !important;
    transition: all .3s ease;
}
.filter-btn:hover { border-color: var(--th-gold) !important; color: var(--th-gold) !important; transform: translateY(-2px); }
.filter-btn.active {
    background: var(--grad-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 22px -10px rgba(196, 30, 38, 0.55) !important;
}

/* product studio: bright white set, warm spotlight, ivory podium with gold rim */
.product-card-top {
    background:
        radial-gradient(70% 55% at 50% -8%, rgba(255, 236, 200, 0.9) 0%, rgba(255, 236, 200, 0) 70%),
        linear-gradient(180deg, #ffffff 0%, #fbf7f0 58%, #f2e9da 72%, #f8f3ea 100%) !important;
}
.studio-spot { opacity: 0.55; }
.studio-podium {
    background: linear-gradient(90deg, #d8c5a8 0%, #efe3d1 22%, #fffdf9 48%, #f1e6d6 72%, #d2bc9b 100%) !important;
}
.studio-podium::before {
    background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f8f1e6 55%, #e8d9c1 100%) !important;
    box-shadow: inset 0 -1.5px 0 rgba(201, 162, 106, 0.85), 0 0 0 1px rgba(201, 162, 106, 0.35) !important;
}
.studio-podium::after { background: radial-gradient(closest-side, rgba(70, 48, 28, 0.3), rgba(70, 48, 28, 0)) !important; }
.product-pack-img { transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.product-card:hover .product-pack-img { transform: translateY(-10px) scale(1.03); filter: drop-shadow(0 18px 18px rgba(60, 40, 20, 0.25)); }
.product-card:hover .studio-spot { opacity: 0.9; }
.product-card-badge {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #6e5442 !important;
    border: 1px solid var(--th-line) !important;
}
.product-card-body { border-top: 1px solid #f1e9db; }
.product-card-title { color: var(--th-ink) !important; }
.product-card-title:hover { color: var(--th-red) !important; }
.product-card-fragrance { color: #8a6524 !important; }
.product-price-tag { color: var(--th-ink) !important; }
.product-pack-weight { background: #fbf3e4 !important; color: #7a5d24 !important; border: 1px solid #efdfbf; }
.qty-stepper { background: #ffffff !important; border: 1px solid var(--th-line) !important; }
.stepper-btn { color: var(--th-gold) !important; background: transparent !important; }
.stepper-btn:hover { color: #fff !important; background: var(--th-gold) !important; }

/* ---- testimonials ---- */
.stars { color: #e0a82e !important; }
.review-text { color: var(--th-body) !important; }
.client-avatar { background: linear-gradient(135deg, #f6dca0, #dba855) !important; color: #3a2612 !important; }
.testimonial-card { position: relative; overflow: hidden; }
.testimonial-card::before {           /* large soft quote mark */
    content: "\201C"; position: absolute; right: 18px; top: -18px;
    font-family: Georgia, serif; font-size: 7rem; line-height: 1;
    color: rgba(219, 168, 85, 0.16); pointer-events: none;
}

/* ---- about ---- */
.about-image-wrapper {
    background: linear-gradient(165deg, #ffffff 0%, #f5ecdc 100%) !important;
    border: 1px solid var(--th-line) !important;
    box-shadow: var(--shadow-card) !important;
}
.about-stamp { background: var(--th-espresso) !important; color: #e9dfd2 !important; border-color: rgba(219, 168, 85, 0.45) !important; }
.about-cert-tag { background: #fbf5ea !important; color: var(--th-gold) !important; border-color: #e8d6b0 !important; }

/* ---- distributor ---- */
.perk-card { background: #fdfaf5 !important; border: 1px solid var(--th-line) !important; }
.perk-card:hover { transform: translateX(6px); border-color: #dcc39a !important; background: #ffffff !important; box-shadow: var(--shadow-soft); }
.distributor-form-wrap { background: linear-gradient(180deg, #fdfaf5 0%, #f8f1e5 100%) !important; border: 1px solid var(--th-line) !important; }
.form-control,
.distributor-form input,
.distributor-form select,
.distributor-form textarea {
    background: #ffffff !important;
    border: 1px solid #e3d6c0 !important;
    color: var(--th-ink) !important;
    transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--th-gold) !important;
    box-shadow: 0 0 0 4px rgba(219, 168, 85, 0.18) !important;
    outline: none;
}

/* ---- contact ---- */
.contact-card a:hover, .office-map-link:hover, .office-map-link:focus-visible { color: var(--th-red) !important; }

/* ---- footer: soft ivory ---- */
.footer {
    background: linear-gradient(180deg, #faf6ef 0%, #f3ebdd 100%) !important;
    border-top: 2px solid #e3cfa6 !important;
    color: var(--th-body) !important;
}
.brand-col p, .contact-info li, .contact-info a, .footer-links a { color: var(--th-body) !important; }
.footer-col h4 { color: var(--th-ink) !important; }
.footer-col h4::after { background: linear-gradient(90deg, #c41e26 0 30%, #dba855 30% 100%) !important; }
.footer .text-gold { color: var(--th-gold) !important; }
.footer-links a { transition: color .25s ease, padding-left .25s ease; }
.footer-links a:hover { color: var(--th-red) !important; padding-left: 6px; }
.contact-info a:hover, .footer .office-map-link:hover { color: var(--th-red) !important; }
.social-links a { background: #ffffff !important; border: 1px solid #e3cfa6 !important; color: var(--th-gold) !important; transition: transform .3s ease, background .3s ease; }
.social-links a:hover { background: var(--th-red) !important; border-color: var(--th-red) !important; color: #fff !important; transform: translateY(-3px); }
.footer-bottom { border-top-color: #e6d9c3 !important; color: var(--th-muted) !important; }
.footer-logo-img { filter: url(#s3LogoOnLight) !important; }

/* ---- product pop-up & cart ---- */
.modal-content, .modal-content.glass-panel { background: #ffffff !important; border: 1px solid var(--th-line) !important; }
.cart-drawer { background: #ffffff !important; }
.cart-notification {
    background: #ffffff !important; color: var(--th-ink) !important;
    border: 1px solid #e3cfa6 !important;
    box-shadow: 0 18px 36px -14px rgba(60, 40, 20, 0.35) !important;
}

/* scrollbar */
@media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar-track { background: #faf6ef; }
    ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #dba855, #a9822f); border-color: #faf6ef; }
}

/* ==========================================================================
   SCROLL ANIMATIONS (outside the hero)
   Uses the site's existing reveal system (html.motion-ready + .is-revealed,
   added by app.js as each section scrolls into view).
   ========================================================================== */
/* section headers: badge → heading → text rise in one after another */
html.motion-ready .reveal-on-scroll .section-header > *,
html.motion-ready .reveal-on-scroll .about-text > *,
html.motion-ready .reveal-on-scroll .distributor-content > * {
    opacity: 0; translate: 0 18px;
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1);
}
html.motion-ready .reveal-on-scroll.is-revealed .section-header > *,
html.motion-ready .reveal-on-scroll.is-revealed .about-text > *,
html.motion-ready .reveal-on-scroll.is-revealed .distributor-content > * { opacity: 1; translate: 0 0; }
html.motion-ready .reveal-on-scroll .section-header > :nth-child(1),
html.motion-ready .reveal-on-scroll .about-text > :nth-child(1),
html.motion-ready .reveal-on-scroll .distributor-content > :nth-child(1) { transition-delay: .05s; }
html.motion-ready .reveal-on-scroll .section-header > :nth-child(2),
html.motion-ready .reveal-on-scroll .about-text > :nth-child(2),
html.motion-ready .reveal-on-scroll .distributor-content > :nth-child(2) { transition-delay: .15s; }
html.motion-ready .reveal-on-scroll .section-header > :nth-child(3),
html.motion-ready .reveal-on-scroll .about-text > :nth-child(3),
html.motion-ready .reveal-on-scroll .distributor-content > :nth-child(3) { transition-delay: .25s; }
html.motion-ready .reveal-on-scroll .section-header > :nth-child(n+4),
html.motion-ready .reveal-on-scroll .about-text > :nth-child(4),
html.motion-ready .reveal-on-scroll .distributor-content > :nth-child(n+4) { transition-delay: .35s; }
html.motion-ready .reveal-on-scroll .about-text > :nth-child(5) { transition-delay: .45s; }
html.motion-ready .reveal-on-scroll .about-text > :nth-child(n+6) { transition-delay: .55s; }

/* card grids: cards rise + settle from slightly smaller, staggered left → right */
html.motion-ready .why-us-grid > .reveal-up,
html.motion-ready .contact-cards-grid > .reveal-up,
html.motion-ready .slider-container .reveal-up,
html.motion-ready .products-grid > .product-card { scale: 0.96; }
html.motion-ready .why-us-grid > .reveal-up.is-revealed,
html.motion-ready .contact-cards-grid > .reveal-up.is-revealed,
html.motion-ready .slider-container .reveal-up.is-revealed,
html.motion-ready .products-grid > .product-card.is-revealed { scale: 1; }
.why-us-grid > :nth-child(2), .contact-cards-grid > :nth-child(2), .slider-container > :nth-child(2) { --i: 1; }
.why-us-grid > :nth-child(3), .contact-cards-grid > :nth-child(3), .slider-container > :nth-child(3) { --i: 2; }
.why-us-grid > :nth-child(4), .contact-cards-grid > :nth-child(4), .slider-container > :nth-child(4) { --i: 3; }
.products-grid > .product-card:nth-child(4n+2) { --i: 1; }
.products-grid > .product-card:nth-child(4n+3) { --i: 2; }
.products-grid > .product-card:nth-child(4n+4) { --i: 3; }

/* filter chips + search drop in */
html.motion-ready .products-section .search-input-wrap,
html.motion-ready .products-section .filter-btn {
    opacity: 0; translate: 0 12px;
    transition: opacity .6s ease, translate .6s cubic-bezier(.2,.7,.2,1), border-color .3s, color .3s, background .3s, transform .3s;
}
html.motion-ready .products-section.is-revealed .search-input-wrap,
html.motion-ready .products-section.is-revealed .filter-btn { opacity: 1; translate: 0 0; }
.products-section .search-input-wrap { transition-delay: .3s !important; }
.products-section .filter-btn:nth-child(1) { transition-delay: .38s, .38s, 0s, 0s, 0s, 0s; }
.products-section .filter-btn:nth-child(2) { transition-delay: .44s, .44s, 0s, 0s, 0s, 0s; }
.products-section .filter-btn:nth-child(3) { transition-delay: .50s, .50s, 0s, 0s, 0s, 0s; }
.products-section .filter-btn:nth-child(4) { transition-delay: .56s, .56s, 0s, 0s, 0s, 0s; }
.products-section .filter-btn:nth-child(5) { transition-delay: .62s, .62s, 0s, 0s, 0s, 0s; }
.products-section .filter-btn:nth-child(6) { transition-delay: .68s, .68s, 0s, 0s, 0s, 0s; }

/* about: gallery panel unveils from the bottom */
html.motion-ready .about.reveal-on-scroll .about-image-wrapper {
    clip-path: inset(100% 0 0 0 round 20px);
    transition: clip-path 1.1s cubic-bezier(.6,.05,.2,1) .15s;
}
html.motion-ready .about.reveal-on-scroll.is-revealed .about-image-wrapper { clip-path: inset(0 0 0 0 round 20px); }

/* distributor perks slide in one by one */
html.motion-ready .distributor .perk-card { opacity: 0; translate: -24px 0; }
html.motion-ready .distributor.is-revealed .perk-card { opacity: 1; translate: 0 0; }
.distributor .perk-card:nth-child(1) { --i: 3; }
.distributor .perk-card:nth-child(2) { --i: 4.5; }
.distributor .perk-card:nth-child(3) { --i: 6; }

/* footer columns rise in */
html.motion-ready .footer .footer-col { opacity: 0; translate: 0 20px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1); }
html.motion-ready .footer.is-revealed .footer-col { opacity: 1; translate: 0 0; }
.footer .footer-col:nth-child(2) { transition-delay: .12s; }
.footer .footer-col:nth-child(3) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    html.motion-ready .reveal-on-scroll .section-header > *,
    html.motion-ready .reveal-on-scroll .about-text > *,
    html.motion-ready .reveal-on-scroll .distributor-content > *,
    html.motion-ready .products-section .search-input-wrap,
    html.motion-ready .products-section .filter-btn,
    html.motion-ready .distributor .perk-card,
    html.motion-ready .footer .footer-col { opacity: 1 !important; translate: none !important; transition: none !important; }
    html.motion-ready .about.reveal-on-scroll .about-image-wrapper { clip-path: none !important; }
    .product-card:hover .product-pack-img, .why-card:hover, .product-card:hover { transform: none !important; }
}

/* ==========================================================================
   PRODUCTS — PURE WHITE PRESENTATION (29 Oct 2026)
   No studio set (spotlight, podium, contact shadow, smoke removed) and no
   brown / beige tints: each pack stands centred on plain white with a soft
   neutral shadow. Neutral greys for chips and borders, red for actions.
   ========================================================================== */
.products-section { background: #ffffff !important; }

/* card */
.product-card {
    background: #ffffff !important;
    border: 1px solid #ececec !important;
    box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.22), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}
.product-card:hover {
    border-color: #e0e0e0 !important;
    box-shadow: 0 28px 48px -24px rgba(0, 0, 0, 0.26), 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* image area: plain white, pack centred */
.product-card-top { background: #ffffff !important; }
.product-card .studio-spot,
.product-card .studio-podium,
.product-card .studio-contact,
.product-card .studio-smoke { display: none !important; }
.product-card .product-pack-img {
    top: 0 !important; bottom: 0 !important;
    margin: auto !important;
    object-position: 50% 50% !important;
    transform-origin: 50% 50% !important;
    filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.35)) drop-shadow(0 14px 16px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08)) !important;
}
@media (hover: hover) and (pointer: fine) {
    .product-card:hover .product-pack-img {
        transform: translateY(-8px) scale(1.04) !important;
        filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.35)) drop-shadow(0 22px 20px rgba(0, 0, 0, 0.16)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.08)) !important;
    }
}

/* labels & text */
.product-card-badge {
    background: #ffffff !important;
    color: #3a3a3a !important;
    border: 1px solid #e6e6e6 !important;
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.2);
}
.product-card-body { border-top: 1px solid #f0f0f0 !important; }
.product-card-title { color: #1d1d1d !important; }
.product-card-title:hover { color: #c41e26 !important; }
.product-card-fragrance { color: #666666 !important; }
.btn-card-details, .btn-card-details i { color: #c41e26 !important; }
.btn-card-details:hover { color: #9e1820 !important; }
.product-price-tag { color: #1d1d1d !important; }
.product-pricing-row { border-color: #f0f0f0 !important; }
.product-pack-weight {
    background: #f5f5f5 !important;
    color: #3a3a3a !important;
    border: 1px solid #e6e6e6 !important;
}
.product-card .qty-stepper { background: #ffffff !important; border: 1px solid #e2e2e2 !important; }
.product-card .stepper-btn { color: #444444 !important; }
.product-card .stepper-btn:hover { color: #ffffff !important; background: #c41e26 !important; }
.product-card .btn-add-cart {
    background: #ffffff !important;
    color: #1d1d1d !important;
    border: 1px solid #dcdcdc !important;
}
.product-card .btn-add-cart:hover { color: #c41e26 !important; border-color: #c41e26 !important; background: #fff5f5 !important; }

/* search + filter chips: neutral */
.products-section .badge { color: #c41e26 !important; background: #ffffff !important; border-color: #ececec !important; }
.products-section .search-input-wrap input,
#productSearch { border-color: #e3e3e3 !important; box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.2) !important; }
.products-section .search-input-wrap .search-icon,
.products-section .clear-search-btn { color: #888888 !important; }
.products-section .filter-btn:not(.active) {
    background: #ffffff !important;
    border-color: #e3e3e3 !important;
    color: #444444 !important;
}
.products-section .filter-btn:not(.active):hover { border-color: #c41e26 !important; color: #c41e26 !important; }

/* product pop-up & cart thumbnails on white too */
.modal-pack-wrap, .modal-image-col { background: #ffffff !important; }
.cart-item-img { background: #ffffff !important; border-color: #ececec !important; }
.product-card-body, .product-card-qty-row, .product-card-qty-row label, .product-card-qty-row span,
.product-price-tag small, .product-price-tag span, .product-pricing-row span:not(.product-pack-weight) { color: #666666 !important; }
.product-price-tag { color: #1d1d1d !important; }

/* ==========================================================================
   PRODUCTS — STANDING ON A WHITE FLOOR (29 Oct 2026)
   White wall meeting a light-grey floor, pack standing on it with a soft
   contact shadow and a faint glossy-floor reflection. No podium, no brown.
   ========================================================================== */
.product-card { --floor-h: 19%; }
.product-card-top {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #f9f9f9 76%) !important;
}
.product-card .studio-stage { z-index: 0; }
/* floor plane with a soft horizon */
.product-card .studio-stage::before {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: var(--floor-h);
    background: linear-gradient(180deg,
        rgba(236, 236, 236, 0) 0px,
        #efefef 14px,
        #f4f4f4 45%,
        #fbfbfb 100%);
    z-index: 0;
}
/* soft contact shadow where the pack meets the floor */
.product-card .studio-stage::after {
    content: "";
    position: absolute; left: 50%;
    bottom: calc(var(--floor-h) - 8px);
    width: 120px; height: 16px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0));
    z-index: 1;
    transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
}
/* the pack stands on the floor */
.product-card .product-pack-img {
    top: auto !important;
    bottom: calc(var(--floor-h) - 4px) !important;
    margin: 0 !important;
    object-position: 50% 100% !important;
    transform-origin: 50% 100% !important;
    z-index: 2;
    filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.35)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.10)) !important;
    -webkit-box-reflect: below 1px linear-gradient(to bottom, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.1) 12%, rgba(0, 0, 0, 0) 24%);
}
@media (hover: hover) and (pointer: fine) {
    .product-card:hover .product-pack-img {
        transform: translateY(-8px) scale(1.03) !important;
        filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.35)) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.12)) !important;
    }
    .product-card:hover .studio-stage::after { transform: translateX(-50%) scale(0.78); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    .product-card:hover .studio-stage::after { transform: translateX(-50%); opacity: 1; }
}

/* Products: one continuous white — no grey floor band, no wall gradient,
   no line between image and details (contact shadow under the pack kept). */
.product-card-top { background: #ffffff !important; }
.product-card .studio-stage::before { display: none !important; }
.product-card-body { border-top: 0 !important; }


/* ==========================================================================
   HERO — FIT TO ONE SCREEN (30 Oct 2026)
   Same layout; photo starts below the navbar and shows more of the scene
   (scaled to the hero height, anchored right), text slightly more compact.
   ========================================================================== */
@media (min-width: 861px), (orientation: landscape) {
    .am-hero { height: 100vh; height: 100svh; min-height: 560px; }
    .am-photo { top: 78px !important; left: 0 !important; right: 0 !important; width: auto !important; overflow: hidden; }
    .am-photo img {
        position: absolute; top: 0; right: -9%;
        width: auto !important; height: 100% !important;
        object-fit: initial !important;
    }
    .am-photo::after {
        background:
            linear-gradient(90deg, #140c08 0%, #140c08 22%, rgba(20, 12, 8, 0.75) 32%, rgba(20, 12, 8, 0) 46%),
            linear-gradient(180deg, rgba(20, 12, 8, 0.35) 0%, rgba(20, 12, 8, 0) 14%, rgba(20, 12, 8, 0) 78%, rgba(20, 12, 8, 0.75) 100%) !important;
    }
    .am-inner { padding-top: 92px !important; padding-bottom: 28px !important; }
    .am-copy { max-width: 470px; }
    .am-title { font-size: clamp(2.8rem, 4.6vw, 4.4rem) !important; }
    .am-tag { margin-top: 0.5rem; }
    .am-h1 { font-size: clamp(1.3rem, 1.8vw, 1.7rem) !important; margin-top: 1.1rem !important; padding-top: 1rem !important; }
    .am-sub { font-size: 1rem; margin-top: 0.5rem; }
    .am-desc { font-size: 0.93rem; line-height: 1.65; margin-top: 0.8rem; }
    .am-actions { margin-top: 1.3rem !important; }
    .am-hero .am-btn { padding: 0.8rem 1.45rem; }
    .am-trust { margin-top: 1.4rem !important; }
    .am-trust li { padding: 0.65rem 0.9rem; }
    .am-trust strong { font-size: 1.35rem; }
    .am-badge { bottom: 4% !important; left: 54% !important; }
}
@media (min-width: 861px) and (max-width: 1180px) {
    .am-photo img { right: -18%; }
    .am-copy { max-width: 420px !important; }
    .am-desc { font-size: 0.86rem; }
    .am-badge { left: 58% !important; }
}
@media (min-width: 861px) and (max-height: 720px) {
    .am-title { font-size: 3rem !important; }
    .am-h1 { margin-top: 0.8rem !important; padding-top: 0.75rem !important; font-size: 1.3rem !important; }
    .am-desc { line-height: 1.55; }
    .am-trust { margin-top: 1rem !important; }
}
@media (orientation: landscape) and (max-height: 540px) {
    .am-photo { top: 58px !important; }
    .am-photo img { right: -14%; }
    .am-inner { padding-top: 66px !important; }
}

/* ==========================================================================
   HERO — LEFT SIDE FILLED FROM THE PHOTO (30 Oct 2026)
   No hard edge: the whole hero is filled with a softly blurred copy of the
   office photo; the sharp photo melts into it from the left (mask), and a
   light warm tint behind the text keeps it readable.
   ========================================================================== */
@media (min-width: 861px), (orientation: landscape) {
    .am-hero { background: #2a1a12; }
    .am-photo { top: 0 !important; }
    .am-photo::before {
        content: ""; position: absolute; inset: -40px;
        background: url("images/hero-office-blur.webp") left center / cover no-repeat;
        filter: blur(18px) saturate(1.05);
        z-index: -1;
    }
    .am-photo img {
        top: 0; height: 100% !important;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 10%, #000 30%);
                mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 10%, #000 30%);
    }
    .am-photo::after {
        background:
            linear-gradient(90deg, rgba(28, 16, 10, 0.86) 0%, rgba(28, 16, 10, 0.78) 30%, rgba(28, 16, 10, 0.35) 46%, rgba(28, 16, 10, 0) 58%),
            linear-gradient(180deg, rgba(28, 16, 10, 0.55) 0%, rgba(28, 16, 10, 0) 16%, rgba(28, 16, 10, 0) 80%, rgba(28, 16, 10, 0.6) 100%) !important;
    }
    .am-hero::before { display: none; }
}

/* ==========================================================================
   HERO — ALIGNMENT (30 Oct 2026)
   Text column starts exactly in line with the navbar logo (same container
   padding), content vertically centred below the navbar, balanced line breaks.
   ========================================================================== */
.am-inner.container { padding-left: var(--am-pad, 0) !important; padding-right: var(--am-pad, 0) !important; }
.am-h1, .am-sub, .am-desc { text-wrap: balance; }
.am-copy { max-width: 480px !important; }
@media (min-width: 861px), (orientation: landscape) {
    .am-hero { align-items: stretch !important; }
    .am-inner { display: flex !important; flex-direction: column; justify-content: center;
        padding-top: calc(var(--am-nav, 80px) + 1.5rem) !important; padding-bottom: 2rem !important; }
}
@media (max-width: 860px) and (orientation: portrait) { .am-inner.container { padding-left: 20px !important; padding-right: 20px !important; } }

/* HERO — photo starts below the navbar so the full photo (head included) is visible */
@media (min-width: 861px), (orientation: landscape) {
    .am-photo { top: var(--am-nav, 80px) !important; overflow: visible !important; }
    .am-photo::before { top: calc(-1 * var(--am-nav, 80px) - 40px); }
    .am-photo img { top: 0 !important; height: 100% !important; }
}
@media (max-width: 860px) and (orientation: portrait) { .am-hero { padding-top: 80px !important; } }

/* HERO — soft faded text area: long eased fade from the text into the photo
   (no visible dark band), slightly lighter warm tint. */
@media (min-width: 861px), (orientation: landscape) {
    .am-photo::after {
        background:
            linear-gradient(90deg,
                rgba(30, 18, 12, 0.80) 0%,
                rgba(30, 18, 12, 0.78) 14%,
                rgba(30, 18, 12, 0.72) 24%,
                rgba(30, 18, 12, 0.62) 32%,
                rgba(30, 18, 12, 0.48) 40%,
                rgba(30, 18, 12, 0.32) 48%,
                rgba(30, 18, 12, 0.18) 56%,
                rgba(30, 18, 12, 0.07) 64%,
                rgba(30, 18, 12, 0) 72%),
            linear-gradient(180deg, rgba(30, 18, 12, 0.35) 0%, rgba(30, 18, 12, 0) 14%, rgba(30, 18, 12, 0) 82%, rgba(30, 18, 12, 0.5) 100%) !important;
    }
    .am-photo img {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 8%, rgba(0,0,0,0.45) 18%, rgba(0,0,0,0.8) 28%, #000 38%) !important;
                mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 8%, rgba(0,0,0,0.45) 18%, rgba(0,0,0,0.8) 28%, #000 38%) !important;
    }
    .am-photo::before { filter: blur(26px) saturate(1) brightness(0.95); }
    /* keep text crisp on the lighter fade */
    .am-h1, .am-desc, .am-sub { text-shadow: 0 1px 12px rgba(20, 12, 8, 0.55); }
    .am-trust { background: rgba(30, 18, 12, 0.35) !important; }
}

/* Hero consistent luxury dark theme (desktop & mobile) */
.am-hero { background: #140c08 !important; color: #e8ddcf !important; }

/* ==========================================================================
   HERO — ONE BALANCED PHOTO ACROSS THE WHOLE HERO (30 Oct 2026)
   images/hero-office-wide.webp = the office photo widened with its own
   window + plants side, so the whole hero is one real photo. No fade, no
   blur, no tint. Text sits on the bright window side in a light frosted card.
   ========================================================================== */
@media (min-width: 861px), (orientation: landscape) {
    .am-hero { background: #f1eee9 !important; }
    .am-photo { left: 0 !important; right: 0 !important; width: auto !important; overflow: hidden !important; }
    .am-photo::before, .am-photo::after { display: none !important; }
    .am-photo img {
        position: absolute !important; inset: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important; object-position: 62% 18% !important;
        -webkit-mask-image: none !important; mask-image: none !important;
    }
    .am-copy {
        background: rgba(250, 248, 244, 0.86);
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 22px;
        padding: 1.9rem 2.1rem 2rem;
        box-shadow: 0 30px 60px -30px rgba(40, 25, 15, 0.45);
        max-width: 500px !important;
    }
    .am-inner { padding-top: calc(var(--am-nav, 80px) + 1.2rem) !important; padding-bottom: 1.6rem !important; }
    .am-badge { left: auto !important; right: 3% !important; bottom: 5% !important; }
}
@media (min-width: 861px) and (max-width: 1180px) {
    .am-photo img { object-position: 70% 18% !important; }
    .am-copy { max-width: 440px !important; padding: 1.5rem 1.6rem 1.6rem; }
}
@media (min-width: 861px) and (max-height: 760px) {
    .am-copy { padding: 1.3rem 1.6rem 1.4rem; }
    .am-desc { font-size: 0.86rem; }
}
@media (max-width: 860px) and (orientation: portrait) {
    .am-photo img { object-position: 63% 0% !important; }
}
@media (min-width: 861px), (orientation: landscape) {
    .am-badge { right: auto !important; left: 63% !important; bottom: 4% !important; transform: translateX(-50%) !important; }
}
@media (min-width: 861px) and (max-width: 1180px) { .am-badge { left: 64% !important; } }

/* person now stands further right in the photo (next to the S3 BRAND wall) */
@media (min-width: 861px), (orientation: landscape) {
    .am-photo img { object-position: 74% 18% !important; }
    .am-badge { left: 71% !important; }
}
@media (min-width: 861px) and (max-width: 1180px) {
    .am-photo img { object-position: 80% 18% !important; }
    .am-badge { left: 73% !important; }
}
@media (max-width: 860px) and (orientation: portrait) { .am-photo img { object-position: 78% 0% !important; } }
@media (max-width: 860px) and (orientation: portrait) { .am-photo img { object-position: 68% 0% !important; } }

/* HERO — no text box: text sits directly on the photo; person shifted a little right */
@media (min-width: 861px), (orientation: landscape) {
    .am-copy {
        background: none !important; border: 0 !important; box-shadow: none !important;
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
        padding: 0 !important;
    }
    .am-photo img { object-position: 64% 18% !important; }
    .am-badge { left: 76% !important; }
    /* keep text readable on the bright window side: soft light glow behind the words */
    .am-copy .am-title, .am-copy .am-tag, .am-copy .am-eyebrow,
    .am-copy .am-h1, .am-copy .am-sub, .am-copy .am-desc {
        text-shadow: 0 0 18px rgba(255, 253, 248, 0.95), 0 0 6px rgba(255, 253, 248, 0.9) !important;
    }
    .am-copy .am-title { filter: drop-shadow(0 0 14px rgba(255, 253, 248, 0.9)); text-shadow: none !important; }
    .am-trust { background: none !important; box-shadow: none !important; border-color: rgba(120, 90, 40, 0.35) !important; }
}
@media (min-width: 861px) and (max-width: 1180px) {
    .am-photo img { object-position: 70% 18% !important; }
    .am-badge { left: 78% !important; }
}
/* text directly on the photo: light text + gentle left-edge shade (no blur, no box) */
@media (min-width: 861px), (orientation: landscape) {
    .am-photo::after {
        display: block !important; content: "" !important;
        background: linear-gradient(90deg, rgba(18, 11, 7, 0.82) 0%, rgba(18, 11, 7, 0.72) 26%, rgba(18, 11, 7, 0.4) 42%, rgba(18, 11, 7, 0) 58%) !important;
    }
    .am-copy .am-title, .am-copy .am-tag, .am-copy .am-eyebrow,
    .am-copy .am-h1, .am-copy .am-sub, .am-copy .am-desc { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55) !important; }
    .am-copy .am-title { filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.5)); }
    .am-title { background: linear-gradient(180deg, #f6e1ad 0%, #d9ad5f 60%, #b18435 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
    .am-eyebrow { color: #e3bf7a !important; }
    .am-eyebrow::before { background: #e3bf7a !important; }
    .am-tag { color: #e8d4ad !important; }
    .am-h1 { color: #fbf5ec !important; border-top-color: rgba(227, 191, 122, 0.4) !important; }
    .am-sub { color: #f1d79c !important; }
    .am-desc { color: rgba(251, 245, 236, 0.86) !important; }
    .am-link { color: #fbf5ec !important; border-bottom-color: rgba(227, 191, 122, 0.7) !important; }
    .am-trust { border-color: rgba(227, 191, 122, 0.4) !important; }
    .am-trust li + li { border-left-color: rgba(227, 191, 122, 0.3) !important; }
    .am-trust strong { color: #f1d79c !important; }
    .am-trust span { color: rgba(251, 245, 236, 0.7) !important; }
}

/* ==========================================================================
   HERO — UNIQUE TYPOGRAPHY & COLOUR (30 Oct 2026)
   Bodoni Moda italic title (saffron → gold), Cinzel engraved caps,
   Cormorant Garamond headline with marigold "No. 1", rose-gold italic line,
   Jost body. Same words.
   ========================================================================== */
.am-hero .am-eyebrow {
    font-family: 'Cinzel', serif !important; font-weight: 600; letter-spacing: 0.26em; font-size: 0.74rem;
    color: #f2c97a !important;
}
.am-hero .am-eyebrow::before { background: linear-gradient(90deg, #ff9f43, #f2c97a) !important; width: 34px; }
.am-hero .am-title {
    font-family: 'Bodoni Moda', 'Playfair Display', serif !important;
    font-style: italic; font-weight: 700;
    font-size: clamp(3.4rem, 6vw, 5.8rem) !important;
    letter-spacing: -0.02em; line-height: 0.95;
    padding-right: 0.12em;               /* room for the italic overhang */
    background: linear-gradient(100deg, #ffd27a 0%, #ffb347 28%, #f2c97a 52%, #fff0c8 66%, #e8a53c 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.am-hero .am-tag {
    font-family: 'Cinzel', serif !important; font-weight: 700;
    letter-spacing: 0.5em; font-size: 0.8rem;
    background: linear-gradient(90deg, #e9c27a, #fbe6b8 50%, #e9c27a) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.am-hero .am-h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700; font-size: clamp(1.7rem, 2.4vw, 2.3rem) !important; line-height: 1.12;
    color: #fff8ee !important;
    border-top: 0 !important; padding-top: 0.9rem !important; position: relative;
}
.am-hero .am-h1::before {               /* small saffron rule instead of the full-width line */
    content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, #c41e26 0 35%, #ffb347 35% 100%);
}
.am-hero .am-no1 {
    font-style: italic;
    background: linear-gradient(180deg, #ffcf5a, #ff8c2a) !important;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    padding-right: 0.06em;
}
.am-hero .am-sub {
    font-family: 'Cormorant Garamond', serif !important; font-style: italic; font-weight: 600;
    font-size: 1.22rem !important; color: #f4b8a0 !important;   /* rose-gold */
}
.am-hero .am-desc {
    font-family: 'Jost', 'Manrope', sans-serif !important; font-weight: 400;
    font-size: 0.98rem !important; letter-spacing: 0.01em; color: rgba(255, 246, 234, 0.88) !important;
}
.am-hero .am-btn { font-family: 'Jost', sans-serif !important; font-weight: 600; letter-spacing: 0.04em; }
.am-hero .am-link { font-family: 'Jost', sans-serif !important; font-weight: 600; letter-spacing: 0.04em; }
.am-hero .am-trust strong {
    font-family: 'Bodoni Moda', serif !important; font-style: italic; font-weight: 700;
    background: linear-gradient(180deg, #ffd27a, #e8a53c) !important;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.am-hero .am-trust span { font-family: 'Cinzel', serif !important; font-weight: 600; letter-spacing: 0.16em; }
.am-hero .am-no1, .am-hero .am-trust strong, .am-hero .am-title, .am-hero .am-tag {
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; text-shadow: none !important;
}
.am-hero .am-no1 { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45)); }

/* HERO — FRAUNCES (light, high-optical-size) for the headings, matching the reference font */
.am-hero .am-title,
.am-hero .am-h1,
.am-hero .am-trust strong {
    font-family: 'Fraunces', 'Cormorant Garamond', serif !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
}
.am-hero .am-title { font-size: clamp(3.6rem, 6.4vw, 6.2rem) !important; letter-spacing: -0.02em; line-height: 0.95; padding-right: 0.04em; }
.am-hero .am-h1 { font-weight: 400 !important; font-size: clamp(1.7rem, 2.5vw, 2.4rem) !important; letter-spacing: -0.01em; line-height: 1.12; }
.am-hero .am-no1 { font-style: normal !important; font-weight: 400; }
.am-hero .am-trust strong { font-weight: 400 !important; font-size: 1.6rem; }
@media (min-width: 861px) and (max-height: 760px) { .am-hero .am-title { font-size: clamp(3rem, 5vw, 4.6rem) !important; } }

/* HERO — GLOOCK + MONTSERRAT (matched to the client's reference) */
.am-hero .am-title,
.am-hero .am-h1,
.am-hero .am-trust strong {
    font-family: 'Gloock', 'DM Serif Display', serif !important;
    font-weight: 400 !important; font-style: normal !important;
    font-variation-settings: normal !important;
}
.am-hero .am-title { font-size: clamp(3.4rem, 6vw, 5.8rem) !important; letter-spacing: -0.03em; line-height: 0.95; }
.am-hero .am-h1 { font-size: clamp(1.7rem, 2.5vw, 2.4rem) !important; letter-spacing: -0.02em; line-height: 1.1; }
.am-hero .am-no1 { font-style: normal !important; }
.am-hero .am-eyebrow, .am-hero .am-tag, .am-hero .am-trust span {
    font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important;
}
.am-hero .am-sub {
    font-family: 'Montserrat', sans-serif !important; font-style: normal !important;
    font-weight: 500 !important; font-size: 1.02rem !important; letter-spacing: 0.01em;
}
.am-hero .am-desc { font-family: 'Montserrat', sans-serif !important; font-weight: 400 !important; font-size: 0.95rem !important; line-height: 1.75; }
.am-hero .am-btn, .am-hero .am-link { font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.02em; }
@media (min-width: 861px) and (max-height: 760px) { .am-hero .am-title { font-size: clamp(3rem, 5vw, 4.6rem) !important; } }

/* ==========================================================================
   WHOLE SITE — GLOOCK + MONTSERRAT (30 Oct 2026)
   Headings in Gloock, everything else in Montserrat. Icons untouched.
   ========================================================================== */
:root {
    --font-heading: 'Gloock', 'DM Serif Display', Georgia, serif;
    --font-body: 'Montserrat', 'Inter', Arial, sans-serif;
}
body, button, input, select, textarea,
p, li, a, label, span, small, address, td, th {
    font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6,
.section-header h2, .product-card-title, .modal-content h2, .modal-content h3,
.why-card h3, .contact-card h3, .feature-item h4, .perk-card h4, .about-cert h3,
.footer-col h4, .cart-drawer-header h3, .client-info h4,
.product-price-tag, .modal-price, .about-stamp strong {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em;
}
.section-header h2 { letter-spacing: -0.02em; }
/* small uppercase labels & buttons stay crisp in Montserrat */
.badge, .btn, .filter-btn, .product-card-badge, .product-pack-weight,
.btn-card-details, .navbar a, .mobile-menu a, .footer-links a, .stars + *, .gstin-tag {
    font-family: var(--font-body) !important;
}
.btn, .filter-btn, .badge { font-weight: 600 !important; }
/* keep icon fonts intact */
.fa, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}
.fa-brands { font-family: "Font Awesome 6 Brands" !important; }
.fa-solid, .fas { font-weight: 900 !important; }
.fa-regular, .far { font-weight: 400 !important; }
/* highlighted words inside headings use the heading font */
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
h1 em, h2 em, h3 em, h4 em { font-family: inherit !important; font-weight: inherit !important; }

/* ==========================================================================
   WHOLE SITE — FRAUNCES LIGHT HEADINGS (30 Oct 2026)
   Headings everywhere (hero included) use Fraunces Light — the client's first
   reference font. Body text, buttons and labels stay Montserrat.
   ========================================================================== */
:root { --font-heading: 'Fraunces', 'Cormorant Garamond', Georgia, serif; }
h1, h2, h3, h4, h5, h6,
.section-header h2, .product-card-title, .modal-content h2, .modal-content h3,
.why-card h3, .contact-card h3, .feature-item h4, .perk-card h4, .about-cert h3,
.footer-col h4, .cart-drawer-header h3, .client-info h4,
.product-price-tag, .modal-price, .about-stamp strong,
.am-hero .am-title, .am-hero .am-h1, .am-hero .am-trust strong {
    font-family: var(--font-heading) !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0 !important;
    letter-spacing: -0.015em;
}
/* smaller headings a touch heavier so they stay readable */
h3, h4, h5, h6, .product-card-title, .why-card h3, .contact-card h3, .feature-item h4,
.perk-card h4, .footer-col h4, .client-info h4, .cart-drawer-header h3, .about-cert h3,
.product-price-tag, .modal-price { font-weight: 400 !important; font-variation-settings: "opsz" 36 !important; }
.am-hero .am-h1 { font-weight: 400 !important; }
.am-hero .am-title { font-size: clamp(3.6rem, 6.4vw, 6.2rem) !important; letter-spacing: -0.02em; }

/* BIG HEADINGS BOLD — large headings in Fraunces Bold (700) */
h1, h2,
.section-header h2, .section-header h2 span,
.am-hero .am-title, .am-hero .am-h1, .am-hero .am-no1, .am-hero .am-trust strong,
.about-text h2, .distributor-content h2, .modal-content h2 {
    font-weight: 700 !important;
    font-variation-settings: "opsz" 144 !important;
}
.am-hero .am-title { letter-spacing: -0.025em; }


/* ==========================================================================
   WHOLE SITE — NOHEMI™ (30 Oct 2026)
   Clean, modern geometric sans-serif typeface designed by Rajesh Rajput,
   featuring 9 beautifully crafted weights from Thin (100) to Black (900)
   with signature ink-trap details and contemporary precision.
   ========================================================================== */
:root {
    --font-heading: 'Nohemi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Nohemi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Nohemi', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body, button, input, select, textarea,
p, li, a, label, span, small, address, td, th {
    font-family: var(--font-body);
}

/* Headings across all sections */
h1, h2, h3, h4, h5, h6,
.section-header h2, .product-card-title, .modal-content h2, .modal-content h3,
.why-card h3, .contact-card h3, .feature-item h3, .feature-item h4,
.perk-card h3, .perk-card h4, .about-cert h3, .footer-col h4,
.cart-drawer-header h3, .client-info h4, .about-stamp strong {
    font-family: var(--font-heading) !important;
    font-style: normal !important;
    letter-spacing: -0.02em;
}

/* Large display headings in Nohemi Bold / ExtraBold */
h1, h2,
.section-header h2, .section-header h2 span,
.about-text h2, .distributor-content h2, .modal-content h2 {
    font-weight: 800 !important;
    letter-spacing: -0.03em;
}

/* Medium & card headings */
h3, h4, h5, h6,
.product-card-title, .why-card h3, .contact-card h3,
.feature-item h3, .feature-item h4, .perk-card h3, .perk-card h4,
.footer-col h4, .client-info h4, .cart-drawer-header h3, .about-cert h3 {
    font-weight: 700 !important;
    letter-spacing: -0.015em;
}

/* HERO SECTION — Ambassadress Hero Typography in Nohemi */
.am-hero .am-title {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(3.6rem, 6.4vw, 6.2rem) !important;
    letter-spacing: -0.035em !important;
    line-height: 0.95 !important;
}

.am-hero .am-tag {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
}

.am-hero .am-h1 {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.7rem, 2.5vw, 2.4rem) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
}

.am-hero .am-no1 {
    font-family: 'Nohemi', sans-serif !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

.am-hero .am-eyebrow {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.am-hero .am-sub {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.005em !important;
}

.am-hero .am-desc {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
}

.am-hero .am-btn {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

.am-hero .am-link {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.am-hero .am-trust strong {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.75rem !important;
    letter-spacing: -0.02em !important;
}

.am-hero .am-trust span {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
}

.am-badge {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 600 !important;
}

/* Prices, Weights & Numeric Tags */
.product-price-tag, .modal-price, .modal-subtotal strong, #cartSubtotal {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

.product-pack-weight, .modal-weight {
    font-family: 'Nohemi', sans-serif !important;
    font-weight: 600 !important;
}

/* Badges, Buttons, Navigation Links & Pills */
.badge, .btn, .filter-btn, .product-card-badge, .btn-card-details,
.navbar a, .mobile-menu a, .footer-links a, .tag-pill, .gstin-tag {
    font-family: 'Nohemi', sans-serif !important;
}

.btn, .filter-btn, .btn-card-details {
    font-weight: 700 !important;
    letter-spacing: 0.015em;
}

.badge, .product-card-badge {
    font-weight: 600 !important;
    letter-spacing: 0.06em;
}

.navbar a, .mobile-menu a {
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

/* Keep Font Awesome icon fonts completely intact */
.fa, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}
.fa-brands { font-family: "Font Awesome 6 Brands" !important; }
.fa-solid, .fas { font-weight: 900 !important; }
.fa-regular, .far { font-weight: 400 !important; }


/* ==========================================================================
   WHOLE SITE — POPPINS™ GEOMETRIC (30 Oct 2026)
   Clean, modern geometric sans-serif typeface from Indian Type Foundry.
   Featuring single-story 'a', spurless curved 'u', clean circular geometry,
   and contemporary elegance applied across the entire website.
   ========================================================================== */
:root {
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body, button, input, select, textarea,
p, li, a, label, span, small, address, td, th {
    font-family: var(--font-body);
}

/* Headings across all sections */
h1, h2, h3, h4, h5, h6,
.section-header h2, .product-card-title, .modal-content h2, .modal-content h3,
.why-card h3, .contact-card h3, .feature-item h3, .feature-item h4,
.perk-card h3, .perk-card h4, .about-cert h3, .footer-col h4,
.cart-drawer-header h3, .client-info h4, .about-stamp strong {
    font-family: var(--font-heading) !important;
    font-style: normal !important;
    letter-spacing: -0.015em;
}

/* Large display headings in Poppins Bold / ExtraBold */
h1, h2,
.section-header h2, .section-header h2 span,
.about-text h2, .distributor-content h2, .modal-content h2 {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* Medium & card headings */
h3, h4, h5, h6,
.product-card-title, .why-card h3, .contact-card h3,
.feature-item h3, .feature-item h4, .perk-card h3, .perk-card h4,
.footer-col h4, .client-info h4, .cart-drawer-header h3, .about-cert h3 {
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

/* HERO SECTION — Ambassadress Hero Typography in Poppins */
.am-hero .am-title {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(3.4rem, 6.2vw, 5.8rem) !important;
    letter-spacing: -0.03em !important;
    line-height: 0.98 !important;
}

.am-hero .am-tag {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-size: 0.88rem !important;
}

.am-hero .am-h1 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem) !important;
    letter-spacing: -0.015em !important;
    line-height: 1.18 !important;
}

.am-hero .am-no1 {
    font-family: 'Poppins', sans-serif !important;
    font-style: normal !important;
    font-weight: 800 !important;
}

.am-hero .am-eyebrow {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-size: 0.82rem !important;
}

.am-hero .am-sub {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.005em !important;
}

.am-hero .am-desc {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.96rem !important;
    line-height: 1.72 !important;
}

.am-hero .am-actions .am-btn, .am-hero .am-btn {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.am-hero .am-link {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.am-hero .am-trust strong {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.65rem !important;
    letter-spacing: -0.015em !important;
}

.am-hero .am-trust span {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
}

.am-badge {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}

/* Prices, Weights & Numeric Tags */
.product-price-tag, .modal-price, .modal-subtotal strong, #cartSubtotal {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
}

.product-pack-weight, .modal-weight {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
}

/* Badges, Buttons, Navigation Links & Pills */
.badge, .btn, .filter-btn, .product-card-badge, .btn-card-details,
.navbar a, .mobile-menu a, .footer-links a, .tag-pill, .gstin-tag {
    font-family: 'Poppins', sans-serif !important;
}

.btn, .filter-btn, .btn-card-details {
    font-weight: 600 !important;
    letter-spacing: 0.015em;
}

.badge, .product-card-badge {
    font-weight: 600 !important;
    letter-spacing: 0.06em;
}

.navbar a, .mobile-menu a {
    font-weight: 500 !important;
    letter-spacing: 0.01em;
}

/* Keep Font Awesome icon fonts completely intact */
.fa, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}
.fa-brands { font-family: "Font Awesome 6 Brands" !important; }
.fa-solid, .fas { font-weight: 900 !important; }
.fa-regular, .far { font-weight: 400 !important; }


/* ==========================================================================
   PRODUCT CARDS — LIFESTYLE PHOTOS (31 Oct 2026)
   Products with a scene photo (images/products/<id>.webp) show it filling the
   card's image area instead of the plain pack. Gentle zoom on hover.
   ========================================================================== */
.product-card.has-photo .product-card-top { padding: 0 !important; overflow: hidden; background: #f4efe7 !important; }
.product-card.has-photo .product-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 45%;
    display: block;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.product-card.has-photo:hover .product-photo { transform: scale(1.05); }
.product-card.has-photo .product-card-badge { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .product-card.has-photo:hover .product-photo { transform: none; } }

/* Photos are pre-fitted to 3:4 (900x1200), full-bleed — the image area takes the same shape so each pack shows whole, never cropped */
.product-card.has-photo .product-card-top { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 3 / 4; }
.product-card.has-photo .product-photo { object-position: 50% 50%; }

/* Product details pop-up — show the same lifestyle photo, filling the image panel (3:4) */
.modal-pack-wrap.has-photo { padding: 0 !important; overflow: hidden; aspect-ratio: 3 / 4; height: auto !important; min-height: 0 !important; background: #f4efe7 !important; }
.modal-pack-wrap.has-photo .modal-pack-img {
    width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
    object-fit: cover; object-position: 50% 50%;
    filter: none !important; -webkit-box-reflect: unset !important; transform: none !important; animation: none !important;
    margin: 0 !important; display: block;
}
.modal-pack-wrap.has-photo::before, .modal-pack-wrap.has-photo::after { display: none !important; }

/* About — product pack gallery removed (31 Oct 2026); content takes the full width */
.about-grid { grid-template-columns: minmax(0, 1fr) !important; max-width: 920px; margin-inline: auto; }

/* ==========================================================================
   ABOUT — BLESSING FROM THAMPURATTI (31 Oct 2026)
   Photo left (gold frame), Malayalam heading + quote and two points right.
   ========================================================================== */
.about-blessing {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.ab-photo {
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(201, 150, 70, 0.55);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 60px -32px rgba(74, 46, 20, 0.35);
}
.ab-photo img { display: block; width: 100%; height: auto; border-radius: 14px; }
.ab-eyebrow {
    display: inline-block;
    font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: #a0673a;
    padding-bottom: 0.7rem; margin-bottom: 1.3rem;
    border-bottom: 2px solid #c08a4e;
    border-image: linear-gradient(90deg, #c08a4e 0 48px, transparent 48px) 1;
}
.ab-title-ml {
    font-family: 'Noto Serif Malayalam', serif !important;
    font-weight: 500 !important;
    font-size: clamp(1.35rem, 2.1vw, 1.85rem) !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    color: #2d211a !important;
    margin: 0 0 1.4rem;
}
.ab-divider { display: flex; align-items: center; gap: 0.9rem; color: #c08a4e; margin: 0 0 1.4rem; }
.ab-divider::before, .ab-divider::after { content: ""; flex: 1; height: 1px; background: rgba(192, 138, 78, 0.45); }
.ab-quote-ml {
    font-family: 'Noto Serif Malayalam', serif;
    font-size: clamp(1.08rem, 1.55vw, 1.32rem);
    line-height: 1.7;
    color: #3a2a20;
    margin: 0 0 1.8rem; padding: 0; border: 0;
}
.ab-point { margin-bottom: 1.3rem; }
.ab-point:last-child { margin-bottom: 0; }
.ab-point h3 {
    font-family: 'Fraunces', serif !important; font-weight: 600 !important;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem) !important;
    color: #8e4f24 !important; margin: 0 0 0.35rem;
}
.ab-point p { margin: 0; color: #4b3f35; font-size: 1rem; line-height: 1.65; max-width: 34rem; }
@media (max-width: 900px) {
    .about-blessing { grid-template-columns: minmax(0, 1fr); }
    .ab-photo { max-width: 460px; margin-inline: auto; }
}

/* ==========================================================================
   OUR VALUABLE CLIENTS — INFINITE LOGO MARQUEE (31 Oct 2026)
   The track holds the logo set four times; it slides left by half its width
   and loops seamlessly. Hover (or touch) pauses. Edges fade out.
   ========================================================================== */
.clients { padding-bottom: clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.clients .section-header { margin-bottom: clamp(2rem, 4vw, 3rem); }
.clients-marquee {
    position: relative;
    overflow: hidden;
    padding: 1.2rem 0 1.6rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.clients-track {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: clamp(1rem, 2vw, 1.6rem);
    width: max-content;
    animation: clientsScroll 34s linear infinite;
}
.clients-marquee:hover .clients-track,
.clients-marquee:active .clients-track { animation-play-state: paused; }
@keyframes clientsScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - clamp(1rem, 2vw, 1.6rem) / 2)); } }

.client-card {
    flex: none;
    width: clamp(210px, 22vw, 260px);
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 1.6rem 1.2rem 1.4rem;
    background: #fff;
    border: 1px solid rgba(201, 150, 70, 0.28);
    border-radius: 20px;
    box-shadow: 0 18px 36px -26px rgba(74, 46, 20, 0.35);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.client-card:hover { transform: translateY(-6px); border-color: rgba(201, 150, 70, 0.6); box-shadow: 0 26px 44px -26px rgba(74, 46, 20, 0.45); }
.client-logo {
    width: 116px; height: 116px;
    display: grid; place-items: center;
    margin-bottom: 1.1rem;
}
.client-logo img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.12)); }
.client-logo--square img { border-radius: 18px; }
.client-name {
    font-family: 'Fraunces', serif; font-weight: 600;
    font-size: 1.02rem; line-height: 1.3; color: #2d211a;
    min-height: 2.6em; display: flex; align-items: center;
}
.client-sub { margin-top: 0.35rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: #a0673a; }

@media (max-width: 600px) {
    .client-card { width: 190px; padding: 1.3rem 1rem 1.2rem; }
    .client-logo { width: 96px; height: 96px; }
    .clients-track { animation-duration: 26s; }
}
@media (prefers-reduced-motion: reduce) {
    .clients-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
    .clients-track > [aria-hidden="true"] { display: none; }
    .clients-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   HERO — PHOTO SLIDER (31 Oct 2026)
   Two widened photos (office + puja) roll in a loop behind the same text:
   the new photo glides in from the right while the old one glides out left
   and fades. Uses the `translate` property so the scroll-parallax
   `transform` on the photo keeps working. Gold dots show the timer.
   ========================================================================== */
.am-photo .am-slide {
    opacity: 0;
    translate: 3.5% 0; scale: 1.08;
    transition: opacity 1.4s ease, translate 1.8s cubic-bezier(.22,.7,.2,1), scale 1.8s cubic-bezier(.22,.7,.2,1);
}
.am-photo .am-slide.is-active { opacity: 1; translate: 0 0; scale: 1; z-index: 1; }
.am-photo .am-slide.is-leaving { opacity: 0; translate: -3.5% 0; scale: 1.08; z-index: 0; }
.am-photo .am-slide + .am-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; }
@media (min-width: 861px), (orientation: landscape) {
    .am-photo .am-slide { position: absolute !important; inset: 0 !important; }
}
/* puja photo framing: keep the lamp, packs and ambassador in view */
.am-photo .am-slide + .am-slide { object-position: 100% 50% !important; }
@media (max-width: 860px) and (orientation: portrait) { .am-photo .am-slide + .am-slide { object-position: 74% 50% !important; } }

.am-dots {
    position: absolute; z-index: 5;
    left: 50%; bottom: 22px; transform: translateX(-50%);
    display: flex; gap: 10px;
}
.am-dot {
    width: 34px; height: 4px; padding: 8px 0; box-sizing: content-box;
    border: 0; background: none; cursor: pointer;
}
.am-dot i {
    display: block; height: 4px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.45);
    position: relative; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.am-dot i::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, #f6dca0, #dba855);
    transform: scaleX(0); transform-origin: left;
}
.am-dot.is-active i::after { transform: scaleX(1); }
.am-dot.is-timing i::after { animation: amDotTimer var(--am-slide-ms, 6000ms) linear forwards; }
@keyframes amDotTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.am-dot:focus-visible { outline: 2px solid #f6dca0; outline-offset: 2px; border-radius: 4px; }
@media (max-width: 860px) and (orientation: portrait) { .am-dots { bottom: auto; top: calc(80px + 12px); } }
@media (prefers-reduced-motion: reduce) {
    .am-photo .am-slide { transition: opacity .4s linear; translate: 0 0 !important; scale: 1 !important; }
}

/* ==========================================================================
   HERO — FAST DIAGONAL WIPE + GOLD LIGHT SWEEP (31 Oct 2026)
   Every 3.5 s the next photo is revealed by a slanted wipe from right to
   left, led by a soft gold light bar; the new photo then settles from a
   slight zoom. Replaces the earlier glide/fade.
   ========================================================================== */
.am-photo .am-slide { transition: none !important; translate: 0 0 !important; opacity: 0; z-index: 0; }
.am-photo .am-slide.is-active { opacity: 1; z-index: 2; }
.am-photo .am-slide.is-leaving { opacity: 1; z-index: 1; }
.am-photo .am-slide.is-entering {
    animation: amWipe 1.1s cubic-bezier(.75,0,.2,1) both, amSettle 3.4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes amWipe {
    from { clip-path: polygon(118% 0, 118% 0, 118% 100%, 103% 100%); }
    to   { clip-path: polygon(0% 0, 118% 0, 118% 100%, -18% 100%); }
}
@keyframes amSettle { from { scale: 1.09; } to { scale: 1; } }
.am-sweep {
    position: absolute; z-index: 3; top: -5%; bottom: -5%;
    left: 108%; width: 12%;
    pointer-events: none;
    transform: skewX(-15deg);
    background: linear-gradient(90deg,
        rgba(255, 196, 110, 0) 0%,
        rgba(255, 196, 110, 0.35) 30%,
        rgba(255, 244, 214, 0.85) 50%,
        rgba(255, 196, 110, 0.35) 70%,
        rgba(255, 196, 110, 0) 100%);
    mix-blend-mode: screen;
    filter: blur(2px);
    opacity: 0;
}
.am-sweep.is-run { animation: amSweep 1.1s cubic-bezier(.75,0,.2,1) both; }
@keyframes amSweep {
    0%   { left: 108%; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: -22%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .am-photo .am-slide.is-entering { animation: none; }
    .am-sweep { display: none; }
}

/* ==========================================================================
   HERO — NEW TEXT COLOURS: "LAMP-LIGHT" PALETTE (31 Oct 2026)
   Warm saffron-gold headline, ivory text, cream-gold subline.
   ========================================================================== */
.am-hero .am-copy .am-eyebrow { color: #ffe3ad !important; }
.am-hero .am-copy .am-eyebrow::before, .am-hero .am-copy .am-eyebrow::after { background: #ffb547 !important; border-color: #ffb547 !important; }
.am-hero .am-copy .am-title {
    background: linear-gradient(100deg, #fff7df 0%, #ffd77a 38%, #ffab3d 72%, #ff8a2a 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    filter: drop-shadow(0 4px 18px rgba(255, 150, 40, 0.28)) !important;
}
.am-hero .am-copy .am-tag { color: #ffc46b !important; -webkit-text-fill-color: #ffc46b !important; }
.am-hero .am-copy .am-h1 { color: #fffaf1 !important; -webkit-text-fill-color: #fffaf1 !important; }
.am-hero .am-copy .am-no1 {
    background: linear-gradient(100deg, #ffe08a 0%, #ffae42 55%, #ff7a2f 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.am-hero .am-copy .am-sub { color: #ffdca6 !important; -webkit-text-fill-color: #ffdca6 !important; }
.am-hero .am-copy .am-desc { color: rgba(255, 246, 232, 0.92) !important; -webkit-text-fill-color: rgba(255, 246, 232, 0.92) !important; }
.am-hero .am-copy .am-link { color: #ffe3ad !important; border-color: #ffb547 !important; text-decoration-color: #ffb547 !important; }
.am-hero .am-copy .am-trust strong {
    background: linear-gradient(100deg, #ffe08a, #ffa63d) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.am-hero .am-copy .am-trust span { color: #f6e3c4 !important; -webkit-text-fill-color: #f6e3c4 !important; }
.am-hero .am-copy .am-trust { border-color: rgba(255, 181, 71, 0.35) !important; }
.am-hero .am-copy .am-trust li + li { border-color: rgba(255, 181, 71, 0.3) !important; }

/* ==========================================================================
   HERO — FLOWING WAVE TRANSITION (31 Oct 2026)
   The next photo flows in behind a soft, wavy edge that drifts from right
   to left (a feathered SVG wave mask), with a thin glowing gold ribbon riding
   the edge. The showing photo drifts in very slowly (gentle zoom) so the
   hero is always gently moving. Replaces the diagonal wipe + light bar.
   ========================================================================== */
.am-photo .am-slide { animation: none !important; clip-path: none !important; scale: 1; }
.am-photo .am-slide.is-active { scale: 1.06; transition: scale 7s linear !important; }
.am-photo .am-slide.is-leaving { scale: 1.06; transition: none !important; }
.am-photo .am-slide.is-entering {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.1 0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23f)' fill='%23fff' d='M-20 -5 L148.54 -5 L151.00 -3 L153.71 -1 L156.42 1 L158.88 3 L160.85 5 L162.13 7 L162.62 9 L162.31 11 L161.28 13 L159.68 15 L157.73 17 L155.68 19 L153.76 21 L152.14 23 L150.97 25 L150.26 27 L149.98 29 L149.99 31 L150.12 33 L150.18 35 L149.98 37 L149.38 39 L148.32 41 L146.79 43 L144.91 45 L142.85 47 L140.84 49 L139.10 51 L137.88 53 L137.35 55 L137.61 57 L138.68 59 L140.46 61 L142.80 63 L145.46 65 L148.18 67 L150.72 69 L152.85 71 L154.44 73 L155.42 75 L155.81 77 L155.74 79 L155.37 81 L154.90 83 L154.54 85 L154.43 87 L154.69 89 L155.34 91 L156.31 93 L157.45 95 L158.58 97 L159.48 99 L159.94 101 L159.78 103 L158.92 105 L-20 105 Z'/%3E%3C/svg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.1 0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23f)' fill='%23fff' d='M-20 -5 L148.54 -5 L151.00 -3 L153.71 -1 L156.42 1 L158.88 3 L160.85 5 L162.13 7 L162.62 9 L162.31 11 L161.28 13 L159.68 15 L157.73 17 L155.68 19 L153.76 21 L152.14 23 L150.97 25 L150.26 27 L149.98 29 L149.99 31 L150.12 33 L150.18 35 L149.98 37 L149.38 39 L148.32 41 L146.79 43 L144.91 45 L142.85 47 L140.84 49 L139.10 51 L137.88 53 L137.35 55 L137.61 57 L138.68 59 L140.46 61 L142.80 63 L145.46 65 L148.18 67 L150.72 69 L152.85 71 L154.44 73 L155.42 75 L155.81 77 L155.74 79 L155.37 81 L154.90 83 L154.54 85 L154.43 87 L154.69 89 L155.34 91 L156.31 93 L157.45 95 L158.58 97 L159.48 99 L159.94 101 L159.78 103 L158.92 105 L-20 105 Z'/%3E%3C/svg%3E") !important;
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    animation: amFlowMask 1.7s cubic-bezier(.45,.05,.2,1) both !important;
}
@keyframes amFlowMask {
    from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}
.am-sweep {
    left: 0 !important; right: 0; top: 0 !important; bottom: 0 !important; width: auto !important;
    transform: none !important; filter: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='g' x='-50%25' y='-20%25' width='200%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='2.2 0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23g)' d='M148.54 -5 L151.00 -3 L153.71 -1 L156.42 1 L158.88 3 L160.85 5 L162.13 7 L162.62 9 L162.31 11 L161.28 13 L159.68 15 L157.73 17 L155.68 19 L153.76 21 L152.14 23 L150.97 25 L150.26 27 L149.98 29 L149.99 31 L150.12 33 L150.18 35 L149.98 37 L149.38 39 L148.32 41 L146.79 43 L144.91 45 L142.85 47 L140.84 49 L139.10 51 L137.88 53 L137.35 55 L137.61 57 L138.68 59 L140.46 61 L142.80 63 L145.46 65 L148.18 67 L150.72 69 L152.85 71 L154.44 73 L155.42 75 L155.81 77 L155.74 79 L155.37 81 L154.90 83 L154.54 85 L154.43 87 L154.69 89 L155.34 91 L156.31 93 L157.45 95 L158.58 97 L159.48 99 L159.94 101 L159.78 103 L158.92 105' fill='none' stroke='%23ffd58a' stroke-width='2.2' stroke-opacity='1'/%3E%3Cpath d='M148.54 -5 L151.00 -3 L153.71 -1 L156.42 1 L158.88 3 L160.85 5 L162.13 7 L162.62 9 L162.31 11 L161.28 13 L159.68 15 L157.73 17 L155.68 19 L153.76 21 L152.14 23 L150.97 25 L150.26 27 L149.98 29 L149.99 31 L150.12 33 L150.18 35 L149.98 37 L149.38 39 L148.32 41 L146.79 43 L144.91 45 L142.85 47 L140.84 49 L139.10 51 L137.88 53 L137.35 55 L137.61 57 L138.68 59 L140.46 61 L142.80 63 L145.46 65 L148.18 67 L150.72 69 L152.85 71 L154.44 73 L155.42 75 L155.81 77 L155.74 79 L155.37 81 L154.90 83 L154.54 85 L154.43 87 L154.69 89 L155.34 91 L156.31 93 L157.45 95 L158.58 97 L159.48 99 L159.94 101 L159.78 103 L158.92 105' fill='none' stroke='%23fff4dc' stroke-width='.6' stroke-opacity='.9'/%3E%3C/svg%3E") no-repeat !important;
    background-size: 300% 100% !important;
    mix-blend-mode: screen;
    opacity: 0;
}
.am-sweep.is-run { animation: amFlowGlow 1.7s cubic-bezier(.45,.05,.2,1) both !important; }
@keyframes amFlowGlow {
    0%   { background-position: 100% 0; opacity: 0; }
    10%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { background-position: 0% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .am-photo .am-slide.is-active { scale: 1; transition: none !important; }
    .am-photo .am-slide.is-entering { -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; }
}

/* ==========================================================================
   HERO — CONTINUOUS LOOPING MOVEMENT (31 Oct 2026)
   Photos on a strip [office | puja | office-clone] that never stops:
   slow drift while a photo shows, smooth glide to the next, loop forever
   (10 s per full cycle). Replaces the wave / wipe slider; dots hidden.
   ========================================================================== */
.am-hero.am-looping .am-photo { overflow: hidden !important; }
.am-hero.am-looping .am-track {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: calc(100% * (var(--n, 2) + 1));
    display: flex;
    animation: amLoop 10s cubic-bezier(.65,0,.35,1) infinite;
    will-change: transform;
}
.am-hero.am-looping .am-photo .am-track img.am-slide {
    position: relative !important; inset: auto !important;
    flex: 0 0 calc(100% / (var(--n, 2) + 1)) !important;
    width: calc(100% / (var(--n, 2) + 1)) !important; height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important; scale: 1 !important; translate: 0 0 !important;
    -webkit-mask-image: none !important; mask-image: none !important;
    animation: none !important; transition: none !important; clip-path: none !important;
}
/* two photos -> one panel = 33.333% of the strip */
@keyframes amLoop {
    0%   { transform: translateX(0); }
    38%  { transform: translateX(-2.2%); }
    50%  { transform: translateX(-33.3333%); }
    88%  { transform: translateX(-35.5333%); }
    100% { transform: translateX(-66.6667%); }
}
.am-hero.am-looping .am-dots, .am-hero.am-looping .am-sweep { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .am-hero.am-looping .am-track { animation-duration: 30s; }
}

/* ==========================================================================
   MOBILE & TABLET LAYOUT PASS (31 Oct 2026)
   Phones: 2-column compact product grid, tidy navbar, centred hero accents,
   no sideways scrolling anywhere. Tablets: sections fit the screen width.
   ========================================================================== */
html, body { overflow-x: hidden; max-width: 100%; }
img, video { max-width: 100%; }
.about-grid, .about-blessing { width: 100%; max-width: min(920px, 100%) !important; box-sizing: border-box; }
.about-grid > *, .about-blessing > *, .why-us-grid > *, .distributor-grid > *, .contact-grid > *, .footer-grid > * { min-width: 0; }

/* navbar buttons keep their size even before the icon font loads */
.nav-actions { gap: 10px; }
.nav-actions button, .navbar .mobile-toggle { min-width: 40px; min-height: 40px; flex: none; }

@media (max-width: 1024px) and (min-width: 601px) {
    .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 760px !important; margin-inline: auto; gap: 1.4rem !important; }
    .about-blessing { grid-template-columns: minmax(0, 1fr) !important; }
    .ab-photo { max-width: 520px; margin-inline: auto; }
}

@media (max-width: 600px) {
    .container { padding-left: 16px !important; padding-right: 16px !important; }
    .section { padding-top: 3.2rem !important; padding-bottom: 3.2rem !important; }
    .section-header h2, .about-text h2, .distributor-content h2 { font-size: clamp(1.55rem, 7vw, 2rem) !important; line-height: 1.2 !important; }

    /* navbar */
    .navbar .container { padding-left: 14px !important; padding-right: 14px !important; }
    .nav-actions { gap: 6px !important; }
    .nav-actions button, .navbar .mobile-toggle { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
    .brand-logo img, .logo img { max-height: 38px; width: auto; }

    /* hero: centre the small gold accent lines with the centred text */
    .am-hero .am-eyebrow { justify-content: center; text-align: center; }
    .am-hero .am-eyebrow::before { display: none !important; }
    .am-hero .am-tag::after, .am-hero .am-heading::after { left: 50% !important; transform: translateX(-50%) !important; margin-inline: auto; }
    .am-hero .am-h1::before { left: 50% !important; transform: translateX(-50%) !important; }
    .am-hero .am-actions { flex-wrap: wrap; justify-content: center; gap: 0.8rem 1.4rem; }
    .am-hero .am-trust { width: 100%; }
    .am-hero .am-trust strong { font-size: 1.35rem !important; }
    .am-hero .am-trust span { font-size: 0.68rem !important; letter-spacing: 0.04em !important; }

    /* products: two compact columns */
    .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: none !important; gap: 12px !important; }
    .product-card { border-radius: 16px !important; }
    .product-card-badge { font-size: 0.6rem !important; padding: 4px 8px !important; top: 8px !important; left: 8px !important; }
    .product-card-body { padding: 0.8rem 0.75rem 0.85rem !important; }
    .product-card-title { font-size: 1rem !important; line-height: 1.25 !important; margin-bottom: 0.2rem !important; }
    .product-card-fragrance { font-size: 0.72rem !important; line-height: 1.35 !important; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .btn-card-details { font-size: 0.75rem !important; margin: 0.3rem 0 0.5rem !important; }
    .product-pricing-row { padding-top: 0.55rem !important; margin-bottom: 0.55rem !important; gap: 4px; flex-wrap: wrap; }
    .product-price-tag { font-size: 1.05rem !important; }
    .product-price-tag span { font-size: 0.7rem !important; }
    .product-pack-weight { font-size: 0.68rem !important; padding: 2px 7px !important; }
    .product-card-qty-row { gap: 6px !important; margin-bottom: 0.55rem !important; }
    .product-card-qty-row label { font-size: 0.72rem !important; }
    .product-card-qty-row .qty-stepper { transform: scale(0.88); transform-origin: right center; }
    .product-btn-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
    .product-btn-grid .btn { padding: 0.55rem 0.4rem !important; font-size: 0.8rem !important; min-height: 38px; border-radius: 999px !important; }

    /* filters scroll sideways instead of wrapping into many rows */
    .filter-tabs, .category-filters, .products-filters { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .filter-tabs::-webkit-scrollbar, .category-filters::-webkit-scrollbar, .products-filters::-webkit-scrollbar { display: none; }
    .filter-tabs > *, .category-filters > *, .products-filters > * { flex: none; }
    .category-filters { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; display: flex !important; }

    /* about */
    .ab-photo { max-width: 100%; }
    .ab-title-ml { font-size: 1.25rem !important; }
    .ab-quote-ml { font-size: 1.02rem; }

    /* clients */
    .client-card { width: 170px; padding: 1.1rem 0.8rem 1rem; }
    .client-logo { width: 84px; height: 84px; }
    .client-name { font-size: 0.9rem; }

    /* pop-up: image on top, full width */
    .modal-content { width: calc(100% - 20px) !important; max-height: calc(100dvh - 20px) !important; }
    .modal-pack-wrap.has-photo { max-width: 300px; margin-inline: auto; }

    /* keep the floating WhatsApp button off the text a little */
    .whatsapp-float, .floating-whatsapp, .wa-float { width: 50px !important; height: 50px !important; right: 14px !important; bottom: 14px !important; }
}
@media (max-width: 360px) {
    .products-grid { gap: 10px !important; }
    .product-card-qty-row label { display: none; }
    .product-card-qty-row { justify-content: center !important; }
    .product-card-qty-row .qty-stepper { transform-origin: center; }
}

/* Phones (portrait): hero photo in a wide landscape frame, zoomed out
   (16:10 instead of a near-square crop) so the scene, lamp and ambassador show. */
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero .am-photo { height: auto !important; aspect-ratio: 16 / 10 !important; min-height: 0 !important; max-height: none !important; }
    .am-hero.am-looping .am-photo .am-track img.am-slide { object-position: 84% 40% !important; }
    .am-hero.am-looping .am-photo .am-track img.am-slide:nth-child(2) { object-position: 100% 50% !important; }
    .am-hero .am-badge { top: calc(80px + 62.5vw - 18px) !important; z-index: 6 !important; bottom: auto !important; transform: translateX(-50%) scale(0.86) !important; left: 50% !important; }
}

/* Hero text stays sharp while scrolling (31 Oct 2026): no blur, no shrink,
   no fade on the hero copy — it only glides up gently with the page. */
.am-hero .am-copy {
    filter: none !important;
    opacity: 1 !important;
    transform: translate3d(0, calc(var(--am-scroll-y, 0px) * -0.5), 0) !important;
    will-change: auto !important;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   ABOUT — BLESSING BLOCK ANIMATION + BIGGER "ABOUT US" (31 Oct 2026)
   ========================================================================== */
.ab-eyebrow {
    font-family: 'Fraunces', serif !important;
    font-size: clamp(1.7rem, 2.6vw, 2.4rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    color: #8e4f24 !important;
    padding-bottom: 0.8rem !important; margin-bottom: 1.4rem !important;
    border-image: linear-gradient(90deg, #c08a4e 0 90px, transparent 90px) 1 !important;
    border-bottom-width: 3px !important;
}

/* starting states (only once JS has armed the block) */
.about-blessing.ab-anim .ab-photo { opacity: 0; transform: translateX(-60px) scale(0.94) rotate(-1.5deg); }
.about-blessing.ab-anim .ab-photo img { transform: scale(1.15); }
.about-blessing.ab-anim .ab-eyebrow { opacity: 0; transform: translateY(18px); letter-spacing: 0.5em !important; }
.about-blessing.ab-anim .ab-w { display: inline-block; opacity: 0; transform: translateY(0.7em); filter: blur(4px); }
.about-blessing.ab-anim .ab-divider { opacity: 0; }
.about-blessing.ab-anim .ab-divider::before, .about-blessing.ab-anim .ab-divider::after { transform: scaleX(0); }
.about-blessing.ab-anim .ab-divider svg { transform: scale(0) rotate(-90deg); }
.about-blessing.ab-anim .ab-quote-ml, .about-blessing.ab-anim .ab-point { opacity: 0; transform: translateY(26px); }

/* transitions */
.about-blessing .ab-photo { transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.75,.2,1); position: relative; overflow: hidden; }
.about-blessing .ab-photo img { transition: transform 2.2s cubic-bezier(.2,.7,.2,1); }
.about-blessing .ab-eyebrow { transition: opacity .8s ease .2s, transform .8s cubic-bezier(.2,.7,.2,1) .2s, letter-spacing 1.2s cubic-bezier(.2,.7,.2,1) .2s; }
.about-blessing .ab-w { transition: opacity .6s ease, transform .7s cubic-bezier(.2,.75,.2,1), filter .6s ease; transition-delay: calc(.45s + var(--w) * .07s); }
.about-blessing .ab-divider { transition: opacity .4s ease 1.1s; }
.about-blessing .ab-divider::before, .about-blessing .ab-divider::after { transition: transform .9s cubic-bezier(.2,.7,.2,1) 1.15s; }
.about-blessing .ab-divider::before { transform-origin: right; }
.about-blessing .ab-divider::after { transform-origin: left; }
.about-blessing .ab-divider svg { transition: transform .8s cubic-bezier(.3,1.5,.5,1) 1.3s; }
.about-blessing .ab-quote-ml { transition: opacity .9s ease 1.45s, transform .9s cubic-bezier(.2,.7,.2,1) 1.45s; }
.about-blessing .ab-point { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.about-blessing .ab-point { transition-delay: 1.7s; }
.about-blessing .ab-point + .ab-point { transition-delay: 1.95s; }

/* end states */
.about-blessing.ab-in .ab-photo { opacity: 1; transform: none; }
.about-blessing.ab-in .ab-photo img { transform: scale(1); }
.about-blessing.ab-in .ab-eyebrow { opacity: 1; transform: none; letter-spacing: 0.16em !important; }
.about-blessing.ab-in .ab-w { opacity: 1; transform: none; filter: none; }
.about-blessing.ab-in .ab-divider { opacity: 1; }
.about-blessing.ab-in .ab-divider::before, .about-blessing.ab-in .ab-divider::after { transform: scaleX(1); }
.about-blessing.ab-in .ab-divider svg { transform: none; }
.about-blessing.ab-in .ab-quote-ml, .about-blessing.ab-in .ab-point { opacity: 1; transform: none; }

/* gold light sweep across the photo after it lands, then a gentle float */
.ab-photo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 20px;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 233, 180, 0.55) 50%, transparent 65%);
    transform: translateX(-120%);
}
.about-blessing.ab-in .ab-photo::after { animation: abSweep 1.6s ease-in-out 1.2s 1 both; }
@keyframes abSweep { to { transform: translateX(120%); } }
.about-blessing.ab-in .ab-photo { animation: abFloat 6s ease-in-out 2.4s infinite; }
@keyframes abFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.ab-photo:hover img { transform: scale(1.04) !important; }

@media (prefers-reduced-motion: reduce) {
    .about-blessing.ab-anim * , .about-blessing.ab-anim .ab-photo { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}
@media (max-width: 600px) {
    .ab-eyebrow { font-size: 1.5rem !important; }
    .about-blessing.ab-anim .ab-photo { transform: translateY(40px) scale(0.96); }
}

/* ==========================================================================
   WHY CHOOSE US — CONTENT ANIMATIONS (31 Oct 2026)
   Each icon acts out its card: flame flickers with a clean smoke wisp,
   seedling sprouts and sways with drifting leaves, hourglass flips with a
   slow-spreading aura ring, delivery truck drives along a moving road.
   Cards lift with a gold glow on hover.
   ========================================================================== */
.why-card { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease; }
.why-card:hover { transform: translateY(-8px); border-color: rgba(201, 150, 70, 0.55) !important; box-shadow: 0 26px 50px -28px rgba(140, 90, 30, 0.45) !important; }
.why-icon-wrap { position: relative; overflow: visible !important; }
.why-icon-wrap > i { position: relative; z-index: 2; display: inline-block; }
.wc-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.wc-fx i { position: absolute; display: block; }

/* 1 · Charcoal-free clean burn: flicker + soft white smoke wisps rising */
.wc-burn .why-icon-wrap > i { animation: wcFlicker 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes wcFlicker {
    0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(255,150,40,0)); }
    25% { transform: scale(1.08, 0.95) rotate(-4deg); filter: drop-shadow(0 0 6px rgba(255,150,40,.55)); }
    50% { transform: scale(0.96, 1.07) rotate(3deg); filter: drop-shadow(0 0 3px rgba(255,150,40,.35)); }
    75% { transform: scale(1.05, 0.97) rotate(-2deg); filter: drop-shadow(0 0 7px rgba(255,170,60,.6)); }
}
.wc-burn .wc-fx i {
    left: 50%; top: 4px; width: 10px; height: 18px; margin-left: -5px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(200, 185, 165, 0.55), rgba(200, 185, 165, 0));
    opacity: 0;
    animation: wcSmoke 3.2s ease-out infinite;
}
.wc-burn .wc-fx i:nth-child(2) { animation-delay: 1.05s; }
.wc-burn .wc-fx i:nth-child(3) { animation-delay: 2.1s; }
@keyframes wcSmoke {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    20% { opacity: .9; }
    60% { transform: translate(6px, -30px) scale(1.4); opacity: .45; }
    100% { transform: translate(-4px, -52px) scale(2.1); opacity: 0; }
}

/* 2 · Natural resins: seedling sprouts, sways; leaves drift up and away */
.wc-natural .why-icon-wrap > i { transform-origin: 50% 100%; animation: wcSway 3.4s ease-in-out infinite; }
@keyframes wcSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.why-card.wc-natural.is-revealed .why-icon-wrap > i, .why-card.wc-natural.revealed .why-icon-wrap > i { animation: wcSprout .9s cubic-bezier(.3,1.6,.5,1) both, wcSway 3.4s ease-in-out .9s infinite; }
@keyframes wcSprout { from { transform: scale(0.2) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.wc-natural .wc-fx i {
    width: 7px; height: 11px; left: 50%; bottom: 10px;
    border-radius: 0 100% 0 100%;
    background: linear-gradient(135deg, #b9cf7a, #6f9a3a);
    opacity: 0;
    animation: wcLeaf 4.2s ease-in-out infinite;
}
.wc-natural .wc-fx i:nth-child(2) { animation-delay: 1.4s; --dx: -22px; }
.wc-natural .wc-fx i:nth-child(3) { animation-delay: 2.8s; --dx: 18px; }
@keyframes wcLeaf {
    0% { transform: translate(0, 0) rotate(0deg) scale(.6); opacity: 0; }
    15% { opacity: .9; }
    100% { transform: translate(var(--dx, 24px), -46px) rotate(220deg) scale(1); opacity: 0; }
}

/* 3 · Long-lasting aura: hourglass turns over; a fragrance ring spreads slowly */
.wc-aura .why-icon-wrap > i { animation: wcFlip 4s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes wcFlip { 0%, 70% { transform: rotate(0deg); } 85%, 100% { transform: rotate(180deg); } }
.wc-aura .wc-fx i {
    inset: 0; border-radius: 16px;
    border: 2px solid rgba(201, 150, 70, 0.55);
    opacity: 0;
    animation: wcAura 3.6s ease-out infinite;
}
.wc-aura .wc-fx i:nth-child(2) { animation-delay: 1.2s; }
.wc-aura .wc-fx i:nth-child(3) { animation-delay: 2.4s; }
@keyframes wcAura { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }

/* 4 · Reliable direct supply: truck drives along a moving dashed road */
.wc-supply .why-icon-wrap { overflow: hidden !important; }
.wc-supply .why-icon-wrap > i { animation: wcDrive 3.2s ease-in-out infinite; }
@keyframes wcDrive {
    0% { transform: translateX(-46px); }
    30%, 62% { transform: translateX(0) translateY(0); }
    36% { transform: translateX(0) translateY(-2px); }
    42% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(52px); }
}
.wc-supply .wc-fx i:first-child {
    left: 8px; right: 8px; bottom: 12px; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(160, 110, 40, 0.55) 0 6px, transparent 6px 11px);
    background-size: 11px 2px;
    animation: wcRoad .5s linear infinite;
}
.wc-supply .wc-fx i:nth-child(n+2) { display: none; }
@keyframes wcRoad { to { background-position: -11px 0; } }

/* icons wake up on hover */
.why-card:hover .why-icon-wrap { animation: wcPop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes wcPop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .why-icon-wrap > i, .wc-fx i, .why-card:hover .why-icon-wrap { animation: none !important; }
}

/* ==========================================================================
   WHY CHOOSE US — COLOURFUL (31 Oct 2026)
   Each card gets its own colour story: saffron flame, leaf green, royal
   violet aura, ocean blue supply. Gradient icon tiles with white icons,
   tinted cards with a coloured top band, colour-matched glow on hover,
   soft multi-colour light behind the section.
   ========================================================================== */
#why-us { position: relative; overflow: hidden; background:
    radial-gradient(40% 50% at 8% 20%, rgba(255, 152, 56, 0.16), transparent 70%),
    radial-gradient(38% 50% at 35% 95%, rgba(76, 175, 80, 0.13), transparent 70%),
    radial-gradient(38% 50% at 70% 10%, rgba(142, 84, 233, 0.13), transparent 70%),
    radial-gradient(40% 50% at 96% 85%, rgba(33, 150, 243, 0.14), transparent 70%),
    #fffaf3 !important; }
#why-us .section-header .gradient-text {
    background: linear-gradient(90deg, #ff7a2f, #e2a400 30%, #4caf50 55%, #8e54e9 78%, #1e88e5) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-size: 200% 100% !important; animation: wcHue 8s ease-in-out infinite alternate;
}
@keyframes wcHue { to { background-position: 100% 0; } }
#why-us .section-header .badge { background: linear-gradient(90deg, #fff1e3, #f0f9ec, #f3ecff, #e8f3ff) !important; border-color: rgba(142, 84, 233, 0.25) !important; }

.why-card { --c1: #ff8a3d; --c2: #e8452c; --tint: #fff6ef; position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--tint) 0%, #ffffff 55%) !important;
    border: 1px solid color-mix(in srgb, var(--c1) 30%, transparent) !important; }
.why-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.why-card.wc-burn    { --c1: #ffa53d; --c2: #e8452c; --tint: #fff3e8; }
.why-card.wc-natural { --c1: #7ccf5b; --c2: #2e8b57; --tint: #eff9ea; }
.why-card.wc-aura    { --c1: #b07cff; --c2: #6a3fd1; --tint: #f4eeff; }
.why-card.wc-supply  { --c1: #4fc3f7; --c2: #1565c0; --tint: #eaf5ff; }
.why-card .why-icon-wrap {
    background: linear-gradient(135deg, var(--c1), var(--c2)) !important;
    border: 0 !important;
    box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--c2) 70%, transparent) !important;
}
.why-card .why-icon-wrap > i { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.why-card h3 { color: #2b1d16 !important; }
.why-card h3::after { content: ""; display: block; width: 36px; height: 3px; border-radius: 3px; margin-top: 10px; background: linear-gradient(90deg, var(--c1), var(--c2)); transition: width .4s ease; }
.why-card:hover h3::after { width: 72px; }
.why-card:hover { border-color: var(--c1) !important; box-shadow: 0 28px 50px -26px color-mix(in srgb, var(--c2) 60%, transparent) !important; }
/* effects recoloured to match each card */
.wc-burn .wc-fx i { background: radial-gradient(closest-side, rgba(255, 190, 140, 0.7), rgba(255, 190, 140, 0)) !important; }
.wc-natural .wc-fx i { background: linear-gradient(135deg, #b8f08a, #2e8b57) !important; }
.wc-aura .wc-fx i { border-color: rgba(142, 84, 233, 0.6) !important; }
.wc-supply .wc-fx i:first-child { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 6px, transparent 6px 11px) !important; background-size: 11px 2px !important; }
@media (prefers-reduced-motion: reduce) { #why-us .section-header .gradient-text { animation: none; } }
#why-us .why-card .why-icon-wrap > i, #why-us .why-card .why-icon-wrap > i.text-gold, #why-us .why-card .why-icon-wrap > i::before { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: none !important; }

/* ==========================================================================
   WHY CHOOSE US — SOFTER COLOURS (31 Oct 2026)
   Toned down: muted earthy accents (saffron, sage, plum, teal) used only on
   the icon, top line and title underline. Light icon tiles, white cards,
   plain warm background, gold heading.
   ========================================================================== */
#why-us { background: #fbf7f1 !important; }
#why-us .section-header .gradient-text {
    background: linear-gradient(90deg, #b8862f, #d9a650, #b8862f) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; animation: none !important; background-size: 100% 100% !important;
}
#why-us .section-header .badge { background: #fbf1e2 !important; border-color: rgba(201, 150, 70, 0.35) !important; }
.why-card.wc-burn    { --c1: #d9894a; --c2: #c0703a; --tint: #ffffff; }
.why-card.wc-natural { --c1: #8aa66e; --c2: #6f8c55; --tint: #ffffff; }
.why-card.wc-aura    { --c1: #a07ba8; --c2: #85628e; --tint: #ffffff; }
.why-card.wc-supply  { --c1: #6b9aa8; --c2: #557f8c; --tint: #ffffff; }
.why-card { background: #ffffff !important; border: 1px solid rgba(201, 150, 70, 0.2) !important; }
.why-card::before { height: 3px !important; opacity: 0.85; }
#why-us .why-card .why-icon-wrap {
    background: color-mix(in srgb, var(--c1) 14%, #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--c1) 35%, transparent) !important;
    box-shadow: none !important;
}
#why-us .why-card .why-icon-wrap > i, #why-us .why-card .why-icon-wrap > i.text-gold, #why-us .why-card .why-icon-wrap > i::before { color: var(--c2) !important; -webkit-text-fill-color: var(--c2) !important; }
.why-card:hover { border-color: color-mix(in srgb, var(--c1) 55%, transparent) !important; box-shadow: 0 24px 44px -28px rgba(80, 55, 30, 0.35) !important; }
.wc-burn .wc-fx i { background: radial-gradient(closest-side, rgba(200, 185, 165, 0.55), rgba(200, 185, 165, 0)) !important; }
.wc-natural .wc-fx i { background: linear-gradient(135deg, #b7c99a, #6f8c55) !important; }
.wc-aura .wc-fx i { border-color: rgba(160, 123, 168, 0.5) !important; }
.wc-supply .wc-fx i:first-child { background: repeating-linear-gradient(90deg, rgba(85, 127, 140, 0.55) 0 6px, transparent 6px 11px) !important; background-size: 11px 2px !important; }

/* ==========================================================================
   ABOUT — "ART OF TRADITIONAL DIVINE FRAGRANCE" ANIMATION + SOFT COLOUR
   (31 Oct 2026). Same muted accents as Why Choose Us: sage (natural),
   saffron (devotional), plum-rose (pricing/heart).
   ========================================================================== */
.art-block .feature-item.af-leaf  { --c1: #8aa66e; --c2: #6f8c55; }
.art-block .feature-item.af-om    { --c1: #d9894a; --c2: #c0703a; }
.art-block .feature-item.af-heart { --c1: #c4788a; --c2: #a85c6f; }
.art-block .feature-item > i {
    background: color-mix(in srgb, var(--c1) 15%, #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--c1) 38%, transparent) !important;
    color: var(--c2) !important; -webkit-text-fill-color: var(--c2) !important;
    box-shadow: none !important;
}
.art-block .feature-item { padding: 10px 12px; margin-left: -12px; border-radius: 14px; border-left: 3px solid transparent; transition: background .35s ease, border-color .35s ease, transform .35s ease; }
.art-block .feature-item:hover { background: color-mix(in srgb, var(--c1) 8%, #ffffff); border-left-color: var(--c1); transform: translateX(6px); }
.art-block .feature-item h3 { transition: color .3s ease; }
.art-block .feature-item:hover h3 { color: var(--c2) !important; }
.art-block p strong { color: #8e4f24; }

/* continuous gentle icon motion */
.art-block .af-leaf > i  { animation: afLeaf 3.6s ease-in-out infinite; transform-origin: 30% 80%; }
@keyframes afLeaf { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }
.art-block .af-om > i    { animation: afGlow 3s ease-in-out infinite; }
@keyframes afGlow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #d9894a 0%, transparent) !important; text-shadow: none; } 50% { text-shadow: 0 0 10px rgba(217, 137, 74, .55); } }
.art-block .af-om > i { animation: afOm 3s ease-in-out infinite; }
@keyframes afOm { 0%, 100% { filter: drop-shadow(0 0 0 rgba(217,137,74,0)); } 50% { filter: drop-shadow(0 0 7px rgba(217,137,74,.6)); } }
.art-block .af-heart > i { animation: afBeat 2.4s ease-in-out infinite; }
@keyframes afBeat { 0%, 60%, 100% { scale: 1; } 15% { scale: 1.12; } 30% { scale: 0.98; } 42% { scale: 1.08; } }

/* entrance */
.art-block.art-anim > .badge, .art-block.art-anim > h2, .art-block.art-anim > p, .art-block.art-anim .feature-item, .art-block.art-anim .about-cert { opacity: 0; transform: translateY(26px); }
.art-block.art-anim .feature-item { transform: translateX(-34px); }
.art-block.art-anim > h2 .gradient-text { background-size: 220% 100% !important; background-position: 100% 0 !important; }
.art-block > .badge, .art-block > h2, .art-block > p, .art-block .feature-item, .art-block .about-cert {
    transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1), background .35s ease, border-color .35s ease;
}
.art-block > .badge { transition-delay: .05s; }
.art-block > h2 { transition-delay: .2s; }
.art-block > p:nth-of-type(1) { transition-delay: .45s; }
.art-block > p:nth-of-type(2) { transition-delay: .6s; }
.art-block .feature-item.af-leaf { transition-delay: .8s, .8s, 0s, 0s; }
.art-block .feature-item.af-om { transition-delay: .95s, .95s, 0s, 0s; }
.art-block .feature-item.af-heart { transition-delay: 1.1s, 1.1s, 0s, 0s; }
.art-block .about-cert { transition-delay: 1.3s; }
.art-block.art-in > .badge, .art-block.art-in > h2, .art-block.art-in > p, .art-block.art-in .feature-item, .art-block.art-in .about-cert { opacity: 1; transform: none; }
.art-block.art-in .feature-item:hover { transform: translateX(6px); transition-delay: 0s; }
.art-block > h2 .gradient-text {
    background: linear-gradient(90deg, #a9822f 0%, #d9a650 40%, #f3d38c 50%, #d9a650 60%, #a9822f 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
    transition: background-position 1.6s ease .5s;
}
.art-block.art-in > h2 .gradient-text { background-position: 0 0 !important; animation: afShine 6s ease-in-out 2.2s infinite; }
@keyframes afShine { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }

@media (prefers-reduced-motion: reduce) {
    .art-block *, .art-block.art-anim * { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   PRODUCT CARDS — SINGLE "ADD TO CART" BUTTON (31 Oct 2026)
   Listing shows only Add to Cart (Buy Now stays in the product pop-up and
   the cart checkout). Button flashes "✓ Added"; cart icon bounces; phones
   get a sticky "View Cart" bar.
   ========================================================================== */
.product-btn-grid.is-single { grid-template-columns: 1fr !important; }
.product-card .product-btn-grid .btn.btn-add-cart-main {
    position: relative; overflow: hidden;
    width: 100%;
    background: linear-gradient(135deg, #c41e26, #9e1219) !important;
    color: #fff !important; border: 0 !important;
    box-shadow: 0 10px 20px -12px rgba(158, 18, 25, 0.7) !important;
    transition: transform .25s ease, box-shadow .25s ease, background .3s ease !important;
}
.product-card .product-btn-grid .btn.btn-add-cart-main:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -12px rgba(158, 18, 25, 0.8) !important; }
.btn-add-cart-main i { color: inherit !important; }
.btn-add-cart-main .ac-label, .btn-add-cart-main .ac-done { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
.btn-add-cart-main .ac-done { position: absolute; inset: 0; opacity: 0; transform: translateY(100%); }
.product-card .product-btn-grid .btn.btn-add-cart-main.is-added { background: linear-gradient(135deg, #2e9b57, #1f7a43) !important; }
.btn-add-cart-main.is-added .ac-label { opacity: 0; transform: translateY(-100%); }
.btn-add-cart-main.is-added .ac-done { opacity: 1; transform: none; }

.cart-toggle-btn.cart-bump { animation: cartBump .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes cartBump { 0% { transform: scale(1); } 35% { transform: scale(1.25) rotate(-8deg); } 65% { transform: scale(.95) rotate(4deg); } 100% { transform: scale(1); } }

.cart-bar { display: none; }
@media (max-width: 860px) {
    .cart-bar {
        position: fixed; z-index: 900; left: 12px; right: 12px; bottom: 12px;
        display: flex; align-items: center; gap: 10px;
        padding: 13px 18px; border: 0; border-radius: 16px;
        background: linear-gradient(135deg, #2a1810, #3b2216);
        color: #fff; font: inherit; font-size: .92rem; text-align: left;
        box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.55);
        border: 1px solid rgba(219, 168, 85, 0.45);
        transform: translateY(140%); opacity: 0; pointer-events: none;
        transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
        cursor: pointer;
    }
    .cart-bar.is-on { transform: none; opacity: 1; pointer-events: auto; }
    .cart-bar span { flex: 1; }
    .cart-bar b { color: #f6dca0; }
    .cart-bar strong { color: #f6dca0; font-size: 1rem; }
    .cart-bar i { color: #f6dca0; }
    body.has-cart-bar { padding-bottom: 74px; }
    body.has-cart-bar .whatsapp-float, body.has-cart-bar .floating-whatsapp, body.has-cart-bar .wa-float, body.has-cart-bar .floating-whatsapp-btn { bottom: 84px !important; transition: bottom .4s ease; }
}
@media (prefers-reduced-motion: reduce) { .cart-toggle-btn.cart-bump { animation: none; } }
.product-card .product-btn-grid .btn.btn-add-cart-main, .product-card .product-btn-grid .btn.btn-add-cart-main * { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* Add to Cart — espresso brown + gold (31 Oct 2026): matches the navbar,
   hero and gold accents; turns gold on hover; green "✓ Added" kept. */
.product-card .product-btn-grid .btn.btn-add-cart-main {
    background: linear-gradient(135deg, #3b2418, #24150e) !important;
    border: 1px solid rgba(219, 168, 85, 0.55) !important;
    box-shadow: 0 10px 20px -12px rgba(36, 21, 14, 0.75) !important;
}
.product-card .product-btn-grid .btn.btn-add-cart-main, .product-card .product-btn-grid .btn.btn-add-cart-main * { color: #f6dca0 !important; -webkit-text-fill-color: #f6dca0 !important; }
.product-card .product-btn-grid .btn.btn-add-cart-main:hover {
    background: linear-gradient(135deg, #e3b65e, #c8933a) !important;
    border-color: #c8933a !important;
    box-shadow: 0 14px 24px -12px rgba(200, 147, 58, 0.8) !important;
}
.product-card .product-btn-grid .btn.btn-add-cart-main:hover, .product-card .product-btn-grid .btn.btn-add-cart-main:hover * { color: #24150e !important; -webkit-text-fill-color: #24150e !important; }
.product-card .product-btn-grid .btn.btn-add-cart-main.is-added { background: linear-gradient(135deg, #2e9b57, #1f7a43) !important; border-color: #1f7a43 !important; }
.product-card .product-btn-grid .btn.btn-add-cart-main.is-added, .product-card .product-btn-grid .btn.btn-add-cart-main.is-added * { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* About order (31 Oct 2026): "Art of Traditional Divine Fragrance" first, blessing block after */
#about .about-grid { margin-bottom: clamp(3rem, 6vw, 5rem); }
#about .about-blessing { margin-bottom: 0 !important; }

/* "ABOUT US" title now opens the About section (above Heritage & Purity) */
.art-block > .art-eyebrow { display: table; margin-bottom: 1.2rem !important; }
.art-block.art-anim > .art-eyebrow { opacity: 0; transform: translateY(18px); letter-spacing: 0.45em !important; }
.art-block > .art-eyebrow { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1), letter-spacing 1.2s cubic-bezier(.2,.7,.2,1); }
.art-block.art-in > .art-eyebrow { opacity: 1; transform: none; letter-spacing: 0.16em !important; }

/* ==========================================================================
   HERO MUSIC BUTTON (31 Oct 2026)
   Gold pill at the hero's bottom-left; sound bars dance while music is on.
   ========================================================================== */
.am-music {
    position: absolute; z-index: 7;
    left: max(24px, calc((100vw - 1200px) / 2 + 16px)); bottom: 26px;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 16px 9px 13px;
    border-radius: 999px;
    border: 1px solid rgba(219, 168, 85, 0.55);
    background: rgba(26, 14, 9, 0.55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #f6dca0; font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .06em;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.am-music:hover { background: rgba(219, 168, 85, 0.22); border-color: #dba855; transform: translateY(-2px); }
.am-music:focus-visible { outline: 2px solid #f6dca0; outline-offset: 3px; }
.am-music-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.am-music-bars i { display: block; width: 3px; height: 4px; border-radius: 2px; background: #dba855; transition: height .3s ease; }
.am-music.is-on { background: rgba(219, 168, 85, 0.2); border-color: #dba855; }
.am-music.is-on .am-music-bars i { animation: amBars 1s ease-in-out infinite; }
.am-music.is-on .am-music-bars i:nth-child(2) { animation-delay: .2s; animation-duration: .8s; }
.am-music.is-on .am-music-bars i:nth-child(3) { animation-delay: .4s; animation-duration: 1.15s; }
.am-music.is-on .am-music-bars i:nth-child(4) { animation-delay: .1s; animation-duration: .9s; }
@keyframes amBars { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.am-music:not(.is-on) { animation: amMusicHint 2.8s ease-in-out 3s 3; }
@keyframes amMusicHint { 0%, 100% { box-shadow: 0 0 0 0 rgba(219, 168, 85, 0); } 50% { box-shadow: 0 0 0 7px rgba(219, 168, 85, 0.18); } }
@media (max-width: 860px) and (orientation: portrait) {
    .am-music { left: auto; right: 12px; bottom: auto; top: calc(80px + 12px); padding: 7px 12px 7px 10px; font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) { .am-music.is-on .am-music-bars i, .am-music { animation: none !important; } }
/* music button: top-right of the hero photo, clear of the text and stats */
@media (min-width: 861px), (orientation: landscape) {
    .am-music { left: auto !important; bottom: auto !important; right: 3%; top: calc(var(--am-nav, 80px) + 18px); }
}


/* ==========================================================================
   SITE FONT — HOST GROTESK (31 Oct 2026; was Geist)
   Matches the "Software that thinks" reference: a crisp neo-grotesk with
   tight spacing. Used for every piece of text; Malayalam keeps Noto Serif
   Malayalam and icons keep Font Awesome. (#s3g… ids don't exist; they only
   raise specificity over earlier font overrides.)
   ========================================================================== */
:is(body *, #s3g-all):not(i):not([class*="fa-"]):not([lang="ml"]):not([lang="ml"] *):not(.ab-title-ml):not(.ab-quote-ml) {
    font-family: 'Host Grotesk', 'Geist', system-ui, sans-serif !important;
}
/* headings: medium weight, tight tracking like the reference */
:is(h1, h2, h3, h4, .am-title, .am-h1, .ab-eyebrow, .product-card-title, .client-name, #s3g-head):not(i):not([class*="fa-"]):not([lang="ml"]):not(.ab-title-ml):not(.ab-quote-ml):not(.zz1):not(.zz2) {
    font-weight: 500 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.08 !important;
}
.am-hero .am-title { font-weight: 600 !important; letter-spacing: -0.045em !important; line-height: 0.98 !important; }
h3, .product-card-title, .why-card h3, .feature-item h3, .ab-point h3, .client-name { letter-spacing: -0.02em !important; line-height: 1.25 !important; }
h1 span, h2 span, .am-no1 { font-weight: inherit !important; letter-spacing: inherit !important; }
p, li, .am-desc { letter-spacing: -0.005em !important; }
.badge, .am-eyebrow, .am-tag, .client-sub, .product-card-badge, .am-trust span, .am-music-label { letter-spacing: 0.08em !important; font-weight: 600 !important; }
.ab-eyebrow { letter-spacing: 0.08em !important; }
.btn, button, .am-link { font-weight: 600 !important; letter-spacing: -0.005em !important; }
.am-trust strong, .product-price-tag { font-weight: 600 !important; letter-spacing: -0.03em !important; }

/* ==========================================================================
   MOBILE HERO — TEXT ON THE PHOTO (31 Oct 2026)
   Phones (portrait): the looping photos fill the whole first screen; a dark
   fade at the bottom carries the main lines, buttons and stats. The long
   description paragraph is hidden on phones.
   ========================================================================== */
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero {
        position: relative !important;
        display: flex !important; flex-direction: column; justify-content: flex-end;
        min-height: 100vh !important; min-height: 100svh !important;
        padding-top: 80px !important;
        overflow: hidden;
    }
    .am-hero .am-photo {
        position: absolute !important; top: 80px !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: auto !important; height: auto !important; aspect-ratio: auto !important;
        z-index: 0 !important; overflow: hidden !important;
    }
    .am-hero.am-looping .am-photo .am-track img.am-slide { object-position: 77% 30% !important; }
    .am-hero.am-looping .am-photo .am-track img.am-slide:nth-child(2) { object-position: 83% 45% !important; }
    .am-hero .am-photo::after {
        display: block !important; content: "" !important;
        position: absolute !important; inset: 0 !important; z-index: 3 !important; pointer-events: none;
        background: linear-gradient(180deg,
            rgba(20, 12, 8, 0.35) 0%, rgba(20, 12, 8, 0) 16%,
            rgba(20, 12, 8, 0) 34%, rgba(20, 12, 8, 0.72) 52%,
            rgba(20, 12, 8, 0.93) 70%, #140c08 100%) !important;
    }
    .am-hero .am-inner { position: relative; z-index: 4; padding-top: 0 !important; padding-bottom: 22px !important; }
    .am-hero .am-copy { text-align: center; margin: 0 auto !important; }
    .am-hero .am-desc { display: none !important; }
    .am-hero .am-eyebrow { margin-bottom: .5rem !important; font-size: .7rem !important; }
    .am-hero .am-title { font-size: clamp(2.7rem, 13vw, 3.6rem) !important; }
    .am-hero .am-h1 { font-size: clamp(1.35rem, 6.2vw, 1.7rem) !important; margin-top: .5rem !important; }
    .am-hero .am-sub { font-size: .92rem !important; margin: .55rem 0 1rem !important; }
    .am-hero .am-actions { margin-bottom: 1rem !important; }
    .am-hero .am-trust { background: rgba(20, 12, 8, 0.55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    .am-hero .am-h1, .am-hero .am-sub, .am-hero .am-eyebrow { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
    /* badge moves to the top-left of the photo, music button stays top-right */
    .am-hero .am-badge { top: calc(80px + 12px) !important; bottom: auto !important; left: 12px !important; transform: scale(0.85) !important; transform-origin: left top; z-index: 6 !important; }
}
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero .am-inner { background: transparent !important; }
    /* photo fills the top ~60% of the screen (less zoom, person fully visible);
       the text block rises over its lower part through the fade */
    .am-hero .am-photo { bottom: auto !important; height: 60svh !important; height: 60vh; }
    .am-hero .am-photo::after {
        background: linear-gradient(180deg,
            rgba(20, 12, 8, 0.3) 0%, rgba(20, 12, 8, 0) 14%,
            rgba(20, 12, 8, 0) 45%, rgba(20, 12, 8, 0.8) 78%, #140c08 100%) !important;
    }
    .am-hero.am-looping .am-photo .am-track img.am-slide { object-position: 76% 22% !important; }
    .am-hero.am-looping .am-photo .am-track img.am-slide:nth-child(2) { object-position: 84% 40% !important; }
    .am-hero .am-trust { margin-top: .2rem; }
    .am-hero .am-trust li { padding-top: .55rem !important; padding-bottom: .55rem !important; }
}
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero.am-looping .am-photo .am-track img.am-slide { object-position: 74.5% 22% !important; }
    .am-hero.am-looping .am-photo .am-track img.am-slide:nth-child(2) { object-position: 80% 40% !important; }
}

/* Mobile hero: keep the ambassador's face and packs clear — the text now
   starts at the bottom edge of the photo (only a small overlap on the fade). */
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero { display: block !important; min-height: 0 !important; }
    .am-hero .am-photo { position: relative !important; top: auto !important; height: 62svh !important; height: 62vh; max-height: 560px; }
    .am-hero .am-photo::after {
        background: linear-gradient(180deg,
            rgba(20, 12, 8, 0.3) 0%, rgba(20, 12, 8, 0) 14%,
            rgba(20, 12, 8, 0) 72%, rgba(20, 12, 8, 0.85) 92%, #140c08 100%) !important;
    }
    .am-hero .am-inner { margin-top: -46px !important; }
    .am-hero.am-looping .am-photo .am-track img.am-slide { object-position: 74.5% 18% !important; }
    .am-hero.am-looping .am-photo .am-track img.am-slide:nth-child(2) { object-position: 80% 30% !important; }
}

/* Mobile hero — tidy arrangement (31 Oct 2026): left-aligned like desktop,
   one even spacing rhythm, two equal buttons, stats row full width. */
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero .am-inner { padding-left: 20px !important; padding-right: 20px !important; margin-top: -40px !important; padding-bottom: 28px !important; }
    .am-hero .am-copy, .am-hero .am-copy * { text-align: left !important; }
    .am-hero .am-copy { max-width: none !important; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
    .am-hero .am-eyebrow { display: flex !important; align-items: center; gap: 10px; justify-content: flex-start !important; margin: 0 0 14px !important; font-size: .68rem !important; }
    .am-hero .am-eyebrow::before { display: block !important; content: ""; width: 26px; height: 1px; background: #ffb547; flex: none; }
    .am-hero .am-heading { margin: 0 !important; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
    .am-hero .am-title { font-size: clamp(2.9rem, 14vw, 3.6rem) !important; line-height: .95 !important; margin: 0 !important; }
    .am-hero .am-tag { margin: 10px 0 0 !important; }
    .am-hero .am-tag::after, .am-hero .am-h1::before { left: 0 !important; transform: none !important; margin-left: 0 !important; }
    .am-hero .am-h1 { margin: 18px 0 0 !important; padding-top: 16px !important; font-size: clamp(1.45rem, 6.6vw, 1.75rem) !important; line-height: 1.15 !important; }
    .am-hero .am-sub { margin: 12px 0 0 !important; font-size: .9rem !important; line-height: 1.5 !important; }
    .am-hero .am-actions { width: 100%; display: grid !important; grid-template-columns: 1.35fr 1fr; gap: 10px !important; margin: 22px 0 0 !important; }
    .am-hero .am-actions .am-btn { width: 100%; justify-content: center; padding: 14px 10px !important; font-size: .95rem !important; margin: 0 !important; }
    .am-hero .am-actions .am-link {
        display: flex !important; align-items: center; justify-content: center;
        border: 1px solid rgba(255, 181, 71, 0.6) !important; border-radius: 999px;
        padding: 14px 10px !important; text-decoration: none !important; margin: 0 !important;
    }
    .am-hero .am-actions .am-link::after { display: none !important; }
    .am-hero .am-trust { width: 100%; margin: 18px 0 0 !important; }
    .am-hero .am-trust li { text-align: center !important; }
    .am-hero .am-trust li * { text-align: center !important; }
}
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero .am-heading > * { align-self: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; }
    .am-hero .am-title, .am-hero .am-tag { display: block !important; width: auto !important; }
}

/* ==========================================================================
   HERO TITLE "S3 BRAND" — REVEAL + GOLD SHINE (31 Oct 2026)
   On load the title unveils left→right out of a soft blur while the letters
   settle together; then a bright light glints across the gold lettering every
   few seconds, with a warm glow that gently breathes.
   ========================================================================== */
.am-hero .am-copy .am-title {
    background:
        linear-gradient(105deg, rgba(255,255,255,0) calc(var(--am-shine) - 7%), rgba(255,255,255,0.95) var(--am-shine), rgba(255,255,255,0) calc(var(--am-shine) + 7%)),
        linear-gradient(100deg, #fff7df 0%, #ffd77a 38%, #ffab3d 72%, #ff8a2a 100%) !important;
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
    --am-shine: -20%;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    animation:
        amTitleIn 1.5s cubic-bezier(.2,.75,.2,1) .25s backwards,
        amTitleShine 4.5s ease-in-out 2s infinite !important;
    will-change: clip-path, filter;
}
@keyframes amTitleIn {
    0%   { clip-path: inset(-60% 100% -60% -40%); opacity: .3; transform: translateY(16px) scale(.97); }
    60%  { opacity: 1; }
    100% { clip-path: inset(-60% -40% -60% -40%); opacity: 1; transform: none; }
}
@property --am-shine { syntax: '<percentage>'; inherits: false; initial-value: -20%; }
@keyframes amTitleShine {
    0%, 50% { --am-shine: -20%; }
    85%, 100% { --am-shine: 120%; }
}
@keyframes amTitleGlow {
    0%, 100% { filter: drop-shadow(0 4px 18px rgba(255,150,40,.25)); }
    70% { filter: drop-shadow(0 4px 26px rgba(255,170,60,.55)); }
}
@media (prefers-reduced-motion: reduce) {
    .am-hero .am-copy .am-title { animation: none !important; }
}

/* Mobile hero — clean join between photo and text (31 Oct 2026):
   no glow panel behind the text, one solid background colour, and the photo
   fades fully into it before the title starts, so no edge/line crosses "S3 Brand". */
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero { background: #140c08 !important; }
    .am-hero::before { display: none !important; }
    .am-hero .am-photo::after {
        background: linear-gradient(180deg,
            rgba(20, 12, 8, 0.3) 0%, rgba(20, 12, 8, 0) 14%,
            rgba(20, 12, 8, 0) 62%, rgba(20, 12, 8, 0.75) 82%, #140c08 94%, #140c08 100%) !important;
    }
    .am-hero .am-photo { margin-bottom: 0 !important; }
    .am-hero .am-inner { margin-top: -30px !important; }
    .am-hero .am-copy, .am-hero .am-heading, .am-hero .am-title { background-color: transparent !important; box-shadow: none !important; }
}


/* ==========================================================================
   LOGO-STYLE FONTS FOR HEADINGS (31 Oct 2026)
   Closest free match to the S3 BRAND logo lettering: Orbitron (squared, wide)
   for the hero title, section headings, product names and prices; Jura
   (light, rounded, like "PREMIUM AGARBATTI") for small labels. Paragraphs,
   buttons and menus stay in Host Grotesk for easy reading.
   To use the exact logo font later: add its files to fonts/ with @font-face
   and replace 'Orbitron' below.
   ========================================================================== */
:is(h1, h1 *, h2, h2 *, h3, h3 *, h4, .am-title, .am-h1, .am-h1 *, .ab-eyebrow, .product-card-title, .client-name, .product-price-tag, .modal-price, .am-trust strong, #s3o-head):not(i):not([class*="fa-"]):not([lang="ml"]):not([lang="ml"] *):not(.ab-title-ml):not(.ab-quote-ml):not(.am-tag):not(.zz2):not(.zz3) {
    font-family: 'Orbitron', 'Host Grotesk', sans-serif !important;
    letter-spacing: 0.01em !important;
    font-weight: 700 !important;
}
:is(.am-tag, .am-eyebrow, .badge, .client-sub, .product-card-badge, .am-trust span, .am-badge span, .am-music-label, #s3o-lab):not(i):not([class*="fa-"]):not([lang="ml"]):not(.zz1):not(.zz2):not(.zz3) {
    font-family: 'Jura', 'Host Grotesk', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
}
/* Orbitron runs wide: scale headings so lines still fit */
.am-hero .am-title { font-size: clamp(2.9rem, 5.4vw, 5rem) !important; letter-spacing: 0.02em !important; line-height: 1.05 !important; font-weight: 800 !important; }
.am-hero .am-h1 { font-size: clamp(1.35rem, 2.05vw, 1.95rem) !important; line-height: 1.25 !important; font-weight: 600 !important; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.35rem) !important; line-height: 1.22 !important; }
h3, .product-card-title, .client-name { font-size: 1.02em; line-height: 1.3 !important; font-weight: 600 !important; }
.why-card h3, .feature-item h3, .ab-point h3 { font-size: 1.05rem !important; }
.ab-eyebrow { font-size: clamp(1.4rem, 2.2vw, 2rem) !important; letter-spacing: 0.12em !important; }
.am-trust strong, .product-price-tag { font-weight: 700 !important; }
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero .am-title { font-size: clamp(2.3rem, 11vw, 3rem) !important; }
    .am-hero .am-h1 { font-size: clamp(1.15rem, 5.4vw, 1.4rem) !important; }
}
@media (max-width: 600px) {
    h2 { font-size: clamp(1.3rem, 6vw, 1.7rem) !important; }
    .product-card-title { font-size: .9rem !important; }
}

/* Intro screen: logo-style fonts to match the real S3 BRAND logo */
:is(.s3-intro-big, .s3-intro-big *, #s3i-a):not(.z1):not(.z2):not(.z3):not(.z4):not(.z5):not(.z6):not(.z7) { font-family: 'Orbitron', 'Host Grotesk', sans-serif !important; font-weight: 800 !important; letter-spacing: 0.02em !important; }
:is(.s3-intro-small, #s3i-b):not(.z1):not(.z2):not(.z3):not(.z4):not(.z5):not(.z6):not(.z7) { font-family: 'Jura', 'Host Grotesk', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.4em !important; text-transform: uppercase; }

/* Navbar logo (31 Oct 2026): no glow halo — only the flashing shine sweep;
   one size step smaller. Shine is masked to the new logo artwork. */
.navbar .brand-logo::before { display: none !important; animation: none !important; }
.navbar .brand-logo::after {
    -webkit-mask: url("images/logo-real.png?v=20261031c") center / 100% 100% no-repeat !important;
            mask: url("images/logo-real.png?v=20261031c") center / 100% 100% no-repeat !important;
}
.navbar .logo-img, .navbar .logo-img:hover { filter: none !important; transform: none !important; }
.navbar .logo-img { height: 38px !important; max-height: 38px !important; width: auto !important; }
@media (max-width: 600px) {
    .navbar .logo-img { height: 33px !important; max-height: 33px !important; }
}

/* Hero title in capitals like the logo: "S3 BRAND" */
.am-hero .am-title { text-transform: uppercase !important; font-size: clamp(2.6rem, 4.9vw, 4.5rem) !important; letter-spacing: 0.03em !important; }
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero .am-title { font-size: clamp(2rem, 10vw, 2.7rem) !important; }
}

/* Intro screen: logo reveal only — no big "S3 Brand / Agarbattis" title */
.s3-intro-name, .s3-intro-line { display: none !important; }
.s3-intro-logo img { width: min(420px, 72vw) !important; height: auto !important; max-height: none !important; }
.s3-intro .s3-intro-logo { width: min(420px, 74vw) !important; max-width: none !important; }
.s3-intro .s3-intro-logo img { width: 100% !important; }
/* new logo artwork has no empty side space: centre it exactly */
.s3-intro .s3-intro-logo { transform: none; animation-name: s3LogoInC !important; }
@keyframes s3LogoInC { 0% { opacity: 0; transform: scale(0.88); } 100% { opacity: 1; transform: scale(1); } }
.s3-intro .s3-intro-sweep {
    -webkit-mask: url("images/logo-real.png?v=20261031c") center / 100% 100% no-repeat !important;
            mask: url("images/logo-real.png?v=20261031c") center / 100% 100% no-repeat !important;
}
.s3-intro .s3-intro-glow { left: 50% !important; }


/* ==========================================================================
   REVIEWS — ENDLESS SCROLLING LOOP (31 Oct 2026)
   ========================================================================== */
#reviews .slider-container { overflow: hidden !important; max-width: none !important; }
#reviews { overflow: hidden; }
.reviews-marquee {
    display: block !important; overflow: hidden !important; transform: none !important;
    padding: 18px 0 30px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.reviews-track {
    display: flex; gap: 28px; width: max-content;
    animation: reviewsScroll var(--rv-dur, 54s) linear infinite;
}
.reviews-marquee:hover .reviews-track, .reviews-marquee:active .reviews-track { animation-play-state: paused; }
@keyframes reviewsScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 14px)); } }
.reviews-track .testimonial-card {
    flex: 0 0 clamp(290px, 30vw, 410px) !important; width: clamp(290px, 30vw, 410px) !important;
    max-width: none !important; margin: 0 !important; opacity: 1 !important; transform: none !important;
    transition: transform .35s ease, box-shadow .35s ease !important;
}
.reviews-track .testimonial-card:hover { transform: translateY(-6px) !important; }
@media (max-width: 600px) {
    .reviews-track { gap: 16px; }
    .reviews-track .testimonial-card { flex-basis: 82vw !important; width: 82vw !important; }
}
@media (prefers-reduced-motion: reduce) { .reviews-track { animation-duration: 200s; } }

/* Footer logo: same flashing shine sweep as the navbar logo (31 Oct 2026).
   The sweep is a warm gold light clipped to the logo artwork. */
.footer-logo { position: relative; display: inline-block; line-height: 0; isolation: isolate; }
.footer-logo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 214, 140, 0.95) 50%,
        rgba(255, 255, 255, 0) 62%);
    background-size: 250% 100%; background-repeat: no-repeat; background-position: 160% 0;
    -webkit-mask: url("images/logo-real.png?v=20261031c") center / 100% 100% no-repeat;
            mask: url("images/logo-real.png?v=20261031c") center / 100% 100% no-repeat;
    animation: s3LogoShine 5.5s ease-in-out infinite 1.2s;
}
@media (prefers-reduced-motion: reduce) { .footer-logo::after { animation: none; opacity: 0; } }
.footer-logo { padding: 0 !important; height: auto !important; }
.footer-logo .footer-logo-img { display: block; }
.footer-logo::after { -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-position: left center !important; mask-position: left center !important; }
.footer-logo::after { inset: auto !important; left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important; aspect-ratio: 1036 / 200; -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important; }

/* ==========================================================================
   ABOUT — BLESSING BLOCK, CONTINUOUS AMBIENT ANIMATION (31 Oct 2026)
   After the entrance: a gold light travels round the photo frame, the photo
   drifts in a slow zoom, soft incense smoke rises past its corner, the lotus
   divider glows, and the Malayalam heading gets a slow gold shimmer.
   ========================================================================== */
@property --ab-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.about-blessing .ab-photo { overflow: hidden !important; }
.about-blessing .ab-photo::before {
    content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 2px; pointer-events: none; z-index: 3;
    background: conic-gradient(from var(--ab-ang), rgba(219,168,85,0) 0deg, rgba(219,168,85,0) 250deg, #f6dca0 310deg, #c08a4e 340deg, rgba(219,168,85,0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity 1s ease 2.2s;
    animation: abFrameRun 6s linear infinite;
}
.about-blessing.ab-in .ab-photo::before { opacity: 1; }
@keyframes abFrameRun { to { --ab-ang: 360deg; } }
.about-blessing .ab-photo img { will-change: transform; }
.about-blessing.ab-in .ab-photo img { animation: abKen 18s ease-in-out 2.4s infinite alternate; }
@keyframes abKen { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }
.about-blessing .ab-photo { isolation: isolate; }
.about-blessing .ab-photo > img { position: relative; z-index: 1; }
.ab-photo > img { clip-path: inset(0 round 14px); }

/* incense smoke rising beside the photo's lower-right corner */
.ab-smoke { position: absolute; right: 18px; bottom: 14%; width: 60px; height: 70%; pointer-events: none; z-index: 4; }
.ab-smoke i {
    position: absolute; bottom: 0; left: 20px; width: 18px; height: 60px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(170, 150, 130, 0.35), rgba(170, 150, 130, 0));
    filter: blur(4px); opacity: 0;
}
.about-blessing.ab-in .ab-smoke i { animation: abSmoke 7s ease-in infinite; }
.about-blessing.ab-in .ab-smoke i:nth-child(2) { animation-delay: 2.3s; left: 14px; }
.about-blessing.ab-in .ab-smoke i:nth-child(3) { animation-delay: 4.6s; left: 26px; }
@keyframes abSmoke {
    0% { transform: translate(0, 0) scale(.6, .8); opacity: 0; }
    15% { opacity: .9; }
    50% { transform: translate(10px, -120px) scale(1.2, 1.6) rotate(8deg); opacity: .55; }
    100% { transform: translate(-8px, -260px) scale(2, 2.4) rotate(-6deg); opacity: 0; }
}

/* lotus divider glow + heading shimmer */
.about-blessing.ab-in .ab-divider svg { animation: abLotus 3.6s ease-in-out 2.5s infinite; }
@keyframes abLotus { 0%, 100% { filter: drop-shadow(0 0 0 rgba(219,168,85,0)); transform: scale(1); } 50% { filter: drop-shadow(0 0 8px rgba(219,168,85,.75)); transform: scale(1.08); } }
.about-blessing .ab-title-ml .ab-w { background: linear-gradient(100deg, #2d211a 0%, #2d211a 40%, #c08a4e 50%, #2d211a 60%, #2d211a 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.about-blessing.ab-in .ab-title-ml .ab-w { animation: abShimmer 7s ease-in-out 2.8s infinite; }
@keyframes abShimmer { 0%, 60% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
    .about-blessing .ab-photo::before, .about-blessing.ab-in .ab-photo img, .ab-smoke i, .about-blessing.ab-in .ab-divider svg, .about-blessing.ab-in .ab-title-ml .ab-w { animation: none !important; }
}

/* ==========================================================================
   HERO TITLE IN THE EXACT LOGO LETTERING (31 Oct 2026)
   "S3 BRAND" is drawn with the real logo wordmark (images/s3-wordmark.png,
   cut from the logo) used as a mask, filled with the same gold gradient and
   shine. The real text stays in the page (transparent) for Google / screen
   readers.
   ========================================================================== */
.am-hero .am-copy .am-heading .am-title {
    --wm-h: clamp(46px, 5.2vw, 76px);
    display: block !important;
    width: calc(var(--wm-h) * 7.575) !important; max-width: 100%;
    height: var(--wm-h) !important;
    aspect-ratio: 7.575 / 1;
    font-size: var(--wm-h) !important; line-height: 1 !important;
    overflow: hidden; white-space: nowrap;
    color: transparent !important; -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: border-box !important; background-clip: border-box !important;
    -webkit-mask: url("images/s3-wordmark.png") left center / contain no-repeat;
            mask: url("images/s3-wordmark.png") left center / contain no-repeat;
    margin-bottom: 4px !important;
    text-shadow: none !important;
}
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero .am-copy .am-heading .am-title { --wm-h: clamp(32px, 9vw, 46px); }
}

/* ==========================================================================
   NAVBAR MENU — ARRANGED (31 Oct 2026)
   Menu sits exactly in the centre of the bar, links evenly spaced, in the
   logo-style lettering (Jura capitals, like "PREMIUM AGARBATTI"), with a thin
   gold underline that grows on hover / for the current section.
   ========================================================================== */
@media (min-width: 1025px) {
    .navbar .container { position: relative; }
    .navbar .nav-links {
        position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
        display: flex; align-items: center; gap: 34px !important; margin: 0 !important;
    }
    .navbar .nav-links li { margin: 0 !important; padding: 0 !important; }
}
.navbar .nav-links a {
    position: relative;
    font-family: 'Jura', 'Host Grotesk', sans-serif !important;
    font-weight: 700 !important; font-size: .8rem !important;
    letter-spacing: .16em !important; text-transform: uppercase;
    color: #efe3d0 !important; padding: 6px 0 !important;
    transition: color .25s ease;
}
.navbar .nav-links a::after {
    content: "" !important; position: absolute !important; left: 50% !important; right: auto !important; bottom: -2px !important; top: auto !important;
    width: 0 !important; height: 2px !important; border-radius: 2px;
    background: linear-gradient(90deg, #c08a4e, #f6dca0) !important;
    transform: translateX(-50%) !important; transition: width .3s ease !important; opacity: 1 !important;
}
.navbar .nav-links a:hover, .navbar .nav-links a.active { color: #f6dca0 !important; }
.navbar .nav-links a:hover::after, .navbar .nav-links a.active::after { width: 100% !important; }
@media (min-width: 1025px) and (max-width: 1200px) { .navbar .nav-links { gap: 22px !important; } .navbar .nav-links a { font-size: .74rem !important; letter-spacing: .12em !important; } }
.navbar .nav-links { flex-wrap: nowrap !important; width: max-content !important; max-width: none !important; }
.navbar .nav-links li, .navbar .nav-links a { white-space: nowrap !important; flex: none !important; }

/* ==========================================================================
   SITE-WIDE CONSISTENCY PASS (31 Oct 2026)
   ========================================================================== */
/* 1. every section badge in the same gold style (Products badge was red) */
.products-section .badge, #products .section-header .badge {
    color: #8a6524 !important; background: #fbf5ea !important; border-color: #e8d6b0 !important;
}
.products-section .badge i { color: #a9822f !important; }
/* 2. "ABOUT US" title uses the same gold as every section's highlighted words */
.ab-eyebrow {
    background: linear-gradient(100deg, #a9822f 0%, #d9a650 55%, #a9822f 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: #a9822f !important;
    border-image: linear-gradient(90deg, #c41e26 0 34px, #d9a650 34px 90px, transparent 90px) 1 !important;
}
/* 3. small titles in About use the site's gold-brown (was a separate rust tone) */
.ab-point h3 { color: #8a6524 !important; }
.art-block p strong { color: #8a6524 !important; }
/* 4. product price row never wraps the pack size onto its own line */
.product-pricing-row { flex-wrap: nowrap !important; }
.product-pricing-row .product-pack-weight { white-space: nowrap; flex: none; }
@media (max-width: 600px) {
    .product-price-tag { white-space: nowrap; }
    /* 5. ISO certificate block stacks on phones: certificate on top, text full width */
    .about-cert { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; display: flex !important; }
    .about-cert-thumb { width: 120px !important; flex: none !important; }
    .about-cert-info { width: 100% !important; }
}

/* ==========================================================================
   FONT ROLES — ONE CLEAR SYSTEM (6 Nov 2026)
   Orbitron  = headings, names, prices & numbers
   Jura      = small capital labels (badges, tags, menu, meta labels)
   Host Grotesk = reading text, buttons, form fields
   Noto Serif Malayalam = all Malayalam
   These rules fix the few elements that were outside their role.
   (#s3r… ids don't exist; they only raise specificity.)
   ========================================================================== */
/* labels → Jura */
:is(.navbar .nav-links a, .about-cert-tag, .about-cert-meta span, .am-badge small, .product-pack-weight, .modal-weight, #s3r-lab):not(i):not([class*="fa-"]):not(.zr1):not(.zr2):not(.zr3):not(.zr4):not(.zr5):not(.zr6):not(.zr7):not(.zr8):not(.zr9):not(.zr10):not(.zr11):not(.zr12):not(.zr13):not(.zr14):not(.zr15):not(.zr16):not(.zr17):not(.zr18):not(.zr19):not(.zr20) {
    font-family: 'Jura', 'Host Grotesk', sans-serif !important; font-weight: 700 !important;
}
.about-cert-meta span, .am-badge small { letter-spacing: .12em !important; }
/* prices & totals → Orbitron, like the card prices */
:is(.modal-subtotal strong, .cart-drawer strong, .cart-subtotal strong, .cart-bar strong, .cart-item-price, .product-price-tag, .modal-price, #s3r-num):not(i):not([class*="fa-"]):not(.zr1):not(.zr2):not(.zr3):not(.zr4):not(.zr5):not(.zr6):not(.zr7):not(.zr8):not(.zr9):not(.zr10):not(.zr11):not(.zr12):not(.zr13):not(.zr14):not(.zr15):not(.zr16):not(.zr17):not(.zr18):not(.zr19):not(.zr20) {
    font-family: 'Orbitron', 'Host Grotesk', sans-serif !important; font-weight: 700 !important; letter-spacing: 0 !important;
}
/* any Malayalam text → Noto Serif Malayalam (pop-up quote was in the English font) */
:is(.modal-quote-ml, [lang="ml"], #s3r-ml):not(.zr1):not(.zr2):not(.zr3):not(.zr4):not(.zr5):not(.zr6):not(.zr7):not(.zr8):not(.zr9):not(.zr10):not(.zr11):not(.zr12):not(.zr13):not(.zr14):not(.zr15):not(.zr16):not(.zr17):not(.zr18):not(.zr19):not(.zr20) { font-family: 'Noto Serif Malayalam', serif !important; font-style: normal !important; }


/* ==========================================================================
   OFFER — FIBONACCI BUY 1 GET 1 FREE (6 Nov 2026)
   ========================================================================== */
/* product card ribbon */
.offer-ribbon {
    position: absolute; z-index: 3; right: 10px; bottom: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: linear-gradient(135deg, #c41e26, #8f1018); color: #fff;
    font-family: 'Jura', 'Host Grotesk', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 8px 18px -8px rgba(143, 16, 24, .8);
    animation: offerPulse 2.4s ease-in-out infinite;
}
.offer-ribbon i { color: #f6dca0; }
@keyframes offerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* product pop-up line */
.modal-offer {
    display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 10px 14px; border-radius: 12px;
    background: linear-gradient(90deg, #fff1e0, #fff8ef); border: 1px dashed #d9a650; color: #8a3a12; font-size: .95rem;
}
.modal-offer i { color: #c41e26; }
.modal-offer strong { font-family: 'Orbitron', 'Host Grotesk', sans-serif; color: #c41e26; }
/* cart line */
.cart-item-offer { margin-top: 3px; font-size: .78rem; font-weight: 700; color: #c41e26; }

/* small side pop-up (bottom-left; WhatsApp button lives bottom-right) */
.offer-toast {
    position: fixed; left: 20px; bottom: 20px; z-index: 9990;
    width: min(340px, calc(100vw - 32px));
    display: flex; gap: 12px; align-items: stretch; padding: 10px 12px 10px 10px;
    border-radius: 18px; background: linear-gradient(135deg, #2a1810, #4a2a18);
    border: 1px solid rgba(219, 168, 85, .6);
    box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .65);
    opacity: 0; transform: translateX(-120%); transition: transform .55s cubic-bezier(.2,.9,.25,1.15), opacity .4s ease;
}
.offer-toast[hidden] { display: none; }
.offer-toast.is-open { opacity: 1; transform: none; }
.offer-toast-media { flex: none; width: 66px; border-radius: 12px; overflow: hidden; position: relative; }
.offer-toast-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 18px; }
.offer-toast-tag { font-family: 'Jura', sans-serif; font-weight: 700; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #f6dca0; }
.offer-toast-tag i { color: #ffb547; animation: offerGift 1.8s ease-in-out infinite; display: inline-block; }
@keyframes offerGift { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg) scale(1.15); } 40% { transform: rotate(10deg); } 60% { transform: rotate(0); } }
.offer-toast-title { font-family: 'Orbitron', sans-serif !important; font-size: 1.08rem; line-height: 1.15; color: #fff7df; }
.offer-toast-title span { color: #ffb547; }
.offer-toast-sub { font-size: .8rem; color: #e9d9c2; }
.offer-toast-sub b { color: #fff; }
.offer-toast-actions { display: flex; gap: 8px; margin-top: 5px; }
.offer-toast-add {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 0; cursor: pointer;
    background: linear-gradient(135deg, #e3b65e, #c8933a); color: #24150e; font-weight: 700; font-size: .8rem;
}
.offer-toast-view { padding: 7px 10px; border-radius: 999px; cursor: pointer; background: transparent; border: 1px solid rgba(246, 220, 160, .5); color: #f6dca0; font-weight: 700; font-size: .8rem; }
.offer-toast-close { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #f6dca0; cursor: pointer; display: grid; place-items: center; font-size: .8rem; }
.offer-toast-close:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 600px) {
    .offer-toast { left: 12px; bottom: 12px; width: calc(100vw - 96px); padding: 8px 10px 8px 8px; gap: 10px; }
    .offer-toast-media { width: 52px; }
    .offer-toast-title { font-size: .95rem; }
    .offer-toast-sub { font-size: .74rem; }
}

/* "Offer Earned" celebration */
.offer-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10060; display: none; }
.offer-confetti.is-on { display: block; }
.offer-earned {
    position: fixed; left: 50%; top: 50%; z-index: 10061;
    width: min(320px, calc(100vw - 40px)); padding: 22px 22px 18px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    border-radius: 22px; background: linear-gradient(160deg, #fffaf2, #f8ecd8);
    border: 1px solid rgba(201, 150, 70, .6);
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .55);
    opacity: 0; transform: translate(-50%, -50%) scale(.6); pointer-events: none;
}
.offer-earned[hidden] { display: none; }
.offer-earned.is-open { pointer-events: auto; animation: offerEarnIn .55s cubic-bezier(.2,.9,.3,1.35) forwards; }
@keyframes offerEarnIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.offer-earned-emoji { font-size: 2.6rem; line-height: 1; animation: offerPop 1s ease-out .15s both; }
@keyframes offerPop { 0% { transform: scale(.3) rotate(-30deg); } 55% { transform: scale(1.3) rotate(12deg); } 100% { transform: scale(1) rotate(0); } }
.offer-earned-title { font-family: 'Orbitron', sans-serif !important; font-size: 1.35rem; color: #c41e26; }
.offer-earned-text { font-size: .9rem; color: #5a4a3e; line-height: 1.5; }
.offer-earned-text b { color: #2b1d16; }
.offer-earned-btn { margin-top: 6px; padding: 9px 20px; border-radius: 999px; border: 0; cursor: pointer; background: linear-gradient(135deg, #3b2216, #24150e); color: #f6dca0; font-weight: 700; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .offer-toast { transition: none; } .offer-toast-tag i, .offer-earned-emoji { animation: none; } }

/* cart: automatic free pack row (Buy 1 Get 1) */
.cart-item-row.cart-item-free { background: linear-gradient(90deg, #fff4e3, #fffaf2); border: 1px dashed #d9a650; border-radius: 14px; margin-top: -4px; }
.cart-item-free .cart-item-img { position: relative; }
.cart-free-badge { position: absolute; left: 4px; top: 4px; padding: 2px 6px; border-radius: 6px; background: #c41e26; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .06em; }
.cart-free-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #c41e26; color: #fff; font-size: .66rem; font-weight: 700; vertical-align: middle; font-family: 'Host Grotesk', sans-serif; }
.cart-free-qty { font-size: .85rem; color: #5a4a3e; }
.cart-item-free .cart-item-price { color: #1f7a3a; }
.cart-item-free .cart-item-price s { color: #9a8a7e; font-weight: 500; margin-right: 4px; }

/* side offer pop-up: come-and-go animation (slides in with a bounce, shine sweep, slides out) */
.offer-toast { overflow: hidden; transition: none !important; transform: translateX(calc(-100% - 40px)); opacity: 0; }
.offer-toast.is-open { animation: offerIn .75s cubic-bezier(.22,1.2,.36,1) forwards, offerFloat 3.2s ease-in-out .9s infinite; }
.offer-toast.is-leaving { animation: offerOut .6s cubic-bezier(.55,0,.75,.2) forwards; }
@keyframes offerIn {
    0% { transform: translateX(calc(-100% - 40px)) rotate(-4deg); opacity: 0; }
    60% { transform: translateX(14px) rotate(1deg); opacity: 1; }
    100% { transform: translateX(0) rotate(0); opacity: 1; }
}
@keyframes offerOut {
    0% { transform: translateX(0); opacity: 1; }
    25% { transform: translateX(12px); opacity: 1; }
    100% { transform: translateX(calc(-100% - 40px)) rotate(-3deg); opacity: 0; }
}
@keyframes offerFloat { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-5px); opacity: 1; } }
.offer-toast::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 230, 170, .28) 50%, transparent 62%);
    background-size: 260% 100%; background-position: 160% 0;
}
.offer-toast.is-open::after { animation: offerShine2 2.8s ease-in-out .7s infinite; }
@keyframes offerShine2 { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } }
.offer-toast.is-open .offer-toast-media img { animation: offerZoom .9s ease-out .35s both; }
@keyframes offerZoom { from { transform: scale(1.25); } to { transform: scale(1); } }
.offer-toast-close { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
    .offer-toast.is-open { animation: none; transform: none; opacity: 1; }
    .offer-toast.is-leaving { animation: none; opacity: 0; }
    .offer-toast.is-open::after, .offer-toast.is-open .offer-toast-media img { animation: none; }
}

/* bundle offers (Teen Baan Buy 2 @ ₹140) */
.cart-item-offer.is-hint { color: #8a6524; }
.cart-was { color: #9a8a7e; font-weight: 500; margin-right: 2px; }

/* ₹12 combo — any 6 for ₹50 */
.offer-ribbon.is-combo { background: linear-gradient(135deg, #3b2216, #24150e); color: #f6dca0; border: 1px solid rgba(227, 182, 94, .6); }
.offer-ribbon.is-combo i { color: #e3b65e; }
.cart-combo { margin: 6px 0 4px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, #fff4e3, #fffaf2); border: 1px dashed #d9a650; }
.cart-combo-head { font-size: .86rem; color: #5a3a22; }
.cart-combo-head i { color: #c8933a; margin-right: 4px; }
.cart-combo-head strong { color: #c41e26; }
.cart-combo-bar { height: 7px; margin: 9px 0 7px; border-radius: 99px; background: #f0dfc4; overflow: hidden; }
.cart-combo-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e3b65e, #c41e26); transition: width .5s ease; }
.cart-combo-text { font-size: .82rem; color: #5a4a3e; }
.cart-combo-text b { color: #2b1d16; }
.cart-combo.is-applied .cart-combo-text b { color: #1f7a3a; }
.cart-notification.is-offer { background: linear-gradient(135deg, #2a1810, #4a2a18) !important; color: #fff7df !important; border: 1px solid rgba(219, 168, 85, .6); max-width: min(420px, calc(100vw - 32px)); line-height: 1.45; }
.cart-notification.is-offer b { color: #ffb547; }
.cart-notification.is-offer { z-index: 10000 !important; white-space: normal !important; border-radius: 16px !important; text-align: left !important; justify-content: flex-start !important; }
@media (max-width: 600px) {
    /* top of the screen on phones, so it never sits under the side offer pop-up or cart bar */
    .cart-notification.is-offer { top: 80px; bottom: auto !important; width: calc(100vw - 32px); max-width: calc(100vw - 32px); }
}
@media (max-width: 600px) {
    /* lift the side offer pop-up above the mobile "View Cart" bar */
    body.has-cart-bar .offer-toast { bottom: 84px; }
}

/* Free shipping meter (cart footer) */
.ship-meter { margin: -4px 0 14px; padding: 10px 12px 12px; border-radius: 14px; background: #fff6e8; border: 1px solid #ecd6ae; }
.ship-meter-text { font-size: .84rem; color: #5a3a22; margin-bottom: 9px; }
.ship-meter-text i { color: #c8933a; margin-right: 4px; }
.ship-meter-text b { color: #c41e26; }
.ship-meter-bar { position: relative; height: 8px; border-radius: 99px; background: #f0dfc4; }
.ship-meter-bar span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #e3b65e, #c8933a); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.ship-meter-truck { position: absolute; top: 50%; transform: translateY(-50%); font-size: .95rem; color: #8a6524; transition: left .6s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 1px 0 #fff); }
.ship-meter.is-free { background: linear-gradient(90deg, #e9f7ee, #f5fbf7); border-color: #b9e2c6; }
.ship-meter.is-free .ship-meter-text { color: #1f5f33; }
.ship-meter.is-free .ship-meter-text b { color: #1f7a3a; }
.ship-meter.is-free .ship-meter-bar span { background: linear-gradient(90deg, #3fae68, #1f7a3a); }
.ship-meter.is-free .ship-meter-truck { color: #1f7a3a; animation: shipGo 1.4s ease-in-out infinite; }
@keyframes shipGo { 0%, 100% { margin-left: 0; } 50% { margin-left: 3px; } }
@media (prefers-reduced-motion: reduce) { .ship-meter.is-free .ship-meter-truck { animation: none; } }

/* Offer message box — festive maroon/red instead of dark brown (6 Nov 2026) */
.cart-notification.is-offer {
    background: linear-gradient(135deg, #7d0d14 0%, #b3141d 55%, #d4402a 100%) !important;
    color: #fff4e0 !important;
    border: 1px solid rgba(255, 214, 140, .75) !important;
    box-shadow: 0 16px 34px -12px rgba(125, 13, 20, .65), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
.cart-notification.is-offer b { color: #ffd98a; }
.cart-notification.is-offer i { color: #ffd98a !important; }

/* Side offer pop-up — light ivory & gold card with red accents (was dark brown) */
.offer-toast {
    background: linear-gradient(135deg, #fffaf1 0%, #fbeed6 100%) !important;
    border: 1.5px solid #e0b45f !important;
    box-shadow: 0 22px 44px -18px rgba(90, 52, 20, .55), 0 0 0 4px rgba(224, 180, 95, .15) !important;
}
.offer-toast::after { background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%); }
.offer-toast-media { border: 1px solid rgba(201, 150, 70, .45); }
.offer-toast-tag { color: #c41e26; }
.offer-toast-tag i { color: #c41e26; }
.offer-toast-title { color: #2b1d16; }
.offer-toast-title span { color: #c41e26; }
.offer-toast-sub { color: #6b5443; }
.offer-toast-sub b { color: #2b1d16; }
.offer-toast-add { background: linear-gradient(135deg, #d4402a, #a8141c); color: #fff; box-shadow: 0 6px 14px -6px rgba(168, 20, 28, .7); }
.offer-toast-view { border-color: rgba(138, 101, 36, .55); color: #6b4a1c; }
.offer-toast-view:hover { background: rgba(224, 180, 95, .18); }
.offer-toast-close { background: rgba(90, 58, 34, .1); color: #5a3a22; }
.offer-toast-close:hover { background: rgba(90, 58, 34, .18); }

/* ==========================================================================
   PRODUCT LISTING — 5 PER ROW ON DESKTOP (6 Nov 2026)
   ========================================================================== */
@media (min-width: 1025px) {
    #products .container { max-width: 1440px; width: 94%; }
    #products .products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 18px !important; max-width: none !important; }
    #products .product-card-title { font-size: 1.05rem !important; }
    #products .product-card-subtitle, #products .product-card p { font-size: .82rem !important; }
    #products .product-card .btn, #products .btn-add-cart { font-size: .88rem !important; }
    .products-grid > .product-card:nth-child(n) { --i: 0; }
    .products-grid > .product-card:nth-child(5n+2) { --i: 1; }
    .products-grid > .product-card:nth-child(5n+3) { --i: 2; }
    .products-grid > .product-card:nth-child(5n+4) { --i: 3; }
    .products-grid > .product-card:nth-child(5n+5) { --i: 4; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
    #products .products-grid { gap: 14px !important; }
    #products .product-card-title { font-size: .98rem !important; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
    #products .product-card label { font-size: .78rem !important; margin-right: 6px; }
    #products .product-card .qty-stepper { min-width: 0; flex: 0 1 auto; }
    #products .product-card .qty-stepper .stepper-btn { width: 28px !important; min-width: 28px !important; }
    #products .product-card .qty-stepper input { width: 30px !important; }
}

/* ==========================================================================
   FULL-SITE POLISH PASS (6 Nov 2026) — bugs, alignment, mobile, colours
   ========================================================================== */

/* 1) Performance bug: <body> asked for Poppins (3 font files ≈ 450 KB) that no text actually used */
body { font-family: 'Host Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; }

/* 2) Product cards — warm brand colours instead of neutral greys/black */
#products .product-card { border-color: #efe5d4 !important; box-shadow: 0 14px 34px -22px rgba(60, 38, 20, .28), 0 1px 4px rgba(60, 38, 20, .05) !important; }
#products .product-card:hover { border-color: #e3cfa6 !important; box-shadow: 0 28px 48px -24px rgba(60, 38, 20, .32), 0 2px 6px rgba(60, 38, 20, .06) !important; }
#products .product-card-title { color: #2b2019 !important; }
#products .product-card-title:hover { color: #c41e26 !important; }
#products .product-card-fragrance { color: #7b6b5d !important; }
#products .product-price-tag { color: #2b2019 !important; }
#products .product-price-tag span, #products .product-card-qty-row label { color: #7b6b5d !important; }
#products .product-card-badge { color: #4b3f35 !important; border-color: #eadcc4 !important; }
#products .product-pack-weight { background: #faf4ea !important; color: #4b3f35 !important; border-color: #eadcc4 !important; }
#products .product-pricing-row, #products .product-card-body { border-color: #f3ebdd !important; }
#products .product-card .qty-stepper { border-color: #e6d8c0 !important; }
#products .product-card .stepper-btn { color: #4b3f35 !important; }
.filter-btn:not(.active) { color: #4b3f35 !important; border-color: #eadcc4 !important; }

/* 3) Product cards — every row lines up: name, 2-line description, then price/qty/button pinned to the bottom */
#products .product-card { display: flex !important; flex-direction: column !important; }
#products .product-card-top { flex: none; }
#products .product-card-body { flex: 1 1 auto; display: flex !important; flex-direction: column !important; }
#products .product-card-fragrance {
    display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    min-height: calc(2 * 1.45em); line-height: 1.45 !important;
}
#products .btn-card-details { align-self: flex-start; }
#products .product-pricing-row { margin-top: auto !important; }

/* 4) Offer/feature badge on the photo never wraps onto 2 lines */
#products .product-card-badge { white-space: nowrap !important; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }

/* 5) Tablet: 3 cards per row (was 2 very tall cards) */
@media (min-width: 700px) and (max-width: 1024px) {
    #products .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: none !important; gap: 16px !important; }
}

/* 6) A single card left alone on the last row sits in the middle instead of hanging on the left */
@media (max-width: 699px) {
    #products .products-grid > .product-card:last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
}
@media (min-width: 700px) and (max-width: 1024px) {
    #products .products-grid > .product-card:last-child:nth-child(3n+1) { grid-column: 2; }
    #products .products-grid > .product-card:nth-last-child(2):nth-child(3n+1) { grid-column: 1 / span 1; margin-left: calc(50% + 8px); }
}

/* 7) Phones — comfortable tap sizes (were 15–31px) */
@media (max-width: 768px) {
    #products .product-card .qty-stepper .stepper-btn { width: 32px !important; min-width: 32px !important; height: 32px !important; }
    #products .product-card .qty-stepper { height: 34px !important; }
    #products .product-card .qty-stepper input { height: 32px !important; }
    #products .btn-card-details { padding: 6px 0 !important; margin: 0 0 .35rem !important; }
    .filter-btn { min-height: 38px !important; }
    .mobile-menu a, .mobile-link { padding-top: 10px !important; padding-bottom: 10px !important; display: inline-block; }
    #products .product-card-badge { font-size: 10px !important; }
}
@media (max-width: 400px) {
    #products .product-card-qty-row label { font-size: .74rem !important; }
    #products .product-card .qty-stepper .stepper-btn { width: 28px !important; min-width: 28px !important; }
    #products .product-card .qty-stepper input { width: 26px !important; }
}

/* 8) Side offer pop-up — a bit more compact on tablets & phones so it covers less of the hero */
@media (max-width: 1024px) {
    .offer-toast { width: min(300px, calc(100vw - 96px)) !important; }
    .offer-toast-media { width: 54px !important; }
    .offer-toast-title { font-size: .95rem !important; }
    .offer-toast-sub { font-size: .74rem !important; }
    .offer-toast-add, .offer-toast-view { font-size: .76rem !important; padding: 6px 11px !important; }
}

/* 9) Small phones: the quantity stepper gets the full card width (the "Quantity:" word is dropped — the − 1 + control explains itself) */
@media (max-width: 480px) {
    #products .product-card-qty-row { justify-content: center !important; }
    #products .product-card-qty-row label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    #products .product-card .qty-stepper { width: 100% !important; max-width: none !important; justify-content: space-between !important; height: 36px !important; }
    #products .product-card .qty-stepper .stepper-btn { width: 36px !important; min-width: 36px !important; height: 34px !important; }
    #products .product-card .qty-stepper input { flex: 1 1 auto; width: auto !important; min-width: 0; height: 34px !important; }
}
@media (max-width: 480px) {
    #products .product-card-controls { margin-top: 10px !important; padding-top: 0 !important; }
    #products .product-card-qty-row { margin: 0 0 10px !important; min-height: 0 !important; padding: 0 !important; }
}

/* 10) Mobile menu: GSTIN line wraps instead of running off the panel; product pop-up badge stays on one tidy line */
.mobile-contact-note { white-space: normal !important; overflow-wrap: anywhere; line-height: 1.5 !important; padding-right: 8px; }
@media (max-width: 600px) {
    #modalBadge { letter-spacing: .06em !important; font-size: .68rem !important; padding: 6px 12px !important; line-height: 1.35 !important; }
    .mobile-menu-footer .btn, .mobile-menu-footer a { line-height: 1.35 !important; }
}
/* the floating WhatsApp button, cart bar and offer pop-up step aside while the mobile menu is open (the menu has its own WhatsApp button) */
body:has(.mobile-menu.active) .floating-whatsapp-btn,
body:has(.mobile-menu.active) .cart-bar,
body:has(.mobile-menu.active) .offer-toast { opacity: 0 !important; pointer-events: none !important; }

/* 11) Hero on tablets/phones (portrait): the 100% / 0% / 25 stats box spans the full width like the buttons above it */
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero .am-trust { width: 100% !important; max-width: none !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; box-sizing: border-box; }
}
/* 12) Very small phones (≤380px): eyebrow line stays on one line, logo leaves room for the nav buttons */
@media (max-width: 380px) {
    .am-hero .am-eyebrow { letter-spacing: .1em !important; font-size: .62rem !important; white-space: nowrap; }
    .navbar .brand-logo img { max-width: 150px !important; height: auto !important; }
}
#categoryFilters .filter-btn:not(.active) { color: #4b3f35 !important; border-color: #eadcc4 !important; }
#categoryFilters .filter-btn:not(.active):hover { color: #c41e26 !important; border-color: #e3b65e !important; }

/* ==========================================================================
   PRODUCT LISTING — 4 PER ROW ON DESKTOP (6 Nov 2026, replaces the 5-per-row layout)
   ========================================================================== */
@media (min-width: 1025px) {
    #products .container { max-width: 1320px; width: 92%; }
    #products .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 26px !important; }
    #products .product-card-title { font-size: 1.12rem !important; }
    #products .product-card-fragrance { font-size: .86rem !important; }
    #products .btn-add-cart, #products .product-card .btn { font-size: .92rem !important; }
    #products .product-card label { font-size: .85rem !important; margin-right: 0; }
    #products .product-card .qty-stepper .stepper-btn { width: 32px !important; min-width: 32px !important; }
    #products .product-card .qty-stepper input { width: 40px !important; }
    .products-grid > .product-card:nth-child(n) { --i: 0; }
    .products-grid > .product-card:nth-child(4n+2) { --i: 1; }
    .products-grid > .product-card:nth-child(4n+3) { --i: 2; }
    .products-grid > .product-card:nth-child(4n+4) { --i: 3; }
    /* 25 products = 6 full rows + 1 → the last one sits in the middle */
    #products .products-grid > .product-card:last-child:nth-child(4n+1) { grid-column: 2 / span 2; justify-self: center; width: calc(50% - 13px); }
}
@media (min-width: 1025px) and (max-width: 1279px) {
    #products .products-grid { gap: 20px !important; }
}

/* Last product (e.g. Teen Baan) sits on the left like every other card — no centring (6 Nov 2026) */
#products .products-grid > .product-card:last-child { grid-column: auto !important; justify-self: stretch !important; width: auto !important; margin-left: 0 !important; }
#products .products-grid > .product-card:nth-last-child(2) { grid-column: auto !important; margin-left: 0 !important; }

/* Product card when that product is already in the cart: quantity box = cart quantity, button reads "In Cart · View" */
.btn-add-cart-main .ac-incart { display: none; align-items: center; justify-content: center; gap: .45rem; }
.product-card.in-cart .btn-add-cart-main:not(.is-added) .ac-label { display: none !important; }
.product-card.in-cart .btn-add-cart-main:not(.is-added) .ac-incart { display: inline-flex; }
.product-card.in-cart .btn-add-cart-main { background: linear-gradient(135deg, #fffaf1, #f6e7cc) !important; color: #3b2216 !important; border: 1.5px solid #d9a650 !important; box-shadow: none !important; }
.product-card.in-cart .btn-add-cart-main .ac-incart i { color: #1f7a3a; }
.product-card.in-cart .qty-stepper { border-color: #d9a650 !important; background: #fffaf1 !important; }
#products .product-card.in-cart .btn-add-cart-main,
#products .product-card.in-cart .btn-add-cart-main:hover { background: linear-gradient(135deg, #fffaf1, #f6e7cc) !important; color: #3b2216 !important; border: 1.5px solid #d9a650 !important; box-shadow: none !important; }
#products .product-card.in-cart .btn-add-cart-main .ac-incart, #products .product-card.in-cart .btn-add-cart-main .ac-incart * { color: #3b2216 !important; }
#products .product-card.in-cart .btn-add-cart-main .ac-incart i { color: #1f7a3a !important; }
#products .product-card.in-cart .product-btn-grid .btn.btn-add-cart-main:not(.is-added),
#products .product-card.in-cart .product-btn-grid .btn.btn-add-cart-main:not(.is-added) * { color: #3b2216 !important; -webkit-text-fill-color: #3b2216 !important; }
#products .product-card.in-cart .product-btn-grid .btn.btn-add-cart-main:not(.is-added) .ac-incart i { color: #1f7a3a !important; -webkit-text-fill-color: #1f7a3a !important; }

/* ==========================================================================
   HERO — "No. 1" & stats box animation (6 Nov 2026)
   Nothing moves position (per your earlier wish) — only light, glow & numbers.
   ========================================================================== */
@property --am-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* "No. 1": gold light flowing through the letters + a drawn underline that glows + a twinkling star */
.am-hero .am-copy .am-no1 {
    position: relative; display: inline-block;
    background: linear-gradient(100deg, #ffe08a 0%, #ffae42 30%, #fff3c4 45%, #ffae42 60%, #ff7a2f 100%) !important;
    background-size: 250% 100% !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    animation: amNo1Flow 4.5s ease-in-out infinite;
}
@keyframes amNo1Flow { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.am-hero .am-copy .am-no1::after {
    content: ""; position: absolute; left: 2%; right: 2%; bottom: -.08em; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, #ffe08a, #ff7a2f);
    transform: scaleX(0); transform-origin: left center;
    animation: amNo1Line .9s cubic-bezier(.2,.8,.2,1) 1.4s forwards, amNo1Glow 2.6s ease-in-out 2.4s infinite;
}
@keyframes amNo1Line { to { transform: scaleX(1); } }
@keyframes amNo1Glow { 0%, 100% { box-shadow: 0 0 0 rgba(255, 174, 66, 0); opacity: .85; } 50% { box-shadow: 0 0 12px rgba(255, 174, 66, .85); opacity: 1; } }
.am-hero .am-copy .am-no1::before {
    content: "✦"; position: absolute; top: -.32em; right: -.42em; font-size: .42em; line-height: 1;
    color: #ffe08a; -webkit-text-fill-color: #ffe08a; text-shadow: 0 0 8px rgba(255, 224, 138, .9);
    opacity: 0; animation: amStar 3.2s ease-in-out 2s infinite;
}
@keyframes amStar { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 40% { opacity: 1; transform: scale(1.1) rotate(90deg); } 70% { opacity: .2; transform: scale(.7) rotate(160deg); } }

/* Stats box: gold light runs around the border, a soft shine passes over it, numbers glow in turn */
.am-hero .am-trust { position: relative; overflow: hidden; isolation: isolate; }
.am-hero .am-trust::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
    background: conic-gradient(from var(--am-ang), transparent 0deg, transparent 250deg, rgba(255, 196, 107, .2) 290deg, #ffd27a 330deg, #fff1c9 345deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: amTrustRing 5s linear infinite;
}
@keyframes amTrustRing { to { --am-ang: 360deg; } }
.am-hero .am-trust::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 226, 160, .14) 50%, transparent 65%);
    background-size: 260% 100%; background-position: 160% 0;
    animation: amTrustShine 6s ease-in-out 2.5s infinite;
}
@keyframes amTrustShine { 0% { background-position: 160% 0; } 45%, 100% { background-position: -60% 0; } }
.am-hero .am-trust li { position: relative; z-index: 3; }
.am-hero .am-trust strong { font-variant-numeric: tabular-nums; animation: amStatGlow 4.5s ease-in-out infinite; }
.am-hero .am-trust li:nth-child(2) strong { animation-delay: 1.5s; }
.am-hero .am-trust li:nth-child(3) strong { animation-delay: 3s; }
@keyframes amStatGlow { 0%, 70%, 100% { filter: drop-shadow(0 0 0 rgba(255, 174, 66, 0)); } 35% { filter: drop-shadow(0 0 10px rgba(255, 190, 90, .75)); } }

@media (prefers-reduced-motion: reduce) {
    .am-hero .am-copy .am-no1, .am-hero .am-trust::before, .am-hero .am-trust::after, .am-hero .am-trust strong { animation: none !important; }
    .am-hero .am-copy .am-no1::after { animation: none !important; transform: scaleX(1); }
    .am-hero .am-copy .am-no1::before { display: none; }
}
/* "No. 1": underline removed (6 Nov 2026) — gold light flow and twinkling star stay */
.am-hero .am-copy .am-no1::after { content: none !important; display: none !important; animation: none !important; }
.am-hero .am-copy .am-no1 { text-decoration: none !important; border-bottom: 0 !important; box-shadow: none !important; }

/* ==========================================================================
   REDESIGN — Distributor, Reviews & Footer (6 Nov 2026)
   Same language as the hero/navbar: deep brown, gold light, brand red.
   ========================================================================== */

/* ---------- 1. DISTRIBUTOR — dark premium panel + bright form card ---------- */
#distributor { background: linear-gradient(180deg, #ffffff 0%, #faf6ef 100%) !important; }
#distributor .distributor-wrapper {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid !important; grid-template-columns: 1.08fr 1fr !important; gap: clamp(28px, 4vw, 56px) !important; align-items: center;
    padding: clamp(28px, 4.5vw, 64px) !important; border-radius: 28px !important;
    background: radial-gradient(120% 90% at 0% 0%, rgba(227, 182, 94, .18) 0%, transparent 55%),
                radial-gradient(80% 80% at 100% 100%, rgba(196, 30, 38, .16) 0%, transparent 60%),
                linear-gradient(135deg, #1c120c 0%, #2b1a11 55%, #3b2216 100%) !important;
    border: 1px solid rgba(227, 182, 94, .35) !important;
    box-shadow: 0 40px 80px -40px rgba(40, 22, 10, .65) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#distributor .distributor-wrapper::before {   /* faint gold line pattern */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image: repeating-linear-gradient(135deg, rgba(227, 182, 94, .05) 0 1px, transparent 1px 22px);
}
#distributor .distributor-content > .badge {
    background: rgba(227, 182, 94, .1) !important; border: 1px solid rgba(227, 182, 94, .45) !important; color: #f6dca0 !important;
}
#distributor .distributor-content > .badge i { color: #e3b65e !important; }
#distributor .distributor-content h2 { color: #fff7df !important; -webkit-text-fill-color: #fff7df !important; }
#distributor .distributor-content h2 .gradient-text {
    background: linear-gradient(100deg, #ffe08a 0%, #ffae42 60%, #ff8a3d 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important;
}
#distributor .distributor-content > p { color: rgba(251, 245, 236, .78) !important; }
#distributor .perk-card {
    display: grid !important; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: start;
    background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(227, 182, 94, .2) !important;
    border-radius: 16px !important; padding: 16px 18px !important; box-shadow: none !important;
    transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
#distributor .perk-card:hover { background: rgba(227, 182, 94, .08) !important; border-color: rgba(227, 182, 94, .5) !important; transform: translateX(4px); }
#distributor .perk-card > i {
    grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.05rem;
    background: linear-gradient(135deg, #f6dca0, #c8933a) !important; color: #2b1a11 !important; -webkit-text-fill-color: #2b1a11 !important;
    box-shadow: 0 8px 18px -8px rgba(227, 182, 94, .7); margin: 0 !important;
}
#distributor .perk-card h3 { color: #fff7df !important; margin: 2px 0 4px !important; }
#distributor .perk-card p { color: rgba(251, 245, 236, .66) !important; margin: 0 !important; }
#distributor .dz-trust {
    list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(227, 182, 94, .25);
}
#distributor .dz-trust li { padding: 16px 12px 0; display: flex; flex-direction: column; gap: 3px; }
#distributor .dz-trust li + li { border-left: 1px solid rgba(227, 182, 94, .2); padding-left: 18px; }
#distributor .dz-trust strong { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.05rem; color: #f6dca0; letter-spacing: .02em; }
#distributor .dz-trust span { font-family: 'Jura', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(251, 245, 236, .6); }

/* form card */
#distributor .distributor-form-wrap {
    position: relative; background: #fffdf9 !important; border-radius: 22px !important;
    border: 1px solid #ecdcbf !important; border-top: 0 !important;
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6) !important; padding: clamp(22px, 3vw, 34px) !important; overflow: hidden;
}
#distributor .distributor-form-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #c41e26 0 22%, #e3b65e 22% 100%); }
#distributor .distributor-form h3 { color: #2b2019 !important; margin-bottom: 4px !important; }
#distributor .dz-form-note { margin: 0 0 18px; font-size: .88rem; color: #7b6b5d; line-height: 1.5; }
#distributor .distributor-form label { color: #4b3f35 !important; font-weight: 600 !important; font-size: .86rem !important; }
#distributor .distributor-form .form-control {
    background: #ffffff !important; border: 1.5px solid #eadcc4 !important; border-radius: 12px !important; color: #2b2019 !important;
    transition: border-color .25s ease, box-shadow .25s ease;
}
#distributor .distributor-form .form-control:focus { border-color: #d9a650 !important; box-shadow: 0 0 0 4px rgba(227, 182, 94, .22) !important; outline: none !important; }
#distributor .distributor-form .form-control::placeholder { color: #a89a8f !important; }
#distributor .dz-form-foot { margin: 12px 0 0; font-size: .78rem; color: #8a7a6c; text-align: center; }
#distributor .dz-form-foot i { color: #c8933a; margin-right: 4px; }
@media (max-width: 960px) {
    #distributor .distributor-wrapper { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    #distributor .distributor-wrapper { padding: 24px 16px !important; border-radius: 22px !important; }
    #distributor .perk-card { grid-template-columns: 42px 1fr; column-gap: 12px; padding: 14px !important; }
    #distributor .perk-card > i { width: 42px; height: 42px; border-radius: 12px; }
    #distributor .dz-trust li { padding: 14px 6px 0; }
    #distributor .dz-trust li + li { padding-left: 10px; }
    #distributor .dz-trust strong { font-size: .86rem; }
    #distributor .dz-trust span { font-size: .6rem; letter-spacing: .08em; }
    #distributor .distributor-form-wrap { padding: 20px 16px !important; }
}

/* ---------- 2. REVIEWS — refined cream cards with gold accents ---------- */
#reviews {
    background: radial-gradient(70% 60% at 50% 0%, rgba(227, 182, 94, .14), transparent 70%), linear-gradient(180deg, #faf6ef, #f5ecdd) !important;
}
#reviews .reviews-track .testimonial-card, #reviews .testimonial-card {
    position: relative; overflow: hidden;
    background: #ffffff !important; border: 1px solid #efe2cb !important; border-radius: 22px !important;
    box-shadow: 0 22px 44px -28px rgba(60, 38, 20, .35) !important;
    padding: 30px 28px 24px !important; display: flex !important; flex-direction: column;
}
#reviews .testimonial-card::after {   /* gold top accent */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #e3b65e, #c8933a 60%, #c41e26);
}
#reviews .testimonial-card::before {   /* quote badge */
    content: "\201C" !important; position: absolute !important; top: 18px !important; right: 22px !important; left: auto !important;
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    font-family: Georgia, serif !important; font-size: 2.1rem !important; line-height: 1 !important; padding-top: 12px; box-sizing: border-box;
    background: linear-gradient(135deg, #fff4dd, #f6e2b8) !important; color: #c8933a !important; -webkit-text-fill-color: #c8933a !important;
    opacity: 1 !important; border: 1px solid #ecd6ae;
}
#reviews .testimonial-card .stars { color: #e3a73a !important; letter-spacing: 2px; margin-bottom: 14px !important; }
#reviews .testimonial-card .stars i { color: #e3a73a !important; filter: drop-shadow(0 1px 2px rgba(200, 147, 58, .4)); }
#reviews .review-text {
    font-style: normal !important; color: #4b3f35 !important; font-size: .98rem !important; line-height: 1.75 !important;
    flex: 1 1 auto; margin: 0 0 20px !important;
}
#reviews .client-info { margin-top: auto; padding-top: 16px !important; border-top: 1px dashed #eadcc4 !important; display: flex; align-items: center; gap: 14px; }
#reviews .client-avatar {
    background: linear-gradient(135deg, #3b2216, #24150e) !important; color: #f6dca0 !important; -webkit-text-fill-color: #f6dca0 !important;
    border: 2px solid #e3b65e !important; box-shadow: 0 6px 14px -6px rgba(60, 38, 20, .6) !important;
}
#reviews .client-info h4 { color: #2b2019 !important; margin: 0 0 2px !important; }
#reviews .client-info span { color: #8a7a6c !important; font-size: .82rem !important; }
#reviews .reviews-track .testimonial-card:hover { border-color: #e3cfa6 !important; box-shadow: 0 30px 56px -28px rgba(60, 38, 20, .45) !important; }

/* ---------- 3. FOOTER — dark brown & gold, like the navbar ---------- */
footer.footer {
    background: radial-gradient(60% 80% at 100% 0%, rgba(196, 30, 38, .12), transparent 60%),
                radial-gradient(70% 90% at 0% 100%, rgba(227, 182, 94, .1), transparent 60%),
                linear-gradient(180deg, #1f140d 0%, #160e09 100%) !important;
    border-top: 0 !important; color: rgba(251, 245, 236, .72) !important; padding-top: 0 !important; position: relative;
}
footer.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #e3b65e 20%, #c41e26 50%, #e3b65e 80%, transparent); }
/* CTA band */
footer.footer .ft-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    margin-top: 0; transform: translateY(-50%); margin-bottom: -10px;
    padding: 26px clamp(20px, 3vw, 40px); border-radius: 22px;
    background: linear-gradient(120deg, #3b2216 0%, #2b1a11 60%, #1f140d 100%);
    border: 1px solid rgba(227, 182, 94, .45);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
}
footer.footer .ft-cta-eyebrow { display: block; font-family: 'Jura', sans-serif; font-weight: 700; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: #e3b65e; margin-bottom: 6px; }
footer.footer .ft-cta h3 { margin: 0; font-family: 'Orbitron', sans-serif !important; font-size: clamp(1.15rem, 2.2vw, 1.6rem); color: #fff7df !important; }
footer.footer .ft-cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
footer.footer .ft-cta-btn { padding: 13px 24px !important; }
footer.footer .ft-cta-ghost { color: #f6dca0 !important; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(246, 220, 160, .5); padding-bottom: 2px; transition: color .25s, gap .25s; }
footer.footer .ft-cta-ghost:hover { color: #ffffff !important; gap: 12px; }
#reviews { padding-bottom: calc(var(--section-pad, 90px) + 40px) !important; }
#contact { padding-bottom: calc(var(--section-pad, 90px) + 50px) !important; }
/* columns */
footer.footer .footer-content { display: grid !important; grid-template-columns: 1.3fr 1.1fr .8fr !important; gap: clamp(28px, 4vw, 64px) !important; padding: 34px 0 40px !important; }
footer.footer .footer-logo-img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)) !important; }
footer.footer .brand-col p, footer.footer .contact-info li, footer.footer .contact-info a, footer.footer .footer-links a { color: rgba(251, 245, 236, .72) !important; }
footer.footer .footer-col h4 { color: #fff7df !important; }
footer.footer .footer-col h4::after { background: linear-gradient(90deg, #c41e26 0 30%, #e3b65e 30% 100%) !important; }
footer.footer .text-gold, footer.footer .contact-info i { color: #e3b65e !important; }
footer.footer .contact-info li { display: grid !important; grid-template-columns: 22px 1fr; align-items: start; gap: 10px; }
footer.footer .contact-info li i { margin-top: 4px; }
footer.footer .footer-links a:hover, footer.footer .contact-info a:hover, footer.footer .office-map-link:hover { color: #f6dca0 !important; }
footer.footer .social-links a { background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(227, 182, 94, .45) !important; color: #f6dca0 !important; }
footer.footer .social-links a:hover { background: #c41e26 !important; border-color: #c41e26 !important; color: #fff !important; }
footer.footer .footer-bottom { border-top: 1px solid rgba(227, 182, 94, .18) !important; background: rgba(0, 0, 0, .22) !important; color: rgba(251, 245, 236, .55) !important; }
footer.footer .footer-bottom-inner { display: flex !important; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 16px 0 !important; }
footer.footer .footer-bottom p { margin: 0 !important; color: rgba(251, 245, 236, .55) !important; font-size: .8rem !important; }
footer.footer .ft-badges { display: flex; gap: 18px; flex-wrap: wrap; }
footer.footer .ft-badges span { display: inline-flex; align-items: center; gap: 6px; color: #e3cfa6; }
footer.footer .ft-badges i { color: #e3b65e; }
@media (max-width: 900px) {
    footer.footer .footer-content { grid-template-columns: 1fr 1fr !important; }
    footer.footer .brand-col { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    footer.footer .ft-cta { transform: translateY(-40%); flex-direction: column; align-items: flex-start; padding: 22px 18px; }
    footer.footer .ft-cta-actions { width: 100%; }
    footer.footer .ft-cta-btn { width: 100%; justify-content: center; }
    footer.footer .footer-content { grid-template-columns: 1fr !important; padding-top: 10px !important; }
    footer.footer .footer-bottom-inner { flex-direction: column; text-align: center; }
    footer.footer .ft-badges { justify-content: center; }
}
footer.footer .footer-content { padding-bottom: 28px !important; }
footer.footer .footer-col, footer.footer .brand-col { margin-bottom: 0 !important; padding-bottom: 0 !important; }
@media (max-width: 600px) { #distributor .dz-trust li:first-child strong { font-size: .8rem; } }
/* footer banner removed — normal spacing again */
#reviews { padding-bottom: var(--section-pad, 90px) !important; }
#contact { padding-bottom: var(--section-pad, 90px) !important; }
footer.footer .footer-content { padding-top: 64px !important; }
@media (max-width: 600px) { footer.footer .footer-content { padding-top: 44px !important; } }
/* Product photos: small feature tag (e.g. "• Divine Blend") removed — offer labels stay (6 Nov 2026) */
#productsGrid .product-card-badge { display: none !important; }

/* Mobile/tablet portrait: "Our Brand Ambassador" tag and Music button move to the BOTTOM of the photo and get smaller (6 Nov 2026) */
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero .am-badge, .am-hero .am-music {
        top: calc(var(--am-nav, 80px) + min(62svh, 560px) - 64px) !important;
        bottom: auto !important;
        padding: 5px 11px 5px 9px !important; font-size: .64rem !important; gap: 6px !important;
        min-height: 0 !important; height: auto !important;
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .am-hero .am-badge { left: 12px !important; right: auto !important; }
    .am-hero .am-music { right: 12px !important; left: auto !important; }
    .am-hero .am-badge span, .am-hero .am-badge small, .am-hero .am-music-label { font-size: inherit !important; letter-spacing: .06em !important; }
    .am-hero .am-badge small { font-size: .9em !important; }
    .am-hero .am-badge::before, .am-hero .am-badge > i:first-child { width: 7px !important; height: 7px !important; }
    .am-hero .am-music-bars { transform: scale(.8); transform-origin: center; }
}
@media (max-width: 860px) and (orientation: portrait) {
    .am-hero .am-badge, .am-hero .am-music { height: 28px !important; display: inline-flex !important; align-items: center !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; }
}