:root {
    /* Digikala-inspired light storefront */
    --background: 240 5% 97%;
    --text: 220 13% 18%;
    --warning: 351 84% 59%;
    --success: 142 71% 45%;
    --success-secondary: 160 84% 39%;
    --muted: 0 0% 100%;
    --border: 220 13% 90%;
    --primary: 191 82% 45%;
    --primary-btn: 191 82% 40%;
    --secondary: 220 14% 96%;
    --ring: 191 82% 45%;
    --radius: 0.5rem;
    --dk-red: #ef4056;
    --dk-red-dark: #d7354a;
}


.dark {
    --background: 220 14% 8%;
    --text: 0 0% 98%;
    --warning: 351 84% 62%;
    --success: 142 69% 58%;
    --success-secondary: 161 94% 30%;
    --muted: 220 12% 12%;
    --border: 220 10% 20%;
    --primary: 191 82% 55%;
    --primary-btn: 191 82% 42%;
    --secondary: 220 10% 18%;
    --ring: 191 82% 55%;
}

.lucide-heart,
[data-lucide="heart"],
.i-lucide-heart {
    fill: none;
    stroke: currentColor;
    transition: fill 0.3s ease;
}

.lucide-heart.filled,
[data-lucide="heart"].filled,
.i-lucide-heart.filled {
    fill: #e02424;
}

input {
    &:-webkit-autofill,
    &:-webkit-autofill:hover {
        -webkit-text-fill-color: hsl(var(--text));
        -webkit-box-shadow: 0 0 0 40rem hsl(var(--muted)) inset,
        0 0 0 1px hsl(var(--muted)) inset;
    }

    &:-webkit-autofill:focus {
        -webkit-text-fill-color: hsl(var(--text));
        -webkit-box-shadow: 0 0 0 40rem hsl(var(--muted)) inset,
        0 0 0 1px hsl(var(--muted)) inset;
    }
}

::selection {
    background: #8884;
}

::-webkit-scrollbar {
    width: .34rem;
    height: .5rem
}

::-webkit-scrollbar-track {
    background-color: hsl(var(--muted)) !important
}

::-webkit-scrollbar-thumb {
    border-radius: calc(var(--radius) - 4px);
    background-color: hsl(var(--secondary)) !important
}


html {
    scrollbar-color: hsl(215.4 16.3% 46.9% / .3)
}

html.dark {
    scrollbar-color: hsl(215.4 16.3% 56.9% / .3)
}


::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2147483646;
}

.dark::view-transition-old(root) {
    z-index: 2147483646;
}

.dark::view-transition-new(root) {
    z-index: 1;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"] {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield !important;
}


.scroll-lock {
    overflow-y: scroll;
    position: fixed;
    width: 100%;
    top: var(--window-scroll-top);
}

:root {
    overflow-y: scroll;
}

* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--text));
}

@media only screen and (min-width: 1024px) {

    .border-gradient::before {
        background: radial-gradient(
                300px circle at var(--x) var(--y),
                hsl(var(--primary)) 0,
                transparent 100%
        );
    }

}


.swiper-button-prev,
.swiper-button-next {
    background-color: hsl(var(--muted));
    color: hsl(var(--text));
    border: 1px solid hsl(var(--border));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
}

.swiper:hover .swiper-button-prev,
.swiper:hover .swiper-button-next,
.swiper:focus-within .swiper-button-prev,
.swiper:focus-within .swiper-button-next {
    opacity: 1;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: hsl(var(--primary));
    color: #fff;
    border-color: hsl(var(--primary));
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 14px;
    font-weight: 700;
}

.swiper .swiper-pagination-bullet,
.swiper .swiper-pagination-bullet-active {
    background-color: black;
    transition: all 0.3s;
    height: 0.375rem;
    width: 0.375rem;
}

.swiper .swiper-pagination-bullet-active {
    width: 1.25rem;
    border-radius: 0.5rem;
    background-color: hsl(var(--primary));
}

.product-card:hover .product-card-img {
    transform: scale(1.04);
}

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid hsl(var(--border) / 0.75);
    border-radius: 0.85rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
    border-color: hsl(var(--border));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.product-card > a {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.product-card__media {
    flex-shrink: 0;
    background: #fff;
    padding: 0.75rem;
}

.dark .product-card__media {
    background: hsl(var(--secondary) / 0.35);
}

.product-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.15rem 0.85rem 0.9rem;
    min-height: 0;
}

.product-card__cart-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    display: inline-flex;
    width: 2.15rem;
    height: 2.15rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    color: hsl(var(--primary));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.product-card__cart-btn:hover {
    background: hsl(var(--primary));
    color: #fff;
    transform: scale(1.05);
}

/* —— Quick-add modal —— */
.quick-add-backdrop {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.quick-add-backdrop.is-visible {
    opacity: 1;
}

.quick-add-backdrop.hidden {
    display: none !important;
}

.quick-add-modal {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    pointer-events: none;
}

@media (min-width: 640px) {
    .quick-add-modal {
        align-items: center;
        padding: 1.25rem;
    }
}

#quick-add-modal.is-open {
    display: flex !important;
    pointer-events: auto;
}

.quick-add {
    position: relative;
    z-index: 46;
    display: flex;
    width: 100%;
    max-width: 34rem;
    max-height: min(92dvh, 40rem);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.75);
    border-radius: 1.35rem 1.35rem 0 0;
    background: hsl(var(--muted));
    box-shadow:
        0 -8px 40px rgba(0, 0, 0, 0.18),
        0 24px 48px -20px rgba(0, 0, 0, 0.28);
    transform: translateY(1.25rem) scale(0.98);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}

@media (min-width: 640px) {
    .quick-add {
        border-radius: 1.35rem;
        transform: translateY(0.75rem) scale(0.97);
    }
}

#quick-add-modal.is-open .quick-add {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.quick-add__head {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid hsl(var(--border) / 0.55);
    padding: 1rem 1.15rem 0.95rem;
}

.quick-add__eyebrow {
    margin-bottom: 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: hsl(var(--primary));
}

.quick-add__heading {
    font-size: 1.05rem;
    font-weight: 800;
    color: hsl(var(--text) / 0.94);
}

.quick-add__close {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: hsl(var(--background));
    color: hsl(var(--text) / 0.55);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.quick-add__close:hover {
    background: hsl(var(--secondary) / 0.55);
    color: hsl(var(--text));
}

.quick-add__slot {
    position: relative;
    display: flex;
    min-height: 24.5rem;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: auto;
}

@media (min-width: 640px) {
    .quick-add__slot {
        min-height: 26rem;
    }
}

.quick-add__loading,
.quick-add__error {
    flex: 1 1 auto;
}

.quick-add__loading {
    display: flex;
    flex-direction: column;
}

.quick-add__placeholder {
    display: flex;
    min-height: 100%;
    flex: 1 1 auto;
    flex-direction: column;
}

.quick-add__placeholder-main {
    flex: 1 1 auto;
}

.quick-add__placeholder-media {
    position: relative;
    overflow: hidden;
}

.quick-add__placeholder-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.quick-add__placeholder-media img.hidden,
.quick-add__placeholder-media-fall.hidden {
    display: none !important;
}

.quick-add__placeholder-media-fall {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        hsl(var(--background)) 25%,
        hsl(var(--secondary) / 0.45) 50%,
        hsl(var(--background)) 75%
    );
    background-size: 200% 100%;
    animation: quick-add-shimmer 1.2s ease-in-out infinite;
}

.quick-add__placeholder-info {
    min-width: 0;
}

.quick-add__placeholder-name {
    margin: 0 0 0.55rem;
    min-height: 2.6rem;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.45;
    color: hsl(var(--text) / 0.9);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.quick-add__placeholder-name:empty,
.quick-add__placeholder-price:empty {
    display: block;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        hsl(var(--background)) 25%,
        hsl(var(--secondary) / 0.45) 50%,
        hsl(var(--background)) 75%
    );
    background-size: 200% 100%;
    animation: quick-add-shimmer 1.2s ease-in-out infinite;
}

.quick-add__placeholder-name:empty {
    height: 1.2rem;
    min-height: 1.2rem;
    width: 85%;
    margin-bottom: 0.75rem;
}

.quick-add__placeholder-line {
    display: block;
    height: 0.75rem;
    width: 100%;
    margin-bottom: 0.55rem;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        hsl(var(--background)) 25%,
        hsl(var(--secondary) / 0.45) 50%,
        hsl(var(--background)) 75%
    );
    background-size: 200% 100%;
    animation: quick-add-shimmer 1.2s ease-in-out infinite;
}

.quick-add__placeholder-line.is-stock {
    width: 38%;
    height: 1.35rem;
    border-radius: 999px;
}

.quick-add__placeholder-line.is-qty {
    width: 9.5rem;
    height: 2.55rem;
    margin-top: 0.35rem;
    margin-bottom: 0;
    border-radius: 0.75rem;
}

.quick-add__placeholder-line.is-more {
    width: 8.5rem;
    height: 0.85rem;
    margin: 0 auto;
}

.quick-add__placeholder-chips {
    display: flex;
    gap: 0.4rem;
    margin: 0.35rem 0 0.65rem;
}

.quick-add__placeholder-chips i {
    display: block;
    width: 2.75rem;
    height: 2rem;
    border-radius: 0.65rem;
    background: linear-gradient(
        90deg,
        hsl(var(--background)) 25%,
        hsl(var(--secondary) / 0.45) 50%,
        hsl(var(--background)) 75%
    );
    background-size: 200% 100%;
    animation: quick-add-shimmer 1.2s ease-in-out infinite;
}

.quick-add__placeholder-foot {
    margin-top: auto;
}

.quick-add__placeholder-price {
    min-width: 5.5rem;
    min-height: 1.35rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: hsl(var(--primary));
}

.quick-add__placeholder-price:empty {
    height: 1.35rem;
    width: 6rem;
}

.quick-add__placeholder-cta {
    display: block;
    width: 9.5rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    background: linear-gradient(
        90deg,
        hsl(var(--primary) / 0.25) 25%,
        hsl(var(--primary) / 0.45) 50%,
        hsl(var(--primary) / 0.25) 75%
    );
    background-size: 200% 100%;
    animation: quick-add-shimmer 1.2s ease-in-out infinite;
}

.quick-add__placeholder-more {
    pointer-events: none;
}

.product-card__cart-btn.is-loading {
    pointer-events: none;
    opacity: 0.65;
}

.quick-add__loading.hidden,
.quick-add__body.hidden,
.quick-add__error.hidden {
    display: none !important;
}

@keyframes quick-add-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.quick-add__body {
    display: flex;
    min-height: 100%;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: auto;
}

.quick-add__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem 1.15rem 0.35rem;
}

@media (min-width: 480px) {
    .quick-add__main {
        grid-template-columns: 9.5rem 1fr;
        gap: 1.15rem;
        align-items: start;
    }
}

.quick-add__media {
    position: relative;
    display: flex;
    aspect-ratio: 1;
    width: 100%;
    max-width: 11rem;
    margin-inline: auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.6);
    border-radius: 1.1rem;
    background: #fff;
}

@media (min-width: 480px) {
    .quick-add__media {
        max-width: none;
        margin-inline: 0;
    }
}

.quick-add__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.65rem;
}

.quick-add__media-ph {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: hsl(var(--text) / 0.28);
    background: hsl(var(--background));
}

.dark .quick-add__media {
    background: hsl(var(--secondary) / 0.35);
}

.quick-add__info {
    min-width: 0;
}

.quick-add__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.55;
    color: hsl(var(--text) / 0.94);
    transition: color 0.15s ease;
}

.quick-add__title:hover {
    color: hsl(var(--primary));
}

.quick-add__stock {
    margin-top: 0.55rem;
}

.quick-add__stock .product-stock {
    font-size: 0.75rem;
}

.quick-add__section {
    margin-top: 1rem;
}

.quick-add__section--qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quick-add__label {
    margin-bottom: 0.55rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: hsl(var(--text) / 0.72);
}

.quick-add__section--qty .quick-add__label {
    margin-bottom: 0;
}

.quick-add__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.quick-add__chip {
    position: relative;
    display: inline-flex;
    min-width: 2.6rem;
    height: 2.45rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: 1px solid hsl(var(--border) / 0.85);
    border-radius: 0.75rem;
    background: hsl(var(--background));
    padding: 0 0.8rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: hsl(var(--text) / 0.88);
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.peer:checked + .quick-add__chip {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.08);
    color: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
}

.quick-add__color {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid hsl(var(--border) / 0.85);
    border-radius: 0.75rem;
    background: hsl(var(--background));
    padding: 0.45rem 0.75rem 0.45rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.88);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.peer:checked + .quick-add__color {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.08);
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
}

