:root {
    color-scheme: light;
    --store-green: #0b4a35;
    --store-green-deep: #073b2b;
    --store-green-soft: #eaf1eb;
    --store-gold: #d9aa4b;
    --store-cream: #f8f7f1;
    --store-ink: #18372d;
    --store-muted: #68776e;
    --store-line: #e7e8df;
}

html {
    background: var(--store-cream);
    accent-color: var(--store-green);
}

body {
    background-color: var(--store-cream) !important;
    color: var(--store-ink);
}

[class~="bg-teal-900"],
[class~="bg-teal-800"],
[class~="bg-teal-700"],
[class~="bg-teal-600"],
[class~="bg-teal-500"] {
    background-color: var(--store-green) !important;
}

[class~="hover:bg-teal-700"]:hover,
[class~="hover:bg-teal-600"]:hover {
    background-color: var(--store-green-deep) !important;
}

[class~="bg-teal-50"],
[class~="bg-teal-100"],
[class~="bg-teal-200"],
[class~="hover:bg-teal-50"]:hover,
[class~="hover:bg-teal-100"]:hover {
    background-color: var(--store-green-soft) !important;
}

[class~="text-teal-900"],
[class~="text-teal-800"],
[class~="text-teal-700"],
[class~="text-teal-600"],
[class~="text-teal-500"],
[class~="text-teal-400"],
[class~="text-teal-300"],
[class~="hover:text-teal-600"]:hover,
[class~="hover:text-teal-700"]:hover {
    color: var(--store-green) !important;
}

[class~="text-teal-200"],
[class~="text-teal-100"],
[class~="hover:text-teal-200"]:hover {
    color: #f0cf83 !important;
}

[class~="border-teal-900"],
[class~="border-teal-800"],
[class~="border-teal-700"],
[class~="border-teal-600"],
[class~="border-teal-500"],
[class~="focus:border-teal-500"]:focus {
    border-color: var(--store-green) !important;
}

[class~="focus:ring-teal-100"]:focus,
[class~="focus:ring-teal-500"]:focus {
    --tw-ring-color: rgb(11 74 53 / 0.2) !important;
}

[class~="bg-amber-600"],
[class~="bg-amber-500"],
[class~="bg-amber-400"],
[class~="hover:bg-amber-400"]:hover,
[class~="hover:bg-amber-500"]:hover {
    background-color: var(--store-gold) !important;
}

[class~="text-amber-600"],
[class~="text-amber-500"],
[class~="text-amber-400"],
[class~="hover:text-amber-400"]:hover,
[class~="hover:text-amber-500"]:hover {
    color: #a77827 !important;
}

[class~="border-amber-400"],
[class~="border-amber-500"] {
    border-color: var(--store-gold) !important;
}

[class~="from-teal-900"],
[class~="to-teal-900"],
[class~="from-slate-900"],
[class~="to-slate-900"] {
    --tw-gradient-from: var(--store-green) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(11 74 53 / 0%) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.bg-gradient-to-b[class~="from-teal-900"][class~="to-slate-900"] {
    background-image: linear-gradient(to bottom, var(--store-green), var(--store-green-deep)) !important;
}

[class~="bg-slate-50"],
[class~="bg-gray-50"] {
    background-color: var(--store-cream) !important;
}

[class~="bg-slate-100"],
[class~="bg-gray-100"] {
    background-color: #eef2eb !important;
}

[class~="text-slate-900"],
[class~="text-slate-800"],
[class~="text-slate-700"],
[class~="text-gray-900"],
[class~="text-gray-800"],
[class~="text-gray-700"] {
    color: var(--store-ink) !important;
}

[class~="text-slate-600"],
[class~="text-slate-500"],
[class~="text-gray-600"],
[class~="text-gray-500"] {
    color: var(--store-muted) !important;
}

[class~="border-slate-200"],
[class~="border-slate-100"],
[class~="border-gray-200"],
[class~="border-gray-100"] {
    border-color: var(--store-line) !important;
}

.cart-badge {
    background: var(--store-green) !important;
}

.wishlist-badge {
    background: var(--store-gold) !important;
    color: var(--store-ink) !important;
}

.store-category-page .category-top-bar,
.store-category-page .category-main-header {
    background-color: var(--store-green-deep) !important;
}

.store-category-page .category-main-header {
    background-image: linear-gradient(115deg, var(--store-green-deep), var(--store-green)) !important;
}

.store-category-page .category-search-submit,
.store-category-page .category-desktop-nav {
    background-color: var(--store-green) !important;
}

.store-category-page .category-search-submit {
    border: 1px solid rgb(240 207 131 / 55%);
    color: #f0cf83 !important;
}

.store-category-page .category-search-submit:hover {
    background-color: var(--store-green-deep) !important;
}

.store-category-page .category-desktop-nav {
    border-top: 1px solid rgb(217 170 75 / 38%);
}

.category-landing-hero {
    position: relative;
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    border: 1px solid rgb(217 170 75 / 28%);
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 5%, rgb(217 170 75 / 20%), transparent 34%),
        linear-gradient(120deg, var(--store-green-deep), var(--store-green));
    padding: clamp(22px, 4vw, 40px);
    color: #fff;
    box-shadow: 0 16px 36px rgb(7 59 43 / 13%);
}

