/* ==========================================
   VAYOMEIE - Design System & Styles
   ========================================== */

/* ─── CSS Variables ──────────────────────── */
:root {
    /* Colors */
    --clay: #B08968;
    --clay-dark: #8C6B4F;
    --clay-light: #C9A98C;
    --cream: #FDEBC7;
    --cream-light: #FFF6E5;
    --beige: #F5E6D3;
    --warm-white: #FAF9F6;
    --pastel-pink: #F8D1D1;
    --eco-green: #6B8E6B;
    --text-dark: #2A1A1A;
    --text-body: #4A3A30;
    --text-light: #777777;
    --white: #FFFFFF;
    --error: #D32F2F;
    --success: #388E3C;

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-section: 4rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 50px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(42, 26, 26, 0.06);
    --shadow-md: 0 4px 12px rgba(42, 26, 26, 0.08);
    --shadow-lg: 0 8px 24px rgba(42, 26, 26, 0.12);
    --shadow-card: 0 2px 8px rgba(42, 26, 26, 0.06);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.6s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: auto; /* Changed from smooth to prevent conflict with Lenis JS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

html.lenis,
html.lenis body {
    height: auto;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-body);
    background-color: var(--warm-white);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--clay);
}

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

ul {
    list-style: none;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.section {
    padding: var(--space-section) 0;
}

.breadcrumb-section {
    margin-top: 10px; /* Reduced from 25px for better space efficiency */
    /* Precision offset for compressed header */
}

@media (max-width: 768px) {
    .breadcrumb-section {
        margin-top: 10px;
    }
}

.section.checkout-page,
.section.product-single,
.section.blog-post {
    padding-top: 1.5rem;
}

.section__title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: var(--space-sm);
}

.section__subtitle {
    font-size: 0.95rem;
    color: var(--text-light);
    text-align: center;
    margin-bottom: var(--space-3xl);
    font-weight: 300;
}

.section__cta {
    text-align: center;
    margin-top: var(--space-3xl);
}

/* ─── Buttons ────────────────────────────── */
.btn {
    display: inline-block;
    padding: 0.85rem 2.2rem;
    border-radius: var(--radius-xl);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all var(--transition-smooth);
    text-align: center;
}

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

.btn--primary:hover {
    background: var(--clay-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

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

.btn--outline:hover {
    background: var(--clay);
    color: var(--white);
    transform: translateY(-2px);
}

.btn--sm {
    padding: 0.6rem 1.5rem;
    font-size: 0.75rem;
}

.btn--whatsapp {
    background: #25D366;
    color: var(--white);
}

/* Custom cursor removed — using normal system cursor */
.cursor-dot,
.cursor-outline {
    display: none !important;
}

/* ─── Loader ─────────────────────────────── */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--warm-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* .hidden handled by GSAP yPercent animation now */

.loader__inner {
    text-align: center;
}

.loader__svg {
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-md);
}

.loader__logo {
    height: 60px;
    width: auto;
    margin-bottom: var(--space-xl);
    opacity: 0;
    animation: fadeIn 0.5s ease 0.1s forwards;
}

.loader__bar {
    width: 120px;
    height: 2px;
    background: rgba(176, 137, 104, 0.2);
    border-radius: 1px;
    overflow: hidden;
}

.loader__bar-fill {
    height: 100%;
    width: 0;
    background: var(--clay);
    border-radius: 1px;
    animation: loaderProgress 1.2s ease forwards;
}

@keyframes loaderProgress {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes loaderDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes loaderFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loaderDotFade {
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* ─── Rotating Background SVG ────────────── */
.bg-motif {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(800px, 100vw);
    height: min(800px, 100vw);
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    color: var(--clay-light);
}

@keyframes rotateSlow {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ─── Header / Navigation (Island) ──────────
   Floating, semi-transparent pill detached from page edges.
   Glassmorphism via backdrop-filter; intensifies slightly on scroll. */
.header {
    position: fixed;
    top: var(--space-md);
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 var(--space-lg);
    pointer-events: none; /* let clicks pass to underlying page in the gutter; .nav re-enables */
    transition: top var(--transition-base);
}

.nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-sm) var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
    background: rgba(250, 249, 246, 0.55);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(176, 137, 104, 0.14);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(42, 26, 26, 0.06);
    transition: background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.header.scrolled {
    top: var(--space-sm);
}

.header.scrolled .nav {
    background: rgba(250, 249, 246, 0.82);
    border-color: rgba(176, 137, 104, 0.22);
    box-shadow: 0 10px 32px rgba(42, 26, 26, 0.10);
}

.nav__logo-img {
    height: 70px;
    width: auto;
    transition: height var(--transition-base), transform 0.4s ease;
    position: relative;
    z-index: 2;
}

.brand-logo__inner {
    position: relative;
    display: flex;
    align-items: center;
}

.brand-logo__glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(176, 137, 104, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.brand-logo:hover .brand-logo__glow {
    opacity: 1;
}

.brand-logo:hover .nav__logo-img {
    transform: scale(1.05);
}

.header.scrolled .nav__logo-img {
    height: 55px;
}

.nav__links {
    display: flex;
    gap: var(--space-2xl); /* Increased for wide desktop presence */
}

.nav__link {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-dark);
    position: relative;
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--clay);
    transition: width var(--transition-base);
}

.nav__link:hover::after {
    width: 100%;
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.nav__icon {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-dark);
    cursor: pointer;
    padding: var(--space-xs);
    transition: color var(--transition-base);
    position: relative;
}

.nav__icon:hover {
    color: var(--clay);
}

.nav__cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--clay);
    color: var(--white);
    font-size: 0.6rem;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
}

.nav__hamburger span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--text-dark);
    transition: all var(--transition-base);
    transform-origin: center;
}

.nav__hamburger.active {
    position: relative;
    z-index: 1005;
}

.nav__hamburger.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.nav__hamburger.active span:nth-child(2) {
    opacity: 0;
}

.nav__hamburger.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ─── Hero Section ───────────────────────── */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 9rem 0 4rem;  /* room for the floating Island nav at top */
}

/* Gradient hero — replaces the photo-carousel background. Warm clay → cream → warm-white. */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 18% 20%, rgba(176, 137, 104, 0.32) 0%, transparent 55%),
        radial-gradient(circle at 85% 80%, rgba(253, 235, 199, 0.55) 0%, transparent 60%),
        linear-gradient(135deg, var(--warm-white) 0%, var(--cream-light) 60%, var(--cream) 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-2xl);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.hero__content {
    color: var(--text-dark);  /* dark on light gradient now */
    max-width: 560px;
}

.hero__subtitle {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
    color: var(--clay-dark);  /* on light bg */
}

.hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    color: var(--text-dark);
}

.hero__desc {
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: var(--space-xl);
    color: var(--text-body);
}

.hero__ctas {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Video card — bright pulsing glow + zoom-cross-dissolve transitions */
.hero__video-card {
    position: relative;
    aspect-ratio: 9 / 12;
    max-height: 60vh;        /* was 48vh — slightly taller */
    margin: 0 auto;
    width: 100%;
    max-width: 360px;        /* was 300px — slightly wider */
    isolation: isolate;
    border-radius: 22px;
    animation: heroCardGlow 2.6s ease-in-out infinite;
}

/* Brighter, multi-layer pulsing glow — clay tight + clay diffuse + cream wide halo */
@keyframes heroCardGlow {
    0%, 100% {
        box-shadow:
            0 0 24px  rgba(176, 137, 104, 0.65),
            0 0 55px  rgba(176, 137, 104, 0.38),
            0 0 95px  rgba(253, 235, 199, 0.40),
            0 10px 38px rgba(42, 26, 26, 0.18);
    }
    50% {
        box-shadow:
            0 0 42px  rgba(176, 137, 104, 0.95),
            0 0 90px  rgba(176, 137, 104, 0.55),
            0 0 150px rgba(253, 235, 199, 0.65),
            0 18px 60px rgba(42, 26, 26, 0.24);
    }
}

/* Inner stage — clip the videos to the rounded card */
.hero__video-card__stage {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: var(--cream);
}

/* Crisp inner edge above both video layers */
.hero__video-card__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    border: 1px solid rgba(176, 137, 104, 0.35);
    pointer-events: none;
    z-index: 5;
}

/* Two stacked videos for the zoom-cross-dissolve. Both fill the stage; the
   .is-active one is fully visible at scale(1), the inactive one is invisible
   at scale(1.08). Transitioning between them animates both at once. */
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: opacity, transform;
}

.hero__video.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

@media (max-width: 900px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        text-align: center;
    }
    /* Video on top, copy + CTAs below — using grid order so HTML stays the same */
    .hero__video-card { order: 0; max-width: 280px; max-height: 48vh; }
    .hero__content    { order: 1; margin: 0 auto; }
    .hero__ctas { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__video-card { animation: none; box-shadow: 0 8px 24px rgba(42, 26, 26, 0.18); }
    .hero__video { transition: none; transform: scale(1); }
}

.hero__scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    color: var(--clay-dark); /* dark on light gradient */
}

.hero__scroll-indicator span {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    opacity: 0.7;
}

.hero__scroll-line {
    width: 1px;
    height: 40px;
    background: var(--clay-dark);
    margin: 0 auto;
    opacity: 0.5;
    animation: scrollPulse 2s ease infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        transform: scaleY(1);
        opacity: 0.5;
    }

    50% {
        transform: scaleY(0.5);
        opacity: 0.2;
    }
}

/* ─── Marquee ────────────────────────────── */
.marquee {
    overflow: hidden;
    padding: var(--space-lg) 0;
    background: var(--cream-light);
    border-top: 1px solid rgba(176, 137, 104, 0.1);
    border-bottom: 1px solid rgba(176, 137, 104, 0.1);
}

.marquee__track {
    display: flex;
    gap: var(--space-xl);
    white-space: nowrap;
    animation: marqueeScroll 30s linear infinite;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 400;
    color: var(--clay);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.marquee__dot {
    opacity: 0.4;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ─── USP Cards ──────────────────────────── */
.usp__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.usp__card {
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(176, 137, 104, 0.1);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease, border-color 0.3s;
    will-change: transform;
}

.usp__card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(42, 26, 26, 0.1);
    border-color: var(--clay-light);
}

.usp__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    color: var(--clay);
}

.usp__icon svg {
    width: 100%;
    height: 100%;
}

.usp__title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-sm);
}

.usp__text {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* ─── Product Cards ──────────────────────── */
.products__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.product-card {
    position: relative;
    cursor: pointer;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(176, 137, 104, 0.12);
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
    will-change: transform;
    /* Max 4 per row with better fit */
    flex: 0 1 calc(25% - var(--space-xl));
    min-width: 240px;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(42, 26, 26, 0.15);
}

.product-card__image {
    position: relative;
    aspect-ratio: 3/4;
    /* Initial portrait ratio */
    overflow: hidden;
    background: var(--warm-white);
    transition: aspect-ratio 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.product-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out, transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 0;
}

.product-card__img.active {
    opacity: 1;
    z-index: 1;
}

.product-card:hover .product-card__img.active,
.product-card:active .product-card__img.active {
    transform: scale(1.08);
}

.product-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(42, 26, 26, 0.4) 0%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 2;
}

.product-card:hover .product-card__overlay,
.product-card:active .product-card__overlay {
    opacity: 1;
}

.product-card__badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    background: var(--clay);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-sm);
    z-index: 3;
}

.product-card__badge--prebook {
    background: var(--eco-green);
}

.product-card__badge--cs {
    background: var(--text-dark);
}

/* ─── Coming Soon — locked card overlay + countdown ───── */
.product-card__cs-lock {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    color: var(--white);
    background: rgba(42, 26, 26, 0.42);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    text-align: center;
    pointer-events: none; /* card link still clickable */
}

.cs-lock-icon {
    font-size: 1.6rem;
    color: var(--cream);
    opacity: 0.9;
}

.cs-lock-label {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

.cs-countdown {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    background: rgba(0, 0, 0, 0.35);
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-xl);
    font-variant-numeric: tabular-nums;
}

/* ─── Coming Soon — product detail page lock card ────── */
.cs-detail-lock {
    background: linear-gradient(135deg, rgba(176, 137, 104, 0.08) 0%, rgba(253, 235, 199, 0.20) 100%);
    border: 1px solid var(--clay-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
}

.cs-detail-lock__header {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--clay-dark);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    margin-bottom: var(--space-md);
}

.cs-detail-lock__header i {
    font-size: 0.9em;
}

.cs-detail-lock__countdown {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: var(--space-md);
    margin: var(--space-md) 0 var(--space-lg);
    font-variant-numeric: tabular-nums;
}

.cs-detail-lock__countdown span {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--text-dark);
    line-height: 1;
}

.cs-detail-lock__countdown small {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-left: 0.2rem;
}

