/* ============================================================
   ZADA MASALA — Homepage Stylesheet
   Compatible with WoodMart Theme (content area only)
   Do NOT rename CSS classes — they are referenced in script.js
   ============================================================ */

/* ── 1. CSS Variables ─────────────────────────────────────── */
#homepage-content {
    --gold: rgb(249, 82, 40);
    --gold-dark: #D9431E;
    --gold-light: rgba(249, 82, 40, 0.15);
    --brown-dark: #1A0D00;
    --brown: #2D1F12;
    --brown-mid: #8B3A00;
    --cream: #F5EDD8;
    --cream-light: #FAF5EC;
    --cream-card: #F5E8C8;
    --red-accent: #96131E;
    --dark-card: #1A120B;
    --muted: #6B5A48;
    --muted-light: rgba(107, 90, 72, 0.5);
    --olive: #83B735;
    --olive-dark: #5F8F24;
    --olive-soft: rgba(131, 183, 53, 0.12);
    --olive-line: rgba(131, 183, 53, 0.24);
    --whatsapp: #83B735;
    --border-light: rgba(196, 168, 130, 0.3);
    --white: #ffffff;
    --font-serif: 'Sora', 'Inter', system-ui, sans-serif;
    --font-sans: 'Manrope', 'Inter', system-ui, sans-serif;
    --radius-card: 1.75rem;
    --radius-pill: 999px;
    --transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --page-gutter: clamp(1rem, 3vw, 4rem);
}

html.zm-modal-open,
html.zm-modal-open body {
    overflow: hidden;
}

html.zm-modal-open body.zm-page-booting #homepage-content,
html.zm-modal-open body.zm-page-ready #homepage-content {
    transform: none !important;
}

/* ── 2. Base Reset (Scoped to #homepage-content to prevent WoodMart theme conflicts) ── */
#homepage-content,
#homepage-content *,
#homepage-content *::before,
#homepage-content *::after {
    box-sizing: border-box;
}

#homepage-content {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    color: var(--brown);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    width: 100%;
}

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

#homepage-content a {
    text-decoration: none;
    color: inherit;
}

#homepage-content button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

#homepage-content ul {
    list-style: none;
}

#homepage-content blockquote {
    quotes: none;
}

/* ── 3. Utilities ─────────────────────────────────────────── */
#homepage-content .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#homepage-content .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: var(--page-gutter);
}

#homepage-content .no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#homepage-content .no-scrollbar::-webkit-scrollbar {
    display: none;
}

#homepage-content .zm-horizontal-progress {
    width: clamp(11rem, 34vw, 24rem) !important;
    height: 4px !important;
    margin: 1rem auto 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(26, 13, 0, 0.2);
}

#homepage-content .zm-horizontal-progress[hidden] {
    display: none;
}

#homepage-content .zm-horizontal-progress__value {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 100ms linear;
    will-change: transform;
}

#homepage-content .flash-sale .zm-horizontal-progress {
    background: rgba(255, 247, 234, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    #homepage-content .zm-horizontal-progress__value {
        transition: none;
    }
}

/* Section headings */
#homepage-content .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

#homepage-content .section-header__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

#homepage-content .eyebrow {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#homepage-content .eyebrow--gold {
    color: var(--gold);
}

#homepage-content .eyebrow--gold-dark {
    color: var(--brown-mid);
}

#homepage-content .eyebrow--red {
    color: var(--red-accent);
}

#homepage-content .eyebrow-line {
    display: block;
    width: 2.5rem;
    height: 1px;
    background: var(--gold);
}

#homepage-content .eyebrow-line--short {
    display: block;
    width: 2.5rem;
    height: 1px;
    background: var(--gold);
}

#homepage-content .section-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--brown-dark);
}

#homepage-content .section-title--dark {
    color: var(--brown);
}

#homepage-content .section-title__italic {
    font-style: italic;
    font-weight: 400;
    color: var(--brown-mid);
}

#homepage-content .section-subtitle {
    font-size: 1.0625rem;
    font-weight: 300;
    color: var(--muted);
    max-width: 32rem;
    margin: 1rem auto 0;
    line-height: 1.6;
}

/* Scroll-reveal base */
#homepage-content .reveal,
#homepage-content .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
    transition:
        opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--motion-delay, 0ms);
}

#homepage-content .reveal.visible,
#homepage-content .motion-reveal.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

#homepage-content .motion-reveal--fade-in {
    transform: none;
}

#homepage-content .motion-reveal--slide-up {
    transform: translate3d(0, 2rem, 0);
}

#homepage-content .reveal-delay-1.visible {
    transition-delay: 0.1s;
}

#homepage-content .reveal-delay-2.visible {
    transition-delay: 0.2s;
}

#homepage-content .reveal-delay-3.visible {
    transition-delay: 0.3s;
}

#homepage-content .reveal-delay-4.visible {
    transition-delay: 0.4s;
}

#homepage-content .reveal-delay-5.visible {
    transition-delay: 0.5s;
}

/* Premium motion layer */
body.zm-page-booting #homepage-content {
    opacity: 0;
    transform: translate3d(0, 0.5rem, 0);
}

body.zm-page-ready #homepage-content {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

#homepage-content section {
    scroll-margin-top: 5.5rem;
}

#homepage-content .hero__media-bg {
    position: absolute;
    inset: -4%;
    background-size: cover;
    background-position: center 60%;
    transform: translate3d(0, var(--hero-parallax-y, 0px), 0) scale(1.04);
    transform-origin: center;
    pointer-events: none;
    will-change: transform;
}

#homepage-content .hero__slide.is-active .hero__video {
    transform: translate3d(0, var(--hero-parallax-y, 0px), 0) scale(1.04);
}

#homepage-content .hero__video {
    transition: transform 0.18s linear;
    will-change: transform;
}

#homepage-content .essence-hero__stage::before,
#homepage-content .essence-hero__stage::after {
    animation: zmFloatCentered 8s ease-in-out infinite;
}

#homepage-content .essence-hero__stage::after {
    animation-delay: -2.5s;
}

@keyframes zmFloatCentered {
    0%,
    100% {
        transform: translate3d(-50%, -50%, 0);
    }

    50% {
        transform: translate3d(-50%, calc(-50% - 0.35rem), 0);
    }
}

/* Scroll arrows (reused across sections) */
#homepage-content .scroll-arrows {
    display: flex;
    gap: 0.75rem;
}

#homepage-content .scroll-arrow {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brown-dark);
    transition: background var(--transition), color var(--transition);
}

#homepage-content .scroll-arrow svg {
    width: 1rem;
    height: 1rem;
    opacity: 1;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#homepage-content .scroll-arrow:hover {
    background: var(--brown-dark);
    color: var(--cream);
    border-color: var(--brown-dark);
}

#homepage-content .scroll-arrow:disabled,
#homepage-content .scroll-arrow[aria-disabled="true"] {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}

/* ── 4. Button System ─────────────────────────────────────── */
#homepage-content .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem 1.75rem;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transform: translateZ(0);
}

#homepage-content .btn::after {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.28) 46%, transparent 72%);
    transform: translate3d(-120%, 0, 0);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

#homepage-content .btn svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

#homepage-content .btn:hover {
    transform: translateY(-2px);
}

#homepage-content .btn:hover::after,
#homepage-content .btn:focus-visible::after {
    transform: translate3d(120%, 0, 0);
}

#homepage-content .btn:focus-visible,
#homepage-content .scroll-arrow:focus-visible,
#homepage-content .hero__nav-btn:focus-visible {
    outline: 2px solid rgba(249, 82, 40, 0.78);
    outline-offset: 3px;
}

#homepage-content .btn:active {
    transform: translateY(0);
}

#homepage-content .motion-bg-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transform-origin: center;
    opacity: 1;
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    pointer-events: none;
}

#homepage-content .cat-card.is-active .motion-bg-media {
    opacity: 0.2;
    filter: saturate(0.82) contrast(0.92);
}

#homepage-content .cat-card:hover .motion-bg-media,
#homepage-content .product-card:hover .motion-bg-media,
#homepage-content .search-modal__card:hover .motion-bg-media {
    transform: scale(1.06);
}

#homepage-content .cat-card,
#homepage-content .product-card,
#homepage-content .grid-card,
#homepage-content .bundle-card,
#homepage-content .feature-card,
#homepage-content .review-card,
#homepage-content .flash-card {
    backface-visibility: hidden;
    transform: translateZ(0);
}

#homepage-content .product-card__svg-icon,
#homepage-content .grid-card__svg-icon {
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s ease;
}

#homepage-content .product-card:hover .product-card__svg-icon,
#homepage-content .grid-card:hover .grid-card__svg-icon,
#homepage-content .flash-card:hover .grid-card__svg-icon {
    transform: scale(1.06);
}

#homepage-content .hero__stat-value {
    font-variant-numeric: tabular-nums;
}

#homepage-content .btn--gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--white);
    box-shadow: 0 4px 24px rgba(249, 82, 40, 0.4);
}

#homepage-content .btn--gold:hover {
    box-shadow: 0 8px 32px rgba(249, 82, 40, 0.5);
}

#homepage-content .btn--outline-light {
    background: transparent;
    color: rgba(245, 237, 216, 0.85);
    border: 1px solid rgba(245, 237, 216, 0.22);
}

#homepage-content .btn--outline-dark {
    background: transparent;
    color: var(--brown-dark);
    border: 2px solid var(--brown-dark);
}

#homepage-content .btn--outline-dark:hover {
    background: var(--brown-dark);
    color: var(--cream);
}

#homepage-content .btn--outline-dark.btn--sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
}

#homepage-content .btn--whatsapp {
    background: linear-gradient(135deg, #83B735 0%, #5F8F24 100%);
    color: var(--white);
    box-shadow: 0 4px 20px rgba(131, 183, 53, 0.35);
}

#homepage-content .btn--lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

#homepage-content .btn--white-full {
    background: var(--white);
    color: var(--brown-dark);
    width: 100%;
    justify-content: center;
}

#homepage-content .btn--white-full:hover {
    background: var(--gold);
    color: var(--white);
}

#homepage-content .btn--white-outline-full {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    width: 100%;
    justify-content: center;
}

#homepage-content .btn--white-outline-full:hover {
    background: var(--gold);
    border-color: var(--gold);
}

#homepage-content .btn--gold-full {
    background: var(--gold);
    color: var(--white);
    width: 100%;
    justify-content: center;
}

#homepage-content .btn--gold-full:hover {
    background: var(--gold-dark);
}

#homepage-content .btn__icon {
    width: 0.875rem;
    height: 0.875rem;
}

#homepage-content .btn__arrow {
    width: 0.875rem;
    height: 0.875rem;
}

/* Add-to-cart small button */
#homepage-content .btn-add {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--brown-dark);
    color: var(--cream);
    cursor: pointer;
    border: none;
    transition: background var(--transition);
}

#homepage-content .btn-add svg {
    width: 0.75rem;
    height: 0.75rem;
}

#homepage-content .btn-add:hover {
    background: var(--gold);
}

/* ── 5. Hero ──────────────────────────────────────────────── */
#homepage-content .hero {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 560px;
    max-height: none;
    background: #070201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@supports (height: 100dvh) {
    #homepage-content .hero {
        height: 100dvh;
    }
}

#homepage-content .hero__slides {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #070201;
    overflow: hidden;
    isolation: isolate;
}

#homepage-content .hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 60%;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    transition: opacity 1.1s ease, visibility 0s linear 1.1s;
    pointer-events: none;
    overflow: hidden;
}

#homepage-content .hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition-delay: 0s;
    pointer-events: auto;
}

#homepage-content .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#homepage-content .hero__overlay {
    position: absolute;
    inset: 0;
}

#homepage-content .hero__overlay--slide1 {
    background: linear-gradient(105deg,
            rgba(7, 2, 1, 0.94) 0%,
            rgba(14, 4, 4, 0.84) 35%,
            rgba(42, 7, 12, 0.48) 62%,
            rgba(68, 9, 18, 0.16) 100%);
}

#homepage-content .hero__overlay--slide2 {
    background: linear-gradient(100deg,
            rgba(6, 2, 1, 0.97) 0%,
            rgba(14, 4, 4, 0.88) 30%,
            rgba(42, 7, 12, 0.58) 55%,
            rgba(76, 11, 20, 0.24) 75%,
            rgba(76, 11, 20, 0.10) 100%);
}

#homepage-content .hero__overlay--urdu {
    background:
        radial-gradient(circle at 80% 38%, rgba(249, 82, 40, 0.12) 0%, transparent 32%),
        linear-gradient(100deg,
            rgba(6, 1, 1, 0.96) 0%,
            rgba(14, 3, 4, 0.88) 34%,
            rgba(45, 6, 12, 0.62) 62%,
            rgba(75, 10, 18, 0.24) 100%);
}

#homepage-content .hero__vignette {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(7, 2, 1, 0.95) 0%, rgba(14, 4, 4, 0.58) 50%, transparent 100%);
    pointer-events: none;
}

#homepage-content .hero__content {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 2.25rem var(--page-gutter) 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    margin: 0;
}

/* Eyebrow */
#homepage-content .hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

#homepage-content .hero__eyebrow-text {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

#homepage-content .hero__eyebrow-divider {
    display: block;
    width: 2rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(249, 82, 40, 0.55), rgba(131, 183, 53, 0.42));
}

#homepage-content .hero__eyebrow-sub {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245, 237, 216, 0.38);
    display: none;
}

@media (min-width: 640px) {
    #homepage-content .hero__eyebrow-sub {
        display: inline;
    }
}

/* Headline */
#homepage-content .hero__headline {
    margin-bottom: 0.75rem;
}

#homepage-content .hero__line {
    display: block;
    font-family: var(--font-serif);
    line-height: 0.92;
    font-size: clamp(2.4rem, 5.5vw, 6.2rem);
}

#homepage-content .hero__line--light {
    font-weight: 300;
    color: #F5EDD8;
}

#homepage-content .hero__line--gold {
    color: var(--gold);
    text-shadow: 0 0 60px rgba(249, 82, 40, 0.3);
}

#homepage-content .hero__line--italic {
    font-style: italic;
    font-weight: 700;
}

/* Subheadline (slide 1) */
#homepage-content .hero__subheadline {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 600;
    color: rgba(245, 237, 216, 0.75);
    margin-bottom: 0.5rem;
}

/* Description */
#homepage-content .hero__desc {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(0.8125rem, 1.4vw, 1rem);
    color: rgba(245, 237, 216, 0.55);
    line-height: 1.6;
    max-width: 26rem;
    margin-bottom: 1.125rem;
}

/* CTA buttons */
#homepage-content .hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

#homepage-content .hero__ctas .btn--whatsapp {
    background: var(--olive);
    box-shadow: 0 4px 20px rgba(131, 183, 53, 0.36);
}

#homepage-content .hero__content--essence {
    position: relative;
    justify-content: center;
    align-items: center;
    padding-bottom: 7.9rem;
}

#homepage-content .essence-hero {
    position: static;
    width: min(100%, 76rem);
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 4.75rem;
}

#homepage-content .essence-hero__stage {
    position: relative;
    isolation: isolate;
    width: min(100%, 66rem);
    display: grid;
    justify-items: center;
    text-align: center;
    padding: clamp(1.25rem, 2.8vw, 2.45rem) clamp(1rem, 4.5vw, 4rem);
    border-top: 1px solid rgba(249, 82, 40, 0.24);
    border-bottom: 1px solid rgba(245, 237, 216, 0.12);
}

#homepage-content .essence-hero__stage::before,
#homepage-content .essence-hero__stage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
}

#homepage-content .essence-hero__stage::before {
    width: clamp(13rem, 28vw, 23rem);
    border: 1px solid rgba(249, 82, 40, 0.2);
}

#homepage-content .essence-hero__stage::after {
    width: clamp(8rem, 16vw, 13rem);
    border: 1px solid rgba(245, 237, 216, 0.1);
}

#homepage-content .essence-hero__meta {
    display: grid;
    grid-template-columns: auto minmax(3.5rem, 8rem) auto;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 1.05rem;
}

#homepage-content .essence-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--gold);
    font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", Georgia, serif;
    font-size: 0.76rem;
    line-height: 1.7;
    white-space: nowrap;
}

#homepage-content .essence-hero__tag svg {
    width: 1rem;
    height: 1rem;
}

#homepage-content .essence-hero__line {
    display: block;
    height: 1px;
    background: linear-gradient(to left, rgba(249, 82, 40, 0.78), rgba(249, 82, 40, 0.05));
}

#homepage-content .essence-hero__since {
    color: rgba(245, 237, 216, 0.42);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

#homepage-content .essence-hero__title,
#homepage-content .essence-hero__lead,
#homepage-content .essence-hero__support,
#homepage-content .essence-hero__journey-label,
#homepage-content .essence-promise__text {
    font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", Georgia, serif;
}

#homepage-content .essence-hero__title,
#homepage-content .essence-hero__lead,
#homepage-content .essence-hero__support {
    margin: 0;
    text-shadow: 0 18px 48px rgba(0, 0, 0, 0.58);
}

#homepage-content .essence-hero__title {
    color: var(--gold);
    font-size: clamp(2.25rem, 5vw, 4.65rem);
    font-weight: 700;
    line-height: 1.06;
}

#homepage-content .essence-hero__lead {
    max-width: 38rem;
    margin-top: 0.55rem;
    color: #F5EDD8;
    font-size: clamp(0.84rem, 1.45vw, 1.42rem);
    font-weight: 600;
    line-height: 1.78;
}

#homepage-content .essence-hero__ornament {
    display: grid;
    grid-template-columns: minmax(2.5rem, 5.2rem) 0.34rem minmax(2.5rem, 5.2rem);
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0.35rem;
}

#homepage-content .essence-hero__ornament span {
    display: block;
    height: 1px;
    background: rgba(249, 82, 40, 0.36);
}

#homepage-content .essence-hero__ornament span:nth-child(2) {
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 50%;
    background: var(--gold);
}

#homepage-content .essence-hero__support {
    max-width: 30rem;
    color: rgba(245, 237, 216, 0.74);
    font-size: clamp(0.7rem, 0.84vw, 0.84rem);
    line-height: 1.68;
}

#homepage-content .essence-hero__journey {
    width: min(100%, 54rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 0.62rem 0.8rem;
    margin-top: clamp(0.7rem, 1.35vw, 1.1rem);
    background: linear-gradient(90deg, rgba(8, 2, 2, 0), rgba(8, 2, 2, 0.46) 18%, rgba(69, 10, 18, 0.22) 50%, rgba(8, 2, 2, 0.46) 82%, rgba(8, 2, 2, 0));
    border-top: 1px solid rgba(249, 82, 40, 0.18);
    border-bottom: 1px solid rgba(245, 237, 216, 0.1);
    backdrop-filter: blur(8px);
}

#homepage-content .essence-hero__journey-label {
    color: var(--gold);
    font-size: 0.72rem;
    line-height: 1.6;
    padding-left: 1rem;
    border-left: 1px solid rgba(249, 82, 40, 0.2);
    white-space: nowrap;
}

#homepage-content .essence-hero__promise-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 0.4rem;
}

#homepage-content .essence-promise {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.35rem 0.55rem;
    color: rgba(245, 237, 216, 0.88);
}

#homepage-content .essence-promise__icon {
    width: 1.62rem;
    height: 1.62rem;
    display: inline-grid;
    place-items: center;
    color: var(--gold);
    border: 1px solid rgba(249, 82, 40, 0.24);
    background: rgba(249, 82, 40, 0.1);
}

#homepage-content .essence-promise__icon svg {
    width: 0.8rem;
    height: 0.8rem;
}

#homepage-content .essence-promise__text {
    min-width: 0;
    font-size: 0.68rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#homepage-content .essence-hero__actions {
    position: absolute;
    left: 50%;
    bottom: 5.75rem;
    z-index: 35;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: max-content;
    max-width: calc(100% - 2rem);
}

#homepage-content .essence-hero__actions.reveal,
#homepage-content .essence-hero__actions.reveal.visible {
    transform: translateX(-50%);
}

/* Stats */
#homepage-content .hero__stats {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-top: 1rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(245, 237, 216, 0.15);
}

@media (min-width: 640px) {
    #homepage-content .hero__stats {
        gap: 2rem;
    }
}

#homepage-content .hero__stat-value {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}

#homepage-content .hero__stat-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 500;
    color: rgba(245, 237, 216, 0.38);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.25rem;
}

#homepage-content .hero__stat-divider {
    display: none;
    width: 1px;
    height: 1.75rem;
    background: rgba(245, 237, 216, 0.1);
}

@media (min-width: 640px) {
    #homepage-content .hero__stat-divider {
        display: block;
    }
}

/* Floating badges (desktop only) */
#homepage-content .hero__badges {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

#homepage-content .hero__badge {
    position: absolute;
    background: rgba(8, 3, 0, 0.72);
    border: 1px solid rgba(249, 82, 40, 0.28);
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
    min-width: 8.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    display: none;
}

@media (min-width: 1024px) {
    #homepage-content .hero__badge {
        display: block;
    }
}

#homepage-content .hero__badge--1 {
    top: 22%;
    right: 4%;
    animation: floatBadge1 4s ease-in-out infinite;
}

#homepage-content .hero__badge--2 {
    top: 52%;
    right: 3%;
    animation: floatBadge2 5s ease-in-out infinite;
}

#homepage-content .hero__badge--3 {
    bottom: 20%;
    right: 5%;
    animation: floatBadge3 4.5s ease-in-out infinite;
}

@keyframes floatBadge1 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes floatBadge2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

@keyframes floatBadge3 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

#homepage-content .hero__badge-stars {
    color: var(--gold);
    font-size: 0.5rem;
    margin-bottom: 0.25rem;
    letter-spacing: 0.1em;
}

#homepage-content .hero__badge-name {
    font-family: var(--font-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #F5EDD8;
    line-height: 1.2;
}

#homepage-content .hero__badge-price {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--gold);
    margin-top: 0.25rem;
}

/* Hero nav */
#homepage-content .hero__nav {
    position: absolute;
    left: 50%;
    bottom: 2.6rem;
    z-index: 40;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.62rem;
    padding: 0.32rem 0.52rem;
    border-radius: var(--radius-pill);
    background: rgba(7, 2, 1, 0.52);
    border: 1px solid rgba(245, 237, 216, 0.16);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
}

#homepage-content .hero__nav-btn {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 50%;
    border: 1px solid rgba(245, 237, 216, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 237, 216, 0.92);
    background: rgba(255, 255, 255, 0.06);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

#homepage-content .hero__nav-btn svg {
    width: 0.82rem;
    height: 0.82rem;
}

#homepage-content .hero__nav-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--brown-dark);
}

#homepage-content .hero__dots {
    display: flex;
    align-items: center;
    gap: 0.42rem;
}

#homepage-content .hero__dot {
    border-radius: var(--radius-pill);
    height: 3px;
    background: rgba(245, 237, 216, 0.34);
    border: none;
    cursor: pointer;
    transition: width 0.4s ease, background 0.4s ease;
    width: 6px;
}

#homepage-content .hero__dot.is-active {
    width: 22px;
    background: var(--gold);
}

@media (max-width: 1024px) {
    #homepage-content .hero {
        min-height: 600px;
    }

    #homepage-content .hero__content {
        padding-top: 2rem;
        padding-bottom: 3.75rem;
    }

    #homepage-content .hero__content--essence {
        padding-bottom: 7.4rem;
    }

    #homepage-content .essence-hero {
        padding-bottom: 3.7rem;
    }

    #homepage-content .essence-hero__stage {
        width: min(100%, 60rem);
    }

    #homepage-content .essence-hero__journey {
        width: min(100%, 46rem);
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 0.45rem;
    }

    #homepage-content .essence-hero__journey-label {
        padding-left: 0;
        border-left: 0;
    }

    #homepage-content .essence-hero__actions {
        bottom: 5.55rem;
    }
}

