:root {
    --green: #168236;
    --green-dark: #0d6327;
    --yellow: #ffd43b;
    --ink: #171717;
    --muted: #6d7280;
    --line: #e8e8e8;
    --soft: #f7f8fa;
    --danger: #f43f5e;
}

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    background: #fff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

iconify-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -0.125em;
}

.store-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    min-height: 96px;
    padding: 0 max(24px, calc((100vw - 88rem) / 2));
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid #d7ded8;
    backdrop-filter: blur(16px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    color: var(--green);
}

.brand img {
    width: 120px;
    max-height: 74px;
    object-fit: contain;
}

.brand span {
    display: block;
}

.store-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.15vw, 18px);
    min-width: 0;
}

.store-nav > a,
.nav-mega-trigger,
.nav-more-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 96px;
    max-width: 132px;
    padding: 0;
    overflow: hidden;
    color: #272727;
    background: transparent;
    border: 0;
    font-size: clamp(12px, .92vw, 15px);
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: nowrap;
}

.store-nav > a.active,
.store-nav > a:hover,
.nav-mega-item:hover .nav-mega-trigger,
.nav-mega-trigger:focus-visible,
.nav-more-item:hover .nav-more-trigger,
.nav-more-trigger:focus-visible {
    color: var(--green);
}

.store-nav > a.active::after,
.store-nav > a:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 23px;
    height: 3px;
    background: var(--green);
}

.nav-mega-item {
    position: static;
}

.nav-more-item {
    position: relative;
}

.nav-more-menu {
    position: absolute;
    top: calc(100% - 14px);
    right: 0;
    z-index: 40;
    display: grid;
    width: min(320px, calc(100vw - 32px));
    max-height: min(70vh, 520px);
    padding: 10px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dfe6df;
    border-radius: 8px;
    box-shadow: 0 24px 56px rgba(18, 38, 63, .16);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}

.nav-more-item:hover .nav-more-menu,
.nav-more-item:focus-within .nav-more-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-more-menu a {
    display: block;
    padding: 12px 14px;
    color: #1f2937;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: capitalize;
}

.nav-more-menu a:hover {
    color: var(--green);
    background: #eef8f1;
}

.mega-menu {
    position: absolute;
    left: max(24px, calc((100vw - 88rem) / 2));
    right: max(24px, calc((100vw - 88rem) / 2));
    top: calc(100% - 1px);
    z-index: 35;
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(0, 2.15fr) minmax(240px, .85fr);
    gap: 24px;
    max-height: min(78vh, 720px);
    padding: 28px;
    overflow: hidden;
    background: rgba(255, 255, 255, .98);
    border: 1px solid #dfe6df;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 26px 60px rgba(18, 38, 63, .18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}

.nav-mega-item:hover .mega-menu,
.nav-mega-item:focus-within .mega-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mega-main-list,
.mega-category-columns {
    min-width: 0;
    max-height: 620px;
    overflow-y: auto;
    padding-right: 12px;
    border-right: 1px solid #e5e9e5;
}

.mega-promo-column {
    min-width: 0;
}

.mega-main-list {
    display: grid;
    align-content: start;
    gap: 8px;
}

.mega-main-list a,
.mega-direct-link,
.mega-view-all {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 9px 12px;
    color: #1f2937;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    cursor: pointer;
    text-transform: capitalize;
}

.mega-main-list a.active,
.mega-main-list a:hover,
.mega-view-all,
.mega-direct-link:hover {
    color: var(--green);
    background: linear-gradient(90deg, #eef8f1, #f7fbf8);
}

.mega-main-list a > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    background: #eef8f1;
    border-radius: 8px;
}

.mega-main-list a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega-main-list a i,
.mega-promo i {
    display: grid;
    place-items: center;
    color: var(--green);
    font-style: normal;
    font-weight: 900;
}

.mega-main-list a iconify-icon {
    justify-self: end;
    color: currentColor;
    font-size: 22px;
}

.mega-view-all,
.mega-direct-link {
    grid-template-columns: 32px minmax(0, 1fr);
    margin-top: 8px;
    text-align: center;
}

.mega-panel,
.mega-promo {
    display: none;
}

.mega-panel.active,
.mega-promo.active {
    display: grid;
    gap: 8px;
}

.mega-panel.active {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    align-content: start;
    gap: 28px 42px;
}

.mega-subcategory-group {
    min-width: 0;
}

.mega-subcategory-group h3 {
    margin: 0 0 16px;
    color: #111827;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: capitalize;
}

.mega-subcategory-group h3 a {
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--green);
}

.mega-subcategory-group div {
    display: grid;
    gap: 0;
}

.mega-subcategory-group div a {
    display: block;
    padding: 11px 0;
    color: #374151;
    border-bottom: 1px solid #edf0f2;
    font-size: 15px;
    line-height: 1.25;
    text-transform: capitalize;
}

.mega-subcategory-group a:hover {
    color: var(--green);
}

.mega-promo {
    align-content: start;
    min-height: 420px;
    padding: 28px;
    overflow: hidden;
    background: linear-gradient(145deg, #f1f8f1, #fbfdfb);
    border-radius: 14px;
}

.mega-promo strong {
    display: block;
    max-width: 210px;
    color: #15212b;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: 0;
}

.mega-promo span {
    display: block;
    max-width: 210px;
    margin: 14px 0 24px;
    color: #5f6673;
    font-size: 15px;
    line-height: 1.45;
}

.mega-promo img,
.mega-promo i {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-top: auto;
    object-fit: contain;
}

.mega-promo i {
    background: #e7f5eb;
    border-radius: 14px;
    font-size: 54px;
}

.mega-empty {
    grid-column: 1 / -1;
    padding: 20px;
    color: var(--muted);
}

.header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.header-search {
    position: relative;
    width: clamp(210px, 18vw, 310px);
}

.header-search input {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 14px;
    color: #111827;
    background: #fff;
    border: 1px solid #dce3dc;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    outline: 0;
}

.header-search input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(22, 130, 54, .1);
}

.header-search > iconify-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    color: #30343b;
    font-size: 24px;
    transform: translateY(-50%);
    pointer-events: none;
}

.header-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 45;
    display: grid;
    width: min(420px, calc(100vw - 28px));
    max-height: min(70vh, 430px);
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid #dfe6df;
    border-radius: 8px;
    box-shadow: 0 24px 52px rgba(18, 38, 63, .18);
}

.header-search-results[hidden] {
    display: none;
}

.header-search-results a,
.header-search-empty {
    display: grid;
    gap: 3px;
    padding: 11px 12px;
    border-bottom: 1px solid #edf0f2;
}

.header-search-results a:last-child {
    border-bottom: 0;
}

.header-search-results a:hover {
    color: var(--green);
    background: #f2faf4;
    border-radius: 6px;
}

.header-search-results span {
    color: var(--green);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.header-search-results strong {
    color: #111827;
    font-size: 14px;
}

.header-search-results small,
.header-search-empty {
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.mobile-menu-button {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background: var(--green);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.mobile-menu-button iconify-icon {
    font-size: 26px;
}

.header-icon-button,
.header-cart-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #333;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.header-icon-button iconify-icon,
.header-cart-button iconify-icon {
    font-size: 29px;
}

.header-cart-button span {
    position: absolute;
    top: -7px;
    right: -6px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    color: #fff;
    background: #fb3f4f;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.call-button,
.quote-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 126px;
    height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.call-button {
    color: #176f37;
    background: #fff;
    border: 2px solid #176f37;
}

.quote-button {
    color: #fff;
    background: #1e7a45;
    box-shadow: 0 10px 22px rgba(22, 130, 54, .2);
}

.call-button iconify-icon {
    font-size: 22px;
}

.mobile-menu-drawer {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
}

.mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    border: 0;
    opacity: 0;
    transition: opacity .2s ease;
}

.mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    align-content: start;
    gap: 18px;
    width: min(360px, 86vw);
    height: 100%;
    padding: 18px;
    overflow-y: auto;
    background: #fff;
    box-shadow: -24px 0 56px rgba(15, 23, 42, .18);
    transform: translateX(100%);
    transition: transform .22s ease;
}

.mobile-menu-drawer.open {
    pointer-events: auto;
}

.mobile-menu-drawer.open .mobile-menu-backdrop {
    opacity: 1;
}

.mobile-menu-drawer.open .mobile-menu-panel {
    transform: translateX(0);
}

.mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-menu-head .brand img {
    width: 82px;
    max-height: 54px;
}

.mobile-menu-links {
    display: grid;
    gap: 0;
}

.mobile-menu-links a {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 13px 2px;
    color: #1f2937;
    background: transparent;
    border-bottom: 1px solid #e5e7eb;
    font-size: 15px;
    font-weight: 900;
    text-transform: capitalize;
}

.mobile-menu-links a:hover {
    color: var(--green);
}

.store-shell {
    width: min(80rem, calc(100% - 32px));
    margin: 18px auto 56px;
}

.home-shell {
    margin-top: 0;
}

.hero-carousel {
    position: relative;
    width: 100vw;
    aspect-ratio: 1920 / 550;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    border-radius: 0;
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
}

.hero-carousel.dragging {
    cursor: grabbing;
}

.hero-banner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 34px max(24px, calc((100vw - 80rem) / 2));
    color: #fff;
    opacity: 0;
    pointer-events: none;
    background: #f5f8f2;
    transition: opacity .45s ease;
}

.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgba(20, 72, 32, .68) 0%, rgba(20, 72, 32, .34) 38%, rgba(20, 72, 32, 0) 68%);
    pointer-events: none;
}

.hero-banner-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.hero-banner-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-banner.active {
    opacity: 1;
    pointer-events: auto;
}

.carousel-dots {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 4;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.carousel-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    background: rgba(255, 255, 255, .54);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 50%;
    cursor: pointer;
    transition: width .2s ease, background .2s ease, opacity .2s ease;
}

.carousel-dots button.active {
    width: 30px;
    background: #fff;
    border-radius: 999px;
}

.hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 54px;
    height: 92px;
    color: #111;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(229, 231, 235, .92);
    border-radius: 0 10px 10px 0;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .13);
    transform: translateY(-50%);
    cursor: pointer;
    touch-action: manipulation;
}

.hero-prev {
    left: 0;
}

.hero-next {
    right: 0;
    border-radius: 10px 0 0 10px;
}

.hero-arrow iconify-icon {
    font-size: 28px;
}

.hero-banner-copy {
    position: relative;
    z-index: 3;
    pointer-events: none;
}

.hero-banner h1 {
    margin: 0 0 12px;
    max-width: 850px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.06;
    letter-spacing: 0;
}

.hero-banner p {
    max-width: 780px;
    margin: 0 0 32px;
    font-size: clamp(17px, 2.2vw, 26px);
    line-height: 1.3;
}

.promo button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    color: #262626;
    background: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 800;
    font-size: 16px;
}

.promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 30px 0;
}

.small-banner-carousel {
    position: relative;
    margin: 30px 0;
}

.small-banner-track {
    display: grid;
    grid-auto-columns: calc((100% - 24px) / 2);
    grid-auto-flow: column;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
}

.small-banner-track.dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.small-banner-track::-webkit-scrollbar,
.home-product-rail::-webkit-scrollbar {
    display: none;
}

.small-banner-card {
    display: block;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    background: #edf5ff;
    border-radius: 14px;
    scroll-snap-align: start;
}

.small-banner-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.rail-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #111;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .13);
    transform: translateY(-50%);
}

.rail-prev {
    left: -12px;
}

.rail-next {
    right: -12px;
}

@media (min-width: 761px) {
    .small-banner-carousel.has-two-banners .rail-arrow {
        display: none;
    }
}

@media (max-width: 1024px) {
    .hero-arrow,
    .rail-arrow {
        display: none;
    }

    .carousel-dots {
        bottom: 12px;
        gap: 7px;
    }

    .carousel-dots button {
        width: 7px;
        height: 7px;
        border-width: 0;
    }

    .carousel-dots button.active {
        width: 24px;
    }

    .small-banner-dots {
        display: flex;
    }

    .small-banner-track {
        grid-auto-columns: 100%;
    }
}

.rail-arrow iconify-icon {
    font-size: 26px;
}

.small-banner-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.small-banner-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    background: #cfd5dc;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.small-banner-dots button.active {
    width: 26px;
    background: var(--green);
}

.promo {
    min-height: 170px;
    padding: 24px 22px;
    border-radius: 14px;
    overflow: hidden;
}

.promo h2 {
    max-width: 290px;
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: 0;
}

.promo p {
    margin: 0 0 28px;
    color: rgba(0, 0, 0, .72);
    font-size: 16px;
}

.promo button {
    min-height: 38px;
    font-size: 14px;
}