.cs-detail-lock__hint {
    color: var(--text-body);
    font-size: 0.9rem;
    margin: 0 0 var(--space-md);
}

/* Info block sits below the image in normal flow — name + price always visible.
   See docs/DESIGN_SYSTEM.md "Product Card → Below image: product name, price". */
.product-card__info {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    background: var(--white);
    border-top: 1px solid rgba(176, 137, 104, 0.10);
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .product-card__info {
        padding: var(--space-sm) var(--space-md) var(--space-md);
    }
}

/* Coming-soon: hide the price (locked) and show a discreet lock placeholder.
   We don't reveal the price until the timer hits zero — see [data-cs-until] reload. */
.product-card.is-coming-soon .product-card__price,
.product-card.is-coming-soon .product-card__compare {
    display: none;
}

.product-card.is-coming-soon .product-card__info::after {
    content: "\f023  Price unlocks at launch";
    font-family: "Font Awesome 6 Free", var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-light);
    letter-spacing: 0.02em;
    display: inline-block;
}

.product-card__category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--clay);
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.product-card__name {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    line-height: 1.2;
}

.product-card__price {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--clay-dark);
}

.product-card__compare {
    text-decoration: line-through;
    color: var(--text-light);
    font-weight: 400;
    font-size: 0.85rem;
    margin-right: var(--space-xs);
}

/* ─── Pre-Booking CTA ────────────────────── */
.prebook-cta {
    background: var(--cream-light);
}

.prebook-cta__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.prebook-cta__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3/4;
}

.prebook-cta__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prebook-cta__label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clay);
    display: block;
    margin-bottom: var(--space-md);
}

.prebook-cta__title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-lg);
    line-height: 1.2;
}

.prebook-cta__text {
    font-size: 1rem;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

/* ─── Eco-Impact Strip ───────────────────── */
.eco-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-3xl) var(--space-lg);
    background: var(--text-dark);
    color: var(--white);
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.eco-strip__item {
    text-align: center;
}

.eco-strip__number {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    color: var(--cream);
    margin-bottom: var(--space-xs);
}

.eco-strip__label {
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
}

.eco-strip__divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
}

/* ─── Newsletter ─────────────────────────── */
.newsletter {
    background: var(--cream-light);
}

.newsletter__inner {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-sm);
}

.newsletter__text {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: var(--space-xl);
}

.newsletter__form {
    display: flex;
    gap: var(--space-sm);
}

.newsletter__input {
    flex: 1;
    padding: 0.85rem 1.2rem;
    border: 1.5px solid var(--clay-light);
    border-radius: var(--radius-xl);
    font-family: var(--font-body);
    font-size: 0.9rem;
    background: var(--white);
    color: var(--text-body);
    outline: none;
    transition: border-color var(--transition-base);
}

.newsletter__input:focus {
    border-color: var(--clay);
}

.newsletter__input::placeholder {
    color: var(--text-light);
}

/* ─── Footer ─────────────────────────────── */
.footer {
    background: var(--text-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: var(--space-4xl) 0 var(--space-xl);
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}

.footer__logo {
    height: 50px;
    margin-bottom: var(--space-lg);
    filter: brightness(0) invert(1);
}

.footer__about {
    font-size: 0.85rem;
    line-height: 1.7;
    opacity: 0.7;
    margin-bottom: var(--space-lg);
}

.footer__social {
    display: flex;
    gap: var(--space-md);
}

.footer__social-link {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all var(--transition-base);
}

.footer__social-link:hover {
    background: var(--clay);
    border-color: var(--clay);
    color: var(--white);
}

.footer__heading {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--space-lg);
}

.footer__links li {
    margin-bottom: var(--space-sm);
}

.footer__links a {
    font-size: 0.85rem;
    opacity: 0.7;
    transition: opacity var(--transition-base);
}

.footer__links a:hover {
    opacity: 1;
    color: var(--cream);
}

.footer__contact {
    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
    opacity: 0.7;
}

.footer__contact i {
    width: 20px;
    margin-right: var(--space-sm);
    color: var(--clay);
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-xl);
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.5;
}

/* ─── WhatsApp Floating Button ───────────── */
.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    background: #25D366;
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
    color: var(--white);
}

/* ─── Animation Helpers ──────────────────── */
.animate-up {
    opacity: 0;
    transform: translateY(30px);
}

.animate-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Responsive ─────────────────────────── */
@media (max-width: 1024px) {
    .prebook-cta__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 768px) {
    .nav__links {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        background: var(--warm-white);
        flex-direction: column;
        padding: 5rem var(--space-xl) var(--space-xl);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
        gap: var(--space-lg);
    }

    .nav__links.open {
        display: flex;
    }

    .nav__hamburger {
        display: flex;
    }

    .hero__content {
        padding: 0 var(--space-lg);
    }

    .hero__ctas {
        flex-direction: column;
        align-items: flex-start;
    }

    .products__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .eco-strip__divider {
        display: none;
    }

    .eco-strip {
        gap: var(--space-xl);
    }

    .newsletter__form {
        flex-direction: column;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 480px) {
    .products__grid {
        grid-template-columns: 1fr;
    }

    .nav__logo-img {
        height: 50px;
    }
}

/* ═══════════════════════════════════════════════
   ADDITIONAL COMPONENTS
   ═══════════════════════════════════════════════ */

/* ─── Search Overlay ─────────────────────── */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(250, 249, 246, 0.98);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.search-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.search-overlay__close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
}

.search-overlay__close:hover {
    color: var(--clay);
    transform: rotate(90deg);
}

.search-overlay__inner {
    width: 90%;
    max-width: 600px;
    text-align: center;
}

.search-overlay__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--text-dark);
    margin-bottom: var(--space-xl);
}

.search-overlay__input-wrap {
    position: relative;
}

.search-overlay__icon {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clay);
    font-size: 1.1rem;
}

.search-overlay__input {
    width: 100%;
    padding: 1.1rem 1.2rem 1.1rem 3.2rem;
    border: 2px solid var(--clay-light);
    border-radius: var(--radius-xl);
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--text-dark);
    background: var(--white);
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.search-overlay__input:focus {
    border-color: var(--clay);
    box-shadow: 0 0 0 4px rgba(176, 137, 104, 0.1);
}

.search-overlay__input::placeholder {
    color: var(--text-light);
    font-weight: 300;
}

.search-overlay__popular {
    margin-top: var(--space-xl);
}

.search-overlay__popular-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-light);
    margin-bottom: var(--space-md);
}

.search-overlay__tags {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.search-overlay__tag {
    padding: 0.5rem 1rem;
    border: 1px solid var(--clay-light);
    border-radius: var(--radius-xl);
    font-size: 0.85rem;
    color: var(--text-body);
    transition: all 0.3s;
}

.search-overlay__tag:hover {
    background: var(--clay);
    color: var(--white);
    border-color: var(--clay);
}

/* ─── Cart Drawer ────────────────────────── */
.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
}

.cart-drawer.open {
    pointer-events: all;
}

.cart-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(42, 26, 26, 0.4);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.cart-drawer.open .cart-drawer__overlay {
    opacity: 1;
}

.cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 90vw;
    height: 100%;
    background: var(--warm-white);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

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

.cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid rgba(176, 137, 104, 0.1);
}

.cart-drawer__title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
}

.cart-drawer__close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-dark);
    cursor: pointer;
}

.cart-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg) var(--space-xl);
}

.cart-drawer__empty {
    text-align: center;
    padding: var(--space-3xl) 0;
    color: var(--text-light);
}

.cart-drawer__empty i {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
    display: block;
}

.cart-drawer__footer {
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid rgba(176, 137, 104, 0.1);
}

.cart-drawer__subtotal {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: var(--space-xs);
}

.cart-drawer__note {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: var(--space-md);
}

.btn--block {
    display: block;
    width: 100%;
    margin-bottom: var(--space-sm);
}

.btn--lg {
    padding: 1rem 2.5rem;
    font-size: 0.9rem;
}

/* ─── Cart Item (drawer + page) ──────────── */
.cart-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid rgba(176, 137, 104, 0.08);
    position: relative;
}

.cart-item__image {
    width: 70px;
    flex-shrink: 0;
}

.cart-item__image img {
    width: 100%;
    border-radius: var(--radius-sm);
    aspect-ratio: 3/4;
    object-fit: cover;
}

.cart-item__details {
    flex: 1;
}

.cart-item__name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.cart-item__size {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 4px;
}

.cart-item__price {
    font-weight: 600;
    color: var(--clay);
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.cart-item__qty {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cart-item__qty-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--clay-light);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.cart-item__qty-btn:hover {
    background: var(--clay);
    color: var(--white);
    border-color: var(--clay);
}

.cart-item__qty-value {
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

.cart-item__remove {
    position: absolute;
    top: var(--space-md);
    right: 0;
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.85rem;
    transition: color var(--transition-fast);
}

.cart-item__remove:hover {
    color: var(--error);
}

/* ─── Toast ──────────────────────────────── */
.toast {
    position: fixed;
    top: 5rem;
    right: 1.5rem;
    background: var(--text-dark);
    color: var(--white);
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    z-index: 5000;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all var(--transition-base);
}

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

/* ─── Breadcrumb ─────────────────────────── */
.breadcrumb-section {
    padding: 6rem 0 var(--space-md);
}

.breadcrumb {
    font-size: 0.8rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--text-light);
}

.breadcrumb a:hover {
    color: var(--clay);
}

.breadcrumb span:not(:last-child) {
    opacity: 0.5;
}

/* ─── Shop Page ──────────────────────────── */
.shop-header {
    padding: var(--space-3xl) 0 var(--space-xl);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.shop-header[style*="background-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(250, 249, 246, 0.85), rgba(250, 249, 246, 0.95));
}

.shop-header .container {
    position: relative;
    z-index: 1;
}

.shop-header__title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 600;
    color: var(--text-dark);
}

.shop-header__count {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-top: var(--space-xs);
}

.shop-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-2xl);
}

.shop-filters {
    position: sticky;
    top: 5rem;
    align-self: start;
}

.shop-filters__header {
    display: none;
}

.filter-group {
    margin-bottom: var(--space-xl);
}

.filter-group__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
}

.filter-group__list li {
    margin-bottom: var(--space-sm);
}

.filter-link {
    font-size: 0.9rem;
    color: var(--text-body);
    transition: color var(--transition-fast);
    padding: 2px 0;
}

.filter-link:hover,
.filter-link.active {
    color: var(--clay);
    font-weight: 600;
}

.filter-select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1.5px solid var(--clay-light);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.85rem;
    background: var(--white);
    color: var(--text-body);
    cursor: pointer;
    outline: none;
}

.shop-mobile-controls {
    display: none;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    align-items: center;
}

.filter-select--mobile {
    width: auto;
}

.shop-empty {
    text-align: center;
    padding: var(--space-4xl) 0;
    color: var(--text-light);
}

.shop-empty i {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
    display: block;
}

.shop-empty h3 {
    color: var(--text-dark);
    margin-bottom: var(--space-sm);
}

.shop-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-3xl);
}

.shop-pagination__info {
    font-size: 0.85rem;
    color: var(--text-light);
}

.product-card__category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    margin-bottom: 2px;
}

@media (max-width: 768px) {
    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-filters {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--warm-white);
        z-index: 2500;
        padding: var(--space-xl);
        overflow-y: auto;
    }

    .shop-filters.open {
        display: block;
    }

    .shop-filters__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-xl);
        font-family: var(--font-heading);
        font-size: 1.3rem;
    }

    .shop-filters__close {
        background: none;
        border: none;
        font-size: 1.3rem;
        cursor: pointer;
    }

    .shop-mobile-controls {
        display: flex;
    }
}

/* ─── Product Detail ─────────────────────── */
.section.product-single .container {
    max-width: 1400px;
}

.product-detail__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr; /* Increased image presence */
    gap: var(--space-2xl); /* Reduced excessive gap */
    align-items: start;
}

.product-info {
    position: sticky;
    top: 100px;
}

.product-gallery {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    align-items: flex-start !important;
}

.product-gallery__thumbs {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    width: 80px !important;
}

.product-gallery__thumb {
    width: 80px !important;
    height: 100px !important;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    background: none;
    padding: 0;
}

.product-gallery__main {
    flex: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--warm-white);
    aspect-ratio: 3/4;
    max-width: 100%;
    max-height: 80vh;
    /* Fit within screen height */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* needed for absolute action buttons */
}

/* Floating action buttons over the product image (Myntra / Flipkart pattern) */
.product-gallery__actions {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    z-index: 3;
}

.pg-action {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(176, 137, 104, 0.18);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-dark);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(42, 26, 26, 0.08);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.pg-action:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(42, 26, 26, 0.14);
    background: var(--white);
}

.pg-action--wishlist[aria-pressed="true"] {
    color: var(--error);
    background: var(--white);
    border-color: rgba(211, 47, 47, 0.3);
}