@media (max-width: 640px) {
    #homepage-content .hero {
        min-height: 0;
    }

    #homepage-content .hero__content {
        padding: 1.35rem 1.1rem 3.6rem;
    }

    #homepage-content .hero__content--essence {
        align-items: center;
        padding: 1.1rem 1rem 6.85rem;
    }

    #homepage-content .essence-hero {
        width: 100%;
        padding-bottom: 3.65rem;
    }

    #homepage-content .essence-hero__stage {
        width: 100%;
        padding: 0.9rem 0.45rem 0.82rem;
    }

    #homepage-content .essence-hero__stage::before {
        width: clamp(12rem, 58vw, 16rem);
    }

    #homepage-content .essence-hero__stage::after {
        width: clamp(7rem, 35vw, 9.5rem);
    }

    #homepage-content .essence-hero__meta {
        grid-template-columns: auto minmax(2.4rem, 4.5rem) auto;
        gap: 0.55rem;
        margin-bottom: 0.55rem;
    }

    #homepage-content .essence-hero__tag {
        font-size: 0.56rem;
    }

    #homepage-content .essence-hero__tag svg {
        width: 0.82rem;
        height: 0.82rem;
    }

    #homepage-content .essence-hero__since {
        font-size: 0.54rem;
        letter-spacing: 0.1em;
    }

    #homepage-content .essence-hero__title {
        font-size: clamp(1.75rem, 9.5vw, 2.65rem);
        line-height: 1.06;
    }

    #homepage-content .essence-hero__lead {
        max-width: 18.5rem;
        margin-top: 0.45rem;
        font-size: clamp(0.7rem, 3.4vw, 0.88rem);
        line-height: 1.55;
    }

    #homepage-content .essence-hero__ornament {
        grid-template-columns: minmax(1.75rem, 3.4rem) 0.28rem minmax(1.75rem, 3.4rem);
        gap: 0.5rem;
        margin: 0.35rem 0 0.2rem;
    }

    #homepage-content .essence-hero__support {
        max-width: 17.5rem;
        font-size: 0.62rem;
        line-height: 1.48;
    }

    #homepage-content .essence-hero__journey {
        width: 100%;
        max-width: 20.5rem;
        padding: 0.44rem 0.4rem;
        margin-top: 0.58rem;
        gap: 0.28rem;
    }

    #homepage-content .essence-hero__journey-label {
        font-size: 0.6rem;
        line-height: 1.45;
    }

    #homepage-content .essence-hero__promise-list {
        gap: 0.2rem;
    }

    #homepage-content .essence-promise {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 0.2rem;
        padding: 0.18rem 0.1rem;
        text-align: center;
    }

    #homepage-content .essence-promise__icon {
        width: 1.3rem;
        height: 1.3rem;
    }

    #homepage-content .essence-promise__icon svg {
        width: 0.64rem;
        height: 0.64rem;
    }

    #homepage-content .essence-promise__text {
        font-size: 0.48rem;
        line-height: 1.3;
    }

    #homepage-content .essence-hero__actions {
        bottom: 5.35rem;
        gap: 0.55rem;
        width: min(100% - 2rem, 22rem);
    }

    #homepage-content .essence-hero__actions .btn {
        flex: 1 1 9rem;
        justify-content: center;
        padding: 0.72rem 0.85rem;
        font-size: 0.82rem;
    }

    #homepage-content .hero__nav {
        bottom: 2.45rem;
        gap: 0.5rem;
        padding: 0.28rem 0.46rem;
    }

    #homepage-content .hero__nav-btn {
        width: 1.85rem;
        height: 1.85rem;
    }

    #homepage-content .hero__dot.is-active {
        width: 18px;
    }
}

@media (max-width: 380px) {
    #homepage-content .hero__content {
        padding-bottom: 3.35rem;
    }

    #homepage-content .hero__content--essence {
        padding-bottom: 6.65rem;
    }

    #homepage-content .essence-hero {
        padding-bottom: 3.4rem;
    }

    #homepage-content .essence-hero__title {
        font-size: clamp(1.6rem, 8.5vw, 2.15rem);
    }

    #homepage-content .essence-hero__lead {
        font-size: clamp(0.64rem, 3.25vw, 0.82rem);
    }

    #homepage-content .essence-hero__actions {
        bottom: 5.2rem;
        width: min(100% - 2rem, 20rem);
    }

    #homepage-content .essence-hero__actions .btn {
        flex: 1 1 8.75rem;
        justify-content: center;
    }

    #homepage-content .essence-promise__text {
        font-size: 0.46rem;
    }
}

@media (max-height: 700px) and (max-width: 640px) {
    #homepage-content .essence-hero__title {
        font-size: clamp(1.5rem, 7.9vw, 2rem);
    }

    #homepage-content .essence-hero__lead {
        font-size: clamp(0.6rem, 3vw, 0.76rem);
        line-height: 1.38;
    }

    #homepage-content .essence-hero__support {
        font-size: 0.58rem;
    }

    #homepage-content .essence-hero__actions {
        bottom: 5rem;
    }

    #homepage-content .essence-hero__journey {
        display: none;
    }
}

/* Hero ticker */
#homepage-content .hero__ticker-wrap {
    position: relative;
    z-index: 60;
    overflow: hidden;
    background: linear-gradient(90deg, #070201 0%, #160704 50%, #070201 100%);
    border-top: 1px solid rgba(249, 82, 40, 0.22);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
    padding: 0.5rem 0;
}

#homepage-content .hero__ticker {
    display: flex;
    white-space: nowrap;
    animation: heroTicker 28s linear infinite;
}

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

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

#homepage-content .hero__ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: rgba(245, 237, 216, 0.42);
}

#homepage-content .hero__ticker-item i {
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(249, 82, 40, 0.78), rgba(131, 183, 53, 0.64));
    font-style: normal;
}

/* ── 7. Marquee Ticker ────────────────────────────────────── */
#homepage-content .marquee {
    overflow: hidden;
    padding: 1rem 0;
    background: hsl(350, 65%, 25%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#homepage-content .marquee__track {
    display: flex;
    white-space: nowrap;
    animation: marqueeScroll 30s linear infinite;
}

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

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

#homepage-content .marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    padding: 0 2rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    color: var(--cream);
}

#homepage-content .marquee__item svg {
    width: 0.5rem;
    height: 0.5rem;
    color: rgb(249, 82, 40);
    flex-shrink: 0;
}

/* ── 8. Categories ────────────────────────────────────────── */
#homepage-content .categories {
    padding: 5rem 0;
    background: var(--cream);
}

#homepage-content .categories__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}

#homepage-content .categories__track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

#homepage-content .categories__track::-webkit-scrollbar {
    display: none;
}

#homepage-content .cat-card {
    position: relative;
    flex-shrink: 0;
    width: clamp(14rem, 21vw, 15rem);
    height: clamp(18rem, 25vw, 19rem);
    border-radius: 1.5rem;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    display: block;
    transition: transform var(--transition);
}

#homepage-content .cat-card:hover {
    transform: translateY(-4px);
}

#homepage-content .cat-card.is-active {
    background: linear-gradient(145deg, #FFF9EE 0%, #F4E5C9 100%) !important;
}

#homepage-content .cat-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: background var(--transition);
}

#homepage-content .cat-card.is-active .cat-card__overlay {
    display: none;
}

#homepage-content .cat-card:hover .cat-card__overlay {
    background: rgba(0, 0, 0, 0.2);
}

#homepage-content .cat-card__icon-wrap {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

#homepage-content .cat-card.is-active .cat-card__icon-wrap {
    background: rgba(255, 255, 255, 0.75);
    color: var(--brown-mid);
}

#homepage-content .cat-card__icon-wrap svg {
    width: 1rem;
    height: 1rem;
}

#homepage-content .cat-card__label {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    justify-content: center;
}

#homepage-content .cat-card__label span {
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#homepage-content .cat-card__label svg {
    width: 0.875rem;
    height: 0.875rem;
    display: none;
}

#homepage-content .cat-card.is-active .cat-card__label span {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
}

#homepage-content .cat-card.is-active .cat-card__label svg {
    display: inline;
}

#homepage-content .cat-card__view-all {
    position: absolute;
    z-index: 2;
    top: 1rem;
    right: 1rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(5px);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

#homepage-content .cat-card__view-all:hover {
    background: var(--gold);
    color: var(--white);
    transform: translateY(-1px);
}

#homepage-content .cat-card.is-active .cat-card__view-all {
    background: rgba(45, 31, 18, 0.1);
    color: var(--brown);
    border-color: rgba(45, 31, 18, 0.16);
}

/* Homepage-only category art direction. The card DOM and data actions remain unchanged. */
#homepage-content .cat-card[data-category-slug="spices"] .motion-bg-media {
    background-position: 54% center;
}

#homepage-content .cat-card[data-category-slug="herbs"] .motion-bg-media {
    background-position: center;
}

#homepage-content .cat-card[data-category-slug="tea"] .motion-bg-media {
    background-position: 56% center;
}

#homepage-content .cat-card[data-category-slug="baking"] .motion-bg-media {
    background-position: center;
}

#homepage-content .cat-card[data-category-slug="masala-blends"] .motion-bg-media {
    background-position: 50% center;
}

#homepage-content .cat-card[data-category-slug="organic"] .motion-bg-media {
    background-position: 52% center;
}

#homepage-content .cat-card[data-category-slug="kitchen"] .motion-bg-media {
    background-position: 50% center;
}

#homepage-content .cat-card[data-category-slug="gift-sets"]::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(45deg, transparent 44%, rgba(232, 192, 108, 0.82) 44%, rgba(232, 192, 108, 0.82) 52%, transparent 52%),
        linear-gradient(-45deg, transparent 45%, rgba(232, 192, 108, 0.66) 45%, rgba(232, 192, 108, 0.66) 52%, transparent 52%);
    mix-blend-mode: screen;
    pointer-events: none;
}

#homepage-content .cat-card > .cat-card__icon-wrap,
#homepage-content .cat-card > .cat-card__label,
#homepage-content .cat-card > .cat-card__view-all {
    z-index: 2;
}

/* ── 9. Most Loved ────────────────────────────────────────── */
#homepage-content .most-loved {
    padding: 3.25rem 0 3.5rem;
    background: var(--cream-light);
}

#homepage-content .most-loved__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1.5rem;
    text-align: left;
}

#homepage-content .most-loved__header > div:first-child {
    max-width: none;
    margin: 0;
}

#homepage-content .most-loved__header .section-subtitle {
    margin: 0.75rem 0 0;
    text-align: left;
    max-width: 32rem;
}

#homepage-content .most-loved__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

#homepage-content .most-loved__view-all-mobile {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    #homepage-content .most-loved__view-all-mobile {
        display: none;
    }
}

/* Product Row */
#homepage-content .products-row {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

#homepage-content .products-row::-webkit-scrollbar {
    display: none;
}

#homepage-content .products-row,
#homepage-content .grid-products {
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

#homepage-content .zm-home-wd-card {
    flex: 0 0 clamp(13.75rem, 18vw, 15.75rem);
    width: clamp(13.75rem, 18vw, 15.75rem);
    min-width: 0;
    scroll-snap-align: start;
}

#homepage-content .zm-home-wd-card--bundle-redirect {
    cursor: pointer;
}

#homepage-content .zm-home-wd-card > .wd-product {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    background: var(--white);
    border: 1px solid rgba(196, 168, 130, 0.18);
    border-radius: 0.65rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: box-shadow var(--transition), transform var(--transition);
}

#homepage-content .zm-home-wd-card > .wd-product:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

#homepage-content .zm-home-wd-card .wd-product-wrapper {
    height: auto;
    min-height: 0;
}

#homepage-content .zm-home-wd-card .product-element-top,
#homepage-content .zm-home-wd-card .wd-product-thumb {
    aspect-ratio: 1 / 1.05;
    min-height: 0;
    overflow: hidden;
    background: #fffaf2;
}

#homepage-content .zm-home-wd-card .product-element-top img,
#homepage-content .zm-home-wd-card .wd-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#homepage-content .zm-home-wd-card .product-element-bottom {
    min-height: 0;
    padding: 0.72rem 0.82rem 0.82rem;
}

#homepage-content .zm-home-wd-card .wd-entities-title,
#homepage-content .zm-home-wd-card .woocommerce-loop-product__title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--brown-dark);
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#homepage-content .zm-home-wd-card .wd-product-cats,
#homepage-content .zm-home-wd-card .wd-product-categories {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red-accent);
}

#homepage-content .zm-home-wd-card .price {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--gold);
}

#homepage-content .zm-home-wd-card .wd-action-btn > a,
#homepage-content .zm-home-wd-card .open-quick-view {
    transition: transform var(--transition), background var(--transition), color var(--transition);
}

#homepage-content .zm-home-wd-card .wd-buttons .wd-action-btn > a,
#homepage-content .zm-home-wd-card .wd-add-btn.wd-action-btn > a {
    background: rgba(255, 250, 242, 0.94);
    color: var(--deep-red);
}

#homepage-content .zm-home-wd-card .wd-action-btn > a:hover,
#homepage-content .zm-home-wd-card .open-quick-view:hover {
    color: var(--cream);
    background: var(--deep-red);
    transform: translateY(-1px);
}

/* Product Card */
#homepage-content .product-card {
    flex-shrink: 0;
    width: clamp(16rem, 25vw, 18rem);
    aspect-ratio: 1 / 1.18;
    scroll-snap-align: start;
    background: var(--white);
    border: 1px solid rgba(196, 168, 130, 0.18);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: box-shadow var(--transition), transform var(--transition);
    display: flex;
    flex-direction: column;
}

#homepage-content .product-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

#homepage-content .product-card__image {
    position: relative;
    flex: 0 0 58%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

#homepage-content .product-card__image--placeholder {
    background: linear-gradient(135deg, #F5E8C8 0%, #E8CFA0 100%);
}

#homepage-content .product-card__image--blend1 {
    background: linear-gradient(135deg, #3D1A00 0%, #6B2D08 100%);
}

#homepage-content .product-card__image--blend2 {
    background: linear-gradient(135deg, #2D0810 0%, #5C1020 100%);
}

#homepage-content .product-card__image--blend3 {
    background: linear-gradient(135deg, #1A2D0D 0%, #3A5C1A 100%);
}

#homepage-content .product-card__image--tea {
    background: linear-gradient(135deg, #0D2010 0%, #1A4020 100%);
}

#homepage-content .product-card__svg-icon {
    width: 5rem;
    height: 5rem;
    opacity: 0.5;
}

#homepage-content .product-card__wishlist {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition), background var(--transition);
    color: var(--muted);
}

#homepage-content .product-card:hover .product-card__wishlist,
#homepage-content .grid-card:hover .product-card__wishlist,
#homepage-content .product-card:focus-within .product-card__wishlist,
#homepage-content .grid-card:focus-within .product-card__wishlist {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#homepage-content .product-card__wishlist svg {
    width: 1rem;
    height: 1rem;
}

#homepage-content .product-card__wishlist a,
#homepage-content .product-card__wishlist .wd-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
}

#homepage-content .product-card__wishlist .wd-action-text {
    display: none;
}

#homepage-content .product-card__wishlist:hover {
    background: var(--white);
    color: var(--red-accent);
}

#homepage-content .product-card__wishlist.is-wishlisted {
    color: var(--red-accent);
}

#homepage-content .product-card__quick-view {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--brown-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    border: 1px solid rgba(0, 0, 0, 0.34);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.76), 0 0 0 3px rgba(0, 0, 0, 0.26), 0 8px 22px rgba(0, 0, 0, 0.16);
    transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

#homepage-content .product-card__quick-view::before,
#homepage-content .grid-card__quick::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

#homepage-content .product-card__quick-view:hover,
#homepage-content .product-card__quick-view:focus-visible,
#homepage-content .grid-card__quick:hover,
#homepage-content .grid-card__quick:focus-visible {
    background: var(--gold);
    color: #1A120B;
    transform: translateY(-1px);
}

#homepage-content .product-card__body {
    padding: 0.95rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#homepage-content .product-card__cat {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--red-accent);
    margin-bottom: 0.25rem;
}

#homepage-content .product-card__name {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--brown-dark);
    line-height: 1.25;
    margin-bottom: 0.65rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#homepage-content .product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

#homepage-content .product-card__price {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brown-dark);
}

/* ── 10. Bundles ──────────────────────────────────────────── */
#homepage-content .bundles {
    padding: 6rem 0;
    background:
        radial-gradient(circle at 8% 16%, rgba(131, 183, 53, 0.11), transparent 30rem),
        radial-gradient(circle at 92% 18%, rgba(131, 183, 53, 0.08), transparent 28rem),
        linear-gradient(180deg, #FFFFFF 0%, rgba(131, 183, 53, 0.045) 46%, #FFFFFF 100%);
}

#homepage-content .bundles .container {
    overflow: visible;
}

#homepage-content .bundles__controls {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin: -1.25rem 0 1.5rem;
}

#homepage-content .bundles__controls .scroll-arrow {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
}

#homepage-content .bundles__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2rem;
    align-items: stretch;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
    padding: 0.25rem 0 1.25rem;
    scroll-padding-inline: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    cursor: grab;
}

#homepage-content .bundles__grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

#homepage-content .bundle-card {
    position: relative;
    flex: 0 0 clamp(18.25rem, 29vw, 22.75rem) !important;
    min-width: clamp(18.25rem, 29vw, 22.75rem);
    scroll-snap-align: start;
    border-radius: var(--radius-card);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: box-shadow var(--transition), transform var(--transition);
    overflow: hidden;
}

#homepage-content .bundle-card:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(-8px);
}

#homepage-content .bundle-card--spice {
    background: radial-gradient(circle at 16% 8%, rgba(131, 183, 53, 0.26), transparent 34%), linear-gradient(145deg, #3D1A00, #6B2D08);
}

#homepage-content .bundle-card--chai {
    background: radial-gradient(circle at 16% 8%, rgba(132, 145, 74, 0.24), transparent 34%), linear-gradient(145deg, #0D2010, #1A4020);
}

#homepage-content .bundle-card--essentials {
    background: radial-gradient(circle at 16% 8%, rgba(131, 183, 53, 0.24), transparent 34%), linear-gradient(145deg, #2D0810, #5C1020);
}

#homepage-content .bundle-card--seeds {
    background: radial-gradient(circle at 16% 8%, rgba(249, 82, 40, 0.14), transparent 34%), linear-gradient(145deg, #182412, #3C4A20);
}

#homepage-content .bundle-card--wellness {
    background: radial-gradient(circle at 16% 8%, rgba(131, 183, 53, 0.24), transparent 34%), linear-gradient(145deg, #2A1209, #96131E);
}

#homepage-content .bundles__grid .bundle-card:nth-child(4) {
    background: radial-gradient(circle at 16% 8%, rgba(249, 82, 40, 0.14), transparent 34%), linear-gradient(145deg, #182412, #3C4A20);
}

#homepage-content .bundles__grid .bundle-card:nth-child(5) {
    background: radial-gradient(circle at 16% 8%, rgba(131, 183, 53, 0.24), transparent 34%), linear-gradient(145deg, #2A1209, #96131E);
}

#homepage-content .bundle-card__save-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--white);
    color: var(--brown-dark);
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-pill);
}

#homepage-content .bundle-card__icons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0;
}

#homepage-content .bundle-card__icon-wrap {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

#homepage-content .bundle-card__icon-wrap svg {
    width: 1.25rem;
    height: 1.25rem;
}

#homepage-content .bundle-card__icon-wrap--image {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.16);
    padding: 0.1875rem;
}

#homepage-content .bundle-card__icon-wrap--image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

#homepage-content .bundle-card__name {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--white);
    text-align: center;
    margin-bottom: 2rem;
}

#homepage-content .bundle-card__desc {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.65;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin: -1rem 0 1.5rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
}

#homepage-content .bundle-card__items {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.875rem;
    padding: 1.5rem;
    flex: 1;
    margin-bottom: 2rem;
}

#homepage-content .bundle-card__items li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 0;
}

#homepage-content .bundle-card__items li::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}

#homepage-content .bundle-card__items li+li {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#homepage-content .bundle-card__price-wrap {
    text-align: center;
    margin-bottom: 2rem;
}

#homepage-content .bundle-card__original {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: line-through;
    margin-bottom: 0.25rem;
}

#homepage-content .bundle-card__price {
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
}

#homepage-content .bundle-card__deal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    background: rgba(131, 183, 53, 0.34);
    border: 1px solid rgba(245, 237, 216, 0.18);
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#homepage-content .bundle-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: auto;
}

#homepage-content .bundle-card__actions .btn {
    margin: 0 !important;
    min-height: 2.875rem;
}

@media (max-width: 767px) {
    #homepage-content .bundles__controls {
        justify-content: center;
        margin-top: -1rem;
    }
}

/* ── 11. Products Grid ────────────────────────────────────── */
#homepage-content .products-grid {
    padding: 3.25rem 0 4rem;
    background: var(--white);
}

#homepage-content .products-grid__header {
    margin-bottom: 1.25rem;
}

#homepage-content .products-grid__header .section-header {
    margin-bottom: 0;
    text-align: center;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

#homepage-content .products-grid__header .section-header__eyebrow {
    justify-content: center;
}

#homepage-content .products-grid__header .section-subtitle {
    margin: 0.55rem auto 0;
    text-align: center;
    max-width: 32rem;
}

#homepage-content .filter-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
}

#homepage-content .filter-pill {
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--brown);
    border: 1px solid rgba(45, 31, 18, 0.2);
    cursor: pointer;
    transition: all var(--transition);
}

#homepage-content .filter-pill:hover {
    border-color: var(--brown-dark);
}

#homepage-content .filter-pill.is-active {
    background: var(--brown-dark);
    color: var(--cream);
    border-color: var(--brown-dark);
}

#homepage-content .grid-products {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.25rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0.1rem 0 0.75rem;
    position: relative;
}

#homepage-content .grid-products::-webkit-scrollbar {
    display: none;
}

#homepage-content .grid-products.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

#homepage-content .grid-card {
    flex: 0 0 clamp(16rem, 25vw, 18rem);
    width: clamp(16rem, 25vw, 18rem);
    aspect-ratio: 1 / 1.18;
    background: var(--white);
    border: 1px solid rgba(196, 168, 130, 0.18);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    transition: box-shadow var(--transition), transform var(--transition);
}

#homepage-content .grid-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

#homepage-content .grid-card--hidden {
    display: none;
}

#homepage-content .grid-card__image {
    position: relative;
    flex: 0 0 58%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

#homepage-content .grid-card__image[data-bg]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.42));
    z-index: 0;
}

#homepage-content .grid-card__image[data-bg] > * {
    position: relative;
    z-index: 1;
}

#homepage-content .grid-card__image[data-bg] > .product-card__wishlist {
    position: absolute;
    z-index: 2;
}

#homepage-content .grid-card__svg-icon {
    width: 4.5rem;
    height: 4.5rem;
}

#homepage-content .grid-card__label-name {
    display: none;
}

#homepage-content .grid-card__quick {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--brown-dark);
    font-size: 0;
    border: 1px solid rgba(0, 0, 0, 0.34);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.76), 0 0 0 3px rgba(0, 0, 0, 0.26), 0 8px 22px rgba(0, 0, 0, 0.16);
}

#homepage-content .grid-card__image > .grid-card__quick {
    display: inline-flex;
}