.promo-teal {
    color: #fff;
    background: linear-gradient(120deg, #08bdb5, #1ed2bd);
}

.promo-yellow {
    background: linear-gradient(120deg, #ffd230, #ffe16e);
}

.promo-blue {
    background: linear-gradient(120deg, #dfeaf6, #f7fbff);
}

.home-product-section {
    margin-top: 36px;
    overflow: hidden;
}

.home-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.home-section-heading h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: 0;
}

.home-section-heading p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.45;
}

.home-section-heading a {
    color: var(--green);
    font-size: 22px;
    font-weight: 900;
}

.home-product-rail {
    display: grid;
    grid-auto-columns: 204px;
    grid-auto-flow: column;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.home-product-rail .product-card {
    min-height: 0;
    scroll-snap-align: start;
}

.home-section-empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    width: min(420px, calc(100vw - 48px));
    min-height: 180px;
    padding: 24px;
    color: #6b7280;
    text-align: center;
    background: #fff;
    border: 1px dashed #d8dde6;
    border-radius: 8px;
}

.home-section-empty iconify-icon {
    color: var(--green);
    font-size: 40px;
}

.home-section-empty strong {
    color: #111827;
}

.categories-section {
    margin: 34px 0 24px;
}

.categories-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.categories-heading h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: 0;
}

.categories-heading p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
}

.category-slider-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-see-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    color: var(--green);
    background: #fff;
    border: 1px solid rgba(22, 130, 54, .38);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(20, 40, 60, .08);
    font-size: 14px;
    font-weight: 900;
    text-transform: capitalize;
}

.category-slider-actions button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #111;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(20, 40, 60, .12);
    cursor: pointer;
}

.category-slider-actions iconify-icon {
    font-size: 24px;
}

.category-slider {
    overflow: visible;
}

.category-slider-track {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-top: 10px;
    padding-bottom: 8px;
}

.category-slider-track::-webkit-scrollbar {
    display: none;
}

.category-slider-track-mobile {
    display: none;
}

.category-grid {
    display: grid;
    align-items: start;
    flex: 0 0 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 16px;
    scroll-snap-align: start;
}

.category-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
    background: #fff;
    border: 1.5px solid #d0edda;
    border-radius: 16px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.category-card:hover {
    border-color: var(--green);
    box-shadow: 0 6px 20px rgba(22, 130, 54, .15);
    transform: translateY(-3px);
}

.category-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(145deg, #f0faf3 0%, #e8f5ec 100%);
}

.category-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

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

.category-thumb span,
.mini-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    background: transparent;
    font-weight: 900;
    width: 100%;
    height: 100%;
    font-size: 48px;
    opacity: .4;
}

.category-card h3 {
    margin: 0;
    padding: 11px 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-transform: capitalize;
    color: var(--ink);
    background: #fff;
    border-top: 1px solid #e8f5ec;
}

.category-card:hover h3 {
    color: var(--green-dark);
}

.category-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
}

.compact-header {
    grid-template-columns: 170px minmax(280px, 1fr) 76px 130px;
}

.listing-shell {
    width: min(80rem, calc(100% - 32px));
    margin: 0 auto 52px;
}

.listing-panel {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 1px 8px rgba(15, 23, 42, .08);
}

.listing-title {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
}

.listing-title h1 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: capitalize;
}

.listing-body {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 620px;
}

.listing-body.no-sidebars {
    grid-template-columns: minmax(0, 1fr);
}

.listing-body.has-leaf-sidebar {
    grid-template-columns: 92px 92px minmax(0, 1fr);
}

.listing-body--has-filter {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
}

/* Mobile filter bar — hidden on desktop */
.lsf-mobile-bar { display: none; }
.lsf-drawer-overlay, .lsf-drawer { display: none; }

/* Filter sidebar */
.listing-sidebar--filter {
    max-height: none;
    overflow-y: visible;
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 0;
}

.lsf-section {
    border-bottom: 1px solid var(--line);
    padding: 0;
}

.lsf-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink);
}

.lsf-heading iconify-icon {
    font-size: 18px;
    color: var(--muted);
}

.lsf-list {
    list-style: none;
    margin: 0;
    padding: 0 0 12px;
}

.lsf-list.collapsed {
    display: none;
}

.lsf-item {
    display: block;
    width: 100%;
    padding: 9px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    color: #444;
}

.lsf-item:hover,
.lsf-item.active {
    color: var(--green);
    font-weight: 600;
}

/* Category chips inside filter sidebar */
.lsf-cat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 12px 16px;
}

.lsf-cat-chip {
    display: inline-block;
    padding: 6px 12px;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    font-size: 13px;
    color: #444;
    text-decoration: none;
    background: none;
    cursor: pointer;
    transition: color .15s;
    white-space: nowrap;
}

.lsf-cat-chip:hover {
    color: var(--green);
}

.lsf-cat-chip.selected {
    border-color: var(--green);
    color: var(--green);
    font-weight: 600;
}

/* Reset icon-nav anchor styles inside filter sidebar */
.listing-sidebar--filter a,
.listing-sidebar--filter a:hover,
.listing-sidebar--filter a.active {
    display: inline-block !important;
    min-height: unset !important;
    height: auto !important;
    padding: 0 !important;
    justify-items: unset !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    text-align: left !important;
    position: static !important;
    background: none !important;
    font-weight: inherit !important;
}

.listing-sidebar--filter a::after,
.listing-sidebar--filter a::before {
    display: none !important;
}

.listing-sidebar--filter .lsf-cat-chip {
    display: inline-block !important;
    padding: 6px 12px !important;
    border: 1.5px solid var(--line) !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    color: #444 !important;
    background: none !important;
}

.listing-sidebar--filter .lsf-cat-chip:hover {
    color: var(--green) !important;
    background: none !important;
    border-color: var(--line) !important;
}

.listing-sidebar--filter .lsf-cat-chip.selected {
    border-color: var(--green) !important;
    color: var(--green) !important;
    font-weight: 600 !important;
}

.listing-sidebar {
    max-height: 640px;
    overflow-y: auto;
    background: #fbfbfb;
    border-right: 1px solid var(--line);
}

.leaf-sidebar {
    background: #fff;
}

.listing-sidebar a {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 86px;
    padding: 10px 8px;
    color: #5f6368;
    text-align: center;
    font-size: 13px;
    line-height: 1.15;
    text-transform: capitalize;
}

.listing-sidebar a.active {
    color: var(--ink);
    background: #fff;
    font-weight: 800;
}

.listing-sidebar a.active::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 0;
    width: 4px;
    height: calc(100% - 16px);
    background: var(--green);
    border-radius: 4px 0 0 4px;
}

.listing-sidebar span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--green);
    background: #f2f7f3;
    border-radius: 8px;
}

.listing-sidebar iconify-icon {
    font-size: 28px;
}

.listing-sidebar img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.sidebar-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 14px 8px;
    color: #6f6f6f;
    text-align: center;
    font-size: 12px;
    line-height: 1.25;
}

.sidebar-empty span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--green);
    background: #f2f7f3;
    border-radius: 8px;
}

.listing-content {
    max-height: 640px;
    overflow-y: auto;
    padding: 10px;
    background: #f7f7f7;
}

.category-section {
    margin-bottom: 10px;
}

.section-heading {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 4px;
}

.section-heading h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0;
}

.listing-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px;
}

