:root {
    --site-container: 1320px;
    --site-gutter: clamp(16px, 2.5vw, 32px);
    --site-section-space: clamp(44px, 5vw, 64px);

    /* NelliMart green-first brand system */
    --nm-primary: #2e7d32;
    --nm-primary-hover: #1b5e20;
    --nm-secondary: #81c784;
    --nm-accent: #ff9800;
    --nm-accent-hover: #e68600;
    --nm-background: #f8faf5;
    --nm-surface: #ffffff;
    --nm-surface-soft: #f1f6ee;
    --nm-border: #e8ecef;
    --nm-text: #263238;
    --nm-text-secondary: #607d8b;
    --nm-text-muted: #546e7a;
    --nm-success: #4caf50;
    --nm-warning: #ffc107;
    --nm-error: #f44336;
    --nm-radius-card: 6px;
    --nm-shadow-card: 0 8px 28px rgba(38, 50, 56, 0.08);
    --nm-shadow-hover: 0 16px 38px rgba(46, 125, 50, 0.14);

    /* ==========================================
       Typography System Standard Variables
       ========================================== */
    /* Base Font Sizes */
    --fs-display: clamp(30px, 2.5vw, 40px);      /* Hero section large display headings */
    --fs-headline-lg: clamp(23px, 1.8vw, 29px);  /* Primary section titles / H1 */
    --fs-headline-md: clamp(19px, 1.45vw, 23px); /* Secondary section headers / H2 */
    --fs-headline-sm: clamp(16px, 1.2vw, 18px);  /* Minor section headers / H3 */
    
    --fs-card-title: 16px;                       /* Unified standard for card headings (e.g. products, categories, features) */
    
    --fs-body-lg: 16px;                          /* Large / Lead body text */
    --fs-body-md: 15px;                          /* Standard body text / Paragraphs */
    --fs-label-md: 13.5px;                       /* Captions, labels, inputs, small metadata */
    --fs-label-sm: 11.5px;                       /* Small badges, category tags, rating reviews */
}

/* Compact storefront corners: structured, not pill-shaped. */
:where(
    .category-card,.premium-product-card,.shop-product-card,
    .customer-account__card,.enquiry-card,.saved-card,.checkout-card,
    .cart-drawer,.cart-item,.category-mega-menu,.category-mega-menu__group,
    .product-gallery__stage,.product-details,.product-tab-panels,
    .product-error-state,.product-zoom-dialog,.bulk-card,.contact-card,
    .market-hero__quote,.data-card
){border-radius:6px!important}

:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,textarea,.header-search-control,.product-quantity,
    .cart-item__quantity
){border-radius:5px!important}

:where(
    .premium-cart-btn,.product-add-button,.product-card__details-link,
    .customer-account__button,.cart-drawer__checkout,.cart-drawer__copy,
    .checkout-page button,.bulk-orders-page button,.contact-page button,
    .product-secondary-actions a,.product-tabs button
){border-radius:4px!important}

:where(.category-image-wrapper,.product-visual-wrapper,.cart-item__image,
    .saved-card>img,.product-card__image-link){border-radius:4px!important}

[hidden] {
    display: none !important;
}

html {
    scroll-padding-top: 136px;
}

body {
    min-width: 0;
    overflow-x: clip;
    font-size: var(--fs-body-md);
    line-height: 1.6;
}

/* ==========================================
   Typography Standard Implementations & Overrides
   ========================================== */

/* HTML Element Defaults */
h1 {
    font-size: var(--fs-headline-lg);
}

h2 {
    font-size: var(--fs-headline-md);
}

h3 {
    font-size: var(--fs-headline-sm);
}

p {
    font-size: var(--fs-body-md);
    line-height: 1.6;
}

/* Site Utility Typography Classes (Overrides for Framework/Utility CSS) */
.text-display-lg {
    font-size: var(--fs-display) !important;
}

.text-headline-lg {
    font-size: var(--fs-headline-lg) !important;
}

.text-headline-md {
    font-size: var(--fs-headline-md) !important;
}

.text-body-lg {
    font-size: var(--fs-body-lg) !important;
}

.text-body-md {
    font-size: var(--fs-body-md) !important;
}

.text-label-md {
    font-size: var(--fs-label-md) !important;
}

.text-label-sm {
    font-size: var(--fs-label-sm) !important;
}

.text-headline-sm {
    font-size: var(--fs-headline-sm) !important;
}

/* Specific Card Headings */
.category-card .category-title {
    font-size: var(--fs-card-title) !important;
}

.product-title {
    font-size: var(--fs-card-title) !important;
}

/* Target card headings on specific pages where utility classes might be used */
.group h3.text-body-md {
    font-size: var(--fs-card-title) !important;
}

.bento-card h3,
.bento-card h4,
.bento-card h5 {
    font-size: var(--fs-card-title) !important;
}

.contact-hero-card strong {
    font-size: var(--fs-headline-md) !important;
}

.contact-b2b-card strong {
    font-size: var(--fs-card-title) !important;
}

/* One width and gutter system for shared page sections and the footer. */
.max-w-container-max-width {
    width: min(calc(100% - (2 * var(--site-gutter))), var(--site-container));
    max-width: var(--site-container);
    margin-inline: auto;
}

.px-grid-gutter {
    padding-right: var(--site-gutter);
    padding-left: var(--site-gutter);
}

main,
main > section,
footer {
    min-width: 0;
}

main img {
    max-width: 100%;
}

.snap-x {
    touch-action: pan-x pan-y;
    overscroll-behavior-inline: contain;
}

/* Homepage proportions */
.home-hero {
    padding-top: 36px;
    padding-bottom: 36px;
}

.home-hero-inner {
    min-height: 480px;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
    gap: clamp(24px, 4vw, 48px);
}

.home-hero-copy {
    max-width: 580px;
}

.home-hero-copy .text-display-lg {
    font-size: var(--fs-display);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.home-hero-copy .text-body-lg {
    max-width: 560px;
    font-size: var(--fs-body-lg);
    line-height: 1.65;
}

.home-hero-visual {
    width: 100%;
    max-width: 520px;
    margin-left: auto;
}

/* Animations for premium Hero Section */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Rotating word text effect */
.rotating-words-container {
    display: inline-block;
    height: 1.15em;
    line-height: 1.15;
    overflow: hidden;
    vertical-align: bottom;
    position: relative;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.rotating-word {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateY(80%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    white-space: nowrap;
}

.rotating-word.active {
    opacity: 1;
    transform: translateY(0);
    z-index: 2;
}

.rotating-word.exit {
    opacity: 0;
    transform: translateY(-80%);
    z-index: 1;
}

/* Ken Burns continuous image panning */
@keyframes kenBurns {
    0%, 100% {
        transform: scale(1.02) translate(0, 0);
    }
    50% {
        transform: scale(1.1) translate(1%, -1%);
    }
}

.animate-ken-burns {
    animation: kenBurns 16s ease-in-out infinite;
    transform-origin: center center;
}

.bento-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 24px 48px rgba(0, 39, 93, 0.15);
    border-color: rgba(0, 110, 27, 0.3);
}

/* Floating background blobs */
@keyframes floatingBlob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(20px, -30px) scale(1.08);
    }
    66% {
        transform: translate(-15px, 20px) scale(0.92);
    }
}

.animate-blob-1 {
    animation: floatingBlob 12s ease-in-out infinite;
}

.animate-blob-2 {
    animation: floatingBlob 18s ease-in-out infinite alternate;
}

.home-section {
    padding-top: var(--site-section-space);
    padding-bottom: var(--site-section-space);
}

.home-section .text-headline-lg {
    font-size: var(--fs-headline-lg);
    line-height: 1.25;
}

.home-trust {
    padding-top: 44px;
    padding-bottom: 44px;
}

/* Shop sizing */
.shop-layout {
    width: 100%;
    max-width: var(--site-container);
    padding-top: 52px;
    padding-bottom: 64px;
}

.shop-layout > aside {
    flex-basis: 220px;
}

.shop-layout > .shop-filters {
    height: fit-content;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #dfe7e2;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .shop-layout {
        display: grid;
        grid-template-columns: minmax(210px, 230px) minmax(0, 1fr);
        gap: 24px;
        align-items: flex-start;
    }

    .shop-layout > .shop-filters {
        position: sticky;
        top: 156px;
        width: 100%;
        min-height: auto;
        padding: 18px 20px;
        align-self: start;
    }

    .shop-layout > .flex-grow {
        min-width: 0;
    }

}

@media (max-width: 1023px) {
    .shop-layout {
        flex-direction: column;
    }

    .shop-layout > .shop-filters {
        position: static;
        width: 100%;
        flex-basis: auto;
        align-self: stretch;
    }
}

.shop-layout > section {
    min-width: 0;
}