#homepage-content .grid-card__body > .grid-card__quick {
    display: none;
}

#homepage-content .product-card__quick-view::after,
#homepage-content .grid-card__quick::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Grid card image variants */
#homepage-content .grid-card__image--spice1 {
    background: linear-gradient(135deg, #3D1A00, #6B2D08);
}

#homepage-content .grid-card__image--spice2 {
    background: linear-gradient(135deg, #2D0818, #5C1030);
}

#homepage-content .grid-card__image--spice3 {
    background: linear-gradient(135deg, #1A2D00, #3A5C0A);
}

#homepage-content .grid-card__image--baking1 {
    background: linear-gradient(135deg, #2D1A08, #5C3A1A);
}

#homepage-content .grid-card__image--baking2 {
    background: linear-gradient(135deg, #1A1A08, #3D3A10);
}

#homepage-content .grid-card__image--herbs1 {
    background: linear-gradient(135deg, #0A2010, #1E4028);
}

#homepage-content .grid-card__image--tea1 {
    background: linear-gradient(135deg, #0D2010, #1A4020);
}

#homepage-content .grid-card__image--tea2 {
    background: linear-gradient(135deg, #102018, #20403A);
}

#homepage-content .grid-card__image--blend3 {
    background: linear-gradient(135deg, #1A0820, #3A1040);
}

#homepage-content .grid-card__body {
    padding: 0.95rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#homepage-content .grid-card__cat {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    margin-bottom: 0.25rem;
}

#homepage-content .grid-card__name {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--brown);
    line-height: 1.25;
    margin-bottom: 0.65rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#homepage-content .grid-card__price-row {
    margin: 0;
}

#homepage-content .grid-card__price {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gold);
}

#homepage-content .grid-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
}

#homepage-content .grid-card__footer > .btn--gold-full {
    width: auto;
    min-height: 2rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    flex: 0 0 auto;
}

#homepage-content .grid-card__footer > .btn--gold-full svg {
    width: 0.75rem;
    height: 0.75rem;
}

#homepage-content .products-grid__actions,
#homepage-content .products-grid__explore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 3.5rem;
}

#homepage-content .products-grid__actions {
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
    margin: 0 0 1rem;
}

#homepage-content .products-grid__actions .btn {
    white-space: nowrap;
    min-height: 2.45rem;
    padding: 0.55rem 1.35rem;
    font-size: 0.8rem;
}

#homepage-content .products-grid__explore {
    margin-top: 2rem;
}

#homepage-content .products-grid__controls {
    justify-content: center;
}

#homepage-content .products-grid.is-loading-products .grid-products {
    min-height: 18rem;
}

#homepage-content .products-grid.is-loading-products .grid-products::after {
    content: attr(data-loading-label);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.78);
    color: var(--brown);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 5;
}

#homepage-content .grid-products__empty {
    flex: 0 0 100%;
    padding: 2.25rem;
    border: 1px dashed rgba(45, 31, 18, 0.2);
    border-radius: 0.75rem;
    color: var(--brown-mid);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    text-align: center;
    background: rgba(248, 244, 235, 0.55);
}

@media (max-width: 767px) {
    #homepage-content .products-grid__header {
        margin-bottom: 1rem;
    }

    #homepage-content .products-grid__header .section-header,
    #homepage-content .products-grid__header .section-subtitle {
        text-align: center;
    }

    #homepage-content .products-grid__header .section-header__eyebrow {
        justify-content: center;
    }

    #homepage-content .products-grid__actions {
        width: 100%;
        justify-content: flex-end;
        gap: 0.75rem;
        margin-bottom: 0.85rem;
    }

    #homepage-content .products-grid__actions .btn {
        flex: 0 0 auto;
        min-width: 0;
        padding-inline: 1rem;
    }

    #homepage-content .products-grid__controls {
        flex: 0 0 auto;
    }

    #homepage-content .filter-pills {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.35rem;
        margin: 0 0 0.85rem;
        scrollbar-width: none;
    }

    #homepage-content .filter-pills::-webkit-scrollbar {
        display: none;
    }

    #homepage-content .filter-pill {
        flex: 0 0 auto;
    }

}

@media (max-width: 480px) {
    #homepage-content .products-grid__actions {
        align-items: center;
    }

    #homepage-content .products-grid__actions .btn {
        font-size: 0.72rem;
    }
}

/* ── 12. Flash Sale ───────────────────────────────────────── */
#homepage-content .flash-sale {
    padding: 6rem var(--page-gutter);
    background:
        radial-gradient(circle at 12% 16%, rgba(249, 82, 40, 0.15), transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(255, 248, 234, 0.11), transparent 30rem),
        linear-gradient(135deg, #18210F 0%, #2F3B1C 54%, #58612E 100%);
}

#homepage-content .flash-sale__inner {
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 1024px) {
    #homepage-content .flash-sale__inner {
        flex-direction: row;
        align-items: flex-start;
    }
}

#homepage-content .flash-sale__info {
    width: 100%;
    text-align: center;
    color: var(--white);
}

@media (min-width: 1024px) {
    #homepage-content .flash-sale__info {
        width: 33%;
        text-align: left;
    }
}

#homepage-content .flash-sale__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    #homepage-content .flash-sale__eyebrow {
        justify-content: flex-start;
    }
}

#homepage-content .flash-sale__title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 1.5rem;
    color: var(--white);
}

#homepage-content .flash-sale__desc {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2.5rem;
    max-width: 26rem;
    line-height: 1.6;
}

#homepage-content .flash-sale__timer {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

#homepage-content .flash-sale__controls {
    justify-content: center;
    margin-top: 2rem;
}

#homepage-content .flash-sale__controls .scroll-arrow {
    border-color: rgba(249, 82, 40, 0.35);
    background: rgba(24, 33, 15, 0.62);
    color: var(--order-gold-soft, #FFB39E);
    backdrop-filter: blur(8px);
}

#homepage-content .flash-sale__controls .scroll-arrow:hover,
#homepage-content .flash-sale__controls .scroll-arrow:focus-visible {
    border-color: rgba(249, 82, 40, 0.74);
    background: var(--gold);
    color: #18210F;
}

@media (min-width: 1024px) {
    #homepage-content .flash-sale__timer {
        justify-content: flex-start;
    }

    #homepage-content .flash-sale__controls {
        justify-content: flex-start;
    }
}

#homepage-content .timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#homepage-content .timer-unit__value {
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 1.875rem;
    color: var(--gold);
}

#homepage-content .timer-unit__label {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.75rem;
}

#homepage-content .flash-sale__products {
    width: 100%;
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-padding-inline: 0.25rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    cursor: grab;
}

#homepage-content .flash-sale__products::-webkit-scrollbar {
    display: none;
}

#homepage-content .flash-sale__products.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

@media (min-width: 1024px) {
    #homepage-content .flash-sale__products {
        width: 67%;
    }
}

#homepage-content .flash-card {
    min-width: 17.5rem;
    width: 17.5rem;
    flex-shrink: 0;
    background: #221810;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.875rem;
    padding: 1.5rem;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition);
}

#homepage-content .flash-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

#homepage-content .flash-card__save {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--red-accent);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
}

#homepage-content .flash-card__image {
    width: 100%;
    height: 12rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}

#homepage-content .flash-card__image--chili {
    background: linear-gradient(135deg, rgba(60, 0, 0, 0.6), rgba(120, 0, 0, 0.4));
}

#homepage-content .flash-card__image--garam {
    background: linear-gradient(135deg, rgba(45, 20, 0, 0.6), rgba(90, 40, 0, 0.4));
}

#homepage-content .flash-card__image--saffron {
    background: linear-gradient(135deg, rgba(45, 30, 0, 0.6), rgba(90, 60, 0, 0.4));
}

#homepage-content .flash-card__image--ghee {
    background: linear-gradient(135deg, rgba(30, 25, 0, 0.6), rgba(60, 50, 0, 0.4));
}

#homepage-content .flash-card__name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 0.5rem;
}

#homepage-content .flash-card__prices {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

#homepage-content .flash-card__price {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold);
}

#homepage-content .flash-card__original {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: line-through;
}

/* ── 13. About / Brand Story ──────────────────────────────── */
#homepage-content .about {
    padding: 5rem 0 6rem;
    background: var(--white);
}

#homepage-content .about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.75rem, 6vw, 5rem);
    align-items: start;
}

@media (min-width: 900px) {
    #homepage-content .about__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(3rem, 5vw, 5.5rem);
    }
}

#homepage-content .about__text {
    order: 2;
}

@media (min-width: 900px) {
    #homepage-content .about__text {
        order: 2;
        grid-column: 2;
    }
}

#homepage-content .about__eyebrow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

#homepage-content .about__title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--brown-dark);
    margin-bottom: 1.5rem;
}

#homepage-content .about__section-heading {
    width: 100%;
    margin-bottom: 0;
    text-align: right;
}

#homepage-content .about__section-heading .about__title {
    margin-bottom: 0;
}

#homepage-content .about__br {
    display: none;
}

@media (min-width: 640px) {
    #homepage-content .about__br {
        display: inline;
    }
}

#homepage-content .about__body {
    margin-bottom: 1.5rem;
}

#homepage-content .about__body p {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 1rem;
}

#homepage-content .about__body--urdu {
    direction: rtl;
    text-align: right;
}

#homepage-content .about__body--urdu p,
#homepage-content .about__body--urdu li,
#homepage-content .about__tagline[dir="rtl"] {
    font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", var(--font-sans);
    line-height: 2;
}

#homepage-content .about__body--urdu strong {
    color: var(--brown-mid);
    font-weight: 700;
}

#homepage-content .about__urdu-heading,
#homepage-content .about__promise h3 {
    margin: 0 0 1rem;
    color: var(--brown-dark);
    font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", var(--font-serif);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.7;
}

#homepage-content .about__promise {
    margin-top: 1.35rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(131, 183, 53, 0.24);
    border-radius: 0.875rem;
    background: linear-gradient(135deg, rgba(249, 82, 40, 0.08), rgba(131, 183, 53, 0.08));
}

#homepage-content .about__promise ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
}

#homepage-content .about__promise li {
    position: relative;
    padding-right: 1.2rem;
    color: var(--muted);
    font-size: 1rem;
}

#homepage-content .about__promise li::before {
    content: "";
    position: absolute;
    top: 0.9rem;
    right: 0;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px var(--olive-soft);
}

#homepage-content .about__urdu {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--brown-mid);
    margin-right: 0.5rem;
}

#homepage-content .about__tagline {
    background: linear-gradient(135deg, rgba(249, 82, 40, 0.12) 0%, rgba(139, 58, 0, 0.08) 74%, var(--olive-soft) 100%);
    border: 1px solid rgba(249, 82, 40, 0.2);
    border-radius: 0.875rem;
    padding: 0.75rem 1.25rem;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--brown-mid);
    letter-spacing: 0.03em;
}

/* Brand visual */
#homepage-content .about__visual {
    order: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    min-height: 0;
}

@media (min-width: 900px) {
    #homepage-content .about__visual {
        order: 1;
        grid-column: 1;
    }
}

#homepage-content .about__visual .about__section-heading {
    align-self: stretch;
    direction: ltr;
    text-align: left;
}

#homepage-content .about__visual .about__eyebrow {
    justify-content: flex-start;
}

#homepage-content .about__visual .about__title {
    text-align: left;
}

#homepage-content .about__monogram-scene {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(28rem, 100%);
    aspect-ratio: 1;
}

#homepage-content .about__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(196, 168, 130, 0.3);
    pointer-events: none;
}

#homepage-content .about__ring--outer {
    width: 80%;
    aspect-ratio: 1;
}

#homepage-content .about__ring--inner {
    width: 92%;
    aspect-ratio: 1;
    border-color: rgba(196, 168, 130, 0.15);
}

#homepage-content .about__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

#homepage-content .about__glow--gold {
    top: 0;
    right: 0;
    width: 12rem;
    height: 12rem;
    background: rgba(249, 82, 40, 0.15);
}

#homepage-content .about__glow--red {
    bottom: 0;
    left: 0;
    width: 14rem;
    height: 14rem;
    background: rgba(192, 57, 43, 0.1);
}

#homepage-content .about__logo-card {
    position: relative;
    z-index: 10;
    width: min(23.75rem, 88%);
    aspect-ratio: 1;
    border-radius: 2.5rem;
    overflow: hidden;
    background: linear-gradient(145deg, #F5E8C8 0%, #E8CFA0 72%, rgba(131, 183, 53, 0.13) 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
    animation: logoFloat 5s ease-in-out infinite;
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

#homepage-content .about__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2.5rem;
}

#homepage-content .about__secondary-logo-card {
    position: relative;
    z-index: 12;
    width: min(23.75rem, 92%);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    padding: clamp(1.15rem, 2.4vw, 2rem);
    border: 1px solid rgba(131, 183, 53, 0.24);
    border-radius: 1.35rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 232, 200, 0.58));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.09);
}

#homepage-content .about__secondary-logo-img {
    width: 100%;
    height: auto;
    max-height: 82%;
    object-fit: contain;
}

@media (max-width: 899px) {
    #homepage-content .about__visual .about__section-heading {
        max-width: min(34rem, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    #homepage-content .about__monogram-scene,
    #homepage-content .about__secondary-logo-card {
        width: min(24rem, 92vw);
    }
}

@media (max-width: 560px) {
    #homepage-content .about {
        padding: 3.5rem 0 4.5rem;
    }

    #homepage-content .about__grid {
        gap: 2.6rem;
    }

    #homepage-content .about__visual {
        gap: 1.35rem;
    }

    #homepage-content .about__body--urdu {
        text-align: right;
    }

    #homepage-content .about__monogram-scene,
    #homepage-content .about__secondary-logo-card {
        width: min(20rem, 90vw);
    }

    #homepage-content .about__logo-img {
        padding: 2rem;
    }
}

#homepage-content .about__badge {
    position: absolute;
    z-index: 20;
    border-radius: 0.875rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

#homepage-content .about__badge--since {
    bottom: -1.5rem;
    left: 0;
    background: var(--brown-dark);
    color: var(--cream);
}

@media (min-width: 640px) {
    #homepage-content .about__badge--since {
        bottom: -1.5rem;
        left: -1.5rem;
    }
}

#homepage-content .about__badge-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

#homepage-content .about__badge-year {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
}

#homepage-content .about__badge--pure {
    top: -0.75rem;
    right: 0;
    background: var(--white);
    border: 1px solid rgba(131, 183, 53, 0.26);
}

@media (min-width: 640px) {
    #homepage-content .about__badge--pure {
        top: -1rem;
        right: -1rem;
    }
}

#homepage-content .about__badge-pct {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red-accent);
}

#homepage-content .about__badge-text {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brown-dark);
}

/* ── 14. Features / Why Choose Us ────────────────────────── */
#homepage-content .features {
    padding: 6rem 0;
    background: var(--cream);
    position: relative;
}

#homepage-content .features::before,
.features::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(45, 31, 18, 0.1), transparent);
}

#homepage-content .features::before {
    top: 0;
}

#homepage-content .features::after {
    bottom: 0;
}

#homepage-content .features__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
    justify-content: center;
}

@media (min-width: 768px) {
    #homepage-content .features__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    #homepage-content .features__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

#homepage-content .feature-card {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(45, 31, 18, 0.06);
    border-radius: 1.75rem;
    padding: 1.5rem;
    text-align: center;
    transition: box-shadow var(--transition), transform var(--transition), background var(--transition);
    cursor: default;
}

#homepage-content .feature-card:hover {
    background: var(--white);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-6px);
}

#homepage-content .feature-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.875rem;
    margin: 0 auto 1rem;
    background: rgba(139, 58, 0, 0.07);
    border: 1px solid rgba(139, 58, 0, 0.12);
    color: var(--brown-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition);
}

#homepage-content .feature-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

#homepage-content .feature-card:hover .feature-card__icon {
    transform: scale(1.05);
}

#homepage-content .feature-card__title {
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--brown);
    margin-bottom: 0.5rem;
    line-height: 1.25;
}

#homepage-content .feature-card__desc {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.6;
}

/* ── 15. Testimonials ─────────────────────────────────────── */
#homepage-content .testimonials {
    padding: 6rem 0;
    background: var(--white);
    overflow: hidden;
}

#homepage-content .testimonials__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    #homepage-content .testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #homepage-content .testimonials__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#homepage-content .review-card {
    background: var(--dark-card);
    border-radius: 2rem;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

#homepage-content .review-card__stars {
    color: var(--gold);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
}

#homepage-content .review-card__text {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 2.5rem;
    flex: 1;
}

#homepage-content .review-card__author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#homepage-content .review-card__avatar {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    flex-shrink: 0;
}

#homepage-content .review-card__name {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--white);
}

#homepage-content .review-card__location {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.125rem;
}

/* ── 16. Responsive Adjustments ───────────────────────────── */
@media (max-width: 480px) {
    #homepage-content .hero__ctas {
        flex-direction: column;
        align-items: flex-start;
    }

    #homepage-content .hero__ctas .btn {
        width: 100%;
        justify-content: center;
    }

    #homepage-content .categories__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    #homepage-content .most-loved__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
        text-align: left;
    }

    #homepage-content .most-loved__actions {
        align-self: flex-start;
    }

    #homepage-content .most-loved__actions .btn--outline-dark {
        display: none;
    }

    #homepage-content .flash-sale__inner {
        gap: 2.5rem;
    }

}

/* ── 18. Full-Screen Search Modal ──────────────────────────── */
/* Search Modal Overlay */
#homepage-content .search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    background: rgba(10, 7, 5, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1.5rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
}

#homepage-content .search-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#homepage-content .search-modal__backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
}

#homepage-content .search-modal__close {
    position: absolute;
    top: 2rem;
    right: 2.5rem;
    z-index: 10;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

#homepage-content .search-modal__close:hover {
    color: var(--gold);
    transform: scale(1.1);
}

#homepage-content .search-modal__close svg {
    width: 1.75rem;
    height: 1.75rem;
}

#homepage-content .search-modal__container {
    position: relative;
    z-index: 5;
    width: min(64rem, 94vw);
    margin: 3rem auto 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0) scale(0.985);
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

#homepage-content .search-modal.is-open .search-modal__container {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

#homepage-content .search-modal__input-wrapper {
    width: 100%;
    max-width: 48rem;
    position: relative;
    margin-bottom: 2rem;
}

#homepage-content .search-modal__input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0.75rem 1rem;
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: var(--white);
    outline: none;
    transition: border-color 0.3s ease;
}

#homepage-content .search-modal__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-serif);
    font-style: italic;
}

#homepage-content .search-modal__input:focus {
    border-bottom-color: var(--gold);
}

/* Category Filter Pills */
#homepage-content .search-modal__categories {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

#homepage-content .search-modal__pill {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.45rem 1.4rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

#homepage-content .search-modal__pill:hover {
    background: rgba(255, 255, 255, 0.25);
}

#homepage-content .search-modal__pill.is-active {
    background: var(--gold);
    color: #1A120B;
    font-weight: 700;
}

/* Results Grid */
#homepage-content .search-modal__results {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.25rem;
}

@media (min-width: 640px) {
    #homepage-content .search-modal__results {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    #homepage-content .search-modal__results {
        grid-template-columns: repeat(3, 1fr);
    }
}

#homepage-content .search-modal__card {
    display: flex;
    align-items: center;
    height: 5.5rem;
    background: #FAF7F2;
    border-radius: 1.125rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#homepage-content .search-modal__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

#homepage-content .search-modal__card-img {
    width: 5.5rem;
    height: 100%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    position: relative;
    border-top-left-radius: 1.125rem;
    border-bottom-left-radius: 1.125rem;
}

#homepage-content .search-modal__card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(139, 58, 0, 0.25) 0%, rgba(0, 0, 0, 0.3) 100%);
}

#homepage-content .search-modal__card-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.125rem;
    min-width: 0;
}

#homepage-content .search-modal__card-info {
    min-width: 0;
    margin-right: 0.5rem;
}

#homepage-content .search-modal__card-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 700;
    color: #1A120B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

#homepage-content .search-modal__card-price {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gold);
}

#homepage-content .search-modal__card-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(26, 18, 11, 0.15);
    background: transparent;
    color: #1A120B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

#homepage-content .search-modal__card-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
    transform: scale(1.08);
}

#homepage-content .search-modal__card-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* ── 19. Section 7.5 — Custom Order CTA Banner ──────────────── */
#homepage-content .custom-order-cta {
    padding: 5rem 0;
    background: var(--cream);
    position: relative;
}

#homepage-content .custom-order-cta__card {
    position: relative;
    background: linear-gradient(135deg, #1D130B 0%, #3D2311 50%, #150B05 100%);
    border-radius: 2.5rem;
    padding: 3.5rem 2.5rem;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(249, 82, 40, 0.2);
}

@media (min-width: 768px) {
    #homepage-content .custom-order-cta__card {
        padding: 4.5rem 4rem;
    }
}

#homepage-content .custom-order-cta__glow {
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 22rem;
    height: 22rem;
    background: rgba(249, 82, 40, 0.18);
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

#homepage-content .custom-order-cta__content {
    position: relative;
    z-index: 5;
    max-width: 44rem;
}

#homepage-content .custom-order-cta__badge {
    margin-bottom: 1.25rem;
}

#homepage-content .custom-order-cta__title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

#homepage-content .custom-order-cta__desc {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 2rem;
}

#homepage-content .custom-order-cta__features {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

#homepage-content .custom-order-cta__feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gold);
}

#homepage-content .custom-order-cta__feature-item svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--gold);
}

/* ── 20. Customize Your Order Dedicated Page Styles ──────────── */
#homepage-content .custom-order-page {
    background: #FAF7F2;
    min-height: 100vh;
}

#homepage-content .custom-order-header {
    background: #1D130B;
    border-bottom: 1px solid rgba(249, 82, 40, 0.2);
    padding: 1rem 0;
}

#homepage-content .custom-order-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#homepage-content .custom-order-header__back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gold);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

#homepage-content .custom-order-header__back:hover {
    color: var(--white);
}

#homepage-content .custom-order-header__back svg {
    width: 1.125rem;
    height: 1.125rem;
}

#homepage-content .custom-order-header__logo img {
    height: 3rem;
    width: auto;
    object-fit: contain;
}

#homepage-content .custom-order-header__badge span {
    background: rgba(249, 82, 40, 0.15);
    border: 1px solid rgba(249, 82, 40, 0.3);
    color: var(--gold);
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#homepage-content .custom-order-hero {
    background: linear-gradient(135deg, #1D130B 0%, #2A1A0E 100%);
    color: var(--white);
    padding: 4rem 0;
    text-align: center;
}

#homepage-content .custom-order-hero__content {
    max-width: 44rem;
    margin: 0 auto;
}

#homepage-content .custom-order-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 700;
    margin: 0.75rem 0 1rem;
    color: var(--white);
}

#homepage-content .custom-order-hero__desc {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

/* Form Layout Grid */
#homepage-content .custom-order-form-section {
    padding: 4rem 0;
}

#homepage-content .custom-order-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    #homepage-content .custom-order-form-grid {
        grid-template-columns: 1.8fr 1fr;
    }
}

#homepage-content .form-card {
    background: var(--white);
    border-radius: 1.75rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(45, 31, 18, 0.08);
    margin-bottom: 2rem;
}

#homepage-content .form-card__header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(45, 31, 18, 0.08);
}

#homepage-content .form-card__step {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--gold);
    color: #1A120B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}

#homepage-content .form-card__title {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 700;
    color: #1A120B;
    margin-bottom: 0.25rem;
}

#homepage-content .form-card__sub {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted);
}