.listing-category-card {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 150px;
    padding: 14px;
    text-align: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.listing-category-card span {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    color: var(--green);
    background: #f2f7f3;
    border-radius: 12px;
}

.listing-category-card iconify-icon {
    font-size: 42px;
}

.listing-category-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.listing-category-card strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.all-categories-panel {
    border-radius: 12px;
    overflow: hidden;
}

.categories-page-title {
    min-height: auto;
    padding: 22px;
}

.categories-page-title h1 {
    font-size: 28px;
}

.categories-page-title p {
    margin: 8px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.all-categories-content {
    max-height: none;
    padding: 18px;
}

.all-categories-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.all-categories-grid .listing-category-card {
    min-height: 220px;
    padding: 24px 16px;
    border-radius: 14px;
    border: 2px solid #c3e8cc;
    background: linear-gradient(160deg, #f3fbf5 0%, #ffffff 100%);
    gap: 14px;
    transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.all-categories-grid .listing-category-card:hover {
    box-shadow: 0 8px 28px rgba(22, 130, 54, .15);
    transform: translateY(-4px);
    background: linear-gradient(160deg, #e6f7ec 0%, #f8fff9 100%);
    border-color: var(--green);
}

.all-categories-grid .listing-category-card span {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #c3e8cc;
    box-shadow: 0 2px 10px rgba(22, 130, 54, .10);
}

.all-categories-grid .listing-category-card iconify-icon {
    font-size: 60px;
    color: var(--green);
}

.all-categories-grid .listing-category-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.all-categories-grid .listing-category-card strong {
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--green-dark);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.product-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto auto;
    align-content: start;
    min-height: 0;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.product-image {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    height: auto;
    margin-bottom: 10px;
    overflow: hidden;
    color: var(--green);
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-image iconify-icon {
    font-size: 88px;
}

.discount-badge {
    position: absolute;
    top: 0;
    left: 18px;
    width: 38px;
    padding: 5px 4px 8px;
    color: #fff;
    background: #2563eb;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.delivery-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 17px;
    padding: 0 7px;
    color: #7a5100;
    background: #f8eedc;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 900;
}

.product-card h2 {
    display: -webkit-box;
    position: relative;
    z-index: 1;
    min-height: 0;
    margin: 0 0 6px;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.22;
    letter-spacing: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-transform: capitalize;
}

.product-card p {
    margin: 0 0 10px;
    color: #6f6f6f;
    font-size: 14px;
}

.product-card-stock {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 10px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.product-card-stock.low {
    color: #b45309;
    background: #fff4df;
}

.product-card-stock.out {
    color: #e33145;
    background: #ffe6ed;
}

.product-buy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
}

.product-buy-row strong {
    font-size: 15px;
}

.product-card-prices {
    display: grid;
    gap: 5px;
}

.product-card-cart-control {
    display: flex;
    justify-content: flex-end;
    min-width: 82px;
}

.product-buy-row button {
    min-width: 92px;
    height: 36px;
    color: var(--green);
    background: #f8fff8;
    border: 1px solid var(--green);
    border-radius: 7px;
    font-size: 15px;
    font-weight: 900;
}

.product-buy-row button:disabled {
    cursor: not-allowed;
    color: #e33145;
    background: #fff1f4;
    border-color: #ffc8d2;
}

.product-card-add[hidden],
.product-card-stepper[hidden] {
    display: none;
}

.product-card-stepper {
    display: grid;
    grid-template-columns: 28px 30px 28px;
    align-items: center;
    height: 36px;
    overflow: hidden;
    color: var(--green);
    background: #f8fff8;
    border: 1px solid var(--green);
    border-radius: 7px;
    font-size: 15px;
    font-weight: 900;
}

.product-card-stepper button {
    min-width: 0;
    width: 28px;
    height: 34px;
    padding: 0;
    color: var(--green);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 20px;
    line-height: 1;
}

.product-card-stepper span {
    text-align: center;
}

.product-card del {
    color: #777;
    font-size: 13px;
}

.empty-products {
    display: grid;
    place-items: center;
    grid-column: 1 / -1;
    gap: 14px;
    min-height: 320px;
    padding: 48px 24px;
    color: #6b7280;
    text-align: center;
    background: #fff;
}

.empty-products-icon {
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    color: var(--green);
    background: #fff;
    border: 2px dashed #d8dde6;
    border-radius: 50%;
}

.empty-products iconify-icon {
    color: var(--green);
    font-size: 68px;
}

.empty-products strong {
    color: #111827;
    font-size: 22px;
    line-height: 1.25;
}

.empty-products > span:not(.empty-products-icon) {
    max-width: 560px;
    font-size: 16px;
    line-height: 1.45;
}

.product-shell {
    width: min(80rem, calc(100% - 32px));
    margin: 28px auto 56px;
    overflow-x: hidden;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
    background: #fff;
    min-width: 0;
}

.product-media {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    height: 100%;
    min-height: 100%;
    padding: 18px;
    background: #fff;
    border: 1px solid #eadfd2;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(88, 62, 35, .06);
    overflow: hidden;
    min-width: 0;
}

.product-media.no-thumbs {
    grid-template-columns: minmax(0, 1fr);
}

.product-main-image {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 640px;
    color: var(--green);
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
}

.product-main-image img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.magnifier-lens,
.magnifier-preview {
    display: none;
    pointer-events: none;
}

.product-main-image.is-magnifying .magnifier-lens,
.product-main-image.is-magnifying .magnifier-preview {
    display: block;
}

.magnifier-lens {
    position: absolute;
    z-index: 3;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, .26);
    border: 1px solid rgba(22, 130, 54, .38);
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
    transform: translate(-50%, -50%);
}

.magnifier-preview {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-repeat: no-repeat;
    border-radius: 8px;
}

.product-main-image iconify-icon {
    font-size: 132px;
}

.product-thumbs {
    position: relative;
    display: grid;
    grid-auto-rows: 82px;
    align-content: start;
    justify-content: stretch;
    gap: 12px;
    order: -1;
    max-height: 100%;
    overflow-y: auto;
    padding: 2px;
    background: transparent;
    scrollbar-width: thin;
}

.product-thumbs button {
    display: grid;
    place-items: center;
    width: 78px;
    height: 82px;
    padding: 7px;
    flex: 0 0 auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    cursor: pointer;
}

.product-thumbs button.active {
    border-color: var(--green);
    box-shadow: inset 0 0 0 1px var(--green), 0 8px 18px rgba(22, 130, 54, .14);
}

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

.product-summary {
    position: relative;
    padding: 12px 0 0;
    min-width: 0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--muted, #6b7280);
    text-transform: capitalize;
    padding: 20px;
}

.breadcrumb a {
    color: var(--ink, #111827);
    text-decoration: none;
    transition: color .15s;
}

.breadcrumb a:hover {
    color: var(--green, #168236);
}

.breadcrumb iconify-icon {
    font-size: 16px;
    color: var(--muted, #9ca3af);
    flex-shrink: 0;
}

.breadcrumb span[aria-current="page"] {
    color: var(--green, #168236);
    font-weight: 600;
}

.product-summary h1 {
    margin: 0 0 14px;
    color: #171717;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.08;
    letter-spacing: 0;
    text-transform: capitalize;
}

.product-short-description {
    max-width: 760px;
    margin: 0 0 14px;
    color: #3f3f46;
    font-size: 16px;
    line-height: 1.45;
}

.product-availability {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    color: #1f7a2e;
    background: #ecf8e9;
    border: 1px solid #cbeec2;
    border-radius: 999px;
    font-weight: 800;
}

.stock-pill.low {
    color: #b45309;
    background: #fff4df;
    border-color: #fed7aa;
}

.stock-pill.low i {
    background: #f59e0b;
}

.stock-pill.out {
    color: #e33145;
    background: #ffe6ed;
    border-color: #ffc8d2;
}

.stock-pill.out i {
    background: #e33145;
}

.stock-pill i {
    width: 10px;
    height: 10px;
    background: #269233;
    border-radius: 50%;
}

.product-summary h2 {
    margin: 0 0 12px;
    font-size: 18px;
    letter-spacing: 0;
}

.unit-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
    min-width: 0;
}

.unit-options button {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 12px 12px 12px 14px;
    text-align: left;
    background: #fff;
    border: 1px solid #cfd7ce;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 800;
}

.unit-options button.active {
    border-color: var(--green);
    box-shadow: inset 0 0 0 1px var(--green), 0 8px 22px rgba(22, 130, 54, .1);
}

.unit-options button.out-of-stock {
    color: #667085;
    background: #fafafa;
    border-color: #e5e7eb;
}

.unit-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--green);
    background: #edf8e8;
    border: 1px solid #d7efcf;
    border-radius: 50%;
}

.unit-icon iconify-icon {
    font-size: 21px;
}

.unit-stock-copy {
    display: block;
    margin-top: 5px;
    color: #b45309;
    font-size: 12px;
    font-weight: 900;
}

.unit-options button.out-of-stock .unit-stock-copy {
    color: #e33145;
}

.unit-copy {
    display: block;
    font-size: 17px;
}

.unit-option-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.unit-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.unit-options strong {
    font-size: 16px;
}

.unit-options del {
    color: #8c8c8c;
    font-size: 14px;
    font-weight: 700;
}

.unit-check {
    display: none;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #fff;
    background: var(--green);
    border-radius: 50%;
}

.unit-options button.active .unit-check {
    display: grid;
}

.purchase-card {
    display: grid;
    gap: 18px;
    padding: 20px;
    background: #fff;
    border: 1px solid #eadfd2;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(88, 62, 35, .06);
    min-width: 0;
}

.cart-state-message {
    display: none;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 12px;
    color: #1f7a2e;
    background: #ecf8e9;
    border: 1px solid #cbeec2;
    border-radius: 999px;
    font-weight: 900;
}

.cart-state-message iconify-icon {
    font-size: 20px;
}

.purchase-card.in-cart .cart-state-message {
    display: inline-flex;
}

.purchase-card.in-cart .add-cart-main {
    display: none;
}

.purchase-card.in-cart .purchase-actions {
    grid-template-columns: minmax(220px, 320px) minmax(220px, 1fr);
}

.selected-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.selected-price strong {
    color: #171717;
    font-size: 32px;
    line-height: 1;
}

.selected-price del {
    color: #6f6f6f;
    font-weight: 800;
}

.selected-price em {
    padding: 7px 12px;
    color: #1f7a2e;
    background: #e9f8df;
    border-radius: 7px;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
}

.selected-price em[hidden],
.selected-price del[hidden] {
    display: none;
}

.selected-price small {
    flex-basis: 100%;
    color: #6f6f6f;
    font-size: 14px;
}

.purchase-actions {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.2fr);
    gap: 18px;
    align-items: end;
    min-width: 0;
}

.quantity-box {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #eadfd2;
    border-radius: 10px;
    min-width: 0;
}

.quantity-box span {
    font-size: 14px;
    font-weight: 700;
}

.quantity-box div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    height: 44px;
    border: 1px solid #eadfd2;
    border-radius: 8px;
}

.quantity-box button {
    height: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 22px;
}

.quantity-box strong {
    text-align: center;
    border-inline: 1px solid #eadfd2;
}

.checkout-buttons {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.add-cart-main,
.buy-now-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 900;
    min-width: 0;
}

.add-cart-main {
    color: #fff;
    background: linear-gradient(180deg, #239a23, #147a17);
    border: 0;
}

.buy-now-main {
    color: var(--green);
    background: #fff;
    border: 1px solid var(--green);
}

.buy-now-main:disabled,
.add-cart-main:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.product-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 18px;
    padding: 14px;
    background: #fff;
    border: 1px solid #eadfd2;
    border-radius: 12px;
}

.product-trust-strip article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
}

.product-trust-strip iconify-icon {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    padding: 9px;
    color: var(--green);
    background: #edf8e8;
    border-radius: 50%;
}

.product-trust-strip strong {
    font-size: 14px;
}

.product-trust-strip span {
    color: #6b7280;
    font-size: 12px;
}

.product-mini-banner {
    margin-top: 28px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eadfd2;
    border-radius: 12px;
}

.product-mini-banner img {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}

.product-details-copy {
    margin-top: 28px;
    padding: 30px 0 36px;
    background: #fff;
    border-top: 1px solid var(--line);
}

.product-details-copy h2 {
    margin: 0 0 20px;
    font-size: 22px;
    letter-spacing: 0;
}

.rich-content {
    max-width: 760px;
    color: #444;
    font-size: 15px;
    line-height: 1.7;
}

.product-details-copy .rich-content {
    width: 100%;
    max-width: none;
}

.product-details-copy .rich-content > * {
    width: 100% !important;
    max-width: none !important;
}

.related-product-section {
    margin-top: 10px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr min(520px, 100%);
    pointer-events: none;
    visibility: hidden;
}

.cart-drawer.open {
    pointer-events: auto;
    visibility: visible;
}

.cart-backdrop {
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(15, 23, 42, .28);
    border: 0;
    opacity: 0;
    transition: opacity .2s ease;
}

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

.cart-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    background: #fff;
    box-shadow: -18px 0 60px rgba(15, 23, 42, .16);
    transform: translateX(100%);
    transition: transform .24s ease;
}

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

.cart-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 86px;
    padding: 0 28px;
    border-bottom: 1px solid var(--line);
}

.cart-panel-header h2 {
    margin: 0;
    color: #163b20;
    font-size: 26px;
    line-height: 1.15;
}

.cart-panel-header button,
.cart-item > button {
    display: grid;
    place-items: center;
    padding: 0;
    color: #7a7a7a;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.cart-panel-header button {
    width: 42px;
    height: 42px;
    font-size: 34px;
}

.cart-items {
    display: grid;
    align-content: start;
    gap: 16px;
    overflow-y: auto;
    padding: 28px;
}

.cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 34px;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.cart-item img {
    width: 112px;
    height: 96px;
    object-fit: contain;
    background: #f7f8fa;
    border-radius: 9px;
}

.cart-item strong {
    display: -webkit-box;
    overflow: hidden;
    color: #163b20;
    font-size: 16px;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cart-item span,
.cart-item small,
.cart-item em {
    display: block;
    margin-top: 5px;
    color: #737373;
    font-style: normal;
    line-height: 1.25;
}

.cart-item b {
    display: block;
    margin-top: 8px;
    color: var(--green);
    font-size: 18px;
}

.cart-item > button {
    width: 34px;
    height: 34px;
    color: #b91c1c;
    background: #fff1f1;
    border: 1px solid #fecaca;
    border-radius: 50%;
    font-size: 22px;
}

.cart-empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    color: var(--muted);
    border: 1px dashed #d8dde6;
    border-radius: 12px;
}

.cart-summary {
    display: grid;
    gap: 14px;
    padding: 24px 28px 28px;
    border-top: 1px solid var(--line);
}

.cart-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #555;
}

.cart-summary .cart-total {
    padding-top: 14px;
    color: #163b20;
    border-top: 1px solid var(--line);
    font-size: 18px;
}

.cart-summary button,
.cart-summary a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    color: #163b20;
    background: #fff;
    border: 1px solid #163b20;
    border-radius: 8px;
    font-weight: 900;
}

.cart-summary a {
    color: #fff;
    background: #1f7a46;
    border-color: #1f7a46;
}

.checkout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: start;
    gap: 32px;
    width: min(80rem, calc(100% - 32px));
    margin: 32px auto 72px;
}

.checkout-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.checkout-title-row a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #111;
    font-size: 28px;
}

.checkout-title-row h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1.15;
}

.checkout-title-row span {
    color: #343434;
    font-size: 22px;
    font-weight: 500;
}

.checkout-items {
    display: grid;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px 10px 0 0;
}

.checkout-item {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) 150px 150px 36px;
    align-items: center;
    gap: 20px;
    min-height: 126px;
    padding: 18px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.checkout-item img {
    width: 112px;
    height: 90px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}

.checkout-item-copy strong,
.checkout-item-copy span,
.checkout-item-copy small {
    display: block;
}

.checkout-stock-alert {
    color: #e33145 !important;
    font-weight: 900 !important;
}

.checkout-item.is-out-of-stock {
    background: #fff8f9;
}

.checkout-item-copy strong {
    color: #171717;
    font-size: 19px;
    line-height: 1.25;
}

.checkout-item-copy span,
.checkout-item-copy small {
    margin-top: 6px;
    color: #70757d;
    font-size: 15px;
}

.checkout-item-price strong,
.checkout-item-price span {
    display: block;
}

.checkout-item-price strong {
    color: #171717;
    font-size: 20px;
}

.checkout-item-price span {
    margin-top: 6px;
    color: #70757d;
}

.checkout-qty-control {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    width: 132px;
    height: 42px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
}

.checkout-qty-control button {
    height: 100%;
    color: var(--green);
    background: transparent;
    border: 0;
    font-size: 24px;
    font-weight: 700;
}

.checkout-qty-control strong {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.checkout-remove {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #4b5563;
    background: transparent;
    border: 0;
    font-size: 24px;
}

.checkout-more-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 96px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 10px 10px;
}

.checkout-more-row > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #fff;
    background: var(--green);
    border-radius: 8px;
    font-size: 22px;
}

.checkout-more-row strong,
.checkout-more-row small {
    display: block;
}

.checkout-more-row strong {
    color: var(--green);
    font-size: 18px;
}

.checkout-more-row small {
    margin-top: 4px;
    color: #70757d;
}

.checkout-more-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 44px;
    color: var(--green);
    background: #fff;
    border: 1px solid rgba(22, 130, 54, .5);
    border-radius: 8px;
    font-weight: 800;
}

.checkout-summary-card {
    position: sticky;
    top: 96px;
    display: grid;
    align-content: start;
    gap: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}

.checkout-saving {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 20px;
    color: var(--green);
    background: #f1fbf3;
    border-bottom: 1px solid #dbeee0;
    font-weight: 800;
}

.checkout-saving[hidden] {
    display: none;
}

.checkout-saving iconify-icon {
    font-size: 24px;
}

.checkout-delivery-card,
.checkout-bill-card {
    padding: 22px 20px;
    border-bottom: 1px solid var(--line);
}