.quick-add__swatch {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.quick-add__qty {
    flex-shrink: 0;
}

.quick-add__foot {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.85rem;
    margin-top: auto;
    border-top: 1px solid hsl(var(--border) / 0.55);
    background: linear-gradient(180deg, hsl(var(--muted)) 0%, hsl(var(--background) / 0.55) 100%);
    padding: 0.95rem 1.15rem;
}

.quick-add__price {
    min-width: 0;
    flex: 1 1 auto;
}

.quick-add__price-meta {
    display: flex;
    min-height: 1.1rem;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.quick-add__price-meta del {
    font-size: 0.75rem;
    color: hsl(var(--text) / 0.4);
}

.quick-add__off {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #ef4056;
    padding: 0.1rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
}

.quick-add__price-main {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.quick-add__price-main strong {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: hsl(var(--text));
}

.quick-add__price-main span {
    font-size: 0.72rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.5);
}

.quick-add__cta {
    display: inline-flex;
    min-width: 9.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 0.85rem;
    background: hsl(var(--primary));
    padding: 0.85rem 1.1rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    box-shadow: 0 10px 22px -12px hsl(var(--primary) / 0.9);
    transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.quick-add__cta:hover:not(:disabled) {
    background: hsl(var(--primary-btn));
}

.quick-add__cta:active:not(:disabled) {
    transform: scale(0.98);
}

.quick-add__cta:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.quick-add__cta.is-loading {
    pointer-events: none;
    opacity: 0.8;
}

.quick-add__more {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 1.15rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: hsl(var(--primary));
    transition: opacity 0.15s ease;
}

.quick-add__more:hover {
    opacity: 0.8;
}

.quick-add__error {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 1.5rem 1.15rem;
    text-align: center;
    color: hsl(var(--text) / 0.7);
}

.quick-add__error i {
    color: #ef4056;
}

.quick-add__error p {
    font-size: 0.875rem;
    font-weight: 600;
}

.quick-add__retry {
    margin-top: 0.35rem;
    border-radius: 0.7rem;
    background: hsl(var(--background));
    padding: 0.55rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: hsl(var(--text) / 0.75);
}

.product-card__title {
    display: -webkit-box;
    height: 2.5rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: hsl(var(--text) / 0.88);
}

@media (min-width: 1024px) {
    .product-card__media {
        padding: 1rem;
    }

    .product-card__title {
        height: 2.625rem;
        font-size: 0.875rem;
        line-height: 1.3125rem;
    }
}

.product-card__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    margin-top: auto;
    min-height: 2.85rem;
}

.product-card__old {
    min-height: 1.05rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.05rem;
    color: hsl(var(--text) / 0.38);
}

.product-card__new {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: wrap;
    min-height: 1.5rem;
}

.product-card__amount {
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: hsl(var(--text));
    letter-spacing: -0.01em;
}

.product-card__currency {
    font-size: 0.7rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.5);
}

.product-card__discount {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--dk-red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(239, 64, 86, 0.35);
}

.product-card__discount--inline {
    position: static;
    min-width: 1.85rem;
    height: 1.25rem;
    box-shadow: none;
    font-size: 0.68rem;
}

.product-card__timer {
    width: 100%;
    margin-top: 0.55rem;
    min-height: 1.85rem;
}

.product-card__timer .product-special-timer {
    margin-bottom: 0.3rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dk-red);
    font-variant-numeric: tabular-nums;
}

.product-card__progress {
    height: 0.25rem;
    width: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: hsl(var(--secondary));
}

.product-card__progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--dk-red);
    transition: width 1s ease;
}

/* Equal-height slides in product carousels */
.product-slider .swiper-wrapper,
.blog-swiper .swiper-wrapper {
    align-items: stretch;
}

.product-slider .swiper-slide,
.blog-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.product-slider .swiper-slide > .product-card,
.product-slider .swiper-slide > * {
    width: 100%;
}

.dk-bestsellers__item > a > p,
.dk-bestsellers__item .line-clamp-2 {
    display: -webkit-box;
    height: 2.5rem;
    min-height: 2.5rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.25rem;
}

.dk-bestsellers__item .product-card__price {
    min-height: 2.85rem;
}

.dk-bestsellers__item .product-card__old {
    min-height: 1.05rem;
}

.banner-tile {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.banner-tile:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Section headers — Digikala style */
.section-head {
    margin-bottom: 1rem;
}

.section-head__title {
    font-size: 1rem;
    font-weight: 800;
    color: hsl(var(--text));
    letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
    .section-head__title {
        font-size: 1.1rem;
    }
}

.section-head__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: hsl(var(--primary));
    transition: color 0.15s ease, gap 0.15s ease;
}

.section-head__link:hover {
    color: hsl(var(--primary-btn));
    gap: 0.4rem;
}

/* White product rail */
.dk-rail {
    border: 1px solid hsl(var(--border) / 0.7);
    border-radius: 1rem;
    background: hsl(var(--muted));
    padding: 1rem 0.75rem 1.1rem;
}

@media (min-width: 1024px) {
    .dk-rail {
        padding: 1.15rem 1rem 1.25rem;
    }
}

.dk-rail .product-card {
    border-radius: 0.75rem;
}

.dk-rail .section-head {
    padding-inline: 0.25rem;
}

/* Digikala-style hero */
.dk-hero {
    display: grid;
    gap: 0.75rem;
}

.dk-hero__main {
    min-width: 0;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.dk-hero__sides {
    display: none;
}

.dk-hero__side {
    display: block;
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
    flex: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dk-hero__side:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.dk-hero__side-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 320 / 142;
    transition: transform 0.4s ease;
}

.dk-hero__side:hover .dk-hero__side-img {
    transform: scale(1.04);
}

.dk-hero__img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.dk-hero__img--mobile {
    display: block;
    aspect-ratio: 800 / 400;
}

.dk-hero__img--desktop {
    display: none;
    aspect-ratio: 1040 / 300;
}

@media (min-width: 640px) {
    .dk-hero__img--mobile {
        display: none;
    }

    .dk-hero__img--desktop {
        display: block;
    }
}

.main-banner {
    width: 100%;
    height: 100%;
}

.main-banner .swiper-pagination {
    bottom: 12px !important;
}

.main-banner .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: #fff;
    opacity: 0.7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: width 0.2s ease, opacity 0.2s ease;
}

.main-banner .swiper-pagination-bullet-active {
    opacity: 1;
    background: #ef4056;
    width: 16px;
    border-radius: 999px;
}

.main-banner .main-banner-nav {
    display: none;
    width: 40px;
    height: 40px;
    margin-top: 0;
    background: #fff;
    border-radius: 999px;
    color: #424750;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.main-banner:hover .main-banner-nav {
    opacity: 1;
}

.main-banner .main-banner-nav::after {
    font-size: 14px;
    font-weight: 700;
}

.main-banner .swiper-button-prev {
    right: auto;
    left: 12px;
}

.main-banner .swiper-button-next {
    left: auto;
    right: 12px;
}

/* Digikala shortcuts */
.dk-shortcuts {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.25rem 0.15rem 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.dk-shortcuts::-webkit-scrollbar {
    display: none;
}

.dk-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    min-width: 4.5rem;
    flex-shrink: 0;
    text-align: center;
    color: hsl(var(--text) / 0.85);
    transition: color 0.15s ease, transform 0.15s ease;
}

.dk-shortcut:hover {
    color: #ef4056;
    transform: translateY(-2px);
}

.dk-shortcut__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border) / 0.7);
    overflow: hidden;
    color: hsl(var(--text) / 0.7);
}