/* Shared site footer */
.site-footer {
    --footer-main: #1b5e20;
    --footer-bottom: #164d1a;
    --footer-heading: #ffffff;
    --footer-text: #edf7ed;
    --footer-muted: #c8dfca;
    --footer-accent: #81c784;
    --footer-divider: rgba(255, 255, 255, 0.15);
    margin: 0;
    padding: 0;
    background: var(--footer-main);
    color: var(--footer-text);
    font-family: 'Inter', sans-serif;
}

.site-footer *,
.site-footer *::before,
.site-footer *::after {
    box-sizing: border-box;
}

.site-footer__main,
.site-footer__bottom-inner {
    width: calc(100% - 32px);
    max-width: var(--site-container);
    margin-inline: auto;
    padding-inline: 0;
}

.site-footer__main {
    display: grid;
    grid-template-columns: minmax(250px, 1.45fr) minmax(145px, 0.78fr) minmax(175px, 0.9fr) minmax(230px, 1.15fr);
    gap: 32px;
    padding-top: 42px;
    padding-bottom: 38px;
}

.site-footer__brand,
.site-footer__column {
    min-width: 0;
}


.site-footer__logo {
    display: block;
    width: 172px;
    height: auto;
    margin-bottom: 14px;
}

.site-footer__wordmark {
    display: inline-block;
    margin-bottom: 14px;
    color: #ffffff;
    font-family: 'Hanken Grotesk', 'Inter', sans-serif;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    text-decoration: none;
}

.site-footer__wordmark:hover,
.site-footer__wordmark:focus-visible {
    color: #ffffff;
}

.site-footer__description {
    max-width: 390px;
    margin: 0 0 18px;
    color: var(--footer-text);
    font-size: 14px;
    line-height: 1.65;
}

.site-footer__heading {
    margin: 5px 0 16px;
    color: var(--footer-heading);
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.site-footer__links,
.site-footer__contact-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer a {
    color: var(--footer-text);
    text-decoration: none;
    min-height: auto !important;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.site-footer__links a,
.site-footer__contact-list a,
.site-footer__legal a {
    display: inline-block;
    min-height: auto !important;
    padding: 2px 0;
    font-size: 13.5px;
    line-height: 1.4;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__contact-list a:hover,
.site-footer__contact-list a:focus-visible,
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
    color: var(--footer-accent);
}

.site-footer a:focus-visible {
    outline: 2px solid var(--footer-accent);
    outline-offset: 4px;
    border-radius: 3px;
}

.site-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--footer-divider);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
}

.site-footer__social-link svg,
.site-footer__social-link .material-symbols-outlined {
    color: #ffffff;
    fill: currentColor;
    width: 18px;
    height: 18px;
    font-size: 19px;
    display: block;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
    border-color: var(--footer-accent);
    background: var(--footer-accent);
    transform: translateY(-2px);
}

.site-footer__contact-list li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    color: var(--footer-text);
    font-size: 13.5px;
    line-height: 1.5;
}

.site-footer address {
    margin: 0;
    font-style: normal;
}

.site-footer__contact-list .material-symbols-outlined {
    margin-top: 1px;
    color: var(--footer-muted);
    font-size: 18px;
}

.site-footer__whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    margin-top: 16px;
    padding: 9px 15px;
    border: 1px solid #ffffff;
    border-radius: 8px;
    background: #ffffff;
    color: #1b5e20 !important;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
}

.site-footer__whatsapp .material-symbols-outlined {
    font-size: 19px;
    color: #1b5e20 !important;
}

.site-footer__whatsapp:hover,
.site-footer__whatsapp:focus-visible {
    border-color: #ffffff;
    background: #eaf5ed;
    color: #1b5e20 !important;
}

.site-footer__bottom {
    border-top: 1px solid var(--footer-divider);
    background: var(--footer-bottom);
}

.site-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 58px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.site-footer__copyright {
    margin: 0;
    color: var(--footer-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.site-footer__credit {
    color: inherit;
    font: inherit;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease;
}

a.site-footer__credit:hover,
a.site-footer__credit:focus-visible {
    color: var(--footer-accent, #4ade80);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer__separator {
    margin-inline: 10px;
    color: var(--footer-divider);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 22px;
}

.site-footer__legal a {
    color: var(--footer-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* Consistent control sizing */
button,
input,
select,
textarea {
    min-width: 0;
}

input,
select,
textarea {
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    :root {
        --site-section-space: 60px;
    }

    .home-hero-inner {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .home-hero-copy {
        max-width: 680px;
    }

    .home-hero-visual {
        max-width: 560px;
        margin-inline: auto;
    }

    .site-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 48px;
    }

}

@media (max-width: 767px) {
    :root {
        --site-gutter: 16px;
        --site-section-space: 48px;
        --fs-display: clamp(28px, 8vw, 34px);
        --fs-headline-lg: 22px;
        --fs-body-lg: 14px;
    }

    html {
        scroll-padding-top: 112px;
    }

    .home-hero {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .home-hero-inner {
        gap: 24px;
    }

    .home-hero-copy .text-display-lg {
        font-size: var(--fs-display);
        line-height: 1.1;
        overflow-wrap: anywhere;
    }

    .home-hero-copy .text-body-lg {
        font-size: var(--fs-body-lg);
        line-height: 1.6;
    }

    .home-hero-copy .flex-wrap > a {
        width: 100%;
    }

    .home-hero-visual {
        max-width: 480px;
    }

    .home-section .text-headline-lg {
        font-size: var(--fs-headline-lg);
    }

    .home-trust {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .shop-layout {
        padding-top: 36px;
        padding-bottom: 48px;
        gap: 36px;
    }

    .site-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
        padding-top: 28px;
        padding-bottom: 24px;
    }
    .site-footer__links a,
    .site-footer__contact-list a,
    .site-footer__contact-list li {
        min-height: auto !important;
        font-size: 12.5px;
        line-height: 1.35;
    }

    .site-footer__heading {
        margin-top: 0;
        margin-bottom: 13px;
    }

    .site-footer__bottom-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding-top: 16px;
        padding-bottom: 17px;
    }

    .site-footer__legal {
        justify-content: flex-start;
        gap: 7px 18px;
    }
}

/* Redesigned Shop by Category Cards */
.premium-category-section {
    background: radial-gradient(100% 100% at 50% 0%, rgba(243, 246, 255, 0.6) 0%, rgba(249, 249, 252, 1) 100%);
    position: relative;
}

.category-card {
    display: block;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(174, 198, 255, 0.35);
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 26, 64, 0.03);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 110, 27, 0.4);
    box-shadow: 0 20px 40px rgba(0, 110, 27, 0.08);
}

.category-image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 0.875rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: #f7f8fc;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-card:hover .category-image-wrapper img {
    transform: scale(1.08);
}

/* Category-specific glowing background tint circles */
.category-card .image-glow-tint {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.category-card.cat-grocery .image-glow-tint {
    background: radial-gradient(circle, #ebac35 0%, rgba(255, 255, 255, 0) 70%);
}
.category-card.cat-millets .image-glow-tint {
    background: radial-gradient(circle, #006e1b 0%, rgba(255, 255, 255, 0) 70%);
}
.category-card.cat-spices .image-glow-tint {
    background: radial-gradient(circle, #c4440c 0%, rgba(255, 255, 255, 0) 70%);
}
.category-card.cat-rice .image-glow-tint {
    background: radial-gradient(circle, #003c87 0%, rgba(255, 255, 255, 0) 70%);
}

.category-card:hover .image-glow-tint {
    opacity: 0.28;
    transform: scale(1.1);
}

.category-card .category-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.category-card .category-title {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: var(--fs-card-title);
    font-weight: 700;
    color: #00275d;
    transition: color 0.3s ease;
}

.category-card:hover .category-title {
    color: #006e1b;
}

.category-card .category-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(0, 110, 27, 0.06);
    border-radius: 50%;
    color: #006e1b;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-card:hover .category-arrow {
    opacity: 1;
    transform: translateX(0);
}

.category-card .category-arrow span {
    font-size: 1.25rem;
}


/* Redesigned Product Export Picks Cards */
.premium-product-section {
    background: #fbfbfe;
}

.product-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.product-scroll-container::-webkit-scrollbar-track {
    background: rgba(174, 198, 255, 0.1);
    border-radius: 99px;
}

.product-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(0, 39, 93, 0.15);
    border-radius: 99px;
    transition: background 0.3s ease;
}

.product-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 110, 27, 0.3);
}

.premium-product-card {
    background: #ffffff;
    border: 1px solid rgba(174, 198, 255, 0.25);
    border-radius: 1.25rem;
    padding: 1.15rem;
    box-shadow: 0 4px 18px rgba(0, 26, 64, 0.02);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 39, 93, 0.25);
    box-shadow: 0 20px 40px rgba(0, 39, 93, 0.08);
}

/* Keep database-driven cards aligned regardless of uploaded image dimensions. */
.product-scroll-container > .premium-product-card {
    display: flex;
    flex: 0 0 clamp(232px, 17vw, 252px);
    width: clamp(232px, 17vw, 252px);
    min-width: clamp(232px, 17vw, 252px);
    max-width: 252px;
    min-height: auto;
    flex-direction: column;
    box-sizing: border-box;
}

.product-scroll-container > .premium-product-card .product-visual-wrapper {
    width: 100%;
    height: 190px;
    min-height: 190px;
    aspect-ratio: auto;
    padding: 14px;
    box-sizing: border-box;
}

.product-scroll-container > .premium-product-card .product-visual-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.product-scroll-container > .premium-product-card > p {
    margin-bottom: 6px;
    min-height: auto;
}

.product-scroll-container > .premium-product-card .premium-cart-btn {
    width: 100%;
    margin-top: 8px;
}

@media (max-width: 767px) {
    .product-scroll-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        overflow-x: visible !important;
        padding-bottom: 0 !important;
    }

    .product-scroll-container > .premium-product-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 12px 10px;
        min-height: auto !important;
        border-radius: 10px;
    }

    .product-scroll-container > .premium-product-card .product-visual-wrapper {
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
        padding: 8px;
        margin-bottom: 8px;
        border-radius: 8px;
    }
}

