/* ==========================================================================
   SANCO storefront UI
   Loaded after the theme CSS and the layout's inline styles, so it wins on
   equal specificity. Brand colours come from the logo: deep navy + green.
   ========================================================================== */

:root {
    --ui-navy-950: #010f24;
    --ui-navy-900: #011429;
    --ui-navy-800: #06244a;
    --ui-blue-600: #0a5fb6;
    --ui-blue-500: #1a74d4;
    --ui-blue-50: #eef5ff;
    --ui-green-600: #4e9e11;
    --ui-green-500: #6cbf1f;
    --ui-green-50: #eef8e3;
    --ui-red-600: #c2410c;

    --ui-bg: #f4f7fb;
    --ui-surface: #ffffff;
    --ui-border: #e3e9f1;
    --ui-border-strong: #cfd9e6;
    --ui-text: #0f1f36;
    --ui-text-2: #4a5d78;
    --ui-text-3: #7b8ca5;

    --ui-radius-sm: 10px;
    --ui-radius: 14px;
    --ui-radius-lg: 20px;
    --ui-shadow-sm: 0 1px 2px rgba(15, 31, 54, .06);
    --ui-shadow: 0 4px 14px rgba(15, 31, 54, .07);
    --ui-shadow-lg: 0 14px 34px rgba(15, 31, 54, .12);
    --ui-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body.wholesalepremium {
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.layout-main,
.layout-main.have-sidebar {
    background: var(--ui-bg) !important;
}

.layout-main h1, .layout-main h2, .layout-main h3,
.layout-main h4, .layout-main h5, .layout-main h6 {
    color: var(--ui-text);
    letter-spacing: -.01em;
}

.layout-main a:focus-visible,
.layout-main button:focus-visible,
.layout-main input:focus-visible {
    outline: 2px solid var(--ui-blue-500);
    outline-offset: 2px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
html body .button,
html body button:not(.swal2-styled):not(.select2-selection__clear):not(.submenu-toggle):not(.clear):not(.sanco-cat-toggle),
html body input[type="button"],
html body input[type="submit"],
html body .btn {
    background: var(--ui-blue-600) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: 12px;
    box-shadow: none;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    transition: background .18s var(--ui-ease), transform .18s var(--ui-ease), box-shadow .18s var(--ui-ease);
}

html body .button:hover,
html body button:not(.swal2-styled):not(.select2-selection__clear):not(.submenu-toggle):not(.clear):not(.sanco-cat-toggle):hover,
html body input[type="button"]:hover,
html body input[type="submit"]:hover,
html body .btn:hover,
html body .button:focus,
html body input[type="button"]:focus,
html body .btn:focus {
    background: var(--ui-navy-800) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(10, 95, 182, .22);
    transform: none;
}

.sanco-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    transition: background .18s var(--ui-ease), color .18s var(--ui-ease), border-color .18s var(--ui-ease);
}

.sanco-btn em { font-size: 12px; }

.sanco-btn-accent,
.layout-main a.sanco-btn-accent {
    background: var(--ui-green-500);
    color: var(--ui-navy-950) !important;
}

.sanco-btn-accent:hover,
.layout-main a.sanco-btn-accent:hover {
    background: #7fd431;
    color: var(--ui-navy-950) !important;
}

.sanco-btn-ghost,
.layout-main a.sanco-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff !important;
}

.sanco-btn-ghost:hover,
.layout-main a.sanco-btn-ghost:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff !important;
}

html body .sanco-btn-block {
    display: block;
    width: 100%;
    min-height: 50px;
    font-size: 16px;
}

/* ── Desktop header ───────────────────────────────────────────────────── */
@media (min-width: 801px) {
    .layout-header .desktop-header {
        background: var(--ui-navy-900);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(1, 15, 36, .18);
    }

    .layout-header .desktop-header .main-header {
        background: var(--ui-navy-900);
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .layout-header .search-box-desktop-form1 .input-group {
        position: relative;
        display: flex;
        align-items: center;
        margin: 0;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 999px;
        overflow: hidden;
        transition: background .18s var(--ui-ease), border-color .18s var(--ui-ease);
    }

    .layout-header .search-box-desktop-form1 .input-group:focus-within {
        background: #fff;
        border-color: #fff;
    }

    .layout-header .search-box-desktop-form1 #searchItem {
        height: 44px;
        margin: 0;
        padding: 0 20px;
        border: none !important;
        background: transparent;
        color: #fff;
        font-size: 14px;
        box-shadow: none !important;
    }

    .layout-header .search-box-desktop-form1 .input-group:focus-within #searchItem {
        color: var(--ui-text);
    }

    .layout-header .search-box-desktop-form1 #searchItem::placeholder {
        color: rgba(255, 255, 255, .6);
        font-style: normal;
    }

    .layout-header .search-box-desktop-form1 .input-group:focus-within #searchItem::placeholder {
        color: var(--ui-text-3);
    }

    .layout-header .search-box-desktop-form1 #searchItem-description { display: none; }

    .layout-header .search-box-desktop-form1 .input-group-button {
        width: auto;
        padding-right: 5px;
        background: transparent;
    }

    .layout-header .search-box-desktop-form1 .icon-search {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--ui-green-500) !important;
        color: var(--ui-navy-950) !important;
        font-size: 15px;
    }

    .layout-header .desktop-header-user-nav .sli {
        font-size: 22px;
    }

    .layout-header .desktop-header-content {
        background: var(--ui-navy-900);
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .layout-header .header-menu-root-link {
        position: relative;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, .82) !important;
    }

    .layout-header .header-menu-root.active .header-menu-root-link,
    .layout-header .header-menu-root-link:hover {
        color: #fff !important;
    }

    .layout-header .header-menu-root.active .header-menu-root-link::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 6px;
        width: 18px;
        height: 3px;
        border-radius: 3px;
        background: var(--ui-green-500);
        transform: translateX(-50%);
    }

    .header-counter-pill,
    .layout-header .mini-cart-total {
        min-width: 18px;
        height: 18px;
        line-height: 16px;
        font-size: 10px !important;
        font-weight: 700;
        border: 2px solid var(--ui-navy-900) !important;
    }
}

/* ── Desktop category sidebar ─────────────────────────────────────────── */
@media (min-width: 801px) {
    .left-categories,
    .left-categories__inner {
        background: transparent !important;
        border: none !important;
    }

    .left-categories__inner {
        margin: 18px 0 0 18px;
        padding: 18px 8px 14px 18px;
        background: var(--ui-surface) !important;
        border: 1px solid var(--ui-border) !important;
        border-radius: var(--ui-radius);
        box-shadow: var(--ui-shadow-sm);
    }

    .leftcategories-title {
        margin-bottom: 8px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--ui-text-3) !important;
    }

    .left-categories .menu a {
        padding: 7px 10px !important;
        border-radius: 8px;
        font-size: 14px;
        color: var(--ui-text) !important;
    }

    .left-categories .menu a:hover {
        background: var(--ui-blue-50);
        color: var(--ui-blue-600) !important;
    }
}

/* ── Shared page chrome ───────────────────────────────────────────────── */
.sanco-page {
    padding-top: 18px;
    padding-bottom: 40px;
}

.sanco-page-head {
    margin-bottom: 18px;
}

.sanco-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--ui-text-3);
}

.sanco-crumbs em { font-size: 9px; }

.sanco-crumbs a,
.layout-main .sanco-crumbs a {
    color: var(--ui-text-2);
}

.sanco-crumbs a:hover,
.layout-main .sanco-crumbs a:hover {
    color: var(--ui-blue-600);
}

.sanco-crumbs span {
    max-width: 50ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ui-text-3);
}

.sanco-page-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.sanco-cart-count {
    margin-left: 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ui-text-3);
}

.sanco-section {
    margin: 8px 0 30px;
}

.sanco-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.layout-main .sanco-section-title,
.layout-main .index-products-title.sanco-section-title {
    margin: 0;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: -.01em;
    color: var(--ui-text) !important;
}

/* Empty states (shop, cart) */
.sanco-empty {
    grid-column: 1 / -1;
    width: 100%;
    padding: 48px 20px;
    text-align: center;
    background: var(--ui-surface);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-lg);
}

.sanco-empty > em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--ui-blue-50);
    color: var(--ui-blue-600);
    font-size: 26px;
}