.pg-action--wishlist[aria-pressed="true"] i {
    font-weight: 900; /* solid heart */
}

/* Share-success "Link copied" toast */
.pg-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--text-dark);
    color: var(--white);
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-xl);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(42, 26, 26, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10000;
}

.pg-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.product-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill space widely and correctly */
    /* Ensure entire image is visible */
    display: block;
    cursor: zoom-in;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-fade {
    opacity: 1;
    transform: scale(1);
}

.product-gallery__thumb.active,
.product-gallery__thumb:hover {
    border-color: var(--clay);
}

.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info__category {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--clay);
    margin-bottom: var(--space-sm);
}

.product-info__name {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

.product-info__price {
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.product-info__current {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--clay);
}

.product-info__compare {
    font-size: 1.1rem;
    text-decoration: line-through;
    color: var(--text-light);
}

.product-info__save {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--pastel-pink);
    color: var(--text-dark);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.product-info__desc {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.product-info__tags {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.tag {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--eco-green);
    color: var(--eco-green);
}

.product-info__sizes {
    margin-bottom: var(--space-xl);
}

.product-info__sizes h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.size-options {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.size-btn {
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--clay-light);
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-body);
    transition: all var(--transition-fast);
    text-align: center;
    min-width: 60px;
}

.size-btn:hover:not(.disabled) {
    border-color: var(--clay);
}

.size-btn.active {
    background: var(--clay);
    color: var(--white);
    border-color: var(--clay);
}

.size-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.size-btn__stock {
    display: block;
    font-size: 0.65rem;
    margin-top: 2px;
    color: var(--eco-green);
}

.size-btn.active .size-btn__stock {
    color: rgba(255, 255, 255, 0.8);
}

.size-btn__stock--out {
    color: var(--error);
}

.btn-link {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--clay);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(176, 137, 104, 0.2);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    background: transparent;
    cursor: pointer;
}

.btn-link:hover {
    background: var(--clay);
    color: var(--white);
    border-color: var(--clay);
}

.product-info__sizes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.product-info__sizes-header h4 {
    margin-bottom: 0 !important;
}

.product-info__meta-extra {
    margin-top: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meta-extra-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.meta-extra-item i {
    color: var(--clay);
    width: 20px;
    text-align: center;
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(42, 26, 26, 0.4);
    backdrop-filter: blur(5px);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal.open {
    opacity: 1;
    pointer-events: all;
}

.modal__content {
    background: var(--warm-white);
    width: 90%;
    max-width: 600px;
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

/* Subtle scrollbar inside modals — only visible while scrolling on macOS,
   light track on Windows. */
.modal__content::-webkit-scrollbar {
    width: 8px;
}
.modal__content::-webkit-scrollbar-track {
    background: transparent;
}
.modal__content::-webkit-scrollbar-thumb {
    background: rgba(176, 137, 104, 0.25);
    border-radius: 4px;
}
.modal__content::-webkit-scrollbar-thumb:hover {
    background: rgba(176, 137, 104, 0.45);
}

.modal.open .modal__content {
    transform: translateY(0);
}

.modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-light);
}

.modal__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.modal__header h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--text-dark);
}

/* Size Table Wrapper */
.size-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-xl);
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(176, 137, 104, 0.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.size-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

.size-table th,
.size-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid rgba(176, 137, 104, 0.1);
}

.size-table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--clay);
}

.size-table td {
    font-size: 0.9rem;
    color: var(--text-body);
}

.size-note {
    font-size: 0.8rem;
    color: var(--text-light);
    font-style: italic;
    text-align: center;
}

/* ─── Size Guide: How-to-measure ────────────── */
.size-howto__title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--text-dark);
    text-align: center;
    margin: var(--space-xl) 0 var(--space-md);
}

.size-howto {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 1.4fr;
    gap: var(--space-xl);
    align-items: center;
}

.size-howto__diagram {
    background: var(--cream-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    justify-content: center;
}

.size-howto__diagram svg {
    width: 100%;
    max-width: 320px;
    height: auto;
}

.size-howto__steps {
    list-style: none;
    counter-reset: howto;
    padding: 0;
    margin: 0;
    color: var(--text-body);
}

.size-howto__steps li {
    counter-increment: howto;
    position: relative;
    padding: 0.4rem 0 0.4rem 2rem;
    font-size: 0.92rem;
    line-height: 1.55;
    border-bottom: 1px dashed rgba(176, 137, 104, 0.15);
}

.size-howto__steps li:last-child {
    border-bottom: none;
}

.size-howto__steps li::before {
    content: counter(howto);
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--clay);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.size-howto__steps strong {
    color: var(--clay-dark);
    font-weight: 600;
}

/* ─── Policy pages: warm-voice intro + closing note ───── */
.policy-block__lede {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-dark);
    margin: 0 0 var(--space-md);
    padding-left: var(--space-md);
    border-left: 3px solid var(--clay);
}

.policy-block--note {
    background: var(--cream-light);
    border-radius: var(--radius-md);
    padding: var(--space-lg) var(--space-xl);
    text-align: center;
}

.policy-block--note p {
    font-style: italic;
    color: var(--clay-dark);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .size-howto {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

/* ═══════════════════════════════════════════════════════════
   Size Guide v2 — tabs, unit toggle, polished tables
   ═══════════════════════════════════════════════════════════ */

.size-chart-v2__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.size-chart-v2__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    color: var(--text-dark);
    margin: 0 0 var(--space-sm);
}

.size-chart-v2__subtitle {
    max-width: 640px;
    margin: 0 auto;
    color: var(--text-body);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Toolbar: tabs + unit toggle, on one line at desktop, stacked at mobile */
.size-chart-v2__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

/* Tab pills */
.size-tabs {
    display: inline-flex;
    background: var(--cream-light);
    border: 1px solid rgba(176, 137, 104, 0.15);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    flex-wrap: wrap;
}

.size-tab {
    border: 0;
    background: transparent;
    color: var(--clay-dark);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
    min-height: 40px;
}

.size-tab:hover {
    color: var(--clay);
}

.size-tab.is-active {
    background: var(--white);
    color: var(--text-dark);
    box-shadow: 0 2px 8px rgba(176, 137, 104, 0.18);
}

.size-tab i {
    font-size: 0.85rem;
}

/* Inch/cm toggle */
.size-units {
    display: inline-flex;
    background: var(--cream-light);
    border: 1px solid rgba(176, 137, 104, 0.15);
    border-radius: 999px;
    padding: 4px;
}

.size-units__btn {
    border: 0;
    background: transparent;
    color: var(--clay-dark);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    min-width: 56px;
}

.size-units__btn.is-active {
    background: var(--clay);
    color: var(--white);
    box-shadow: 0 2px 6px rgba(176, 137, 104, 0.3);
}

/* Common-measurements info note */
.size-chart-v2__common-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--cream-light);
    border-left: 3px solid var(--clay);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.15rem;
    margin: 0 0 var(--space-md);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-body);
}

.size-chart-v2__common-note i {
    color: var(--clay);
    font-size: 1rem;
    margin-top: 2px;
}

.size-chart-v2__common-note strong {
    color: var(--clay-dark);
    font-weight: 600;
}

/* Panels */
.size-panel {
    display: none;
}

.size-panel.is-active {
    display: block;
}

/* Table card — unified, polished */
.size-table-card {
    background: var(--white);
    border: 1px solid rgba(176, 137, 104, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.size-table-v2 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 480px;
}

.size-table-v2--combined {
    min-width: 720px;
}

.size-table-v2 th,
.size-table-v2 td {
    padding: 0.95rem 1rem;
    text-align: center;
    font-family: var(--font-body);
    border-bottom: 1px solid rgba(176, 137, 104, 0.08);
}

/* Header row */
.size-table-v2 thead th {
    background: var(--cream-light);
    color: var(--clay-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(176, 137, 104, 0.18);
    padding: 1rem;
}

.size-table-v2 thead th.is-common {
    background: rgba(176, 137, 104, 0.10);
    color: var(--clay-dark);
    position: relative;
}

/* Group header row (combined view) */
.size-table-v2__group-row th.size-table-v2__group {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(176, 137, 104, 0.18);
}

.size-table-v2__group--tops {
    background: linear-gradient(180deg, rgba(176, 137, 104, 0.06), rgba(176, 137, 104, 0.02));
    color: var(--clay-dark);
}

.size-table-v2__group--common {
    background: var(--clay);
    color: var(--white);
}

.size-table-v2__group--bottoms {
    background: linear-gradient(180deg, rgba(176, 137, 104, 0.06), rgba(176, 137, 104, 0.02));
    color: var(--clay-dark);
}

/* Body cells */
.size-table-v2 tbody td {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-variant-numeric: tabular-nums;
    transition: background 0.15s ease;
}

/* Common columns get subtle tint in body too */
.size-table-v2 tbody td:nth-child(n) {
    /* placeholder — overridden per-table below if needed */
}

.size-table-v2 thead th.is-common ~ * {
    /* not used — kept for clarity */
}

/* Highlight common columns in body via column-position aware shading.
   We can't easily target by colgroup in CSS without :nth-child math per table,
   so we use class on cells via a small JS helper would be needed. Skip for now. */

/* Size column (left) */
.size-table-v2__size-col {
    text-align: left !important;
    padding-left: 1.5rem !important;
}

.size-table-v2__size {
    text-align: left !important;
    padding-left: 1.5rem !important;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    background: rgba(253, 235, 199, 0.25);
    letter-spacing: 0.02em;
}

/* Zebra rows */
.size-table-v2 tbody tr:nth-child(even) td {
    background: rgba(253, 235, 199, 0.18);
}

.size-table-v2 tbody tr:nth-child(even) .size-table-v2__size {
    background: rgba(253, 235, 199, 0.42);
}

/* Hover */
.size-table-v2 tbody tr:hover td,
.size-table-v2 tbody tr:hover .size-table-v2__size {
    background: var(--cream-light);
}

/* Last row no border */
.size-table-v2 tbody tr:last-child td,
.size-table-v2 tbody tr:last-child th {
    border-bottom: none;
}

/* "Between sizes?" tip */
.size-tip {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    margin-top: var(--space-xl);
    background: linear-gradient(135deg, var(--cream-light), var(--white));
    border: 1px solid rgba(176, 137, 104, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.size-tip__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--clay);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.size-tip__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--text-dark);
    margin: 0 0 0.35rem;
}

.size-tip__text {
    color: var(--text-body);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

/* Responsive — tablet */
@media (max-width: 768px) {
    .size-chart-v2__toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
    }

    .size-tabs {
        justify-content: center;
        width: 100%;
    }

    .size-tab {
        flex: 1;
        justify-content: center;
        min-width: 0;
        font-size: 0.82rem;
        padding: 0.6rem 0.75rem;
    }

    .size-tab i {
        display: none;
    }

    .size-units {
        align-self: center;
    }

    .size-table-v2 th,
    .size-table-v2 td {
        padding: 0.75rem 0.6rem;
    }

    .size-table-v2 thead th {
        font-size: 0.68rem;
        letter-spacing: 0.06em;
        padding: 0.85rem 0.5rem;
    }

    .size-table-v2 tbody td {
        font-size: 0.9rem;
    }

    .size-table-v2__size-col,
    .size-table-v2__size {
        padding-left: 0.9rem !important;
    }
}

/* Responsive — small mobile */
@media (max-width: 480px) {
    .size-tip {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--space-md);
    }

    .size-table-v2 thead th {
        font-size: 0.62rem;
    }
}

/* ─── Product Promise Bar ──────────────────── */
.product-promise-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    /* Reduced from 4xl */
    padding: var(--space-2xl) var(--space-lg) var(--space-xl) var(--space-lg);
    /* Increased top padding to clear the badge */
    background: linear-gradient(to right, #fdfaf7, #ffffff, #fdfaf7);
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b08968' fill-opacity='0.02'%3E%3Cpath d='M20 18V14h-2v4h-4v2h4v4h2v-4h4v-2h-4zM20 4V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(176, 137, 104, 0.1);
    position: relative;
}

.product-promise-bar::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: url('../img/logo/quality_seal.png') no-repeat center;
    background-size: contain;
    opacity: 0.15;
    pointer-events: none;
    transform: rotate(15deg);
    filter: sepia(1) saturate(0.5);
}

.product-promise-bar::before {
    content: 'The Vayomeie Promise';
    position: absolute;
    top: -14px; /* Slightly higher */
    left: 50%;
    transform: translateX(-50%);
    background: var(--clay);
    color: var(--white);
    padding: 4px 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-radius: 100px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(176, 137, 104, 0.2);
}

.promise-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem; /* Increased for better elegance */
    position: relative;
}

.promise-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: calc(var(--space-xl) * -0.5);
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(176, 137, 104, 0.1), transparent);
}