.checkout-delivery-card h2,
.checkout-bill-card h2 {
    margin: 0 0 12px;
    color: #171717;
    font-size: 20px;
}

.checkout-delivery-card p {
    margin: 0 0 14px;
    color: #555;
}

.checkout-delivery-card strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.checkout-bill-card {
    display: grid;
    gap: 14px;
}

.checkout-bill-card div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #333;
}

.checkout-bill-card [data-checkout-saving-row] {
    color: var(--green);
}

.checkout-bill-card .checkout-total {
    margin: 6px -20px -22px;
    padding: 18px 20px;
    color: #163b20;
    background: #fafafa;
    border-top: 1px solid var(--line);
    font-size: 22px;
}

.checkout-place-order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    margin: 22px 20px 18px;
    padding: 0 18px;
    color: #fff;
    background: linear-gradient(180deg, #239a23, #147a17);
    border: 0;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 900;
}

.checkout-place-order.disabled {
    pointer-events: none;
    opacity: .58;
    filter: grayscale(.25);
}

.checkout-payment-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px 22px;
    color: #555;
}

.payment-checkout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    gap: 28px;
    width: min(80rem, calc(100% - 32px));
    margin: 32px auto 72px;
}

.billing-card,
.payment-summary-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, .05);
}

.billing-card {
    display: grid;
    gap: 16px;
    padding: 26px;
}

.billing-card h1,
.payment-summary-card h2 {
    margin: 0 0 6px;
    color: #163b20;
}

.billing-card label {
    display: grid;
    gap: 8px;
    color: #435544;
    font-weight: 800;
}

.billing-card input,
.billing-card select {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    color: #222;
    background: #fff;
    border: 1px solid #dfe6e1;
    border-radius: 8px;
    outline: 0;
}

.billing-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.payment-type-box {
    display: grid;
    gap: 10px;
}

.payment-type-box h2 {
    margin: 0;
    font-size: 16px;
}

.payment-type-box label {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    min-height: 70px;
    padding: 14px;
    background: #f2fff5;
    border: 1px solid rgba(22, 130, 54, .45);
    border-radius: 8px;
}

.payment-type-box label > span {
    display: inline-flex;
    align-items: baseline;
    gap: 16px;
    min-width: 0;
}

.payment-type-box small,
.secure-payment-note {
    color: #6b7280;
}

.secure-payment-note {
    margin: 0;
    text-align: center;
}

.payment-summary-card {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 26px;
}

.payment-summary-items {
    display: grid;
    gap: 14px;
}

.payment-summary-items article {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.payment-summary-items img {
    width: 74px;
    height: 64px;
    object-fit: contain;
}

.payment-summary-items strong,
.payment-summary-items span,
.payment-summary-items b {
    display: block;
}

.payment-summary-line,
.payment-summary-total {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.payment-summary-total {
    color: #163b20;
    font-size: 22px;
    font-weight: 900;
}

.payment-summary-card button {
    min-height: 52px;
    color: #fff;
    background: #1f7a46;
    border: 0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 900;
}

.order-success-page {
    display: grid;
    place-items: center;
    min-height: 70vh;
    padding: 24px;
}

.order-success-page section {
    max-width: 560px;
    padding: 34px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.order-success-page iconify-icon {
    color: var(--green);
    font-size: 72px;
}

.order-success-page a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    margin-top: 16px;
    padding: 0 20px;
    color: #fff;
    background: var(--green);
    border-radius: 8px;
    font-weight: 900;
}

.store-footer {
    position: relative;
    margin-top: 56px;
    padding: 58px max(24px, calc((100vw - 88rem) / 2)) 20px;
    color: rgba(255, 255, 255, .72);
    background: #1d2b24;
    border-top: 2px solid #0f7f3a;
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(280px, 1.35fr) minmax(150px, .8fr) minmax(240px, 1fr) minmax(300px, 1.15fr);
    gap: 54px;
}

.footer-brand {
    color: #fff;
}

.footer-brand img {
    width: 96px;
    max-height: 96px;
    border-radius: 50%;
    filter: none;
    object-fit: contain;
}

.footer-about p {
    max-width: 410px;
    margin: 22px 0 32px;
    font-size: 16px;
    line-height: 1.75;
}

.footer-contact-pills,
.footer-socials,
.footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-contact-pills a {
    min-height: 38px;
    padding: 9px 18px;
    color: rgba(255, 255, 255, .86);
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
}

.footer-socials {
    margin-top: 22px;
}

.footer-socials a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
}

.footer-socials iconify-icon {
    font-size: 20px;
}

.footer-links {
    display: grid;
    align-content: start;
    gap: 11px;
}

.footer-links h2,
.footer-reach-card h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 19px;
    line-height: 1.2;
}

.footer-links a {
    color: rgba(255, 255, 255, .68);
    font-size: 15px;
    text-transform: capitalize;
}

.footer-links a:hover,
.footer-reach-card a:hover,
.footer-bottom a:hover {
    color: #fff;
}

.footer-reach-card {
    padding: 26px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
}

.footer-reach-card span {
    display: block;
    margin-top: 18px;
    color: rgba(255, 255, 255, .45);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.footer-reach-card a,
.footer-reach-card p {
    display: block;
    margin: 5px 0 0;
    color: rgba(255, 255, 255, .72);
    line-height: 1.35;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-bottom a,
.footer-bottom span {
    color: rgba(255, 255, 255, .68);
}

.floating-call,
.floating-whatsapp {
    position: fixed;
    z-index: 25;
    bottom: 28px;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: #fff;
    background: #1fa33b;
    border-radius: 50%;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}

.floating-call {
    left: 28px;
}

.floating-whatsapp {
    right: 28px;
    background: #20d66b;
}

.floating-call iconify-icon,
.floating-whatsapp iconify-icon {
    font-size: 34px;
}

.footer-settings-form {
    display: grid;
    gap: 16px;
}

.footer-settings-form > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 54px;
    padding: 0 22px;
    color: #fff;
    background: var(--green);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(22, 127, 57, .18);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.footer-settings-form > button:hover {
    background: #116b30;
    box-shadow: 0 16px 30px rgba(22, 127, 57, .24);
    transform: translateY(-1px);
}

.footer-settings-form > button:disabled {
    cursor: wait;
    opacity: .7;
    transform: none;
}

.policy-page {
    width: min(980px, calc(100% - 32px));
    margin: 48px auto;
}

.policy-page article {
    padding: 34px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(15, 23, 42, .08);
}

.policy-page h1 {
    margin: 0 0 18px;
    font-size: 36px;
    line-height: 1.1;
}

.policy-page h2 {
    margin: 26px 0 10px;
    font-size: 21px;
}

.policy-page p {
    margin: 0 0 12px;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.7;
}

.notifications-card {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.notifications-card h2 {
    margin: 0;
}

.notifications-card article {
    padding: 12px;
    background: #f7f8fa;
    border-radius: 8px;
}

.notifications-card span,
.notifications-card small {
    display: block;
    margin-top: 4px;
    color: #6b7280;
}

.image-crop-modal[hidden] {
    display: none;
}

.image-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 24px;
}

.image-crop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .48);
}

.image-crop-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    width: min(980px, 100%);
    padding: 22px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .28);
}

.image-crop-card .modal-title {
    margin-bottom: 0;
}

.image-crop-card .modal-title p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.crop-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 550;
    overflow: hidden;
    background:
        linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
        linear-gradient(-45deg, transparent 75%, #f3f4f6 75%),
        #fff;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    background-size: 24px 24px;
    border: 2px solid var(--green);
    border-radius: 8px;
    cursor: grab;
    touch-action: none;
}

.mini-banner-crop-stage {
    aspect-ratio: 3 / 1;
}

.crop-stage:active {
    cursor: grabbing;
}

.crop-stage img {
    position: absolute;
    max-width: none;
    transform: translate(-50%, -50%);
    user-select: none;
    pointer-events: none;
}

.crop-zoom {
    display: grid;
    gap: 8px;
    font-weight: 800;
}

.crop-zoom input {
    width: 100%;
}

.crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.crop-actions button {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    font-weight: 900;
}

.crop-actions button:first-child {
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
}

.crop-actions button:last-child {
    color: #fff;
    background: var(--green);
    border: 1px solid var(--green);
}

.rich-content p,
.rich-content ul,
.rich-content ol {
    margin: 0 0 14px;
}

.category-copy {
    padding: 24px 48px 44px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 0;
}

.category-copy h2 {
    margin: 0 0 20px;
    font-size: 24px;
    letter-spacing: 0;
}

.category-copy p {
    max-width: 980px;
    margin: 0;
    color: #666;
    font-size: 16px;
    line-height: 1.7;
}

.login-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #f3fff6, #fff7d6);
}

.login-panel {
    width: min(440px, 100%);
    padding: 32px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(25, 55, 35, .12);
}

.brand-centered {
    justify-content: center;
    width: 100%;
    margin-bottom: 18px;
}

.login-panel h1 {
    margin: 0 0 8px;
    font-size: 32px;
}

.login-panel p {
    margin: 0 0 22px;
    color: var(--muted);
}

.login-panel label,
.form-card label {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    font-weight: 700;
}

.login-panel input,
.form-card input,
.form-card select,
.form-card textarea {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    outline: 0;
}

.form-card textarea {
    min-height: 84px;
    padding-top: 12px;
    resize: vertical;
}

.login-panel button,
.form-card form > button,
.login-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    color: #fff;
    background: var(--green);
    border: 0;
    border-radius: 8px;
    font-weight: 800;
}

.login-link-button {
    text-decoration: none;
}

.auth-switch {
    margin: 16px 0 0;
    text-align: center;
}

.auth-switch a {
    color: var(--green);
    font-weight: 900;
}

.alert,
.success-alert {
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 8px;
}

.alert {
    color: #991b1b;
    background: #fee2e2;
}

.success-alert {
    color: #166534;
    background: #dcfce7;
}

.admin-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: 100vh;
    background: #fbfbfb;
    transition: grid-template-columns .2s ease;
}

.admin-layout.is-sidebar-collapsed {
    grid-template-columns: 86px minmax(0, 1fr);
}

.admin-sidebar {
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
    background: #fff;
    border-right: 1px solid var(--line);
    transition: padding .2s ease;
}

.admin-brand {
    justify-content: center;
    font-size: 34px;
}

.admin-brand img {
    width: 150px;
}

.admin-sidebar small {
    margin: 4px 0 24px;
    text-align: center;
}

.admin-sidebar nav {
    display: grid;
    gap: 8px;
}

.admin-sidebar nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    font-weight: 750;
}

.admin-sidebar nav iconify-icon,
.nav-group-title iconify-icon {
    color: #4d535c;
    font-size: 22px;
}

.admin-sidebar nav a.active,
.nav-group.active .nav-group-title {
    color: #7a5b00;
    background: #fff4c7;
}

.admin-sidebar nav a.active iconify-icon,
.nav-group.active .nav-group-title iconify-icon {
    color: #f2b600;
}

.nav-group {
    position: relative;
    display: grid;
    gap: 6px;
}

.nav-group-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    font-weight: 750;
}

.nav-submenu {
    display: grid;
    gap: 4px;
    padding-left: 34px;
}

.admin-sidebar nav .nav-submenu a {
    min-height: 36px;
    padding: 9px 12px;
    color: #4d535c;
    font-size: 14px;
}

.admin-sidebar nav .nav-submenu a.active {
    color: var(--green);
    background: #e8f8ed;
}

.sidebar-logout {
    margin-top: 10px;
}

.sidebar-logout button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    color: #d42142;
    background: #fff5f6;
    border: 1px solid #ffd0d7;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.sidebar-logout iconify-icon {
    font-size: 22px;
}

.admin-layout.is-sidebar-collapsed .admin-sidebar {
    padding: 24px 12px;
}

.admin-layout.is-sidebar-collapsed .admin-brand img {
    width: 54px;
}

.admin-layout.is-sidebar-collapsed .admin-sidebar nav {
    margin-top: 18px;
}

.admin-layout.is-sidebar-collapsed .admin-sidebar small,
.admin-layout.is-sidebar-collapsed [data-sidebar-label] {
    display: none;
}

.admin-layout.is-sidebar-collapsed .admin-sidebar nav a,
.admin-layout.is-sidebar-collapsed .nav-group-title,
.admin-layout.is-sidebar-collapsed .sidebar-logout button {
    justify-content: center;
    width: 48px;
    min-height: 48px;
    padding: 0;
}

.admin-layout.is-sidebar-collapsed .admin-sidebar nav a em {
    position: absolute;
    top: 5px;
    right: 4px;
    margin-left: 0;
}