.sanco-empty h1,
.sanco-empty h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
}

.sanco-empty p {
    margin: 0 auto 18px;
    max-width: 36ch;
    color: var(--ui-text-2) !important;
}

.sanco-empty .button {
    min-width: 180px;
    min-height: 46px;
    margin: 0;
}

.sanco-empty-page {
    max-width: 560px;
    margin: 40px auto;
    border-style: solid;
    border-color: var(--ui-border);
}

/* ── Product card (shop, related, recently viewed, wishlist) ──────────── */
.layout-main .product-item {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
    transition: box-shadow .22s var(--ui-ease), transform .22s var(--ui-ease), border-color .22s var(--ui-ease);
}

@media (hover: hover) {
    .layout-main .product-item:hover {
        border-color: var(--ui-border-strong);
        box-shadow: var(--ui-shadow-lg);
        transform: translateY(-3px);
    }
}

.layout-main .product-item-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    overflow: hidden;
}

.layout-main .product-item-thumb > a {
    display: block;
    width: 100%;
    height: 100%;
}

.layout-main .product-item-thumb img.product-item-image {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    opacity: 1 !important;
    transform: none !important;
    transition: transform .4s var(--ui-ease) !important;
}

@media (hover: hover) {
    .layout-main .product-item:hover .product-item-thumb img.product-item-image {
        transform: scale(1.04) !important;
    }
}

/* The theme's hover-swap second image; most items don't have one */
.layout-main .product-item-thumb img.product-item-image + img.product-item-image {
    display: none !important;
}

.layout-main .product-item .product-group-buttons {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 3;
    display: block !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.layout-main .product-item .product-item-button-wishlist {
    position: relative !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 2px 8px rgba(15, 31, 54, .14);
    cursor: pointer;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: transform .15s var(--ui-ease);
}

.layout-main .product-item .product-item-button-wishlist:active {
    transform: scale(.92) !important;
}

.layout-main .product-item .product-item-button-wishlist em {
    position: static !important;
    font-size: 15px !important;
    line-height: 1;
    color: var(--ui-text-2);
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.layout-main .product-item .product-item-button-wishlist .icon-added { display: none !important; }
.layout-main .product-item .product-item-button-wishlist.is-added .icon-add { display: none !important; }
.layout-main .product-item .product-item-button-wishlist.is-added .icon-added {
    display: block !important;
    color: #e11d48;
}
.layout-main .product-item .product-item-button-wishlist.is-added {
    background: #fff1f3 !important;
}

.sanco-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ui-green-500);
    color: var(--ui-navy-950);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.layout-main .product-item-caption {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    margin: 0 !important;
    padding: 12px 14px 14px !important;
    text-align: left !important;
}

.layout-main .product-item-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.layout-main .product-item-title a {
    display: -webkit-box;
    max-height: none !important;
    min-height: 2.8em;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--ui-text) !important;
    text-decoration: none;
}

.layout-main .product-item-title a:hover {
    color: var(--ui-blue-600) !important;
}

.layout-main .product-item-rating { display: none !important; }

.layout-main .product-item-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    width: 100% !important;
    max-width: none !important;
    margin-top: auto !important;
    padding: 0 !important;
    font-size: inherit !important;
}

.layout-main .product-item-price br { display: none; }

.layout-main .product-item-price .product-item-price-sale,
.layout-main .product-item-price .product-item-price-default,
.layout-main .product-item-price .product-item-price-sale .money {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--ui-text) !important;
}

.layout-main .product-item-price .product-item-price-old,
.layout-main .product-item-price .product-item-price-old .money {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--ui-text-3) !important;
}

/* ── Shop listing ─────────────────────────────────────────────────────── */
.collection-main-container {
    padding-top: 16px;
    padding-bottom: 40px;
}

.layout-main .shopSubcategory {
    margin: 0 0 14px !important;
    padding: 16px 16px 10px !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-sm);
}

.layout-main .shopSubcategory .collection-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    color: var(--ui-text) !important;
}

.layout-main .shopSubcategory .swiper-wrapper {
    padding-left: 0 !important;
}

.layout-main .shopSubcategory .topcoll-element {
    padding: 2px 0 6px;
    text-align: center;
}

.layout-main .shopSubcategory .topcoll-image {
    width: 64px !important;
    height: 64px !important;
    padding: 0;
    background: var(--ui-bg) !important;
    border: 2px solid transparent !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transition: border-color .18s var(--ui-ease);
}

.layout-main .shopSubcategory .topcoll-image > a,
.layout-main .shopSubcategory .topcoll-image > a > img {
    border-radius: 50% !important;
}

.layout-main .shopSubcategory .topcoll-image img.sanco-all-icon {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
    margin: 0 !important;
}

.layout-main .shopSubcategory .topcoll-image.submenu {
    border-color: var(--ui-blue-600) !important;
    box-shadow: 0 0 0 3px rgba(10, 95, 182, .12) !important;
}

.layout-main .shopSubcategory .topcoll-name {
    margin-top: 6px !important;
}

.layout-main .shopSubcategory .topcoll-name a {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    color: var(--ui-text-2) !important;
}

.layout-main .shopSubcategory .carousel-navigation {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
    color: var(--ui-text) !important;
}

.layout-main .shopSubcategory .carousel-navigation em {
    color: var(--ui-text) !important;
    font-size: 11px;
}

.sanco-shop-bar {
    align-items: center;
    margin-top: 4px !important;
    margin-bottom: 14px !important;
}

.sanco-result-count {
    font-size: 14px;
    color: var(--ui-text-2);
}

.sanco-search-note {
    margin: 0 0 14px;
    color: var(--ui-text-2) !important;
}

.layout-main .collection-sort-desktop-title {
    font-size: 13px;
    color: var(--ui-text-3);
}

.layout-main .collection-sort-desktop-dropdown > li > span {
    min-width: 170px;
    padding: 9px 14px !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 10px !important;
    font-size: 14px;
}

.layout-main .collection-sort-desktop-dropdown-panel {
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--ui-shadow-lg) !important;
    overflow: hidden;
}

/* Product grid: CSS grid instead of Foundation's fixed up-N cells */
.layout-main .itemList,
.layout-main .wishlistItems {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
    margin: 0 !important;
}

.layout-main .itemList > .cell,
.layout-main .wishlistItems > .cell {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.layout-main .itemList .product-grid,
.layout-main .wishlistItems .product-grid {
    height: 100%;
    margin: 0 !important;
}

/* ── Product page ─────────────────────────────────────────────────────── */
.sanco-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

@media (min-width: 801px) {
    .sanco-product {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 36px;
        align-items: start;
    }

    .sanco-product-media {
        position: sticky;
        top: 140px;
    }
}

.sanco-gallery-card {
    padding: 14px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
}

.sanco-gallery-card .topcoll-image-single,
.sanco-gallery-card .topcoll-image-single a {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--ui-radius);
    overflow: hidden;
    background: #fff;
}

.sanco-gallery-card .topcoll-image-single img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.sanco-gallery-card .carousel-navigation {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: var(--ui-shadow);
}

.sanco-gallery-card .carousel-navigation em { color: var(--ui-text) !important; }

.sanco-gallery-card .carousel-pagination .swiper-pagination-bullet-active {
    background: var(--ui-blue-600);
}

.sanco-product-info .product-info-container {
    padding: 0;
}

.sanco-brand-chip,
.layout-main a.sanco-brand-chip {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--ui-blue-50);
    color: var(--ui-blue-600) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.layout-main .sanco-product-info .product-title {
    margin: 0 0 12px !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    color: var(--ui-text) !important;
}

.sanco-price-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ui-border);
}

.layout-main .sanco-price-block .product-price,
.layout-main .sanco-price-block .item-price {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: var(--ui-text) !important;
}

.layout-main .sanco-price-block .product-price-old,
.layout-main .sanco-price-block .item-mrp {
    font-size: 17px !important;
    color: var(--ui-text-3) !important;
}

.sanco-price-off:not(:empty) {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ui-green-50);
    color: var(--ui-green-600);
    font-size: 13px;
    font-weight: 700;
}

.sanco-product-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.sanco-product-facts li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--ui-text-2) !important;
}