#homepage-content .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    #homepage-content .form-row--2 {
        grid-template-columns: 1fr 1fr;
    }
}

#homepage-content .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

#homepage-content .form-label {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: #1A120B;
}

#homepage-content .required {
    color: #C0392B;
}

#homepage-content .optional {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.8125rem;
}

#homepage-content .form-control {
    width: 100%;
    background: #FAF7F2;
    border: 1px solid rgba(45, 31, 18, 0.15);
    border-radius: 0.875rem;
    padding: 0.85rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: #1A120B;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#homepage-content .form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(249, 82, 40, 0.15);
}

/* Custom Product Selection Card Grid */
#homepage-content .custom-products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    #homepage-content .custom-products-grid {
        grid-template-columns: 1fr 1fr;
    }
}

#homepage-content .custom-product-item {
    display: flex;
    align-items: center;
    padding: 0.85rem;
    background: #FAF7F2;
    border: 1px solid rgba(45, 31, 18, 0.1);
    border-radius: 1rem;
    gap: 0.85rem;
    transition: all 0.2s ease;
}

#homepage-content .custom-product-item.is-selected {
    background: #FFFDF9;
    border-color: var(--gold);
    box-shadow: 0 6px 20px rgba(249, 82, 40, 0.15);
}

#homepage-content .custom-product-item__check input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--gold);
    cursor: pointer;
}

#homepage-content .custom-product-item__img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

#homepage-content .custom-product-item__info {
    flex: 1;
    min-width: 0;
}

#homepage-content .custom-product-item__title {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1A120B;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#homepage-content .custom-product-item__price {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--gold);
}

#homepage-content .custom-product-item__qty {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--white);
    border: 1px solid rgba(45, 31, 18, 0.15);
    border-radius: 0.5rem;
    padding: 0.2rem;
}

#homepage-content .qty-btn-sub,
#homepage-content .qty-btn-add {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
    color: #1A120B;
}

#homepage-content .qty-btn-sub:disabled,
.qty-btn-add:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

#homepage-content .qty-input {
    width: 1.75rem;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Packaging Radios */
#homepage-content .packaging-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    #homepage-content .packaging-options {
        grid-template-columns: repeat(3, 1fr);
    }
}

#homepage-content .pkg-card input {
    display: none;
}

#homepage-content .pkg-card__box {
    display: block;
    background: #FAF7F2;
    border: 1px solid rgba(45, 31, 18, 0.12);
    border-radius: 1rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

#homepage-content .pkg-card input:checked+.pkg-card__box {
    background: #FFFDF9;
    border-color: var(--gold);
    box-shadow: 0 6px 20px rgba(249, 82, 40, 0.15);
}

#homepage-content .pkg-card__box strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    color: #1A120B;
    margin-bottom: 0.25rem;
}

#homepage-content .pkg-card__box small {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--muted);
}

/* Summary Sidebar */
#homepage-content .summary-card {
    position: sticky;
    top: 2rem;
    background: var(--white);
    border-radius: 1.75rem;
    padding: 2rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(45, 31, 18, 0.08);
}

#homepage-content .summary-card__title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #1A120B;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(45, 31, 18, 0.08);
}

#homepage-content .summary-items-list {
    min-height: 6rem;
    margin-bottom: 1rem;
}

#homepage-content .empty-summary-text {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted);
    font-style: italic;
}

#homepage-content .summary-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    margin-bottom: 0.65rem;
}

#homepage-content .summary-divider {
    height: 1px;
    background: rgba(45, 31, 18, 0.08);
    margin: 1.25rem 0;
}

#homepage-content .summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}

#homepage-content .summary-row--total {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gold);
}

#homepage-content .summary-delivery-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(249, 82, 40, 0.12);
    border-radius: 0.75rem;
    padding: 0.75rem;
    font-size: 0.75rem;
    color: var(--brown-mid);
    margin: 1.25rem 0;
}

#homepage-content .summary-delivery-note svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--gold);
    flex-shrink: 0;
}

#homepage-content .summary-guarantee {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
    margin-top: 1rem;
}

/* ── 21. Quick View, #homepage-content Recipe Drawer & Social Proof Toast ────── */
#homepage-content .quick-view-modal,
#homepage-content .recipe-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#homepage-content .quick-view-modal.is-open,
#homepage-content .recipe-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#homepage-content .quick-view-modal__backdrop,
#homepage-content .recipe-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 7, 5, 0.8);
    backdrop-filter: blur(8px);
}

#homepage-content .quick-view-modal__content,
#homepage-content .recipe-modal__content {
    position: relative;
    z-index: 10;
    background: var(--white);
    border-radius: 1.25rem;
    width: min(58rem, 94vw);
    max-height: calc(100dvh - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0) scale(0.985);
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

#homepage-content .quick-view-modal.is-open .quick-view-modal__content,
#homepage-content .recipe-modal.is-open .recipe-modal__content {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

#homepage-content .quick-view-modal__close,
#homepage-content .recipe-modal__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 20;
    background: #FAF7F2;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    color: var(--brown-dark);
}

#homepage-content .quick-view-modal__close:hover,
.recipe-modal__close:hover {
    background: var(--gold);
    color: var(--white);
}

#homepage-content .quick-view-modal__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    #homepage-content .quick-view-modal__grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }
}

#homepage-content .quick-view-modal__image-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: #FAF7F2;
    aspect-ratio: 4 / 3;
    min-width: 0;
    width: 100%;
}

#homepage-content .quick-view-modal__img {
    width: 100%;
    height: 100%;
    max-height: 22rem;
    object-fit: cover;
    display: block;
}

#homepage-content .quick-view-modal__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--gold);
    color: #1A120B;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
}

#homepage-content .quick-view-modal__title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: #1A120B;
    line-height: 1.1;
    margin: 0 0 0.75rem;
}

#homepage-content .quick-view-modal__details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

#homepage-content .quick-view-modal__price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0 0 0.85rem;
    border-bottom: 1px solid rgba(45, 31, 18, 0.08);
    margin-bottom: 1rem;
}

#homepage-content .quick-view-modal__price {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
}

#homepage-content .quick-view-modal__desc {
    font-family: var(--font-sans);
    color: var(--brown-mid);
    line-height: 1.65;
    margin: 0 0 1.25rem;
}

#homepage-content .quick-view-modal__variants {
    margin-bottom: 1.25rem;
}

#homepage-content .variant-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 0.5rem;
}

#homepage-content .variant-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

#homepage-content .variant-pill {
    padding: 0.4rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(45, 31, 18, 0.15);
    background: #FAF7F2;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
}

#homepage-content .variant-pill.is-active {
    background: var(--gold);
    color: #1A120B;
    border-color: var(--gold);
}

#homepage-content .quick-view-modal__actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

#homepage-content .quantity-picker {
    display: flex;
    align-items: center;
    border: 1px solid rgba(45, 31, 18, 0.15);
    border-radius: 0.875rem;
    padding: 0.35rem 0.75rem;
    gap: 0.75rem;
}

#homepage-content .quick-view-modal__actions .btn {
    flex: 1 1 14rem;
}

#homepage-content .quantity-picker .qty-btn {
    border: none;
    background: transparent;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 640px) {
    #homepage-content .quick-view-modal {
        padding: 0.75rem;
    }

    #homepage-content .quick-view-modal__content {
        width: min(100%, 94vw);
        max-height: calc(100dvh - 1.5rem);
        border-radius: 1rem;
        padding: 1.1rem;
    }

    #homepage-content .quick-view-modal__close {
        top: 0.75rem;
        right: 0.75rem;
        width: 2.25rem;
        height: 2.25rem;
    }

    #homepage-content .quick-view-modal__grid {
        gap: 1rem;
    }

    #homepage-content .quick-view-modal__image-wrapper {
        max-height: 32dvh;
    }

    #homepage-content .quick-view-modal__title {
        font-size: 1.45rem;
        padding-right: 2.25rem;
    }

    #homepage-content .quick-view-modal__desc {
        line-height: 1.55;
        margin-bottom: 1rem;
    }

    #homepage-content .quick-view-modal__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    #homepage-content .quick-view-modal__actions .btn {
        flex-basis: auto;
        width: 100%;
    }

    #homepage-content .quantity-picker {
        justify-content: space-between;
        width: 100%;
    }
}

/* Recipe Modal */
#homepage-content .recipe-modal__header {
    text-align: center;
    margin-bottom: 2rem;
}

#homepage-content .recipe-modal__tag {
    color: var(--gold);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#homepage-content .recipe-modal__title {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 700;
    color: #1A120B;
    margin: 0.5rem 0;
}

#homepage-content .recipe-spice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: #FAF7F2;
    border-radius: 0.875rem;
    margin-bottom: 0.75rem;
    font-family: var(--font-sans);
}

#homepage-content .recipe-modal__bundle-box {
    background: linear-gradient(135deg, #1D130B 0%, #3D2311 100%);
    border-radius: 1.5rem;
    padding: 1.5rem;
    color: var(--white);
    margin-top: 1.5rem;
}

#homepage-content .bundle-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

#homepage-content .bundle-total .total-price {
    font-size: 1.375rem;
    color: var(--gold);
}

/* Social Proof Toast */
#homepage-content .social-proof-toast {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 9999;
    background: var(--white);
    border-radius: 1.25rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 24rem;
    border: 1px solid rgba(249, 82, 40, 0.25);
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

#homepage-content .social-proof-toast.is-show {
    transform: translateY(0);
    opacity: 1;
}

#homepage-content .social-proof-toast__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    font-size: 0.75rem;
    color: var(--muted);
    cursor: pointer;
}

#homepage-content .social-proof-toast__avatar {
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(249, 82, 40, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

#homepage-content .toast-text {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: #1A120B;
    line-height: 1.4;
}

#homepage-content .toast-time {
    display: block;
    font-size: 0.75rem;
    color: var(--gold);
    margin-top: 0.25rem;
}

/* ── 22. Product Order & WhatsApp Integration Styles ── */
#homepage-content .title-sub-highlight {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 500;
    color: var(--gold);
    display: inline-block;
    margin-top: 0.35rem;
}

#homepage-content .order-mode-tabs {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

#homepage-content .mode-tab {
    flex: 1;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(45, 31, 18, 0.15);
    background: var(--white);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1A120B;
    cursor: pointer;
    transition: all 0.25s ease;
}

#homepage-content .mode-tab.is-active {
    background: #1D130B;
    color: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 8px 25px rgba(29, 19, 11, 0.2);
}

#homepage-content .builder-search-box {
    background: #FAF7F2;
    border-radius: 1.125rem;
    padding: 1.25rem;
    margin-bottom: 1.75rem;
    border: 1px solid rgba(45, 31, 18, 0.1);
}

#homepage-content .builder-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--white);
    border: 1px solid rgba(45, 31, 18, 0.15);
    border-radius: 0.875rem;
    padding: 0.65rem 1rem;
    margin-bottom: 0.85rem;
}

#homepage-content .builder-search-input-wrap svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--muted);
    flex-shrink: 0;
}

#homepage-content .builder-search-input {
    width: 100%;
    border: none;
    outline: none;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: #1A120B;
}

#homepage-content .builder-quick-tags {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#homepage-content .tag-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
}

#homepage-content .quick-tag-btn {
    background: var(--white);
    border: 1px solid rgba(249, 82, 40, 0.3);
    color: #1A120B;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.78125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#homepage-content .quick-tag-btn:hover {
    background: var(--gold);
    color: #1A120B;
    border-color: var(--gold);
}

#homepage-content .builder-rows-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

#homepage-content .builder-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    background: #FAF7F2;
    border: 1px solid rgba(45, 31, 18, 0.1);
    border-radius: 1.125rem;
    padding: 1.125rem;
    align-items: end;
    transition: border-color 0.2s ease;
}

@media (min-width: 640px) {
    #homepage-content .builder-row {
        grid-template-columns: 2.2fr 1.2fr 1.2fr auto;
    }
}

#homepage-content .builder-row:hover {
    border-color: var(--gold);
}

#homepage-content .row-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #1A120B;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

#homepage-content .row-qty-picker {
    display: flex;
    align-items: center;
    background: var(--white);
    border: 1px solid rgba(45, 31, 18, 0.15);
    border-radius: 0.875rem;
    padding: 0.35rem;
    gap: 0.25rem;
}

#homepage-content .row-qty-btn {
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 1.125rem;
    cursor: pointer;
    color: #1A120B;
}

#homepage-content .row-qty-input {
    width: 2.25rem;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.9375rem;
}

#homepage-content .row-remove-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.875rem;
    border: 1px solid rgba(192, 57, 43, 0.2);
    background: rgba(192, 57, 43, 0.08);
    color: #C0392B;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#homepage-content .row-remove-btn:hover {
    background: #C0392B;
    color: var(--white);
    border-color: #C0392B;
}

#homepage-content .add-product-btn {
    width: 100%;
    justify-content: center;
    border-style: dashed;
    border-width: 2px;
    padding: 0.9rem;
    font-weight: 700;
}

#homepage-content .whatsapp-submit-btn {
    background: linear-gradient(135deg, rgb(249, 82, 40) 0%, #D9431E 100%) !important;
    border-color: rgb(249, 82, 40) !important;
    color: #1A120B !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 25px rgba(249, 82, 40, 0.35) !important;
}

#homepage-content .whatsapp-submit-btn:hover {
    background: linear-gradient(135deg, rgb(249, 82, 40) 0%, rgb(249, 82, 40) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(249, 82, 40, 0.5) !important;
}

/* Premium custom order redesign */
#homepage-content .custom-order-cta,
#homepage-content.custom-order-page {
    --order-ink: #180A04;
    --order-brown: #2A1308;
    --order-red: #96131E;
    --order-red-deep: #96131E;
    --order-gold: rgb(249, 82, 40);
    --order-gold-soft: #FFB39E;
    --order-olive: #83B735;
    --order-paper: #FFF8EA;
    --order-paper-deep: #F3E2C3;
    --order-line: rgba(100, 57, 25, 0.16);
    --order-shadow: 0 24px 70px rgba(54, 25, 10, 0.16);
}

#homepage-content .custom-order-cta {
    padding: clamp(4rem, 8vw, 7rem) 0;
    background:
        linear-gradient(180deg, rgba(255, 248, 234, 0.9), rgba(245, 237, 216, 0.96)),
        linear-gradient(90deg, rgba(150, 19, 30, 0.05) 0 1px, transparent 1px 72px),
        linear-gradient(0deg, rgba(150, 19, 30, 0.04) 0 1px, transparent 1px 72px);
    position: relative;
    overflow: hidden;
}

#homepage-content .custom-order-cta__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(18rem, 0.7fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    min-height: 30rem;
    padding: clamp(2rem, 5vw, 4.25rem);
    overflow: hidden;
    border: 1px solid rgba(249, 82, 40, 0.22);
    border-radius: 0.75rem;
    background:
        linear-gradient(118deg, rgba(24, 10, 4, 0.98) 0%, rgba(45, 14, 9, 0.98) 49%, rgba(150, 19, 30, 0.93) 100%);
    box-shadow: 0 30px 90px rgba(24, 10, 4, 0.32);
}

#homepage-content #custom-order-cta:target .custom-order-cta__card {
    opacity: 1;
    transform: none;
}

#homepage-content .custom-order-cta__texture {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(135deg, rgba(255, 248, 234, 0.035) 0 1px, transparent 1px 14px);
    opacity: 0.55;
    pointer-events: none;
}

#homepage-content .custom-order-cta__content,
#homepage-content .custom-order-cta__visual {
    position: relative;
    z-index: 2;
}

#homepage-content .custom-order-cta__content {
    max-width: 49rem;
}

#homepage-content .custom-order-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(249, 82, 40, 0.26);
}

#homepage-content .custom-order-cta__badge::before {
    content: "";
    width: 2.4rem;
    height: 1px;
    background: var(--order-gold);
}

#homepage-content .custom-order-cta__title {
    max-width: 45rem;
    margin: 0 0 1.1rem;
    color: var(--cream);
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 4.9vw, 4.45rem);
    font-weight: 700;
    line-height: 0.98;
}

#homepage-content .title-sub-highlight {
    display: inline-block;
    margin-top: 0.7rem;
    color: var(--order-gold-soft);
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.6vw, 1.18rem);
    font-weight: 600;
    line-height: 1.45;
}

#homepage-content .custom-order-cta__desc {
    max-width: 42rem;
    margin: 0 0 1.65rem;
    color: rgba(255, 248, 234, 0.78);
    font-family: var(--font-sans);
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    font-weight: 300;
    line-height: 1.75;
}

#homepage-content .custom-order-cta__features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0 0 2rem;
}

#homepage-content .custom-order-cta__feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-height: 4.25rem;
    padding: 0.95rem;
    border: 1px solid rgba(249, 82, 40, 0.18);
    border-radius: 0.5rem;
    background: rgba(255, 248, 234, 0.055);
    color: rgba(255, 248, 234, 0.86);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

#homepage-content .custom-order-cta__feature-item:hover {
    transform: translateY(-3px);
    border-color: rgba(249, 82, 40, 0.34);
    background: linear-gradient(135deg, rgba(255, 248, 234, 0.09), rgba(131, 183, 53, 0.075));
}

#homepage-content .custom-order-cta__feature-item svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    color: var(--order-gold);
}

#homepage-content .custom-order-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

#homepage-content .custom-order-cta .btn {
    border-radius: 0.5rem;
    letter-spacing: 0.01em;
}

#homepage-content .custom-order-cta .btn--gold {
    background: linear-gradient(135deg, rgb(249, 82, 40) 0%, #D9431E 100%);
    color: #FFFFFF;
    font-size: 0.82rem;
    box-shadow: 0 16px 36px rgba(249, 82, 40, 0.28);
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

#homepage-content .custom-order-cta .btn--gold:hover,
#homepage-content .custom-order-cta .btn--gold:focus-visible {
    background: linear-gradient(135deg, rgb(249, 82, 40) 0%, rgb(249, 82, 40) 100%);
    color: #FFFFFF;
    box-shadow: 0 18px 44px rgba(249, 82, 40, 0.38);
    transform: translateY(-2px);
}

#homepage-content .custom-order-cta .btn--gold:active {
    transform: translateY(0);
    box-shadow: 0 12px 28px rgba(249, 82, 40, 0.28);
}

#homepage-content .custom-order-cta__visual {
    min-height: 25.5rem;
}

#homepage-content .custom-order-cta__photo {
    position: absolute;
    inset: 1rem 0.5rem 0.5rem 2.75rem;
    background-image: url("../images/category-masala-blends.webp");
    background-size: cover;
    background-position: center;
    border-radius: 0.75rem;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
}

#homepage-content .custom-order-cta__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(24, 10, 4, 0.06), rgba(24, 10, 4, 0.58));
}

#homepage-content .custom-order-cta__recipe-card {
    position: absolute;
    z-index: 2;
    min-width: 11.8rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(249, 82, 40, 0.28);
    border-radius: 0.5rem;
    background: rgba(24, 10, 4, 0.84);
    color: var(--cream);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(12px);
}

#homepage-content .custom-order-cta__recipe-card span {
    display: block;
    color: rgba(245, 237, 216, 0.55);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#homepage-content .custom-order-cta__recipe-card strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--order-gold-soft);
    font-family: var(--font-serif);
    font-size: 1rem;
}

#homepage-content .custom-order-cta__recipe-card--top {
    top: 0;
    right: 0;
}

#homepage-content .custom-order-cta__recipe-card--bottom {
    left: 0;
    bottom: 1.4rem;
}

#homepage-content .custom-order-cta__measure {
    position: absolute;
    right: 1.7rem;
    bottom: 1.9rem;
    z-index: 2;
    display: flex;
    gap: 0.35rem;
}

#homepage-content .custom-order-cta__measure span {
    display: block;
    width: 0.35rem;
    border-radius: 0.5rem;
    background: rgba(249, 82, 40, 0.86);
}

#homepage-content .custom-order-cta__measure span:nth-child(1) {
    height: 2.8rem;
}

#homepage-content .custom-order-cta__measure span:nth-child(2) {
    height: 4.2rem;
}

#homepage-content .custom-order-cta__measure span:nth-child(3) {
    height: 3.3rem;
    background: linear-gradient(180deg, rgba(249, 82, 40, 0.82), rgba(131, 183, 53, 0.7));
}

#homepage-content.custom-order-page {
    min-height: 100vh;
    background:
        linear-gradient(90deg, rgba(150, 19, 30, 0.035) 0 1px, transparent 1px 80px),
        linear-gradient(0deg, rgba(150, 19, 30, 0.03) 0 1px, transparent 1px 80px),
        linear-gradient(180deg, #FFF8EA 0%, #F6E8CC 48%, #FFFDF8 100%);
    color: var(--order-ink);
}

#homepage-content .custom-order-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 0.85rem 0;
    background: rgba(24, 10, 4, 0.94);
    border-bottom: 1px solid rgba(249, 82, 40, 0.24);
    box-shadow: 0 12px 34px rgba(24, 10, 4, 0.18);
    backdrop-filter: blur(14px);
}

#homepage-content .custom-order-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

#homepage-content .custom-order-header__back,
#homepage-content .custom-order-header__badge span {
    min-height: 2.5rem;
    border: 1px solid rgba(249, 82, 40, 0.22);
    border-radius: 0.5rem;
    background: rgba(255, 248, 234, 0.06);
}

#homepage-content .custom-order-header__back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    color: rgba(245, 237, 216, 0.82);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

#homepage-content .custom-order-header__back:hover,
#homepage-content .custom-order-header__back:focus-visible {
    color: var(--order-gold-soft);
    border-color: rgba(249, 82, 40, 0.48);
    background: rgba(255, 248, 234, 0.1);
    transform: translateX(-2px);
}

#homepage-content .custom-order-header__back:focus-visible {
    outline: 2px solid rgba(249, 82, 40, 0.72);
    outline-offset: 3px;
}

#homepage-content .custom-order-header__back svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
}

#homepage-content .custom-order-header__logo {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#homepage-content .custom-order-header__logo img {
    height: 3.15rem;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}

#homepage-content .custom-order-header__badge {
    justify-self: end;
}

#homepage-content .custom-order-header__badge span {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.9rem;
    color: var(--order-gold-soft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#homepage-content .custom-order-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3.75rem, 8vw, 6.5rem) 0 clamp(4.5rem, 8vw, 7rem);
    background:
        linear-gradient(118deg, rgba(24, 10, 4, 0.98) 0%, rgba(61, 9, 14, 0.94) 57%, rgba(134, 58, 0, 0.72) 100%),
        url("../images/hero-traditional-flavours.webp") center/cover;
    color: var(--cream);
}

#homepage-content .custom-order-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(135deg, rgba(255, 248, 234, 0.035) 0 1px, transparent 1px 16px),
        linear-gradient(180deg, transparent 72%, rgba(255, 248, 234, 0.1));
    pointer-events: none;
}

#homepage-content .custom-order-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.58fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
}

#homepage-content .custom-order-hero__content {
    max-width: 48rem;
}

#homepage-content .custom-order-hero__content .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

#homepage-content .custom-order-hero__content .eyebrow::before {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: currentColor;
}

#homepage-content .custom-order-hero__title {
    max-width: 42rem;
    margin: 0.95rem 0 1rem;
    color: var(--cream);
    font-family: var(--font-serif);
    font-size: clamp(3rem, 7vw, 6.25rem);
    font-weight: 700;
    line-height: 0.92;
}

#homepage-content .custom-order-hero__desc {
    max-width: 43rem;
    color: rgba(245, 237, 216, 0.78);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    font-weight: 300;
    line-height: 1.8;
}