.admin-layout.is-sidebar-collapsed .nav-submenu {
    position: absolute;
    z-index: 20;
    top: 0;
    left: calc(100% + 2px);
    display: none;
    width: max-content;
    min-width: 260px;
    padding: 10px;
    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
}

.admin-layout.is-sidebar-collapsed .nav-submenu::before {
    position: absolute;
    top: 0;
    right: 100%;
    width: 14px;
    height: 100%;
    content: "";
}

.admin-layout.is-sidebar-collapsed .nav-group:hover .nav-submenu,
.admin-layout.is-sidebar-collapsed .nav-group:focus-within .nav-submenu {
    display: grid;
}

.admin-layout.is-sidebar-collapsing .nav-submenu {
    display: none !important;
}

.admin-layout.is-sidebar-collapsed .admin-sidebar nav .nav-submenu a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-width: 100%;
    min-height: 38px;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
}

.admin-layout.is-sidebar-collapsed [data-sidebar-tooltip]::after {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: calc(100% + 12px);
    display: none;
    padding: 7px 10px;
    color: #fff;
    background: #111827;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    content: attr(data-sidebar-tooltip);
    transform: translateY(-50%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}

.admin-layout.is-sidebar-collapsed [data-sidebar-tooltip]:hover::after,
.admin-layout.is-sidebar-collapsed [data-sidebar-tooltip]:focus-visible::after {
    display: block;
}

.admin-layout.is-sidebar-collapsed .nav-group:hover .nav-group-title::after,
.admin-layout.is-sidebar-collapsed .nav-group:focus-within .nav-group-title::after {
    display: none;
}

.quick-tip {
    margin-top: auto;
    padding: 18px;
    background: linear-gradient(145deg, #f1fff3, #fffde9);
    border: 1px solid #d6f4dd;
    border-radius: 12px;
}

.quick-tip > iconify-icon {
    color: var(--green);
    font-size: 28px;
    margin-bottom: 12px;
}

.quick-tip p {
    color: #2f3a31;
    line-height: 1.6;
}

.admin-topbar {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 22px;
    height: 72px;
    padding: 0 32px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #fff;
    border: 0;
}

.icon-button iconify-icon {
    font-size: 24px;
}

.admin-search {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 8px 0 14px;
    color: #8b8f98;
    border: 1px solid #dedede;
    border-radius: 8px;
}

.admin-search iconify-icon {
    flex: 0 0 auto;
    color: #4d535c;
    font-size: 22px;
}

.admin-search input {
    min-width: 0;
    flex: 1 1 auto;
    height: 38px;
    padding: 0;
    color: #111827;
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
    font-weight: 700;
}

.admin-search input::placeholder {
    color: #8b8f98;
}

.admin-search button {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 12px;
    color: #fff;
    background: var(--green);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
}

.admin-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.admin-user small {
    display: block;
    color: var(--muted);
}

.notification {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #3f4650;
    background: transparent;
}

.notification iconify-icon {
    font-size: 25px;
}

.notification em {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    color: #fff;
    background: #ef233c;
    border-radius: 50%;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.admin-content {
    padding: 28px 32px;
}

.admin-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.admin-heading p,
.admin-heading span {
    margin: 0;
    color: var(--muted);
}

.admin-heading h1 {
    margin: 8px 0;
    font-size: 30px;
    letter-spacing: 0;
}

.add-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    color: #fff;
    background: var(--green);
    border-radius: 8px;
    font-weight: 800;
}

.add-button iconify-icon {
    font-size: 22px;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 18px;
}

.stats-row article {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 6px 14px;
    align-items: center;
    padding: 20px;
    background: #fff;
    border: 1px solid #cfeeda;
    border-radius: 10px;
}

.stats-row article > iconify-icon {
    grid-row: span 2;
    width: 46px;
    height: 46px;
    padding: 11px;
    color: var(--green);
    background: #e8f8ed;
    border-radius: 50%;
    font-size: 24px;
}

.stats-row strong {
    font-size: 28px;
}

.stats-row span {
    color: var(--muted);
}

.dashboard-filter-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 20px;
}

.dashboard-filter-bar select,
.dashboard-filter-bar input {
    height: 44px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    font-weight: 800;
}

.dashboard-filter-bar button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    color: #fff;
    background: var(--green);
    border: 1px solid var(--green);
    border-radius: 8px;
    font-weight: 900;
    cursor: pointer;
}

.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.dashboard-stat-grid article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 6px 14px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 8px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .06);
}

.dashboard-stat-grid iconify-icon {
    grid-row: span 2;
    width: 52px;
    height: 52px;
    padding: 12px;
    color: var(--green);
    background: #eaf8ee;
    border-radius: 50%;
    font-size: 28px;
}

.dashboard-stat-grid span {
    color: #667085;
    font-weight: 800;
}

.dashboard-stat-grid strong {
    font-size: 24px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, .8fr);
    gap: 20px;
}

.dashboard-card {
    padding: 24px;
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 8px;
    box-shadow: 0 16px 44px rgba(15, 23, 42, .06);
}

.dashboard-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.dashboard-card-heading h2 {
    margin: 0 0 5px;
    font-size: 22px;
}

.dashboard-card-heading span {
    color: #667085;
    font-weight: 700;
}

.sales-chart {
    display: grid;
    grid-auto-columns: minmax(42px, 1fr);
    grid-auto-flow: column;
    align-items: end;
    gap: 12px;
    min-height: 320px;
    overflow-x: auto;
    padding: 18px 4px 0;
}

.larapex-sales-chart {
    display: block;
    min-height: 360px;
    overflow: visible;
    padding: 0;
}

.larapex-sales-chart > div {
    min-height: 360px;
}

.sales-chart-bar {
    display: grid;
    align-items: end;
    grid-template-rows: 26px 240px 36px;
    gap: 8px;
    min-width: 42px;
    text-align: center;
}

.sales-chart-bar span {
    overflow: hidden;
    color: #475467;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-chart-bar i {
    align-self: end;
    display: block;
    height: var(--bar-height);
    min-height: 4px;
    background: linear-gradient(180deg, #29a34a, #168236);
    border-radius: 8px 8px 2px 2px;
}

.sales-chart-bar small {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
}

.top-products-list {
    display: grid;
    gap: 10px;
}

.top-products-list article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fbfcfd;
    border: 1px solid #edf0f4;
    border-radius: 8px;
}

.top-products-list em {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--green);
    background: #eaf8ee;
    border-radius: 50%;
    font-style: normal;
    font-weight: 900;
}

.top-product-thumb {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5eaf0;
    border-radius: 8px;
}

.top-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.top-product-thumb iconify-icon {
    color: #64748b;
    font-size: 26px;
}

.top-products-list strong,
.top-products-list span {
    display: block;
}

.top-products-list span {
    margin-top: 3px;
    color: #667085;
    font-weight: 700;
}

.top-products-list small {
    display: block;
    margin-top: 3px;
    color: #168236;
    font-weight: 800;
}

.top-products-list b {
    font-size: 14px;
}

.dashboard-empty {
    display: grid;
    place-items: center;
    min-height: 140px;
    color: #667085;
    font-weight: 800;
}

.inventory-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.inventory-stats article {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 116px;
    padding: 22px;
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 8px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .06);
}

.inventory-stats iconify-icon {
    width: 58px;
    height: 58px;
    padding: 13px;
    color: var(--green);
    background: #eaf8ee;
    border-radius: 50%;
    font-size: 32px;
}

.inventory-stats .warning iconify-icon {
    color: #f59e0b;
    background: #fff4df;
}

.inventory-stats .danger iconify-icon {
    color: #ef4444;
    background: #ffe8ee;
}

.inventory-stats .value iconify-icon {
    color: #4f46e5;
    background: #eeefff;
}

.inventory-stats span,
.inventory-stats small {
    display: block;
    color: #667085;
    font-weight: 700;
}

.inventory-stats strong {
    display: block;
    margin: 8px 0 6px;
    font-size: 24px;
}

.inventory-card {
    padding: 0;
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 8px;
    box-shadow: 0 16px 44px rgba(15, 23, 42, .06);
}

.inventory-filters {
    margin-bottom: 0;
}

.inventory-filters .inventory-export-button {
    flex: 0 0 auto;
}

.inventory-search input {
    padding-right: 32px;
}

.inventory-search {
    position: relative;
}

.inventory-search iconify-icon {
    right: 9px;
    font-size: 18px;
}

.inventory-export-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 11px;
    color: #111827;
    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 900;
}

.inventory-filters button {
    cursor: pointer;
}

.inventory-filters .inventory-filter-button {
    color: #fff;
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 12px 26px rgba(22, 130, 54, .18);
}

.inventory-filters .inventory-filter-button:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
}

.admin-list-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    overflow-x: visible;
    padding: 10px 12px;
    border-bottom: 1px solid #edf0f4;
}

.admin-list-filters .admin-filter-search {
    flex: 0 1 300px;
    min-width: 180px;
}

.admin-list-filters select,
.admin-list-filters input[type="date"] {
    flex: 0 1 132px;
    min-width: 108px;
}

.admin-list-filters button,
.admin-list-filters .admin-clear-filter {
    flex: 0 0 auto;
}

.admin-list-filters input,
.admin-list-filters select {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 8px;
    color: #111827;
    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
}

.admin-filter-search {
    position: relative;
}

.admin-filter-search input {
    padding-right: 32px;
}

.admin-filter-search iconify-icon {
    position: absolute;
    top: 50%;
    right: 9px;
    color: #64748b;
    font-size: 18px;
    transform: translateY(-50%);
}

.admin-list-filters button,
.admin-clear-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 11px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 900;
}

.admin-list-filters .inventory-filter-button {
    color: #fff;
    background: var(--green);
    border: 1px solid var(--green);
}

.admin-clear-filter {
    color: #475467;
    background: #fff;
    border: 1px solid #dfe5ee;
}

.admin-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
}

.admin-table-footer .pagination {
    padding: 0;
}

.admin-per-page-form {
    flex: 0 0 auto;
}

.admin-per-page-form select {
    height: 42px;
    padding: 0 14px;
    color: #111827;
    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    font-weight: 800;
}

.order-status-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.order-status-form select {
    height: 34px;
    min-width: 124px;
    padding: 0 10px;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    font-weight: 800;
}

.order-status-form button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #fff;
    background: var(--green);
    border: 0;
    border-radius: 8px;
}

.order-items-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 78px;
    height: 34px;
    padding: 0 10px;
    color: #111827;
    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 800;
}

.order-items-toggle iconify-icon {
    font-size: 20px;
    transition: transform 0.2s ease;
}

.order-items-toggle[aria-expanded="true"] iconify-icon {
    transform: rotate(180deg);
}

.order-items-row[hidden] {
    display: none;
}

.order-items-row td {
    padding: 0;
    background: #f8fafc;
}

.order-items-panel {
    padding: 16px 22px 22px;
    border-top: 1px solid #e6ebf2;
}

.order-items-table {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 8px;
}

.order-items-table th,
.order-items-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #edf1f6;
}

.order-items-table tr:last-child td {
    border-bottom: 0;
}

.order-items-table img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e6ebf2;
}

.order-item-placeholder {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: #6b7280;
    background: #f3f6fa;
    border: 1px dashed #d5dde8;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.order-item-placeholder[hidden] {
    display: none;
}

.admin-sidebar nav a em {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    margin-left: auto;
    padding: 0 6px;
    color: #fff;
    background: #fb3f4f;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.notifications-table-card {
    padding: 0;
}

.notifications-list {
    display: grid;
}

.notifications-list a {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf0f4;
}

.notifications-list a:hover {
    background: #f8faf8;
}

.notifications-list a.unread {
    background: #f2faf4;
}

.notifications-list a > span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--green);
    background: #eaf8ee;
    border-radius: 50%;
}

.notifications-list strong,
.notifications-list p,
.notifications-list small {
    display: block;
}

.notifications-list p {
    margin: 4px 0;
    color: #475467;
    font-weight: 700;
}

.notifications-list small {
    color: #667085;
    font-weight: 700;
}

.inventory-table-wrap {
    overflow-x: auto;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
}

.inventory-table {
    width: 100%;
    min-width: 1060px;
    border-collapse: collapse;
}

.inventory-table th,
.inventory-table td {
    padding: 18px 16px;
    border-bottom: 1px solid #edf0f4;
    text-align: left;
    vertical-align: middle;
}

.inventory-table th {
    color: #111827;
    background: #fafbfc;
    font-weight: 900;
}

.inventory-table th:nth-child(7),
.inventory-table td:nth-child(7) {
    text-align: center;
}

.inventory-table td > span,
.inventory-table td small {
    display: block;
    margin-top: 4px;
    color: #667085;
}

.inventory-product {
    display: grid;
    grid-template-columns: 54px minmax(150px, 1fr);
    align-items: center;
    gap: 14px;
}