.promise-item__icon {
    width: 54px;
    height: 54px;
    background: var(--white);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clay);
    font-size: 1.4rem;
    box-shadow: 0 8px 25px rgba(176, 137, 104, 0.12);
    transition: all var(--transition-base);
    border: 1px solid rgba(176, 137, 104, 0.05);
}

.promise-item__icon i {
    filter: drop-shadow(0 2px 4px rgba(176, 137, 104, 0.2));
}

.promise-item:hover .promise-item__icon {
    transform: translateY(-5px) scale(1.05);
    background: var(--clay);
    color: var(--white);
    box-shadow: 0 12px 25px rgba(176, 137, 104, 0.25);
}

.promise-item__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.promise-item__desc {
    font-size: 0.8rem;
    color: var(--text-light);
    opacity: 0.8;
    line-height: 1.4;
}

@media (max-width: 992px) {
    .product-promise-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl) var(--space-xl);
    }

    .promise-item:nth-child(2)::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .product-promise-bar {
        grid-template-columns: 1fr;
        padding: var(--space-2xl) var(--space-md) var(--space-xl) var(--space-md);
        gap: var(--space-xl);
    }

    .promise-item::after {
        display: none !important;
    }
}

.product-info__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.product-info__secure-notice {
    margin-top: var(--space-lg);
    text-align: center;
}

.product-info__secure-notice p {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.payment-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 1.2rem;
    color: var(--text-light);
    opacity: 0.6;
}

/* ─── Pincode Delivery Checker ───────────── */
.pincode-checker {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: linear-gradient(135deg, #fdfaf7 0%, #faf5f0 100%);
    border: 1.5px solid rgba(176, 137, 104, 0.12);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.pincode-checker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, var(--clay), rgba(176, 137, 104, 0.2));
    border-radius: 3px 0 0 3px;
}

.pincode-checker__title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pincode-checker__title i {
    color: var(--clay);
    font-size: 1rem;
}

.pincode-checker__input-wrap {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.pincode-checker__input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid rgba(176, 137, 104, 0.2);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-dark);
    background: var(--white);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.pincode-checker__input::placeholder {
    font-weight: 400;
    letter-spacing: normal;
    color: #bbb;
}

.pincode-checker__input:focus {
    border-color: var(--clay);
    box-shadow: 0 0 0 3px rgba(176, 137, 104, 0.08);
}

.pincode-checker__btn {
    padding: 10px 22px;
    background: var(--clay);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.pincode-checker__btn:hover {
    background: var(--clay-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(176, 137, 104, 0.25);
}

.pincode-checker__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pincode-checker__result {
    margin-top: 0;
    overflow: hidden;
    transition: margin 0.3s ease;
}

.pincode-checker__result:not(:empty) {
    margin-top: var(--space-md);
}

.pincode-checker__loading {
    font-size: 0.85rem;
    color: var(--clay);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    animation: fadeIn 0.3s ease;
}

.pincode-checker__success {
    animation: fadeIn 0.3s ease;
}

.pincode-checker__success > p {
    font-size: 0.88rem;
    color: #2e7d32;
    font-weight: 600;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pincode-checker__success > p i {
    font-size: 1rem;
}

.pincode-checker__details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.pincode-checker__details span {
    font-size: 0.8rem;
    color: var(--text-body);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--white);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(176, 137, 104, 0.08);
}

.pincode-checker__details span i {
    color: var(--clay);
    font-size: 0.75rem;
}

.pincode-checker__warning {
    font-size: 0.85rem;
    color: #ef6c00;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    animation: fadeIn 0.3s ease;
}

.pincode-checker__error {
    font-size: 0.85rem;
    color: var(--error);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    animation: fadeIn 0.3s ease;
}

.pincode-checker__info {
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    animation: fadeIn 0.3s ease;
}

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

/* Detailed Description */
.product-info__detailed-desc {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(176, 137, 104, 0.1);
    clear: both;
}

.product-tabs-wrap {
    margin: var(--space-4xl) 0;
    padding: var(--space-3xl) 0;
    background: #fdfaf7;
    border-top: 1px solid rgba(176, 137, 104, 0.1);
    border-bottom: 1px solid rgba(176, 137, 104, 0.1);
}

.product-tabs {
    max-width: 1000px;
    margin: 0 auto;
}

.product-info__detailed-desc h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
    letter-spacing: 0.02em;
}

.detailed-desc-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-body);
}

.detailed-desc-content p {
    margin-bottom: 1.2rem;
}



/* ─── Artisan Editorial Section ──────────────── */
.artisan-editorial {
    background-color: #fdfaf7;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm66 3c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-46-71c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm63 66c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM37 17c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm43 5c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-63 31c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM15 5c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm77 27c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM4 46c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm91-18c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM40 90c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm23-76c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-42 75c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm53-69c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z' fill='%23b08968' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E"),
        url('../img/textures/khadi_paper.png');
    background-size: 200px, cover;
    background-blend-mode: multiply;
    padding: var(--space-4xl) 0;
    margin: var(--space-4xl) 0;
    border-top: 1px solid rgba(176, 137, 104, 0.1);
    border-bottom: 1px solid rgba(176, 137, 104, 0.1);
    position: relative;
    overflow: hidden;
}

.artisan-editorial::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(250, 240, 230, 0.4), transparent);
    pointer-events: none;
}

.artisan-editorial__grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-4xl);
    align-items: center;
}

.artisan-editorial__header {
    position: sticky;
    top: 6rem;
    align-self: start;
}

.artisan-editorial__label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--clay);
    margin-bottom: var(--space-md);
    display: block;
}

.artisan-editorial__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--text-dark);
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    font-weight: 600;
}

.artisan-editorial__intro {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-body);
    margin-bottom: var(--space-2xl);
    opacity: 0.9;
}

.artisan-editorial__collective-story {
    padding: var(--space-xl);
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--clay);
    font-style: italic;
    position: relative;
}

.artisan-editorial__collective-story i {
    font-size: 1.5rem;
    color: var(--clay);
    opacity: 0.2;
    margin-bottom: 10px;
    display: block;
}

/* Profiles Grid */
.artisan-profiles-grid {
    display: grid;
    gap: var(--space-3xl);
}

.artisan-profiles-grid.count-2 {
    grid-template-columns: 1fr;
}

.artisan-editorial-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-2xl);
    align-items: center;
    background: rgba(255, 255, 255, 0.4);
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(5px);
    transition: all var(--transition-base);
    border: 1px solid transparent;
}

.artisan-editorial-card:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(10px);
    box-shadow: 0 15px 40px rgba(176, 137, 104, 0.1);
    border-color: rgba(176, 137, 104, 0.15);
}

.artisan-editorial-card__photo-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1/1.2;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.artisan-editorial-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.artisan-editorial-card:hover .artisan-editorial-card__photo {
    transform: scale(1.05);
}

.artisan-editorial-card__photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream-light);
    font-size: 3rem;
    color: var(--clay-light);
}

.artisan-editorial-card__badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--clay);
    color: var(--white);
    text-align: center;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 0;
    font-weight: 700;
}

.artisan-editorial-card__content {
    padding-right: var(--space-lg);
}

.artisan-editorial-card__name {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--text-dark);
    margin-bottom: var(--space-xs);
}

.tabs-header {
    display: flex;
    gap: var(--space-2xl);
    border-bottom: 1px solid rgba(176, 137, 104, 0.1);
    margin-bottom: -1px;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.tabs-header::-webkit-scrollbar {
    display: none;
}

.tab-trigger {
    background: none;
    border: none;
    padding: var(--space-md) 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}

.tab-trigger::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--clay);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.tab-trigger.active {
    color: var(--text-dark);
}

.tab-trigger.active::after {
    width: 100%;
}

.tabs-content {
    padding: var(--space-xl) 0;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.tab-panel {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

.tab-panel.active {
    display: block;
}

.tab-panel p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-body);
}

.panel-sub {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px dashed rgba(176, 137, 104, 0.1);
}

.panel-sub strong {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--clay);
    display: block;
    margin-bottom: 4px;
}

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

/* Shipping Info Design */
.shipping-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    justify-content: center;
}

.shipping-info__item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fdfaf7;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(176, 137, 104, 0.05);
    text-align: left;
}

.artisan-editorial-card__meta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.craft-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--clay);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.location-tag {
    font-size: 0.8rem;
    color: var(--text-light);
}

.location-tag i {
    color: var(--clay);
    margin-right: 4px;
}

.artisan-editorial-card__bio {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-body);
    opacity: 0.8;
}

@media (max-width: 992px) {
    .artisan-editorial__grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .artisan-editorial__header {
        position: static;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .artisan-editorial-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: var(--space-lg);
    }

    .artisan-editorial-card__photo-wrap {
        width: 160px;
        margin: 0 auto var(--space-lg);
    }

    .artisan-editorial-card__meta {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .artisans-count-2 {
        grid-template-columns: 1fr;
    }
}

/* Accordion */
.product-accordions {
    border-top: 1px solid rgba(176, 137, 104, 0.15);
}

.accordion {
    border-bottom: 1px solid rgba(176, 137, 104, 0.15);
}

.accordion__header {
    padding: var(--space-md) 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion__header::after {
    content: '+';
    font-weight: 300;
    font-size: 1.2rem;
    color: var(--clay);
}

.accordion[open] .accordion__header::after {
    content: '−';
}

.accordion__body {
    padding: 0 0 var(--space-md);
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.7;
}

.accordion__body a {
    color: var(--clay);
    text-decoration: underline;
}

.product-info__artisan {
    background: var(--cream-light);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin-top: var(--space-lg);
}

.product-info__artisan h4 {
    font-family: var(--font-heading);
    margin-bottom: var(--space-sm);
    color: var(--text-dark);
}

.product-info__artisan i {
    color: var(--clay);
    margin-right: var(--space-xs);
}

.product-info__artisan p {
    font-size: 0.9rem;
    line-height: 1.7;
}

.related-products {
    background: var(--cream-light);
}

@media (max-width: 768px) {
    .product-detail__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .product-gallery {
        flex-direction: column-reverse !important;
        gap: var(--space-md) !important;
    }

    .product-gallery__thumbs {
        flex-direction: row !important;
        width: 100% !important;
        justify-content: center;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .product-gallery__thumb {
        width: 60px !important;
        height: 80px !important;
        flex-shrink: 0;
    }

    .pincode-checker {
        padding: var(--space-md);
    }

    .pincode-checker__input-wrap {
        flex-direction: column;
        gap: 8px;
    }

    .pincode-checker__btn {
        width: 100%;
        padding: 12px;
    }

    .pincode-checker__details {
        flex-direction: column;
        gap: 6px;
    }
}

/* ─── Cart Page ──────────────────────────── */
.cart-page__empty {
    text-align: center;
    padding: var(--space-4xl) 0;
}

.cart-page__empty i {
    font-size: 3rem;
    color: var(--text-light);
    display: block;
    margin-bottom: var(--space-lg);
}

.cart-page__empty h3 {
    margin-bottom: var(--space-sm);
}

.cart-page__empty p {
    color: var(--text-light);
    margin-bottom: var(--space-xl);
}

.cart-page__layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--space-2xl);
    align-items: start;
    margin-top: var(--space-xl);
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    padding: var(--space-md) var(--space-sm);
    text-align: left;
    border-bottom: 1px solid rgba(176, 137, 104, 0.15);
}

.cart-table td {
    padding: var(--space-md) var(--space-sm);
    vertical-align: middle;
    border-bottom: 1px solid rgba(176, 137, 104, 0.08);
}

.cart-table__product-inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.cart-table__img {
    width: 70px;
    border-radius: var(--radius-sm);
    aspect-ratio: 3/4;
    object-fit: cover;
}

.cart-table__name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--text-dark);
}

.cart-table__size {
    font-size: 0.8rem;
    color: var(--text-light);
}

.cart-table__price {
    font-weight: 600;
    color: var(--text-body);
}

.cart-table__total {
    font-weight: 600;
    color: var(--clay);
}

.cart-table__remove button {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.9rem;
}

.cart-table__remove button:hover {
    color: var(--error);
}

.qty-control {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.qty-control__btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--clay-light);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-control__btn:hover {
    background: var(--clay);
    color: var(--white);
    border-color: var(--clay);
}

.qty-control__value {
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

.order-summary {
    background: var(--cream-light);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    position: sticky;
    top: 6rem;
}

.order-summary__title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-lg);
}

.order-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: var(--space-sm);
}

.order-summary__row--total {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: var(--space-sm);
}

.order-summary__divider {
    height: 1px;
    background: rgba(176, 137, 104, 0.15);
    margin: var(--space-md) 0;
}

@media (max-width: 768px) {
    .cart-page__layout {
        grid-template-columns: 1fr;
    }

    .cart-table th:nth-child(2),
    .cart-table td:nth-child(2),
    .cart-table th:nth-child(4),
    .cart-table td:nth-child(4) {
        display: none;
    }
}