#homepage-content .custom-order-hero__visual {
    position: relative;
    min-height: 24rem;
}

#homepage-content .custom-order-hero__photo {
    position: absolute;
    inset: 0.5rem 0 0 2.25rem;
    background-image: url("../images/hero-pure-spices.webp");
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(249, 82, 40, 0.26);
    border-radius: 0.75rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
}

#homepage-content .custom-order-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(24, 10, 4, 0.04), rgba(24, 10, 4, 0.54));
}

#homepage-content .custom-order-hero__seal {
    position: absolute;
    left: 0;
    top: 2rem;
    z-index: 2;
    width: 8.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(249, 82, 40, 0.32);
    border-radius: 0.5rem;
    background: rgba(24, 10, 4, 0.82);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(12px);
}

#homepage-content .custom-order-hero__seal span,
#homepage-content .custom-order-hero__route span {
    color: rgba(245, 237, 216, 0.62);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

#homepage-content .custom-order-hero__seal strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--order-gold-soft);
    font-family: var(--font-serif);
    font-size: 1.25rem;
}

#homepage-content .custom-order-hero__route {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.72rem 0.9rem;
    border: 1px solid rgba(249, 82, 40, 0.25);
    border-radius: 0.5rem;
    background: rgba(24, 10, 4, 0.78);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
}

#homepage-content .custom-order-hero__route i {
    display: block;
    width: 1.5rem;
    height: 1px;
    background: rgba(249, 82, 40, 0.52);
}

#homepage-content .custom-order-form-section {
    position: relative;
    padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6.5rem);
}

#homepage-content .custom-order-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 0.62fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

#homepage-content .custom-order-main {
    display: grid;
    gap: 1.25rem;
}

#homepage-content .form-card {
    position: relative;
    margin: 0;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    overflow: hidden;
    border: 1px solid var(--order-line);
    border-radius: 0.75rem;
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 248, 234, 0.96)),
        repeating-linear-gradient(135deg, rgba(150, 19, 30, 0.025) 0 1px, transparent 1px 18px);
    box-shadow: var(--order-shadow);
}

#homepage-content .form-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.25rem;
    background: linear-gradient(180deg, var(--order-gold) 0%, var(--order-red) 78%, var(--order-olive) 100%);
}

#homepage-content .form-card__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin: 0 0 1.45rem;
    padding: 0 0 1.1rem;
    border-bottom: 1px solid rgba(100, 57, 25, 0.12);
}

#homepage-content .form-card__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid rgba(249, 82, 40, 0.34);
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #2A1308, #96131E);
    color: var(--order-gold-soft);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(150, 19, 30, 0.18);
}

#homepage-content .form-card__title {
    margin: 0 0 0.3rem;
    color: var(--order-ink);
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.1;
}

#homepage-content .form-card__sub {
    max-width: 42rem;
    margin: 0;
    color: rgba(42, 19, 8, 0.62);
    font-size: 0.88rem;
    line-height: 1.6;
}

#homepage-content .form-card__body {
    position: relative;
    z-index: 2;
}

#homepage-content .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0 0 1rem;
}

@media (min-width: 640px) {
    #homepage-content .form-row--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#homepage-content .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 0 1rem;
}

#homepage-content .form-row .form-group {
    margin-bottom: 0;
}

#homepage-content .form-label,
#homepage-content .row-label {
    color: var(--order-ink);
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#homepage-content .required {
    color: #96131E;
}

#homepage-content .optional {
    color: rgba(42, 19, 8, 0.48);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

#homepage-content .form-control,
#homepage-content .builder-search-input {
    width: 100%;
    min-height: 3.15rem;
    border: 1px solid rgba(100, 57, 25, 0.2);
    border-radius: 0.5rem;
    background: rgba(255, 253, 248, 0.92);
    color: var(--order-ink);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

#homepage-content .form-control {
    padding: 0.9rem 1rem;
}

#homepage-content textarea.form-control {
    min-height: 7.5rem;
    resize: vertical;
    line-height: 1.6;
}

#homepage-content .form-control::placeholder,
#homepage-content .builder-search-input::placeholder {
    color: rgba(42, 19, 8, 0.38);
}

#homepage-content .form-control:hover,
#homepage-content .builder-search-input-wrap:hover {
    border-color: rgba(139, 58, 0, 0.34);
}

#homepage-content .form-control:focus,
#homepage-content .builder-search-input:focus,
#homepage-content .builder-search-input-wrap:focus-within {
    border-color: rgba(249, 82, 40, 0.86);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(249, 82, 40, 0.14);
}

#homepage-content #customOrderForm.was-submitted .form-control:required:invalid {
    border-color: rgba(150, 19, 30, 0.72);
    box-shadow: 0 0 0 4px rgba(150, 19, 30, 0.12);
}

#homepage-content #customOrderForm.was-submitted .form-control:required:valid {
    border-color: rgba(54, 116, 70, 0.58);
}

#homepage-content .order-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.45rem;
    border: 1px solid rgba(249, 82, 40, 0.2);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #1A0D00, #96131E);
    box-shadow: 0 18px 48px rgba(24, 10, 4, 0.16);
}

#homepage-content .mode-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3.25rem;
    padding: 0.72rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: rgba(245, 237, 216, 0.72);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
    cursor: pointer;
    transition: transform 0.25s ease, color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#homepage-content .mode-tab svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

#homepage-content .mode-tab:hover {
    color: var(--order-gold-soft);
    background: rgba(255, 248, 234, 0.06);
}

#homepage-content .mode-tab:focus-visible {
    outline: 2px solid rgba(249, 82, 40, 0.78);
    outline-offset: 3px;
}

#homepage-content .mode-tab.is-active {
    background: var(--order-paper);
    color: var(--order-ink);
    border-color: rgba(249, 82, 40, 0.48);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

#homepage-content .builder-search-box {
    margin: 0 0 1.3rem;
    padding: 1rem;
    border: 1px solid rgba(100, 57, 25, 0.14);
    border-radius: 0.75rem;
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.88), rgba(243, 226, 195, 0.42));
}

#homepage-content .builder-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    min-height: 3.15rem;
    margin: 0 0 0.85rem;
    padding: 0 0.9rem;
    border: 1px solid rgba(100, 57, 25, 0.2);
    border-radius: 0.5rem;
    background: #FFFFFF;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

#homepage-content .builder-search-input-wrap svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    color: var(--brown-mid);
}

#homepage-content .builder-search-input {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#homepage-content .builder-search-input:focus {
    box-shadow: none;
}

#homepage-content .builder-quick-tags {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#homepage-content .tag-label {
    margin-right: 0.15rem;
    color: rgba(42, 19, 8, 0.55);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#homepage-content .quick-tag-btn {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.4rem 0.72rem;
    border: 1px solid rgba(139, 58, 0, 0.2);
    border-radius: 0.5rem;
    background: rgba(255, 253, 248, 0.88);
    color: var(--order-ink);
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

#homepage-content .quick-tag-btn:hover,
#homepage-content .quick-tag-btn:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(249, 82, 40, 0.72);
    background: #1A0D00;
    color: var(--order-gold-soft);
}

#homepage-content .quick-tag-btn:focus-visible {
    outline: 2px solid rgba(249, 82, 40, 0.72);
    outline-offset: 3px;
}

#homepage-content .builder-rows-container {
    display: grid;
    gap: 0.9rem;
    margin: 0 0 1.1rem;
}

#homepage-content .builder-row {
    display: grid;
    grid-template-columns: minmax(12rem, 2.2fr) minmax(7.5rem, 0.9fr) minmax(7.5rem, 0.75fr) auto;
    gap: 0.75rem;
    align-items: end;
    padding: 1rem;
    border: 1px solid rgba(100, 57, 25, 0.14);
    border-radius: 0.75rem;
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 248, 234, 0.82));
    box-shadow: 0 12px 30px rgba(42, 19, 8, 0.06);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#homepage-content .builder-row:hover {
    transform: translateY(-2px);
    border-color: rgba(249, 82, 40, 0.42);
    box-shadow: 0 18px 38px rgba(42, 19, 8, 0.1);
}

#homepage-content .builder-row__field {
    min-width: 0;
}

#homepage-content .builder-row__variation[hidden] {
    display: none !important;
}

#homepage-content .row-label {
    display: block;
    margin-bottom: 0.38rem;
}

#homepage-content .row-qty-picker {
    display: grid;
    grid-template-columns: 2.2rem minmax(2.5rem, 1fr) 2.2rem;
    align-items: center;
    min-height: 3.15rem;
    overflow: hidden;
    border: 1px solid rgba(100, 57, 25, 0.2);
    border-radius: 0.5rem;
    background: #FFFFFF;
}

#homepage-content .row-qty-btn {
    width: 100%;
    height: 100%;
    min-height: 3.15rem;
    border: 0;
    background: rgba(243, 226, 195, 0.42);
    color: var(--order-ink);
    font-size: 1.05rem;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

#homepage-content .row-qty-btn:hover,
#homepage-content .row-qty-btn:focus-visible {
    background: var(--order-ink);
    color: var(--order-gold-soft);
}

#homepage-content .row-qty-btn:focus-visible,
#homepage-content .row-remove-btn:focus-visible {
    outline: 2px solid rgba(249, 82, 40, 0.72);
    outline-offset: 2px;
}

#homepage-content .row-qty-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--order-ink);
    text-align: center;
    font-size: 0.95rem;
    font-weight: 900;
    outline: none;
}

#homepage-content .row-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.15rem;
    height: 3.15rem;
    border: 1px solid rgba(150, 19, 30, 0.26);
    border-radius: 0.5rem;
    background: rgba(150, 19, 30, 0.08);
    color: #96131E;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

#homepage-content .row-remove-btn:hover {
    transform: translateY(-2px);
    border-color: #96131E;
    background: #96131E;
    color: #FFFFFF;
}

#homepage-content .add-product-btn {
    width: 100%;
    justify-content: center;
    min-height: 3.35rem;
    border-width: 1px;
    border-style: dashed;
    border-radius: 0.5rem;
    border-color: rgba(139, 58, 0, 0.35);
    background: rgba(255, 253, 248, 0.72);
    color: var(--order-ink);
    font-weight: 900;
}

#homepage-content .add-product-btn svg {
    display: none;
}

#homepage-content .add-product-btn:hover,
#homepage-content .add-product-btn:focus-visible {
    border-color: rgba(249, 82, 40, 0.86);
    background: #1A0D00;
    color: var(--order-gold-soft);
    box-shadow: 0 14px 30px rgba(24, 10, 4, 0.14);
}

#homepage-content .packaging-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

#homepage-content .pkg-card {
    position: relative;
    display: block;
}

#homepage-content .pkg-card input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

#homepage-content .pkg-card__box {
    position: relative;
    display: block;
    height: 100%;
    min-height: 7rem;
    padding: 1rem;
    border: 1px solid rgba(100, 57, 25, 0.16);
    border-radius: 0.75rem;
    background: rgba(255, 253, 248, 0.82);
    color: var(--order-ink);
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

#homepage-content .pkg-card__box::before {
    content: "";
    display: block;
    width: 1.65rem;
    height: 0.28rem;
    margin-bottom: 0.9rem;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, rgba(249, 82, 40, 0.72), rgba(131, 183, 53, 0.44));
}

#homepage-content .pkg-card input:checked + .pkg-card__box {
    border-color: rgba(249, 82, 40, 0.78);
    background: linear-gradient(180deg, #FFFFFF, #FFF5DD);
    box-shadow: 0 16px 34px rgba(249, 82, 40, 0.16);
}

#homepage-content .pkg-card:hover .pkg-card__box {
    transform: translateY(-2px);
    border-color: rgba(249, 82, 40, 0.5);
}

#homepage-content .pkg-card input:focus-visible + .pkg-card__box {
    outline: 2px solid rgba(249, 82, 40, 0.72);
    outline-offset: 3px;
}

#homepage-content .pkg-card__box strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--order-ink);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
}

#homepage-content .pkg-card__box small {
    display: block;
    color: rgba(42, 19, 8, 0.58);
    font-size: 0.78rem;
    line-height: 1.45;
}

#homepage-content .custom-order-sidebar {
    min-width: 0;
}

#homepage-content .summary-card {
    position: sticky;
    top: 6rem;
    overflow: hidden;
    border: 1px solid rgba(249, 82, 40, 0.25);
    border-radius: 0.75rem;
    background:
        linear-gradient(160deg, rgba(24, 10, 4, 0.98), rgba(60, 9, 14, 0.95)),
        repeating-linear-gradient(135deg, rgba(255, 248, 234, 0.05) 0 1px, transparent 1px 14px);
    color: var(--cream);
    box-shadow: 0 28px 80px rgba(24, 10, 4, 0.25);
}

#homepage-content .summary-card__header {
    padding: 1.35rem 1.35rem 1rem;
    border-bottom: 1px solid rgba(249, 82, 40, 0.18);
}

#homepage-content .summary-card__eyebrow {
    display: block;
    margin-bottom: 0.35rem;
    color: rgba(249, 82, 40, 0.82);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#homepage-content .summary-card__title {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--cream);
    font-family: var(--font-serif);
    font-size: clamp(1.55rem, 2vw, 2rem);
    font-weight: 700;
}

#homepage-content .summary-card__body {
    padding: 1.35rem;
}

#homepage-content .summary-items-list {
    min-height: 6rem;
    max-height: 18rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

#homepage-content .empty-summary-text {
    margin: 0;
    color: rgba(245, 237, 216, 0.58);
    font-size: 0.88rem;
    font-style: normal;
    line-height: 1.6;
}

#homepage-content .summary-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: start;
    margin: 0 0 0.7rem;
    padding: 0.8rem;
    border: 1px solid rgba(249, 82, 40, 0.13);
    border-radius: 0.5rem;
    background: rgba(255, 248, 234, 0.055);
    color: rgba(245, 237, 216, 0.82);
    font-size: 0.86rem;
    line-height: 1.45;
}

#homepage-content .summary-item-row strong {
    color: var(--order-gold-soft);
    white-space: nowrap;
}

#homepage-content .summary-divider {
    height: 1px;
    margin: 1.15rem 0;
    background: linear-gradient(90deg, transparent, rgba(249, 82, 40, 0.38), rgba(131, 183, 53, 0.22), transparent);
}

#homepage-content .summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
    color: rgba(245, 237, 216, 0.68);
    font-size: 0.92rem;
}

#homepage-content .summary-row strong {
    color: var(--cream);
}

#homepage-content .summary-row--total {
    margin-top: 0.7rem;
    padding: 0.95rem;
    border-radius: 0.5rem;
    background: rgba(249, 82, 40, 0.11);
    color: var(--order-gold-soft);
    font-size: 1.05rem;
    font-weight: 900;
}

#homepage-content .summary-row--total strong {
    color: var(--order-gold-soft);
}

#homepage-content .summary-delivery-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 0.9rem;
    border: 1px solid rgba(249, 82, 40, 0.17);
    border-radius: 0.5rem;
    background: rgba(255, 248, 234, 0.07);
    color: rgba(245, 237, 216, 0.7);
    font-size: 0.78rem;
    line-height: 1.5;
}

#homepage-content .summary-delivery-note svg {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    color: var(--order-gold-soft);
}

#homepage-content .whatsapp-submit-btn {
    width: 100%;
    justify-content: center;
    min-height: 3.45rem;
    min-width: 0;
    border: 0 !important;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgb(249, 82, 40) 0%, #D9431E 100%) !important;
    color: #180A04 !important;
    font-weight: 900 !important;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    box-shadow: 0 18px 42px rgba(249, 82, 40, 0.28) !important;
}

#homepage-content .whatsapp-submit-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

#homepage-content .whatsapp-submit-btn:hover,
#homepage-content .whatsapp-submit-btn:focus-visible {
    background: linear-gradient(135deg, rgb(249, 82, 40) 0%, rgb(249, 82, 40) 100%) !important;
    color: #180A04 !important;
    transform: translateY(-2px);
    box-shadow: 0 24px 56px rgba(249, 82, 40, 0.36) !important;
}

#homepage-content .whatsapp-submit-btn:focus-visible {
    outline: 2px solid rgba(245, 237, 216, 0.78);
    outline-offset: 3px;
}

#homepage-content .summary-guarantee {
    margin: 0.9rem 0 0;
    color: rgba(245, 237, 216, 0.56);
    font-size: 0.76rem;
    line-height: 1.55;
    text-align: center;
}

#homepage-content .custom-product-item {
    border-radius: 0.5rem;
}

@media (max-width: 1100px) {
    #homepage-content .custom-order-cta__features,
    #homepage-content .packaging-options {
        grid-template-columns: 1fr;
    }

    #homepage-content .builder-row {
        grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.6fr);
    }

    #homepage-content .builder-row__prod,
    #homepage-content .builder-row__variation,
    #homepage-content .builder-row__remove {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {
    #homepage-content .custom-order-cta__card,
    #homepage-content .custom-order-hero__grid,
    #homepage-content .custom-order-form-grid {
        grid-template-columns: 1fr;
    }

    #homepage-content .custom-order-cta__visual,
    #homepage-content .custom-order-hero__visual {
        min-height: 20rem;
    }

    #homepage-content .custom-order-cta__photo,
    #homepage-content .custom-order-hero__photo {
        inset: 0 0 0 2rem;
    }

    #homepage-content .summary-card {
        position: relative;
        top: auto;
    }
}

@media (max-width: 720px) {
    #homepage-content .custom-order-header__inner {
        grid-template-columns: 1fr auto;
    }

    #homepage-content .custom-order-header__badge {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    #homepage-content .custom-order-header__badge span {
        width: 100%;
        justify-content: center;
    }

    #homepage-content .custom-order-cta__card,
    #homepage-content .form-card {
        padding: 1.2rem;
    }

    #homepage-content .custom-order-cta__features,
    #homepage-content .order-mode-tabs {
        grid-template-columns: 1fr;
    }

    #homepage-content .custom-order-cta__visual {
        min-height: 17rem;
    }

    #homepage-content .custom-order-cta__recipe-card {
        min-width: 10.4rem;
    }

    #homepage-content .custom-order-hero__route {
        left: 1rem;
        right: 1rem;
        justify-content: center;
    }

    #homepage-content .form-card__header {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    #homepage-content .custom-order-hero {
        padding: 3rem 0 3.5rem;
    }

    #homepage-content .custom-order-header__back span {
        display: none;
    }

    #homepage-content .custom-order-header__logo img {
        height: 2.7rem;
    }

    #homepage-content .custom-order-cta__title,
    #homepage-content .custom-order-hero__title {
        font-size: clamp(2.35rem, 16vw, 3.25rem);
    }

    #homepage-content .builder-row {
        grid-template-columns: 1fr;
    }

    #homepage-content select.form-control {
        padding-left: 0.72rem;
        padding-right: 0.45rem;
        font-size: 0.78rem;
    }

    #homepage-content .row-remove-btn {
        width: 100%;
    }

    #homepage-content .summary-item-row {
        grid-template-columns: 1fr;
    }

    #homepage-content .summary-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

#homepage-content .form-card__step--method {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#homepage-content .submission-method-card .form-card__header {
    margin-bottom: 1.15rem;
}

#homepage-content .submission-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

#homepage-content .submission-method {
    position: relative;
    display: block;
    min-width: 0;
}

#homepage-content .submission-method input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

#homepage-content .submission-method__box {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    height: 100%;
    min-height: 9.25rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid rgba(100, 57, 25, 0.16);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(255, 248, 234, 0.76));
    color: var(--order-ink);
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

#homepage-content .submission-method__box::after {
    content: "";
    position: absolute;
    right: 0.9rem;
    top: 0.9rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(249, 82, 40, 0.28);
}

#homepage-content .submission-method__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border: 1px solid rgba(249, 82, 40, 0.32);
    border-radius: 0.55rem;
    background: linear-gradient(135deg, #2A1308, #96131E);
    color: var(--order-gold-soft);
    box-shadow: 0 12px 28px rgba(150, 19, 30, 0.14);
}

#homepage-content .submission-method__icon svg {
    width: 1.18rem;
    height: 1.18rem;
}

#homepage-content .submission-method__content {
    min-width: 0;
}

#homepage-content .submission-method__meta {
    display: inline-flex;
    margin-bottom: 0.38rem;
    color: rgba(150, 19, 30, 0.72);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#homepage-content .submission-method__content strong {
    display: block;
    margin-bottom: 0.32rem;
    color: var(--order-ink);
    font-family: var(--font-serif);
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.05;
}

#homepage-content .submission-method__content small {
    display: block;
    color: rgba(42, 19, 8, 0.58);
    font-size: 0.78rem;
    line-height: 1.5;
}

#homepage-content .submission-method:hover .submission-method__box {
    transform: translateY(-2px);
    border-color: rgba(249, 82, 40, 0.48);
    box-shadow: 0 16px 34px rgba(42, 19, 8, 0.1);
}

#homepage-content .submission-method input:checked + .submission-method__box {
    border-color: rgba(249, 82, 40, 0.78);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 245, 221, 0.94)),
        linear-gradient(135deg, rgba(150, 19, 30, 0.08), rgba(249, 82, 40, 0.12));
    box-shadow: 0 18px 42px rgba(249, 82, 40, 0.16);
}

#homepage-content .submission-method input:checked + .submission-method__box::after {
    background: var(--order-gold);
    box-shadow: 0 0 0 4px rgba(249, 82, 40, 0.15);
}

#homepage-content .submission-method input:focus-visible + .submission-method__box {
    outline: 2px solid rgba(249, 82, 40, 0.72);
    outline-offset: 3px;
}

#homepage-content .submission-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.95rem;
    padding: 0.78rem 0.9rem;
    border: 1px solid rgba(100, 57, 25, 0.13);
    border-radius: 0.65rem;
    background: rgba(255, 253, 248, 0.74);
}

#homepage-content .submission-flow span {
    color: rgba(42, 19, 8, 0.68);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#homepage-content .submission-flow span:first-child {
    color: var(--order-red);
}

#homepage-content .submission-flow i {
    width: 1.35rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(249, 82, 40, 0.58), rgba(131, 183, 53, 0.24));
}

#homepage-content .builder-guidance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.72rem;
    margin: 0 0 1rem;
}

#homepage-content .builder-guidance__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.18rem 0.7rem;
    align-items: center;
    min-height: 4.2rem;
    padding: 0.82rem;
    border: 1px solid rgba(100, 57, 25, 0.13);
    border-radius: 0.65rem;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(243, 226, 195, 0.34));
}

#homepage-content .builder-guidance__item span {
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #2A1308, #96131E);
    color: var(--order-gold-soft);
    font-size: 0.68rem;
    font-weight: 900;
}

#homepage-content .builder-guidance__item strong {
    color: var(--order-ink);
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1;
}

#homepage-content .builder-guidance__item small {
    color: rgba(42, 19, 8, 0.54);
    font-size: 0.73rem;
    line-height: 1.35;
}

#homepage-content .builder-row {
    grid-template-columns: auto minmax(13rem, 2.05fr) minmax(7.2rem, 0.76fr) minmax(7.4rem, 0.72fr) minmax(6.5rem, 0.62fr) auto;
}

#homepage-content .builder-row__number {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    min-height: 3.15rem;
    border: 1px solid rgba(249, 82, 40, 0.24);
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(42, 19, 8, 0.96), rgba(150, 19, 30, 0.92));
    color: var(--order-gold-soft);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

#homepage-content .builder-row__line-total {
    min-width: 0;
}

#homepage-content .row-line-total {
    display: flex;
    align-items: center;
    min-height: 3.15rem;
    padding: 0.65rem 0.78rem;
    border: 1px solid rgba(249, 82, 40, 0.24);
    border-radius: 0.5rem;
    background: rgba(255, 253, 248, 0.92);
    color: var(--order-red);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
}