.dk-shortcut__icon--amazing {
    background: linear-gradient(145deg, #ef4056, #ff6b7d);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 64, 86, 0.28);
}

.dk-shortcut__icon--fire {
    background: linear-gradient(145deg, #fff1e8, #ffe0cc);
    border-color: #ffd0b0;
    color: #e85d04;
}

.dk-shortcut__icon--new {
    background: linear-gradient(145deg, #e8f8fc, #d4f1f9);
    border-color: #b8e6f2;
    color: #0ea5c9;
}

.dk-shortcut__icon--all {
    background: linear-gradient(145deg, #f0f4ff, #e4ebff);
    border-color: #cfd9ff;
    color: #4f6ef7;
}

.dk-shortcut__img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.dk-shortcut__img--fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dk-shortcut__label {
    max-width: 4.75rem;
    font-size: 0.75rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Digikala amazing offers — red shell + promo + white cards */
.dk-amazing {
    display: grid;
    overflow: hidden;
    border-radius: 1rem;
    background: linear-gradient(145deg, #ef4056 0%, #f25c70 42%, #ff7a55 100%);
    box-shadow: 0 10px 28px -14px rgba(239, 64, 86, 0.5);
}

.dk-amazing__promo {
    display: none;
}

.dk-amazing__main {
    min-width: 0;
}

.dk-amazing__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem 0.25rem;
    color: #fff;
    background: transparent;
}

.dk-amazing__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.dk-amazing__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.dk-amazing__title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
}

.dk-amazing__sub {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    opacity: 0.92;
}

.dk-amazing__all {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.dk-amazing__all:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-2px);
}

.dk-amazing__body {
    padding: 0.55rem 0.55rem 0.9rem;
}

.dk-amazing .product-card {
    border-color: transparent;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.dk-amazing .product-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.dk-amazing .product-card__media {
    background: #fff;
}

.dark .dk-amazing .product-card {
    background: hsl(var(--muted));
    border-color: hsl(var(--border) / 0.6);
}

/* Trust strip */
.dk-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0.35rem auto 0.75rem;
    padding: 0 1rem;
    max-width: 80rem;
    list-style: none;
}

.dk-trust__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    border: 1px solid hsl(var(--border) / 0.7);
    border-radius: 0.9rem;
    background: hsl(var(--muted));
    padding: 0.75rem 0.85rem;
}

.dk-trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    border-radius: 999px;
}

.dk-trust__icon--ship {
    background: #e8f8fc;
    color: #0ea5c9;
}

.dk-trust__icon--pay {
    background: #eaf8ef;
    color: #16a34a;
}

.dk-trust__icon--return {
    background: #fff4e8;
    color: #ea580c;
}

.dk-trust__icon--support {
    background: #f0f0ff;
    color: #6366f1;
}

.dk-trust__title {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
}

.dk-trust__sub {
    margin-top: 0.1rem;
    font-size: 0.7rem;
    color: hsl(var(--text) / 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .dk-trust__icon--ship,
.dark .dk-trust__icon--pay,
.dark .dk-trust__icon--return,
.dark .dk-trust__icon--support {
    background: hsl(var(--secondary));
}

.dk-banners-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.dk-banner-tile {
    display: block;
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.dk-banner-tile__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 320;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.dk-banner-tile:hover .dk-banner-tile__img {
    transform: scale(1.03);
}

.dk-banner-tile__img--wide {
    aspect-ratio: 640 / 240;
}

.dk-banners-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

/* Categories strip */
.dk-categories {
    border-radius: 1rem;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border) / 0.7);
    padding: 1.25rem 0.75rem 1.35rem;
}

.dk-categories__title {
    margin-bottom: 1.15rem;
    text-align: center;
}

.dk-categories__title h2 {
    font-size: 1.05rem;
    font-weight: 800;
}

.dk-categories__row {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.15rem 0.35rem 0.35rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
}

.dk-categories__row::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .dk-categories__row {
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
        gap: 1.35rem 1.75rem;
    }
}

.dk-category {
    display: flex;
    width: 5.25rem;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    user-select: none;
}

@media (min-width: 640px) {
    .dk-category {
        width: 6.25rem;
    }
}

.dk-category__ring {
    display: flex;
    width: 5rem;
    height: 5rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 999px;
    background: #fff;
    padding: 0.5rem;
    border: 1px solid hsl(var(--border) / 0.85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dark .dk-category__ring {
    background: hsl(var(--secondary));
}

.dk-category:hover .dk-category__ring {
    transform: translateY(-3px);
    border-color: hsl(var(--primary) / 0.45);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.dk-category__name {
    margin-top: 0.65rem;
    max-width: 100%;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Best sellers Digikala grid */
.dk-bestsellers {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid hsl(var(--border) / 0.75);
    background: hsl(var(--muted));
}

.dk-bestsellers__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
    .dk-bestsellers__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.dk-bestsellers__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem;
    border-inline-start: 1px solid hsl(var(--border) / 0.65);
    border-bottom: 1px solid hsl(var(--border) / 0.65);
    transition: background-color 0.15s ease;
}

.dk-bestsellers__item:hover {
    background: hsl(var(--background) / 0.55);
}

.dk-bestsellers__img {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.5rem;
}

.dark .dk-bestsellers__img {
    background: hsl(var(--secondary) / 0.5);
}

.dk-bestsellers__img img {
    aspect-ratio: 1;
    width: 100%;
    object-fit: contain;
    transition: transform 0.45s ease;
}

.dk-bestsellers__item:hover .dk-bestsellers__img img {
    transform: scale(1.05);
}

@media (min-width: 768px) {
    .dk-banners-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .dk-trust {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.85rem;
        margin-block: 0.75rem 1rem;
        padding-inline: 1.25rem;
    }
}

@media (min-width: 640px) {
    .main-banner .main-banner-nav {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dk-shortcuts {
        justify-content: center;
        gap: 1.15rem;
        overflow: visible;
        margin-top: 1.35rem;
    }

    .dk-shortcut {
        min-width: 5rem;
    }

    .dk-shortcut__icon {
        width: 3.65rem;
        height: 3.65rem;
    }

    .dk-amazing__head {
        padding: 1.1rem 1.25rem 0.35rem;
    }

    .dk-amazing__title {
        font-size: 1.2rem;
    }

    .dk-categories {
        padding: 1.75rem 1.25rem 1.9rem;
    }

    .dk-categories__title h2 {
        font-size: 1.15rem;
    }

    .dk-category__ring {
        width: 5.75rem;
        height: 5.75rem;
    }
}

@media (min-width: 1024px) {
    .dk-hero {
        grid-template-columns: minmax(0, 1fr) 292px;
        gap: 1rem;
        align-items: stretch;
    }

    .dk-hero__sides {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        min-height: 100%;
    }

    .dk-hero__side {
        flex: 1 1 0;
        min-height: 0;
    }

    .dk-hero__side-img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .dk-banners-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }

    .dk-amazing {
        grid-template-columns: 168px minmax(0, 1fr);
        align-items: stretch;
    }

    .dk-amazing__promo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.85rem;
        padding: 1.5rem 1rem;
        text-align: center;
        color: #fff;
    }

    .dk-amazing__promo-icon {
        display: flex;
        width: 4.25rem;
        height: 4.25rem;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
        font-size: 1.75rem;
        font-weight: 900;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    }

    .dk-amazing__promo-title {
        font-size: 1.35rem;
        font-weight: 900;
        line-height: 1.35;
    }

    .dk-amazing__promo-sub {
        font-size: 0.75rem;
        opacity: 0.9;
        max-width: 9rem;
        line-height: 1.5;
    }

    .dk-amazing__promo-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        margin-top: 0.35rem;
        padding: 0.45rem 0.9rem;
        border-radius: 999px;
        background: #fff;
        color: var(--dk-red);
        font-size: 0.8125rem;
        font-weight: 800;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .dk-amazing__promo-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    }

    .dk-amazing__head {
        display: none;
    }

    .dk-amazing__body {
        padding: 1rem 0.85rem 1.15rem 0.5rem;
    }
}

.dark .dk-hero__main,
.dark .dk-hero__side,
.dark .dk-banner-tile {
    background: hsl(var(--muted));
    box-shadow: none;
}

.dark .dk-categories {
    background: hsl(var(--muted));
}

/* Mobile bottom tab bar */
.site-mobile-tabbar {
    border-top: 1px solid hsl(var(--border) / 0.8);
    background: hsl(var(--muted) / 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, 0.35);
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: transform 0.3s ease;
}

.site-mobile-tabbar__item {
    display: flex;
    width: 25%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.55rem 0.25rem 0.45rem;
    font-size: 0.68rem;
    color: hsl(var(--text) / 0.55);
    transition: color 0.15s ease;
}

.site-mobile-tabbar__item.is-active {
    color: var(--dk-red);
    font-weight: 700;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.55s ease var(--reveal-delay, 0ms),
        transform 0.55s ease var(--reveal-delay, 0ms);
}

.reveal-on-scroll.is-visible,
.reveal-on-scroll:first-of-type {
    opacity: 1;
    transform: translateY(0);
}

.category-icon--img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.category-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(145deg, hsl(var(--primary) / 0.14), hsl(var(--secondary)));
}

.category-fallback__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-fallback--sm,
.category-icon--sm {
    width: 1.5rem;
    height: 1.5rem;
}

.category-fallback--md,
.category-icon--md {
    width: 4.5rem;
    height: 4.5rem;
}

.category-fallback--lg,
.category-icon--lg {
    width: 100%;
    height: 100%;
}

.category-fallback--tile {
    width: 72px;
    height: 72px;
    border-radius: 0.75rem;
}

.dark .category-fallback {
    background: linear-gradient(145deg, hsl(var(--primary) / 0.22), hsl(var(--muted)));
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll,
    .product-card-img,
    .banner-tile img,
    .category-item img {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

.dark .swiper-button-prev,
.dark .swiper-button-next {
    background-color: hsl(var(--secondary));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* —— Site header —— */
.site-header {
    border-bottom: 1px solid hsl(var(--border) / 0.85);
    background: hsl(var(--muted) / 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 hsl(var(--border) / 0.5), 0 4px 18px -14px hsl(var(--text) / 0.2);
}

/* Desktop top bar sits above sliding category nav */
@media (min-width: 1024px) {
    .site-header__top {
        position: relative;
        z-index: 40;
        width: 100%;
        background: hsl(var(--muted));
        isolation: isolate;
    }

    .site-nav {
        z-index: 10;
    }

    /* When scrolling down, clip nav fully under the opaque top bar */
    body.is-scroll-down .site-header {
        overflow: hidden;
    }

    .site-nav.-translate-y-full {
        z-index: 5;
        pointer-events: none;
        visibility: hidden;
        transition:
            transform 0.3s ease,
            visibility 0s linear 0.3s;
    }

    body:not(.is-scroll-down) .site-nav {
        visibility: visible;
        transition:
            transform 0.3s ease,
            visibility 0s linear 0s;
    }
}

/* Mobile: keep logo bar above sliding search */
.header-mobile-top {
    z-index: 20;
    background: hsl(var(--muted) / 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.header-mobile-search {
    z-index: 10;
}

.site-nav {
    background: hsl(var(--muted) / 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid hsl(var(--border) / 0.55);
    box-shadow: 0 8px 20px -16px hsl(var(--text) / 0.35);
}

.site-nav > nav {
    min-height: 2.85rem;
}

.site-mega-menu {
    width: min(960px, 92vw);
    min-height: 380px;
    border: 1px solid hsl(var(--border));
    border-top: 0;
    border-radius: 0 0 1rem 1rem;
    background: hsl(var(--muted));
    box-shadow: 0 18px 40px -20px hsl(var(--text) / 0.45);
}

.site-mega-menu__aside {
    background: hsl(var(--background));
    border-inline-end: 1px solid hsl(var(--border) / 0.8);
    max-height: 420px;
    min-height: 380px;
    min-width: 220px;
    overflow-y: auto;
}

.site-mega-menu__panel {
    max-height: 420px;
    min-height: 380px;
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.site-nav-link--hot {
    color: hsl(var(--warning));
    font-weight: 600;
}

.site-nav-link--hot:hover {
    background: hsl(var(--warning) / 0.12);
    color: hsl(var(--warning));
}

.site-nav-end {
    margin-inline-start: auto;
    display: none;
    align-items: center;
    gap: 0.75rem;
    padding-inline-end: 0.25rem;
}

@media (min-width: 1024px) {
    .site-nav-end {
        display: flex;
    }
}

.site-nav-support {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.35rem 0.25rem 0.15rem;
    border-radius: 999px;
    font-size: 0.75rem;
    color: hsl(var(--text) / 0.65);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav-support:hover {
    background: hsl(var(--background));
    color: hsl(var(--primary));
}

.site-nav-support__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
}

.site-nav-more {
    z-index: 30;
    width: 13rem;
}

.site-nav-quick {
    display: none;
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav-show-lg {
    display: none;
}

.site-nav-wide {
    display: none;
}

.site-nav-divider-lg {
    display: none;
    width: 1px;
    height: 1rem;
    flex-shrink: 0;
    background: hsl(var(--border));
    margin-inline: 0.25rem;
}

@media (min-width: 1024px) {
    .site-nav-quick,
    .site-nav-show-lg {
        display: inline-flex;
    }

    .site-nav-divider-lg {
        display: block;
    }

    .site-nav-more-lg-only {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .site-nav-wide {
        display: inline-flex;
    }

    .site-nav-more-xl-only {
        display: none !important;
    }
}

.site-mega-empty {
    display: flex;
    height: 12rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: hsl(var(--text) / 0.5);
}

.site-mega-submenu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
    row-gap: 1.75rem;
}

@media (min-width: 1280px) {
    .site-mega-submenu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.site-search {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: hsl(var(--secondary));
    padding-inline: 0.35rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-search:focus-within {
    background: #fff;
    border-color: hsl(var(--primary) / 0.45);
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
}

.dark .site-search:focus-within {
    background: hsl(var(--background));
}

.site-search-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.55rem;
    color: hsl(var(--text) / 0.55);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.site-search-icon-btn:hover {
    color: hsl(var(--primary));
    background: hsl(var(--muted));
}

.site-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.35rem;
    margin: 0.3rem;
    margin-inline-start: 0.15rem;
    padding: 0 1.1rem;
    border-radius: 0.55rem;
    background: hsl(var(--primary));
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.site-search-btn:hover {
    background: hsl(var(--primary-btn));
}

.site-search-btn:active {
    transform: scale(0.98);
}

/* —— Live search panel —— */
.site-search.is-active {
    background: #fff;
    border-color: hsl(var(--primary) / 0.45);
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
}

.dark .site-search.is-active {
    background: hsl(var(--background));
}

.live-search__clear {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-inline-end: 0.35rem;
    border-radius: 0.45rem;
    color: hsl(var(--text) / 0.45);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.live-search__clear:hover {
    background: hsl(var(--secondary));
    color: hsl(var(--text));
}

.live-search__clear.hidden {
    display: none !important;
}

.live-search__spinner {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-inline-end: 0.45rem;
    border: 2px solid hsl(var(--primary) / 0.2);
    border-top-color: hsl(var(--primary));
    border-radius: 9999px;
    animation: live-search-spin 0.7s linear infinite;
}

.live-search__spinner.hidden {
    display: none !important;
}

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

/* بک‌دراپ تمام‌صفحه — باید زیر اینپوت/پنل باشد تا کلیک بیرون پنل را ببندد */
.live-search__overlay {
    position: fixed;
    inset: 0;
    z-index: 28;
    background: rgba(15, 23, 42, 0.32);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 0;
    padding: 0;
    margin: 0;
    cursor: default;
}

.live-search__overlay.hidden {
    display: none !important;
}

.live-search.hidden {
    display: none !important;
}

/* رَپ جستجو بالای اوورلی */
.live-search-shell {
    position: relative;
    z-index: 29;
}

.live-search:not(.live-search--mobile) {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.45rem);
    left: 0;
    width: 100%;
}

.live-search__panel {
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.75);
    border-radius: 1rem;
    background: hsl(var(--muted));
    box-shadow:
        0 18px 50px -24px rgba(0, 0, 0, 0.35),
        0 4px 16px rgba(0, 0, 0, 0.06);
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.live-search--mobile {
    position: relative;
    z-index: 30;
}

.live-search--mobile .live-search__mobile-sheet {
    position: fixed;
    inset: 0;
    top: 3.75rem;
    background: hsl(var(--muted));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.live-search--mobile .live-search__panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    min-height: 100%;
}

.live-search__back {
    display: none;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    color: hsl(var(--text) / 0.75);
}

.header-mobile-search.is-searching .live-search__back {
    display: inline-flex;
}

.live-search__state {
    padding: 0.85rem 0.95rem 1rem;
}

.live-search__state.hidden {
    display: none !important;
}

.live-search__block + .live-search__block {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border) / 0.55);
}

.live-search__block.hidden {
    display: none !important;
}

.live-search__block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: hsl(var(--text) / 0.72);
}

.live-search__block-head small {
    font-size: 0.7rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.45);
}

.live-search__clear-hist {
    font-size: 0.72rem;
    font-weight: 700;
    color: #ef4056;
    transition: opacity 0.15s ease;
}

.live-search__clear-hist:hover {
    opacity: 0.75;
}

.live-search__clear-hist.hidden {
    display: none !important;
}

.live-search__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.live-search__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid hsl(var(--border) / 0.8);
    border-radius: 999px;
    background: hsl(var(--background));
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.8);
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.live-search__chip:hover {
    border-color: hsl(var(--primary) / 0.45);
    background: hsl(var(--primary) / 0.06);
    color: hsl(var(--primary));
}

.live-search__muted {
    font-size: 0.78rem;
    color: hsl(var(--text) / 0.45);
}

.live-search__skeleton {
    height: 4.25rem;
    margin-bottom: 0.55rem;
    border-radius: 0.85rem;
    background: linear-gradient(90deg, hsl(var(--background)) 25%, hsl(var(--secondary) / 0.5) 50%, hsl(var(--background)) 75%);
    background-size: 200% 100%;
    animation: live-search-shimmer 1.1s ease-in-out infinite;
}

@keyframes live-search-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.live-search__state--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: hsl(var(--text) / 0.55);
}

.live-search__state--empty.hidden {
    display: none !important;
}

.live-search__state--empty i {
    color: hsl(var(--text) / 0.3);
    margin-bottom: 0.35rem;
}

.live-search__state--empty p {
    font-size: 0.9rem;
    font-weight: 700;
    color: hsl(var(--text) / 0.8);
}

.live-search__state--empty span {
    font-size: 0.78rem;
}

.live-search__cats {
    margin-bottom: 0.85rem;
}

.live-search__cats.hidden {
    display: none !important;
}

.live-search__cat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.live-search__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    background: hsl(var(--primary) / 0.08);
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: hsl(var(--primary));
    transition: background-color 0.15s ease;
}

.live-search__cat:hover {
    background: hsl(var(--primary) / 0.14);
}

.live-search__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.live-search__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.85rem;
    padding: 0.55rem 0.55rem;
    transition: background-color 0.15s ease;
}

.live-search__item:hover,
.live-search__item.is-active {
    background: hsl(var(--background));
}

.live-search__thumb {
    display: flex;
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.55);
    border-radius: 0.7rem;
    background: #fff;
}

.live-search__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.25rem;
}

.live-search__ph {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: hsl(var(--text) / 0.28);
    background: hsl(var(--background));
}

.dark .live-search__thumb {
    background: hsl(var(--secondary) / 0.35);
}

.live-search__meta {
    min-width: 0;
    flex: 1 1 auto;
}

.live-search__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.5;
    color: hsl(var(--text) / 0.9);
}

.live-search__name mark {
    background: hsl(var(--primary) / 0.18);
    color: inherit;
    border-radius: 0.15rem;
    padding: 0 0.1rem;
}

.live-search__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.live-search__price del {
    font-size: 0.7rem;
    color: hsl(var(--text) / 0.4);
}

.live-search__price strong {
    font-size: 0.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: hsl(var(--text));
}

.live-search__price > span:last-child {
    font-size: 0.68rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.45);
}

.live-search__off {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #ef4056;
    padding: 0.05rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
}

.live-search__arrow {
    flex-shrink: 0;
    color: hsl(var(--text) / 0.28);
}

.live-search__see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 0.65rem;
    border-top: 1px solid hsl(var(--border) / 0.55);
    padding-top: 0.85rem;
    font-size: 0.8125rem;
    font-weight: 800;
    color: hsl(var(--primary));
    transition: opacity 0.15s ease;
}

.live-search__see-all:hover {
    opacity: 0.8;
}

.live-search__see-all.hidden {
    display: none !important;
}

.live-search__cat mark {
    background: hsl(var(--primary) / 0.18);
    color: inherit;
    border-radius: 0.15rem;
}

.site-nav-categories {
    border-radius: 0.55rem;
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.08);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.site-nav-categories:hover,
.desktop-nav-item:hover > .site-nav-categories {
    background: hsl(var(--primary) / 0.14);
    color: hsl(var(--primary));
    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.18);
}

.site-nav-link {
    border-radius: 0.5rem;
    color: hsl(var(--text) / 0.78);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.site-nav-link:hover {
    background: hsl(var(--background));
    color: hsl(var(--primary));
}

.site-header .icon-btn {
    border-radius: 0.7rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background) / 0.65);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.site-header .icon-btn:hover {
    border-color: hsl(var(--primary) / 0.45);
    background: hsl(var(--background));
    color: hsl(var(--primary));
}

.mega-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-right: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mega-menu-link:hover,
.mega-menu-link.is-active,
.mega-menu-link-active > .mega-menu-link,
li.mega-menu-link-active > a {
    background: hsl(var(--muted));
    color: hsl(var(--primary));
    border-right-color: hsl(var(--primary));
}