.sanco-product-facts li em { color: var(--ui-blue-600); font-size: 13px; }
.sanco-product-facts li strong { color: var(--ui-text); font-weight: 600; }

.sanco-product-info .product-add-cart-container {
    display: block !important;
}

.sanco-product-info .product-form select.product-id { display: none !important; }

.sanco-product-info .singleItme {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}

.sanco-product-info .singleItme:empty { display: none !important; }

.sanco-product-info .singleItme .sanco-stepper { height: 50px !important; }

html body .sanco-product-info .singleItme .product-add-cart {
    flex: 1 1 200px;
    height: 50px;
    min-width: 0;
    font-size: 15px;
    border-radius: 12px !important;
}

.sanco-stock-badge-lg {
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 10px;
}

.sanco-product-info .sanco-variation-wrap {
    margin-top: 4px;
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
}

.sanco-product-about {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--ui-border);
}

.sanco-product-about h2 {
    margin: 0 0 8px;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.sanco-product-about p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ui-text-2) !important;
}

.sanco-related {
    margin: 40px 0 10px;
}

.sanco-related .index-collection-slider-container,
.index-collection-slider .index-collection-slider-container {
    padding: 0 !important;
    background: transparent !important;
}

.layout-main .index-products-heading {
    margin-bottom: 14px !important;
    padding: 0 !important;
    text-align: left !important;
}

.layout-main .index-products-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.layout-main .carousel .swiper-slide .product-grid {
    height: 100%;
    padding: 2px;
}

.layout-main .carousel .carousel-navigation {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}

.layout-main .carousel .carousel-navigation em { color: var(--ui-text) !important; }

/* ── Cart ─────────────────────────────────────────────────────────────── */
.sanco-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 1024px) {
    .sanco-cart-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 28px;
    }

    .sanco-cart-summary {
        position: sticky;
        top: 140px;
    }
}

.layout-main .cart-tbody .cart-tr {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    margin: 0 0 12px !important;
    padding: 14px !important;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
}

.layout-main .cart-tbody .cart-product-image {
    width: 88px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.layout-main .cart-tbody .cart-product-image img {
    width: 88px !important;
    height: 88px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    background: var(--ui-bg);
}

.layout-main .cart-tbody .cart-product-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title title"
        "price price"
        "qty   total";
    align-items: center;
    gap: 4px 12px;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.layout-main .cart-tbody .cart-product-info > div {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.layout-main .cart-tbody .cart-product-title { grid-area: title; }
.layout-main .cart-tbody .cart-product-price { grid-area: price; }
.layout-main .cart-tbody .cart-product-quantity { grid-area: qty; margin-top: 8px !important; }
.layout-main .cart-tbody .cart-product-subtotal { grid-area: total; margin-top: 8px !important; text-align: right !important; }

.layout-main .cart-tbody .cart-product-title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--ui-text) !important;
}

.layout-main .cart-tbody .cart-product-price,
.layout-main .cart-tbody .cart-product-price .money {
    font-size: 13px !important;
    color: var(--ui-text-3) !important;
}

.layout-main .cart-tbody .cart-product-subtotal .money {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--ui-text) !important;
}

.layout-main .cart-tbody .cart-product-remove {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
}

.layout-main .cart-tbody .cart-product-remove-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--ui-text-3) !important;
    font-size: 15px !important;
    transition: background .15s var(--ui-ease), color .15s var(--ui-ease);
}

.layout-main .cart-tbody .cart-product-remove-button:hover {
    background: #fff1f0;
    color: #dc2626 !important;
}

.sanco-link-back,
.layout-main a.sanco-link-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ui-blue-600) !important;
}

.sanco-link-back em { font-size: 11px; }

.sanco-cart-summary {
    padding: 22px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
}

.layout-main .sanco-summary-title {
    margin: 0 0 16px;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.sanco-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
}

.sanco-summary-row span { color: var(--ui-text-2) !important; }

.sanco-summary-row strong,
.sanco-summary-row strong .money {
    font-size: 24px;
    font-weight: 700;
    color: var(--ui-text);
}

.sanco-summary-note {
    display: flex;
    gap: 8px;
    margin: 12px 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ui-text-3) !important;
}

.sanco-summary-note em { margin-top: 3px; }

.sanco-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text) !important;
}

.sanco-field-label span { font-weight: 400; color: var(--ui-text-3) !important; }

.sanco-cart-summary .cart-note {
    width: 100%;
    min-height: 84px;
    margin: 0 0 16px !important;
    padding: 12px 14px;
    background: var(--ui-bg);
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px;
    font-size: 14px;
    resize: vertical;
    box-shadow: none !important;
}

.sanco-cart-summary .cart-note:focus {
    background: #fff;
    border-color: var(--ui-blue-500) !important;
}

.sanco-summary-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--ui-text-3) !important;
}

/* ── Home ─────────────────────────────────────────────────────────────── */
.sanco-hero2 {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(26, 116, 212, .35) 0%, transparent 55%),
        radial-gradient(60% 90% at 0% 100%, rgba(108, 191, 31, .16) 0%, transparent 60%),
        linear-gradient(160deg, var(--ui-navy-950) 0%, var(--ui-navy-800) 100%);
}

.sanco-hero2-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 18px 54px;
}

.sanco-hero2-logo img {
    display: block;
    height: 52px;
    width: auto;
    margin: -6px 0 14px -6px;
}

.sanco-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: #c7e7a6;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.layout-main .sanco-hero2-title {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff !important;
}

.sanco-hero2-title .sanco-hl { color: #8fdc45; }

.sanco-hero2-text {
    max-width: 46ch;
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78) !important;
}

.sanco-hero2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sanco-hero2-media {
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
}

.sanco-hero2-media:empty { display: none; }

.sanco-hero2-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 801px) {
    .sanco-hero2-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 48px;
        padding: 56px 32px 80px;
    }

    .layout-main .sanco-hero2-title { font-size: 46px; }
    .sanco-hero2-text { font-size: 17px; }
    .sanco-hero2-media { aspect-ratio: 4 / 3; }
}

/* Search pill overlaps the hero's bottom edge */
.layout-main .sanco-search-bar {
    position: relative;
    z-index: 20;
    max-width: 760px;
    margin: -28px auto 24px !important;
    padding: 6px 6px 6px 20px !important;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    box-shadow: var(--ui-shadow-lg);
}

.layout-main .sanco-search-input {
    font-size: 15px !important;
}

.layout-main .sanco-search-filter {
    width: 44px;
    height: 44px;
    background: var(--ui-navy-900);
    color: #fff !important;
}

/* Value strip */
.layout-main .sanco-feature-strip {
    max-width: 1100px;
    margin: 0 auto 30px !important;
    padding: 14px !important;
    gap: 10px;
    background: transparent;
    border-radius: 0;
}

.layout-main .sanco-feature-item {
    flex-direction: row;
    gap: 10px;
    padding: 12px 14px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    text-align: left;
    justify-content: flex-start;
}

.layout-main .sanco-feature-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 17px;
}

.layout-main .sanco-feature-label {
    font-size: 13px !important;
    font-weight: 600;
}

/* Brands */
.layout-main .sanco-brands {
    margin-bottom: 30px;
}

.layout-main .sanco-brands-head {
    margin-bottom: 14px;
}

.layout-main .sanco-brands-viewall {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-blue-600) !important;
}

.layout-main .sanco-brand-card {
    min-height: 76px;
    padding: 10px;
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
}

.layout-main .sanco-brand-card img { max-height: 54px; }

/* Category cards */
.sanco-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.sanco-cat-card,
.layout-main a.sanco-cat-card {
    display: flex;
    flex-direction: column;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
    color: var(--ui-text) !important;
    text-decoration: none;
    transition: box-shadow .22s var(--ui-ease), transform .22s var(--ui-ease);
}

@media (hover: hover) {
    .sanco-cat-card:hover {
        box-shadow: var(--ui-shadow-lg);
        transform: translateY(-3px);
    }

    .sanco-cat-card:hover .sanco-cat-img img { transform: scale(1.05); }
}

.sanco-cat-img {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ui-blue-50);
}

.sanco-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--ui-ease);
}

.sanco-cat-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
}

.sanco-cat-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--ui-text) !important;
}

.sanco-cat-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-blue-600) !important;
    white-space: nowrap;
}