#homepage-content .summary-card__sub {
    margin: 0.35rem 0 0;
    color: rgba(245, 237, 216, 0.58);
    font-size: 0.78rem;
    line-height: 1.45;
}

#homepage-content .summary-item-row span small {
    display: block;
    margin-top: 0.18rem;
    color: rgba(245, 237, 216, 0.5);
    font-size: 0.72rem;
    line-height: 1.35;
}

#homepage-content .summary-row--method {
    margin-top: 0.6rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(249, 82, 40, 0.16);
}

#homepage-content .summary-row--method strong {
    color: var(--order-gold-soft);
}

#homepage-content .summary-secondary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.7rem;
}

#homepage-content .summary-option-btn {
    min-height: 2.7rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(249, 82, 40, 0.22);
    border-radius: 0.5rem;
    background: rgba(255, 248, 234, 0.07);
    color: rgba(245, 237, 216, 0.76);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

#homepage-content .summary-option-btn:hover,
#homepage-content .summary-option-btn:focus-visible,
#homepage-content .summary-option-btn.is-active {
    transform: translateY(-2px);
    border-color: rgba(249, 82, 40, 0.5);
    background: rgba(249, 82, 40, 0.13);
    color: var(--order-gold-soft);
}

#homepage-content .summary-option-btn:focus-visible {
    outline: 2px solid rgba(245, 237, 216, 0.72);
    outline-offset: 3px;
}

#homepage-content .checkout-submit-btn.is-loading {
    cursor: wait;
    opacity: 0.78;
    transform: none;
}

@media (max-width: 1180px) {
    #homepage-content .submission-methods,
    #homepage-content .builder-guidance {
        grid-template-columns: 1fr;
    }

    #homepage-content .builder-row {
        grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.7fr);
    }

    #homepage-content .builder-row__number,
    #homepage-content .builder-row__prod,
    #homepage-content .builder-row__variation,
    #homepage-content .builder-row__remove {
        grid-column: 1 / -1;
    }

    #homepage-content .builder-row__number {
        justify-content: flex-start;
        padding: 0 0.8rem;
    }
}

@media (max-width: 560px) {
    #homepage-content .submission-method__box {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    #homepage-content .submission-flow {
        align-items: flex-start;
        flex-direction: column;
    }

    #homepage-content .submission-flow i {
        display: none;
    }

    #homepage-content .builder-row {
        grid-template-columns: 1fr;
    }

    #homepage-content .builder-row__number,
    #homepage-content .builder-row__prod,
    #homepage-content .builder-row__variation,
    #homepage-content .builder-row__remove {
        grid-column: auto;
    }

    #homepage-content .row-line-total {
        justify-content: center;
    }

    #homepage-content .summary-secondary-actions {
        grid-template-columns: 1fr;
    }
}

/* ── 22.1 Simplified Customize Order Flow ─────────────────── */
#homepage-content.custom-order-page {
    background:
        radial-gradient(circle at 86% 34%, rgba(131, 183, 53, 0.075), transparent 18rem),
        linear-gradient(90deg, rgba(150, 19, 30, 0.025) 0 1px, transparent 1px 96px),
        linear-gradient(180deg, #FFF8EA 0%, #F8E9CB 46%, #FFFDF8 100%);
}

#homepage-content .custom-order-hero--compact {
    padding: clamp(1.9rem, 4vw, 3.2rem) 0 clamp(2.1rem, 4.5vw, 3.5rem);
}

#homepage-content .custom-order-hero--compact .custom-order-hero__grid {
    grid-template-columns: minmax(0, 47rem);
    justify-content: center;
    text-align: center;
}

#homepage-content .custom-order-hero--compact .custom-order-hero__title {
    max-width: 35rem;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2.3rem, 5vw, 4.1rem);
    line-height: 1;
}

#homepage-content .custom-order-hero--compact .custom-order-hero__desc {
    max-width: 41rem;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(0.96rem, 1.2vw, 1.06rem);
}

#homepage-content .custom-order-hero--compact .custom-order-hero__content .eyebrow {
    justify-content: center;
}

#homepage-content .custom-order-hero--compact .custom-order-hero__content .eyebrow::before {
    background: linear-gradient(90deg, var(--order-gold), rgba(131, 183, 53, 0.72));
}

#homepage-content .custom-order-form-section {
    padding: clamp(2rem, 5vw, 4.25rem) 0 clamp(3rem, 6vw, 5rem);
}

#homepage-content .custom-order-form-grid {
    grid-template-columns: minmax(0, 1.34fr) minmax(18rem, 0.54fr);
}

#homepage-content .order-mode-tabs {
    position: relative;
    display: grid;
    margin: 0;
    border-radius: 0.5rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.28rem, 0.8vw, 0.5rem);
    border-color: rgba(131, 183, 53, 0.28);
    background: linear-gradient(135deg, #1A0D00 0%, #96131E 58%, rgba(47, 125, 37, 0.95) 100%);
}

#homepage-content .mode-tab {
    border-radius: 0.38rem;
    min-width: 0;
    min-height: 3.15rem;
    padding: 0.55rem 0.72rem;
}

#homepage-content #tabBuilder,
#homepage-content #tabFreeform {
    padding-inline: 0.72rem;
}

#homepage-content .mode-tab-divider {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    align-self: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(131, 183, 53, 0.68);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(131, 183, 53, 0.86), rgba(38, 51, 26, 0.9));
    color: #D8F5CE;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    box-shadow: 0 0 0 5px rgba(26, 13, 0, 0.85), 0 0 0 8px rgba(131, 183, 53, 0.13);
    transform: none;
    pointer-events: none;
}

#homepage-content .mode-tab-divider::before,
#homepage-content .mode-tab-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1px;
    height: 1.05rem;
    background: rgba(221, 228, 180, 0.42);
    transform: translateY(-50%);
}

#homepage-content .mode-tab-divider::before {
    left: -0.32rem;
}

#homepage-content .mode-tab-divider::after {
    right: -0.32rem;
}

#homepage-content .mode-tab[aria-selected="false"] {
    background: rgba(131, 183, 53, 0.035);
    color: rgba(245, 237, 216, 0.72);
    border-color: transparent;
    box-shadow: none;
}

#homepage-content .mode-tab[aria-selected="true"] {
    background: linear-gradient(135deg, var(--order-paper) 0%, #FFFBF2 72%, rgba(235, 239, 208, 0.88) 100%);
    color: var(--order-ink);
    border-color: rgba(131, 183, 53, 0.54);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(131, 183, 53, 0.08);
}

#homepage-content #customOrderForm[data-order-mode="builder"] #tabBuilder,
#homepage-content #customOrderForm[data-order-mode="freeform"] #tabFreeform {
    background: linear-gradient(135deg, var(--order-paper) 0%, #FFFBF2 72%, rgba(235, 239, 208, 0.88) 100%);
    color: var(--order-ink);
    border-color: rgba(131, 183, 53, 0.54);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(131, 183, 53, 0.08);
}

#homepage-content #customOrderForm[data-order-mode="builder"] #tabFreeform,
#homepage-content #customOrderForm[data-order-mode="freeform"] #tabBuilder {
    background: rgba(131, 183, 53, 0.035);
    color: rgba(245, 237, 216, 0.72);
    border-color: transparent;
    box-shadow: none;
}

#homepage-content .mode-tab__text {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    text-align: center;
}

#homepage-content .mode-tab__text strong,
#homepage-content .mode-tab__text small {
    display: block;
    min-width: 0;
    line-height: 1.15;
    white-space: nowrap;
}

#homepage-content .mode-tab__text strong {
    font-size: 0.84rem;
}

#homepage-content .mode-tab__text small {
    max-width: 100%;
    overflow: hidden;
    color: currentColor;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0.68;
    text-overflow: ellipsis;
    text-transform: none;
}

#homepage-content .form-card {
    border-radius: 0.5rem;
}

#homepage-content .form-card::before {
    background: linear-gradient(180deg, var(--order-gold) 0%, var(--order-red) 62%, rgba(131, 183, 53, 0.92) 100%);
}

#homepage-content .form-card[hidden] {
    display: none !important;
}

#homepage-content .form-card__header {
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
}

#homepage-content .form-card__title,
#homepage-content .summary-card__title {
    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
}

#homepage-content .form-row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#homepage-content .builder-search-box {
    margin-bottom: 1rem;
    padding: 0.9rem;
    border-color: rgba(131, 183, 53, 0.18);
    border-radius: 0.5rem;
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(243, 226, 195, 0.38)),
        linear-gradient(135deg, rgba(131, 183, 53, 0.08), transparent 48%);
}

#homepage-content .builder-search-input-wrap,
#homepage-content .form-control,
#homepage-content .row-qty-picker,
#homepage-content .row-line-total,
#homepage-content .row-remove-btn,
#homepage-content .add-product-btn,
#homepage-content .summary-item-row,
#homepage-content .summary-row--total,
#homepage-content .whatsapp-submit-btn {
    border-radius: 0.5rem;
}

#homepage-content .builder-source-note {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.55rem 0 0;
    color: rgba(38, 51, 26, 0.64);
    font-size: 0.74rem;
    line-height: 1.35;
}

#homepage-content .builder-source-note::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: rgba(131, 183, 53, 0.72);
    box-shadow: 0 0 0 3px rgba(131, 183, 53, 0.1);
    flex: 0 0 auto;
}

#homepage-content .builder-search-results {
    display: grid;
    gap: 0.45rem;
    margin: 0.7rem 0 0.65rem;
}

#homepage-content .builder-search-results[hidden] {
    display: none !important;
}

#homepage-content .builder-search-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0.68rem 0.78rem;
    border: 1px solid rgba(100, 57, 25, 0.12);
    border-radius: 0.5rem;
    background: rgba(255, 253, 248, 0.92);
    color: var(--order-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#homepage-content .builder-search-result:hover,
#homepage-content .builder-search-result:focus-visible {
    border-color: rgba(131, 183, 53, 0.42);
    background: #FFFFFF;
    box-shadow: 0 0.55rem 1.2rem rgba(45, 31, 18, 0.09);
    transform: translateY(-1px);
    outline: none;
}

#homepage-content .builder-search-result__name {
    display: block;
    min-width: 0;
    color: var(--order-ink);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.25;
}

#homepage-content .builder-search-result__meta {
    display: block;
    margin-top: 0.14rem;
    color: rgba(42, 19, 8, 0.58);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
}

#homepage-content .builder-search-result__price {
    color: var(--order-olive);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

#homepage-content .builder-search-result--empty {
    grid-template-columns: 1fr;
    cursor: default;
}

#homepage-content .builder-search-result--empty:hover {
    border-color: rgba(100, 57, 25, 0.12);
    box-shadow: none;
    transform: none;
}

#homepage-content .builder-row {
    grid-template-columns: auto minmax(12rem, 1fr) minmax(8.5rem, 0.48fr) minmax(8rem, 0.26fr) minmax(7rem, 0.22fr) auto;
    gap: 0.72rem;
    padding: 0.9rem;
    border-radius: 0.5rem;
}

#homepage-content .builder-row__prod,
#homepage-content .builder-row__variation,
#homepage-content .builder-row__remove {
    grid-column: auto;
}

#homepage-content .builder-row__number {
    min-width: 2.15rem;
    border-radius: 0.5rem;
}

#homepage-content .builder-row__remove {
    align-self: end;
}

#homepage-content .add-product-btn {
    margin-top: 0.15rem;
    border-color: rgba(131, 183, 53, 0.34);
    background: rgba(131, 183, 53, 0.035);
}

#homepage-content.custom-order-page .form-control:hover,
#homepage-content.custom-order-page .builder-search-input-wrap:hover {
    border-color: rgba(131, 183, 53, 0.4);
}

#homepage-content.custom-order-page .form-control:focus,
#homepage-content.custom-order-page .builder-search-input-wrap:focus-within {
    border-color: rgba(131, 183, 53, 0.72);
    box-shadow: 0 0 0 4px rgba(131, 183, 53, 0.14);
}

#homepage-content .summary-card {
    border-radius: 0.5rem;
}

#homepage-content .summary-card__header,
#homepage-content .summary-card__body {
    padding: 1.15rem;
}

#homepage-content .summary-items-list {
    min-height: 5.25rem;
    max-height: 14rem;
}

#homepage-content .summary-item-row {
    padding: 0.72rem;
}

#homepage-content .summary-row--method {
    margin-bottom: 1rem;
}

#homepage-content .summary-row--total {
    background: linear-gradient(135deg, rgba(249, 82, 40, 0.13), rgba(131, 183, 53, 0.11));
}

#homepage-content .summary-delivery-note,
#homepage-content .summary-secondary-actions {
    display: none;
}

#homepage-content #customOrderForm[data-submission-method="message"] .summary-row--total strong,
#homepage-content #customOrderForm[data-submission-method="message"] .summary-row--method strong {
    font-size: 0.92rem;
}

@media (max-width: 1180px) {
    #homepage-content .builder-row {
        grid-template-columns: auto minmax(0, 1fr) minmax(8rem, 0.4fr);
    }

    #homepage-content .builder-row__line-total,
    #homepage-content .builder-row__remove {
        grid-column: auto;
    }
}

@media (max-width: 991px) {
    #homepage-content .custom-order-hero--compact .custom-order-hero__grid,
    #homepage-content .custom-order-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    #homepage-content .form-row--3 {
        grid-template-columns: 1fr;
    }

    #homepage-content .order-mode-tabs {
        grid-template-columns: minmax(0, 1fr) 1.9rem minmax(0, 1fr);
        gap: 0.24rem;
    }

    #homepage-content #tabBuilder,
    #homepage-content #tabFreeform {
        padding-inline: 0.5rem;
    }

    #homepage-content .mode-tab__text {
        display: block;
    }

    #homepage-content .mode-tab__text small {
        display: block;
        max-width: 100%;
        margin-top: 0.12rem;
    }

    #homepage-content .mode-tab-divider {
        justify-self: center;
        width: 1.9rem;
        height: 1.9rem;
        font-size: 0.62rem;
    }
}

@media (max-width: 420px) {
    #homepage-content .mode-tab {
        gap: 0.35rem;
        min-height: 2.75rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    #homepage-content .order-mode-tabs {
        grid-template-columns: minmax(0, 1fr) 1.45rem minmax(0, 1fr);
        gap: 0.16rem;
    }

    #homepage-content .mode-tab svg {
        display: none;
    }

    #homepage-content .mode-tab__text strong {
        font-size: 0.64rem;
    }

    #homepage-content .mode-tab__text small {
        font-size: 0.5rem;
    }

    #homepage-content #tabBuilder,
    #homepage-content #tabFreeform {
        padding-inline: 0.2rem;
    }

    #homepage-content .mode-tab-divider {
        width: 1.45rem;
        height: 1.45rem;
        font-size: 0.56rem;
    }
}

@media (max-width: 360px) {
    #homepage-content .mode-tab__text strong {
        font-size: 0.58rem;
    }

    #homepage-content .mode-tab__text small {
        display: none;
    }

    #homepage-content .mode-tab-divider {
        width: 1.32rem;
        height: 1.32rem;
        font-size: 0.5rem;
    }
}

@media (max-width: 560px) {
    #homepage-content .custom-order-hero--compact {
        padding: 2.4rem 0 3rem;
    }

    #homepage-content .builder-row {
        grid-template-columns: 1fr;
    }

    #homepage-content .builder-row__number,
    #homepage-content .builder-row__prod,
    #homepage-content .builder-row__variation,
    #homepage-content .builder-row__line-total,
    #homepage-content .builder-row__remove {
        grid-column: auto;
    }

    #homepage-content .builder-row__number {
        justify-content: flex-start;
        padding: 0 0.8rem;
    }

    #homepage-content .row-remove-btn {
        width: 100%;
    }
}

/* ── 23. WoodMart Theme Content-Width Safety ── */
/* `overflow-x: hidden` makes the other axis compute to `auto`; use clip so
   the document root remains the only vertical page scroller. */
#homepage-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
}

@supports not (overflow: clip) {
    #homepage-content {
        overflow: visible !important;
    }
}

#homepage-content .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
}

/* ── 24. Master Collections Final Safety Overrides ───────── */
#homepage-content section.bundles .bundles__grid.no-scrollbar {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
}

#homepage-content section.bundles .bundles__grid.no-scrollbar::-webkit-scrollbar {
    display: none !important;
}

#homepage-content section.bundles .bundles__grid.no-scrollbar > .bundle-card {
    flex: 0 0 clamp(18.25rem, 29vw, 22.75rem) !important;
    width: clamp(18.25rem, 29vw, 22.75rem) !important;
    min-width: clamp(18.25rem, 29vw, 22.75rem) !important;
    max-width: none !important;
    scroll-snap-align: start !important;
}

#homepage-content section.bundles .bundle-card__desc {
    color: rgba(255, 250, 240, 0.96) !important;
}

#homepage-content section.bundles .bundle-card__deal-badge {
    background: rgba(245, 237, 216, 0.18) !important;
    border-color: rgba(245, 237, 216, 0.34) !important;
    color: #FFF7E8 !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
}

#homepage-content section.bundles .bundles__grid.no-scrollbar > .bundle-card:nth-child(4),
#homepage-content section.bundles .bundles__grid.no-scrollbar > .bundle-card.bundle-card--seeds {
    background: radial-gradient(circle at 16% 8%, rgba(249, 82, 40, 0.14), transparent 34%), linear-gradient(145deg, #182412, #3C4A20) !important;
}

#homepage-content section.bundles .bundles__grid.no-scrollbar > .bundle-card:nth-child(5),
#homepage-content section.bundles .bundles__grid.no-scrollbar > .bundle-card.bundle-card--wellness {
    background: radial-gradient(circle at 16% 8%, rgba(131, 183, 53, 0.24), transparent 34%), linear-gradient(145deg, #2A1209, #96131E) !important;
}

/* ── 24b. Smooth Custom Horizontal Scrollers ─────────────── */
#homepage-content :is(.categories__track, .products-row, .bundles__grid, .grid-products, .flash-sale__products) {
    scroll-behavior: smooth;
    scroll-padding-inline: 0.15rem;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

#homepage-content :is(.categories__track, .products-row, .bundles__grid, .grid-products, .flash-sale__products).is-dragging {
    scroll-behavior: auto;
    user-select: none;
    cursor: grabbing;
}

#homepage-content :is(.categories__track, .products-row, .grid-products) {
    cursor: grab;
}

@media (prefers-reduced-motion: reduce) {
    #homepage-content :is(.categories__track, .products-row, .bundles__grid, .grid-products, .flash-sale__products) {
        scroll-behavior: auto;
    }

    #homepage-content .search-modal__container,
    #homepage-content .quick-view-modal__content,
    #homepage-content .recipe-modal__content,
    #homepage-content .zm-cart-status {
        transition-duration: 1ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    body.zm-page-booting #homepage-content,
    body.zm-page-ready #homepage-content,
    #homepage-content .reveal,
    #homepage-content .reveal.visible,
    #homepage-content .motion-reveal,
    #homepage-content .motion-reveal.visible {
        opacity: 1 !important;
        transform: none !important;
    }

    #homepage-content .essence-hero__actions.reveal,
    #homepage-content .essence-hero__actions.reveal.visible {
        transform: translateX(-50%) !important;
    }

    #homepage-content .hero__media-bg,
    #homepage-content .hero__video,
    #homepage-content .motion-bg-media,
    #homepage-content .product-card__svg-icon,
    #homepage-content .grid-card__svg-icon {
        transform: none !important;
        will-change: auto !important;
    }

}

/* ── 25. Homepage Spacing Refinement ───────────────────────── */
#homepage-content {
    --home-section-y: clamp(4rem, 6vw, 5rem);
    --home-section-y-tight: clamp(3rem, 4.8vw, 3.9rem);
    --home-intro-gap: clamp(1.65rem, 2.4vw, 2.25rem);
    --home-custom-order-y: clamp(2.25rem, 3.8vw, 3.35rem);
}

#homepage-content .section-header {
    margin-bottom: var(--home-intro-gap);
}

#homepage-content .section-header__eyebrow {
    margin-bottom: 0.75rem;
}

#homepage-content .section-subtitle {
    margin-top: 0.65rem;
    line-height: 1.55;
}

#homepage-content .categories {
    padding: var(--home-section-y) 0;
}

#homepage-content .categories__header {
    margin-bottom: 1.85rem;
}

#homepage-content .categories__header .section-subtitle {
    margin-top: 0.55rem;
}

#homepage-content .most-loved {
    padding: clamp(2.85rem, 4.5vw, 3.5rem) 0;
}

#homepage-content .most-loved__header {
    margin-bottom: 1.15rem;
}

#homepage-content .most-loved__header .section-subtitle {
    margin-top: 0.55rem;
}

#homepage-content .bundles {
    padding: clamp(4.4rem, 6.4vw, 5.15rem) 0;
}

#homepage-content .bundles__controls {
    margin: -0.8rem 0 1.05rem;
}

#homepage-content .products-grid {
    padding: clamp(2.85rem, 4.5vw, 3.35rem) 0 clamp(3.25rem, 5vw, 4rem);
}

#homepage-content .products-grid__header {
    margin-bottom: 1rem;
}

#homepage-content .products-grid__header .section-subtitle {
    margin-top: 0.5rem;
}

#homepage-content .filter-pills {
    margin-bottom: 0.7rem;
}

#homepage-content .products-grid__actions {
    margin-bottom: 0.85rem;
}

#homepage-content .products-grid__explore {
    margin-top: 1.5rem;
}

#homepage-content .custom-order-cta {
    padding: var(--home-custom-order-y) 0;
}

#homepage-content .custom-order-cta__card {
    gap: clamp(1.2rem, 3vw, 2.5rem);
    min-height: 0;
    padding: clamp(1.45rem, 3.4vw, 2.75rem);
}

#homepage-content .custom-order-cta__badge {
    margin-bottom: 0.7rem;
    padding-bottom: 0.45rem;
}

#homepage-content .custom-order-cta__title {
    margin-bottom: 0.75rem;
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    line-height: 1.02;
}

#homepage-content .title-sub-highlight {
    margin-top: 0.42rem;
}

#homepage-content .custom-order-cta__desc {
    margin-bottom: 1rem;
    line-height: 1.55;
}

#homepage-content .custom-order-cta__features {
    gap: 0.65rem;
    margin-bottom: 1.15rem;
}

#homepage-content .custom-order-cta__feature-item {
    min-height: 3.3rem;
    padding: 0.72rem;
}

#homepage-content .custom-order-cta__visual {
    min-height: 20rem;
}

#homepage-content .custom-order-cta__photo {
    inset: 0.65rem 0.35rem 0.35rem 1.75rem;
}

#homepage-content .custom-order-cta__recipe-card {
    padding: 0.65rem 0.78rem;
}

#homepage-content .custom-order-cta__recipe-card--bottom {
    bottom: 0.85rem;
}

#homepage-content .flash-sale {
    padding: clamp(4.25rem, 6vw, 5rem) var(--page-gutter);
}

#homepage-content .flash-sale__inner {
    gap: clamp(2.75rem, 4vw, 3.5rem);
}

#homepage-content .flash-sale__eyebrow,
#homepage-content .flash-sale__title {
    margin-bottom: 1rem;
}

#homepage-content .flash-sale__desc {
    margin-bottom: 1.75rem;
    line-height: 1.55;
}

#homepage-content .flash-sale__controls {
    margin-top: 1.4rem;
}

#homepage-content .about {
    padding: clamp(4rem, 6vw, 5rem) 0;
}