.inventory-product > span {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    overflow: hidden;
    color: var(--green);
    background: #f1f5f9;
    border-radius: 8px;
}

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

.inventory-product small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-weight: 800;
}

.inventory-stock-info strong {
    display: block;
    color: var(--green);
}

.inventory-stock-info.low strong {
    color: #f59e0b;
}

.inventory-stock-info.out strong {
    color: #ef4444;
}

.inventory-stock-info span {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-weight: 700;
}

.inventory-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 900;
    line-height: 1.15;
}

.inventory-status.in {
    color: #168236;
    background: #e9f8ee;
}

.inventory-status.low {
    color: #f59e0b;
    background: #fff3df;
}

.inventory-status.out {
    color: #ef4444;
    background: #ffe8ee;
}

.inventory-stock-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-stock-form input {
    width: 86px;
    height: 42px;
    padding: 0 10px;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    font-weight: 800;
}

.inventory-stock-form button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--green);
    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    cursor: pointer;
}

.inventory-pagination {
    padding: 14px 18px;
    margin-top: 0;
    border-top: 1px solid #edf0f4;
}

.inventory-pagination > span {
    color: #475467;
    font-weight: 700;
}

.inventory-pagination > div > span {
    display: block;
    margin-bottom: 8px;
    color: #475467;
    font-weight: 700;
}

.level-tabs {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.level-tabs a {
    padding: 9px 14px;
    border-radius: 7px;
    font-weight: 800;
}

.level-tabs a.active {
    color: #fff;
    background: var(--green);
}

.admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.products-admin-grid {
    grid-template-columns: minmax(0, 1fr);
}

.table-card,
.form-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(20, 20, 20, .04);
}

.table-card {
    overflow-x: auto;
}

table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

th,
td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

th {
    background: #fff;
    font-weight: 900;
}

.mini-thumb {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    background: #e9f8ee;
    border-radius: 7px;
}

.product-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.category-mini-thumb img,
.category-mini-thumb span {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.category-mini-thumb img {
    display: block;
    object-fit: cover;
}

.product-mini-thumb iconify-icon {
    font-size: 24px;
}

.banner-mini-thumb {
    width: 142px;
    height: 54px;
    overflow: hidden;
    background: #f4f6f8;
    border: 1px solid var(--line);
    border-radius: 7px;
}

.banner-mini-thumb img,
.current-banner-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

td > span {
    display: block;
    max-width: 420px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.status {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.status.active {
    color: #168236;
    background: #e8f8ed;
    border: 1px solid #bce8c8;
}

.status.hidden {
    color: #d42142;
    background: #fff0f2;
    border: 1px solid #ffc2cb;
}

.order-status-new {
    color: #168236;
    background: #e8f8ed;
    border: 1px solid #bce8c8;
}

.order-status-processing {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.order-status-delivered {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.order-status-cancelled {
    color: #d42142;
    background: #fff0f2;
    border: 1px solid #ffc2cb;
}

.action-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.action-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--green);
    font-weight: 800;
}

.delete-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--danger);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-weight: 800;
}

button:disabled {
    cursor: wait;
    opacity: .72;
}

.is-loading {
    pointer-events: none;
}

.button-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: button-spin .7s linear infinite;
}

@keyframes button-spin {
    to {
        transform: rotate(360deg);
    }
}

.form-card {
    padding: 22px;
}

.form-card h2 {
    margin: 0 0 18px;
    font-size: 22px;
}

.product-form-card {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    place-items: center;
    padding: 28px;
}

.admin-modal:target {
    display: grid;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(4px);
}

.modal-card {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 28px;
}

.product-modal-card {
    width: min(940px, calc(100vw - 32px));
}

.modal-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.modal-title h2 {
    margin: 0;
}

.form-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ck-editor__editable {
    min-height: 190px;
}

.switch-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.switch-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #f8faf8;
    border-radius: 8px;
}

.switch-row input {
    width: auto;
    min-height: 0;
}

.home-display-settings {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px;
}

.home-display-settings h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.home-display-settings p {
    margin: 0;
    color: var(--muted);
}

.home-display-settings button {
    justify-self: start;
    min-height: 42px;
    padding: 0 18px;
    color: #fff;
    background: var(--green);
    border: 0;
    border-radius: 8px;
    font-weight: 800;
}

.purchase-options-editor {
    display: grid;
    gap: 14px;
    margin: 8px 0 18px;
    padding: 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
}

.purchase-options-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.purchase-options-heading h3 {
    margin: 0;
    font-size: 18px;
}

.purchase-options-heading button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    color: #fff;
    background: var(--green);
    border: 0;
    border-radius: 8px;
    font-weight: 800;
}

.purchase-options-list {
    display: grid;
    gap: 12px;
}

.purchase-option-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) 42px;
    align-items: end;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #fed7aa;
    border-radius: 8px;
}

.remove-purchase-option {
    height: 44px;
}

.remove-purchase-option:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.current-banner-preview {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 12px;
}

.current-banner-preview img {
    aspect-ratio: 16 / 5;
    background: #f4f6f8;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.preview-card {
    display: grid;
    place-items: center;
    gap: 12px;
    width: 140px;
    margin: 24px auto 0;
    padding: 18px;
    text-align: center;
    background: #f8f9fb;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.pagination {
    padding: 16px;
    color: var(--muted);
}

.pagination nav {
    display: grid;
    gap: 10px;
    font-size: 15px;
}

.pagination nav > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    line-height: 1.2;
}

.pagination svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.pagination [aria-current="page"] span,
.pagination a:hover {
    color: var(--green);
}

@media (max-width: 1180px) {
    .store-header {
        grid-template-columns: 116px minmax(0, 1fr);
        gap: 14px;
        min-height: auto;
        padding: 14px 18px;
    }

    .store-header .brand img {
        width: 104px;
        max-height: 62px;
    }

    .store-nav {
        display: none;
    }

    .header-actions {
        justify-content: flex-end;
        gap: 10px;
    }

    .header-search {
        width: min(300px, 44vw);
    }

    .header-icon-button,
    .header-cart-button {
        width: 36px;
        height: 36px;
    }

    .call-button,
    .quote-button {
        min-width: 108px;
        height: 40px;
        padding: 0 14px;
        font-size: 14px;
    }

    .call-button {
        display: none;
    }

    .mobile-menu-button {
        display: grid;
        width: 40px;
        height: 40px;
    }

    .mega-menu {
        left: 18px;
        right: 18px;
        top: 100%;
        grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
    }

    .mega-promo-column {
        grid-column: 1 / -1;
    }

    .mega-panel.active {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .promo-grid,
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .category-grid {
        align-items: start;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .category-card {
        padding: 14px;
    }

    .category-thumb {
        margin-bottom: 10px;
    }

    .category-card h3 {
        font-size: 14px;
    }

    .product-detail-grid {
        gap: 24px;
    }

    .product-media {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
        padding: 14px;
    }

    .product-main-image {
        min-height: 520px;
    }

    .purchase-actions,
    .purchase-card.in-cart .purchase-actions {
        grid-template-columns: 1fr;
    }

    .selected-price strong {
        font-size: clamp(28px, 4vw, 34px);
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-filter-bar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .inventory-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-search {
        grid-column: 1 / -1;
    }

    .footer-inner {
        grid-template-columns: minmax(260px, 1.2fr) repeat(2, minmax(150px, .7fr));
        gap: 34px;
    }

    .footer-reach-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .store-header {
        position: sticky;
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
        align-items: center;
    }

    .brand {
        font-size: 24px;
    }

    .brand img {
        width: 64px;
        max-height: 46px;
    }

    .store-nav {
        display: none;
    }

    .header-actions {
        justify-content: flex-end;
        gap: 7px;
        min-width: 0;
    }

    .header-search {
        width: min(190px, 42vw);
    }

    .header-search input {
        height: 34px;
        padding: 0 34px 0 10px;
        font-size: 12px;
    }

    .header-search > iconify-icon {
        right: 10px;
        font-size: 20px;
    }

    .header-icon-button,
    .header-cart-button {
        width: 34px;
        height: 34px;
    }

    .header-icon-button iconify-icon,
    .header-cart-button iconify-icon {
        font-size: 25px;
    }

    .header-cart-button span {
        top: -6px;
        right: -5px;
        min-width: 19px;
        height: 19px;
        font-size: 11px;
    }

    .call-button,
    .quote-button {
        min-width: 0;
        height: 34px;
        padding: 0 10px;
        border-width: 1px;
        border-radius: 7px;
        font-size: 12px;
    }

    .quote-button {
        padding: 0 12px;
    }

    .call-button iconify-icon {
        font-size: 18px;
    }

    .mobile-menu-button {
        width: 34px;
        height: 34px;
        border-radius: 7px;
    }

    .mobile-menu-button iconify-icon {
        font-size: 22px;
    }

    .mega-menu {
        position: fixed;
        left: 10px;
        right: 10px;
        top: 112px;
        grid-template-columns: 1fr;
        max-height: min(70vh, 460px);
        padding: 14px;
        overflow-y: auto;
        border-radius: 12px;
    }

    .mega-main-list,
    .mega-category-columns {
        border-right: 0;
        padding-right: 0;
    }

    .mega-promo-column {
        grid-column: auto;
    }

    .mega-panel.active {
        grid-template-columns: 1fr;
    }

    .store-shell {
        width: min(100% - 24px, 680px);
        margin-top: 14px;
    }

    .home-shell {
        margin-top: 0;
    }

    .hero-carousel {
        aspect-ratio: auto;
        height: calc(28.65vw + 60px);
        min-height: 190px;
    }

    .hero-arrow {
        display: none;
    }

    .hero-banner {
        padding: 18px 24px;
    }

    .hero-banner h1 {
        font-size: clamp(20px, 7vw, 30px);
        margin-bottom: 8px;
    }

    .hero-banner p {
        margin-bottom: 14px;
        font-size: 14px;
        line-height: 1.25;
    }

    .small-banner-track {
        grid-auto-columns: 100%;
    }

    .categories-section {
        margin-inline: -12px;
    }

    .categories-heading {
        padding-inline: 12px;
    }

    .category-slider-actions button {
        width: 42px;
        height: 42px;
        box-shadow: 0 8px 20px rgba(20, 40, 60, .1);
    }

    .category-slider-actions iconify-icon {
        font-size: 24px;
    }

    .category-slider {
        overflow: hidden;
    }

    .category-slider-track {
        gap: 10px;
        padding: 0 12px 8px;
        scroll-snap-type: x mandatory;
    }

    .category-slider-track-desktop {
        display: none;
    }

    .category-slider-track-mobile {
        display: flex;
    }

    .category-grid {
        display: grid;
        flex: 0 0 calc(100vw - 24px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 12px;
    }

    .category-card {
        min-height: 0;
        border-radius: 14px;
    }

    .category-thumb {
        aspect-ratio: 1 / 1;
        height: auto;
        margin: 0;
        border-radius: 0;
    }

    .category-thumb img {
        width: 75%;
        height: 75%;
        object-fit: contain;
    }

    .category-thumb span {
        width: 100%;
        height: 100%;
        font-size: 40px;
    }

    .category-card h3 {
        max-width: 100%;
        min-height: 0;
        font-size: 13px;
        padding: 9px 8px;
    }

    .home-product-rail {
        grid-auto-columns: 168px;
        gap: 10px;
    }

    .home-product-rail .product-card,
    .product-card {
        min-height: 0;
    }

    .product-card {
        padding: 10px;
    }

    .product-image {
        aspect-ratio: 1 / 1;
        height: auto;
        margin-bottom: 10px;
    }

    .product-card h2 {
        min-height: 0;
        font-size: 13px;
    }

    .product-card p {
        margin-bottom: 8px;
        font-size: 12px;
    }

    .store-footer {
        padding: 42px 18px 18px;
    }

    .footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 18px;
    }

    .footer-about,
    .footer-reach-card {
        grid-column: 1 / -1;
    }

    .footer-links {
        min-width: 0;
    }

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

    .floating-call,
    .floating-whatsapp {
        width: 54px;
        height: 54px;
        bottom: 18px;
    }

    .floating-call {
        left: 18px;
    }

    .floating-whatsapp {
        right: 18px;
    }

    .rail-prev {
        left: 6px;
    }

    .rail-next {
        right: 6px;
    }

    .listing-shell {
        width: min(100% - 16px, 680px);
    }

    .listing-body {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .listing-body.no-sidebars {
        grid-template-columns: minmax(0, 1fr);
    }

    .listing-body.has-leaf-sidebar {
        grid-template-columns: 76px 76px minmax(0, 1fr);
    }

    /* Filter sidebar: hide on mobile, use bottom drawer instead */
    .listing-body--has-filter {
        grid-template-columns: minmax(0, 1fr);
    }

    .listing-sidebar--filter {
        display: none !important;
    }

    /* Show mobile UI */
    .lsf-drawer-overlay, .lsf-drawer { display: block; }

    .lsf-mobile-bar {
        display: flex;
        gap: 8px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--line);
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .lsf-mobile-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 9px 12px;
        border: 1.5px solid var(--line);
        border-radius: 8px;
        background: #fff;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        cursor: pointer;
    }

    .lsf-mobile-btn iconify-icon {
        font-size: 16px;
    }

    /* Bottom drawer */
    .lsf-drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 200;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s;
    }

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

    .lsf-drawer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 18px 18px 0 0;
        z-index: 201;
        max-height: 80vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.32,1,.23,1);
        padding-bottom: env(safe-area-inset-bottom, 16px);
    }

    .lsf-drawer.open {
        transform: translateY(0);
    }

    .lsf-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px 12px;
        border-bottom: 1px solid var(--line);
        font-weight: 700;
        font-size: 15px;
    }

    .lsf-drawer-close {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 22px;
        color: var(--muted);
        line-height: 1;
        padding: 0;
    }

    .listing-sidebar a {
        min-height: 78px;
        font-size: 11px;
    }

    .listing-sidebar span {
        width: 44px;
        height: 44px;
    }

    .listing-content {
        padding: 8px;
    }

    .listing-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .listing-category-card {
        min-height: 118px;
        padding: 10px;
    }

    .listing-category-card span {
        width: 58px;
        height: 58px;
    }

    .all-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .all-categories-grid .listing-category-card {
        min-height: 170px;
        padding: 18px 12px;
    }

    .all-categories-grid .listing-category-card span {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 2px solid #c3e8cc;
    }

    .all-categories-grid .listing-category-card iconify-icon {
        font-size: 44px;
    }

    .all-categories-grid .listing-category-card strong {
        font-size: 14px;
    }

    .listing-category-card iconify-icon {
        font-size: 34px;
    }

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

    .product-card {
        min-height: 0;
        padding: 10px;
    }

    .product-image {
        aspect-ratio: 1 / 1;
        height: auto;
        margin-bottom: 10px;
    }

    .product-image iconify-icon {
        font-size: 68px;
    }

    .product-shell {
        width: min(100% - 16px, 680px);
        margin-top: 18px;
    }

    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        overflow: hidden;
    }

    .product-media {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
        border-bottom: 1px solid var(--line);
    }

    .product-main-image {
        min-height: clamp(300px, 78vw, 420px);
        overflow: hidden;
    }

    .product-main-image img {
        width: 94%;
        height: 94%;
    }

    .product-thumbs {
        grid-auto-flow: column;
        grid-auto-columns: 78px;
        grid-auto-rows: unset;
        justify-content: start;
        order: 0;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .magnifier-lens,
    .magnifier-preview {
        display: none !important;
    }

    .product-summary {
        min-width: 0;
        padding: 8px 4px 28px;
    }

    .product-summary h1 {
        font-size: clamp(30px, 9vw, 40px);
        word-break: break-word;
    }

    .product-short-description {
        font-size: 15px;
        overflow-wrap: anywhere;
    }

    .unit-options button {
        grid-template-columns: 40px minmax(0, 1fr) 22px;
        width: 100%;
        min-width: 0;
    }

    .unit-options {
        grid-template-columns: 1fr;
    }

    .unit-icon {
        width: 36px;
        height: 36px;
    }

    .unit-price-row {
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .purchase-card {
        gap: 14px;
        padding: 14px;
    }

    .selected-price {
        gap: 8px;
    }

    .selected-price strong {
        font-size: clamp(30px, 9vw, 40px);
    }

    .selected-price em {
        padding: 6px 10px;
        font-size: 13px;
    }

    .purchase-actions,
    .purchase-card.in-cart .purchase-actions,
    .product-trust-strip {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .quantity-box {
        padding: 12px;
    }

    .quantity-box div,
    .checkout-buttons,
    .add-cart-main,
    .buy-now-main {
        width: 100%;
        max-width: 100%;
    }

    .product-mini-banner img {
        max-height: 190px;
    }

    .category-copy {
        padding: 22px 18px 34px;
    }

    .promo-grid,
    .stats-row {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .dashboard-filter-bar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card {
        padding: 16px;
    }

    .sales-chart {
        min-height: 260px;
    }

    .sales-chart-bar {
        grid-template-rows: 24px 190px 34px;
    }

    .inventory-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .inventory-stats article {
        min-height: 96px;
        padding: 16px;
    }

    .inventory-card {
        padding: 14px;
    }

    .inventory-filters {
        grid-template-columns: 1fr;
    }

    .admin-list-filters {
        padding: 14px;
    }

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

    .promo {
        grid-column: span 2;
    }

    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-layout.is-sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        display: none;
    }

    .admin-topbar {
        grid-template-columns: 36px 1fr;
        padding: 0 16px;
    }

    .admin-search {
        min-width: 0;
    }

    .admin-user {
        display: none;
    }

    .admin-content {
        padding: 20px 14px;
    }

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

    .checkout-shell {
        grid-template-columns: 1fr;
    }

    .checkout-summary-card {
        position: static;
    }

    .checkout-item {
        grid-template-columns: 82px minmax(0, 1fr) 36px;
        gap: 12px;
    }

    .checkout-item-price,
    .checkout-qty-control {
        grid-column: 2;
    }

    .checkout-item img {
        width: 82px;
        height: 72px;
    }

    .checkout-remove {
        grid-column: 3;
        grid-row: 1;
    }

    .checkout-more-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .checkout-more-row a {
        grid-column: 1 / -1;
        width: 100%;
    }

.payment-checkout-shell,
.billing-two-col {
    grid-template-columns: 1fr;
}

    .purchase-option-row {
        grid-template-columns: 1fr;
    }

    .remove-purchase-option {
        width: 100%;
    }
}

.store-blog-section,
.blog-page,
.blog-detail-page {
    width: min(1240px, calc(100% - 48px));
    margin: 42px auto 54px;
}

.store-blog-heading,
.blog-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.store-blog-heading span,
.blog-page-heading span,
.store-blog-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    color: var(--green);
    background: #eaf8ee;
    border-radius: 999px;
    font-weight: 900;
}

.store-blog-heading > div > span,
.blog-page-heading > span {
    padding: 6px 10px;
    margin-bottom: 12px;
    font-size: 14px;
}

.store-blog-heading h2,
.blog-page-heading h1 {
    margin: 0 0 8px;
    font-size: 30px;
    letter-spacing: 0;
}

.store-blog-heading p,
.blog-page-heading p {
    max-width: 520px;
    margin: 0;
    color: #667085;
    font-weight: 700;
    line-height: 1.6;
}

.store-blog-heading > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    color: var(--green);
    background: #fff;
    border: 1px solid #74bd8b;
    border-radius: 8px;
    font-weight: 900;
}