.category-landing-hero::after {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 10%) 1px, transparent 0);
    background-size: 22px 22px;
    content: "";
    pointer-events: none;
}

.category-landing-hero__content,
.category-landing-hero__count {
    position: relative;
    z-index: 1;
}

.category-landing-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #f0cf83;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.category-landing-hero h1 {
    margin: 0;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 900;
    line-height: 1.25;
}

.category-landing-hero p {
    margin: 8px 0 0;
    color: rgb(255 255 255 / 78%);
    font-size: 14px;
}

.category-landing-hero__count {
    display: grid;
    min-width: 128px;
    justify-items: center;
    gap: 2px;
    border: 1px solid rgb(240 207 131 / 36%);
    border-radius: 18px;
    background: rgb(255 255 255 / 8%);
    padding: 14px 18px;
    text-align: center;
    backdrop-filter: blur(8px);
}

.category-landing-hero__count i {
    margin-bottom: 2px;
    color: #f0cf83;
}

.category-landing-hero__count strong {
    font-size: 24px;
    line-height: 1.2;
}

.category-landing-hero__count span {
    color: rgb(255 255 255 / 78%);
    font-size: 11px;
}

.category-sort-bar {
    box-shadow: 0 5px 18px rgb(24 55 45 / 5%);
}

.category-sort-options {
    scrollbar-width: none;
}

.category-sort-options::-webkit-scrollbar {
    display: none;
}

.category-tile-image {
    background: var(--store-green-soft) !important;
}

.category-tile-image__photo {
    border-radius: 12px;
    transition: transform 450ms ease;
}

.category-tile-image__photo.is-category-photo {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

.store-category-page .product-card,
.store-category-page .subcategory-card {
    border-color: var(--store-line);
    box-shadow: 0 4px 14px rgb(24 55 45 / 5%);
}

.store-category-page .product-card:hover,
.store-category-page .subcategory-card:hover {
    border-color: rgb(217 170 75 / 65%);
    box-shadow: 0 16px 30px rgb(11 74 53 / 12%);
}

.store-category-page .product-card > div:first-child {
    background: linear-gradient(145deg, #fff, var(--store-green-soft));
}

.store-category-page .noUi-connect {
    background: var(--store-green);
}

.store-category-page .noUi-handle {
    background: var(--store-gold);
}

.store-category-page .noUi-tooltip {
    background: var(--store-green);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    border-color: var(--store-line);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--store-gold);
    outline-color: var(--store-gold);
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.mobile-footer,
.mobile-bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom), 8px);
}

@media (max-width: 767px) {
    body {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
}

.app-install-banner {
    position: fixed;
    z-index: 60;
    inset-inline: 12px;
    bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 480px;
    margin-inline: auto;
    padding: 14px;
    border: 1px solid var(--store-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 36px rgb(24 55 45 / 18%);
    color: var(--store-ink);
    font-family: inherit;
    animation: appInstallEnter 220ms ease-out;
}

.app-install-banner__icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
}

.app-install-banner__icon img {
    width: 100%;
    height: 100%;
}

.app-install-banner__copy {
    min-width: 0;
    flex: 1;
}

.app-install-banner__title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}

.app-install-banner__message {
    margin: 2px 0 0;
    color: var(--store-muted);
    font-size: 12px;
    line-height: 1.45;
}

.app-install-banner__action {
    min-height: 42px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: var(--store-green);
    padding: 0 14px;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.app-install-banner__close {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f1f3ef;
    color: var(--store-ink);
    font-size: 18px;
    cursor: pointer;
}

.app-install-banner__guide {
    margin: 8px 0 0;
    border-top: 1px solid var(--store-line);
    padding-top: 8px;
    color: var(--store-muted);
    font-size: 12px;
    line-height: 1.5;
}

@keyframes appInstallEnter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
    .app-install-banner {
        inset-inline: auto 20px;
        bottom: 20px;
        margin-inline: 0;
    }
}

@media (max-width: 639px) {
    .category-landing-hero {
        min-height: 150px;
        border-radius: 20px;
        padding: 20px;
    }

    .category-landing-hero p {
        max-width: 190px;
        font-size: 12px;
    }

    .category-landing-hero__count {
        min-width: 88px;
        border-radius: 14px;
        padding: 10px;
    }

    .category-landing-hero__count strong {
        font-size: 20px;
    }

    .category-sort-bar {
        display: block;
        overflow: hidden;
        padding: 10px;
    }

    .category-sort-bar > div:first-child {
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .category-sort-options {
        width: max-content;
        flex-wrap: nowrap;
    }

    .category-sort-options a {
        flex: 0 0 auto;
        border-radius: 999px;
        padding: 8px 12px;
    }
}

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