.sanco-cat-go em { font-size: 10px; }

/* Promo slider below categories */
.layout-main .sanco-hero {
    margin-bottom: 30px;
}

.layout-main .sanco-hero .index-slideshow-container {
    border-radius: var(--ui-radius-lg) !important;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.layout-footer .footer {
    padding-top: 48px !important;
    background: var(--ui-navy-950) !important;
}

.layout-footer .all-list-footer {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}

.layout-footer .all-list-footer > .cell {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

.layout-footer .footer-title {
    margin-bottom: 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55) !important;
}

.layout-footer .footer-title hr { display: none; }

.layout-footer .linklist-content li { margin-bottom: 8px; }

.layout-footer .linklist-content a {
    font-size: 14px;
    color: rgba(255, 255, 255, .88) !important;
}

.layout-footer .linklist-content a:hover { color: var(--ui-green-500) !important; }

.layout-footer .footer-about .content,
.layout-footer .sanco-address-line {
    font-size: 14px;
    color: rgba(255, 255, 255, .78) !important;
}

.layout-footer .footer-bottom {
    margin-top: 36px;
    padding: 18px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: transparent !important;
}

.layout-footer .copyright,
.layout-footer .copyright a {
    font-size: 13px;
    color: rgba(255, 255, 255, .5) !important;
}

/* ── Mobile bottom navigation ─────────────────────────────────────────── */
.mobile-nav {
    margin: 0 12px calc(10px + env(safe-area-inset-bottom)) !important;
    padding: 4px 0;
    border-radius: 22px !important;
    background: rgba(1, 20, 41, .96) !important;
    box-shadow: 0 12px 30px rgba(1, 15, 36, .35);
    backdrop-filter: blur(8px);
}

.mobile-nav .mobile-nav-link.active .mobile-nav-icon {
    position: relative;
}

.mobile-nav .mobile-nav-link.active::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    margin: 2px auto 0;
    border-radius: 50%;
    background: var(--ui-green-500);
}