.store-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.store-blog-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .05);
}

.store-blog-image {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    color: var(--green);
    background: #f2f8f4;
}

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

.store-blog-image iconify-icon {
    font-size: 42px;
}

.store-blog-card-body {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.store-blog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #667085;
    font-size: 14px;
    font-weight: 800;
}

.store-blog-meta span {
    padding: 5px 10px;
    font-size: 12px;
}

.store-blog-meta time {
    white-space: nowrap;
}

.store-blog-card h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
    letter-spacing: 0;
}

.store-blog-card p {
    margin: 0;
    color: #667085;
    font-weight: 700;
    line-height: 1.55;
}

.store-blog-read,
.blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: var(--green);
    font-weight: 900;
}

.store-blog-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
    padding: 18px;
    background: #fff;
    border: 1px solid #edf0f4;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .05);
}

.store-blog-benefits article {
    display: flex;
    align-items: center;
    gap: 14px;
}

.store-blog-benefits iconify-icon {
    width: 46px;
    height: 46px;
    padding: 11px;
    color: var(--green);
    background: #eaf8ee;
    border-radius: 50%;
    font-size: 24px;
}

.store-blog-benefits strong,
.store-blog-benefits span {
    display: block;
}

.store-blog-benefits span {
    margin-top: 4px;
    color: #667085;
    font-weight: 700;
}

.blog-page-heading {
    display: block;
}

.blog-page-grid {
    margin-bottom: 24px;
}

.blog-detail-card {
    width: 100%;
    padding: 28px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    box-shadow: 0 16px 44px rgba(15, 23, 42, .06);
}

.blog-detail-page .store-blog-section {
    width: 100%;
}

.blog-detail-card h1 {
    margin: 18px 0 10px;
    font-size: 36px;
    letter-spacing: 0;
}

.blog-detail-excerpt {
    margin: 0 0 20px;
    color: #667085;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.blog-detail-image {
    width: 100%;
    max-height: 430px;
    object-fit: cover;
    border-radius: 8px;
    margin: 10px 0 24px;
}

.blog-detail-content {
    color: #334155;
    font-size: 16px;
    line-height: 1.8;
}

.form-grid.two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-form-section {
    padding: 16px;
    margin: 0 0 18px;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
}

.admin-form-section legend {
    padding: 0 8px;
    color: #111827;
    font-size: 15px;
    font-weight: 900;
}

.seo-filter-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 180px 210px 44px;
    gap: 14px;
    align-items: center;
    margin-bottom: 20px;
}

.seo-filter-bar input,
.seo-filter-bar select,
.seo-filter-bar button {
    width: 100%;
    height: 42px;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    background: #fff;
    font-weight: 800;
}

.seo-filter-bar button {
    display: grid;
    place-items: center;
    color: var(--green);
    cursor: pointer;
}

.seo-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.seo-page-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .05);
}

.seo-page-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 6px;
}

.seo-page-card h2 {
    margin: 0;
    font-size: 20px;
    letter-spacing: 0;
}

.seo-page-card p,
.seo-keywords {
    margin: 0;
    padding: 0 16px 8px;
    color: #111827;
    line-height: 1.45;
}

.seo-keywords > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px;
}

.seo-keywords span,
.seo-keywords small {
    padding: 5px 9px;
    color: var(--green);
    background: #eaf8ee;
    border: 1px solid #cfeeda;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
}

.seo-keywords em {
    color: #667085;
    font-style: normal;
    font-weight: 800;
}

.seo-status {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.seo-status.active {
    color: #168236;
    background: #eaf8ee;
}

.seo-status.draft {
    color: #2563eb;
    background: #e8f1ff;
}

.seo-status.review {
    color: #f97316;
    background: #fff4df;
}

.seo-status.missing {
    color: #dc2626;
    background: #fee2e2;
}

.seo-page-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    color: #667085;
    border-top: 1px solid #edf0f4;
    font-size: 13px;
    font-weight: 800;
}

.seo-page-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.seo-card-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #edf0f4;
}

.seo-card-actions a,
.seo-card-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    width: 100%;
    color: #475467;
    background: #fff;
    border: 0;
    border-right: 1px solid #edf0f4;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
}

.seo-card-actions form:last-child button {
    border-right: 0;
}

.seo-card-actions .delete-button {
    color: #ef3f5f;
}

.seo-modal-card {
    max-width: 1120px;
}

.seo-page-strip-grid {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr);
}

.seo-add-page-strip {
    border-left: 4px solid #22c55e;
    background: #f8fafc;
}

.seo-detail-section {
    border-left: 4px solid #0ea5e9;
}

@media (max-width: 1180px) {
    .seo-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seo-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .seo-card-grid,
    .seo-filter-bar,
    .seo-page-strip-grid {
        grid-template-columns: 1fr;
    }

    .seo-card-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

.compact-checkbox-field {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-bottom: 16px;
}

.compact-checkbox-field input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    padding: 0;
    margin: 0;
}

.schema-admin-content {
    padding-top: 26px;
}

.schema-tabs {
    display: flex;
    gap: 26px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e4e9f0;
}

.schema-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 14px;
    color: #667085;
    border-bottom: 3px solid transparent;
    font-size: 16px;
    font-weight: 900;
}

.schema-tabs a.active {
    color: var(--green);
    border-color: var(--green);
}

.schema-panel {
    padding: 22px;
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .05);
}

.schema-heading {
    margin-bottom: 20px;
}

.schema-title-row,
.schema-form-heading > div {
    display: flex;
    align-items: center;
    gap: 16px;
}

.schema-heading-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 56px;
    height: 56px;
    color: var(--green);
    background: #f2fbf5;
    border: 1px solid #cfeeda;
    border-radius: 8px;
    font-size: 28px;
}

.schema-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.schema-stats-row article {
    position: relative;
}