#homepage-content .about__title {
    margin-bottom: 1.15rem;
}

#homepage-content .about__body {
    margin-bottom: 1.15rem;
}

#homepage-content .about__body p {
    margin-bottom: 0.8rem;
    line-height: 1.62;
}

#homepage-content .about__promise {
    margin-top: 1rem;
}

#homepage-content .features,
#homepage-content .testimonials {
    padding-top: clamp(4.25rem, 6vw, 5.25rem);
    padding-bottom: clamp(4.25rem, 6vw, 5.25rem);
}

@media (max-width: 767px) {
    #homepage-content {
        --home-section-y: clamp(3rem, 9vw, 4rem);
        --home-section-y-tight: clamp(2.45rem, 8vw, 3.25rem);
        --home-intro-gap: 1.15rem;
        --home-custom-order-y: clamp(1.85rem, 7vw, 2.55rem);
    }

    #homepage-content .categories__header,
    #homepage-content .most-loved__header {
        margin-bottom: 1.15rem;
    }

    #homepage-content .custom-order-cta__card {
        grid-template-columns: 1fr;
    }

    #homepage-content .custom-order-cta__features {
        grid-template-columns: 1fr;
    }

    #homepage-content .custom-order-cta__visual {
        min-height: 15rem;
    }
}

/* ── 26. Subtle Brand Color Refinement ─────────────────────── */
#homepage-content {
    --deep-red: #96131E;
    --deep-red-soft: rgba(150, 19, 30, 0.08);
    --deep-red-line: rgba(150, 19, 30, 0.18);
    --olive-fresh: #83B735;
    --olive-fresh-soft: rgba(131, 183, 53, 0.1);
    --olive-fresh-line: rgba(131, 183, 53, 0.22);
    --red-accent: #96131E;
}

#homepage-content .eyebrow--red {
    color: var(--deep-red);
}

#homepage-content .eyebrow-line,
#homepage-content .eyebrow-line--short {
    background: linear-gradient(90deg, var(--deep-red), var(--gold) 58%, var(--olive-fresh));
}

#homepage-content .categories {
    background:
        radial-gradient(circle at 7% 8%, rgba(150, 19, 30, 0.045), transparent 24rem),
        radial-gradient(circle at 94% 92%, rgba(131, 183, 53, 0.07), transparent 25rem),
        var(--cream);
}

#homepage-content .most-loved {
    background:
        linear-gradient(180deg, rgba(150, 19, 30, 0.025), rgba(131, 183, 53, 0.035)),
        var(--cream-light);
}

#homepage-content .products-grid {
    background:
        radial-gradient(circle at 8% 2%, rgba(131, 183, 53, 0.055), transparent 24rem),
        radial-gradient(circle at 92% 98%, rgba(150, 19, 30, 0.035), transparent 26rem),
        var(--white);
}

#homepage-content .product-card,
#homepage-content .grid-card {
    border-color: rgba(150, 19, 30, 0.08);
}

#homepage-content .product-card:hover,
#homepage-content .grid-card:hover {
    border-color: rgba(150, 19, 30, 0.16);
}

#homepage-content .product-card__cat,
#homepage-content .grid-card__cat {
    color: var(--deep-red);
}

#homepage-content .grid-card[data-category-slug="herbs"] .grid-card__cat,
#homepage-content .grid-card[data-category-slug="organic"] .grid-card__cat,
#homepage-content .grid-card[data-category-slug="tea"] .grid-card__cat {
    color: var(--olive-fresh);
}

#homepage-content .cat-card[data-category-slug="masala-blends"],
#homepage-content .cat-card[data-category-slug="spices"] {
    box-shadow: inset 0 0 0 1px rgba(150, 19, 30, 0.14);
}

#homepage-content .cat-card[data-category-slug="herbs"],
#homepage-content .cat-card[data-category-slug="organic"],
#homepage-content .cat-card[data-category-slug="tea"] {
    box-shadow: inset 0 0 0 1px rgba(131, 183, 53, 0.18);
}

#homepage-content .cat-card.is-active {
    box-shadow: inset 0 0 0 1px rgba(150, 19, 30, 0.32), 0 12px 28px rgba(150, 19, 30, 0.12), 0 2px 7px rgba(92, 48, 16, 0.06);
}

#homepage-content .filter-pill:hover {
    border-color: var(--deep-red);
}

#homepage-content .filter-pill.is-active {
    background: linear-gradient(135deg, var(--deep-red), #96131E);
    border-color: var(--deep-red);
}

#homepage-content .filter-pill[data-filter="herbs"],
#homepage-content .filter-pill[data-filter="organic"],
#homepage-content .filter-pill[data-filter="tea"] {
    border-color: var(--olive-fresh-line);
}

#homepage-content .filter-pill[data-filter="herbs"]:hover,
#homepage-content .filter-pill[data-filter="organic"]:hover,
#homepage-content .filter-pill[data-filter="tea"]:hover {
    border-color: var(--olive-fresh);
}

#homepage-content .filter-pill[data-filter="herbs"].is-active,
#homepage-content .filter-pill[data-filter="organic"].is-active,
#homepage-content .filter-pill[data-filter="tea"].is-active {
    background: linear-gradient(135deg, var(--olive-dark), var(--olive-fresh));
    border-color: var(--olive-fresh);
    color: var(--cream);
}

#homepage-content .feature-card:nth-child(2n) .feature-card__icon {
    background: var(--deep-red-soft);
    border-color: var(--deep-red-line);
    color: var(--deep-red);
}

#homepage-content .feature-card:nth-child(3n) .feature-card__icon {
    background: var(--olive-fresh-soft);
    border-color: var(--olive-fresh-line);
    color: var(--olive-fresh);
}

#homepage-content .feature-card:hover {
    border-color: rgba(131, 183, 53, 0.14);
}

#homepage-content .about__ring--outer {
    border-color: rgba(131, 183, 53, 0.28);
}

#homepage-content .about__ring--inner {
    border-color: rgba(150, 19, 30, 0.14);
}

#homepage-content .about__glow--red {
    background: rgba(150, 19, 30, 0.14);
}

#homepage-content .about__badge--since {
    background: linear-gradient(135deg, var(--deep-red), #1A0D00);
}

#homepage-content .about__badge--pure {
    border-color: var(--olive-fresh-line);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(131, 183, 53, 0.09));
}

#homepage-content .about__badge-pct {
    color: var(--olive-fresh);
}

#homepage-content .about__tagline {
    border-color: rgba(131, 183, 53, 0.24);
    background: linear-gradient(135deg, rgba(150, 19, 30, 0.055), rgba(249, 82, 40, 0.1) 46%, rgba(131, 183, 53, 0.12));
}

#homepage-content .features::before,
#homepage-content .features::after {
    background: linear-gradient(to right, transparent, rgba(150, 19, 30, 0.12), rgba(131, 183, 53, 0.12), transparent);
}

#homepage-content .search-modal__pill {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#homepage-content .search-modal__pill[data-search-category="Spices"],
#homepage-content .search-modal__pill[data-search-category="Blends"] {
    border-color: rgba(150, 19, 30, 0.36);
}

#homepage-content .search-modal__pill[data-search-category="Organic"],
#homepage-content .search-modal__pill[data-search-category="Herbs"],
#homepage-content .search-modal__pill[data-search-category="Tea"] {
    border-color: rgba(131, 183, 53, 0.38);
}

#homepage-content .search-modal__card {
    border: 1px solid rgba(150, 19, 30, 0.08);
}

#homepage-content .search-modal__card[data-category="Organic"],
#homepage-content .search-modal__card[data-category="Herbs"],
#homepage-content .search-modal__card[data-category="Tea"] {
    border-color: rgba(131, 183, 53, 0.16);
}

#homepage-content .search-modal__card[data-category="Organic"] .search-modal__card-title,
#homepage-content .search-modal__card[data-category="Herbs"] .search-modal__card-title,
#homepage-content .search-modal__card[data-category="Tea"] .search-modal__card-title {
    color: var(--olive-dark);
}

#homepage-content .quick-view-modal__price-row {
    border-bottom-color: var(--olive-fresh-line);
}

#homepage-content .quick-view-modal__desc {
    color: rgba(150, 19, 30, 0.78);
}

#homepage-content .variant-pill:hover,
#homepage-content .quantity-picker:focus-within {
    border-color: var(--olive-fresh);
}

/* ── 27. Plain View Controls Color Refinement ───────────────── */
#homepage-content .products-grid__actions .btn,
#homepage-content .products-grid__explore .btn,
#homepage-content .most-loved__actions .btn--outline-dark,
#homepage-content .most-loved__view-all-mobile .btn--outline-dark {
    background: transparent;
    border-color: var(--deep-red);
    color: var(--deep-red);
}

#homepage-content .products-grid__actions .btn:hover,
#homepage-content .products-grid__actions .btn:focus-visible,
#homepage-content .products-grid__explore .btn:hover,
#homepage-content .products-grid__explore .btn:focus-visible,
#homepage-content .most-loved__actions .btn--outline-dark:hover,
#homepage-content .most-loved__actions .btn--outline-dark:focus-visible,
#homepage-content .most-loved__view-all-mobile .btn--outline-dark:hover,
#homepage-content .most-loved__view-all-mobile .btn--outline-dark:focus-visible {
    background: var(--deep-red);
    border-color: var(--deep-red);
    color: var(--cream);
}

#homepage-content .scroll-arrow,
#homepage-content .bundles__controls .scroll-arrow,
#homepage-content .flash-sale__controls .scroll-arrow,
#homepage-content .products-grid__controls .scroll-arrow,
#homepage-content .most-loved__actions .scroll-arrow,
#homepage-content .categories__header .scroll-arrow {
    background: rgba(255, 250, 242, 0.96);
    border-color: rgba(150, 19, 30, 0.38);
    color: #96131E;
    box-shadow: 0 0.35rem 1rem rgba(60, 32, 18, 0.08);
}

#homepage-content .most-loved__actions .scroll-arrow svg,
#homepage-content .bundles__controls .scroll-arrow svg,
#homepage-content .products-grid__controls .scroll-arrow svg {
    width: 1.08rem;
    height: 1.08rem;
    stroke-width: 2.75;
}

#homepage-content .scroll-arrow:hover,
#homepage-content .scroll-arrow:focus-visible,
#homepage-content .bundles__controls .scroll-arrow:hover,
#homepage-content .bundles__controls .scroll-arrow:focus-visible,
#homepage-content .flash-sale__controls .scroll-arrow:hover,
#homepage-content .flash-sale__controls .scroll-arrow:focus-visible,
#homepage-content .products-grid__controls .scroll-arrow:hover,
#homepage-content .products-grid__controls .scroll-arrow:focus-visible,
#homepage-content .most-loved__actions .scroll-arrow:hover,
#homepage-content .most-loved__actions .scroll-arrow:focus-visible,
#homepage-content .categories__header .scroll-arrow:hover,
#homepage-content .categories__header .scroll-arrow:focus-visible {
    background: var(--deep-red);
    border-color: var(--deep-red);
    color: #FFF7EA;
}

#homepage-content .most-loved__actions .scroll-arrow:disabled,
#homepage-content .most-loved__actions .scroll-arrow[aria-disabled="true"],
#homepage-content .bundles__controls .scroll-arrow:disabled,
#homepage-content .bundles__controls .scroll-arrow[aria-disabled="true"],
#homepage-content .products-grid__controls .scroll-arrow:disabled,
#homepage-content .products-grid__controls .scroll-arrow[aria-disabled="true"] {
    opacity: 0.68;
}

#homepage-content .products-grid__actions .btn:focus-visible,
#homepage-content .products-grid__explore .btn:focus-visible,
#homepage-content .most-loved__actions .btn--outline-dark:focus-visible,
#homepage-content .most-loved__view-all-mobile .btn--outline-dark:focus-visible {
    outline-color: rgba(150, 19, 30, 0.72);
}

#homepage-content .scroll-arrow:focus-visible {
    outline-color: rgba(150, 19, 30, 0.72);
}

/* ── Shared Horizontal Control Visibility Contract ────────── */
#homepage-content .scroll-arrow {
    position: relative;
    z-index: 2;
    color: #96131E !important;
    opacity: 1;
    visibility: visible;
}

#homepage-content .scroll-arrow svg {
    display: block !important;
    width: 1.08rem !important;
    height: 1.08rem !important;
    flex: 0 0 auto;
    overflow: visible;
    opacity: 1 !important;
    visibility: visible !important;
    fill: none !important;
    stroke: #96131E !important;
    stroke-width: 2.75 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

#homepage-content .scroll-arrow:hover svg,
#homepage-content .scroll-arrow:focus-visible svg {
    stroke: #FFF7EA !important;
}

#homepage-content .scroll-arrow:disabled,
#homepage-content .scroll-arrow[aria-disabled="true"] {
    opacity: 0.58;
}

#homepage-content .cat-card__view-all {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.34);
    color: var(--white);
}

#homepage-content .cat-card__view-all:hover {
    background: var(--deep-red);
    border-color: var(--deep-red);
    color: var(--cream);
}

#homepage-content .cat-card.is-active .cat-card__view-all {
    background: rgba(131, 183, 53, 0.1);
    border-color: var(--olive-fresh-line);
    color: var(--olive-dark);
}

#homepage-content .cat-card.is-active .cat-card__view-all:hover {
    background: var(--olive-fresh);
    border-color: var(--olive-fresh);
    color: var(--cream);
}

/* ── 28. Master Collection Image-Tinted Backgrounds ─────────── */
#homepage-content section.bundles .bundle-card {
    background-repeat: no-repeat !important;
    background-blend-mode: normal, normal, normal;
}

#homepage-content section.bundles .bundle-card--essentials {
    background-image:
        radial-gradient(circle at 16% 8%, rgba(131, 183, 53, 0.24), transparent 34%),
        linear-gradient(145deg, rgba(45, 8, 16, 0.92), rgba(92, 16, 32, 0.86)),
        url("../images/category-spices.webp") !important;
    background-size: auto, auto, cover !important;
    background-position: center, center, 68% center !important;
}

#homepage-content section.bundles .bundle-card--spice {
    background-image:
        radial-gradient(circle at 16% 8%, rgba(131, 183, 53, 0.26), transparent 34%),
        linear-gradient(145deg, rgba(61, 26, 0, 0.92), rgba(107, 45, 8, 0.86)),
        url("../images/category-masala-blends.webp") !important;
    background-size: auto, auto, cover !important;
    background-position: center, center, 58% center !important;
}

#homepage-content section.bundles .bundle-card--chai {
    background-image:
        radial-gradient(circle at 16% 8%, rgba(132, 145, 74, 0.24), transparent 34%),
        linear-gradient(145deg, rgba(13, 32, 16, 0.92), rgba(26, 64, 32, 0.86)),
        url("../images/category-tea.webp") !important;
    background-size: auto, auto, cover !important;
    background-position: center, center, 50% center !important;
}

#homepage-content section.bundles .bundles__grid.no-scrollbar > .bundle-card:nth-child(4),
#homepage-content section.bundles .bundles__grid.no-scrollbar > .bundle-card.bundle-card--seeds {
    background-image:
        radial-gradient(circle at 16% 8%, rgba(249, 82, 40, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(24, 36, 18, 0.92), rgba(60, 74, 32, 0.86)),
        url("../images/search-sabut-dhania.webp") !important;
    background-size: auto, auto, cover !important;
    background-position: center, center, 50% center !important;
}

#homepage-content section.bundles .bundles__grid.no-scrollbar > .bundle-card:nth-child(5),
#homepage-content section.bundles .bundles__grid.no-scrollbar > .bundle-card.bundle-card--wellness {
    background-image:
        radial-gradient(circle at 16% 8%, rgba(131, 183, 53, 0.24), transparent 34%),
        linear-gradient(145deg, rgba(42, 18, 9, 0.92), rgba(90, 25, 17, 0.86)),
        url("../images/search-turmeric.webp") !important;
    background-size: auto, auto, cover !important;
    background-position: center, center, 50% center !important;
}

/* ── 29. Custom Order Summary Button Text ───────────────────── */
#homepage-content.custom-order-page .summary-card .whatsapp-submit-btn,
#homepage-content.custom-order-page .summary-card .whatsapp-submit-btn #submitOrderText {
    white-space: nowrap;
}

/* ── 29b. Custom Order Requested Refinements ────────────────── */
#homepage-content .custom-order-cta__actions {
    justify-content: center;
}

#homepage-content.custom-order-page .order-mode-tabs {
    border-color: rgba(249, 82, 40, 0.26);
    background: linear-gradient(135deg, #1A0D00 0%, #42180D 58%, #7B2317 100%);
}

#homepage-content.custom-order-page .mode-tab-divider {
    border-color: rgba(131, 183, 53, 0.44);
    background: linear-gradient(180deg, rgba(131, 183, 53, 0.95), rgba(83, 128, 39, 0.94));
    color: #FFFDF8;
    box-shadow: 0 0 0 5px rgba(255, 253, 248, 0.72), 0 0 0 8px rgba(131, 183, 53, 0.14);
}

#homepage-content.custom-order-page .mode-tab-divider::before,
#homepage-content.custom-order-page .mode-tab-divider::after {
    background: rgba(131, 183, 53, 0.34);
}

#homepage-content.custom-order-page .mode-tab[aria-selected="false"],
#homepage-content.custom-order-page #customOrderForm[data-order-mode="builder"] #tabFreeform,
#homepage-content.custom-order-page #customOrderForm[data-order-mode="freeform"] #tabBuilder {
    background: rgba(255, 248, 234, 0.045);
}

#homepage-content.custom-order-page .mode-tab[aria-selected="true"],
#homepage-content.custom-order-page #customOrderForm[data-order-mode="builder"] #tabBuilder,
#homepage-content.custom-order-page #customOrderForm[data-order-mode="freeform"] #tabFreeform {
    border-color: rgba(249, 82, 40, 0.52);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(249, 82, 40, 0.08);
}

#homepage-content.custom-order-page .form-card::before {
    background: linear-gradient(180deg, var(--order-gold) 0%, var(--order-red) 100%);
}

#homepage-content.custom-order-page .form-card--freeform {
    background:
        radial-gradient(circle at 92% 0%, rgba(249, 82, 40, 0.12), transparent 18rem),
        linear-gradient(180deg, rgba(255, 253, 248, 0.97), rgba(255, 248, 234, 0.96)),
        repeating-linear-gradient(135deg, rgba(150, 19, 30, 0.022) 0 1px, transparent 1px 18px);
}

#homepage-content.custom-order-page .summary-row--total {
    background: linear-gradient(135deg, rgba(249, 82, 40, 0.13), rgba(255, 179, 158, 0.09));
}

#homepage-content.custom-order-page .row-prod-select {
    font-weight: 700;
}

#homepage-content.custom-order-page .whatsapp-submit-btn {
    gap: 0;
    color: rgba(255, 253, 248, 0.94) !important;
    font-size: 0.82rem;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

#homepage-content.custom-order-page .whatsapp-submit-btn svg {
    display: none !important;
}

#homepage-content.custom-order-page .whatsapp-submit-btn:hover,
#homepage-content.custom-order-page .whatsapp-submit-btn:focus-visible {
    color: #FFFFFF !important;
}

#homepage-content.custom-order-page .whatsapp-submit-btn #submitOrderText {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

@media (max-width: 991px) {
    #homepage-content .custom-order-cta__card {
        grid-template-columns: 1fr;
        gap: clamp(1.25rem, 5vw, 2rem);
        text-align: center;
    }

    #homepage-content .custom-order-cta__content {
        display: grid;
        max-width: none;
        justify-items: center;
    }

    #homepage-content .custom-order-cta__badge {
        justify-content: center;
    }

    #homepage-content .custom-order-cta__title,
    #homepage-content .custom-order-cta__desc {
        max-width: min(100%, 38rem);
    }

    #homepage-content .custom-order-cta__features {
        width: min(100%, 34rem);
        grid-template-columns: 1fr;
    }

    #homepage-content .custom-order-cta__feature-item {
        min-height: 0;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #homepage-content .custom-order-cta .btn {
        max-width: 100%;
        text-align: center;
        white-space: normal;
    }

    #homepage-content .custom-order-cta__visual {
        width: min(100%, 22rem);
        margin: 0 auto;
    }
}

@media (max-width: 560px) {
    #homepage-content .custom-order-cta__card {
        padding: clamp(1.05rem, 5vw, 1.35rem);
    }

    #homepage-content .custom-order-cta__title {
        font-size: clamp(1.82rem, 10vw, 2.55rem);
        line-height: 1.08;
    }

    #homepage-content .custom-order-cta__desc {
        font-size: 0.92rem;
    }

    #homepage-content .custom-order-cta__feature-item {
        padding: 0.78rem 0.85rem;
    }
}

/* ── 30. Permanent Typography System ───────────────────────── */
#homepage-content {
    font-optical-sizing: auto;
    text-rendering: geometricPrecision;
}

#homepage-content .section-title,
#homepage-content .product-card__name,
#homepage-content .grid-card__name,
#homepage-content .bundle-card__name,
#homepage-content .feature-card__title,
#homepage-content .about__title,
#homepage-content .search-modal__title,
#homepage-content .quick-view-modal__title,
#homepage-content .custom-order-cta__title,
#homepage-content .custom-order-hero__title,
#homepage-content .form-card__title,
#homepage-content .summary-card__title,
#homepage-content .recipe-modal__title {
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0;
}

#homepage-content .section-title__italic {
    font-style: normal;
    font-weight: 700;
}

#homepage-content .product-card__price,
#homepage-content .grid-card__price,
#homepage-content .bundle-card__price,
#homepage-content .about__badge-pct,
#homepage-content .quick-view-modal__price,
#homepage-content .summary-row--total {
    font-family: var(--font-sans);
    font-weight: 800;
}

#homepage-content .section-subtitle,
#homepage-content .product-card__desc,
#homepage-content .grid-card__desc,
#homepage-content .bundle-card__desc,
#homepage-content .feature-card__text,
#homepage-content .about__text,
#homepage-content .review-card__text,
#homepage-content .form-card__sub,
#homepage-content .summary-card__sub,
#homepage-content .empty-summary-text {
    font-family: var(--font-sans);
    font-weight: 400;
}

#homepage-content .btn,
#homepage-content .filter-pill,
#homepage-content .cat-card__label,
#homepage-content .cat-card__view-all,
#homepage-content .form-label,
#homepage-content .summary-row,
#homepage-content .summary-card__eyebrow,
#homepage-content .mode-tab,
#homepage-content .eyebrow {
    font-family: var(--font-sans);
}

#homepage-content .btn,
#homepage-content .filter-pill,
#homepage-content .cat-card__label,
#homepage-content .cat-card__view-all,
#homepage-content .form-label,
#homepage-content .summary-card__eyebrow,
#homepage-content .mode-tab__text strong {
    font-weight: 800;
}

/* ── 31. Homepage Hero Heading Typography ──────────────────── */
#homepage-content .hero__line {
    font-family: var(--font-serif);
    letter-spacing: 0;
}

#homepage-content .hero__line--light {
    font-style: normal;
    font-weight: 600;
}

#homepage-content .hero__line--gold,
#homepage-content .hero__line--italic {
    font-style: italic;
    font-weight: 700;
}

/* ── 32. Slide-Specific Hero Typography ───────────────────── */
#homepage-content .hero__slide[data-slide="1"] .hero__line {
    font-family: 'Cormorant Garamond', Georgia, serif;
}