/* ── Tablet & phone ───────────────────────────────────────────────────── */
@media (max-width: 800px) {
    .sanco-page { padding-top: 12px; }

    .sanco-page-title { font-size: 22px; }

    .layout-main .itemList,
    .layout-main .wishlistItems {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .layout-main .sanco-product-info .product-title { font-size: 22px !important; }

    .layout-main .sanco-price-block .product-price,
    .layout-main .sanco-price-block .item-price { font-size: 26px !important; }

    /* Phones/tablets: Add to cart bar stays in reach above the tab bar */
    .sanco-product-page .sanco-product-info .singleItme {
        position: sticky;
        bottom: calc(84px + env(safe-area-inset-bottom));
        z-index: 40;
        box-shadow: var(--ui-shadow-lg);
    }

    /* Room for the floating tab bar at the end of every page */
    .layout-main { padding-bottom: 96px; }
}

@media (max-width: 640px) {
    .layout-main .itemList,
    .layout-main .wishlistItems {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .layout-main .product-item-caption { padding: 10px 11px 12px !important; gap: 6px; }
    .layout-main .product-item-title { font-size: 13px !important; }
    .layout-main .product-item-price .product-item-price-sale,
    .layout-main .product-item-price .product-item-price-sale .money { font-size: 15px !important; }
    .layout-main .product-item .product-item-button-wishlist { width: 32px !important; height: 32px !important; }
    .sanco-card-badge { top: 8px; left: 8px; font-size: 10px; padding: 3px 7px; }

    .layout-main .shopSubcategory {
        margin: 0 -2px 12px !important;
        padding: 12px 10px 6px !important;
        border-radius: var(--ui-radius) !important;
    }

    .layout-main .shopSubcategory .collection-title { font-size: 18px !important; margin-bottom: 8px !important; }
    .layout-main .shopSubcategory .topcoll-image { width: 56px !important; height: 56px !important; }

    .layout-main .cart-tbody .cart-tr {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 12px !important;
    }

    .layout-main .cart-tbody .cart-product-image,
    .layout-main .cart-tbody .cart-product-image img { width: 72px !important; height: 72px !important; }

    .layout-main .cart-tbody .cart-product-info {
        grid-template-areas:
            "title title"
            "price price"
            "qty   qty"
            "total total";
    }

    .layout-main .cart-tbody .cart-product-subtotal { text-align: left !important; margin-top: 4px !important; }
    .layout-main .cart-tbody .cart-product-title a { font-size: 14px !important; }

    .sanco-cart-summary { padding: 18px; }

    .sanco-hero2-inner { padding: 18px 16px 50px; }
    .layout-main .sanco-hero2-title { font-size: 28px; }
    .sanco-hero2-text { font-size: 14px; margin-bottom: 18px; }
    .sanco-hero2-actions .sanco-btn { flex: 1 1 auto; }
    .sanco-hero2-media { aspect-ratio: 16 / 9; }

    .layout-main .sanco-search-bar { margin: -26px 14px 18px !important; }

    .layout-main .sanco-feature-strip {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 auto 22px !important;
        padding: 0 14px !important;
    }

    .layout-main .sanco-feature-item { padding: 10px; }
    .layout-main .sanco-feature-item:last-child { grid-column: 1 / -1; justify-content: center; }
    .layout-main .sanco-feature-icon { width: 34px; height: 34px; font-size: 15px; border-radius: 10px; }
    .layout-main .sanco-feature-label { font-size: 12px !important; }

    .sanco-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sanco-cat-body { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px 12px; }
    .sanco-cat-name { font-size: 14px; }
    .sanco-cat-go { font-size: 12px; }

    .layout-main .sanco-section-title,
    .layout-main .index-products-title.sanco-section-title { font-size: 18px !important; }

    .layout-footer .all-list-footer { grid-template-columns: 1fr; gap: 22px; text-align: left; }
    .layout-footer .footer .cell,
    .layout-footer .footer-title,
    .layout-footer .footer-column-content { text-align: left !important; }
    .layout-footer .footer { padding: 32px 6px 0 !important; }
}

/* ── Refinements ──────────────────────────────────────────────────────── */

/* Theme accordion toggles in the category sidebar / drawer */
.left-categories .submenu-toggle,
#mobile-menu-collections-dropup .submenu-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.left-categories .submenu-toggle::after,
#mobile-menu-collections-dropup .submenu-toggle::after {
    border-color: var(--ui-text-3) transparent transparent !important;
}

/* Hero label: the layout's ".layout-main span" colour rule would otherwise win */
.layout-main .sanco-hero2 .sanco-eyebrow { color: #c7e7a6 !important; }
.layout-main .sanco-hero2 .sanco-hero2-title span { color: inherit !important; }
.layout-main .sanco-hero2 .sanco-hero2-title .sanco-hl { color: #8fdc45 !important; }

/* Promo slider call-to-action */
.layout-main .index-slideshow-caption-action a {
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 999px !important;
    background: var(--ui-green-500) !important;
    color: var(--ui-navy-950) !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.layout-main .scroll-to-top { display: none !important; }

/* Carousels (related, recently viewed) sit on the page, not a white panel */
.layout-main .index-collection-slider .index-products-content,
.layout-main .index-collection-slider .carousel,
.layout-main .index-collection-slider .carousel-wrapper,
.layout-main .index-collection-slider .swiper-container {
    background: transparent !important;
}

.layout-main .product-item-caption { min-height: 0 !important; }

/* Desktop sort dropdown */
.layout-main .collection-sort-desktop-dropdown > li {
    position: relative;
    display: inline-block;
}

.layout-main .collection-sort-desktop-dropdown > li > span {
    min-width: 0;
    width: auto !important;
    padding-right: 34px !important;
}

/* Cart line: the theme centres these cells as flex rows */
.layout-main .cart-tbody .cart-product-info > .cart-product-price,
.layout-main .cart-tbody .cart-product-info > .cart-product-quantity {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: baseline;
}

.layout-main .cart-tbody .cart-product-info > .cart-product-subtotal {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
}

.layout-main .cart-tbody .sanco-cart-each {
    display: inline !important;
    margin-left: 4px;
    font-size: 13px;
    color: var(--ui-text-3) !important;
}

@media (max-width: 640px) {
    .layout-main .cart-tbody .cart-product-info > .cart-product-subtotal { justify-content: flex-start !important; }
}

/* Product page: the theme's empty wishlist anchors leave a gap */
.sanco-product-info .product-wishlist { display: none !important; }

/* Product page, desktop: each size is one compact row -
   thumb + name, size under the name, then price and quantity. */
@media (min-width: 801px) {
    .sanco-product-info .sanco-variation-wrap {
        overflow: visible;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .sanco-product-info .sanco-variation-table thead { display: none; }

    .sanco-product-info .sanco-variation-table,
    .sanco-product-info .sanco-variation-table tbody { display: block; width: 100%; }

    .sanco-product-info .sanco-variation-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "variation price qty"
            "size      price qty";
        align-items: center;
        column-gap: 16px;
        margin-bottom: 10px;
        padding: 12px 14px;
        background: var(--ui-surface);
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius);
    }

    .sanco-product-info .sanco-variation-table tbody tr:hover td { background: transparent; }

    .sanco-product-info .sanco-variation-table tbody td {
        display: block;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .sanco-product-info .sanco-variation-table td[data-label="Variation"] { grid-area: variation; }
    .sanco-product-info .sanco-variation-table td[data-label="Size/Type"] { grid-area: size; padding-left: 62px !important; }
    .sanco-product-info .sanco-variation-table td[data-label="Price"] { grid-area: price; text-align: right; }
    .sanco-product-info .sanco-variation-table td[data-label="Quantity"] { grid-area: qty; }

    .sanco-product-info .sanco-variation-cell { min-width: 0; }
    .sanco-product-info .sanco-variation-name { font-size: 14px; }
    .sanco-product-info .sanco-variation-size { font-size: 12px; color: var(--ui-text-3); }
}

/* Variation thumbnails: a placeholder instead of a broken image icon */
.sanco-variation-thumb {
    overflow: hidden;
    color: transparent;
    font-size: 0;
}

/* Phone cart: sticky subtotal + checkout above the tab bar */
.sanco-cart-bar { display: none; }

@media (max-width: 800px) {
    .sanco-cart-page .cartValid .sanco-cart-bar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(86px + env(safe-area-inset-bottom));
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 10px 10px 16px;
        background: var(--ui-surface);
        border: 1px solid var(--ui-border);
        border-radius: 16px;
        box-shadow: var(--ui-shadow-lg);
    }

    .sanco-cart-page .layout-main { padding-bottom: 170px; }

    .sanco-cart-bar-total { display: flex; flex-direction: column; line-height: 1.2; }
    .sanco-cart-bar-total span { font-size: 12px; color: var(--ui-text-3) !important; }
    .sanco-cart-bar-total strong,
    .sanco-cart-bar-total strong span { font-size: 18px; font-weight: 700; color: var(--ui-text) !important; }

    html body .sanco-cart-bar .ordernow {
        min-height: 46px;
        margin: 0;
        padding: 0 26px;
        font-size: 15px;
    }

    /* Size cards: keep price and MRP together on the right */
    .sanco-variation-table tbody td[data-label="Price"] .product-item-price-sale { margin-left: auto; }
    .sanco-variation-table tbody td[data-label="Price"] .product-item-price-old { margin-left: 8px; }
}

.sanco-hero2-logo img {
    height: 38px;
    margin: 0 0 18px;
}
/* Loading placeholders (shop grid before products arrive) */
.sanco-skeleton-card {
    padding: 0 0 14px !important;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.sanco-skeleton {
    background: linear-gradient(90deg, #edf1f6 0%, #f6f8fb 40%, #edf1f6 80%);
    background-size: 200% 100%;
    animation: sanco-shimmer 1.2s ease-in-out infinite;
}

.sanco-skeleton-img { aspect-ratio: 1 / 1; margin-bottom: 12px; }
.sanco-skeleton-line { height: 12px; margin: 0 14px 8px; border-radius: 6px; }
.sanco-skeleton-line.short { width: 40%; }

@keyframes sanco-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sanco-skeleton { animation: none; }
}

/* Footer contact icons now come from the local icon font */
.layout-footer .footer-about em.icon {
    flex: none;
    width: 22px;
    margin-right: 12px;
    font-size: 18px;
    color: var(--ui-green-500);
}
/* ══ UI bug fixes (round 2) ══════════════════════════════════════════════ */

/* Count badges: the empty pill showed as a bare green dot for visitors */
.header-counter-pill:empty,
.mini-cart-total:empty,
.wishlistCounter:empty { display: none !important; }

/* Salesperson: "Ordering for <customer>" bar (hidden until one is picked) */
.sanco-ordering-for {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1180px;
    margin: 10px auto 0 !important;
    padding: 8px 14px !important;
    background: var(--ui-green-50);
    border: 1px solid #d7ecc0;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text) !important;
}
.sanco-ordering-for::before {
    content: 'Ordering for';
    font-weight: 500;
    color: var(--ui-green-600);
}
.sanco-ordering-for:empty { display: none !important; }
@media (max-width: 800px) {
    .sanco-ordering-for { margin: 10px 12px 0 !important; }
}

/* Page building blocks */
.sanco-narrow { max-width: 860px; }
.sanco-page-lead { margin: 6px 0 0; color: var(--ui-text-2) !important; font-size: 15px; }
.sanco-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sanco-head-row .button { margin: 0; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.sanco-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}

/* Profile */
.sanco-profile-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--ui-border); }
.sanco-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ui-blue-600), var(--ui-blue-500));
    color: #fff; font-size: 22px; font-weight: 700;
}
.layout-main .sanco-profile-name { margin: 0; font-size: 20px !important; font-weight: 700 !important; }
.sanco-profile-sub { margin: 2px 0 0; color: var(--ui-text-3) !important; font-size: 14px; }
.sanco-profile-list { margin: 0; }
.sanco-profile-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #eef2f7; }
.sanco-profile-list > div:last-child { border-bottom: none; padding-bottom: 0; }
.sanco-profile-list dt { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ui-text-3); white-space: nowrap; }
.sanco-profile-list dt em { color: var(--ui-blue-600); }
.sanco-profile-list dd { margin: 0; text-align: right; font-size: 14px; color: var(--ui-text); word-break: break-word; }
.sanco-profile-links { padding: 6px 0; }
.sanco-profile-links a,
.layout-main .sanco-profile-links a {
    display: flex; align-items: center; gap: 12px; padding: 14px 20px;
    border-bottom: 1px solid #eef2f7; color: var(--ui-text) !important; font-weight: 500;
}
.sanco-profile-links a:last-child { border-bottom: none; }
.sanco-profile-links a span { flex: 1; }
.sanco-profile-links a em:first-child { width: 20px; color: var(--ui-blue-600); font-size: 16px; }
.sanco-profile-links a em:last-child { font-size: 11px; color: var(--ui-text-3); }
.sanco-profile-links a:hover { background: var(--ui-bg); }
.layout-main .sanco-profile-links a.is-danger,
.sanco-profile-links a.is-danger em:first-child { color: #c2410c !important; }

/* Contact */
.sanco-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 2px; }
.sanco-contact-card,
.layout-main a.sanco-contact-card {
    display: flex; flex-direction: column; gap: 4px; margin: 0;
    color: var(--ui-text) !important; text-decoration: none;
    transition: box-shadow .2s var(--ui-ease), transform .2s var(--ui-ease);
}
.sanco-contact-card:hover { box-shadow: var(--ui-shadow-lg); transform: translateY(-2px); }
.sanco-contact-card strong { font-size: 16px; color: var(--ui-text); word-break: break-word; }
.sanco-contact-label { font-size: 13px; color: var(--ui-text-3) !important; }
.sanco-contact-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; margin-bottom: 8px; border-radius: 12px;
    background: var(--ui-blue-50); color: var(--ui-blue-600); font-size: 18px;
}
.sanco-contact-icon.is-green { background: var(--ui-green-50); color: var(--ui-green-600); }
.sanco-contact-address { display: flex; gap: 14px; margin-top: 16px; }
.layout-main .sanco-contact-address h2 { margin: 0 0 6px; font-size: 16px !important; font-weight: 600 !important; }
.sanco-contact-address address { font-style: normal; line-height: 1.7; color: var(--ui-text-2); font-size: 14px; }