/* ─── Checkout Page ──────────────────────── */
.checkout-layout {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 3rem;
    align-items: flex-start;
}

.checkout-summary {
    position: sticky;
    top: 100px;
}

.checkout-step {
    margin-bottom: var(--space-2xl);
}

.checkout-step__title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.checkout-step__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--clay);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.form-group {
    margin-bottom: var(--space-md);
}

.form-group--full {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: 1.5px solid rgba(176, 137, 104, 0.25);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-body);
    background: var(--white);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color: var(--clay-light);
    background: var(--cream-light);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--clay);
    box-shadow: 0 0 0 3px rgba(176, 137, 104, 0.12);
    background: var(--white);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-light);
    font-weight: 300;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23777' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-hint {
    font-size: 0.75rem;
    margin-top: 4px;
    display: block;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.payment-option {
    display: flex;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border: 1.5px solid var(--clay-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.payment-option.active {
    border-color: var(--clay);
    background: var(--cream-light);
}

.payment-option input {
    display: none;
}

.payment-option__label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9rem;
}

.payment-option__label i {
    font-size: 1.2rem;
    color: var(--clay);
    width: 24px;
    text-align: center;
}

.coupon-section {
    margin-top: var(--space-lg);
}

.coupon-input {
    display: flex;
    gap: var(--space-sm);
}

.coupon-input input {
    flex: 1;
}

.coupon-message {
    font-size: 0.8rem;
    margin-top: var(--space-xs);
}

.checkout-item {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(176, 137, 104, 0.08);
}

.checkout-item__img {
    width: 50px;
    border-radius: var(--radius-sm);
    aspect-ratio: 3/4;
    object-fit: cover;
}

.checkout-item__info {
    flex: 1;
}

.checkout-item__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

.checkout-item__meta {
    font-size: 0.75rem;
    color: var(--text-light);
}

.checkout-item__price {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-body);
}

.checkout-summary {
    position: sticky;
    top: 6rem;
}

@media (max-width: 768px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }
}

/* ─── Blog ───────────────────────────────── */
.blog-header {
    padding: 2rem 0 1rem;
    text-align: center;
}

.blog-header__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.blog-header__subtitle {
    margin-bottom: 1.5rem;
    color: var(--text-light);
}

.blog-categories {
    margin-bottom: 2.5rem;
}

.blog-categories__tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.blog-categories__tabs a {
    display: inline-block;
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--clay-light);
    border-radius: var(--radius-xl);
    transition: all var(--transition-fast);
}

.blog-categories__tabs a:hover,
.blog-categories__tabs a.active {
    background: var(--clay);
    color: var(--white);
    border-color: var(--clay);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-xl);
}

.blog-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(42, 26, 26, 0.12);
}

.blog-card__image {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

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

.blog-card__body {
    padding: var(--space-lg);
}

.blog-card__category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clay);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.blog-card__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.blog-card__excerpt {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.blog-card__meta {
    display: flex;
    gap: var(--space-md);
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Blog Post Detail */
.blog-post__hero {
    aspect-ratio: 21/9;
    max-height: 500px;
    overflow: hidden;
    margin-top: 4.5rem;
}

.blog-post__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post__header {
    text-align: center;
    padding: var(--space-2xl) 0;
    max-width: 700px;
    margin: 0 auto;
}

.blog-post__category {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--clay);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.blog-post__title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

.blog-post__meta {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    font-size: 0.85rem;
    color: var(--text-light);
}

.blog-post__content {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-body);
}

.blog-post__content h2,
.blog-post__content h3 {
    font-family: var(--font-heading);
    color: var(--text-dark);
    margin: var(--space-xl) 0 var(--space-md);
}

.blog-post__content p {
    margin-bottom: var(--space-lg);
}

.blog-post__content img {
    width: 100%;
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
}

.blog-post__content blockquote {
    border-left: 3px solid var(--clay);
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-lg) 0;
    background: var(--cream-light);
    font-style: italic;
    color: var(--text-dark);
}

.blog-post__content ul,
.blog-post__content ol {
    margin: var(--space-md) 0;
    padding-left: var(--space-xl);
}

.blog-post__content li {
    margin-bottom: var(--space-sm);
}

.blog-post__content a {
    color: var(--clay);
    text-decoration: underline;
}

.blog-share {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl) 0;
    border-top: 1px solid rgba(176, 137, 104, 0.15);
    margin-top: var(--space-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.blog-share__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--clay-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-body);
    transition: all var(--transition-fast);
}

.blog-share__btn:hover {
    background: var(--clay);
    color: var(--white);
    border-color: var(--clay);
}

/* ─── About Page ─────────────────────────── */
.about-hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--cream-light);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-top: 0;
    padding: 3rem var(--space-lg);
}

.about-hero[style*="background-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(42, 26, 26, 0.45), rgba(42, 26, 26, 0.55));
}

.about-hero[style*="background-image"] .about-hero__content {
    position: relative;
    z-index: 1;
}

.about-hero[style*="background-image"] .about-hero__title {
    color: var(--white);
}

.about-hero[style*="background-image"] .about-hero__subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.about-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
}

.about-hero__subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 500px;
    margin: 0 auto;
}

.about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.about-split--reverse .about-split__image {
    order: 2;
}

.about-split__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
}

.about-split__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-split__label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--clay);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.about-split__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-lg);
    line-height: 1.2;
}

.about-split__text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-body);
}

@media (max-width: 768px) {
    .about-split {
        grid-template-columns: 1fr;
    }

    .about-split--reverse .about-split__image {
        order: 0;
    }
}

/* ─── Contact Page ───────────────────────── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
}

.contact-info__item {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.contact-info__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cream-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clay);
    flex-shrink: 0;
}

.contact-info__label {
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-info__value {
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 2px;
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Contact Form Styling ───────────────── */
.contact-header {
    padding: 6rem 0 var(--space-md);
    text-align: center;
}

.contact-header__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--text-dark);
}

.contact-header__subtitle {
    font-size: 1rem;
    color: var(--text-light);
    max-width: 500px;
    margin: var(--space-sm) auto 0;
}

.contact-form-wrap__title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-xl);
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

@media (max-width: 600px) {
    .contact-form__row {
        grid-template-columns: 1fr;
    }
}

.contact-form__group {
    margin-bottom: var(--space-md);
}

.contact-form__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.contact-form__label span {
    color: var(--clay);
}

.contact-form__input {
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: 1.5px solid rgba(176, 137, 104, 0.25);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-body);
    background: var(--white);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.contact-form__input:hover {
    border-color: var(--clay-light);
    background: var(--cream-light);
}

.contact-form__input:focus {
    border-color: var(--clay);
    box-shadow: 0 0 0 3px rgba(176, 137, 104, 0.12);
    background: var(--white);
}

.contact-form__input::placeholder {
    color: var(--text-light);
    font-weight: 300;
}

.contact-form__textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

select.contact-form__input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23777' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.contact-form__feedback {
    margin-top: var(--space-md);
    font-size: 0.9rem;
}

.contact-form__feedback--success {
    color: var(--eco-green);
}

.contact-form__feedback--error {
    color: var(--error);
}

.contact-info__card {
    background: var(--cream-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.contact-info__value a {
    color: var(--clay);
}

.contact-info__value a:hover {
    text-decoration: underline;
}

.contact-social {
    margin-bottom: var(--space-xl);
}

.contact-social__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.contact-social__links {
    display: flex;
    gap: var(--space-md);
}

.contact-social__link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--clay-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clay);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.contact-social__link:hover {
    background: var(--clay);
    color: var(--white);
    border-color: var(--clay);
}

.contact-map__placeholder {
    background: var(--cream-light);
    border-radius: var(--radius-lg);
    padding: var(--space-3xl);
    text-align: center;
    color: var(--text-light);
}

.contact-map__placeholder i {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
    display: block;
}

/* ─── Pre-Book Form Styling ──────────────── */
.prebook-form-card {
    background: var(--white);
    border: 1.5px solid rgba(176, 137, 104, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    max-width: 600px;
    margin: var(--space-xl) auto;
    box-shadow: var(--shadow-md);
}

.prebook-form-card__title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-lg);
    text-align: center;
}

/* ─── Pre-Book Timeline ──────────────────── */
.prebook-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 700px;
    margin: var(--space-2xl) auto;
    position: relative;
}

.prebook-timeline::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 30px;
    right: 30px;
    height: 2px;
    background: var(--clay-light);
}

.prebook-step {
    text-align: center;
    position: relative;
    z-index: 1;
    flex: 1;
}

.prebook-step__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--cream);
    border: 2px solid var(--clay);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-sm);
    color: var(--clay);
    font-size: 1rem;
}

.prebook-step__label {
    font-size: 0.75rem;
    color: var(--text-body);
    font-weight: 600;
}

@media (max-width: 600px) {
    .prebook-timeline {
        flex-direction: column;
        gap: var(--space-md);
        align-items: flex-start;
    }

    .prebook-timeline::before {
        top: 0;
        bottom: 0;
        left: 24px;
        width: 2px;
        height: auto;
        right: auto;
    }

    .prebook-step {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        text-align: left;
    }
}

/* ─── Pre-Book Page Styling ─────────────── */
.prebook-header {
    padding: 2.5rem 0 1.5rem;
    text-align: center;
}

.prebook-header__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--text-dark);
}

.prebook-header__subtitle {
    font-size: 1rem;
    color: var(--text-light);
    max-width: 500px;
    margin: var(--space-sm) auto 0;
}

.prebook-product__card {
    display: flex;
    gap: var(--space-xl);
    background: var(--cream-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    align-items: center;
    max-width: 700px;
    margin: 0 auto;
}

.prebook-product__image {
    width: 120px;
    flex-shrink: 0;
}

.prebook-product__image img {
    width: 100%;
    border-radius: var(--radius-md);
    aspect-ratio: 3/4;
    object-fit: cover;
}

.prebook-product__category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--clay);
}

.prebook-product__name {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
}

.prebook-product__price {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--clay);
    margin-top: 4px;
}

.prebook-product__desc {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: var(--space-sm);
}

.prebook-form-wrap {
    background: var(--white);
    border: 1.5px solid rgba(176, 137, 104, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    max-width: 700px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(42, 26, 26, 0.06);
}

.prebook-form-wrap__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.prebook-form-wrap__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-sm);
}

.prebook-form-wrap__text {
    font-size: 0.9rem;
    color: var(--text-light);
}

.prebook-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

@media (max-width: 600px) {
    .prebook-form__row {
        grid-template-columns: 1fr;
    }
}

.prebook-form__group {
    margin-bottom: var(--space-md);
}

.prebook-form__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.prebook-form__label span {
    color: var(--clay);
}

.prebook-form__input {
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: 1.5px solid rgba(176, 137, 104, 0.25);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-body);
    background: var(--white);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.prebook-form__input:hover {
    border-color: var(--clay-light);
    background: var(--cream-light);
}

.prebook-form__input:focus {
    border-color: var(--clay);
    box-shadow: 0 0 0 3px rgba(176, 137, 104, 0.12);
    background: var(--white);
}

.prebook-form__input::placeholder {
    color: var(--text-light);
    font-weight: 300;
}

.prebook-form__textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

select.prebook-form__input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23777' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.prebook-form__feedback {
    margin-top: var(--space-md);
    font-size: 0.9rem;
    text-align: center;
}

.prebook-form__feedback--success {
    color: var(--eco-green);
}

.prebook-form__feedback--error {
    color: var(--error);
}

.prebook-promise {
    text-align: center;
    max-width: 500px;
    margin: var(--space-2xl) auto 0;
    padding: var(--space-lg);
    background: var(--cream-light);
    border-radius: var(--radius-lg);
}

.prebook-promise i {
    color: var(--eco-green);
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
    display: block;
}

.prebook-promise p {
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.6;
}

/* Timeline styling */
.timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 800px;
    margin: var(--space-xl) auto;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: var(--clay-light);
    z-index: 0;
}

.timeline__step {
    text-align: center;
    position: relative;
    z-index: 1;
    flex: 1;
}

.timeline__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--cream);
    border: 2px solid var(--clay);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-sm);
    color: var(--clay);
    font-size: 1rem;
}

.timeline__label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.timeline__desc {
    font-size: 0.75rem;
    color: var(--text-light);
    padding: 0 var(--space-xs);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .timeline {
        flex-direction: column;
        gap: var(--space-lg);
        align-items: flex-start;
        padding-left: 0;
    }

    .timeline::before {
        top: 0;
        bottom: 0;
        left: 20px;
        width: 2px;
        height: 100%;
        right: auto;
    }

    .timeline__step {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        text-align: left;
    }
}

/* ─── Artisans ───────────────────────────── */
.artisan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.artisan-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.artisan-card__photo {
    aspect-ratio: 1;
    overflow: hidden;
}

.artisan-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artisan-card__info {
    padding: var(--space-lg);
}