.dark .header-mobile-top {
    background: hsl(var(--muted) / 0.94);
}

.dark .site-header .icon-btn {
    background: hsl(var(--secondary) / 0.5);
}

/* Fixed header offset */
main.flex-grow {
    padding-top: 7rem;
}

@media (min-width: 1024px) {
    main.flex-grow {
        padding-top: 7.55rem;
    }
}

/* —— Global UI kit —— */
.page-shell {
    padding-top: 1.5rem;
    padding-bottom: 5rem;
}

@media (min-width: 1024px) {
    .page-shell {
        padding-bottom: 2.5rem;
    }
}

.surface-card {
    border: 1px solid hsl(var(--border) / 0.8);
    border-radius: 1rem;
    background: hsl(var(--muted));
    box-shadow: 0 1px 2px hsl(var(--text) / 0.04);
}

.surface-card-flush {
    overflow: hidden;
}

.page-title {
    font-size: 1.05rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .page-title {
        font-size: 1.2rem;
    }
}

.field-input {
    height: 2.75rem;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
    padding: 0 0.9rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-input:focus {
    border-color: hsl(var(--primary) / 0.6);
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
}

.chip {
    display: inline-flex;
    align-items: center;
    border-radius: 0.65rem;
    border: 1px solid hsl(var(--border));
    padding: 0.45rem 0.9rem;
    font-size: 0.875rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chip:hover {
    border-color: hsl(var(--primary) / 0.4);
    color: hsl(var(--primary));
}

.chip-active {
    border-color: transparent;
    background: hsl(var(--primary));
    color: #fff;
}

.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    padding: 0 0.35rem;
    font-size: 0.75rem;
    line-height: 1;
    color: #fff;
    background: hsl(var(--primary-btn));
}

.badge-count-warning {
    background: hsl(var(--warning));
}

/* بج تعداد سبد — گوشه بالای آیکن */
.cart-badge {
    position: absolute;
    top: -0.15rem;
    left: -0.15rem;
    z-index: 2;
    display: inline-flex;
    min-width: 1.15rem;
    height: 1.15rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0 0.28rem;
    background: #ef4056;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 0 0 2px hsl(var(--muted));
}

.cart-badge--sm {
    top: -0.35rem;
    left: -0.45rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.22rem;
    font-size: 0.6rem;
}

.cart-badge.is-empty {
    display: none;
}

.site-header .icon-btn.relative,
.icon-btn.relative {
    overflow: visible;
}

/* Desktop cart mini dropdown */
.cart-mini__panel {
    max-height: min(70vh, 32rem);
    flex-direction: column;
}

.cart-mini__panel.hidden {
    display: none !important;
}

.cart-mini__panel:not(.hidden) {
    display: flex;
}

.cart-mini__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid hsl(var(--border) / 0.7);
}

.cart-mini__title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: hsl(var(--text) / 0.92);
}

.cart-mini__count {
    font-size: 0.78rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.5);
}

.cart-mini__link {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: hsl(var(--primary));
    transition: opacity 0.15s ease;
}

.cart-mini__link:hover {
    opacity: 0.8;
}

.cart-mini__list {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    max-height: 18rem;
}

.cart-mini__item {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid hsl(var(--border) / 0.55);
    transition: opacity 0.2s ease;
}

.cart-mini__item:last-child {
    border-bottom: 0;
}

.cart-mini__item.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

.cart-mini__thumb {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border) / 0.65);
    background: #fff;
}

.cart-mini__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-mini__thumb-fallback {
    display: block;
    width: 100%;
    height: 100%;
    background: hsl(var(--secondary) / 0.6);
}

.dark .cart-mini__thumb {
    background: hsl(var(--secondary));
}

.cart-mini__body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cart-mini__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
    line-height: 1.45;
    color: hsl(var(--text) / 0.88);
}

.cart-mini__name:hover {
    color: hsl(var(--primary));
}

.cart-mini__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cart-mini__meta span {
    border-radius: 0.4rem;
    background: hsl(var(--background) / 0.7);
    padding: 0.1rem 0.4rem;
    font-size: 0.68rem;
    color: hsl(var(--text) / 0.55);
}

.cart-mini__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
}

.cart-mini__price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: hsl(var(--primary));
}

.cart-mini__price .cart-price {
    font-size: 0.92rem;
    font-weight: 800;
}

.cart-mini__qty {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.15rem;
    min-width: 5.5rem;
    height: 2rem;
    border: 1px solid hsl(var(--border) / 0.8);
    border-radius: 0.55rem;
    background: hsl(var(--background) / 0.45);
    padding: 0 0.2rem;
}

.cart-mini__qty button {
    display: inline-flex;
    width: 1.65rem;
    height: 1.65rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    color: hsl(var(--text) / 0.7);
    transition: background 0.15s ease, color 0.15s ease;
}

.cart-mini__qty button:hover {
    background: hsl(var(--muted));
    color: hsl(var(--primary));
}

.cart-mini__qty .cart-remove-btn:hover,
.cart-mini__qty .cart-decrease-btn[data-will-remove]:hover {
    color: #ef4056;
}

.cart-mini__qty .cart-quantity {
    min-width: 1.25rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.cart-mini__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 2rem 1rem;
    text-align: center;
    color: hsl(var(--text) / 0.55);
    font-size: 0.875rem;
}

.cart-mini__empty-cta {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: hsl(var(--primary));
}

.cart-mini__foot {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid hsl(var(--border) / 0.7);
    padding: 0.85rem 1rem 1rem;
    background: hsl(var(--muted));
}

.cart-mini__foot.is-hidden {
    display: none;
}

.cart-mini__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cart-mini__total-label {
    font-size: 0.78rem;
    color: hsl(var(--text) / 0.55);
}

.cart-mini__total-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    color: hsl(var(--primary));
    font-size: 0.75rem;
}

.cart-mini__total-value strong {
    font-size: 1.05rem;
    font-weight: 800;
}

.cart-mini__checkout {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

/* —— Mobile cart drawer —— */
.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    visibility: hidden;
}

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

.cart-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.cart-drawer.is-open .cart-drawer__backdrop {
    opacity: 1;
}

.cart-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    width: min(100%, 22.5rem);
    flex-direction: column;
    background: hsl(var(--muted));
    box-shadow: -16px 0 40px -20px rgba(15, 23, 42, 0.45);
    transform: translateX(104%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid hsl(var(--border) / 0.75);
    background:
        linear-gradient(135deg, hsl(var(--primary) / 0.08), transparent 55%),
        hsl(var(--muted));
}

.cart-drawer__close {
    flex-shrink: 0;
}

.cart-drawer__body {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.cart-drawer__body .cart-mini__list {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
}

.cart-drawer__body .cart-mini__foot {
    margin-top: auto;
    border-top: 1px solid hsl(var(--border) / 0.75);
    padding: 0.95rem 1rem calc(0.95rem + env(safe-area-inset-bottom, 0px));
    background: hsl(var(--muted));
    box-shadow: 0 -10px 24px -18px rgba(15, 23, 42, 0.35);
}

.cart-drawer__body .cart-mini__foot.is-hidden,
.cart-drawer__body .cart-mini__foot[hidden] {
    display: none !important;
}

body.cart-drawer-open {
    overflow: hidden;
}

button.site-mobile-tabbar__item {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.account-mini__panel {
    width: 17.5rem;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid hsl(var(--border) / 0.75);
    background: hsl(var(--muted));
    box-shadow:
        0 18px 40px -18px rgba(15, 23, 42, 0.35),
        0 1px 0 hsl(var(--border) / 0.5);
}

.account-mini__panel.hidden {
    display: none !important;
}

.account-mini__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid hsl(var(--border) / 0.7);
    background:
        linear-gradient(135deg, hsl(var(--primary) / 0.1), transparent 60%),
        hsl(var(--background) / 0.45);
}

.account-mini__avatar {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: hsl(var(--primary) / 0.14);
    color: hsl(var(--primary));
    flex-shrink: 0;
}

.account-mini__identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.account-mini__identity strong {
    font-size: 0.88rem;
    font-weight: 800;
    color: hsl(var(--text));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-mini__identity span {
    font-size: 0.72rem;
    color: hsl(var(--text) / 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-mini__list {
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.account-mini__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.7rem;
    color: hsl(var(--text) / 0.82);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.account-mini__item:hover {
    background: hsl(var(--primary) / 0.08);
    color: hsl(var(--primary));
}

.account-mini__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    background: hsl(var(--background));
    color: hsl(var(--text) / 0.65);
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.account-mini__item:hover .account-mini__icon {
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
}

.account-mini__label {
    flex: 1;
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 650;
}

.account-mini__chev {
    opacity: 0.35;
    flex-shrink: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.account-mini__item:hover .account-mini__chev {
    opacity: 0.8;
    transform: translateX(-2px);
}

.account-mini__foot {
    padding: 0.45rem 0.55rem 0.65rem;
    border-top: 1px solid hsl(var(--border) / 0.7);
}

.account-mini__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 0.7rem;
    font-size: 0.82rem;
    font-weight: 750;
    color: hsl(var(--warning));
    background: hsl(var(--warning) / 0.08);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.account-mini__logout:hover {
    background: hsl(var(--warning) / 0.14);
}

.checkout-stepper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid hsl(var(--border) / 0.8);
    background: hsl(var(--muted));
}

.checkout-stepper__item {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    font-size: 0.75rem;
    color: hsl(var(--text) / 0.45);
    transition: color 0.2s ease;
}

@media (min-width: 640px) {
    .checkout-stepper__item {
        font-size: 0.875rem;
    }
}

@media (min-width: 768px) {
    .checkout-stepper__item {
        font-size: 1rem;
    }
}

.checkout-stepper__item.is-active,
.checkout-stepper__item.is-done {
    color: hsl(var(--primary));
}

.checkout-stepper__progress {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 0;
    width: 33.333%;
    background: hsl(var(--primary) / 0.1);
    transition: inset-inline-start 0.3s ease, width 0.3s ease;
}

.checkout-stepper__progress[data-step="2"] {
    inset-inline-start: 33.333%;
}

.checkout-stepper__progress[data-step="3"] {
    inset-inline-start: 66.666%;
}

.account-nav {
    border: 1px solid hsl(var(--border) / 0.8);
    border-radius: 1rem;
    background: hsl(var(--muted));
    padding: 0.5rem;
}

.account-nav a {
    border-radius: 0.75rem;
}

.auth-panel {
    width: 100%;
    max-width: 28rem;
    border: 1px solid hsl(var(--border) / 0.85);
    border-radius: 1.25rem;
    background: hsl(var(--muted) / 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px hsl(var(--text) / 0.08);
    padding: 1.5rem;
}

@media (min-width: 480px) {
    .auth-panel {
        padding: 2rem;
    }
}

.filter-panel {
    border: 1px solid hsl(var(--border) / 0.75);
    border-radius: 1rem;
    background: hsl(var(--muted));
    overflow: hidden;
    box-shadow: 0 8px 28px -22px rgba(0, 0, 0, 0.28);
}

.filter-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.75rem;
}

.filter-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: hsl(var(--text) / 0.92);
}

.filter-panel__reset {
    font-size: 0.8rem;
    font-weight: 600;
    color: hsl(var(--primary));
    transition: opacity 0.2s ease;
}

.filter-panel__reset:hover {
    opacity: 0.75;
}

.filter-panel__body {
    max-height: calc(90vh - 11rem);
    overflow-y: auto;
}

.filter-panel__foot {
    padding: 0.85rem 1rem 1rem;
}

.filter-panel__foot--desktop-hint {
    border-top: 1px solid hsl(var(--border) / 0.65);
    font-size: 0.72rem;
    color: hsl(var(--text) / 0.45);
    text-align: center;
}

.filter-drawer__handle {
    width: 2.5rem;
    height: 0.28rem;
    margin: 0.65rem auto 0.15rem;
    border-radius: 999px;
    background: hsl(var(--border));
}

.filter-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.filter-row {
    border-top: 1px solid hsl(var(--border) / 0.65);
}

.filter-switch {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
}

.filter-switch__label {
    font-size: 0.875rem;
    color: hsl(var(--text) / 0.88);
}

.filter-switch__control {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.filter-switch__track {
    position: relative;
    display: block;
    width: 2.6rem;
    height: 1.45rem;
    border-radius: 999px;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border) / 0.8);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.filter-switch__track::after {
    content: "";
    position: absolute;
    top: 0.12rem;
    right: 0.12rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.peer:checked + .filter-switch__track {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
}

.peer:checked + .filter-switch__track::after {
    transform: translateX(-1.15rem);
}

.filter-accordion__btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.95rem 1rem;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.88);
}

.filter-accordion__chevron {
    transition: transform 0.25s ease;
    color: hsl(var(--text) / 0.45);
}

.filter-accordion__badge {
    display: inline-flex;
    min-width: 1.15rem;
    height: 1.15rem;
    align-items: center;
    justify-content: center;
    margin-right: 0.35rem;
    border-radius: 999px;
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
    padding: 0 0.3rem;
}

.filter-accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.filter-accordion.open > .filter-accordion__body {
    /* max-height set by JS; keep none for initially open */
}

.filter-price {
    padding: 0 1rem 1rem;
}

.filter-price__slider {
    margin-bottom: 0.85rem;
}

.filter-price__values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.filter-price__value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: hsl(var(--primary));
}

.filter-price__hint,
.filter-price__unit {
    font-size: 0.7rem;
    font-weight: 500;
    color: hsl(var(--text) / 0.5);
}

.filter-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 1rem 0.65rem;
    border: 1px solid hsl(var(--border) / 0.75);
    border-radius: 0.7rem;
    background: hsl(var(--background) / 0.55);
    padding: 0.45rem 0.7rem;
    color: hsl(var(--text) / 0.45);
}

.filter-search input {
    width: 100%;
    background: transparent;
    outline: none;
    font-size: 0.8rem;
    color: hsl(var(--text) / 0.85);
}

.filter-options {
    margin: 0;
    padding: 0 0.35rem 0.75rem;
    list-style: none;
}

.filter-options--scroll {
    max-height: 11rem;
    overflow-y: auto;
}

.filter-check {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.55rem;
    transition: background 0.15s ease;
}

.filter-check:hover {
    background: hsl(var(--background) / 0.55);
}

.filter-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-check__box {
    display: inline-flex;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1.5px solid hsl(var(--border));
    border-radius: 0.3rem;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.filter-check__box::after {
    content: "";
    width: 0.35rem;
    height: 0.6rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg) translateY(-1px);
}

.filter-check input:checked + .filter-check__box {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
}

.filter-check input:checked + .filter-check__box::after {
    opacity: 1;
}

.filter-check__text {
    flex: 1;
    font-size: 0.84rem;
    color: hsl(var(--text) / 0.85);
}

.filter-check__swatch {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid hsl(var(--border) / 0.8);
}

.category-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.category-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid hsl(var(--primary) / 0.25);
    border-radius: 999px;
    background: hsl(var(--primary) / 0.08);
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--primary));
    transition: background 0.15s ease;
}