#homepage-content .hero__slide[data-slide="2"] .essence-hero__title {
    font-family: 'Aref Ruqaa Ink', 'Gulzar', "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", serif;
    font-weight: 400;
    color: rgb(249, 82, 40) !important;
    -webkit-text-fill-color: rgb(249, 82, 40) !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    mix-blend-mode: normal !important;
    text-shadow: none !important;
}

/* ── 33. Homepage Product Card Redesign ───────────────────── */
#homepage-content {
    --zm-card-w: clamp(17rem, 22vw, 20.25rem);
    --zm-card-gap: clamp(1rem, 1.8vw, 1.45rem);
    --zm-card-radius: 0.5rem;
    --zm-card-bg: #FFFFFF;
    --zm-card-media: #F6F3EE;
    --zm-card-line: rgba(45, 31, 18, 0.1);
    --zm-card-line-strong: rgba(150, 19, 30, 0.18);
    --zm-card-shadow: 0 0.7rem 1.9rem rgba(44, 30, 18, 0.07);
    --zm-card-shadow-hover: 0 1rem 2.6rem rgba(44, 30, 18, 0.1);
}

#homepage-content .products-row,
#homepage-content .grid-products {
    gap: var(--zm-card-gap) !important;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0.15rem 0.15rem 1rem;
    scroll-padding-inline: 0.15rem;
    touch-action: pan-x pan-y;
}

#homepage-content .zm-home-wd-card {
    flex: 0 0 var(--zm-card-w) !important;
    width: var(--zm-card-w) !important;
    min-width: var(--zm-card-w) !important;
    max-width: var(--zm-card-w) !important;
    scroll-snap-align: start;
}

#homepage-content .zm-home-wd-card > .wd-product {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1.34;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid var(--zm-card-line);
    border-radius: var(--zm-card-radius);
    background: var(--zm-card-bg);
    box-shadow: none;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#homepage-content .zm-home-wd-card > .wd-product:hover,
#homepage-content .zm-home-wd-card > .wd-product:focus-within {
    transform: translateY(-2px);
    border-color: var(--zm-card-line-strong);
    box-shadow: var(--zm-card-shadow-hover);
}

#homepage-content .zm-home-wd-card .wd-product-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--zm-card-bg);
}

#homepage-content .zm-home-wd-card .product-element-top,
#homepage-content .zm-home-wd-card .wd-product-thumb {
    position: relative;
    flex: 0 0 63%;
    width: 100%;
    aspect-ratio: auto !important;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.78), transparent 38%),
        linear-gradient(180deg, #FAF8F3 0%, var(--zm-card-media) 100%);
}

#homepage-content .zm-home-wd-card .wd-product-img-link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#homepage-content .zm-home-wd-card .product-element-top img,
#homepage-content .zm-home-wd-card .wd-product-thumb img,
#homepage-content .zm-home-wd-card .wd-product-img-link img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover !important;
    object-position: center;
    transform: scale(1.01);
    transition: transform 260ms ease, opacity 260ms ease;
}

#homepage-content .zm-home-wd-card > .wd-product:hover .product-element-top img,
#homepage-content .zm-home-wd-card > .wd-product:focus-within .product-element-top img {
    transform: scale(1.04);
}

#homepage-content .zm-home-wd-card .product-labels,
#homepage-content .zm-home-wd-card .labels-rounded,
#homepage-content .zm-home-wd-card .product-label {
    border-radius: 999px;
}

#homepage-content .zm-home-wd-card .product-label {
    min-height: 1.55rem;
    padding: 0.28rem 0.58rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--deep-red);
    font-family: var(--font-sans);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 0.35rem 1rem rgba(44, 30, 18, 0.08);
}

#homepage-content .zm-home-wd-card .wrapp-buttons {
    position: absolute;
    right: 0.7rem;
    bottom: 0.72rem;
    left: 0.7rem;
    z-index: 5;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(0.5rem);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

#homepage-content .zm-home-wd-card > .wd-product:hover .wrapp-buttons,
#homepage-content .zm-home-wd-card > .wd-product:focus-within .wrapp-buttons {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#homepage-content .zm-home-wd-card .wd-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    min-height: 2.65rem;
    padding: 0.28rem;
    border: 1px solid rgba(150, 19, 30, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 0.75rem 1.8rem rgba(45, 31, 18, 0.14);
    backdrop-filter: blur(12px);
}

#homepage-content .zm-home-wd-card .wd-buttons .wd-action-btn {
    width: 2.08rem;
    height: 2.08rem;
    margin: 0 !important;
    border-radius: 50%;
}

#homepage-content .zm-home-wd-card .wd-action-btn > a,
#homepage-content .zm-home-wd-card .open-quick-view,
#homepage-content .zm-home-wd-card .wd-buttons .wd-action-btn > a,
#homepage-content .zm-home-wd-card .wd-add-btn.wd-action-btn > a {
    display: inline-flex;
    width: 2.08rem;
    height: 2.08rem;
    min-height: 2.08rem;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0;
    border-radius: 50%;
    background: transparent !important;
    color: var(--deep-red) !important;
    box-shadow: none !important;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

#homepage-content .zm-home-wd-card .wd-action-btn > a:hover,
#homepage-content .zm-home-wd-card .wd-action-btn > a:focus-visible,
#homepage-content .zm-home-wd-card .open-quick-view:hover,
#homepage-content .zm-home-wd-card .open-quick-view:focus-visible {
    background: rgba(150, 19, 30, 0.08) !important;
    color: var(--deep-red) !important;
    transform: translateY(-1px);
}

#homepage-content .zm-home-wd-card .wd-add-btn.wd-action-btn > a:hover,
#homepage-content .zm-home-wd-card .wd-add-btn.wd-action-btn > a:focus-visible {
    background: rgba(131, 183, 53, 0.12) !important;
    color: #000 !important;
}

#homepage-content .zm-home-wd-card .wd-buttons .wd-action-text,
#homepage-content .zm-home-wd-card .wd-buttons .button span {
    font-size: 0;
}

#homepage-content .zm-home-wd-card .wd-compare-btn,
#homepage-content .zm-home-wd-card .wd-wishlist-btn,
#homepage-content .zm-home-wd-card .product-card__wishlist,
#homepage-content .zm-home-wd-card .wrapp-buttons .wd-action-btn:not(.wd-add-btn),
#homepage-content .zm-home-wd-card .wrapp-buttons .wd-quick-view-btn,
#homepage-content .zm-home-wd-card .wrapp-buttons .quick-view,
#homepage-content .zm-home-wd-card .wrapp-buttons .open-quick-view {
    display: none !important;
}

#homepage-content .zm-home-wd-card .wd-add-btn.wd-action-btn {
    width: auto;
    min-width: 7.8rem;
}

#homepage-content .zm-home-wd-card .zm-home-card__hover-product-link {
    width: auto !important;
    min-width: 7.8rem;
    gap: 0.42rem;
    padding: 0 0.76rem !important;
    border-radius: 999px;
    color: #000 !important;
}

#homepage-content .zm-home-wd-card .zm-home-card__hover-product-link svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
}

#homepage-content .zm-home-wd-card .wd-buttons .zm-home-card__hover-product-link span {
    display: inline;
    color: currentColor;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1;
    text-transform: uppercase;
}

#homepage-content .zm-home-wd-card .open-quick-view {
    font-size: 0 !important;
}

#homepage-content .zm-home-wd-card .open-quick-view::before,
#homepage-content .product-card__quick-view::before,
#homepage-content .grid-card__quick::before,
#homepage-content .zm-home-card__quick-static::before {
    content: "";
    display: block;
    width: 1.08rem;
    height: 1.08rem;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5.25c-5.1 0-8.7 4.5-9.9 6.3a.82.82 0 0 0 0 .9c1.2 1.8 4.8 6.3 9.9 6.3s8.7-4.5 9.9-6.3a.82.82 0 0 0 0-.9c-1.2-1.8-4.8-6.3-9.9-6.3Zm0 10.8A4.05 4.05 0 1 1 12 7.95a4.05 4.05 0 0 1 0 8.1Zm0-1.8A2.25 2.25 0 1 0 12 9.75a2.25 2.25 0 0 0 0 4.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5.25c-5.1 0-8.7 4.5-9.9 6.3a.82.82 0 0 0 0 .9c1.2 1.8 4.8 6.3 9.9 6.3s8.7-4.5 9.9-6.3a.82.82 0 0 0 0-.9c-1.2-1.8-4.8-6.3-9.9-6.3Zm0 10.8A4.05 4.05 0 1 1 12 7.95a4.05 4.05 0 0 1 0 8.1Zm0-1.8A2.25 2.25 0 1 0 12 9.75a2.25 2.25 0 0 0 0 4.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#homepage-content .product-card__quick-view,
#homepage-content .grid-card__quick {
    top: 0.72rem;
    right: 0.72rem;
    left: auto;
    z-index: 10;
    color: #000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#homepage-content .zm-home-card__quick-static {
    position: absolute;
    top: 0.72rem;
    right: 0.72rem;
    z-index: 10;
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.34);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #000 !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.76), 0 0 0 3px rgba(0, 0, 0, 0.26), 0 0.5rem 1.3rem rgba(45, 31, 18, 0.11);
    cursor: pointer;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, color 160ms ease;
}

#homepage-content .zm-home-card__quick-static .wd-action-icon,
#homepage-content .zm-home-card__quick-static .wd-action-text,
#homepage-content .grid-card__quick.open-quick-view .wd-action-icon,
#homepage-content .grid-card__quick.open-quick-view .wd-action-text {
    display: none !important;
}

#homepage-content .zm-home-card__quick-static:hover,
#homepage-content .zm-home-card__quick-static:focus-visible {
    background: var(--deep-red);
    color: #000;
    transform: translateY(-1px);
}

#homepage-content .zm-home-wd-card > .wd-product:hover .zm-home-card__quick-static,
#homepage-content .zm-home-wd-card > .wd-product:focus-within .zm-home-card__quick-static {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#homepage-content .zm-home-wd-card .open-quick-view,
#homepage-content .zm-home-wd-card .open-quick-view:hover,
#homepage-content .zm-home-wd-card .open-quick-view:focus-visible,
#homepage-content .product-card__quick-view,
#homepage-content .product-card__quick-view:hover,
#homepage-content .product-card__quick-view:focus-visible,
#homepage-content .grid-card__quick,
#homepage-content .grid-card__quick:hover,
#homepage-content .grid-card__quick:focus-visible,
#homepage-content .zm-home-card__quick-static,
#homepage-content .zm-home-card__quick-static:hover,
#homepage-content .zm-home-card__quick-static:focus-visible {
    color: #000 !important;
}

#homepage-content .zm-home-wd-card .open-quick-view,
#homepage-content .product-card__quick-view,
#homepage-content .grid-card__quick,
#homepage-content .zm-home-card__quick-static {
    border-radius: 50% !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42), 0 0 0 2px rgba(255, 255, 255, 0.68), 0 0.42rem 1rem rgba(45, 31, 18, 0.12) !important;
}

#homepage-content .zm-home-wd-card .wd-add-btn.wd-action-btn > a.zm-home-card__hover-product-link,
#homepage-content .zm-home-wd-card .wd-add-btn.wd-action-btn > a.zm-home-card__hover-product-link:hover,
#homepage-content .zm-home-wd-card .wd-add-btn.wd-action-btn > a.zm-home-card__hover-product-link:focus-visible {
    color: #000 !important;
}

@media (hover: hover) and (pointer: fine) {
    #homepage-content .product-card__quick-view::after,
    #homepage-content .grid-card__quick::after,
    #homepage-content .zm-home-card__quick-static::after {
        content: "Quick View" !important;
        position: absolute;
        top: 50%;
        right: calc(100% + 0.42rem);
        z-index: 2;
        display: inline-flex !important;
        width: max-content;
        max-width: 6.5rem;
        align-items: center;
        justify-content: center;
        padding: 0.24rem 0.42rem;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        color: #1a120b;
        font-family: var(--font-sans);
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1;
        white-space: nowrap;
        box-shadow: 0 0.35rem 0.9rem rgba(45, 31, 18, 0.12);
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none;
        transform: translate(0.18rem, -50%);
        transition: opacity 140ms ease, visibility 140ms ease, transform 140ms ease;
    }

    #homepage-content .product-card__quick-view:hover::after,
    #homepage-content .grid-card__quick:hover::after,
    #homepage-content .zm-home-card__quick-static:hover::after {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(0, -50%);
    }
}

#homepage-content .zm-home-wd-card .wd-entities-title,
#homepage-content .zm-home-wd-card .woocommerce-loop-product__title {
    margin: 0.92rem 1rem 0.32rem;
    color: var(--brown-dark);
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 0.95vw, 1.06rem);
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: 0;
    text-align: center;
    display: -webkit-box;
    min-height: 2.62em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#homepage-content .zm-home-wd-card .wd-entities-title a,
#homepage-content .zm-home-wd-card .woocommerce-loop-product__title a {
    color: inherit;
}

#homepage-content .zm-home-wd-card .wd-product-cats,
#homepage-content .zm-home-wd-card .wd-product-categories,
#homepage-content .zm-home-wd-card .wd-product-brands-links,
#homepage-content .zm-home-wd-card .wd-product-sku,
#homepage-content .zm-home-wd-card .wd-product-stock,
#homepage-content .zm-home-wd-card .star-rating,
#homepage-content .zm-home-wd-card .wd-star-rating,
#homepage-content .zm-home-wd-card .wd-swatches-grid,
#homepage-content .zm-home-wd-card .wd-product-countdown {
    display: none !important;
}

#homepage-content .zm-home-wd-card .price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.38rem;
    min-height: 1.55rem;
    margin: 0 1rem;
    color: var(--brown);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

#homepage-content .zm-home-wd-card .price del {
    order: 2;
    color: rgba(45, 31, 18, 0.4);
    font-size: 0.86rem;
    font-weight: 600;
}

#homepage-content .zm-home-wd-card .price ins {
    color: var(--brown);
    text-decoration: none;
}

#homepage-content .zm-home-card__direct-cart {
    display: inline-flex;
    width: calc(100% - 2rem);
    min-height: 2.48rem;
    align-items: center;
    justify-content: center;
    gap: 0.46rem;
    margin: auto 1rem 1rem;
    padding: 0.62rem 0.82rem;
    border: 1px solid rgb(249, 82, 40);
    border-radius: 0.42rem;
    background: rgb(249, 82, 40);
    color: var(--cream);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

#homepage-content .zm-home-card__direct-cart svg {
    width: 0.98rem;
    height: 0.98rem;
    flex: 0 0 auto;
}

#homepage-content .zm-home-card__direct-cart:hover,
#homepage-content .zm-home-card__direct-cart:focus-visible {
    border-color: var(--olive-fresh);
    background: var(--olive-fresh);
    color: var(--cream);
    transform: translateY(-1px);
    box-shadow: 0 0.55rem 1.2rem rgba(131, 183, 53, 0.2);
}

#homepage-content .zm-home-card__direct-cart.is-added {
    border-color: rgba(131, 183, 53, 0.38);
    background: rgba(131, 183, 53, 0.12);
    color: var(--olive-dark);
    box-shadow: none;
}

#homepage-content .zm-home-card__direct-cart:disabled,
#homepage-content .zm-home-card__direct-cart[aria-disabled="true"] {
    cursor: wait;
    transform: none;
}

#homepage-content .zm-home-card__direct-cart--link {
    text-decoration: none;
}

#homepage-content .zm-cart-status {
    position: fixed;
    right: clamp(1rem, 3vw, 1.6rem);
    bottom: clamp(1rem, 3vw, 1.6rem);
    z-index: 9999;
    display: inline-flex;
    flex-direction: column;
    gap: 0.12rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.72rem 0.92rem;
    border: 1px solid rgba(131, 183, 53, 0.22);
    border-radius: 0.48rem;
    background: rgba(255, 250, 242, 0.96);
    color: var(--brown-dark);
    box-shadow: 0 0.8rem 2rem rgba(45, 31, 18, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 0.5rem, 0);
    transition: opacity 180ms ease, transform 180ms ease;
    will-change: opacity, transform;
}

#homepage-content .zm-cart-status.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

#homepage-content .zm-cart-status__title {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
}

#homepage-content .zm-cart-status__detail {
    color: rgba(45, 31, 18, 0.68);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
}

#homepage-content .zm-cart-status--compact .zm-cart-status__detail {
    display: none;
}

#homepage-content .product-card,
#homepage-content .grid-card {
    flex: 0 0 var(--zm-card-w) !important;
    width: var(--zm-card-w) !important;
    min-width: var(--zm-card-w) !important;
    max-width: var(--zm-card-w) !important;
    aspect-ratio: 1 / 1.34 !important;
    border: 1px solid var(--zm-card-line);
    border-radius: var(--zm-card-radius);
    background: var(--zm-card-bg);
    box-shadow: none;
    scroll-snap-align: start;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#homepage-content .product-card:hover,
#homepage-content .grid-card:hover,
#homepage-content .product-card:focus-within,
#homepage-content .grid-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--zm-card-line-strong);
    box-shadow: var(--zm-card-shadow-hover);
}

#homepage-content .product-card__image,
#homepage-content .grid-card__image {
    flex: 0 0 63%;
    min-height: 0;
    background-color: var(--zm-card-media);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;
}

#homepage-content .product-card__image[data-bg]::before,
#homepage-content .grid-card__image[data-bg]::before {
    display: none;
}

#homepage-content .product-card__body,
#homepage-content .grid-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

#homepage-content .product-card__cat,
#homepage-content .grid-card__cat {
    display: none !important;
}

#homepage-content .product-card__name,
#homepage-content .grid-card__name {
    min-height: 2.62em;
    margin: 0.92rem 1rem 0.32rem;
    color: var(--brown-dark);
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 0.95vw, 1.06rem);
    font-weight: 700;
    line-height: 1.32;
    text-align: center;
}

#homepage-content .product-card__footer,
#homepage-content .grid-card__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.72rem;
    margin: auto 1rem 1rem;
}

#homepage-content .product-card__price,
#homepage-content .grid-card__price {
    min-height: 1.55rem;
    color: var(--brown);
    font-size: 1rem;
    line-height: 1.3;
    text-align: center;
}

#homepage-content .product-card__footer > .btn--gold-full,
#homepage-content .grid-card__footer > .btn--gold-full {
    width: 100%;
    min-height: 2.48rem;
    justify-content: center;
    border: 1px solid rgb(249, 82, 40);
    border-radius: 0.42rem;
    background: rgb(249, 82, 40);
    color: var(--cream);
    font-size: 0.78rem;
    letter-spacing: 0.045em;
    box-shadow: none;
}

#homepage-content .product-card__footer > .btn--gold-full:hover,
#homepage-content .product-card__footer > .btn--gold-full:focus-visible,
#homepage-content .grid-card__footer > .btn--gold-full:hover,
#homepage-content .grid-card__footer > .btn--gold-full:focus-visible {
    border-color: var(--olive-fresh);
    background: var(--olive-fresh);
    color: var(--cream);
    transform: translateY(-1px);
    box-shadow: 0 0.55rem 1.2rem rgba(131, 183, 53, 0.2);
}

#homepage-content .zm-home-wd-card--bundle-redirect > .wd-product {
    cursor: pointer;
}

#homepage-content section.bundles .bundle-card.is-active {
    outline: 2px solid rgba(255, 250, 240, 0.95);
    outline-offset: 0.28rem;
    box-shadow: 0 1.35rem 3.1rem rgba(0, 0, 0, 0.34), 0 0 0 0.32rem rgba(131, 183, 53, 0.18) !important;
}

#homepage-content section.bundles .bundle-card.is-focused {
    transform: translateY(-4px) scale(1.01);
}

@media (max-width: 1024px) {
    #homepage-content {
        --zm-card-w: clamp(16.75rem, 38vw, 19rem);
    }

    #homepage-content .zm-home-wd-card .wrapp-buttons {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        right: 0.82rem;
        bottom: 0.44rem;
        left: 0.82rem;
        justify-content: center;
    }

    #homepage-content .zm-home-card__quick-static {
        display: inline-flex;
        top: 0.62rem;
        right: 0.62rem;
        width: 2.32rem;
        height: 2.32rem;
    }

    #homepage-content .zm-home-wd-card .wd-buttons {
        width: 100%;
        max-width: 11.4rem;
        min-height: 2.36rem;
        padding: 0;
        border: 0;
        background: transparent !important;
        box-shadow: none;
        backdrop-filter: none;
    }

    #homepage-content .zm-home-wd-card .wd-add-btn.wd-action-btn,
    #homepage-content .zm-home-wd-card .zm-home-card__hover-product-link {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
    }

    #homepage-content .zm-home-wd-card .zm-home-card__hover-product-link {
        display: inline-flex;
        min-height: 2.36rem;
        align-items: center;
        justify-content: center;
        gap: 0.42rem;
        padding: 0 0.68rem !important;
        border: 1px solid rgba(150, 19, 30, 0.14);
        background: rgba(255, 250, 242, 0.78) !important;
        color: #000 !important;
        line-height: 1;
        white-space: nowrap;
        box-shadow: 0 0.42rem 1rem rgba(45, 31, 18, 0.1) !important;
        backdrop-filter: blur(7px);
    }

    #homepage-content .zm-home-wd-card .zm-home-card__hover-product-link:hover,
    #homepage-content .zm-home-wd-card .zm-home-card__hover-product-link:focus-visible {
        color: #000 !important;
    }

    #homepage-content .zm-home-wd-card .zm-home-card__hover-product-link svg {
        width: 0.92rem;
        height: 0.92rem;
    }

    #homepage-content .zm-home-wd-card .wd-buttons .zm-home-card__hover-product-link span {
        font-size: 0.66rem;
        letter-spacing: 0.025em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    #homepage-content {
        --zm-card-w: clamp(16.25rem, 78vw, 17.6rem);
        --zm-card-gap: 0.95rem;
    }

    #homepage-content .products-row,
    #homepage-content .grid-products {
        padding-bottom: 0.85rem;
    }

    #homepage-content .zm-home-wd-card > .wd-product {
        aspect-ratio: 1 / 1.36;
    }

    #homepage-content .zm-home-wd-card .wd-entities-title,
    #homepage-content .zm-home-wd-card .woocommerce-loop-product__title {
        margin-top: 0.82rem;
        font-size: 0.94rem;
    }

    #homepage-content .zm-home-card__direct-cart {
        min-height: 2.4rem;
        font-size: 0.72rem;
    }

    #homepage-content .zm-home-wd-card .wrapp-buttons {
        right: 0.76rem;
        bottom: 0.34rem;
        left: 0.76rem;
    }

    #homepage-content .zm-home-wd-card .wd-buttons {
        max-width: min(10.8rem, calc(100% - 0.4rem));
    }

    #homepage-content .zm-home-wd-card .zm-home-card__hover-product-link {
        min-height: 2.32rem;
        padding: 0 0.62rem !important;
        color: #000 !important;
    }

    #homepage-content .zm-home-wd-card .wd-buttons .zm-home-card__hover-product-link span {
        font-size: 0.64rem;
    }

    #homepage-content .zm-cart-status {
        right: 1rem;
        bottom: 0.9rem;
        left: 1rem;
        width: auto;
    }
}

/* Mobile-only Most Loved header refinement */
@media (max-width: 767px) {
    #homepage-content .most-loved .section-title {
        font-size: clamp(1.45rem, 5.9vw, 1.85rem);
        line-height: 1.08;
        white-space: nowrap;
    }

    #homepage-content .most-loved__actions {
        display: flex;
        align-items: center;
        gap: 0.65rem;
    }

    #homepage-content .most-loved__actions .btn--outline-dark {
        display: inline-flex;
    }

    #homepage-content .most-loved__view-all-mobile {
        display: none;
    }
}