.artisan-card__name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.artisan-card__craft {
    font-size: 0.85rem;
    color: var(--clay);
    margin-top: 2px;
}

.artisan-card__location {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 4px;
}

.artisan-card details summary {
    font-size: 0.85rem;
    color: var(--clay);
    cursor: pointer;
    margin-top: var(--space-sm);
}

.artisan-card details p {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-top: var(--space-sm);
}

/* ─── Fabric Guide ───────────────────────── */
.fabric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-xl);
}

.fabric-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.fabric-card__image {
    aspect-ratio: 4/3;
    overflow: hidden;
}

.fabric-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fabric-card__body {
    padding: var(--space-lg);
}

.fabric-card__name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-xs);
}

.fabric-card__origin {
    font-size: 0.8rem;
    color: var(--clay);
    margin-bottom: var(--space-md);
}

.fabric-props {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: var(--space-md) 0;
}

.fabric-prop {
    font-size: 0.75rem;
}

.fabric-prop__label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    display: block;
}

.fabric-prop__bar {
    height: 4px;
    border-radius: 2px;
    background: var(--clay-light);
    width: 60px;
    margin-top: 4px;
}

.fabric-prop__bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--clay);
}

/* ─── Size Guide ─────────────────────────── */
.size-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-xl) 0;
}

.size-table th {
    background: var(--cream-light);
    padding: var(--space-md);
    font-size: 0.85rem;
    text-align: center;
    border: 1px solid rgba(176, 137, 104, 0.15);
}

.size-table td {
    padding: var(--space-md);
    text-align: center;
    font-size: 0.9rem;
    border: 1px solid rgba(176, 137, 104, 0.08);
}

.size-table tr:hover td {
    background: var(--cream-light);
}

/* ─── Policy Pages ───────────────────────── */
.policy-content {
    max-width: 700px;
    margin: 0 auto;
}

.policy-content h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--text-dark);
    margin: var(--space-xl) 0 var(--space-md);
}

.policy-content p,
.policy-content li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-body);
    margin-bottom: var(--space-md);
}

.policy-content ul {
    padding-left: var(--space-xl);
}

/* ─── Nav active state ───────────────────── */
.nav__link.active {
    color: var(--clay);
}

.nav__link.active::after {
    width: 100%;
}

/* ─── Gradient Divider ───────────────────── */
.gradient-divider {
    height: 3px;
    max-width: 200px;
    margin: 0 auto var(--space-3xl);
    background: linear-gradient(90deg, transparent, var(--clay), transparent);
    border-radius: 2px;
}

/* ─── Floating Decorative Shapes ─────────── */
.section {
    position: relative;
}

.featured::before,
.prebook-cta::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.06;
    pointer-events: none;
    background: var(--clay);
}

.featured::before {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
}

.prebook-cta::after {
    width: 200px;
    height: 200px;
    bottom: -80px;
    left: -60px;
}

/* ─── Hero floating shapes (like manavkalamkari) */
.hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    pointer-events: none;
    animation: floatShape 15s ease-in-out infinite;
    z-index: 0;
}

.hero::before {
    width: 40vw;
    height: 40vw;
    top: -20%;
    left: -15%;
    background: rgba(176, 137, 104, 0.15);
}

.hero::after {
    width: 30vw;
    height: 30vw;
    bottom: -15%;
    right: -10%;
    background: rgba(255, 255, 255, 0.1);
    animation-delay: -7s;
}

@keyframes floatShape {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(25px, -15px) scale(1.04);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* ─── Smooth image reveal ────────────────── */
.about-split__image {
    overflow: hidden;
}

.about-split__image img {
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.about-split__image:hover img {
    transform: scale(1.05);
}

/* ─── Button press effect ────────────────── */
.btn:active {
    transform: scale(0.97) !important;
}

/* ─── Link underline grow effect ─────────── */
.nav__link::after {
    transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ─── Smooth focus outlines ──────────────── */
input:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 0 3px rgba(176, 137, 104, 0.15);
}

/* ─── Section title subtle styling ───────── */
.section__title {
    position: relative;
}

.section__title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--clay);
    margin: var(--space-md) auto 0;
    border-radius: 1px;
}

/* ─── Rotating BG — scroll-driven, not CSS animation */
.bg-motif {
    animation: none;
}

/* ─── Footer Newsletter ──────────────────── */
.footer__newsletter {
    margin-top: var(--space-sm);
    max-width: 320px;
}