/* Text pages (about, policies): readable line length, no justified gaps */
.sanco-prose p { margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: var(--ui-text-2) !important; text-align: left; }
.layout-main .page-content p { text-align: left !important; }
.layout-main .cart .grid-container .page-content { max-width: 100%; }
.layout-main .page-heading + .page-content > p,
.layout-main .page-content .terms-content { max-width: 75ch; margin-left: auto; margin-right: auto; }

/* Filters (orders, collection report) */
.sanco-filter-card {
    margin-bottom: 16px; padding: 16px;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
}
.sanco-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.sanco-filter-wide { grid-column: 1 / -1; }
.sanco-filter-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ui-text) !important; }
.layout-main .sanco-filter-field .form-control,
.layout-main .sanco-filter-field input {
    width: 100%; height: 44px; margin: 0; padding: 0 12px;
    border: 1px solid var(--ui-border) !important; border-radius: 10px; background: #fff; font-size: 14px; box-shadow: none !important;
}
.sanco-filter-actions { display: flex; gap: 8px; }
html body .sanco-filter-actions .button { flex: 1; margin: 0; min-height: 44px; padding: 0 16px; }
@media (min-width: 801px) { .sanco-filter-wide { grid-column: span 2; } }

/* Order history cards */
.sanco-order-list { display: flex; flex-direction: column; gap: 10px; }
.sanco-order-card,
.layout-main a.sanco-order-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main side" "go go";
    gap: 6px 16px; padding: 16px 18px;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
    color: var(--ui-text) !important; text-decoration: none;
    transition: box-shadow .2s var(--ui-ease), border-color .2s var(--ui-ease);
}
.sanco-order-card:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow); }
.sanco-order-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sanco-order-code { font-weight: 700; font-size: 15px; }
.sanco-order-customer { font-size: 14px; font-weight: 500; color: var(--ui-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sanco-order-date { font-size: 13px; color: var(--ui-text-3); }
.sanco-order-side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sanco-order-total { font-size: 17px; font-weight: 700; color: var(--ui-text); }
.sanco-order-go { grid-area: go; justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ui-blue-600); }
.sanco-order-go em { font-size: 10px; }
.sanco-order-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ui-blue-50); color: var(--ui-blue-600); }
.sanco-order-status.is-Completed { background: var(--ui-green-50); color: var(--ui-green-600); }
.sanco-order-status.is-Partial { background: #fff7e6; color: #b45309; }
.sanco-order-status.is-Cancel { background: #fee2e2; color: #991b1b; }
@media (min-width: 801px) {
    .sanco-order-card { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main side go"; align-items: center; }
    .sanco-order-side { flex-direction: row; align-items: center; gap: 16px; }
    .sanco-order-go { justify-self: end; }
}
.sanco-skeleton.sanco-order-card,
.sanco-skeleton.sanco-statement-row { border: none; }

/* Account statement (transactions, collection report) */
.sanco-balance { display: flex; flex-direction: column; gap: 2px; }
.sanco-balance-label { font-size: 13px; color: var(--ui-text-3) !important; }
.sanco-balance-value { font-size: 30px; font-weight: 700; color: var(--ui-text); line-height: 1.2; }
.sanco-balance-sub { font-size: 13px; color: var(--ui-text-3) !important; }
.sanco-statement { display: flex; flex-direction: column; gap: 8px; }
.sanco-statement-date { margin: 10px 2px 2px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-text-3); }
.sanco-statement-row {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
}
.sanco-statement-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border-radius: 12px; font-size: 16px;
    background: var(--ui-blue-50); color: var(--ui-blue-600);
}
.sanco-statement-row.is-payment .sanco-statement-icon { background: var(--ui-green-50); color: var(--ui-green-600); }
.sanco-statement-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sanco-statement-main strong { font-size: 14px; color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sanco-statement-main span { font-size: 12px; color: var(--ui-text-3) !important; }
.sanco-statement-note { color: var(--ui-text-2) !important; font-style: italic; white-space: normal; }
.sanco-statement-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; white-space: nowrap; }
.sanco-statement-amount strong { font-size: 15px; }
.sanco-statement-row.is-bill .sanco-statement-amount strong { color: var(--ui-text); }
.sanco-statement-row.is-payment .sanco-statement-amount strong { color: var(--ui-green-600); }
.sanco-statement-amount span { font-size: 12px; color: var(--ui-text-3) !important; }
.sanco-report-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sanco-report-totals > div { display: flex; flex-direction: column; gap: 2px; }
.sanco-report-totals span { font-size: 12px; color: var(--ui-text-3) !important; }
.sanco-report-totals strong { font-size: 17px; font-weight: 700; color: var(--ui-text); }
.sanco-report-totals .is-grand strong { color: var(--ui-blue-600); }

/* Salesperson tool pages: search + action on one row, readable tables */
.sanco-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.layout-main .sanco-toolbar .form-control { flex: 1 1 220px; height: 44px; margin: 0; border-radius: 10px; border: 1px solid var(--ui-border) !important; }
html body .sanco-toolbar .button { margin: 0; min-height: 44px; }
.layout-main .sanco-table { width: 100%; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.layout-main .sanco-table thead th { background: #f6f8fb !important; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-text-3) !important; text-align: left; }
.layout-main .sanco-table tbody td { background: #fff !important; border-top: 1px solid #eef2f7; }
.layout-main .sanco-table tbody tr[data-id] { cursor: pointer; }
.layout-main .sanco-table tbody tr[data-id]:hover td { background: var(--ui-bg) !important; }

/* Salesperson forms (add customer, add collection): a card, not full width */
.layout-main .cart .page-content > .card-body {
    max-width: 760px; margin: 0 auto; padding: 20px;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
}

/* Select2 in the store matches the other fields */
.layout-main .select2-container { width: 100% !important; }
.layout-main .select2-container .select2-selection--single {
    height: 44px; border: 1px solid #b8d2ef; border-radius: 10px;
}
.layout-main .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: 12px; }
.layout-main .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }
.layout-main .select2-container .select2-selection--multiple { min-height: 44px; border: 1px solid #b8d2ef; border-radius: 10px; }

/* Sign-in page (/login-page/): same look as the sign-in panel */
.layout-main .account-login-form {
    max-width: 420px; margin: 24px auto; padding: 24px;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
}
.layout-main .account-login-form .account-login-title { margin-bottom: 6px; font-size: 22px; font-weight: 700; text-transform: none; }
.layout-main .account-login-form .account-field {
    width: 100%; height: 48px; margin-bottom: 12px; padding: 0 14px;
    border: 1px solid var(--ui-border) !important; border-radius: 12px; background: var(--ui-bg); font-size: 15px;
}
.layout-main .account-login-form .account-field:focus { background: #fff; border-color: var(--ui-blue-500) !important; }
html body .account-login-form .account-login-submit { width: 100%; min-height: 48px; margin: 4px 0 0; }
/* Policy pages: readable line length */
.layout-main .page-content:has(.bs-l-terms-list) { max-width: 860px; margin: 0 auto; }
.sanco-profile-list dt em { font-size: 15px; width: 18px; }
@media (max-width: 640px) {
    .sanco-contact-card,
    .layout-main a.sanco-contact-card {
        display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto;
        column-gap: 14px; row-gap: 0; align-items: center; padding: 14px 16px;
    }
    .sanco-contact-card .sanco-contact-icon { grid-row: 1 / 3; margin: 0; }
}
/* Salesperson forms: buttons sit under the card, right-aligned */
.layout-main .cart .page-content > .card-footer { max-width: 760px; margin: 14px auto 0; padding: 0; background: none; border: none; }
.layout-main .cart .page-content > .card-footer .form-group { display: flex; justify-content: flex-end; margin: 0 !important; }
.layout-main .cart .page-content > .card-footer .form-group > div { display: flex; gap: 10px; width: auto; max-width: none; flex: none; padding: 0; }
html body .cart .page-content > .card-footer .button { margin: 0; min-height: 46px; padding: 0 22px; }
.layout-main .cart .page-content > .card-body .form-group { margin-bottom: 16px; }
.layout-main .cart .page-content > .card-body label { font-weight: 600; font-size: 14px; }
@media (max-width: 640px) {
    .layout-main .cart .page-content > .card-footer .form-group > div { width: 100%; }
    html body .cart .page-content > .card-footer .button { flex: 1; }
}html body .cart .page-content > .card-footer .button { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }
/* ══ Category menu (sidebar on desktop, drawer on tablet/phone) ══════════ */
.sanco-catnav-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 2px 6px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--ui-border);
}
.layout-main .sanco-catnav .leftcategories-title,
.sanco-catnav .leftcategories-title {
    margin: 0 !important; padding: 0 !important;
    font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ui-text-3) !important;
}
.sanco-catnav-brands,
.layout-main a.sanco-catnav-brands { font-size: 12px; font-weight: 600; color: var(--ui-blue-600) !important; }
.sanco-catnav-list { list-style: none; margin: 0 !important; padding: 0 !important; }
.sanco-cat { margin: 1px 0; }
.sanco-cat-row { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.sanco-cat-row:hover { background: var(--ui-bg); }
.sanco-catnav a.sanco-cat-link,
.layout-main .left-categories .sanco-catnav a.sanco-cat-link {
    flex: 1; min-width: 0; padding: 9px 10px !important;
    font-size: 14px; font-weight: 500; line-height: 1.3;
    color: var(--ui-text) !important; background: none !important; border-radius: 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sanco-cat.is-current > .sanco-cat-row { background: var(--ui-blue-50); }
.sanco-catnav .sanco-cat.is-current > .sanco-cat-row a.sanco-cat-link,
.layout-main .left-categories .sanco-catnav .sanco-cat.is-current > .sanco-cat-row a.sanco-cat-link {
    color: var(--ui-blue-600) !important; font-weight: 600;
}
.sanco-cat-toggle {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    height: 32px; margin: 0; padding: 0 8px;
    background: transparent; border: none; border-radius: 8px; cursor: pointer;
    color: var(--ui-text-3);
}
.sanco-cat-toggle:hover { background: rgba(10, 95, 182, .08); color: var(--ui-blue-600); }
.sanco-cat-toggle:focus-visible { outline: 2px solid var(--ui-blue-500); outline-offset: 1px; }
.sanco-cat-count {
    min-width: 20px; padding: 1px 6px; border-radius: 999px;
    background: #eef2f7; color: var(--ui-text-2); font-size: 11px; font-weight: 600; text-align: center;
}
.sanco-cat-toggle em { font-size: 10px; transition: transform .2s var(--ui-ease); }
.sanco-cat.is-open > .sanco-cat-row .sanco-cat-toggle em { transform: rotate(180deg); }
.sanco-sub {
    list-style: none; margin: 2px 0 6px 16px !important; padding: 0 0 0 8px !important;
    border-left: 2px solid var(--ui-border);
}
.sanco-sub[hidden] { display: none !important; }
.sanco-catnav .sanco-sub a,
.layout-main .left-categories .sanco-catnav .sanco-sub a {
    display: block; padding: 7px 10px !important; border-radius: 8px;
    font-size: 13px; font-weight: 400; color: var(--ui-text-2) !important; background: none !important;
}
.sanco-catnav .sanco-sub a:hover,
.layout-main .left-categories .sanco-catnav .sanco-sub a:hover { background: var(--ui-bg) !important; color: var(--ui-blue-600) !important; }
.sanco-catnav .sanco-sub a.is-current,
.layout-main .left-categories .sanco-catnav .sanco-sub a.is-current {
    color: var(--ui-blue-600) !important; font-weight: 600; background: var(--ui-blue-50) !important;
}

/* Desktop: a compact card pinned below the header (CSS sticky - the theme
   plugin used to leave a gap above it), scrolling inside itself when long. */
@media (min-width: 801px) {
    .layout-main .left-categories {
        position: sticky !important;
        top: 132px;
        width: 260px;
        padding: 16px 0 24px 16px;
        background: transparent !important;
        z-index: 20 !important;
    }
    .layout-main .left-categories .sanco-catnav {
        margin: 0 !important;
        padding: 14px 10px !important;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        scrollbar-width: thin;
        background: var(--ui-surface) !important;
        border: 1px solid var(--ui-border) !important;
        border-radius: var(--ui-radius-lg);
        box-shadow: var(--ui-shadow-sm);
    }
    .layout-main .left-categories .categories-navigation { display: none !important; }
}

/* Tablet/phone: the slide-in drawer gets the same menu */
@media (max-width: 800px) {
    .left-categories .sanco-catnav,
    #mobile-menu-collections-dropup .sanco-catnav { padding: 8px 6px !important; }
    .left-categories.active { padding: 12px !important; background: var(--ui-surface) !important; }
}
/* The layout's catch-all "button { gradient !important }" rule painted the
   menu's expand toggles as big blue/green buttons. */
html body .sanco-catnav button.sanco-cat-toggle,
html body .sanco-catnav button.sanco-cat-toggle:hover,
html body .sanco-catnav button.sanco-cat-toggle:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--ui-text-3) !important;
    transform: none !important;
}
html body .sanco-catnav button.sanco-cat-toggle:hover { background: rgba(10, 95, 182, .08) !important; color: var(--ui-blue-600) !important; }
html body .sanco-catnav .sanco-cat.is-open > .sanco-cat-row button.sanco-cat-toggle { color: var(--ui-blue-600) !important; }
/* Phone drawer polish */
@media (max-width: 800px) {
    .left-categories.active .sanco-catnav,
    .left-categories .left-categories__inner.sanco-catnav { background: transparent !important; border: none !important; }
    /* keep clear of the drawer's close tab on the right edge */
    .left-categories .sanco-catnav-head { padding-right: 44px; }
    /* the home page hides the phone header, so the drawer starts at the top */
    body:has(.sanco-hero2) .left-categories { top: 0 !important; height: 100% !important; padding-top: 12px !important; }
}
/* Admin panel shortcut (back-office users only) */
.sanco-admin-btn,
.layout-header a.sanco-admin-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 14px; margin-right: 6px;
    border: 1px solid rgba(108, 191, 31, .55); border-radius: 999px;
    background: rgba(108, 191, 31, .12);
    color: #c7e7a6 !important; font-size: 13px; font-weight: 600; white-space: nowrap;
    transition: background .18s var(--ui-ease), color .18s var(--ui-ease);
}
.sanco-admin-btn em { font-size: 14px; }
.sanco-admin-btn:hover,
.layout-header a.sanco-admin-btn:hover { background: var(--ui-green-500); color: var(--ui-navy-950) !important; }
.layout-main .sanco-profile-links a.is-admin { color: var(--ui-blue-600) !important; font-weight: 600; }
.sanco-profile-role {
    display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 4px 10px;
    border-radius: 999px; background: var(--ui-green-50); color: var(--ui-green-600) !important;
    font-size: 12px; font-weight: 600;
}
/* No details to list (e.g. an admin account): drop the empty divider */
.sanco-profile:not(:has(.sanco-profile-list > div)) .sanco-profile-head { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.sanco-profile-list:not(:has(> div)) { display: none; }.sanco-profile-role em { font-size: 13px !important; line-height: 1; }
/* ══ Phone account panel (bottom bar "Account", signed in) ══ */
#mobile-menu-login .sanco-account-panel { padding: 4px 0 24px; text-align: left; }
#mobile-menu-login .sanco-account-title {
    margin: 0 2px 14px !important; font-size: 22px !important; font-weight: 700 !important;
    text-transform: none !important; color: var(--ui-text) !important;
}
#mobile-menu-login .sanco-card { margin-bottom: 12px; }
#mobile-menu-login .sanco-account-head { display: flex; align-items: center; gap: 14px; padding: 16px; }
#mobile-menu-login .sanco-account-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#mobile-menu-login .sanco-account-who strong {
    font-size: 17px; font-weight: 700; color: var(--ui-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#mobile-menu-login .sanco-account-who span { font-size: 13px; color: var(--ui-text-3); }
#mobile-menu-login .sanco-profile-links { padding: 4px 0; }
#mobile-menu-login .sanco-profile-links a {
    display: flex !important; align-items: center; gap: 12px; padding: 14px 16px !important;
    border-bottom: 1px solid #eef2f7; color: var(--ui-text) !important;
    font-size: 15px; font-weight: 500; text-transform: none; text-decoration: none;
}
#mobile-menu-login .sanco-profile-links a:last-child { border-bottom: none; }
#mobile-menu-login .sanco-profile-links a span { flex: 1; }
#mobile-menu-login .sanco-profile-links a em:first-child { width: 20px; font-size: 16px; color: var(--ui-blue-600); text-align: center; }
#mobile-menu-login .sanco-profile-links a em:last-child { font-size: 11px; color: var(--ui-text-3); }
#mobile-menu-login .sanco-profile-links a:active { background: var(--ui-bg); }
#mobile-menu-login .sanco-profile-links a.is-admin { color: var(--ui-blue-600) !important; font-weight: 600; }
#mobile-menu-login .sanco-profile-links a.is-danger,
#mobile-menu-login .sanco-profile-links a.is-danger em:first-child { color: #c2410c !important; }
#mobile-menu-login:has(.sanco-account-panel) { background: var(--ui-bg) !important; }
#mobile-menu-login:has(.sanco-account-panel) .account-login { background: transparent !important; }
/* ══ Home: search bar stays at the top while scrolling (phones/tablets) ══ */
.sanco-search-sentinel { height: 0; }
@media (max-width: 800px) {
    .layout-main .sanco-search-bar {
        position: sticky !important;
        top: calc(10px + env(safe-area-inset-top));
        /* Above page content, but under the category drawer (101) and overlays */
        z-index: 100;
        transition: box-shadow .2s var(--ui-ease);
    }
    /* While stuck: a band in the page colour behind the pill so products
       scrolling underneath don't show around its edges. */
    .layout-main .sanco-search-bar.is-stuck {
        box-shadow: 0 0 0 10px var(--ui-bg), 0 -20px 0 10px var(--ui-bg), 0 14px 26px rgba(15, 31, 54, .18);
    }
}
/* ══ Home, phone layout (app style) ═════════════════════════════════════
   Compact photo hero with a centred logo, the search pill overlapping it,
   one card holding the five features, small uppercase section labels and
   full-width category cards. Tablets and desktop keep the larger layout. */