.category-chip:hover {
    background: hsl(var(--primary) / 0.14);
}

.category-chip--clear {
    border-color: hsl(var(--border) / 0.8);
    background: hsl(var(--muted));
    color: hsl(var(--text) / 0.65);
}

.category-mobile-actions__badge {
    display: inline-flex;
    min-width: 1.15rem;
    height: 1.15rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: hsl(var(--primary));
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0 0.3rem;
}

.category-mobile-actions__badge.is-hidden {
    display: none;
}

.dark .filter-check__box {
    background: hsl(var(--secondary));
}

.dark .filter-switch__track::after {
    background: hsl(var(--muted));
}

.category-browse {
    margin-top: 0.25rem;
    border-radius: 1rem;
    border: 1px solid hsl(var(--border) / 0.7);
    background: hsl(var(--muted));
    padding: 1.15rem 0.85rem 1.25rem;
}

.category-browse__head {
    margin-bottom: 1.1rem;
    text-align: center;
}

.category-browse__title {
    font-size: 1rem;
    font-weight: 800;
    color: hsl(var(--text) / 0.95);
}

.category-browse__hint {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: hsl(var(--text) / 0.5);
}

.category-browse__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 0.65rem;
    justify-items: center;
}

@media (min-width: 480px) {
    .category-browse__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.15rem 0.85rem;
    }
}

@media (min-width: 768px) {
    .category-browse {
        padding: 1.4rem 1.15rem 1.5rem;
    }

    .category-browse__title {
        font-size: 1.1rem;
    }

    .category-browse__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1.35rem 1rem;
    }
}

@media (min-width: 1024px) {
    .category-browse__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 1.4rem 1.15rem;
    }
}

@media (min-width: 1280px) {
    .category-browse__grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

.category-browse__item {
    display: flex;
    width: 100%;
    max-width: 6.5rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    user-select: none;
    transition: transform 0.2s ease;
}

.category-browse__item:hover {
    transform: translateY(-2px);
}

.category-browse__item:hover .category-browse__ring {
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.category-browse__item:hover .category-browse__name {
    color: hsl(var(--primary));
}

.category-browse__ring {
    display: flex;
    width: 4.75rem;
    height: 4.75rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid hsl(var(--border) / 0.85);
    background: #fff;
    padding: 0.55rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.category-browse__ring--tone-0 {
    background: linear-gradient(145deg, #e8f4ff, #d6ebff);
    border-color: #b7d7f5;
}

.category-browse__ring--tone-1 {
    background: linear-gradient(145deg, #fff0f3, #ffe0e8);
    border-color: #f5c0cd;
}

.category-browse__ring--tone-2 {
    background: linear-gradient(145deg, #f0fff6, #dcf8e8);
    border-color: #b6e5c9;
}

.category-browse__ring--tone-3 {
    background: linear-gradient(145deg, #fff8eb, #ffefd2);
    border-color: #f0d5a0;
}

.category-browse__ring--tone-4 {
    background: linear-gradient(145deg, #f4f0ff, #e8e0ff);
    border-color: #cbbef5;
}

.category-browse__ring--tone-5 {
    background: linear-gradient(145deg, #eefafb, #d8f3f5);
    border-color: #b0dde2;
}

.category-browse__initial {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    color: hsl(var(--text) / 0.72);
}

.dark .category-browse__ring {
    background: hsl(var(--secondary));
}

.dark .category-browse__ring--tone-0,
.dark .category-browse__ring--tone-1,
.dark .category-browse__ring--tone-2,
.dark .category-browse__ring--tone-3,
.dark .category-browse__ring--tone-4,
.dark .category-browse__ring--tone-5 {
    background: hsl(var(--secondary));
    border-color: hsl(var(--border) / 0.9);
}

@media (min-width: 768px) {
    .category-browse__ring {
        width: 5.5rem;
        height: 5.5rem;
    }
}

.category-browse__name {
    margin-top: 0.6rem;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    color: hsl(var(--text) / 0.85);
    transition: color 0.2s ease;
}

.category-browse__count {
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: hsl(var(--text) / 0.45);
}

/* Legacy subcategory tiles (unused) */
.subcategory-tile {
    display: flex;
    width: 6.75rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    border-radius: 1rem;
    border: 1px solid hsl(var(--border) / 0.7);
    background: hsl(var(--muted));
    padding: 0.85rem 0.65rem 0.75rem;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.subcategory-tile:hover {
    transform: translateY(-2px);
    border-color: hsl(var(--primary) / 0.4);
    box-shadow: 0 8px 20px hsl(var(--text) / 0.06);
}

.subcategory-tile__img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.85rem;
    object-fit: contain;
    background: hsl(var(--background) / 0.7);
    padding: 0.25rem;
}

.subcategory-tile__img--fallback {
    object-fit: cover;
    opacity: 0.7;
}

.subcategory-tile__name {
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.4rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.55;
    color: hsl(var(--text) / 0.8);
}

/* Category listing page */
.category-page {
    padding-bottom: 5.5rem;
}

@media (min-width: 1024px) {
    .category-page {
        padding-bottom: 2rem;
    }
}

.category-breadcrumb a:hover {
    color: hsl(var(--primary));
}

.category-hero__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.65rem 1rem;
    margin-bottom: 1rem;
}

.category-hero__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: hsl(var(--text) / 0.95);
}

@media (min-width: 1024px) {
    .category-hero__title {
        font-size: 1.4rem;
    }
}

.category-hero__count {
    font-size: 0.85rem;
    color: hsl(var(--text) / 0.5);
}

.category-mobile-actions__btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid hsl(var(--border) / 0.8);
    border-radius: 0.85rem;
    background: hsl(var(--muted));
    padding: 0.7rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.8);
}

.category-sortbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    border: 1px solid hsl(var(--border) / 0.75);
    border-radius: 1rem;
    background: hsl(var(--muted));
    padding: 0.55rem 0.85rem;
}

.category-sortbar__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.55);
}

.category-sortbar__options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.category-sortbar__btn {
    border-radius: 0.65rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;
    color: hsl(var(--text) / 0.7);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.category-sortbar__btn:hover {
    color: hsl(var(--primary));
}

.category-sortbar__btn.is-active {
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
    font-weight: 700;
}

.category-sortbar__count {
    font-size: 0.8rem;
    color: hsl(var(--text) / 0.5);
}

.category-grid > .product-card {
    height: 100%;
    border: 1px solid hsl(var(--border) / 0.75);
    border-radius: 0.85rem;
    background: hsl(var(--muted));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.category-grid > .product-card:hover {
    z-index: 1;
    border-color: hsl(var(--primary) / 0.4);
    box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.28);
}

.category-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border: 1px dashed hsl(var(--border));
    border-radius: 1rem;
    background: hsl(var(--muted));
    padding: 3.5rem 1.25rem;
    text-align: center;
}

.category-empty__btn {
    margin-top: 0.5rem;
    border-radius: 0.75rem;
    background: hsl(var(--primary));
    padding: 0.65rem 1.15rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
}

.category-empty__btn:hover {
    background: hsl(var(--primary-btn));
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: hsl(var(--text) / 0.7);
}

.site-footer-link {
    display: inline-block;
    padding: 0.35rem 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(var(--text) / 0.58);
    transition: color 0.18s ease, transform 0.18s ease;
}

.site-footer-link:hover {
    color: hsl(var(--primary));
    transform: translateX(-2px);
}

.site-footer {
    position: relative;
    margin-top: 3.5rem;
    overflow: hidden;
    border-top: 1px solid hsl(var(--border) / 0.75);
    background:
        linear-gradient(180deg, hsl(var(--muted)) 0%, hsl(var(--background) / 0.55) 100%);
    padding-block: 2.75rem 1.5rem;
}

.site-footer__glow {
    pointer-events: none;
    position: absolute;
    inset-inline-end: -8%;
    top: -40%;
    width: min(520px, 70vw);
    height: min(420px, 70vw);
    border-radius: 50%;
    background: radial-gradient(circle, hsl(var(--primary) / 0.12), transparent 68%);
}

.site-footer__inner {
    position: relative;
    z-index: 1;
}

.site-footer__main {
    display: grid;
    gap: 2rem 1.5rem;
}

@media (min-width: 1024px) {
    .site-footer {
        padding-block: 3.5rem 1.75rem;
    }

    .site-footer__main {
        grid-template-columns: minmax(240px, 1.15fr) minmax(0, 2.2fr);
        gap: 2.5rem 3rem;
        align-items: start;
    }
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 22rem;
}

.site-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: hsl(var(--text));
    text-decoration: none;
}

.site-footer__logo img {
    height: 2.6rem;
    width: auto;
    max-width: 7.5rem;
    object-fit: contain;
}

.site-footer__logo span {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.site-footer__tagline {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.75;
    color: hsl(var(--text) / 0.62);
}

.site-footer__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    border: 1px solid hsl(var(--border) / 0.85);
    background: hsl(var(--muted));
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.site-footer__phone:hover {
    border-color: hsl(var(--primary) / 0.35);
    box-shadow: 0 10px 24px -18px hsl(var(--primary) / 0.55);
    transform: translateY(-1px);
}

.site-footer__phone-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
    flex-shrink: 0;
}

.site-footer__phone strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: hsl(var(--text));
    letter-spacing: 0.02em;
}

.site-footer__phone small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: hsl(var(--text) / 0.55);
}

.site-footer__social {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.site-footer__social-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: hsl(var(--text) / 0.5);
}

.site-footer__social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.site-footer__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    border: 1px solid hsl(var(--border) / 0.85);
    background: hsl(var(--muted));
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.site-footer__social-btn img {
    width: 1.15rem;
    height: 1.15rem;
    object-fit: contain;
}

.site-footer__social-btn:hover {
    transform: translateY(-2px);
    border-color: hsl(var(--primary) / 0.4);
    box-shadow: 0 10px 20px -14px hsl(var(--primary) / 0.55);
}

.site-footer__social-btn--instagram:hover {
    border-color: rgba(225, 48, 108, 0.45);
    background: rgba(225, 48, 108, 0.08);
}

.site-footer__social-btn--telegram:hover {
    border-color: rgba(36, 161, 222, 0.45);
    background: rgba(36, 161, 222, 0.08);
}

.site-footer__social-btn--whatsapp:hover {
    border-color: rgba(37, 211, 102, 0.45);
    background: rgba(37, 211, 102, 0.08);
}

.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
}

@media (min-width: 768px) {
    .site-footer__cols {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.site-footer__title {
    position: relative;
    margin: 0 0 0.95rem;
    padding-bottom: 0.55rem;
    font-size: 0.88rem;
    font-weight: 800;
    color: hsl(var(--text));
}

.site-footer__title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 1.65rem;
    height: 2px;
    border-radius: 999px;
    background: hsl(var(--primary));
}

.site-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.site-footer__empty {
    font-size: 0.8rem;
    color: hsl(var(--text) / 0.4);
}

.site-footer__trust {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed hsl(var(--border) / 0.9);
}

@media (min-width: 768px) {
    .site-footer__trust {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
    }
}

.site-footer__trust-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: hsl(var(--text) / 0.55);
    white-space: nowrap;
}

.site-footer__trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .site-footer__trust-list {
        justify-content: flex-end;
    }
}

.site-footer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 5.25rem;
    min-height: 5.25rem;
    padding: 0.55rem;
    border-radius: 14px;
    border: 1px solid hsl(var(--border) / 0.85);
    background: hsl(var(--muted));
    box-shadow: 0 8px 20px -18px hsl(var(--text) / 0.35);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.site-footer__badge:hover {
    transform: translateY(-2px);
    border-color: hsl(var(--primary) / 0.3);
}

.site-footer__badge img {
    width: 4.25rem;
    height: 4.25rem;
    object-fit: contain;
}

.site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid hsl(var(--border) / 0.8);
}

@media (min-width: 768px) {
    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.site-footer__copy {
    margin: 0;
    font-size: 0.78rem;
    color: hsl(var(--text) / 0.5);
    text-align: center;
}

@media (min-width: 768px) {
    .site-footer__copy {
        text-align: right;
    }
}

.site-footer__to-top {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 999px;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--muted));
    padding: 0.5rem 0.95rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: hsl(var(--text) / 0.75);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.site-footer__to-top:hover {
    border-color: hsl(var(--primary) / 0.4);
    background: hsl(var(--primary) / 0.08);
    color: hsl(var(--primary));
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .site-footer__brand {
        max-width: none;
        align-items: center;
        text-align: center;
    }

    .site-footer__phone {
        width: 100%;
        justify-content: center;
    }

    .site-footer__social {
        align-items: center;
    }

    .site-footer__cols {
        text-align: center;
    }

    .site-footer__title::after {
        inset-inline-start: 50%;
        transform: translateX(50%);
    }

    [dir="rtl"] .site-footer__title::after {
        transform: translateX(-50%);
    }

    .site-footer-link:hover {
        transform: none;
    }

    .site-footer__trust-list {
        justify-content: center;
        width: 100%;
    }
}

