/* ======================================================================
   Neelu Organics - Responsive V2 hardening
   Scope: public homepage, shared customer storefront and legacy store pages
   Loaded LAST so it only corrects responsive behaviour; desktop design and
   application logic remain unchanged.
   ====================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    max-width: 100%;
}

img,
picture,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

img,
picture,
video,
canvas {
    height: auto;
}

input,
select,
textarea,
button {
    min-width: 0;
    max-width: 100%;
}

pre,
code,
.nsc-table td,
.nsc-table th,
.neelu-info-card,
.neelu-location-card,
.foot-col,
.support,
.product-card,
.popover-product {
    overflow-wrap: anywhere;
    word-break: normal;
}

.container,
.nsc-container,
.neelu-info-page,
.page-wrap,
.store-container,
.oil-wrap {
    max-width: 100%;
}

/* Responsive horizontal tables: never force the page viewport wider. */
.nsc-table-wrap,
.table-responsive,
.responsive-table,
.cart-table-wrap,
.enquiry-table-wrap,
.table-scroll,
.table-wrapper {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.nsc-table,
.table-responsive > table,
.responsive-table > table,
.cart-table-wrap > table,
.enquiry-table-wrap > table {
    width: 100%;
}

/* ================================================================
   Current storefront / landing-page chrome
   ================================================================ */

.head-main .container,
.navbar .container,
.topbar .container,
.announcement .container {
    min-width: 0;
}

.head-main .search,
.head-main .search input,
.account-area,
.nav-left,
.nav-right {
    min-width: 0;
}

.account-area .icon-item,
.customer-profile-trigger {
    -webkit-tap-highlight-color: transparent;
}

.customer-profile-dropdown {
    max-width: calc(100vw - 20px);
}

.section-heading,
.heading-left,
.footer-bottom,
.copyright,
.bottom-links,
.newsletter,
.subscribe,
.subscribe-row,
.hero-actions,
.service,
.support-row {
    min-width: 0;
}

.content-slider,
.content-slider-track {
    max-width: 100%;
}

/* ================================================================
   Shared customer pages (login, account, product, cart, checkout,
   wishlist, tracking, blog, contact and policy pages)
   ================================================================ */

.nsc-main,
.nsc-card,
.nsc-panel,
.nsc-account-grid > *,
.nsc-product-layout > *,
.nsc-form-grid > * {
    min-width: 0;
}

.nsc-actions,
.nsc-location-row,
.nsc-account-menu {
    max-width: 100%;
}

.nsc-input,
.nsc-select,
.nsc-textarea,
.form-control,
.form-select {
    max-width: 100%;
}

.nsc-main-image img,
.nsc-product-card img {
    max-width: 100%;
}

/* ================================================================
   Legacy store header/pages - selectors are anchored to header.topbar
   so they cannot conflict with the current div.topbar storefront row.
   ================================================================ */

header.topbar {
    max-width: 100vw;
}

header.topbar .logo-wrap,
header.topbar .main-nav,
header.topbar .nav-actions {
    min-width: 0;
}

/* ------------------------- 1180 / laptop ------------------------- */
@media (max-width: 1180px) {
    .container {
        width: min(var(--max, 1372px), calc(100% - 40px)) !important;
    }

    .head-main .container {
        gap: 14px !important;
    }

    .head-main .logo {
        min-width: 135px !important;
    }

    .head-main .brand-logo-img {
        width: 130px !important;
    }

    .head-main .deliver {
        min-width: 88px !important;
    }

    .account-area {
        gap: 8px !important;
    }

    .account-area .icon-item {
        min-width: 44px !important;
    }

    .nav-left {
        gap: 14px !important;
    }

    .footer-main {
        gap: 22px !important;
    }

    .nsc-container {
        width: min(1180px, calc(100% - 40px)) !important;
    }

    header.topbar {
        gap: 14px !important;
        padding-inline: 22px !important;
    }

    header.topbar .main-nav {
        gap: 22px !important;
    }

    header.topbar .nav-actions {
        gap: 8px !important;
    }
}

/* ------------------------- 980 / tablet landscape ------------------------- */
@media (max-width: 980px) {
    .section-heading {
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .section-heading > * {
        min-width: 0;
    }

    .promo-three.content-slider-track > .promo-card,
    .promo-two.content-slider-track > .wide-promo {
        min-width: 0 !important;
    }

    .nsc-product-layout,
    .nsc-account-grid,
    .nsc-policy-grid {
        grid-template-columns: 1fr !important;
    }

    .nsc-main-image {
        height: min(55vw, 500px) !important;
        min-height: 320px;
    }

    .nsc-account-menu {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        padding: 10px !important;
        scrollbar-width: thin;
    }

    .nsc-account-menu a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .neelu-info-layout {
        grid-template-columns: 1fr !important;
    }

    .neelu-info-side {
        position: static !important;
    }

    header.topbar {
        min-height: 74px !important;
        padding: 10px 16px !important;
    }

    header.topbar .logo-wrap {
        min-width: 0 !important;
    }

    header.topbar .logo-wrap img {
        width: 132px !important;
        max-height: 56px !important;
    }

    header.topbar .mobile-nav-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
    }

    header.topbar .main-nav {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 100001 !important;
        width: min(330px, 88vw) !important;
        height: 100dvh !important;
        padding: 84px 18px 26px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        overflow-y: auto !important;
        background: #fffdf8 !important;
        transform: translateX(-105%);
        transition: transform .25s ease;
        box-shadow: 20px 0 50px rgba(7, 95, 23, .18) !important;
    }

    header.topbar .main-nav.open {
        transform: translateX(0) !important;
    }

    header.topbar .main-nav a {
        width: 100% !important;
        padding: 13px 12px !important;
        border-radius: 9px !important;
        font-size: 15px !important;
    }

    header.topbar .nav-actions {
        margin-left: auto;
    }
}

/* ------------------------- 820 / tablet portrait ------------------------- */
@media (max-width: 820px) {
    :root {
        --responsive-mobile-edge: 14px;
    }

    html,
    body {
        overflow-x: clip;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    pre,
    code,
    .nsc-table td,
    .nsc-table th,
    .neelu-info-card,
    .neelu-location-card,
    .foot-col,
    .support,
    .product-card,
    .popover-product {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .nsc-google-button,
    .nsc-google-button > div,
    .nsc-google-button iframe {
        max-width: 100% !important;
    }

    .container,
    .nsc-container {
        width: calc(100% - 28px) !important;
    }

    /* Keep announcement readable; old CSS clipped it to one tiny line. */
    .announcement {
        height: auto !important;
        min-height: 26px !important;
        padding: 5px 0 !important;
        line-height: 1.3 !important;
    }

    .announcement .container {
        width: 100% !important;
        padding: 0 12px !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .head-main .container {
        width: 100% !important;
        padding-inline: 10px !important;
        gap: 5px !important;
    }

    /* Existing mobile CSS hid the logged-in profile trigger. Keep it available. */
    .account-area > .icon-item:first-child,
    .account-area > .customer-profile-trigger:first-child,
    .customer-profile-trigger {
        display: grid !important;
    }

    .account-area {
        flex: 0 0 auto !important;
        gap: 1px !important;
    }

    .account-area .icon-item,
    .customer-profile-trigger {
        width: 36px !important;
        min-width: 36px !important;
        height: 38px !important;
        padding: 7px 5px !important;
    }

    .customer-profile-dropdown {
        left: auto !important;
        right: 0 !important;
        top: calc(100% + 8px) !important;
        width: min(190px, calc(100vw - 20px)) !important;
    }

    .customer-profile-dropdown::before {
        left: auto !important;
        right: 20px !important;
    }

    .head-main .search.is-mobile-open {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }

    .navbar .container {
        width: 100% !important;
    }

    .nav-left.is-open {
        max-height: calc(100dvh - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .hero-copy,
    .hero-visual,
    .promo-card,
    .wide-promo,
    .vendor-panel,
    .featured-ad,
    .newsletter {
        min-width: 0 !important;
    }

    .hero-copy {
        padding: 30px 22px 16px !important;
    }

    .hero h1 {
        font-size: clamp(30px, 7vw, 38px) !important;
        overflow-wrap: anywhere;
    }

    .hero-ph {
        min-height: 230px !important;
    }

    .category-grid.content-slider-track > .category {
        flex-basis: 33.333333% !important;
    }

    .products-grid.content-slider-track > .product-card {
        flex-basis: 33.333333% !important;
    }

    .products-grid .product-card {
        min-height: 360px !important;
    }

    .product-media .product-ph {
        height: 165px !important;
    }

    .promo-three.content-slider-track > .promo-card,
    .promo-two.content-slider-track > .wide-promo {
        flex-basis: 72% !important;
    }

    .arrivals-grid.content-slider-track > .vendor-panel,
    .arrivals-grid.content-slider-track > .product-card,
    .featured-grid.content-slider-track > .featured-ad,
    .featured-grid.content-slider-track > .product-card {
        flex-basis: 62% !important;
    }

    .service-grid.content-slider-track > .service {
        flex-basis: 48% !important;
    }

    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px 18px !important;
    }

    .foot-col:first-child,
    .foot-col:last-child {
        grid-column: 1 / -1 !important;
    }

    .newsletter,
    .subscribe-row {
        width: 100% !important;
    }

    .footer-bottom {
        gap: 12px !important;
    }

    .bottom-links {
        flex-wrap: wrap !important;
        gap: 8px 14px !important;
    }

    /* Customer application pages */
    .nsc-main {
        padding: 20px 0 42px !important;
    }

    .nsc-auth-wrap {
        width: calc(100% - 28px) !important;
        margin: 28px auto !important;
    }

    .nsc-auth-card,
    .nsc-panel,
    .nsc-location,
    .nsc-policy {
        padding: 20px !important;
    }

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

    .nsc-actions {
        gap: 9px !important;
    }

    .nsc-table-wrap {
        margin-inline: 0;
        border-radius: 8px;
    }

    .nsc-table {
        min-width: 680px !important;
    }

    /* Information pages */
    .neelu-info-page {
        width: calc(100% - 28px) !important;
        padding: 24px 0 44px !important;
    }

    .neelu-info-hero {
        padding: 24px !important;
    }

    .neelu-location-grid {
        grid-template-columns: 1fr !important;
    }

    /* Legacy store pages */
    .page-wrap,
    .store-container,
    .oil-wrap {
        width: 100% !important;
        padding-inline: 14px !important;
    }

    header.topbar .nav-actions .mini-link,
    header.topbar .nav-actions .nav-signup,
    header.topbar .nav-actions .cart-pill {
        min-height: 40px !important;
        padding-inline: 11px !important;
    }

    .product-detail-grid,
    .product-view-grid,
    .checkout-grid,
    .cart-layout,
    .enquiry-layout,
    .auth-grid,
    .form-grid,
    .address-grid,
    .register-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ------------------------- 620 / phone ------------------------- */
@media (max-width: 620px) {
    .container,
    .nsc-container {
        width: calc(100% - 22px) !important;
    }

    .head-main .container {
        width: 100% !important;
        padding-inline: 7px !important;
        gap: 2px !important;
    }

    .brand-logo-img {
        width: 78px !important;
        max-height: 38px !important;
    }

    .mobile-nav-toggle.mobile-header-menu,
    .mobile-search-toggle {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        padding: 6px !important;
    }

    .account-area .icon-item,
    .customer-profile-trigger {
        width: 34px !important;
        min-width: 34px !important;
        height: 36px !important;
        padding: 6px 4px !important;
    }

    .account-area .ico svg {
        width: 20px !important;
        height: 20px !important;
    }

    .account-area .badge {
        right: -2px !important;
        top: -4px !important;
    }

    .head-main .search {
        top: 62px !important;
        left: 7px !important;
        right: 7px !important;
    }

    .section {
        padding-top: 14px !important;
    }

    .section-heading {
        align-items: flex-start !important;
    }

    .heading-left {
        display: block !important;
    }

    .section-heading p {
        margin: 4px 0 0 !important;
        line-height: 1.45;
    }

    .hero-copy {
        padding: 24px 16px 14px !important;
    }

    .hero h1 {
        font-size: clamp(28px, 9vw, 34px) !important;
        line-height: 1.08 !important;
    }

    .hero p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .hero-visual {
        padding: 0 12px 28px !important;
    }

    .hero-ph {
        min-height: 200px !important;
    }

    /* Show two product cards per mobile viewport in horizontal product sliders. */
    .products-grid.content-slider-track > .product-card {
        flex-basis: 50% !important;
    }

    .products-grid .product-card {
        min-height: 322px !important;
        padding: 11px 8px 10px !important;
    }

    .product-media .product-ph {
        height: 142px !important;
    }

    .product-media .heart {
        width: 30px !important;
        height: 30px !important;
        right: 4px !important;
        top: 4px !important;
    }

    .product-media .cart-control {
        min-width: 34px !important;
        height: 34px !important;
        padding-inline: 7px !important;
    }

    .product-media .cart-control.is-active {
        min-width: 92px !important;
        gap: 5px !important;
    }

    .product-card h3 {
        font-size: 12px !important;
        min-height: 31px !important;
        margin: 7px 0 8px !important;
    }

    .product-card .price {
        gap: 4px !important;
        margin-bottom: 8px !important;
    }

    .product-card .price strong {
        font-size: 16px !important;
    }

    .stock-note,
    .available {
        font-size: 9px !important;
    }

    .category-grid.content-slider-track > .category {
        flex-basis: 45% !important;
    }

    .promo-three.content-slider-track > .promo-card,
    .promo-two.content-slider-track > .wide-promo,
    .arrivals-grid.content-slider-track > .vendor-panel,
    .arrivals-grid.content-slider-track > .product-card,
    .featured-grid.content-slider-track > .featured-ad,
    .featured-grid.content-slider-track > .product-card,
    .service-grid.content-slider-track > .service {
        flex-basis: 86% !important;
    }

    .content-nav {
        width: 34px !important;
        height: 34px !important;
    }

    .content-nav-prev {
        left: 4px !important;
    }

    .content-nav-next {
        right: 4px !important;
    }

    .safety-banner {
        padding: 16px !important;
        min-height: 0 !important;
    }

    .newsletter {
        padding: 20px 16px !important;
        gap: 16px !important;
    }

    .subscribe-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
    }

    .footer-main {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .foot-col:first-child,
    .foot-col:last-child {
        grid-column: auto !important;
    }

    .footer-bottom,
    .copyright {
        align-items: flex-start !important;
        width: 100% !important;
    }

    .floating-cart {
        right: 10px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        width: 50px !important;
        height: 50px !important;
    }

    .backtop {
        right: 11px !important;
        bottom: calc(70px + env(safe-area-inset-bottom)) !important;
        width: 42px !important;
        height: 42px !important;
    }

    /* Customer pages */
    .nsc-auth-card,
    .nsc-panel,
    .nsc-location,
    .nsc-policy,
    .nsc-card {
        max-width: 100% !important;
    }

    .nsc-auth-card {
        padding: 18px !important;
    }

    .nsc-product-title {
        font-size: clamp(24px, 7vw, 30px) !important;
    }

    .nsc-price {
        font-size: 25px !important;
    }

    .nsc-gallery {
        grid-template-columns: 1fr !important;
    }

    .nsc-thumbs {
        order: 2;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 3px;
    }

    .nsc-thumb {
        flex: 0 0 68px !important;
        width: 68px !important;
        height: 68px !important;
    }

    .nsc-main-image {
        height: min(92vw, 390px) !important;
        min-height: 260px !important;
    }

    .nsc-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .nsc-product-card {
        min-width: 0 !important;
        padding: 10px !important;
    }

    .nsc-product-card img {
        height: 140px !important;
    }

    .nsc-product-card h3 {
        min-height: 34px !important;
        font-size: 12px !important;
        overflow-wrap: anywhere;
    }

    .nsc-form-grid,
    .nsc-policy-grid {
        grid-template-columns: 1fr !important;
    }

    .nsc-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .nsc-actions .nsc-btn {
        width: 100% !important;
    }

    .nsc-location-row {
        flex-direction: column !important;
    }

    .nsc-account-menu {
        margin-bottom: 4px;
    }

    .nsc-table {
        min-width: 620px !important;
    }

    /* Information pages */
    .neelu-info-page {
        width: calc(100% - 22px) !important;
        padding-top: 20px !important;
    }

    .neelu-info-hero {
        padding: 20px 16px !important;
    }

    .neelu-info-hero h1 {
        font-size: clamp(28px, 9vw, 38px) !important;
    }

    .neelu-info-card,
    .neelu-info-side-card,
    .neelu-location-card {
        padding: 16px !important;
    }

    .neelu-info-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .neelu-info-btn {
        width: 100% !important;
    }

    /* Legacy pages */
    header.topbar {
        min-height: 66px !important;
        padding: 8px 10px !important;
        gap: 7px !important;
    }

    header.topbar .logo-wrap img {
        width: 96px !important;
        max-height: 44px !important;
    }

    header.topbar .nav-actions {
        gap: 4px !important;
    }

    header.topbar .nav-actions .mini-link,
    header.topbar .nav-actions .nav-signup,
    header.topbar .nav-actions .cart-pill {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    header.topbar .nav-actions .cart-pill span {
        min-width: 18px !important;
        height: 18px !important;
        font-size: 9px !important;
    }

    .page-wrap,
    .store-container,
    .oil-wrap {
        padding-inline: 11px !important;
    }

    .product-grid,
    .store-product-grid,
    .category-grid,
    .feature-grid,
    .home-grid,
    .oil-summary-grid,
    .oil-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .oil-process-grid {
        grid-template-columns: 1fr !important;
    }

    .ref-footer-main {
        grid-template-columns: 1fr !important;
    }
}

/* ------------------------- 390 / narrow phone ------------------------- */
@media (max-width: 390px) {
    .container,
    .nsc-container {
        width: calc(100% - 18px) !important;
    }

    .head-main .container {
        padding-inline: 5px !important;
        gap: 1px !important;
    }

    .brand-logo-img {
        width: 68px !important;
        max-height: 34px !important;
    }

    .mobile-nav-toggle.mobile-header-menu,
    .mobile-search-toggle {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
    }

    .account-area .icon-item,
    .customer-profile-trigger {
        width: 31px !important;
        min-width: 31px !important;
        height: 34px !important;
        padding: 5px 3px !important;
    }

    .account-area .ico svg {
        width: 19px !important;
        height: 19px !important;
    }

    .head-main .search {
        left: 5px !important;
        right: 5px !important;
    }

    .products-grid .product-card {
        min-height: 306px !important;
        padding-inline: 7px !important;
    }

    .product-media .product-ph {
        height: 126px !important;
    }

    .product-media .tag {
        max-width: calc(100% - 38px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 8px !important;
        padding: 5px 6px !important;
    }

    .nsc-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .nsc-product-card {
        padding: 8px !important;
    }

    .nsc-product-card img {
        height: 118px !important;
    }

    .subscribe-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .subscribe-row button {
        width: 100% !important;
        min-height: 42px !important;
    }

    header.topbar .logo-wrap img {
        width: 82px !important;
    }

    header.topbar .mobile-nav-toggle {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    header.topbar .nav-actions .mini-link,
    header.topbar .nav-actions .nav-signup,
    header.topbar .nav-actions .cart-pill {
        width: 34px !important;
        min-width: 34px !important;
        height: 36px !important;
        min-height: 36px !important;
    }
}

/* Respect user accessibility preferences. */
@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;
    }
}

/* ======================================================================
   Responsive V2.1 - second-pass QA hardening
   Focus: narrow screens, long content, customer tables/forms and footer.
   ====================================================================== */

/* Content that commonly carries long IDs, emails, URLs or product names. */
.nsc-breadcrumb,
.nsc-alert,
.nsc-panel,
.nsc-card,
.nsc-timeline-item,
.nsc-policy,
.nsc-product-title,
.nsc-related-card,
.neelu-info-card,
.neelu-info-side-card,
.neelu-location-card,
.foot-col,
.support-row,
.footer-bottom {
    min-width: 0;
    overflow-wrap: anywhere;
}

.nsc-tabs,
.nsc-account-menu {
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.nsc-tabs::-webkit-scrollbar,
.nsc-account-menu::-webkit-scrollbar,
.nsc-table-wrap::-webkit-scrollbar,
.content-slider-track::-webkit-scrollbar {
    height: 6px;
}

.nsc-google-auth-block,
.nsc-google-button,
.nsc-google-fallback {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.nsc-google-button > div,
.nsc-google-button iframe {
    max-width: 100% !important;
}

.nsc-table-wrap {
    width: 100%;
    max-width: 100%;
    scrollbar-gutter: stable;
}

.nsc-table th,
.nsc-table td {
    vertical-align: middle;
}

.nsc-table td a,
.nsc-table td strong,
.nsc-table td span {
    max-width: 100%;
}

.nsc-timeline-item small,
.nsc-muted,
.neelu-info-card p,
.neelu-info-side-card p {
    overflow-wrap: anywhere;
}

/* Footer/support text must never force horizontal page overflow. */
.footer-main > *,
.support,
.support-row > *,
.foot-col > * {
    min-width: 0;
}

.foot-col a,
.support-row a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Blog/article media and embedded content stay inside the viewport. */
.neelu-blog-page img,
.neelu-blog-article-body img,
.neelu-blog-article-body iframe,
.neelu-blog-article-body video {
    max-width: 100% !important;
    height: auto;
}

@media (max-width: 820px) {
    .nsc-breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: 3px 5px;
        line-height: 1.5;
    }

    .nsc-tabs {
        width: 100%;
        max-width: 100%;
        padding-bottom: 2px;
    }

    .nsc-tab {
        flex: 0 0 auto;
    }

    .nsc-timeline {
        padding-left: 22px !important;
    }

    .nsc-policy-grid > *,
    .nsc-account-grid > *,
    .nsc-product-layout > * {
        width: 100%;
        min-width: 0;
    }

    .neelu-blog-article-layout,
    .neelu-blog-grid,
    .neelu-blog-hero {
        min-width: 0;
    }

    .support-row {
        align-items: flex-start !important;
    }
}

@media (max-width: 620px) {
    .nsc-main {
        padding-bottom: calc(46px + env(safe-area-inset-bottom)) !important;
    }

    .nsc-card.nsc-panel,
    .nsc-panel {
        padding: 16px !important;
    }

    .nsc-table {
        min-width: 560px !important;
    }

    .nsc-table th,
    .nsc-table td {
        padding: 10px 9px !important;
        font-size: 12px;
    }

    .nsc-table th {
        font-size: 11px;
    }

    .nsc-cart-qty-form {
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .nsc-cart-qty-input {
        width: 72px !important;
        flex: 0 0 72px;
    }

    .nsc-cart-qty-form .nsc-btn {
        min-height: 42px;
        padding-inline: 12px;
    }

    .nsc-related-heading {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .nsc-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .nsc-contact-submit,
    .nsc-auth-card > form .nsc-btn-primary {
        width: 100%;
    }

    .nsc-google-auth-block {
        padding-inline: 0 !important;
    }

    .neelu-info-hero p,
    .neelu-info-card p,
    .neelu-location-card p {
        line-height: 1.6;
    }
}

@media (max-width: 390px) {
    .nsc-card.nsc-panel,
    .nsc-panel,
    .nsc-auth-card,
    .neelu-info-card,
    .neelu-info-side-card,
    .neelu-location-card {
        padding: 14px !important;
    }

    .nsc-table {
        min-width: 520px !important;
    }

    .nsc-related-card {
        min-height: 330px !important;
        padding: 9px !important;
    }

    .nsc-related-media {
        height: 128px !important;
    }

    .nsc-related-card h3 {
        font-size: 12px !important;
    }

    .nsc-related-price {
        font-size: 16px !important;
    }

    .support-row {
        gap: 10px !important;
    }

    .footer-main {
        gap: 18px !important;
    }
}

/* Extra-small phones: preserve usability at 320-359 px. */
@media (max-width: 359px) {
    .container,
    .nsc-container,
    .neelu-info-page {
        width: calc(100% - 14px) !important;
    }

    .head-main .container {
        padding-inline: 3px !important;
    }

    .brand-logo-img {
        width: 62px !important;
    }

    .mobile-nav-toggle.mobile-header-menu,
    .mobile-search-toggle {
        width: 30px !important;
        min-width: 30px !important;
        height: 32px !important;
        padding: 5px !important;
    }

    .account-area .icon-item,
    .customer-profile-trigger {
        width: 29px !important;
        min-width: 29px !important;
        height: 32px !important;
        padding: 4px 2px !important;
    }

    .account-area .ico svg {
        width: 18px !important;
        height: 18px !important;
    }

    .products-grid.content-slider-track > .product-card {
        flex-basis: 54% !important;
    }

    .nsc-products {
        grid-template-columns: 1fr !important;
    }

    .nsc-product-card img {
        height: 180px !important;
    }

    .nsc-related-grid {
        grid-template-columns: 1fr !important;
    }

    .nsc-related-media {
        height: 180px !important;
    }

    .nsc-actions,
    .neelu-info-actions,
    .hero-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Landscape phones: prevent fixed chrome from consuming most of the screen. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 950px) {
    .nav-left.is-open,
    header.topbar .main-nav.open {
        max-height: 100dvh !important;
        overflow-y: auto !important;
    }

    .customer-profile-dropdown {
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
    }

    .floating-cart {
        bottom: 8px !important;
    }

    .backtop {
        bottom: 64px !important;
    }
}

/* ========================================================================
   V2.1.2 - Homepage safety banner mobile overlap fix
   IMPORTANT: index.php loads /store/assets/css/responsive-v2.css.
   Keep desktop/tablet untouched; only stack safety content on small screens.
   ======================================================================== */
@media (max-width: 620px) {
    .safety-slider-track > .safety-banner {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .safety-slider-track > .safety-banner > div:first-child {
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        padding: 16px 16px 12px !important;
    }

    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"] {
        position: static !important;
        inset: auto !important;
        right: auto !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: clamp(88px, 26vw, 112px) !important;
        min-height: 88px !important;
        flex: 0 0 auto !important;
        z-index: 1 !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        pointer-events: none !important;
    }

    .safety-slider-track > .safety-banner h3,
    .safety-slider-track > .safety-banner p {
        position: relative !important;
        z-index: 4 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .safety-slider-track > .safety-banner::before,
    .safety-slider-track > .safety-banner::after {
        pointer-events: none !important;
    }
}

@media (max-width: 390px) {
    .safety-slider-track > .safety-banner > div:first-child {
        padding: 14px 14px 10px !important;
    }

    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"] {
        height: 88px !important;
        min-height: 88px !important;
    }
}

/* ================================================================
   V2.1.3 - Mobile-only hero artwork
   Uses a dedicated portrait composition on phones while preserving
   the existing desktop/tablet hero and all CMS text/button content.
   ================================================================ */
@media (max-width: 620px) {
    .hero-carousel .hero-slide {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: 650px !important;
        background-image: none !important;
        background-color: #fbf4e6 !important;
    }

    .hero-carousel .hero-copy {
        position: relative !important;
        z-index: 2 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        padding: 24px 16px 18px !important;
        background: linear-gradient(180deg, rgba(255, 250, 240, .98) 0%, rgba(255, 250, 240, .94) 78%, rgba(255, 250, 240, .72) 100%) !important;
    }

    .hero-carousel .hero-copy h1,
    .hero-carousel .hero-copy p,
    .hero-carousel .hero-copy .hero-actions {
        position: relative !important;
        z-index: 2 !important;
    }

    .hero-carousel .hero-visual {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 365px !important;
        padding: 0 !important;
        margin: 0 !important;
        background-image: url("../images/hero-mobile-sesame.png") !important;
        background-size: cover !important;
        background-position: center 58% !important;
        background-repeat: no-repeat !important;
    }

    /* The mobile artwork replaces the desktop visual/placeholder only. */
    .hero-carousel .hero-visual > * {
        display: none !important;
    }
}

@media (max-width: 390px) {
    .hero-carousel .hero-slide {
        min-height: 615px !important;
    }

    .hero-carousel .hero-copy {
        padding: 20px 14px 14px !important;
    }

    .hero-carousel .hero-visual {
        min-height: 345px !important;
        background-position: center 60% !important;
    }
}

@media (max-width: 359px) {
    .hero-carousel .hero-slide {
        min-height: 590px !important;
    }

    .hero-carousel .hero-visual {
        min-height: 325px !important;
    }
}

/* ================================================================
   V2.1.4 - Mobile-only safety banner artwork
   The portrait artwork already contains the safety copy/icons/product,
   so hide the desktop CMS text/image only on phones and show the full
   dedicated mobile composition. Desktop/tablet remain unchanged.
   ================================================================ */
@media (max-width: 620px) {
    .safety-slider-track > .safety-banner {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 941 / 1672 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 8px !important;
        background-color: #f8f6ee !important;
        background-image: url("../images/safety-mobile-neelu.png") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* The mobile artwork already contains this content visually. */
    .safety-slider-track > .safety-banner > div:first-child,
    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"] {
        display: none !important;
    }

    .safety-slider-track > .safety-banner::before,
    .safety-slider-track > .safety-banner::after {
        display: none !important;
        content: none !important;
    }
}

/* ========================================================================
   V2.1.5 - Mobile hero indicator removal + safety copy visibility
   Scope: phones only. Desktop/tablet and all application logic are untouched.
   ======================================================================== */
@media (max-width: 620px) {
    /* The elongated active carousel dot appears as a green hyphen over the
       mobile hero artwork. The mobile hero is designed as a clean image, so
       hide only its pagination indicators on phones. */
    .hero-carousel > .carousel-dots,
    .hero-carousel .carousel-dots {
        display: none !important;
    }

    /* Keep the dedicated portrait safety artwork, but restore the real CMS
       heading/description as HTML. The opaque copy panel masks the duplicated
       title area baked into the artwork while leaving the logo, benefits and
       product composition visible. */
    .safety-slider-track > .safety-banner {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 941 / 1672 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-image: url("../images/safety-mobile-neelu.png") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .safety-slider-track > .safety-banner > div:first-child {
        display: block !important;
        position: absolute !important;
        z-index: 5 !important;
        top: 17.5% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 12px 18px 14px !important;
        margin: 0 !important;
        background: rgba(255, 253, 247, .97) !important;
        text-align: center !important;
    }

    .safety-slider-track > .safety-banner > div:first-child h3 {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 7px !important;
        color: #075f22 !important;
        font-size: clamp(18px, 5.2vw, 22px) !important;
        line-height: 1.16 !important;
        font-weight: 800 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .safety-slider-track > .safety-banner > div:first-child p {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        color: #64748b !important;
        font-size: clamp(12px, 3.45vw, 14px) !important;
        line-height: 1.4 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    /* Do not render the original desktop CMS artwork on top of the dedicated
       mobile composition. */
    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"] {
        display: none !important;
    }
}

@media (max-width: 390px) {
    .safety-slider-track > .safety-banner > div:first-child {
        top: 17% !important;
        padding: 10px 14px 12px !important;
    }
}

/* ========================================================================
   V2.1.6 - Reliable mobile safety banner copy
   Keep the CMS title/description in normal document flow, then show the
   dedicated mobile artwork below it. This prevents absolute-position/crop
   conflicts on narrow phones while leaving desktop/tablet untouched.
   ======================================================================== */
@media (max-width: 620px) {
    .safety-slider-track > .safety-banner {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 8px !important;
        background: #fff7e7 !important;
    }

    .safety-slider-track > .safety-banner > div:first-child {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        z-index: 3 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 15px 16px 14px !important;
        background: #fff7e7 !important;
        text-align: left !important;
    }

    .safety-slider-track > .safety-banner > div:first-child h3 {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 6px !important;
        color: #075f22 !important;
        font-size: 17px !important;
        line-height: 1.22 !important;
        font-weight: 800 !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .safety-slider-track > .safety-banner > div:first-child p {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        color: #64748b !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"] {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        right: auto !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 1 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 255px !important;
        aspect-ratio: 4 / 3 !important;
        margin: 0 !important;
        background-image: url("../images/safety-mobile-neelu.png") !important;
        background-size: cover !important;
        background-position: center 76% !important;
        background-repeat: no-repeat !important;
        pointer-events: none !important;
    }

    .safety-slider-track > .safety-banner::before,
    .safety-slider-track > .safety-banner::after {
        display: none !important;
        content: none !important;
    }
}

@media (max-width: 390px) {
    .safety-slider-track > .safety-banner > div:first-child {
        padding: 14px 14px 12px !important;
    }

    .safety-slider-track > .safety-banner > div:first-child h3 {
        font-size: 16px !important;
    }

    .safety-slider-track > .safety-banner > div:first-child p {
        font-size: 12px !important;
    }

    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"] {
        min-height: 238px !important;
        background-position: center 78% !important;
    }
}

/* ======================================================================
   Mobile merchandising layout polish
   - Top Categories: 2 cards per row
   - New Products: 2 cards per row
   - Promotions: vertical full-width stack
   Desktop/tablet behaviour remains unchanged.
   ====================================================================== */
@media (max-width: 620px) {
    /* True two-column mobile grids instead of one-card horizontal sliders. */
    .category-grid.content-slider-track,
    .products-grid.content-slider-track {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        scroll-snap-type: none !important;
        overscroll-behavior-x: auto !important;
    }

    .category-grid.content-slider-track > .category,
    .products-grid.content-slider-track > .product-card {
        flex: none !important;
        flex-basis: auto !important;
        width: auto !important;
        min-width: 0 !important;
        scroll-snap-align: none !important;
    }

    /* Keep borders clean in a two-column layout. */
    .category-grid.content-slider-track > .category,
    .products-grid.content-slider-track > .product-card {
        border-right: 1px solid var(--line) !important;
        border-bottom: 1px solid var(--line) !important;
    }

    .category-grid.content-slider-track > .category:nth-child(2n),
    .products-grid.content-slider-track > .product-card:nth-child(2n) {
        border-right: 0 !important;
    }

    .category-grid.content-slider-track > .category:nth-last-child(-n + 2),
    .products-grid.content-slider-track > .product-card:nth-last-child(-n + 2) {
        border-bottom: 0 !important;
    }

    /* Product cards are compact enough for two genuine columns. */
    .products-grid.content-slider-track > .product-card {
        min-height: 322px !important;
        padding: 11px 8px 10px !important;
    }

    .products-grid.content-slider-track .product-media .product-ph {
        height: 142px !important;
    }

    /* Promotions are no longer horizontal sliders on mobile. */
    .promo-three.content-slider-track,
    .promo-two.content-slider-track {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        scroll-snap-type: none !important;
        overscroll-behavior-x: auto !important;
    }

    .promo-three.content-slider-track > .promo-card,
    .promo-two.content-slider-track > .wide-promo {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        scroll-snap-align: none !important;
    }

    /* Navigation arrows are unnecessary when these sections become grids/stacks. */
    .content-slider[data-slider-name="Top Categories"] > .content-nav,
    .content-slider[data-slider-name="New Product Cards"] > .content-nav,
    .content-slider[data-slider-name="Promotions"] > .content-nav,
    .content-slider[data-slider-name="Wide Promotions"] > .content-nav {
        display: none !important;
    }
}

/* Very narrow phones still keep two cards side by side. */
@media (max-width: 390px) {
    .category-grid.content-slider-track,
    .products-grid.content-slider-track {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .products-grid.content-slider-track > .product-card {
        min-height: 310px !important;
        padding-inline: 7px !important;
    }

    .products-grid.content-slider-track .product-media .product-ph {
        height: 132px !important;
    }
}

/* ======================================================================
   Mobile New Arrivals + Featured Products layout
   - Product cards: 2 per row, matching New Products
   - Vendor/featured promotional panel: full width above the products
   - Desktop/tablet slider behaviour remains unchanged
   ====================================================================== */
@media (max-width: 620px) {
    .arrivals-grid.content-slider-track,
    .featured-grid.content-slider-track {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        scroll-snap-type: none !important;
        overscroll-behavior-x: auto !important;
    }

    /* Keep the section's existing promo/vendor card full width. */
    .arrivals-grid.content-slider-track > .vendor-panel,
    .featured-grid.content-slider-track > .featured-ad {
        grid-column: 1 / -1 !important;
        flex: none !important;
        flex-basis: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        scroll-snap-align: none !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--line) !important;
    }

    .arrivals-grid.content-slider-track > .product-card,
    .featured-grid.content-slider-track > .product-card {
        flex: none !important;
        flex-basis: auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 322px !important;
        padding: 11px 8px 10px !important;
        scroll-snap-align: none !important;
        border-right: 1px solid var(--line) !important;
        border-bottom: 1px solid var(--line) !important;
    }

    .arrivals-grid.content-slider-track > .product-card:nth-of-type(2n + 1),
    .featured-grid.content-slider-track > .product-card:nth-of-type(2n + 1) {
        border-right: 0 !important;
    }

    .arrivals-grid.content-slider-track .product-media .product-ph,
    .featured-grid.content-slider-track .product-media .product-ph {
        height: 142px !important;
    }

    .content-slider[data-slider-name="New Arrival Product Cards"] > .content-nav,
    .content-slider[data-slider-name="Featured Product Cards"] > .content-nav {
        display: none !important;
    }
}

@media (max-width: 390px) {
    .arrivals-grid.content-slider-track,
    .featured-grid.content-slider-track {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .arrivals-grid.content-slider-track > .product-card,
    .featured-grid.content-slider-track > .product-card {
        min-height: 310px !important;
        padding-inline: 7px !important;
    }

    .arrivals-grid.content-slider-track .product-media .product-ph,
    .featured-grid.content-slider-track .product-media .product-ph {
        height: 132px !important;
    }
}

/* ========================================================================
   V2.1.9 - Mobile service rows + safety spacing
   - Service Highlights: one full-width item per row on phones
   - Safety Banner: add breathing room between CMS copy and mobile artwork
   Desktop/tablet remain unchanged.
   ======================================================================== */
@media (max-width: 620px) {
    /* Service Highlights (the strip immediately above the footer). */
    .service-strip .content-slider {
        overflow: visible !important;
    }

    .service-strip .service-grid.content-slider-track {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    .service-strip .service-grid.content-slider-track > .service {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px 0 !important;
        border-bottom: 1px solid var(--line, #e5e7eb) !important;
        scroll-snap-align: none !important;
    }

    .service-strip .service-grid.content-slider-track > .service:first-child {
        padding-top: 4px !important;
    }

    .service-strip .service-grid.content-slider-track > .service:last-child {
        padding-bottom: 4px !important;
        border-bottom: 0 !important;
    }

    .service-strip .service {
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .service-strip .service-icon {
        flex: 0 0 52px !important;
        width: 52px !important;
        height: 52px !important;
    }

    .service-strip .service h4,
    .service-strip .service p {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* The service strip is a vertical list on mobile, so slider arrows are unnecessary. */
    .service-strip .content-nav {
        display: none !important;
    }

    /* Small visual separation between the real CMS text and the portrait artwork. */
    .safety-slider-track > .safety-banner > div:first-child {
        padding-bottom: 18px !important;
    }

    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"] {
        margin-top: 8px !important;
    }
}

/* ========================================================================
   V2.1.10 - Mobile safety copy spacing
   Add a visible breathing gap after the CMS safety title/description before
   the dedicated mobile artwork. Desktop/tablet remain unchanged.
   ======================================================================== */
@media (max-width: 620px) {
    .safety-slider-track > .safety-banner {
        row-gap: 14px !important;
    }

    .safety-slider-track > .safety-banner > div:first-child {
        padding-bottom: 20px !important;
    }

    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"] {
        margin-top: 0 !important;
    }
}

@media (max-width: 390px) {
    .safety-slider-track > .safety-banner {
        row-gap: 12px !important;
    }

    .safety-slider-track > .safety-banner > div:first-child {
        padding-bottom: 18px !important;
    }
}

/* ========================================================================
   V2.1.11 - Mobile safety copy inner padding
   Give the CMS safety title/description comfortable space from all edges.
   Desktop/tablet remain unchanged.
   ======================================================================== */
@media (max-width: 620px) {
    .safety-slider-track > .safety-banner > div:first-child {
        box-sizing: border-box !important;
        width: 100% !important;
        padding: 18px 16px 24px !important;
    }
}

@media (max-width: 390px) {
    .safety-slider-track > .safety-banner > div:first-child {
        padding: 16px 14px 22px !important;
    }
}

/* ========================================================================
   V2.1.12 - Mobile safety SECTION bottom padding
   Corrective patch: keep the existing safety text/artwork layout, restore the
   copy panel padding from before V2.1.11, and add spacing after the complete
   safety section before the next homepage section begins.
   Desktop/tablet remain unchanged.
   ======================================================================== */
@media (max-width: 620px) {
    /* Restore the copy panel spacing; do not use it to create section spacing. */
    .safety-slider-track > .safety-banner > div:first-child {
        padding: 15px 16px 20px !important;
    }

    /* The requested spacing belongs AFTER the entire safety banner section. */
    .safety-slider {
        box-sizing: border-box !important;
        padding-bottom: 20px !important;
    }
}

@media (max-width: 390px) {
    .safety-slider-track > .safety-banner > div:first-child {
        padding: 14px 14px 18px !important;
    }

    .safety-slider {
        padding-bottom: 18px !important;
    }
}

/* ========================================================================
   V2.1.13 - Mobile Safety Banner copy/artwork separation
   Final locked-baseline correction: guarantee a visible gap between the CMS
   safety title/description panel and the mobile artwork so they never overlap.
   Desktop/tablet remain unchanged.
   ======================================================================== */
@media (max-width: 620px) {
    .safety-slider-track > .safety-banner {
        row-gap: 0 !important;
    }

    .safety-slider-track > .safety-banner > div:first-child {
        position: relative !important;
        z-index: 3 !important;
        margin: 0 !important;
        padding: 15px 16px 24px !important;
    }

    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"] {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 16px 0 0 !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 390px) {
    .safety-slider-track > .safety-banner > div:first-child {
        padding: 14px 14px 22px !important;
    }

    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"] {
        margin-top: 14px !important;
    }
}

/* ========================================================================
   V2.1.14 - Mobile safety description breathing room
   Add extra space AFTER the CMS description before the mobile artwork.
   Explicit user-approved update to the locked responsive baseline.
   Desktop/tablet remain unchanged.
   ======================================================================== */
@media (max-width: 620px) {
    .safety-slider-track > .safety-banner > div:first-child {
        padding-bottom: 36px !important;
    }
}

@media (max-width: 390px) {
    .safety-slider-track > .safety-banner > div:first-child {
        padding-bottom: 32px !important;
    }
}

/* ========================================================================
   V2.1.15 - My Account mobile navigation column
   Phone-only correction: show Overview / Profile / Orders / Cart / Wishlist /
   Reviews / Activity / Logout as a vertical menu instead of a horizontal row.
   Tablet and desktop behaviour remain unchanged.
   ======================================================================== */
@media (max-width: 620px) {
    .nsc-account-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        margin-bottom: 12px !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        scrollbar-width: none !important;
    }

    .nsc-account-menu::-webkit-scrollbar {
        display: none !important;
    }

    .nsc-account-menu a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

/* ========================================================================
   V2.1.16 - Mobile safety text / artwork card separation
   Explicit user-approved update to the locked responsive baseline.
   Make the CMS safety copy and the portrait artwork two independent blocks
   with a real visible gap between them. Desktop/tablet remain unchanged.
   ======================================================================== */
@media (max-width: 620px) {
    .safety-slider-track > .safety-banner {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        row-gap: 14px !important;
        background: transparent !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    .safety-slider-track > .safety-banner > div:first-child {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 15px 16px 20px !important;
        box-sizing: border-box !important;
        background: #fff7e7 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"] {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
}

@media (max-width: 390px) {
    .safety-slider-track > .safety-banner {
        row-gap: 12px !important;
    }

    .safety-slider-track > .safety-banner > div:first-child {
        padding: 14px 14px 18px !important;
    }
}


/* ========================================================================
   V2.1.17 - Hide Safety Banner on phone view only
   User-approved mobile-only change:
   - Removes the complete safety banner section (copy + artwork) on phones.
   - Tablet / laptop / desktop remain unchanged.
   ======================================================================== */
@media (max-width: 620px) {
    .safety-slider {
        display: none !important;
    }
}

/* ========================================================================
   V2.1.18 - Mobile hero content center alignment
   User-approved mobile-only improvement:
   - Centers hero badge, heading, description, CTA and price copy on phones.
   - Desktop/tablet layout and all storefront logic remain unchanged.
   ======================================================================== */
@media (max-width: 620px) {
    .hero-carousel .hero-copy,
    .hero-slide .hero-copy {
        text-align: center !important;
        align-items: center !important;
    }

    .hero-carousel .hero-copy .eyebrow,
    .hero-slide .hero-copy .eyebrow {
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-carousel .hero-copy h1,
    .hero-carousel .hero-copy p,
    .hero-slide .hero-copy h1,
    .hero-slide .hero-copy p {
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-carousel .hero-actions,
    .hero-slide .hero-actions {
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .hero-carousel .hero-actions .btn-primary,
    .hero-slide .hero-actions .btn-primary {
        align-self: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-carousel .hero-price,
    .hero-slide .hero-price {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ========================================================================
   V2.1.19 - Homepage mobile full-page text centre alignment
   User-approved mobile-only improvement:
   - Centres textual content across homepage sections/cards on phones.
   - Keeps header/navigation controls, imagery, sliders and desktop/tablet UI intact.
   - Does not change storefront/PHP/business logic.
   ======================================================================== */
@media (max-width: 620px) {
    /* Generic homepage section headings */
    body.home-page .section-heading,
    body.home-page .section-heading .heading-left,
    body.home-page .section-heading h2,
    body.home-page .section-heading p,
    .section-heading,
    .section-heading .heading-left,
    .section-heading h2,
    .section-heading p {
        text-align: center !important;
    }

    .section-heading {
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
    }

    .section-heading .heading-left {
        width: 100% !important;
        align-items: center !important;
    }

    .section-heading .view-all,
    .view-all {
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Category cards */
    .category,
    .category h3,
    .category h4,
    .category p,
    .category span {
        text-align: center !important;
    }

    .category {
        align-items: center !important;
    }

    /* Product card textual content */
    .product-card,
    .product-card .product-info,
    .product-card .product-copy,
    .product-card .product-details,
    .product-card h3,
    .product-card h4,
    .product-card p,
    .product-card .product-name,
    .product-card .product-title,
    .product-card .price,
    .product-card .product-price,
    .product-card .rating,
    .product-card .stock-text {
        text-align: center !important;
    }

    .product-card .product-info,
    .product-card .product-copy,
    .product-card .product-details {
        align-items: center !important;
    }

    .product-card .price,
    .product-card .product-price,
    .product-card .rating {
        justify-content: center !important;
    }

    /* Promotion / advertising cards */
    .promo-card .promo-text,
    .promo-card .promo-text h3,
    .promo-card .promo-text p,
    .wide-promo .copy,
    .wide-promo .copy h3,
    .wide-promo .copy p,
    .featured-ad,
    .featured-ad h3,
    .featured-ad p,
    .vendor-banner .vb-text,
    .vendor-banner .vb-text h4,
    .vendor-banner .vb-text .muted {
        text-align: center !important;
    }

    .promo-card .promo-text,
    .wide-promo .copy,
    .featured-ad,
    .vendor-banner .vb-text {
        align-items: center !important;
    }

    .promo-card .small-btn,
    .wide-promo .small-btn,
    .featured-ad .small-btn {
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }

    /* Service benefits */
    .service-strip,
    .service-strip .service-item,
    .service-strip h3,
    .service-strip h4,
    .service-strip p,
    .service-strip span {
        text-align: center !important;
    }

    .service-strip .service-item {
        align-items: center !important;
        justify-content: center !important;
    }

    /* Newsletter */
    .newsletter,
    .newsletter h2,
    .newsletter h3,
    .newsletter p,
    .newsletter .newsletter-copy {
        text-align: center !important;
    }

    .newsletter .newsletter-copy,
    .newsletter form {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Footer content */
    .footer-main,
    .footer-main h3,
    .footer-main h4,
    .footer-main p,
    .footer-main a,
    .footer-bottom,
    .footer-bottom .copyright,
    .footer-bottom .payments,
    .footer-bottom .bottom-links {
        text-align: center !important;
    }

    .footer-main > *,
    .footer-bottom,
    .footer-bottom .copyright,
    .footer-bottom .bottom-links {
        align-items: center !important;
        justify-content: center !important;
    }

    .footer-bottom .bottom-links {
        width: 100% !important;
    }
}


/* ========================================================================
   V2.1.3 - Public homepage mobile text centering
   Scope: mobile view only, public storefront/homepage content.
   Keep desktop unchanged and do not affect admin pages.
   ======================================================================== */
@media (max-width: 820px) {
    .announcement .container,
    .section,
    .section-heading,
    .heading-left,
    .hero-copy,
    .hero-copy > *,
    .hero h1,
    .hero p,
    .hero-tag,
    .category,
    .category *:not(input):not(textarea),
    .product-card,
    .product-card h3,
    .product-card p,
    .product-card .price,
    .promo-card,
    .promo-copy,
    .promo-copy > *,
    .wide-promo,
    .vendor-panel,
    .vendor-copy,
    .vendor-copy > *,
    .featured-ad,
    .featured-copy,
    .featured-copy > *,
    .service,
    .service *:not(input):not(textarea),
    .newsletter,
    .newsletter > *,
    .foot-col,
    .foot-col > *,
    .footer-bottom,
    .copyright,
    .bottom-links,
    .support,
    .support-row,
    .support-row > * {
        text-align: center !important;
    }

    .section-heading,
    .heading-left,
    .footer-bottom,
    .copyright,
    .support-row,
    .hero-actions,
    .bottom-links {
        align-items: center !important;
        justify-content: center !important;
    }

    .heading-left,
    .hero-actions,
    .bottom-links,
    .support-row {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .section-heading {
        align-items: center !important;
    }

    .hero-copy,
    .promo-copy,
    .vendor-copy,
    .featured-copy,
    .newsletter,
    .foot-col,
    .service,
    .category,
    .product-card {
        align-items: center !important;
    }

    .hero-copy .hero-actions,
    .promo-copy .hero-actions,
    .newsletter .subscribe-row,
    .footer-bottom .bottom-links {
        justify-content: center !important;
    }

    .product-card .price,
    .product-card .meta,
    .product-card .actions,
    .service .icon,
    .foot-col .socials,
    .foot-col .support-row {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .subscribe,
    .subscribe-row,
    .newsletter-form {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .section-heading p,
    .hero p,
    .newsletter p,
    .foot-col p,
    .service p,
    .product-card p,
    .promo-copy p,
    .vendor-copy p,
    .featured-copy p,
    .copyright p {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 620px) {
    .section-heading {
        align-items: center !important;
    }

    .heading-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .section-heading p,
    .hero p,
    .newsletter p,
    .foot-col p,
    .service p,
    .promo-copy p,
    .vendor-copy p,
    .featured-copy p {
        max-width: 36ch;
    }

    .hero-actions,
    .bottom-links,
    .support-row,
    .subscribe-row {
        justify-content: center !important;
    }
}

/* ======================================================================
   Mobile footer support/contact alignment fix
   Centers Business Name, Owner, Phone and Order Help rows on phones.
   Desktop/tablet behaviour remains unchanged.
   ====================================================================== */
@media (max-width: 767px) {
    .footer-main .foot-col .support-row {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .footer-main .foot-col .support-row .support-ico {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .footer-main .foot-col .support-row .support {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .footer-main .foot-col .support-row .support strong,
    .footer-main .foot-col .support-row .support a,
    .footer-main .foot-col .support-row .support span {
        width: 100% !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}


/* ========================================================================
   V2.1.21 - Mobile section View All placement
   - Desktop/tablet keeps the existing section-heading View All position.
   - On phones, View All is shown after the corresponding section content.
   - No storefront business/data logic is changed.
   ======================================================================== */
.mobile-section-view-all {
    display: none;
}

@media (max-width: 620px) {
    .section-heading > .view-all {
        display: none !important;
    }

    .mobile-section-view-all {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 16px 0 28px !important;
        text-align: center !important;
    }

    .mobile-section-view-all .view-all {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 auto !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

/* ========================================================================
   V2.1.22 - View All placement safeguard
   Desktop/laptop/tablet: keep View All in the section heading row.
   Mobile: hide heading-row View All and show the duplicate action only
   after the section content. No layout/data/business logic is changed.
   ======================================================================== */
@media (min-width: 621px) {
    .section-heading > .view-all {
        display: inline-flex !important;
    }

    .mobile-section-view-all {
        display: none !important;
    }
}

@media (max-width: 620px) {
    .section-heading > .view-all {
        display: none !important;
    }

    .mobile-section-view-all {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 16px 0 28px !important;
        text-align: center !important;
    }

    .mobile-section-view-all .view-all {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 auto !important;
        white-space: nowrap !important;
    }
}

/* ========================================================================
   V2.1.7 - Safety banner soft white edge effect
   Visual-only enhancement: add the same soft white fade at the left/right
   edges of the safety banner slider. No markup, slider logic or content is
   changed. The overlays do not capture taps/clicks.
   ======================================================================== */
.safety-slider::before,
.safety-slider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34px;
    z-index: 8;
    pointer-events: none;
}

.safety-slider::before {
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,0) 100%);
}

.safety-slider::after {
    right: 0;
    background: linear-gradient(270deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,0) 100%);
}

@media (max-width: 620px) {
    .safety-slider::before,
    .safety-slider::after {
        width: 22px;
    }
}

/* ========================================================================
   V2.1.8 - Safety banner integrated white fade
   Keeps the existing banner markup/content/slider logic unchanged.
   Adds the white treatment INSIDE each safety banner so it is visible behind
   the description/left content area and softly blends into the banner image.
   ======================================================================== */
.safety-slider-track > .safety-banner::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 62% !important;
    height: 100% !important;
    display: block !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.98) 28%,
        rgba(255,255,255,.90) 48%,
        rgba(255,255,255,.55) 70%,
        rgba(255,255,255,0) 100%
    ) !important;
}

.safety-slider-track > .safety-banner > div:first-child {
    position: relative !important;
    z-index: 4 !important;
}

.safety-slider-track > .safety-banner > div[aria-label="Safety banner image"] {
    overflow: hidden !important;
}

.safety-slider-track > .safety-banner > div[aria-label="Safety banner image"]::before,
.safety-slider-track > .safety-banner > div[aria-label="Safety banner image"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

/* White blend where the description/left side meets the image. */
.safety-slider-track > .safety-banner > div[aria-label="Safety banner image"]::before {
    left: 0;
    width: 24%;
    background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.65) 38%, rgba(255,255,255,0) 100%);
}

/* Match the soft white outer edge used by the other homepage banners. */
.safety-slider-track > .safety-banner > div[aria-label="Safety banner image"]::after {
    right: 0;
    width: 9%;
    background: linear-gradient(270deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.42) 45%, rgba(255,255,255,0) 100%);
}

@media (max-width: 620px) {
    /* On phones the copy is stacked above the image: keep its whole area white
       and retain soft white edges on the image below it. */
    .safety-slider-track > .safety-banner::before {
        display: none !important;
    }

    .safety-slider-track > .safety-banner > div:first-child {
        background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.98) 72%, rgba(255,255,255,.90) 100%) !important;
    }

    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"]::before {
        width: 18% !important;
        background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%) !important;
    }

    .safety-slider-track > .safety-banner > div[aria-label="Safety banner image"]::after {
        width: 18% !important;
        background: linear-gradient(270deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%) !important;
    }
}