.sanco-m-only { display: none !important; }
.sanco-hero2-tagline { margin: 0; }

@media (max-width: 640px) {
    .sanco-home .sanco-m-only { display: inline !important; }
    .sanco-home p.sanco-m-only { display: block !important; }
    .sanco-home .sanco-d-only { display: none !important; }

    /* Hero: the banner photo fills the whole block behind the copy */
    .sanco-home .sanco-hero2-inner {
        position: relative;
        display: block;
        min-height: 238px;
        padding: 14px 18px 50px;
    }

    .sanco-home .sanco-hero2-media {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        border-radius: 0;
        box-shadow: none;
    }

    .sanco-home .sanco-hero2-media::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(4, 16, 36, .7) 0%, rgba(4, 16, 36, 0) 34%),
            linear-gradient(90deg, rgba(4, 16, 36, .94) 0%, rgba(4, 16, 36, .78) 42%, rgba(4, 16, 36, .12) 100%);
    }

    .sanco-home .sanco-hero2-copy { position: relative; z-index: 1; }

    .sanco-home .sanco-hero2-logo { display: flex !important; justify-content: center; }
    .sanco-home .sanco-hero2-logo img { height: 34px; margin: 0 auto 22px; }

    .sanco-home .sanco-eyebrow,
    .sanco-home .sanco-hero2-text,
    .sanco-home .sanco-hero2-actions { display: none !important; }

    .layout-main .sanco-home .sanco-hero2-title {
        margin: 0 0 8px;
        font-size: 30px;
        line-height: 1.12;
    }

    .layout-main .sanco-home .sanco-hero2-tagline {
        font-size: 11.5px;
        font-weight: 500;
        letter-spacing: .01em;
        color: rgba(255, 255, 255, .82) !important;
    }

    /* Features: one white card, five columns */
    .layout-main .sanco-home .sanco-feature-strip {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        margin: 0 14px 22px !important;
        padding: 12px 4px !important;
        background: var(--ui-surface);
        border: 1px solid var(--ui-border);
        border-radius: 16px;
        box-shadow: var(--ui-shadow);
    }

    .layout-main .sanco-home .sanco-feature-item,
    .layout-main .sanco-home .sanco-feature-item:last-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        grid-column: auto;
        padding: 0;
        background: none;
        border: 0;
        text-align: center;
    }

    .layout-main .sanco-home .sanco-feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 16px;
    }

    .layout-main .sanco-home .sanco-feature-label {
        font-size: 10.5px !important;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* Section labels: small uppercase */
    .layout-main .sanco-home .sanco-section-title,
    .layout-main .sanco-home .index-products-title.sanco-section-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: .06em !important;
        text-transform: uppercase !important;
        line-height: 1.2;
    }

    .layout-main .sanco-home .sanco-search-filter { background: var(--ui-green-500); }

    .layout-main .sanco-home .sanco-section-title span { color: inherit !important; }

    .layout-main .sanco-home .sanco-brands { margin-bottom: 22px; }
    .layout-main .sanco-home .sanco-brands-head { margin-bottom: 10px; }
    .layout-main .sanco-home .sanco-brands-viewall { font-size: 13px; }
    .layout-main .sanco-home .sanco-brand-card { min-height: 62px; padding: 8px 10px; }
    .layout-main .sanco-home .sanco-brand-card img { max-height: 44px; }

    .sanco-home .sanco-section { padding-top: 0 !important; }
    .sanco-home .sanco-section-head { margin-bottom: 10px; }

    /* Categories: full-width image cards */
    .sanco-home .sanco-cat-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .sanco-home .sanco-cat-card { border-radius: 16px; }
    .sanco-home .sanco-cat-img { aspect-ratio: 16 / 10; }

    .sanco-home .sanco-cat-body {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
    }

    .sanco-home .sanco-cat-name { font-size: 15px; }
    .sanco-home .sanco-cat-go { font-size: 13px; }
}
/* ══ Buy again ═════════════════════════════════════════════════════════ */
.sanco-buy-again.is-busy { opacity: .6; pointer-events: none; }