/* Soften harsh hard-coded utility leftovers when present */
.text-red-500,
.text-red-600 {
    color: hsl(var(--warning)) !important;
}

.bg-yellow-500,
.dark .bg-yellow-600 {
    background-color: hsl(var(--warning)) !important;
}

.bg-emerald-500 {
    background-color: hsl(var(--success)) !important;
}

/* —— Page preloader —— */
.page-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: #fff;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.dark .page-preloader {
    background: #14161a;
}

.page-preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-preloader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.35rem;
    padding: 1.5rem;
}

.page-preloader__ring {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
}

.page-preloader__ring span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid transparent;
    animation: preloader-spin 1.15s cubic-bezier(0.5, 0.15, 0.35, 0.9) infinite;
}

.page-preloader__ring span:nth-child(1) {
    border-top-color: var(--dk-red, #ef4056);
    animation-delay: 0s;
}

.page-preloader__ring span:nth-child(2) {
    inset: 0.35rem;
    border-right-color: hsl(var(--primary));
    animation-delay: -0.18s;
    animation-duration: 1s;
}

.page-preloader__ring span:nth-child(3) {
    inset: 0.7rem;
    border-bottom-color: hsl(var(--primary) / 0.45);
    animation-delay: -0.36s;
    animation-duration: 0.85s;
}

.page-preloader__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    animation: preloader-pulse 1.6s ease-in-out infinite;
}

.page-preloader__logo {
    height: 2.4rem;
    width: auto;
    max-width: 8.5rem;
    object-fit: contain;
}

.page-preloader__name {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: hsl(var(--text));
}

.page-preloader__bar {
    width: 7.5rem;
    height: 0.22rem;
    overflow: hidden;
    border-radius: 999px;
    background: hsl(var(--border) / 0.9);
}

.page-preloader__bar i {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--dk-red, #ef4056), hsl(var(--primary)));
    animation: preloader-bar 1.1s ease-in-out infinite;
}

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

@keyframes preloader-pulse {
    0%,
    100% {
        opacity: 1;
        transform: translateY(0);
    }
    50% {
        opacity: 0.72;
        transform: translateY(-2px);
    }
}

@keyframes preloader-bar {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(280%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-preloader__ring span,
    .page-preloader__brand,
    .page-preloader__bar i {
        animation: none;
    }
}

/* —— Product detail page —— */
.product-page {
    padding-bottom: 6.5rem;
}

@media (min-width: 1024px) {
    .product-page {
        padding-bottom: 2rem;
    }
}

.product-amazing-banner {
    padding: 0.65rem 0.85rem;
    border-radius: 0.85rem;
    background: linear-gradient(90deg, #ef4056, #ff7a55);
    color: #fff;
    font-size: 0.8125rem;
}

.product-gallery-main {
    border: 1px solid hsl(var(--border) / 0.7);
    transition: box-shadow 0.2s ease;
}

.product-gallery-main:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.product-gallery-thumb {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border) / 0.8);
    background: #fff;
    padding: 0.25rem;
    transition: border-color 0.15s ease;
}

.dark .product-gallery-thumb {
    background: hsl(var(--secondary) / 0.4);
}

.product-gallery-thumb:hover {
    border-color: hsl(var(--primary) / 0.55);
}

.product-trust__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid hsl(var(--border) / 0.7);
    border-radius: 0.85rem;
    padding: 0.85rem 0.9rem;
    font-size: 0.8125rem;
    color: hsl(var(--text) / 0.7);
    background: hsl(var(--background) / 0.55);
}

.product-buybox {
    border: 1px solid hsl(var(--border) / 0.75);
    border-radius: 1rem;
    background: hsl(var(--muted));
    padding: 1.15rem 1rem 1.25rem;
    box-shadow: 0 8px 28px -18px rgba(0, 0, 0, 0.28);
}

.product-buybox-mobile {
    z-index: 50;
    bottom: calc(3.55rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid hsl(var(--border) / 0.8);
    background: hsl(var(--muted) / 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 0.75rem 1rem;
    box-shadow: 0 -10px 28px -18px rgba(0, 0, 0, 0.35);
    transition: bottom 0.3s ease, padding-bottom 0.3s ease;
}

/* وقتی تب‌بار پایین مخفی می‌شود، باکس سبد کامل پایین می‌نشیند */
body.is-scroll-down .product-buybox-mobile {
    bottom: 0;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}

.product-qty {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    background: hsl(var(--background) / 0.65);
}

.product-qty__btn {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: hsl(var(--primary));
    transition: background-color 0.15s ease;
}

.product-qty__btn:hover {
    background: hsl(var(--primary) / 0.08);
}

.product-qty__input {
    width: 2.75rem;
    height: 2.5rem;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    outline: none;
    -moz-appearance: textfield;
}

.product-qty__input::-webkit-outer-spin-button,
.product-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-buybox__cta {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 0.75rem;
    background: hsl(var(--primary));
    padding: 0.8rem 1rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.product-buybox__cta:hover {
    background: hsl(var(--primary-btn));
}

.product-buybox__cta:active {
    transform: scale(0.99);
}

.product-buybox__seller {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.product-buybox__seller-icon {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
}

.ship-deadline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    text-align: center;
    border: 1px solid hsl(var(--primary) / 0.22);
    border-radius: 1.1rem;
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, hsl(var(--primary) / 0.14), transparent 60%),
        hsl(var(--muted));
    padding: 1rem 1rem 1.1rem;
}

.ship-deadline--mobile-only {
    display: flex;
}

.ship-deadline--desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .ship-deadline--mobile-only {
        display: none;
    }

    .ship-deadline--desktop-only {
        display: flex;
    }
}

.ship-deadline__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.ship-deadline__icon {
    display: inline-flex;
    width: 2.15rem;
    height: 2.15rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: hsl(var(--primary) / 0.14);
    color: hsl(var(--primary));
}

.ship-deadline__label {
    font-size: 0.8125rem;
    font-weight: 800;
    color: hsl(var(--primary));
}

.ship-deadline__msg {
    max-width: 22rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: hsl(var(--text) / 0.72);
}

.ship-deadline__msg strong {
    color: hsl(var(--text) / 0.95);
    font-weight: 800;
}

.ship-deadline__timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    direction: ltr;
    unicode-bidi: isolate;
}

.ship-deadline__unit {
    display: flex;
    min-width: 3rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: hsl(var(--background));
    padding: 0.5rem 0.4rem 0.4rem;
    box-shadow:
        inset 0 0 0 1px hsl(var(--border) / 0.6),
        0 1px 2px hsl(var(--text) / 0.04);
}

.ship-deadline__unit b {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: hsl(var(--text) / 0.92);
}

.ship-deadline__unit small {
    margin-top: 0.2rem;
    font-size: 0.62rem;
    font-weight: 650;
    color: hsl(var(--text) / 0.45);
}

.ship-deadline__unit.is-hidden,
.ship-deadline__sep.is-hidden {
    display: none;
}

.ship-deadline__sep {
    font-size: 1.05rem;
    font-weight: 800;
    color: hsl(var(--primary) / 0.55);
    padding-bottom: 0.95rem;
}

/* سازگاری با کلاس قدیمی (اگر جایی مانده باشد) */
.product-buybox__ship {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 0.75rem;
    background: hsl(var(--background) / 0.7);
    padding: 0.65rem 0.75rem;
    font-size: 0.78rem;
    color: hsl(var(--text) / 0.72);
}

.product-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.product-stock--ok {
    color: hsl(var(--success));
}

.product-stock--out {
    color: #ef4056;
}

.product-gallery-placeholder {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: hsl(var(--text) / 0.35);
    font-size: 0.8125rem;
    background:
        linear-gradient(135deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
}

.product-section {
    position: relative;
    scroll-margin-top: 7rem;
}

.product-section__anchor {
    position: absolute;
    top: -6.5rem;
    height: 1px;
    width: 1px;
    pointer-events: none;
}

.product-section__title {
    margin-bottom: 1rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: hsl(var(--text) / 0.92);
}

.product-prose {
    font-size: 0.925rem;
    line-height: 1.9;
    color: hsl(var(--text) / 0.78);
}

.product-prose p + p {
    margin-top: 0.75rem;
}

.product-specs {
    display: grid;
    gap: 0;
}

.product-specs__row {
    display: grid;
    grid-template-columns: minmax(7rem, 11rem) 1fr;
    gap: 0.75rem;
    border-bottom: 1px solid hsl(var(--border) / 0.55);
    padding: 0.85rem 0;
}

.product-specs__row:last-child {
    border-bottom: 0;
}

.product-specs__key {
    font-size: 0.8125rem;
    color: hsl(var(--text) / 0.5);
}

.product-specs__val {
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.88);
}

.product-empty {
    font-size: 0.875rem;
    color: hsl(var(--text) / 0.55);
}

.product-empty--box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border: 1px dashed hsl(var(--border));
    border-radius: 1rem;
    background: hsl(var(--background) / 0.45);
    padding: 2rem 1.25rem;
    text-align: center;
}

.product-tabs__link {
    display: inline-block;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    padding: 0.65rem 0.85rem;
    color: hsl(var(--text) / 0.6);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.product-tabs__link:hover {
    color: hsl(var(--primary));
}

/* —— Cart page —— */
.cart-page {
    padding-bottom: 6.5rem;
}

@media (min-width: 1024px) {
    .cart-page {
        padding-bottom: 2rem;
    }
}

.cart-panel {
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.75);
    border-radius: 1rem;
    background: hsl(var(--muted));
}

.cart-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid hsl(var(--border) / 0.7);
    padding: 1rem 1.1rem;
}

.cart-panel__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.cart-panel__count {
    font-size: 0.85rem;
    font-weight: 500;
    color: hsl(var(--text) / 0.5);
}

.cart-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 0.65rem;
    padding: 0.4rem 0.7rem;
    color: #ef4056;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background-color 0.15s ease;
}

.cart-clear-btn:hover {
    background: rgba(239, 64, 86, 0.08);
}

.cart-discount {
    border-bottom: 1px solid hsl(var(--border) / 0.65);
    padding: 0.9rem 1.1rem;
    background: hsl(var(--background) / 0.45);
}

.cart-discount__form {
    display: flex;
    gap: 0.5rem;
}

.cart-discount__input {
    flex: 1;
    height: 2.6rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.7rem;
    background: hsl(var(--muted));
    padding: 0 0.85rem;
    font-size: 0.875rem;
    outline: none;
}

.cart-discount__input:focus {
    border-color: hsl(var(--primary) / 0.55);
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
}

.cart-discount__btn {
    height: 2.6rem;
    border-radius: 0.7rem;
    background: hsl(var(--primary));
    padding: 0 1rem;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.cart-discount__btn:hover {
    background: hsl(var(--primary-btn));
}

.cart-discount__msg {
    margin-top: 0.55rem;
    color: hsl(var(--success));
    font-size: 0.8125rem;
}

.cart-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart-item {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.9rem;
    border-bottom: 1px solid hsl(var(--border) / 0.6);
    padding: 1rem 1.1rem;
    transition: opacity 0.2s ease;
}

.cart-item:last-child {
    border-bottom: 0;
}

.cart-item.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

@media (min-width: 640px) {
    .cart-item {
        grid-template-columns: 7rem 1fr;
        gap: 1.15rem;
        padding: 1.15rem 1.25rem;
    }
}

.cart-item__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid hsl(var(--border) / 0.7);
    border-radius: 0.85rem;
    background: #fff;
}

.dark .cart-item__media {
    background: hsl(var(--secondary) / 0.35);
}

.cart-item__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.35rem;
}

.cart-item__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: hsl(var(--text) / 0.3);
}

.cart-item__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.55rem;
}

.cart-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.cart-item__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.7;
    color: hsl(var(--text) / 0.92);
}

.cart-item__name:hover {
    color: hsl(var(--primary));
}

.cart-item__remove {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    color: hsl(var(--text) / 0.45);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.cart-item__remove:hover {
    background: rgba(239, 64, 86, 0.08);
    color: #ef4056;
}

.cart-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    font-size: 0.78rem;
    color: hsl(var(--text) / 0.55);
}

.cart-item__color {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cart-item__color i {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
}

.cart-item__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
}

.cart-item__qty .product-qty__input {
    display: inline-flex;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.cart-item__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    text-align: left;
}

.cart-item__price del {
    font-size: 0.78rem;
    color: hsl(var(--text) / 0.4);
}

.cart-item__off {
    border-radius: 0.4rem;
    background: #ef4056;
    padding: 0.1rem 0.35rem;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
}

.cart-item__payable {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    color: hsl(var(--text) / 0.92);
}

.cart-item__payable strong {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cart-item__payable span {
    font-size: 0.75rem;
    color: hsl(var(--text) / 0.5);
}

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 3.5rem 1.25rem;
    text-align: center;
    color: hsl(var(--text) / 0.6);
}

.cart-empty__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: hsl(var(--primary));
    padding: 0.7rem 1.25rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
}

.cart-empty__cta:hover {
    background: hsl(var(--primary-btn));
}

.cart-summary {
    border: 1px solid hsl(var(--border) / 0.75);
    border-radius: 1rem;
    background: hsl(var(--muted));
    padding: 1rem 1.1rem 1.2rem;
    box-shadow: 0 8px 28px -18px rgba(0, 0, 0, 0.28);
}

.cart-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid hsl(var(--border) / 0.55);
    padding: 0.95rem 0;
    font-size: 0.9rem;
    color: hsl(var(--text) / 0.75);
}

.cart-summary__row:last-of-type {
    border-bottom: 0;
}

.cart-summary__row strong {
    font-variant-numeric: tabular-nums;
}

.cart-summary__row--total {
    font-weight: 700;
    color: hsl(var(--text) / 0.92);
}

.cart-summary__row--total strong {
    font-size: 1.1rem;
}