.footer__newsletter-field {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer__newsletter-field:focus-within {
    border-color: var(--clay);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(176, 137, 104, 0.1);
}

.footer__newsletter-input {
    flex: 1;
    padding: 0.6rem 1.2rem;
    border: none;
    background: transparent;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.85rem;
    outline: none;
}

.footer__newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.footer__newsletter-btn {
    width: 40px;
    height: 40px;
    background: var(--clay);
    color: var(--white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.footer__newsletter-btn i {
    font-size: 0.9rem;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.footer__newsletter-btn:hover {
    background: var(--white);
    color: var(--clay);
    transform: scale(1.05);
}

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

/* ─── Footer Admin Link ─────────────────── */
.footer__admin-link {
    margin-left: var(--space-md);
    opacity: 0.4;
    font-size: 0.7rem;
    transition: opacity 0.3s;
}

.footer__admin-link:hover {
    opacity: 0.8;
    color: var(--clay);
}

/* ─── Shop Search & Price Filter ────────── */
.shop-search-wrap {
    display: flex;
    gap: 0;
}

.shop-search-input {
    flex: 1;
    padding: 0.7rem 1rem;
    border: 1.5px solid rgba(176, 137, 104, 0.25);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.3s;
}

.shop-search-input:focus {
    border-color: var(--clay);
}

.shop-search-btn {
    padding: 0 1rem;
    background: var(--clay);
    color: var(--white);
    border: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    cursor: pointer;
    transition: background 0.3s;
}

.shop-search-btn:hover {
    background: var(--clay-dark);
}

.filter-price {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.filter-show-more {
    background: none;
    border: none;
    color: var(--clay);
    font-size: 0.85rem;
    cursor: pointer;
    padding: var(--space-sm) 0;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: color 0.3s;
}

.filter-show-more:hover {
    color: var(--clay-dark);
}

/* ─── Additional Decorative Elements ────── */
.section::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(176, 137, 104, 0.08);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.usp::after {
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
}

.newsletter::after {
    bottom: -60px;
    left: -60px;
    width: 180px;
    height: 180px;
}

/* Rotating decorative dots */
.eco-strip::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: rotateSlowDeco 20s linear infinite;
}

@keyframes rotateSlowDeco {
    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* ─── Founder Section ────────────────────── */
.founder-section {
    background: var(--cream-light);
}

.founder-photo {
    border-radius: var(--radius-lg);
}

.founder-quote {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    border-left: 3px solid var(--clay);
    background: var(--white);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.founder-quote blockquote {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-dark);
    line-height: 1.5;
    margin: 0;
}

.founder-quote cite {
    display: block;
    margin-top: var(--space-sm);
    font-size: 0.85rem;
    font-style: normal;
    color: var(--clay);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ─── Global overflow fix ──────────────── */
    html,
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* ─── Header nav fix ───────────────────── */
    .header {
        top: var(--space-sm);
        padding: 0 var(--space-sm);
    }

    .nav {
        padding: var(--space-xs) var(--space-md);
        border-radius: 28px;
    }

    .nav__logo-img {
        height: 45px;
    }

    .header.scrolled .nav__logo-img {
        height: 40px;
    }

    .nav__actions {
        gap: var(--space-sm);
    }

    .nav__icon {
        font-size: 1rem;
        padding: 4px;
    }

    .nav__hamburger span {
        width: 22px;
    }

    /* ─── Mobile menu slide-in ─────────────── */
    .nav__links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--warm-white);
        flex-direction: column;
        padding: 5rem var(--space-xl) var(--space-xl);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
        gap: var(--space-lg);
        transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        z-index: 1001;
        display: flex;
    }

    .nav__links.open {
        right: 0;
    }

    /* ─── Hero section ─────────────────────── */
    .hero {
        min-height: 90vh;
    }

    .hero__content {
        padding: 0 var(--space-md);
        max-width: 100%;
    }

    .hero__title {
        font-size: 2.2rem;
    }

    .hero__subtitle {
        font-size: 0.75rem;
    }

    .hero__desc {
        font-size: 0.9rem;
    }

    .hero__ctas {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .hero__ctas .btn {
        text-align: center;
    }

    .hero__scroll-indicator {
        display: none;
    }

    /* ─── Marquee ──────────────────────────── */
    .marquee {
        padding: var(--space-md) 0;
    }

    .marquee__track {
        font-size: 0.8rem;
        gap: var(--space-md);
    }

    /* ─── Section spacing ──────────────────── */
    .section {
        padding: var(--space-2xl) 0;
    }

    .container {
        padding: 0 var(--space-md);
    }

    .section__title {
        font-size: 1.5rem;
    }

    .section__title::after {
        width: 30px;
    }

    .section__subtitle {
        font-size: 0.85rem;
        margin-bottom: var(--space-xl);
    }

    /* ─── USP cards ────────────────────────── */
    .usp__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .usp__card {
        padding: var(--space-lg);
    }

    .usp__icon {
        width: 48px;
        height: 48px;
    }

    .usp__title {
        font-size: 1.1rem;
    }

    /* ─── Product grid ─────────────────────── */
    .products__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .product-card__name {
        font-size: 0.85rem;
    }

    .product-card__price {
        font-size: 0.9rem;
    }

    .product-card__badge {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    .product-card__overlay {
        display: none;
    }

    /* ─── Pre-book CTA ─────────────────────── */
    .prebook-cta__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .prebook-cta__image {
        aspect-ratio: 16/9;
    }

    .prebook-cta__title {
        font-size: 1.5rem;
    }

    /* ─── Eco strip ────────────────────────── */
    .eco-strip {
        padding: var(--space-xl) var(--space-md);
        gap: var(--space-md);
        flex-wrap: wrap;
        justify-content: center;
    }

    .eco-strip__number {
        font-size: 1.2rem;
    }

    .eco-strip__label {
        font-size: 0.65rem;
    }

    .eco-strip__divider {
        display: none;
    }

    /* ─── Blog grid ────────────────────────── */
    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .blog-card__title {
        font-size: 1rem;
    }

    .blog-categories__tabs {
        gap: var(--space-xs);
    }

    .blog-categories__tabs a {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }

    /* ─── Blog post ────────────────────────── */
    .blog-post__hero {
        aspect-ratio: 16/9;
        max-height: 250px;
    }

    .blog-post__header {
        padding: var(--space-lg) 0;
    }

    .blog-post__title {
        font-size: 1.5rem;
    }

    .blog-post__meta {
        flex-direction: column;
        align-items: center;
        gap: var(--space-xs);
        font-size: 0.8rem;
    }

    .blog-post__content {
        font-size: 0.95rem;
        padding: 0 var(--space-sm);
    }

    /* ─── Product detail ───────────────────── */
    .product-detail__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .product-gallery__main {
        aspect-ratio: 3/4;
    }

    .product-gallery__thumbs {
        gap: var(--space-xs);
    }

    .product-gallery__thumb {
        width: 55px;
        height: 70px;
    }

    .product-info__name {
        font-size: 1.3rem;
    }

    .product-info__current {
        font-size: 1.3rem;
    }

    .product-info__compare {
        font-size: 0.9rem;
    }

    .product-info__save {
        font-size: 0.65rem;
    }

    .product-info__desc {
        font-size: 0.85rem;
    }

    .product-info__tags {
        gap: var(--space-xs);
    }

    .tag {
        font-size: 0.6rem;
        padding: 3px 8px;
    }

    .size-options {
        gap: var(--space-xs);
    }

    .size-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.8rem;
        min-width: 50px;
    }

    .size-btn__stock {
        font-size: 0.55rem;
    }

    .btn--lg {
        padding: 0.85rem 1.5rem;
        font-size: 0.8rem;
    }

    .accordion__header {
        font-size: 0.9rem;
    }

    .accordion__body {
        font-size: 0.8rem;
    }

    /* ─── Cart page ────────────────────────── */
    .cart-page__layout {
        grid-template-columns: 1fr;
    }

    .cart-table th {
        font-size: 0.65rem;
        padding: var(--space-sm) var(--space-xs);
    }

    /* Tabs scroll on mobile */
    .tabs-header {
        gap: var(--space-lg);
        justify-content: flex-start;
        padding: 0 var(--space-md);
    }
    
    .tab-trigger {
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* Hide user name on mobile header */
    .user-dropdown__name {
        display: none !important;
    }

    /* Notify Me Box Styling */
    .notify-me-box {
        margin-bottom: 20px;
        padding: 15px !important;
        background: #fef5ef;
        border: 1px solid #dcb892;
        border-radius: 12px;
    }
    
    .notify-me-box form {
        flex-direction: column;
    }
    
    .notify-me-box button {
        width: 100%;
    }

    .cart-table td {
        padding: var(--space-sm) var(--space-xs);
    }

    .cart-table__product-inner {
        gap: var(--space-sm);
    }

    .cart-table__img {
        width: 50px;
    }

    .cart-table__name {
        font-size: 0.8rem;
    }

    .qty-control__btn {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }

    /* ─── Checkout ─────────────────────────── */
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-step__title {
        font-size: 1rem;
    }

    .checkout-step__num {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px;
        /* prevents iOS zoom */
    }

    .payment-option {
        padding: var(--space-md);
    }

    .payment-option__label {
        font-size: 0.85rem;
    }

    .checkout-summary {
        position: static;
    }

    /* ─── Cart drawer ──────────────────────── */
    .cart-drawer__panel {
        width: 100%;
        max-width: 100vw;
    }

    .cart-drawer__header {
        padding: var(--space-md);
    }

    .cart-drawer__body {
        padding: var(--space-md);
    }

    .cart-drawer__footer {
        padding: var(--space-md);
    }

    .cart-item__image {
        width: 60px;
    }

    .cart-item__name {
        font-size: 0.85rem;
    }

    /* ─── Search overlay ───────────────────── */
    .search-overlay__heading {
        font-size: 1.3rem;
    }

    .search-overlay__input {
        font-size: 1rem;
        padding: 0.9rem 1rem 0.9rem 2.8rem;
    }

    .search-overlay__close {
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
    }

    .search-overlay__tags {
        gap: var(--space-xs);
    }

    .search-overlay__tag {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }

    /* ─── About page ───────────────────────── */
    .about-hero {
        min-height: 50vh;
        padding: var(--space-2xl) var(--space-md);
        margin-top: 4rem;
    }

    .about-hero__title {
        font-size: 2rem;
    }

    .about-hero__subtitle {
        font-size: 0.9rem;
    }

    .about-split {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .about-split--reverse .about-split__image {
        order: 0;
    }

    .about-split__image {
        aspect-ratio: 16/9;
    }

    .about-split__title {
        font-size: 1.3rem;
    }

    .about-split__text {
        font-size: 0.9rem;
    }

    /* ─── Contact page ─────────────────────── */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .contact-header {
        padding: 5rem 0 var(--space-sm);
    }

    .contact-header__title {
        font-size: 1.8rem;
    }

    .contact-form__row {
        grid-template-columns: 1fr;
    }

    .contact-form__input {
        font-size: 16px;
    }

    /* ─── Pre-book page ────────────────────── */
    .prebook-header {
        padding: 5rem 0 var(--space-sm);
    }

    .prebook-header__title {
        font-size: 1.8rem;
    }

    .prebook-form-wrap {
        padding: 1.5rem !important;
        border-radius: 16px !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .prebook-form__row {
        grid-template-columns: 1fr;
    }

    .prebook-form__input {
        font-size: 16px;
    }

    .prebook-product__card {
        flex-direction: column;
        text-align: center;
    }

    .prebook-product__image {
        width: 100px;
        margin: 0 auto;
    }

    /* ─── Timeline mobile (vertical) ───────── */
    .timeline {
        flex-direction: column;
        gap: var(--space-lg);
        align-items: flex-start;
        padding-left: 0;
    }

    .timeline::before {
        top: 0;
        bottom: 0;
        left: 20px;
        width: 2px;
        height: 100%;
        right: auto;
    }

    .timeline__step {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        text-align: left;
        width: 100%;
    }

    .timeline__icon {
        margin: 0;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
    }

    .timeline__label {
        font-size: 0.8rem;
    }

    .timeline__desc {
        font-size: 0.7rem;
        padding: 0;
    }

    /* ─── Footer ───────────────────────────── */
    .footer {
        padding: var(--space-2xl) 0 var(--space-lg);
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        padding: 0 var(--space-md);
    }

    .footer__logo {
        height: 40px;
    }

    .footer__about {
        font-size: 0.8rem;
    }

    .footer__heading {
        font-size: 0.9rem;
        margin-bottom: var(--space-md);
    }

    .footer__links a {
        font-size: 0.8rem;
    }

    .footer__contact {
        font-size: 0.8rem;
    }

    .footer__newsletter {
        flex-direction: column;
    }

    .footer__newsletter-input {
        font-size: 16px;
    }

    .footer__bottom {
        padding: var(--space-md) var(--space-md) 0;
        font-size: 0.7rem;
    }

    .footer__social {
        margin-bottom: var(--space-md);
    }

    /* ─── Newsletter ───────────────────────── */
    .newsletter__form {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .newsletter__input {
        font-size: 16px;
        border-radius: var(--radius-xl);
    }

    .newsletter__title {
        font-size: 1.3rem;
    }

    .newsletter__text {
        font-size: 0.85rem;
    }

    /* ─── Breadcrumb ───────────────────────── */
    .breadcrumb-section {
        padding: 5rem 0 var(--space-sm);
    }

    .breadcrumb {
        font-size: 0.7rem;
    }

    /* ─── Artisan grid ─────────────────────── */
    .artisan-grid {
        grid-template-columns: 1fr;
    }

    /* ─── Fabric grid ──────────────────────── */
    .fabric-grid {
        grid-template-columns: 1fr;
    }

    /* ─── Size table ───────────────────────── */
    .size-table {
        min-width: 450px;
    }

    .size-table th,
    .size-table td {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    /* ─── Policy pages ─────────────────────── */
    .policy-content h2 {
        font-size: 1.1rem;
    }

    .policy-content p,
    .policy-content li {
        font-size: 0.85rem;
    }

    /* ─── Founder section ──────────────────── */
    .founder-quote {
        padding: var(--space-md);
    }

    .founder-quote blockquote {
        font-size: 0.95rem;
    }

    /* ─── WhatsApp float ───────────────────── */
    .whatsapp-float {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        bottom: 1rem;
        right: 1rem;
    }

    /* ─── Toast ─────────────────────────────── */
    .toast {
        top: 4.5rem;
        right: 1rem;
        left: 1rem;
        text-align: center;
        font-size: 0.8rem;
    }

    /* ─── Shop filters mobile ──────────────── */
    .shop-header {
        padding: var(--space-sm) 0 var(--space-md);
    }

    .shop-header__title {
        font-size: 1.5rem;
    }

    .shop-mobile-controls {
        display: flex !important;
    }

    .filter-select--mobile {
        font-size: 0.8rem;
    }

    /* ─── Order summary mobile ─────────────── */
    .order-summary {
        position: static;
        margin-top: var(--space-lg);
    }
}

/* ─── Extra small screens (iPhone SE etc.) ─── */
@media (max-width: 375px) {
    .nav__logo-img {
        height: 38px;
    }

    .hero__title {
        font-size: 1.8rem;
    }

    .products__grid {
        grid-template-columns: 1fr;
    }

    .eco-strip__item {
        flex: 0 0 45%;
    }

    .btn {
        padding: 0.7rem 1.5rem;
        font-size: 0.78rem;
    }

    .section__title {
        font-size: 1.3rem;
    }
}

/* ─── Tablet fixes ─────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    .products__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-split {
        gap: var(--space-xl);
    }

    .prebook-cta__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Blog Magazine Grid */
.blog-magazine-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: start;
}

@media (max-width: 992px) {
    .blog-magazine-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .blog-magazine-gallery {
        order: -1;
        max-width: 500px;
        margin: 0 auto;
    }
}

.article-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.article-body h3 {
    font-family: var(--font-secondary);
    color: #111;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-body p {
    margin-bottom: 1.5rem;
}

/* ──────────────────────────────────────────
   PREMIUM CHECKOUT REDESIGN
   ────────────────────────────────────────── */

.checkout-progress {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    gap: 2rem;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    opacity: 0.3;
    transition: all 0.4s ease;
}

.progress-step.active {
    opacity: 1;
}

.step-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e0e0e0;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #e0e0e0;
    transition: all 0.4s ease;
}

.progress-step.active .step-dot {
    background: var(--clay);
    box-shadow: 0 0 0 2px var(--clay);
}

.progress-line {
    flex: 1;
    height: 1px;
    background: #e0e0e0;
    margin-top: 7px;
    max-width: 80px;
}

.step-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--text-dark);
}

.checkout-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 24px;
    padding: 2.2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkout-card.inactive {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}

.checkout-card__header {
    padding: 1.8rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    transition: background 0.3s ease;
}

.checkout-card.completed .checkout-card__header {
    background: #fdfaf8;
    cursor: pointer;
}

.checkout-card.completed .checkout-card__header:hover {
    background: #f9f2ed;
}

.checkout-card__title {
    font-size: 1.1rem;
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.checkout-card__body {
    padding: 0 2rem 2rem 2rem;
    border-top: 1px solid #f9f9f9;
    padding-top: 2rem;
}

.edit-step {
    background: var(--warm-white);
    border: 1px solid var(--clay);
    color: var(--clay);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.2s;
}

.edit-step:hover {
    background: var(--clay);
    color: #fff;
}

/* Payment Grid */
.payment-methods-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.payment-card {
    border: 1.5px solid #eee;
    border-radius: 15px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
}

.payment-card:hover {
    border-color: var(--clay);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.payment-card.active {
    border-color: var(--clay);
    background: #fdf6f0;
    box-shadow: 0 4px 12px rgba(176, 137, 104, 0.1);
}

.payment-card input {
    display: none;
}

.payment-card__content {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.payment-card__content i {
    font-size: 1.5rem;
    color: var(--clay);
    width: 30px;
    text-align: center;
}

.payment-card__content span {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1rem;
}

/* Sticky Summary Fix */
.checkout-summary {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.order-summary {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 24px;
    padding: 2.2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

@media (max-width: 991px) {
    .checkout-progress {
        display: none;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .checkout-summary {
        position: static;
    }
}

/* ──────────────────────────────────────────
   ELITE CUSTOMER DASHBOARD
   ────────────────────────────────────────── */

.account-dashboard {
    background: #fdfaf8;
    min-height: 90vh;
}

.dashboard-title {
    font-family: var(--font-heading);
    color: var(--clay);
    margin-bottom: 2.5rem;
    font-size: 2.5rem;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    align-items: start;
}

/* Sidebar */
.dashboard-sidebar {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.dashboard-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f9f9f9;
}

.user-avatar {
    font-size: 2.5rem;
    color: var(--clay);
}

.user-info h4 {
    font-family: var(--font-heading);
    margin: 0;
    color: var(--text-dark);
}

.user-info p {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dash-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-body);
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none;
}

.dash-nav-link:hover,
.dash-nav-link.active {
    background: var(--cream-light);
    color: var(--clay);
}

.dash-nav-link i {
    width: 20px;
    font-size: 1.1rem;
}

.dash-nav-divider {
    height: 1px;
    background: #f5f5f5;
    margin: 1rem 0;
}

.dash-nav-link.logout {
    color: var(--error);
}

/* Content Area */
.dash-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.03);
}

.dash-card__header {
    padding: 2rem;
    border-bottom: 1px solid #f9f9f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dash-card__header h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--text-dark);
}

.dash-card__body {
    padding: 2rem;
}

/* Profile Meta */
.profile-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.meta-item label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
    color: #999;
    margin-bottom: 0.5rem;
}

.meta-item p {
    font-size: 1.1rem;
    color: var(--text-dark);
    font-weight: 600;
}

/* Address Cards */
#addressContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.address-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    padding: 1.5rem;
    transition: 0.3s;
}

.address-card:hover {
    border-color: var(--clay);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.checkout-card__summary {
    padding: 1rem 0;
    border-top: 1px dashed rgba(176, 137, 104, 0.2);
    margin-top: 0.5rem;
    color: var(--text-light);
    font-size: 0.95rem;
}

.checkout-card__summary strong {
    color: var(--clay);
    font-weight: 600;
}

.checkout-card.completed {
    border-color: var(--eco-green);
    background: rgba(107, 142, 107, 0.02);
}

.address-card__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.address-card__header h4 {
    margin: 0;
    color: var(--text-dark);
}

.address-card__content p {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0;
}

.address-card__content .phone {
    margin-top: 10px;
    font-weight: 600;
}

.address-card__actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f9f9f9;
}

.text-danger {
    color: var(--error);
    background: none;
    border: none;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
}

@media (max-width: 991px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .profile-meta {
        grid-template-columns: 1fr;
    }

    #addressContainer {
        grid-template-columns: 1fr;
    }
}

/* ──────────────────────────────────────────
   COMPREHENSIVE MOBILE ENHANCEMENTS
   ────────────────────────────────────────── */
/* ──────────────────────────────────────────
   ELITE MOBILE UX REFINEMENTS (768px & below)
   ────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --space-section: 2.5rem;
    }

    /* Container Protection */
    .container {
        padding: 0 20px !important;
    }

    /* Glassmorphism Header for Mobile */
    .header {
        padding: 0.4rem 0 !important;
        background: rgba(250, 249, 246, 0.9) !important;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(176, 137, 104, 0.1);
    }

    .nav__logo-img {
        height: 50px !important;
    }

    /* Efficient Centered Product Grid */
    .products__grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 0 !important;
        justify-content: center !important; /* Centers grid if items < columns */
    }

    /* Single product center fix */
    @media (max-width: 480px) {
        .products__grid {
             grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
             justify-content: center !important;
        }
    }

    .product-card {
        flex: none !important;
        width: 100% !important;
        max-width: 320px; /* Prevent over-stretching */
        margin: 0 auto; /* Center individual cards */
        border-radius: 12px !important;
    }

    .product-card__name {
        font-size: 0.85rem !important;
        margin-top: 8px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal !important;
        height: 2.8em;
    }

    /* Premium Touch Targets (44px min height) */
    .btn, 
    .nav__icon,
    input, 
    select, 
    textarea {
        min-height: 44px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Footer Centering Polish */
    .footer__grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 2.5rem !important;
    }

    .footer__col {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer__social {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .footer__social-link {
        margin: 0 8px !important;
    }

    /* Typography Polish */
    .section__title {
        font-size: 1.75rem !important;
        letter-spacing: -0.02em !important;
    }

    .hero__title {
        font-size: 2.4rem !important;
        line-height: 1.1 !important;
    }

    /* Table Horizontal Scroll Hint */
    .table-responsive {
        position: relative;
    }

    .table-responsive::after {
        content: '← Swipe to view details →';
        display: block;
        text-align: center;
        font-size: 10px;
        color: var(--clay);
        opacity: 0.6;
        margin-top: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Dashboard & Checkout Card Polish */
    .admin-card, .dash-card, .checkout-card {
        border-radius: 16px !important;
        padding: 15px !important;
        box-shadow: 0 4px 15px rgba(42, 26, 26, 0.04) !important;
    }

    /* Navigation Menu Polish */
    .nav__links {
        background: var(--warm-white) !important;
        padding-top: 100px !important;
    }
}

@media (max-width: 480px) {
    /* Tighter spacing for very small devices */
    .products__grid {
        gap: 10px !important;
    }
    
    .hero__content {
        padding: 0 15px !important;
    }

    .hero__ctas .btn {
        width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   2026-05-10 — Mobile + UX pass.
   Sitewide horizontal-scroll guard, founder strip, swipeable
   product gallery, mobile shop grid, founder-photo crop fix.
   Append-only so older rules above stay authoritative. */
/* ═══════════════════════════════════════════════════════════ */

/* Block any rogue child from causing horizontal page scroll on
   mobile. Individual carousels can opt back in with their own
   overflow-x:auto on a contained element. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ─── Founder strip on homepage ─── */
.founder-strip {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-2xl, 3rem);
    width: 100%;
    min-height: 30vh;
    background: linear-gradient(180deg, #FAF9F6 0%, #FDEBC7 100%);
    padding: var(--space-2xl, 3rem) max(var(--space-2xl, 3rem), 6vw);
    align-items: center;
}
.founder-strip__photo {
    overflow: hidden;
    border-radius: 12px;
}
.founder-strip__photo img {
    width: 100%;
    max-height: 38vh;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.founder-strip__label {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.75rem;
    color: var(--clay, #B08968);
    font-weight: 700;
    margin-bottom: 0.6rem;
}
.founder-strip__title {
    font-family: var(--font-heading, 'Playfair Display'), serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin: 0 0 0.8rem;
    color: var(--text-dark, #2a2a2a);
    line-height: 1.2;
}
.founder-strip__text {
    color: var(--text-body, #555);
    line-height: 1.7;
    margin: 0 0 1.2rem;
    max-width: 60ch;
}

@media (max-width: 768px) {
    .founder-strip {
        grid-template-columns: 1fr;
        text-align: center;
        padding: var(--space-xl, 2rem) var(--space-md, 1rem);
        min-height: auto;
        gap: var(--space-md, 1rem);
    }
    .founder-strip__photo img {
        max-height: 30vh;
        object-position: center 20%;
    }
    .founder-strip__title {
        font-size: 1.4rem;
    }
    .founder-strip__text {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ─── Mobile shop grid: was cropping cards to the right ─── */
@media (max-width: 640px) {
    .products__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md, 0.75rem);
        padding: 0 var(--space-md, 0.75rem);
        width: 100%;
        box-sizing: border-box;
    }
    .product-card {
        min-width: 0; /* allow shrink inside its column */
    }
    .product-card__name {
        font-size: 0.9rem;
        line-height: 1.3;
    }
}

/* ─── Product gallery: swipeable on touch + cursor-pan-y ─── */
.product-gallery__main {
    touch-action: pan-y;
    user-select: none;
}
.product-gallery__main.is-user-controlled .product-card__img {
    /* When the user has swiped or clicked, suppress the auto
       fade transitions so they can inspect the chosen image. */
    transition: none !important;
    animation: none !important;
}

/* ─── About-page founder photo: was cropping on mobile ─── */
@media (max-width: 768px) {
    .founder-section .about-split__image,
    .about-split .founder-photo {
        width: 100%;
    }
    .founder-section .founder-photo {
        object-fit: cover;
        object-position: center 20%;
        max-height: 50vh;
        width: 100%;
        height: auto;
        display: block;
        border-radius: 12px;
    }
}

/* ─── Cart drawer: red trash icon (visual cue for delete) ─── */
.cart-item__remove {
    color: #d32f2f !important;
    transition: transform 0.15s ease;
}
.cart-item__remove:hover {
    transform: scale(1.15);
}
.cart-item__title-link {
    color: inherit;
    text-decoration: none;
}
.cart-item__title-link:hover .cart-item__name {
    color: var(--clay, #B08968);
}
.cart-item__image-link {
    display: block;
    text-decoration: none;
}

/* ─── "Show more / Next" buttons must always sit visible on mobile ─── */
@media (max-width: 768px) {
    .section__cta,
    .pagination {
        position: relative;
        z-index: 5;
        padding-bottom: 2rem;
    }
    .section__cta .btn {
        display: inline-flex;
        white-space: nowrap;
    }
}

/* ═══════════════════════════════════════════════════════════
   2026-05-10 v2 — Mobile STRICT pass.
   No more horizontal-scroll surprises, no more iOS zoom-on-focus,
   no more cropped product images. Last-rule-wins so put this at
   end of file. */
/* ═══════════════════════════════════════════════════════════ */

/* iOS / Safari auto-zooms when an input has font-size < 16px and
   the user taps it. That zoom is what's making mobile pages feel
   "stuck zoomed in" — it never zooms out cleanly afterwards.
   Forcing every form control to 16px stops that behaviour entirely. */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Lock viewport. Anything that wants to scroll horizontally
   has to declare its own contained .scroll-x — page chrome
   never does. */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        -webkit-text-size-adjust: 100%;
    }
    /* Catch the most common offenders. Every direct child of <main>
       and <section> stays inside the viewport. */
    main,
    main > *,
    section,
    .container,
    .section {
        max-width: 100vw;
        box-sizing: border-box;
    }
}

/* ─── Size Guide MODAL (product page popup) — never scrolls
       sideways on mobile. Table fits modal width or shrinks. */
@media (max-width: 768px) {
    .modal__content {
        width: calc(100vw - 24px) !important;
        max-width: 420px;
        max-height: 90vh;
        margin: 0 auto;
        padding: 1.25rem 1rem !important;
        box-sizing: border-box;
    }
    .modal__body {
        overflow-x: hidden !important;
        padding: 0 !important;
    }
    .size-table {
        width: 100% !important;
        table-layout: fixed;
        font-size: 0.85rem;
        border-collapse: collapse;
    }
    .size-table th,
    .size-table td {
        padding: 0.55rem 0.25rem;
        text-align: center;
        word-break: break-word;
        font-size: 0.85rem;
    }
    .size-table th {
        font-size: 0.72rem;
        letter-spacing: 0.5px;
    }
    /* "How to measure" diagram — keep visible without overflow */
    .size-howto__svg svg,
    .size-howto svg {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

/* ─── /size-guide page table — same constraint */
@media (max-width: 768px) {
    .size-table-v2 {
        width: 100% !important;
        table-layout: fixed;
        font-size: 0.85rem;
    }
    .size-table-v2 th,
    .size-table-v2 td {
        padding: 0.55rem 0.3rem !important;
        text-align: center;
        font-size: 0.85rem;
    }
    .size-table-card {
        overflow-x: hidden !important;
    }
}

/* ─── Shop grid — STRICT no-overflow, products compress instead */
@media (max-width: 640px) {
    .products__grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 0 12px !important;
        width: 100% !important;
        max-width: 100vw;
        box-sizing: border-box;
    }
    .product-card {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .product-card__image {
        width: 100% !important;
        aspect-ratio: 3/4;
    }
    .product-card__img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
    .product-card__name {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    .product-card__price {
        font-size: 0.9rem;
    }
}
@media (max-width: 380px) {
    .products__grid {
        gap: 8px !important;
        padding: 0 8px !important;
    }
    .product-card__name { font-size: 0.78rem; }
}

/* ─── Shop pagination — buttons must always be visible on mobile */
.shop-pagination {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem 3rem !important;
    width: 100%;
    box-sizing: border-box;
}
.shop-pagination .btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto;
}
.shop-pagination__info {
    flex: 0 0 100%;
    text-align: center;
    order: -1;
    color: var(--text-light, #777);
    font-size: 0.85rem;
}

/* ─── Product gallery on mobile — main image fills its column.
       Was getting clipped because the desktop flex:1 row was
       inheriting on mobile too. */
@media (max-width: 768px) {
    .product-page__layout,
    .product-detail__inner,
    .product-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem;
    }
    .product-gallery,
    .product-gallery__main,
    .product-info {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }
    .product-gallery__main {
        aspect-ratio: 3/4;
        height: auto !important;
        max-height: 75vh;
    }
    .product-gallery__main img,
    .product-gallery__img,
    #mainImage {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top;
    }
    .product-gallery__thumbs {
        overflow-x: auto;
        gap: 0.5rem;
        padding: 0.5rem 0;
        scrollbar-width: thin;
    }
    .product-gallery__thumb {
        flex: 0 0 auto;
        width: 60px;
        height: 80px;
    }
}

/* ─── Founder image on /our-story (mobile) — show full image
       not a cropped sliver. Was object-position:center 20% which
       still cut faces; switch to contain when small. */
@media (max-width: 768px) {
    .about-split__image {
        width: 100% !important;
        max-width: 100% !important;
    }
    .about-split__image img,
    .founder-photo {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block;
        border-radius: 12px;
    }
    /* Founder strip image on homepage — same treatment so the
       teaser photo on the home page doesn't crop her face. */
    .founder-strip__photo {
        width: 100%;
    }
    .founder-strip__photo img {
        max-height: 38vh !important;
        object-fit: contain !important;
        object-position: center center !important;
        background: #FAF9F6;
    }
}

/* Reduce top/bottom dead-space between sections on mobile. The
   "many spaces" in the screenshots come from desktop section
   padding inherited at small widths. */
@media (max-width: 768px) {
    .section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .section__title {
        margin-bottom: 0.4rem !important;
    }
    .section__subtitle {
        margin-bottom: 1.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   2026-05-11 v5 — Founder image: DEFINITIVE fix.
   ROOT CAUSE: .about-split__image has aspect-ratio:4/5 (line ~4498)
   which constrains the parent container. Even with object-fit:contain
   on the img, the parent box clips at 4:5. Fix: override aspect-ratio
   on the founder section's parent container on mobile.
   ═══════════════════════════════════════════════════════════ */

/* Homepage founder strip — desktop: fill space, keep face at top */
.founder-strip__photo {
    width: 100%;
    background: #FAF9F6;
    border-radius: 12px;
    overflow: hidden;
}
.founder-strip__photo img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    max-height: 450px;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* /our-story founder photo — override aspect-ratio for founder section */
.founder-section .about-split__image {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important; /* Kill the 4/5 constraint for founder */
    overflow: visible !important;
}
.founder-section .about-split__image img,
.founder-section .founder-photo,
img.founder-photo,
.parallax-img.founder-photo {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block;
    background: #FAF9F6;
    border-radius: 12px;
}

/* Mobile: full image, zero cropping, zero constraints */
@media (max-width: 768px) {
    .founder-strip__photo {
        aspect-ratio: auto !important;
    }
    .founder-strip__photo img {
        min-height: unset;
        max-height: none;
        height: auto !important;
        object-fit: contain;
        object-position: center center;
    }
    .founder-section .about-split__image {
        aspect-ratio: auto !important;
        height: auto !important;
        max-height: none !important;
    }
    .founder-section .about-split__image img,
    .founder-section .founder-photo,
    img.founder-photo,
    .parallax-img.founder-photo {
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}