.schema-stats-row article em {
    position: absolute;
    right: 22px;
    bottom: 24px;
    color: var(--green);
    font-style: normal;
    font-weight: 900;
}

.schema-stats-row article.danger > iconify-icon {
    color: #dc2626;
    background: #fee2e2;
}

.schema-stats-row article.danger em {
    color: #dc2626;
}

.schema-filter-bar {
    display: grid;
    grid-template-columns: minmax(240px, 420px) 1fr 260px;
    gap: 18px;
    align-items: center;
    margin: 22px 0;
    padding: 14px;
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .04);
}

.schema-filter-bar input,
.schema-filter-bar select,
.schema-segmented button {
    height: 42px;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-weight: 800;
}

.schema-segmented {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.schema-segmented button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    cursor: pointer;
}

.schema-segmented button.active {
    color: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(22, 130, 54, .1);
}

.schema-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.schema-page-card {
    padding: 18px;
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
}

.schema-page-card h2 {
    margin: 0 0 4px;
    color: #172554;
    font-size: 18px;
    letter-spacing: 0;
}

.schema-page-card p {
    margin: 0 0 14px;
    color: #667085;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
    font-weight: 800;
}

.schema-card-status {
    display: grid;
    gap: 10px;
    min-height: 64px;
    margin-bottom: 14px;
}

.schema-badge,
.schema-type,
.schema-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.schema-badge.added,
.schema-state.added {
    color: var(--green);
    background: #eaf8ee;
}

.schema-badge.missing,
.schema-state.missing {
    color: #c2410c;
    background: #fff4df;
}

.schema-type {
    color: #475467;
    padding: 0;
    border-radius: 0;
}

.schema-type.muted {
    color: #98a2b3;
}

.schema-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.schema-card-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    color: #475467;
    background: #fff;
    border: 1px solid #dfe5ee;
    border-radius: 6px;
    font-weight: 900;
}

.schema-card-actions a.primary {
    color: #fff;
    background: var(--green);
    border-color: var(--green);
}

.schema-card-actions a.outline {
    color: var(--green);
    border-color: #7ac994;
}

.schema-modal-card {
    max-width: 980px;
}

.schema-inline-editor {
    max-width: 1040px;
    padding: 10px 0 2px;
}

.schema-form-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.schema-form-heading h2 {
    margin: 0;
}

.schema-form-heading p {
    margin: 4px 0 0;
    color: #667085;
    font-weight: 700;
}

.schema-form label > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #111827;
    font-weight: 900;
}

.schema-form {
    display: grid;
    gap: 16px;
}

.schema-form label {
    display: block;
    margin: 0;
}

.schema-form input,
.schema-form select,
.schema-form textarea {
    display: block;
    width: 100%;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-weight: 700;
}

.schema-form input,
.schema-form select {
    height: 44px;
    padding: 0 14px;
}

.schema-form textarea {
    padding: 14px;
}

.schema-code-field {
    min-height: 330px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.55;
}

.schema-inline-editor .schema-code-field {
    min-height: 400px;
}

.schema-inline-editor .schema-form label {
    max-width: 860px;
}

.schema-help {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: -4px 0 16px;
    color: #667085;
    font-size: 13px;
    font-weight: 800;
}

.schema-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.schema-form-actions button,
.schema-form-actions a,
.schema-remove-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 22px;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.schema-form-actions button:first-child {
    color: #fff;
    background: var(--green);
    border-color: var(--green);
}

.schema-form-actions button:disabled,
.schema-form select:disabled,
.schema-form textarea:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.schema-form-actions button.secondary.is-valid {
    color: var(--green);
    border-color: #7ac994;
    background: #eaf8ee;
}

.schema-empty-help {
    color: #c2410c;
}

.schema-remove-row {
    margin-top: 14px;
}

.schema-remove-row .delete-button {
    color: #ef3f5f;
}

@media (max-width: 1180px) {
    .schema-card-grid,
    .schema-stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schema-filter-bar {
        grid-template-columns: 1fr;
    }

    .schema-segmented {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 760px) {
    .schema-card-grid,
    .schema-stats-row {
        grid-template-columns: 1fr;
    }

    .schema-form-heading {
        display: block;
    }

    .schema-state {
        margin-top: 14px;
    }
}

.compact-checkbox-field span {
    line-height: 1;
}

.ck-editor {
    margin-bottom: 16px;
}

.ck-editor__editable {
    min-height: 220px;
}

.related-blogs {
    margin-top: 42px;
}

@media (max-width: 1180px) {
    .store-blog-grid,
    .store-blog-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .store-blog-section,
    .blog-page,
    .blog-detail-page {
        width: min(100% - 28px, 1240px);
        margin-top: 34px;
    }

    .store-blog-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .store-blog-grid,
    .store-blog-benefits {
        grid-template-columns: 1fr;
    }

    .blog-detail-card {
        padding: 18px;
    }

    .blog-detail-card h1 {
        font-size: 28px;
    }
}

/* =====================================================
   PRODUCT CARD — REDESIGN
   ===================================================== */

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid #e8eeea;
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
    cursor: default;
}

.product-card:hover {
    box-shadow: 0 10px 32px rgba(22,130,54,.12);
    transform: translateY(-4px);
    border-color: #b8dfc4;
    z-index: 2;
}

/* ---- Image area ---- */
.product-image-wrap {
    display: block;
    position: relative;
    background: linear-gradient(145deg, #f4faf6 0%, #edf7f1 100%);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.pc-image-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-image-inner img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    transition: transform .35s ease;
}

.product-card:hover .pc-image-inner img {
    transform: scale(1.07);
}

.pc-img-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #b5d4bf;
    font-size: 56px;
}

/* ---- Discount badge ---- */
.pc-discount-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    padding: 5px 9px 5px 10px;
    background: #e53e3e;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border-bottom-right-radius: 10px;
    letter-spacing: .4px;
}

/* ---- Out of stock ribbon ---- */
.pc-oos-ribbon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 6px;
    background: rgba(220,38,38,.88);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .3px;
}

/* ---- Body ---- */
.pc-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px 13px 13px;
    gap: 5px;
    border-top: 1px solid #edf5ef;
}

.pc-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.pc-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -.1px;
    flex: 1;
}

.pc-name:hover { color: var(--green); }

.pc-unit {
    margin: 0;
    color: #9ca3af;
    font-size: 11.5px;
    font-weight: 500;
}

.pc-low-stock {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 6px 7px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    margin-top: 1px;
}

/* ---- Footer ---- */
.pc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f0f5f2;
}

.pc-prices {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pc-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.2px;
}

.pc-mrp {
    font-size: 11.5px;
    color: #b0b8b4;
    text-decoration: line-through;
}

/* ---- ADD button ---- */
.pc-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 14px;
    height: 36px;
    background: #fff;
    color: var(--green);
    border: 2px solid var(--green);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: .3px;
    transition: background .15s ease, color .15s ease;
}

.pc-add-btn:hover:not(:disabled) {
    background: var(--green);
    color: #fff;
}

.pc-add-btn:disabled {
    border-color: #fca5a5;
    color: #dc2626;
    cursor: not-allowed;
    font-size: 11px;
    background: #fff;
}

.pc-add-btn[hidden],
.pc-stepper[hidden] { display: none; }

/* ---- Stepper ---- */
.pc-stepper {
    display: grid;
    grid-template-columns: 32px 28px 32px;
    align-items: center;
    height: 36px;
    background: var(--green);
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    font-weight: 800;
}

.pc-stepper button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 36px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    padding: 0;
    min-width: 0;
    transition: background .12s;
}

.pc-stepper button:hover { background: rgba(0,0,0,.18); }

.pc-stepper span {
    text-align: center;
    font-size: 14px;
    font-weight: 800;
}

/* Keep legacy selectors working */
.product-card-add[hidden], .product-card-stepper[hidden] { display: none; }


/* =====================================================
   NEW HOME PRODUCT SECTION (hps)
   ===================================================== */

.hps {
    margin-top: 44px;
}

.hps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.hps-title-block {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hps-accent {
    display: block;
    width: 5px;
    height: 38px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--green) 0%, #a8e6bc 100%);
    flex-shrink: 0;
}

.hps-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--ink);
}

.hps-desc {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.hps-see-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    background: #f0faf3;
    color: var(--green);
    border: 1.5px solid #c3e8cc;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}

.hps-see-all:hover {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

/* product rail — horizontal scroll */
.hps-rail {
    display: grid;
    grid-auto-columns: 190px;
    grid-auto-flow: column;
    align-items: start;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hps-rail::-webkit-scrollbar { display: none; }

.hps-rail .product-card {
    scroll-snap-align: start;
    width: 190px;
}

/* Section backgrounds — alternating for visual rhythm */
.hps:nth-child(even) {
    background: transparent;
}

/* Featured section (first product section) */
.hps--featured .hps-rail {
    grid-auto-columns: 180px;
}

/* Deals strip between hero and categories */
.deals-strip {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    margin: 20px 0 0;
    padding: 14px 18px;
    background: linear-gradient(90deg, #0d6327 0%, #168236 60%, #1da84a 100%);
    border-radius: 12px;
    align-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

.deals-strip-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    padding-right: 14px;
    border-right: 1.5px solid rgba(255,255,255,.3);
    flex-shrink: 0 !important;
    line-height: 1.4;
    text-transform: uppercase;
}

.deals-strip-label iconify-icon {
    font-size: 18px;
    color: #ffd43b;
    flex-shrink: 0;
}

.deals-strip-marquee {
    display: flex !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.deals-strip-marquee-inner {
    display: flex !important;
    flex-direction: row !important;
    gap: 28px;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    animation: deals-marquee-scroll 22s linear infinite;
    will-change: transform;
}

.deals-strip-marquee-inner span {
    display: inline !important;
    color: rgba(255,255,255,.9) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    line-height: 1.4;
}

.deals-strip-marquee-inner strong {
    color: #ffd43b !important;
    font-weight: 700 !important;
}

@keyframes deals-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Trust badges row */
.trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 40px;
    padding: 20px 24px;
    background: #f0faf3;
    border-radius: 14px;
    border: 1.5px solid #d4eedd;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.trust-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    color: var(--green);
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(22,130,54,.12);
}

.trust-badge-text strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
}

.trust-badge-text span {
    font-size: 11px;
    color: var(--muted);
}

/* Section divider */
.section-wave {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
    margin: 8px 0 0;
    border: none;
}

/* Responsive */
@media (max-width: 600px) {
    .hps-title { font-size: 18px; }
    .hps-accent { height: 30px; }
    .hps-rail { grid-auto-columns: 160px; gap: 10px; }
    .hps-rail .product-card { width: 160px; }
    .trust-row { grid-template-columns: repeat(2, 1fr); }
    .deals-strip { border-radius: 8px; padding: 12px 14px; }
}

@media (max-width: 380px) {
    .hps-rail { grid-auto-columns: 148px; }
    .hps-rail .product-card { width: 148px; }
    .pc-add-btn { padding: 0 10px; font-size: 12px; }
}

/* =====================================================
   ALL CATEGORIES PAGE — PROFESSIONAL REDESIGN
   ===================================================== */

.cat-page-header {
    padding: 28px 28px 20px;
    border-bottom: 1px solid #e8f5ec;
}

.cat-page-header h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
}

.cat-page-header p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--muted);
}

.all-categories-content {
    padding: 24px 28px 32px;
}

.all-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* Card */
.cat-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid #d0edda;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.cat-card:hover {
    box-shadow: 0 10px 32px rgba(22, 130, 54, .13);
    transform: translateY(-5px);
    border-color: var(--green);
}

/* Image area */
.cat-card-img {
    position: relative;
    background: linear-gradient(145deg, #f0faf3 0%, #e8f5ec 100%);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

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

.cat-card-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--green);
    font-size: 56px;
    opacity: .45;
}

/* Name strip */
.cat-card-name {
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    text-transform: capitalize;
    background: #fff;
    border-top: 1px solid #e8f5ec;
    line-height: 1.3;
}

.cat-card:hover .cat-card-name {
    color: var(--green-dark);
}

/* Responsive */
@media (max-width: 900px) {
    .all-categories-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .all-categories-content { padding: 16px 16px 28px; }
    .cat-page-header { padding: 20px 16px 16px; }
}

@media (max-width: 600px) {
    .all-categories-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cat-card-name { font-size: 13px; padding: 10px 10px; }
}

/* Category name-only fallback (no image) */
.category-name-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 12px;
    font-size: 15px;
    font-weight: 700;
    color: #555;
    text-align: center;
    text-transform: capitalize;
    line-height: 1.3;
    background: transparent;
}

.cat-card-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 16px;
    font-size: 15px;
    font-weight: 700;
    color: #555;
    text-align: center;
    text-transform: capitalize;
    line-height: 1.3;
}