.cart-summary__cta {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 0.85rem;
    border-radius: 0.75rem;
    background: hsl(var(--primary));
    padding: 0.85rem 1rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.cart-summary__cta:hover {
    background: hsl(var(--primary-btn));
}

.cart-summary__cta.is-disabled {
    pointer-events: none;
    opacity: 0.45;
}

.cart-summary__note {
    margin-top: 0.7rem;
    text-align: center;
    font-size: 0.75rem;
    color: hsl(var(--text) / 0.45);
}

.cart-summary-mobile {
    position: fixed;
    inset-inline: 0;
    bottom: calc(3.55rem + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid hsl(var(--border) / 0.8);
    background: hsl(var(--muted) / 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 0.75rem 1rem;
    box-shadow: 0 -10px 28px -18px rgba(0, 0, 0, 0.35);
    transition: bottom 0.3s ease;
}

@media (min-width: 1024px) {
    .cart-summary-mobile {
        display: none !important;
    }
}

body.is-scroll-down .cart-summary-mobile {
    bottom: 0;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}

.cart-summary-mobile__info {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.75rem;
    color: hsl(var(--text) / 0.55);
}

.cart-summary-mobile__info strong {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    color: hsl(var(--text) / 0.92);
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cart-summary-mobile__info small {
    font-size: 0.7rem;
    font-weight: 500;
    color: hsl(var(--text) / 0.5);
}

.cart-summary-mobile .cart-summary__cta {
    width: auto;
    margin-top: 0;
    flex-shrink: 0;
    padding: 0.7rem 1.1rem;
    font-size: 0.8125rem;
}

.is-hidden {
    display: none !important;
}

/* —— Payment page —— */
.pay-page {
    padding-bottom: 5.5rem;
}

@media (min-width: 1024px) {
    .pay-page {
        padding-bottom: 2rem;
    }
}

.pay-layout {
    display: flex;
    justify-content: center;
}

.pay-card {
    width: 100%;
    max-width: 34rem;
    border: 1px solid hsl(var(--border) / 0.75);
    border-radius: 1.15rem;
    background: hsl(var(--muted));
    padding: 1.15rem 1.1rem 1.35rem;
    box-shadow: 0 12px 36px -22px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
    .pay-card {
        padding: 1.4rem 1.4rem 1.6rem;
    }
}

.pay-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}

.pay-card__icon {
    display: inline-flex;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
}

.pay-card__title {
    font-size: 1.15rem;
    font-weight: 800;
}

.pay-card__subtitle {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: hsl(var(--text) / 0.55);
}

.pay-alerts {
    margin-bottom: 0.85rem;
}

.pay-alert {
    border-radius: 0.75rem;
    background: rgba(239, 64, 86, 0.08);
    padding: 0.65rem 0.85rem;
    color: #ef4056;
    font-size: 0.8125rem;
    text-align: center;
}

.pay-meta {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.pay-meta__item {
    border: 1px solid hsl(var(--border) / 0.7);
    border-radius: 0.9rem;
    background: hsl(var(--background) / 0.55);
    padding: 0.85rem 0.95rem;
}

.pay-meta__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: hsl(var(--text) / 0.5);
}

.pay-meta__value {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
    color: hsl(var(--text) / 0.82);
}

.pay-meta__value strong {
    font-weight: 800;
    color: hsl(var(--text) / 0.95);
}

.pay-meta__hint {
    color: hsl(var(--primary));
    font-size: 0.78rem;
}

.pay-discount {
    margin-bottom: 1rem;
}

.pay-discount__row {
    display: flex;
    gap: 0.5rem;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 0.85rem;
    background: hsl(var(--background) / 0.55);
}

.pay-discount__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.8rem 0.95rem;
    outline: none;
    font-size: 0.875rem;
}

.pay-discount__btn {
    padding: 0 1rem;
    color: hsl(var(--primary));
    font-size: 0.875rem;
    font-weight: 800;
    white-space: nowrap;
}

.pay-discount__btn:hover {
    color: hsl(var(--primary-btn));
}

.pay-discount__msg {
    min-height: 1.15rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
}

.pay-discount__msg.is-ok {
    color: hsl(var(--success));
}

.pay-discount__msg.is-error {
    color: #ef4056;
}

.pay-items {
    margin-bottom: 0.85rem;
    border: 1px solid hsl(var(--border) / 0.7);
    border-radius: 0.9rem;
    overflow: hidden;
}

.pay-items__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 700;
    background: hsl(var(--background) / 0.4);
}

.pay-items__body {
    display: none;
    border-top: 1px solid hsl(var(--border) / 0.6);
    padding: 0.75rem;
}

.pay-items__body.is-open {
    display: block;
}

.pay-items__list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 18rem;
    overflow-y: auto;
}

.pay-item {
    display: grid;
    grid-template-columns: 4.25rem 1fr;
    gap: 0.75rem;
    border-radius: 0.75rem;
    background: hsl(var(--background) / 0.55);
    padding: 0.65rem;
}

.pay-item__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 0.65rem;
    border: 1px solid hsl(var(--border) / 0.65);
    background: #fff;
}

.dark .pay-item__media {
    background: hsl(var(--secondary) / 0.35);
}

.pay-item__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.2rem;
}

.pay-item__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: hsl(var(--text) / 0.3);
}

.pay-item__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.3rem;
}

.pay-item__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.55;
}

.pay-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    font-size: 0.72rem;
    color: hsl(var(--text) / 0.55);
}

.pay-item__color {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.pay-item__color i {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    border: 1px solid hsl(var(--border));
}

.pay-item__price {
    margin-top: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: hsl(var(--text) / 0.55);
}

.pay-item__price strong {
    font-size: 0.92rem;
    font-weight: 800;
    color: hsl(var(--text) / 0.92);
    font-variant-numeric: tabular-nums;
}

.pay-empty {
    padding: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: hsl(var(--text) / 0.55);
}

.pay-summary {
    margin-bottom: 1rem;
}

.pay-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid hsl(var(--border) / 0.55);
    padding: 0.8rem 0;
    font-size: 0.875rem;
    color: hsl(var(--text) / 0.72);
}

.pay-summary__row strong {
    font-variant-numeric: tabular-nums;
}

.pay-summary__row--total {
    border-bottom: 0;
    font-weight: 700;
    color: hsl(var(--text) / 0.92);
}

.pay-summary__row--total strong {
    font-size: 1.15rem;
}

.pay-actions__note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    font-size: 0.75rem;
    line-height: 1.7;
    color: hsl(var(--text) / 0.55);
}

.pay-actions__cta {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.85rem;
    background: hsl(var(--primary));
    padding: 0.9rem 1rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.pay-actions__cta:hover {
    background: hsl(var(--primary-btn));
}

.pay-actions__cta.is-loading,
.pay-actions__cta:disabled {
    opacity: 0.7;
    pointer-events: none;
}

.pay-actions__amount {
    opacity: 0.9;
    font-size: 0.8rem;
    font-weight: 600;
}

.pay-actions__spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 9999px;
    animation: pay-spin 0.7s linear infinite;
}

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

.pay-actions__back {
    display: block;
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.55);
}

.pay-actions__back:hover {
    color: hsl(var(--primary));
}

/* ===== Account orders ===== */
.orders-panel {
    overflow: hidden;
    padding: 1.15rem 1rem 1.35rem;
}

@media (min-width: 768px) {
    .orders-panel {
        padding: 1.4rem 1.35rem 1.6rem;
    }
}

.orders-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid hsl(var(--border) / 0.7);
}

.orders-panel__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(var(--text));
}

.orders-panel__subtitle {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: hsl(var(--text) / 0.55);
}

.orders-panel__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 4.25rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.9rem;
    background: hsl(var(--primary) / 0.08);
    border: 1px solid hsl(var(--primary) / 0.18);
}

.orders-panel__stat-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: hsl(var(--primary));
    line-height: 1.1;
}

.orders-panel__stat-label {
    font-size: 0.7rem;
    color: hsl(var(--text) / 0.55);
}

.orders-urgent {
    margin-bottom: 1.35rem;
    padding: 0.95rem;
    border-radius: 1rem;
    background:
        linear-gradient(135deg, hsl(38 92% 50% / 0.1), hsl(var(--background) / 0.4)),
        hsl(var(--background));
    border: 1px solid hsl(38 92% 50% / 0.35);
}

.orders-urgent__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    color: #b45309;
}

.orders-urgent__head h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: hsl(var(--text));
}

.orders-urgent__head p {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: hsl(var(--text) / 0.6);
}

.orders-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.orders-tabs {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.orders-tabs::-webkit-scrollbar {
    display: none;
}

.orders-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid hsl(var(--border) / 0.85);
    background: hsl(var(--background));
    color: hsl(var(--text) / 0.7);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.orders-tab span {
    display: inline-flex;
    min-width: 1.35rem;
    height: 1.35rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: hsl(var(--text) / 0.06);
    font-size: 0.72rem;
    font-weight: 700;
}

.orders-tab.is-active {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: #fff;
}

.orders-tab.is-active span {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.orders-tab:hover:not(.is-active) {
    border-color: hsl(var(--primary) / 0.4);
    color: hsl(var(--primary));
}

.orders-pane[hidden] {
    display: none !important;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.order-card {
    border: 1px solid hsl(var(--border) / 0.8);
    border-radius: 1rem;
    background: hsl(var(--background));
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.order-card:hover {
    border-color: hsl(var(--primary) / 0.4);
    box-shadow: 0 8px 24px hsl(var(--text) / 0.05);
    transform: translateY(-1px);
}

.order-card--urgent {
    border-color: hsl(38 92% 50% / 0.45);
    background: linear-gradient(180deg, hsl(38 92% 50% / 0.06), hsl(var(--background)));
}

.order-card--danger {
    border-color: hsl(0 72% 55% / 0.28);
}

.order-card__link {
    display: block;
    padding: 1rem;
    color: inherit;
}

.order-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.order-card__chevron {
    color: hsl(var(--text) / 0.35);
    flex-shrink: 0;
}

.order-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: hsl(var(--text) / 0.06);
    color: hsl(var(--text) / 0.75);
}

.order-status--warning {
    background: hsl(38 92% 50% / 0.14);
    color: #b45309;
}

.order-status--info {
    background: hsl(190 70% 40% / 0.12);
    color: hsl(190 70% 28%);
}

.order-status--success {
    background: hsl(152 55% 40% / 0.12);
    color: hsl(152 55% 28%);
}

.order-status--danger {
    background: hsl(0 72% 55% / 0.12);
    color: hsl(0 65% 42%);
}

.order-card__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 0.85rem;
    margin-bottom: 0.95rem;
}

@media (min-width: 768px) {
    .order-card__meta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.order-card__label {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.72rem;
    color: hsl(var(--text) / 0.5);
}

.order-card__value {
    font-size: 0.875rem;
    font-weight: 650;
    color: hsl(var(--text) / 0.92);
}

.order-card__value--price {
    color: hsl(var(--primary));
}

.order-card__value--price small {
    margin-right: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.55);
}

.order-card__meta-item--warn .order-card__value {
    color: #b45309;
}

.order-progress {
    margin-bottom: 0.95rem;
}

.order-progress__track {
    position: relative;
    height: 0.4rem;
    border-radius: 999px;
    background: hsl(var(--border) / 0.7);
    overflow: hidden;
}

.order-progress__bar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: inherit;
    transition: width 0.35s ease;
}

.order-progress__bar--warning { background: #f59e0b; }
.order-progress__bar--info { background: hsl(190 70% 42%); }
.order-progress__bar--success { background: hsl(152 55% 42%); }
.order-progress__bar--muted { background: hsl(var(--text) / 0.35); }

.order-progress__steps {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    font-size: 0.68rem;
    color: hsl(var(--text) / 0.4);
}

.order-progress__steps .is-done {
    color: hsl(var(--primary));
    font-weight: 700;
}

.order-card__thumbs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    scrollbar-width: none;
}

.order-card__thumbs::-webkit-scrollbar {
    display: none;
}

.order-card__thumb {
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 0.7rem;
    border: 1px solid hsl(var(--border) / 0.7);
    background: hsl(var(--muted));
}

.order-card__thumb-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 auto;
    border-radius: 0.7rem;
    background: hsl(var(--text) / 0.05);
    border: 1px dashed hsl(var(--border));
    font-size: 0.78rem;
    font-weight: 700;
    color: hsl(var(--text) / 0.55);
}

.order-card__actions {
    display: flex;
    gap: 0.55rem;
    padding: 0 1rem 1rem;
}

.order-card__pay,
.order-card__detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.order-card__pay {
    flex: 1.4;
    background: hsl(var(--primary));
    color: #fff;
}

.order-card__pay:hover {
    background: hsl(var(--primary-btn));
}

.order-card__detail {
    flex: 1;
    border: 1px solid hsl(var(--border) / 0.9);
    background: hsl(var(--muted));
    color: hsl(var(--text) / 0.8);
}

.order-card__detail:hover {
    border-color: hsl(var(--primary) / 0.4);
    color: hsl(var(--primary));
}

.orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    padding: 2.4rem 1rem;
    border: 1px dashed hsl(var(--border));
    border-radius: 1rem;
    background: hsl(var(--background) / 0.55);
}

.orders-empty__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.35rem;
    color: hsl(var(--primary) / 0.75);
}

.orders-empty h3 {
    font-size: 0.98rem;
    font-weight: 700;
    color: hsl(var(--text));
}

.orders-empty p {
    max-width: 22rem;
    font-size: 0.8125rem;
    color: hsl(var(--text) / 0.55);
    margin-bottom: 0.35rem;
}

/* ===== Account dashboard ===== */
.dash-panel {
    overflow: hidden;
    padding: 1.15rem 1rem 1.4rem;
}

@media (min-width: 768px) {
    .dash-panel {
        padding: 1.4rem 1.35rem 1.65rem;
    }
}

.dash-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid hsl(var(--border) / 0.7);
}

.dash-panel__eyebrow {
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: hsl(var(--primary));
}

.dash-panel__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(var(--text));
}

.dash-panel__subtitle {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: hsl(var(--text) / 0.55);
}