.product-visual-wrapper {
    position: relative;
    aspect-ratio: 4 / 5;
    background: radial-gradient(circle at center, rgba(240, 243, 252, 0.8) 0%, rgba(247, 249, 255, 0.4) 100%);
    border-radius: 0.875rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
}

.product-badge-tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 5;
    font-size: var(--fs-label-sm);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    padding: 0.3rem 0.65rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.product-badge-tag.tag-bestseller {
    background: linear-gradient(135deg, #00275d, #003c87);
}

.product-badge-tag.tag-organic {
    background: linear-gradient(135deg, #006e1b, #078126);
}

.product-visual-wrapper img {
    max-height: 85%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 26, 64, 0.06));
}

.premium-product-card:hover .product-visual-wrapper img {
    transform: scale(1.06) translateY(-4px);
    filter: drop-shadow(0 12px 24px rgba(0, 26, 64, 0.14));
}

.product-visual-wrapper .product-glow-circle {
    position: absolute;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 110, 27, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.premium-product-card:hover .product-visual-wrapper .product-glow-circle {
    opacity: 1;
    transform: scale(1.3);
}

.product-category-label {
    font-size: var(--fs-label-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #006e1b;
    margin-bottom: 0.35rem;
    display: inline-block;
}

.product-title {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-card-title);
    font-weight: 700;
    color: #00275d;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.premium-product-card:hover .product-title {
    color: #006e1b;
}

/* Golden Rating Stars */
.rating-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.stars-wrapper {
    display: flex;
    color: #ff9100;
}

.stars-wrapper span {
    font-size: 1.05rem;
}

.review-count-label {
    font-size: 0.75rem;
    color: #737782;
    margin-left: 0.25rem;
}

/* Premium Solid CTA Button */
.premium-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #00275d 0%, #003c87 100%);
    border: none;
    border-radius: 0.75rem;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 39, 93, 0.12);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 39, 93, 0.25);
}

.premium-cart-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.premium-cart-btn:hover::after {
    left: 150%;
}

.premium-cart-btn:active {
    transform: scale(0.97);
}

/* ==========================================
   NelliMart green-first visual theme
   ========================================== */
body {
    color: var(--nm-text);
    background: var(--nm-background);
}

::selection {
    color: var(--nm-text);
    background: var(--nm-secondary);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(46, 125, 50, 0.34);
    outline-offset: 3px;
}