/* Home: products from recent orders */
.sanco-buyagain { margin-bottom: 26px; }
.sanco-buyagain .sanco-brands-head { margin-bottom: 12px; }
.sanco-buyagain-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(148px, 168px);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.sanco-buyagain-list::-webkit-scrollbar { display: none; }
.sanco-buyagain-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    scroll-snap-align: start;
}
.sanco-buyagain-img {
    display: block;
    aspect-ratio: 1;
    margin-bottom: 6px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ui-blue-50);
}
.sanco-buyagain-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.layout-main a.sanco-buyagain-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ui-text) !important;
    text-decoration: none;
}
.layout-main .sanco-buyagain-price { font-size: 15px; font-weight: 700; color: var(--ui-text) !important; }
.layout-main .sanco-buyagain-last { font-size: 11.5px; color: var(--ui-text-3) !important; }
.layout-main a.sanco-buyagain-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--ui-green-500);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.layout-main a.sanco-buyagain-add:hover { background: var(--ui-green-600); }
.layout-main .sanco-buyagain-add em { font-size: 13px; color: inherit !important; }

/* Order history: the card is a stretched link with "Buy again" above it */
.sanco-order-card { position: relative; }
.sanco-order-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sanco-order-actions {
    grid-area: go;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.layout-main a.sanco-order-again {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--ui-green-500);
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--ui-green-600) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.layout-main a.sanco-order-again:hover { background: var(--ui-green-50); }
.sanco-order-again em { font-size: 12px; }
@media (min-width: 801px) {
    .sanco-order-actions { justify-self: end; }
}

/* Order detail */
.layout-main a.sanco-buy-again-line {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 3px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-blue-600) !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.layout-main a.sanco-buy-again-line:hover { border-color: var(--ui-blue-600); }
.sanco-buy-again-line em { font-size: 11px; }
.layout-main a.sanco-buy-again-all { display: flex; justify-content: center; width: 100%; margin-top: 18px; }
.sanco-buy-again-note { margin: 8px 0 0; font-size: 12px; text-align: center; color: var(--ui-text-3) !important; }
/* The bottom tab bar now stays on screen while scrolling, so the end of the
   footer needs room to scroll clear of it (bar 56px + 10px gap + breathing room). */
@media (max-width: 1023px) {
    .layout-footer .footer-bottom { padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
}