.dash-panel__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 4.25rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.9rem;
    background: hsl(var(--primary) / 0.08);
    border: 1px solid hsl(var(--primary) / 0.18);
}

.dash-panel__stat-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: hsl(var(--primary));
    line-height: 1.1;
}

.dash-panel__stat-label {
    font-size: 0.7rem;
    color: hsl(var(--text) / 0.55);
}

.dash-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid hsl(38 92% 50% / 0.35);
    background:
        linear-gradient(135deg, hsl(38 92% 50% / 0.12), hsl(var(--background) / 0.5)),
        hsl(var(--background));
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.dash-alert:hover {
    border-color: hsl(38 92% 50% / 0.55);
    transform: translateY(-1px);
}

.dash-alert__icon {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    color: #b45309;
}

.dash-alert__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dash-alert__body strong {
    font-size: 0.875rem;
    font-weight: 700;
    color: hsl(var(--text));
}

.dash-alert__body span {
    font-size: 0.75rem;
    color: hsl(var(--text) / 0.58);
}

.dash-alert__cta {
    flex: 0 0 auto;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: #b45309;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}

.dash-section {
    margin-bottom: 1.35rem;
}

.dash-section:last-child {
    margin-bottom: 0;
}

.dash-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.dash-section__head h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: hsl(var(--text) / 0.88);
}

.dash-section__link {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.78rem;
    font-weight: 650;
    color: hsl(var(--primary));
}

.dash-section__link:hover {
    color: hsl(var(--primary-btn));
}

.dash-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

@media (min-width: 768px) {
    .dash-shortcuts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.dash-shortcut {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.9rem;
    border-radius: 0.95rem;
    border: 1px solid hsl(var(--border) / 0.8);
    background: hsl(var(--background));
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dash-shortcut:hover {
    border-color: hsl(var(--primary) / 0.4);
    box-shadow: 0 8px 20px hsl(var(--text) / 0.04);
    transform: translateY(-1px);
}

.dash-shortcut__icon {
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    font-size: 1.25rem;
}

.dash-shortcut__icon--primary {
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
}

.dash-shortcut__icon--teal {
    background: hsl(168 55% 40% / 0.12);
    color: hsl(168 55% 30%);
}

.dash-shortcut__icon--sky {
    background: hsl(200 70% 45% / 0.12);
    color: hsl(200 70% 32%);
}

.dash-shortcut__icon--rose {
    background: hsl(350 70% 50% / 0.1);
    color: hsl(350 65% 42%);
}

.dash-shortcut__icon--amber {
    background: hsl(38 92% 50% / 0.14);
    color: #b45309;
}

.dash-shortcut__label {
    font-size: 0.84rem;
    font-weight: 700;
    color: hsl(var(--text) / 0.9);
}

.dash-shortcut__meta,
.dash-shortcut__badge {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.dash-shortcut__meta {
    background: hsl(var(--text) / 0.06);
    color: hsl(var(--text) / 0.65);
}

.dash-shortcut__badge {
    background: hsl(var(--primary));
    color: #fff;
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.dash-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0.7rem;
    border-radius: 1rem;
    border: 1px solid hsl(var(--border) / 0.8);
    background: hsl(var(--background));
    text-align: center;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px hsl(var(--text) / 0.04);
}

.dash-stat__icon {
    width: 1.35rem;
    height: 1.35rem;
    margin-bottom: 0.15rem;
}

.dash-stat__num {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.dash-stat__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--text) / 0.55);
}

.dash-stat--current {
    border-color: hsl(var(--primary) / 0.28);
}

.dash-stat--current .dash-stat__icon,
.dash-stat--current .dash-stat__num {
    color: hsl(var(--primary));
}

.dash-stat--done {
    border-color: hsl(152 55% 40% / 0.28);
}

.dash-stat--done .dash-stat__icon,
.dash-stat--done .dash-stat__num {
    color: hsl(152 55% 32%);
}

.dash-stat--cancel {
    border-color: hsl(0 72% 55% / 0.25);
}

.dash-stat--cancel .dash-stat__icon,
.dash-stat--cancel .dash-stat__num {
    color: hsl(0 65% 42%);
}

/* ===== Shared account panel ===== */
.account-panel { overflow:hidden; padding:1.15rem 1rem 1.4rem; }
@media (min-width:768px){ .account-panel{ padding:1.4rem 1.35rem 1.65rem; } }
.account-panel__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.15rem; padding-bottom:1rem; border-bottom:1px solid hsl(var(--border) / 0.7); }
.account-panel__title{ font-size:1.1rem; font-weight:700; color:hsl(var(--text)); }
.account-panel__subtitle{ margin-top:.25rem; font-size:.8125rem; color:hsl(var(--text) / 0.55); }
.account-panel__stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:4.25rem; padding:.55rem .75rem; border-radius:.9rem; background:hsl(var(--primary) / 0.08); border:1px solid hsl(var(--primary) / 0.18); }
.account-panel__stat-num{ font-size:1.15rem; font-weight:800; color:hsl(var(--primary)); line-height:1.1; }
.account-panel__stat-label{ font-size:.7rem; color:hsl(var(--text) / 0.55); }
.account-panel__danger-btn{ display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .9rem; border-radius:.75rem; border:1px solid hsl(0 72% 55% / .25); background:hsl(0 72% 55% / .08); color:hsl(0 65% 42%); font-size:.78rem; font-weight:700; }
.account-panel__danger-btn:hover{ background:hsl(0 72% 55% / .14); }
.account-panel__primary-btn{ display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .9rem; border-radius:.75rem; background:hsl(var(--primary)); color:#fff; font-size:.78rem; font-weight:700; }
.account-panel__primary-btn:hover{ background:hsl(var(--primary-btn)); }

.notif-list{ display:flex; flex-direction:column; gap:.75rem; }
.notif-card{ border:1px solid hsl(var(--border) / 0.8); border-radius:1rem; background:hsl(var(--background)); padding:1rem; }
.notif-card--unread{ border-color:hsl(var(--primary) / 0.35); background:linear-gradient(180deg, hsl(var(--primary) / 0.06), hsl(var(--background))); }
.notif-card__head{ display:flex; align-items:center; gap:.55rem; margin-bottom:.55rem; color:hsl(var(--primary)); font-weight:700; }
.notif-card__msg{ font-size:.875rem; color:hsl(var(--text) / 0.85); margin-bottom:.45rem; line-height:1.7; }
.notif-card__date{ font-size:.75rem; color:hsl(var(--text) / 0.5); margin-bottom:.75rem; }
.notif-card__thumbs{ display:flex; gap:.4rem; overflow-x:auto; margin-bottom:.75rem; }
.notif-card__thumbs img{ width:3rem; height:3rem; object-fit:cover; border-radius:.65rem; border:1px solid hsl(var(--border) / 0.7); }
.notif-card__cta{ display:inline-flex; align-items:center; justify-content:center; min-height:2.4rem; padding:.5rem 1rem; border-radius:.75rem; background:hsl(var(--primary)); color:#fff; font-size:.8125rem; font-weight:700; }

.acc-product-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
@media (min-width:768px){ .acc-product-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.acc-product-card{ border:1px solid hsl(var(--border) / 0.8); border-radius:1rem; background:hsl(var(--background)); overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.acc-product-card:hover{ border-color:hsl(var(--primary) / 0.35); box-shadow:0 8px 20px hsl(var(--text) / 0.04); transform:translateY(-1px); }
.acc-product-card__media{ position:relative; display:block; aspect-ratio:1/1; background:hsl(var(--muted)); }
.acc-product-card__media img{ width:100%; height:100%; object-fit:cover; }
.acc-product-card__badge{ position:absolute; top:.6rem; right:.6rem; padding:.2rem .5rem; border-radius:999px; background:#b45309; color:#fff; font-size:.7rem; font-weight:700; }
.acc-product-card__body{ padding:.85rem; }
.acc-product-card__title{ display:block; min-height:2.6em; margin-bottom:.65rem; font-size:.8125rem; font-weight:650; color:hsl(var(--text) / 0.9); line-height:1.45; }
.acc-product-card__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem; }
.acc-product-card__delete{ display:inline-flex; width:2.2rem; height:2.2rem; align-items:center; justify-content:center; border-radius:.65rem; border:1px solid hsl(0 72% 55% / .25); background:hsl(0 72% 55% / .08); color:hsl(0 65% 42%); }
.acc-product-card__delete:hover{ background:hsl(0 72% 55% / .16); }
.acc-product-card__price{ text-align:left; }
.acc-product-card__price del{ display:block; font-size:.72rem; color:hsl(var(--text) / 0.45); }
.acc-product-card__price strong{ color:hsl(var(--primary)); font-size:.9rem; }
.acc-product-card__price small{ margin-right:.15rem; font-size:.7rem; font-weight:600; color:hsl(var(--text) / 0.5); }
.acc-product-card__date{ margin-top:.45rem; font-size:.72rem; color:hsl(var(--text) / 0.45); }

.addr-list{display:flex;flex-direction:column;gap:.75rem}
.addr-card{border:1px solid hsl(var(--border) / 0.8);border-radius:1rem;background:hsl(var(--background));padding:1rem;transition:border-color .15s ease,box-shadow .15s ease}
.addr-card:hover{border-color:hsl(var(--primary) / 0.35);box-shadow:0 8px 20px hsl(var(--text) / 0.04)}
.addr-card__top{display:flex;justify-content:space-between;gap:.75rem;margin-bottom:.65rem}
.addr-card__loc{font-size:.875rem;font-weight:700;color:hsl(var(--text) / 0.92);line-height:1.6}
.addr-card__meta{font-size:.78rem;color:hsl(var(--text) / 0.55);margin-top:.25rem}
.addr-card__badge{flex:0 0 auto;padding:.25rem .6rem;border-radius:999px;background:hsl(var(--primary) / 0.12);color:hsl(var(--primary));font-size:.7rem;font-weight:700}
.addr-card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem}
.addr-card__receiver{font-size:.8rem;color:hsl(var(--text) / 0.6)}
.addr-card__actions{display:flex;gap:.45rem}
.addr-card__btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-height:2.1rem;padding:.35rem .75rem;border-radius:.65rem;font-size:.75rem;font-weight:700}
.addr-card__btn--edit{background:hsl(152 55% 40% / .1);color:hsl(152 55% 28%)}
.addr-card__btn--del{background:hsl(0 72% 55% / .08);color:hsl(0 65% 42%)}
.addr-add{display:flex;align-items:center;justify-content:center;min-height:4.5rem;margin-top:.85rem;border:1px dashed hsl(var(--border));border-radius:1rem;color:hsl(var(--primary));background:hsl(var(--background) / 0.5);transition:border-color .15s ease,background .15s ease}
.addr-add:hover{border-color:hsl(var(--primary) / 0.5);background:hsl(var(--primary) / 0.04)}

.profile-fields{display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:640px){.profile-fields{grid-template-columns:1fr 1fr}}
.profile-field{width:100%;text-align:right;border:1px solid hsl(var(--border) / 0.8);border-radius:1rem;background:hsl(var(--background));padding:1rem;transition:border-color .15s ease,box-shadow .15s ease}
.profile-field:hover{border-color:hsl(var(--primary) / 0.4);box-shadow:0 8px 20px hsl(var(--text) / 0.04)}
.profile-field__row{display:flex;justify-content:space-between;gap:.75rem}
.profile-field__label{font-size:.75rem;color:hsl(var(--text) / 0.5);margin-bottom:.35rem}
.profile-field__value{font-size:.9rem;font-weight:650;color:hsl(var(--text) / 0.9)}
.profile-field__badge{display:inline-flex;margin-top:.65rem;padding:.2rem .55rem;border-radius:999px;background:hsl(152 55% 40% / .12);color:hsl(152 55% 28%);font-size:.7rem;font-weight:700}
.profile-field__badge--warn{background:hsl(38 92% 50% / .14);color:#b45309}

.od-section{margin-bottom:1.15rem}
.od-section:last-child{margin-bottom:0}
.od-section__title{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.95rem;font-weight:700;color:hsl(var(--text) / 0.88)}
.od-box{border:1px solid hsl(var(--border) / 0.8);border-radius:1rem;background:hsl(var(--background));padding:1rem}
.od-meta{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:0.9rem 0}
@media(min-width:768px){.od-meta{grid-template-columns:repeat(4,minmax(0,1fr))}}
.od-meta__label{display:block;font-size:.72rem;color:hsl(var(--text) / 0.5);margin-bottom:.15rem}
.od-meta__value{font-size:.875rem;font-weight:650}
.od-meta__value--price{color:hsl(var(--primary))}
.od-summary{display:grid;gap:.65rem}
.od-summary__row{display:flex;justify-content:space-between;gap:1rem;font-size:.875rem}
.od-summary__row span:first-child{color:hsl(var(--text) / 0.55)}
.od-summary__row--total{padding-top:.65rem;border-top:1px solid hsl(var(--border) / 0.7);font-weight:800}
.od-items{display:flex;flex-direction:column;gap:.75rem}
.od-item{display:grid;grid-template-columns:4.5rem 1fr;gap:.75rem;padding:.75rem;border:1px solid hsl(var(--border) / 0.75);border-radius:.9rem;background:hsl(var(--muted) / 0.35)}
.od-item img{width:4.5rem;height:4.5rem;object-fit:cover;border-radius:.7rem;border:1px solid hsl(var(--border) / 0.7)}
.od-item__name{font-size:.875rem;font-weight:650;color:hsl(var(--text) / 0.92);line-height:1.45}
.od-item__var{margin-top:.35rem;font-size:.75rem;color:hsl(var(--text) / 0.55)}
.od-item__foot{display:flex;justify-content:space-between;align-items:center;margin-top:.55rem;gap:.5rem}
.od-item__qty{font-size:.75rem;padding:.2rem .55rem;border-radius:.5rem;border:1px solid hsl(var(--border) / 0.8);color:hsl(var(--text) / 0.65)}
.od-item__price{color:hsl(var(--primary));font-weight:700;font-size:.875rem}