/* Shared utility-color corrections */
.bg-background { background-color: var(--nm-background) !important; }
.bg-white,
.bg-surface-container-lowest { background-color: var(--nm-surface) !important; }
.bg-surface-container,
.bg-surface-container-low,
.bg-surface-container-highest { background-color: var(--nm-surface-soft) !important; }
.bg-primary { background-color: var(--nm-primary) !important; }
.bg-secondary { background-color: var(--nm-secondary) !important; }
.bg-primary-container { background-color: var(--nm-accent) !important; }
.bg-secondary-container { background-color: #e8f5e9 !important; }
.text-primary,
.text-secondary { color: var(--nm-primary) !important; }
.text-on-surface,
.text-on-background { color: var(--nm-text) !important; }
.text-on-surface-variant,
.text-outline { color: var(--nm-text-muted) !important; }
.text-on-primary,
.text-on-secondary { color: #ffffff !important; }
.text-on-primary-container { color: var(--nm-text) !important; }
.text-on-secondary-container { color: var(--nm-primary-hover) !important; }
.text-on-tertiary-container { color: var(--nm-accent-hover) !important; }
.border-primary,
.border-secondary { border-color: var(--nm-primary) !important; }
.border-outline-variant,
.border-outline-variant\/30 { border-color: var(--nm-border) !important; }
.hover\:bg-primary:hover { background-color: var(--nm-primary-hover) !important; }
.hover\:bg-secondary:hover { background-color: var(--nm-primary-hover) !important; }
.hover\:text-primary:hover,
.hover\:text-secondary:hover { color: var(--nm-primary-hover) !important; }
.focus\:ring-primary:focus,
.focus\:ring-secondary:focus { --nm-ring-color: rgba(46, 125, 50, 0.42) !important; }
.accent-primary { accent-color: var(--nm-primary) !important; }

/* White navigation with green emphasis */
.site-header.extracted-header,
.extracted-header {
    color: var(--nm-text);
    background: var(--nm-surface);
    border-top-color: var(--nm-primary);
    box-shadow: 0 4px 20px rgba(38, 50, 56, 0.09);
}

.extracted-header::after {
    background: var(--nm-primary);
    box-shadow: none;
}

.extracted-header .header-top,
.extracted-header .header-nav {
    color: var(--nm-text);
    background: var(--nm-surface);
}

.extracted-header .header-nav {
    border-top: 1px solid var(--nm-border);
    border-bottom: 1px solid var(--nm-border);
    box-shadow: none;
}

.extracted-header .header-search-control {
    border: 1.5px solid var(--nm-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(38, 50, 56, 0.04);
}

.extracted-header .header-search input {
    color: var(--nm-text);
    background: transparent;
    border: none;
    border-radius: 0;
}

.extracted-header .header-search button {
    color: #ffffff;
    background: var(--nm-primary);
    border: none;
    border-radius: 0;
}

.extracted-header .header-search button:hover {
    background: var(--nm-primary-hover);
    filter: none;
}

.extracted-header .header-account,
.extracted-header .header-orders,
.extracted-header .header-account strong,
.extracted-header .header-orders strong,
.extracted-header .header-cart,
.extracted-header .header-cart > strong {
    color: var(--nm-text);
}

.extracted-header .header-account > span,
.extracted-header .header-orders > span {
    color: var(--nm-text-muted);
}

.extracted-header .header-cart .material-symbols-outlined,
.extracted-header .header-cart:hover {
    color: var(--nm-primary);
}

.extracted-header .header-cart-count {
    color: var(--nm-text);
    background: var(--nm-accent);
    border-color: var(--nm-surface);
}

.extracted-header .header-nav a,
.extracted-header .header-nav a[aria-current="page"] {
    color: var(--nm-text);
}

.extracted-header .header-nav a::after {
    background: var(--nm-primary);
    box-shadow: none;
}

.extracted-header .header-nav a:hover,
.extracted-header .header-nav a[aria-current="page"] {
    color: var(--nm-primary-hover);
}

/* Hero gradients are the only decorative gradients in the theme. */
.home-hero,
.contact-hero {
    color: #ffffff;
    background: linear-gradient(135deg, #2e7d32, #66bb6a) !important;
}

.home-hero {
    background:
        linear-gradient(90deg, rgba(27, 94, 32, 0.95) 0%, rgba(46, 125, 50, 0.88) 46%, rgba(46, 125, 50, 0.7) 100%),
        url("asset/hero-organic-farm-v2.png") center / cover no-repeat !important;
}

.home-hero-copy {
    text-shadow: 0 2px 18px rgba(20, 55, 23, 0.18);
}

.home-hero .text-primary,
.home-hero .text-secondary,
.home-hero .text-on-surface-variant {
    color: #ffffff !important;
}

.home-hero .bg-secondary-container\/30 {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
}

.home-hero .text-on-secondary-container { color: #ffffff !important; }
.home-hero .bg-secondary { background: var(--nm-accent) !important; }
.home-hero .bg-hero-green-tint { background: rgba(255, 255, 255, 0.15) !important; }
.home-hero .bg-hero-blue-tint { background: rgba(255, 152, 0, 0.14) !important; }
.home-hero a.bg-primary {
    color: var(--nm-text) !important;
    background: var(--nm-accent) !important;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(108, 64, 0, 0.2);
}
.home-hero a.bg-primary:hover { background: var(--nm-accent-hover) !important; }
.home-hero a.border-secondary {
    color: #ffffff !important;
    border-color: #ffffff !important;
    border-radius: 14px;
}
.home-hero a.border-secondary:hover { background: rgba(255, 255, 255, 0.12) !important; }

.home-section a.bg-secondary {
    color: #ffffff !important;
    background: var(--nm-primary) !important;
    border-radius: 14px;
}
.home-section a.bg-secondary:hover { background: var(--nm-primary-hover) !important; }
.home-section .bg-gradient-to-r { display: none !important; }

.contact-hero-copy > p,
.contact-hero-card p { color: rgba(255, 255, 255, 0.88); }
.contact-eyebrow,
.contact-promises .material-symbols-outlined { color: #ffffff; }
.contact-eyebrow > span { background: var(--nm-accent); }
.contact-hero-card {
    border-radius: var(--nm-radius-card);
    box-shadow: 0 22px 50px rgba(27, 94, 32, 0.24);
}
.contact-hero-icon {
    color: var(--nm-primary-hover);
    background: #ffffff;
}

/* Cards, surfaces, and product interactions */
.premium-category-section,
.premium-product-section,
.contact-section {
    background: var(--nm-background);
}

.category-card,
.premium-product-card,
.bento-card,
.contact-method,
.contact-form-card,
.shop-layout .group.flex.flex-col.h-full {
    background: var(--nm-surface);
    border-color: var(--nm-border);
    border-radius: var(--nm-radius-card);
    box-shadow: var(--nm-shadow-card);
}

.category-card:hover,
.premium-product-card:hover,
.bento-card:hover,
a.contact-method:hover,
.shop-layout .group.flex.flex-col.h-full:hover {
    border-color: rgba(46, 125, 50, 0.32);
    box-shadow: var(--nm-shadow-hover);
}

.category-image-wrapper,
.product-visual-wrapper,
.shop-layout .group .aspect-square {
    background: var(--nm-surface-soft);
}

.category-card .category-title,
.product-title,
.contact-details h2,
.contact-form-heading h2,
.contact-method strong {
    color: var(--nm-text);
}

.category-card:hover .category-title,
.premium-product-card:hover .product-title,
.product-category-label,
.contact-section-label,
.contact-method-icon,
.contact-trust-grid .material-symbols-outlined {
    color: var(--nm-primary);
}

.category-card .category-arrow,
.contact-method-icon,
.contact-trust-grid .material-symbols-outlined {
    color: var(--nm-primary);
    background: #e8f5e9;
}

.product-badge-tag,
.product-badge-tag.tag-bestseller {
    color: var(--nm-text);
    background: var(--nm-accent);
}
.product-badge-tag.tag-organic {
    color: #ffffff;
    background: var(--nm-primary);
}
.stars-wrapper { color: var(--nm-accent); }

.premium-cart-btn,
.shop-layout .group button.bg-primary {
    color: var(--nm-text) !important;
    background: var(--nm-accent) !important;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(255, 152, 0, 0.22);
}
.premium-cart-btn:hover,
.shop-layout .group button.bg-primary:hover {
    color: var(--nm-text) !important;
    background: var(--nm-accent-hover) !important;
    box-shadow: 0 10px 22px rgba(230, 134, 0, 0.28);
}
.premium-cart-btn::after { display: none; }

.shop-layout select,
.shop-layout input {
    border-color: var(--nm-border);
    border-radius: 12px;
}
.shop-layout .active-nav-border { border-color: var(--nm-primary); }
.shop-layout input[type="checkbox"] { accent-color: var(--nm-primary); }
.shop-layout .bg-primary-container {
    color: var(--nm-text) !important;
    background: var(--nm-accent) !important;
}

/* Forms and B2B components */
:root {
    --contact-primary: var(--nm-text);
    --contact-primary-light: var(--nm-primary);
    --contact-green: var(--nm-primary);
    --contact-green-light: #e8f5e9;
    --contact-ink: var(--nm-text);
    --contact-muted: var(--nm-text-muted);
    --contact-line: var(--nm-border);
    --contact-surface: var(--nm-surface);
    --contact-soft: var(--nm-background);
}

.contact-b2b-card {
    background: var(--nm-primary);
    border-radius: var(--nm-radius-card);
}
.contact-b2b-card > .material-symbols-outlined,
.contact-b2b-card a { color: #ffffff; }
.contact-b2b-card p { color: rgba(255, 255, 255, 0.82); }
.contact-form-card { box-shadow: var(--nm-shadow-card); }
#contact-form input:not([type="checkbox"]),
#contact-form select,
#contact-form textarea {
    color: var(--nm-text);
    background: var(--nm-background);
    border-color: var(--nm-border);
    border-radius: 12px;
}
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
    border-color: var(--nm-primary);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.12);
}
.contact-submit {
    background: var(--nm-primary);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(46, 125, 50, 0.2);
}
.contact-submit:hover { background: var(--nm-primary-hover); }

.b2b-quote {
    --b2b-ink: var(--nm-text);
    --b2b-green: var(--nm-primary);
    --b2b-lime: var(--nm-secondary);
    --b2b-cream: var(--nm-background);
    --b2b-line: var(--nm-border);
}
.b2b-quote__layout {
    border-color: var(--nm-border);
    border-radius: 20px;
    background: var(--nm-surface);
    box-shadow: var(--nm-shadow-card);
}
.b2b-quote__aside { background: var(--nm-primary-hover); }
.b2b-quote__aside::after { background: rgba(129, 199, 132, 0.13); }
.b2b-field input,
.b2b-field select,
.b2b-field textarea,
.b2b-product {
    color: var(--nm-text);
    background: var(--nm-background);
    border-color: var(--nm-border);
    border-radius: 12px;
}
.b2b-submit { background: var(--nm-primary); }
.b2b-submit:hover { background: var(--nm-primary-hover); }

/* Footer uses the deep green end of the same palette. */
.site-footer {
    --footer-main: #1b5e20;
    --footer-bottom: #164d1a;
    --footer-heading: #ffffff;
    --footer-text: #edf7ed;
    --footer-muted: #c8dfca;
    --footer-accent: #81c784;
}
.site-footer__whatsapp {
    color: var(--nm-primary-hover) !important;
    background: #ffffff;
    border-color: #ffffff;
}
.site-footer__whatsapp:hover,
.site-footer__whatsapp:focus-visible {
    color: #ffffff !important;
    background: var(--nm-primary);
    border-color: var(--nm-secondary);
}

/* Premium commerce controls */
.product-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.product-card__image-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shop-product-card .product-card__image-link img { object-fit: cover; }
.product-title a,
.shop-product-card h3 a { color: inherit; text-decoration: none; }
.product-title a:hover,
.shop-product-card h3 a:hover { color: var(--nm-primary); }

.product-card__details-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin-top: 12px;
    color: var(--nm-primary);
    font-size: 11.5px;
    font-weight: 800;
    text-decoration: none;
}

.product-card__details-link span { transition: transform 160ms ease; }
.product-card__details-link:hover { color: var(--nm-primary-hover); }
.premium-product-card.has-detail-links { display: flex; flex-direction: column; }
.premium-product-card .product-card__details-link { margin-top: 6px; margin-bottom: 6px; }
.shop-product-card .product-card__details-link { margin-top: 13px; }

.cart-add-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    overflow: hidden;
    color: var(--nm-text) !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: var(--nm-accent) !important;
    border: 1px solid rgba(166, 93, 0, 0.2);
    border-radius: 13px;
    box-shadow: 0 7px 18px rgba(255, 152, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.cart-add-button::before {
    position: absolute;
    inset: 0;
    content: '';
    background: rgba(255, 255, 255, 0);
    transition: background-color 180ms ease;
}

.cart-add-button > * {
    position: relative;
    z-index: 1;
}

.cart-add-button .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.cart-add-button:hover {
    color: var(--nm-text) !important;
    background: var(--nm-accent-hover) !important;
    box-shadow: 0 11px 24px rgba(230, 134, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
}

.cart-add-button:hover::before { background: rgba(255, 255, 255, 0.08); }
.cart-add-button:active { transform: translateY(0) scale(0.97); }
.cart-add-button:disabled { cursor: default; opacity: 1; }
.cart-add-button.is-added {
    color: #ffffff !important;
    background: var(--nm-primary) !important;
    border-color: var(--nm-primary-hover);
    box-shadow: 0 8px 20px rgba(46, 125, 50, 0.24);
}

.premium-cart-btn.cart-add-button {
    width: 100%;
    min-height: 46px;
}

.shop-layout .shop-product-card .cart-add-button {
    flex: 0 0 auto;
    min-width: 82px;
}

.shop-product-card[hidden],
.shop-pagination [hidden],
.shop-pagination[hidden] {
    display: none !important;
}

.shop-pagination {
    align-items: center;
}

.shop-pagination button {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--nm-text-muted);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: 10px;
    box-shadow: none;
    font-weight: 600;
    line-height: 1;
    outline: none;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.shop-pagination button > .material-symbols-outlined {
    font-size: 22px;
    line-height: 1;
}

.shop-pagination button:hover:not(.is-active):not(:disabled) {
    color: var(--nm-primary);
    background: #f2f8f4;
    border-color: var(--nm-primary);
}

.shop-pagination button.is-active {
    color: #ffffff !important;
    background: var(--nm-primary) !important;
    border-color: var(--nm-primary);
    box-shadow: none;
}

.shop-pagination button:focus { outline: none; }

.shop-pagination button:focus-visible {
    outline: 3px solid rgba(46, 125, 50, 0.28);
    outline-offset: 3px;
}

.shop-pagination button:disabled,
.shop-pagination button:disabled:hover {
    color: #a9b4c0 !important;
    background: #ffffff !important;
    border-color: #e4e7ec;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.72;
}

.shop-no-results {
    grid-column: 1 / -1;
    padding: 64px 24px;
    color: var(--nm-text-muted);
    text-align: center;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-radius-card);
    box-shadow: var(--nm-shadow-card);
}
.shop-no-results[hidden] { display: none; }
.shop-no-results .material-symbols-outlined { margin-bottom: 10px; color: var(--nm-primary); font-size: 38px; }
.shop-no-results h2 { margin: 0 0 6px; color: var(--nm-text); font-weight: 750; }
.shop-no-results p { margin: 0; }
.shop-no-results > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.shop-no-results button,
.shop-clear-filters,
.shop-apply-filters,
.shop-filter-toggle {
    padding: 9px 14px;
    color: var(--nm-primary);
    background: var(--nm-surface);
    border: 1px solid var(--nm-primary);
    border-radius: 10px;
    font-weight: 700;
}
.shop-clear-filters { width: 100%; padding: 8px 12px; font-size: 13px; }
.shop-apply-filters { display: none; width: 100%; color: #fff; background: var(--nm-primary); padding: 8px 12px; font-size: 13px; }
.shop-filter-toggle { display: none; width: fit-content; margin-bottom: 18px; align-items: center; gap: 8px; }
.shop-filter-toggle > span:last-child { display: inline-grid; min-width: 22px; height: 22px; color: #fff; background: var(--nm-primary); border-radius: 999px; font-size: 12px; place-items: center; }
.shop-filters fieldset { border: none; margin: 0; padding: 0; }
.shop-filters legend,
.shop-filters h3 { font-size: var(--fs-label-md, 13.5px) !important; font-weight: 700 !important; margin-bottom: 10px !important; letter-spacing: 0.04em; }
.shop-filters legend .material-symbols-outlined,
.shop-filters h3 .material-symbols-outlined { font-size: 18px !important; }
.shop-filters label { font-size: var(--fs-label-md, 13.5px) !important; line-height: 1.35; cursor: pointer; gap: 8px !important; }
.shop-filters label input[type="checkbox"] { width: 16px !important; height: 16px !important; flex-shrink: 0; }
.shop-filters label span { font-size: var(--fs-label-md, 13.5px) !important; }
.shop-filters label small { font-size: 11.5px !important; color: var(--nm-text-muted, #64748b); }
.shop-filters label.is-muted { opacity: 0.45; cursor: not-allowed; }
.shop-price-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.shop-price-presets button { min-height: 32px; padding: 5px 8px; color: var(--nm-text-secondary); background: #fff; border: 1px solid var(--nm-border); border-radius: 6px; font-size: 11.5px; font-weight: 600; }
.shop-price-presets button:hover, .shop-price-presets button.is-active { color: #fff; background: var(--nm-primary); border-color: var(--nm-primary); }
.shop-search-clear[hidden] { display: none !important; }
.extracted-header .header-search button.shop-search-clear {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 120px;
    display: grid;
    min-width: 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--nm-text-muted);
    background: transparent;
    border-radius: 50%;
    transform: translateY(-50%);
    place-items: center;
}
.extracted-header .header-search button.shop-search-clear:hover { color: var(--nm-text); background: var(--nm-surface-soft); }
.extracted-header .header-search button.shop-search-clear .material-symbols-outlined { font-size: 19px; }

.shop-filters__header { display: none; }
.shop-filters__close {
    display: grid;
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    color: var(--nm-text);
    background: var(--nm-surface-soft);
    border: 1px solid var(--nm-border);
    border-radius: 50%;
    place-items: center;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.shop-filters__close:hover,
.shop-filters__close:focus-visible {
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
}
.shop-filters__close .material-symbols-outlined { font-size: 20px; }

@media (max-width: 767px) {
    .shop-filter-toggle { display: inline-flex; }
    .shop-layout > .shop-filters { display: none; }
    .shop-layout > .shop-filters.is-open { display: block; }
    .shop-filters__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 14px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--nm-border);
    }
    .shop-filters__title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--nm-primary);
        font-family: 'Hanken Grotesk', sans-serif;
        font-size: 18px;
        font-weight: 750;
    }
    .shop-filters__title .material-symbols-outlined {
        font-size: 22px;
        color: var(--nm-primary);
    }
    .shop-apply-filters { display: block; }
}

/* Persistent cart drawer */
body.cart-is-open { overflow: hidden; }
.cart-layer[hidden] { display: none; }
.cart-layer {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr minmax(320px, 430px);
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.cart-drawer__backdrop {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(18, 32, 23, 0.48);
    border: 0;
    opacity: 0;
    backdrop-filter: blur(3px);
    transition: opacity 220ms ease;
}

.cart-drawer {
    position: relative;
    z-index: 1;
    grid-column: 2;
    display: grid;
    grid-template-rows: max-content minmax(0, 1fr) max-content;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    background: var(--nm-background);
    box-shadow: -20px 0 60px rgba(23, 49, 29, 0.2);
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cart-layer.is-open .cart-drawer__backdrop { opacity: 1; }
.cart-layer.is-open .cart-drawer { transform: translateX(0); }

.cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 24px 20px;
    background: var(--nm-surface);
    border-bottom: 1px solid var(--nm-border);
}
.cart-drawer__header span:first-child {
    color: var(--nm-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.cart-drawer__header h2 { margin: 4px 0 0; color: var(--nm-text); font-size: var(--fs-headline-sm); font-weight: 750; }
.cart-drawer__close {
    display: grid;
    width: 42px;
    height: 42px;
    color: var(--nm-text);
    background: var(--nm-surface-soft);
    border: 1px solid var(--nm-border);
    border-radius: 50%;
    place-items: center;
}
.cart-drawer__close:hover { color: #ffffff; background: var(--nm-primary); border-color: var(--nm-primary); }

.cart-drawer__items {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.cart-item {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(38, 50, 56, 0.06);
}
.cart-item__image {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--nm-surface-soft);
    border-radius: 12px;
}
.cart-item__image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__details { min-width: 0; }
.cart-item__details h3 { margin: 2px 0 4px; overflow: hidden; color: var(--nm-text); font-size: 14px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.cart-item__price { color: var(--nm-primary); font-size: 14px; font-weight: 800; }
.cart-item__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.cart-item__quantity { display: inline-grid; grid-template-columns: repeat(3, 42px); align-items: center; width: 128px; height: 42px; overflow: hidden; border: 1px solid var(--nm-border); border-radius: 9px; }
.cart-item__quantity button { display: grid; width: 42px; height: 40px; min-height: 40px; padding: 0; color: var(--nm-primary); background: var(--nm-surface-soft); border: 0; border-radius: 0; font-size: 18px; place-items: center; }
.cart-item__quantity button:hover { color: #ffffff; background: var(--nm-primary); }
.cart-item__quantity span { display: grid; width: 42px; height: 40px; border-inline: 1px solid var(--nm-border); font-size: 12px; font-weight: 750; place-items: center; }
.cart-item__remove { padding: 4px; color: #c62828; background: transparent; border: 0; font-size: 11px; font-weight: 700; }
.cart-item__remove:hover { text-decoration: underline; }

.cart-drawer__empty { align-self: center; padding: 72px 24px; text-align: center; }
.cart-drawer__empty > .material-symbols-outlined { color: var(--nm-secondary); font-size: 56px; }
.cart-drawer__empty h3 { margin: 12px 0 6px; color: var(--nm-text); font-size: 20px; }
.cart-drawer__empty p { margin: 0 0 18px; color: var(--nm-text-muted); }
.cart-drawer__empty a { color: var(--nm-primary); font-weight: 750; }

.cart-drawer__footer {
    position: relative;
    z-index: 2;
    padding: 20px 22px 22px;
    background: var(--nm-surface);
    border-top: 1px solid var(--nm-border);
}
.cart-drawer__footer > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.cart-drawer__footer > div span { color: var(--nm-text-muted); font-size: 13px; }
.cart-drawer__total { color: var(--nm-text); font-size: var(--fs-headline-sm); }
.cart-drawer__checkout-actions { width: 100%; display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: stretch !important; justify-content: stretch !important; gap: 12px !important; margin: 0 !important; }
.cart-drawer__checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    background: var(--nm-primary);
    border: 2px solid var(--nm-primary);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(46, 125, 50, 0.2);
    cursor: pointer;
    text-decoration: none;
}
.cart-drawer__checkout:hover { background: var(--nm-primary-hover); transform: translateY(-1px); }
.cart-drawer__footer .cart-drawer__checkout,
.cart-drawer__footer .cart-drawer__checkout span {
    color: #ffffff;
}
.cart-drawer__checkout[aria-disabled="true"],.cart-drawer__checkout:disabled { pointer-events: none; opacity: 0.45; }
.cart-drawer__checkout:disabled {
    opacity: .78;
}
.cart-drawer__checkout .material-symbols-outlined { font-size: 19px; }
.cart-drawer__checkout:focus-visible,.cart-drawer__copy:focus-visible { outline: 3px solid rgba(10,122,50,.35); outline-offset: 3px; }
.cart-drawer__copy { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; color: var(--nm-primary); background: transparent; border: 0; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.cart-drawer__copy:hover { color: var(--nm-primary-hover); background: var(--nm-surface-soft); }
.cart-drawer__copy:disabled { cursor: not-allowed; opacity: .45; }
.cart-drawer__copy .material-symbols-outlined { font-size: 17px; }
.cart-drawer__footer small { display: block; margin-top: 10px; color: var(--nm-text-muted); font-size: 10.5px; line-height: 1.5; text-align: center; }

.toast-container {
    position: fixed;
    z-index: 9999;
    top: calc(var(--header-height, 130px) + 16px);
    right: max(12px, calc((100vw - 1320px) / 2 - 12px));
    max-width: min(420px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
    box-sizing: border-box;
}
.store-toast {
    box-sizing: border-box !important;
    width: min(390px, 100%) !important;
    max-width: 100% !important;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--nm-primary, #0a7a32);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
    opacity: 0;
    pointer-events: auto;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    word-break: break-word;
}
.store-toast.is-visible { opacity: 1; transform: translateY(0); }
.store-toast__icon { color: var(--nm-primary, #0a7a32); font-size: 22px; flex-shrink: 0; }
.store-toast__message { min-width: 0; overflow-wrap: break-word; color: #1e293b; font-size: 13px; font-weight: 600; line-height: 1.45; }
.store-toast__close {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    min-width: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin-left: 2px;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 6px !important;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 150ms ease, color 150ms ease;
}
.store-toast__close:hover { color: #0f172a; background: #f1f5f9; }
.store-toast__close .material-symbols-outlined { font-size: 18px; }

@media (max-width: 560px) {
    .cart-layer { grid-template-columns: 1fr; }
    .cart-drawer { grid-column: 1; width: min(100%, 390px); margin-left: auto; }
    .cart-drawer__header { padding-inline: 18px; }
    .cart-drawer__items { padding: 14px; }
}

@media (max-width: 640px) {
    .toast-container {
        top: calc(var(--header-height, 90px) + 12px);
        right: 12px;
        left: 12px;
        max-width: calc(100vw - 24px);
    }
    .store-toast { width: 100% !important; max-width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Homepage horizontal scrolling components */
.category-heading-actions,
.category-carousel-controls {
    display: flex;
    align-items: center;
}

.category-heading-actions { gap: 18px; }
.category-carousel-controls { gap: 8px; }

.category-carousel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--nm-primary);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: 50%;
    box-shadow: 0 5px 16px rgba(38, 50, 56, 0.08);
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.category-carousel-button:hover {
    color: #ffffff;
    background: var(--nm-primary);
    border-color: var(--nm-primary);
    transform: translateY(-2px);
}

.category-carousel-button > span {
    font-size: 22px;
    line-height: 1;
}

.category-carousel-button:focus-visible,
.category-carousel-viewport:focus-visible,
.trust-marquee:focus-visible {
    outline: 3px solid var(--nm-accent);
    outline-offset: 3px;
}

.category-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.category-carousel-viewport {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 2px 28px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-carousel-viewport::-webkit-scrollbar,
.trust-marquee::-webkit-scrollbar { display: none; }

.category-carousel-track {
    display: flex;
    align-items: stretch;
    gap: var(--site-grid-gutter, 24px);
}

.category-carousel .category-card {
    display: flex;
    flex: 0 0 calc((100% - (3 * var(--site-grid-gutter, 24px))) / 4);
    flex-direction: column;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Five compact cards on full-HD screens; fewer columns step down smoothly. */
@media (min-width: 1440px) {
    .category-carousel .category-card {
        flex-basis: calc((100% - (4 * var(--site-grid-gutter, 24px))) / 5);
    }
}

.category-carousel .category-card > p { margin-top: auto; }
.category-carousel .category-image-wrapper { flex: 0 0 auto; }

.category-image-wrapper img.is-fallback {
    padding: 18%;
    object-fit: contain;
    background: var(--nm-surface-soft);
}

.category-card.cat-flours .image-glow-tint {
    background: radial-gradient(circle at 50% 120%, rgba(224, 159, 62, 0.28), transparent 70%);
}

.category-card.cat-dals .image-glow-tint {
    background: radial-gradient(circle at 50% 120%, rgba(244, 162, 97, 0.28), transparent 70%);
}

.category-carousel-viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.category-carousel-viewport.is-dragging [data-carousel-slide] {
    pointer-events: none;
}

.home-trust {
    width: 100%;
    max-width: 100%;
    padding-block: 20px;
    overflow: hidden;
}

.trust-marquee {
    --trust-gap: clamp(48px, 4vw, 64px);
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.trust-marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: trust-marquee-scroll 20s linear infinite;
}

.trust-marquee-group {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--trust-gap);
    padding-inline: clamp(24px, 3vw, 32px);
}

.trust-marquee-item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    color: #ffffff;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: clamp(15px, 1.05vw, 17px);
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
}

.trust-marquee-item > .material-symbols-outlined {
    display: inline-grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: var(--nm-primary);
    background: #e8f5e9;
    border-radius: 50%;
    font-size: 24px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    place-items: center;
}

.trust-marquee.is-interacting .trust-marquee-track {
    animation-play-state: paused;
}

.trust-marquee.is-dragging {
    cursor: grabbing;
    user-select: none;
}

@keyframes trust-marquee-scroll {
    to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 1279px) {
    .category-carousel .category-card {
        flex-basis: calc((100% - (2 * var(--site-grid-gutter, 24px))) / 3);
    }
}

@media (max-width: 1023px) {
    .category-carousel .category-card {
        flex-basis: calc((100% - var(--site-grid-gutter, 24px)) / 2);
    }

    .trust-marquee-track { animation-duration: 40s; }
    .home-trust { padding-block: 16px; }
    .trust-marquee { --trust-gap: clamp(40px, 5vw, 48px); }
    .trust-marquee-item { font-size: 16px; }
    .trust-marquee-item > .material-symbols-outlined {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .category-heading-actions {
        width: 100%;
        justify-content: space-between;
    }

    .category-carousel-viewport {
        overflow: visible !important;
        padding-bottom: 0 !important;
    }
    .category-carousel-track,
    body:has(.market-hero) .category-carousel-track {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .category-carousel .category-card,
    body:has(.market-hero) .category-carousel .category-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 12px 10px !important;
        border-radius: 8px !important;
    }
    .category-carousel .category-image-wrapper {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        margin-bottom: 8px !important;
        border-radius: 6px !important;
    }
    .category-title {
        font-size: 13.5px !important;
        line-height: 1.3 !important;
    }
    .category-card > p {
        font-size: 11px !important;
        margin-top: 2px !important;
    }
    .home-trust { padding-block: 14px; }
    .trust-marquee { --trust-gap: clamp(32px, 9vw, 40px); }
    .trust-marquee-group { padding-inline: 20px; }
    .trust-marquee-track { animation-duration: 36s; }
    .trust-marquee-item { font-size: clamp(14px, 3.5vw, 15px); }
    .trust-marquee-item > .material-symbols-outlined {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: 20px;
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
    }
}

@media (max-width: 639px) {
    .category-carousel-controls { display: none; }
    .category-heading-actions { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .category-carousel-viewport { scroll-behavior: auto; }
    .trust-marquee-track {
        animation-duration: 20s !important;
        animation-iteration-count: infinite !important;
    }
}

/* Homepage grid and rhythm: align every section with the marketplace hero. */
body:has(.market-hero) .home-section > .max-w-container-max-width {
    width: min(calc(100% - (2 * var(--site-gutter))), var(--site-container));
    max-width: var(--site-container);
    margin-inline: auto;
    padding-inline: 0;
}

body:has(.market-hero) .home-section {
    padding-block: clamp(44px, 4.5vw, 64px);
}

body:has(.market-hero) .premium-category-section {
    padding-top: 38px;
    padding-bottom: 0;
}

body:has(.market-hero) .premium-category-section + .premium-product-section {
    padding-top: 0;
}

body:has(.market-hero) .premium-category-section .mb-8 {
    margin-bottom: 24px;
}

body:has(.market-hero) .category-heading-actions {
    gap: 14px;
}

body:has(.market-hero) .category-carousel-track {
    gap: 20px;
}

body:has(.market-hero) .category-carousel .category-card {
    flex-basis: calc((100% - 60px) / 4);
}

@media (max-width: 1279px) {
    body:has(.market-hero) .category-carousel .category-card {
        flex-basis: calc((100% - 40px) / 3);
    }
}

@media (max-width: 1023px) {
    body:has(.market-hero) .home-section > .max-w-container-max-width {
        width: min(calc(100% - 32px), var(--site-container));
        max-width: var(--site-container);
        margin-inline: auto;
    }

    body:has(.market-hero) .home-section {
        padding-block: 42px;
    }

    body:has(.market-hero) .premium-category-section {
        padding-top: 32px;
        padding-bottom: 0;
    }

    body:has(.market-hero) .category-carousel .category-card {
        flex-basis: calc((100% - 20px) / 2);
    }
}

@media (max-width: 767px) {
    body:has(.market-hero) .home-section > .max-w-container-max-width {
        width: calc(100% - 24px);
        max-width: var(--site-container);
        margin-inline: auto;
    }

    body:has(.market-hero) .home-section {
        padding-block: 34px;
    }

    body:has(.market-hero) .premium-category-section {
        padding-top: 28px;
        padding-bottom: 0;
    }

    body:has(.market-hero) .premium-category-section + .premium-product-section {
        padding-top: 0;
    }

    body:has(.market-hero) .premium-category-section .mb-8 {
        margin-bottom: 18px;
    }

    body:has(.market-hero) .category-carousel-track {
        gap: 12px;
    }
}

/* Shared header and footer responsive density */
.extracted-header .header-top { padding-block: 9px; }
.extracted-header .header-inner,
.extracted-header .header-nav-inner {
    width: calc(100% - (2 * var(--site-gutter)));
    max-width: var(--site-container);
}
.extracted-header .header-inner { gap: clamp(16px, 2vw, 28px); }
.extracted-header .header-logo { width: 142px; flex-basis: 142px; }
.extracted-header .header-search { max-width: none; flex: 1 1 0; }
.extracted-header .header-search input {
    height: 42px;
    padding-block: 8px;
    font-size: 14px;
}
.extracted-header .header-search button {
    min-width: 104px;
    padding-inline: 21px;
}
.extracted-header .header-utilities { gap: clamp(12px, 1.5vw, 20px); }
.extracted-header .header-cart-icon > .material-symbols-outlined { font-size: 29px; }
.extracted-header .header-nav-inner { height: 38px; }
.extracted-header .header-page-links { gap: clamp(18px, 2vw, 26px); }
.extracted-header .header-nav a,
.extracted-header .header-nav-link { min-height: 38px; font-size: 13px; }

.site-footer__main,
.site-footer__bottom-inner {
    width: calc(100% - (2 * var(--site-gutter)));
}
.site-footer__main {
    grid-template-columns: minmax(200px, 1.35fr) minmax(120px, .72fr) minmax(140px, .82fr) minmax(190px, 1fr) !important;
    gap: clamp(16px, 2.5vw, 36px);
    padding-block: 34px 30px;
}
.site-footer__logo { width: 150px; margin-bottom: 11px; }
.site-footer__wordmark { font-size: clamp(27px, 2.2vw, 34px); margin-bottom: 11px; }
.site-footer__description { max-width: 350px; margin-bottom: 14px; font-size: 13px; }
.site-footer__heading { margin-bottom: 12px; font-size: 12px; }
.site-footer__links,
.site-footer__contact-list { gap: 7px; }
.site-footer__links a,
.site-footer__contact-list li { font-size: 13px; }
.site-footer__whatsapp { min-height: 38px; margin-top: 13px; padding: 8px 13px; font-size: 12.5px; }
.site-footer__bottom-inner { min-height: 52px; padding-block: 10px; }

@media (max-width: 1199px) and (min-width: 768px) {
    .extracted-header .header-logo { width: 126px; flex-basis: 126px; }
    .extracted-header .header-search button { min-width: 90px; padding-inline: 16px; }
    .extracted-header .header-orders { display: none; }
    .site-footer__main {
        grid-template-columns: minmax(180px, 1.3fr) minmax(110px, 0.75fr) minmax(125px, 0.85fr) minmax(170px, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 899px) and (min-width: 768px) {
    .extracted-header .header-cart > strong { display: none; }
    .site-footer__main {
        grid-template-columns: minmax(160px, 1.3fr) minmax(95px, 0.75fr) minmax(110px, 0.85fr) minmax(150px, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 767px) {
    .extracted-header .header-top { padding-block: 7px; }
    .extracted-header .header-inner {
        width: calc(100% - 24px);
        min-height: 40px;
        gap: 12px;
    }
    .extracted-header .header-logo { width: 110px; flex-basis: 110px; }
    .extracted-header .header-utilities { gap: 10px; }
    .extracted-header .header-cart-icon > .material-symbols-outlined { font-size: 27px; }
    .extracted-header .header-cart-count { width: 18px; height: 18px; top: -5px; right: -6px; }
    .extracted-header .header-nav-inner {
        width: max-content;
        min-width: calc(100% - 24px);
        height: 38px;
        margin-inline: 12px;
    }
    .extracted-header .header-page-links { gap: clamp(18px, 6vw, 26px); }
    .extracted-header .header-nav a,
    .extracted-header .header-nav-link { min-height: 38px; font-size: 12.5px; }
    .site-footer__main,
    .site-footer__bottom-inner { width: calc(100% - 32px); }
    .site-footer__main {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px 16px !important;
        padding-block: 28px 24px !important;
    }

    .site-footer__brand {
        grid-column: 1 / -1 !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-bottom: 4px !important;
    }

    .site-footer__brand .site-footer__description {
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin-bottom: 12px !important;
    }

    .site-footer__socials {
        gap: 8px !important;
    }

    .site-footer__social-link {
        width: 36px !important;
        height: 36px !important;
    }

    .site-footer__column:last-child {
        grid-column: 1 / -1 !important;
        padding-top: 16px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-top: 4px !important;
    }

    .site-footer__heading {
        font-size: 13px !important;
        margin-bottom: 10px !important;
        letter-spacing: 0.06em !important;
    }

    .site-footer__links,
    .site-footer__contact-list {
        gap: 6px !important;
    }

    .site-footer__links a,
    .site-footer__contact-list a,
    .site-footer__contact-list li {
        min-height: auto !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .site-footer__whatsapp {
        width: 100% !important;
        min-height: 40px !important;
        margin-top: 14px !important;
        justify-content: center !important;
        font-size: 13px !important;
    }

    .site-footer__bottom-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding-block: 16px !important;
    }

    .site-footer__copyright {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .site-footer__copyright .site-footer__separator {
        display: none !important;
    }

    .site-footer__credit {
        white-space: normal !important;
    }

    .site-footer__legal {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px 14px !important;
        margin-top: 2px !important;
    }

    .site-footer__legal a {
        font-size: 12px !important;
    }
}




@media (max-width: 420px) {
    .extracted-header .header-logo { width: 102px; flex-basis: 102px; }
    .customer-login { min-height: 40px; padding-inline: 9px; font-size: 12px; }
    .customer-login .material-symbols-outlined { font-size: 18px; }
    .site-footer__copyright,
    .site-footer__legal a { font-size: 11.5px; }
}

/* Cross-site UI stability: consistent wrapping, spacing and responsive flow. */
:where(main,section,article,aside,header,footer,nav,form,fieldset,div){min-width:0}
:where(p,li,dd,figcaption,address,.site-footer__contact-list,.product-description){overflow-wrap:anywhere}
:where(h1,h2,h3,h4,h5,h6){overflow-wrap:normal;word-break:normal;text-wrap:balance}
:where(button,[role="button"],.button,.btn,.primary-action,.secondary-action){max-width:100%;align-items:center;justify-content:center;white-space:nowrap}
:where(button,[role="button"],.button,.btn)>:where(span,strong){white-space:nowrap}
:where(input,select,textarea,img,video,svg,canvas){max-width:100%}
.site-footer__contact-list :where(a,span),.site-footer__legal,.site-footer__copyright{overflow-wrap:anywhere}
@media(max-width:1023px){:where(.home-section,.page-section,.content-section){padding-block:clamp(30px,5vw,44px)}}
@media(max-width:767px){:where(.home-section,.page-section,.content-section){padding-block:28px}:where(.section-heading,.heading-row,.page-heading){gap:12px;margin-bottom:18px}:where(.card-grid,.product-grid,.content-grid){gap:14px}.site-footer__main{row-gap:22px}}
@media(max-width:420px){:where(input[type="submit"],.primary-action,.auth-submit,.checkout-submit){min-height:42px}:where(.home-section,.page-section,.content-section){padding-block:24px}}

/* Commerce UX polish: clearer interactive states and consistent content density. */
:where(a,button,input,select,textarea):focus-visible{outline:3px solid rgba(10,122,50,.28);outline-offset:3px}
:where(.product-card,.category-card,.saved-card,.enquiry-card,.order-card){transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
@media(hover:hover){:where(.product-card,.category-card,.saved-card,.enquiry-card,.order-card):hover{transform:translateY(-2px);border-color:#bad5c2;box-shadow:0 10px 24px rgba(8,47,91,.09)}}
:where(.empty-state,[data-empty-state]){max-width:560px;margin-inline:auto;padding:clamp(30px,5vw,52px) 20px;text-align:center}
:where(.empty-state,[data-empty-state]) :where(h2,h3){margin-bottom:8px}
:where(.empty-state,[data-empty-state]) p{margin:0 auto 18px;color:#667085;line-height:1.55}

/* =====================================================
   RESPONSIVE IMPROVEMENTS — Full mobile device audit
   Breakpoints: 479px (small phones), 360px (compact)
   ===================================================== */

/* --- Global small-screen safety --- */
@media (max-width: 479px) {
    :root {
        --site-gutter: 14px;
        --site-section-space: 22px;
        --fs-display: clamp(26px, 7.5vw, 30px);
        --fs-headline-lg: 20px;
        --fs-headline-md: 17px;
        --fs-body-lg: 14px;
    }

    html { scroll-padding-top: 104px; }

    /* Prevent any element from causing horizontal overflow */
    body { overflow-x: hidden; }
    img, video, svg, canvas, iframe { max-width: 100% !important; }

    /* Hero section — very small phones */
    .home-hero { padding-top: 18px; padding-bottom: 18px; }
    .home-hero-inner { gap: 18px; }
    .home-hero-copy .text-display-lg {
        font-size: clamp(24px, 7vw, 28px);
        line-height: 1.12;
        letter-spacing: -0.02em;
    }
    .home-hero-copy .text-body-lg { font-size: 13.5px; line-height: 1.55; }
    .home-hero-copy .flex-wrap > a { width: 100%; min-height: 44px; }
    .home-hero-visual { max-width: 100%; }

    /* Bento cards — prevent overflow and ensure tap area */
    .bento-card { overflow: hidden; }
    .bento-card:hover { transform: none; } /* disable hover lift on touch */

    /* Section headings */
    .home-section .text-headline-lg { font-size: 19px; line-height: 1.25; }

    /* Trust marquee — reduce size on tiny screens */
    .trust-marquee-item { font-size: 13px; gap: 9px; }
    .trust-marquee-item > .material-symbols-outlined {
        flex-basis: 36px; width: 36px; height: 36px; font-size: 18px;
    }

    /* Category carousel 2x2 on small phones */
    .category-carousel-track,
    body:has(.market-hero) .category-carousel-track {
        gap: 10px !important;
    }

    /* Product 2x2 grid cards on small phones */
    .product-scroll-container > .premium-product-card {
        padding: 10px 8px !important;
        border-radius: 8px !important;
    }
    .product-scroll-container > .premium-product-card .product-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    .product-scroll-container > .premium-product-card .text-headline-md {
        font-size: 14px !important;
        font-weight: 750 !important;
        margin: 4px 0 !important;
    }
    .product-scroll-container > .premium-product-card .premium-cart-btn {
        min-height: 38px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* Shop filters — full width stacked */
    .shop-filter-toggle { width: 100%; justify-content: center; }

    /* Cart drawer — edge-to-edge on smallest phones */
    .cart-drawer { width: 100% !important; margin-left: 0 !important; }
    .cart-drawer__header { padding-inline: 14px; }
    .cart-drawer__items { padding: 12px; }
    .cart-item { grid-template-columns: 68px minmax(0,1fr); gap: 10px; padding: 10px; }
    .cart-item__details h3 { font-size: 13px; }
    .cart-item__quantity { grid-template-columns: repeat(3, 38px); width: 114px; height: 38px; }
    .cart-item__quantity button, .cart-item__quantity span { width: 38px; height: 36px; min-height: 36px; }
    .cart-drawer__footer { padding: 16px 14px 18px; }

    /* Toast — full width */
    .toast-container { right: 12px; left: 12px; }
    .store-toast { width: 100%; font-size: 12.5px; }

    /* Footer */
    .site-footer__main { gap: 20px; padding-block: 24px 20px; }
    .site-footer__wordmark { font-size: 28px; }
    .site-footer__description { font-size: 12.5px; }
    .site-footer__socials { gap: 8px; }
    .site-footer__social-link { width: 34px; height: 34px; }
    .site-footer__legal { gap: 6px 14px; }
    .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
    .site-footer__copyright, .site-footer__legal a { font-size: 11px; }
}

/* --- 360px compact phones (Galaxy A series, older iPhones SE) --- */
@media (max-width: 360px) {
    :root {
        --site-gutter: 12px;
        --fs-display: clamp(22px, 6.5vw, 26px);
    }

    .home-hero-copy .text-display-lg { font-size: clamp(21px, 6.2vw, 24px); }
    .home-hero-copy .flex-wrap { gap: 8px; }

    /* Header */
    .extracted-header .header-logo { width: 92px; flex-basis: 92px; }
    .extracted-header .header-inner { gap: 10px; width: calc(100% - 20px); }
    .extracted-header .header-search input { height: 38px; font-size: 12.5px; }
    .extracted-header .header-search button { min-width: 68px; padding-inline: 10px; font-size: 12px; }
    .customer-login { min-height: 38px; padding-inline: 7px; font-size: 11.5px; }

    /* Category carousel on 360px */
    .category-carousel-track,
    body:has(.market-hero) .category-carousel-track {
        gap: 8px !important;
    }
    .category-carousel .category-card,
    body:has(.market-hero) .category-carousel .category-card {
        padding: 8px 6px !important;
    }
    .category-title { font-size: 12.5px !important; }

    /* Product cards on compact phones */
    .product-scroll-container {
        gap: 8px !important;
    }
    .product-scroll-container > .premium-product-card {
        padding: 8px 6px !important;
    }

    /* Footer */
    .site-footer__whatsapp { padding: 7px 11px; font-size: 12px; }
    .site-footer__links a, .site-footer__contact-list li { font-size: 12px; }
}

/* --- Header search — wrap cleanly below 640px --- */
@media (max-width: 640px) {
    .extracted-header .header-inner { flex-wrap: wrap; row-gap: 8px; }
    .extracted-header .header-search { order: 3; flex: 1 1 100%; max-width: 100%; }
    .extracted-header .header-search-control { width: 100%; }
    .extracted-header .header-search input { width: 100%; }
}

/* --- Tablet portrait fixes (481px – 767px) --- */
@media (min-width: 481px) and (max-width: 767px) {
    .home-hero-copy .flex-wrap > a { min-width: 140px; }

    .site-footer__main {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 22px 32px;
    }
}

/* --- Market hero: tighten panels on narrow screens --- */
@media (max-width: 479px) {
    .market-hero {
        width: calc(100% - 20px);
        gap: 10px;
        margin-block: 10px 18px;
    }
    .market-hero__slider { min-height: 410px; }
    .market-slide__content { width: min(100%, calc(100% - 16px)); padding: 22px 14px 44px; }
    .market-slide h2 { font-size: clamp(20px, 5.8vw, 25px); }
    .market-slide__description { font-size: 12px; }
    .market-slide__actions { gap: 8px; }
    .market-slide__actions a { width: min(100%, 210px); min-height: 38px; padding: 8px 14px; font-size: 12px; }
    .market-hero__quote { padding: 22px 18px; }
    .market-hero__quote h2 { font-size: 24px; }
    .market-hero__quote > p:not(.market-quote__label) { font-size: 13px; }
    .market-hero__quote li { font-size: 12px; }
    .market-quote__primary, .market-quote__secondary { min-height: 44px; font-size: 13.5px; }
}

/* --- Shop page grid on small phones --- */
@media (max-width: 479px) {
    .shop-layout { padding-top: 24px; padding-bottom: 36px; gap: 24px; }
}

/* --- Ensure tap targets meet 44px minimum across all pages (excluding footer text links and carousel dots) --- */
@media (max-width: 767px) {
    :where(a[href]:not(.site-footer a), button:not([data-market-dot]):not(.market-slider__dots button), [role="button"], input[type="submit"], input[type="button"]) {
        min-height: 44px;
    }
    :where(input[type="checkbox"], input[type="radio"]) {
        min-height: auto;
        width: 18px;
        height: 18px;
    }
}

/* --- Landscape mobile safety --- */
@media (max-height: 500px) and (orientation: landscape) {
    .extracted-header .header-top { padding-block: 5px; }
    .extracted-header .header-inner { min-height: 40px; }
    .extracted-header .header-nav-inner { height: 34px; }
    .home-hero { padding-top: 16px; padding-bottom: 16px; }
    .site-footer__main { padding-block: 20px; }
}