:root {
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --text-sm: clamp(0.825rem, 0.78rem + 0.3vw, 0.95rem);
    --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    --text-lg: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
    --text-xl: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    --text-2xl: clamp(1.9rem, 1.1rem + 2.2vw, 3.2rem);
    --text-3xl: clamp(2.4rem, 0.9rem + 4vw, 4.6rem);

    --s1: .25rem;
    --s2: .5rem;
    --s3: .75rem;
    --s4: 1rem;
    --s5: 1.25rem;
    --s6: 1.5rem;
    --s8: 2rem;
    --s10: 2.5rem;
    --s12: 3rem;
    --s16: 4rem;

    --r-sm: .3rem;
    --r-md: .5rem;
    --r-lg: .8rem;
    --r-xl: 1.1rem;
    --r-2xl: 1.6rem;
    --r-pill: 9999px;

    --font-head: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
    --font-body: 'General Sans', 'Inter', sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 240ms;
}

/* ── DARK ─────────────────────────────────────── */
:root,
[data-theme="dark"] {
    --bg: #0c0c10;
    --surf: #111115;
    --surf2: #16161c;
    --surf3: #1c1c24;
    --surf4: #23232d;
    --bdr: rgba(255, 255, 255, .06);
    --bdr2: rgba(255, 255, 255, .11);

    --ink: #e8e6f0;
    --ink2: #9491a8;
    --ink3: #4e4c60;

    /* Warm amber + deep teal — deliberately not purple/violet */
    --hi: #e8a020;
    /* amber */
    --hi-glow: rgba(232, 160, 32, .28);
    --hi-dim: rgba(232, 160, 32, .1);
    --teal: #1fa8a0;
    --teal-glow: rgba(31, 168, 160, .2);
    --red: #e05050;

    --card-hover-bg: #1a1a22;
    --card-desc-color: #c8c5d8;

    --sh-sm: 0 1px 4px rgba(0, 0, 0, .5);
    --sh-md: 0 6px 24px rgba(0, 0, 0, .55);
    --sh-lg: 0 20px 60px rgba(0, 0, 0, .65);
}

/* ── LIGHT ────────────────────────────────────── */
[data-theme="light"] {
    --bg: #f2efe8;
    --surf: #faf8f3;
    --surf2: #f4f1e8;
    --surf3: #ede9dd;
    --surf4: #e5e0d2;
    --bdr: rgba(60, 50, 20, .08);
    --bdr2: rgba(60, 50, 20, .15);

    --ink: #1c1810;
    --ink2: #5a5244;
    --ink3: #b0a898;

    --hi: #c07a00;
    --hi-glow: rgba(192, 122, 0, .2);
    --hi-dim: rgba(192, 122, 0, .1);
    --teal: #167870;
    --teal-glow: rgba(22, 120, 112, .18);
    --red: #c43030;

    --card-hover-bg: #f7f4ec;
    --card-desc-color: #3d3628;

    --sh-sm: 0 1px 4px rgba(80, 60, 20, .08);
    --sh-md: 0 6px 24px rgba(80, 60, 20, .1);
    --sh-lg: 0 20px 60px rgba(80, 60, 20, .14);
}

/* ══════════════════════════════════════════════
       BASE
    ══════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--hi);
    border-radius: 99px;
}

/* Subtle dot pattern background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle, var(--bdr2) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* ══════════════════════════════════════════════
       NAVIGATION
    ══════════════════════════════════════════════ */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s3) var(--s8);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--bdr);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--s3);
    text-decoration: none;
    color: var(--ink);
}

.logo-mark {
    width: 38px;
    height: 38px;
    background: var(--hi);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-mark svg {
    color: #fff;
}

.logo-text {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: var(--text-lg);
    letter-spacing: -.02em;
}

.logo-sub {
    font-size: var(--text-xs);
    color: var(--ink2);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--s3);
}

/* Language switcher */
.lang-sw {
    display: flex;
    align-items: center;
    background: var(--surf2);
    border: 1px solid var(--bdr2);
    border-radius: var(--r-md);
    overflow: hidden;
}

.lang-btn {
    padding: var(--s1) var(--s3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink2);
    transition: all var(--dur) var(--ease);
    border-right: 1px solid var(--bdr);
    letter-spacing: .04em;
}

.lang-btn:last-child {
    border-right: none;
}

.lang-btn.active,
.lang-btn:hover {
    background: var(--hi);
    color: #fff;
}

.cart-pill {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    background: var(--hi-dim);
    border: 1px solid var(--hi);
    border-radius: var(--r-pill);
    color: var(--hi);
    font-size: var(--text-xs);
    font-weight: 700;
    transition: all var(--dur) var(--ease);
}

.cart-pill:hover {
    background: var(--hi);
    color: #fff;
}

.theme-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surf2);
    border: 1px solid var(--bdr2);
    border-radius: var(--r-lg);
    color: var(--ink2);
    transition: all var(--dur) var(--ease);
}

.theme-btn:hover {
    color: var(--hi);
    border-color: var(--hi);
}

/* ══════════════════════════════════════════════
       HERO — asymmetric, editorial layout
    ══════════════════════════════════════════════ */
.hero {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--s8);
    max-width: 1300px;
    margin: 0 auto;
    padding: clamp(var(--s12), 6vw, var(--s16)) var(--s8) var(--s10);
    align-items: end;
}

.hero-left {}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s5);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--hi);
}

.hero-tag-line {
    width: 28px;
    height: 2px;
    background: var(--hi);
    border-radius: 2px;
}

.hero-title {
    font-family: var(--font-head);
    font-size: var(--text-3xl);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.03em;
    margin-bottom: var(--s5);
}

.hero-title em {
    font-style: normal;
    color: var(--hi);
}

.hero-title .outline-word {
    -webkit-text-stroke: 2px var(--ink);
    color: transparent;
}

[data-theme="light"] .hero-title .outline-word {
    -webkit-text-stroke: 2px var(--ink);
}

.hero-sub {
    font-size: var(--text-base);
    color: var(--ink2);
    max-width: 52ch;
    line-height: 1.65;
    margin-bottom: var(--s8);
}

.hero-stats {
    display: flex;
    gap: var(--s8);
    flex-wrap: wrap;
}

.hstat-num {
    font-family: var(--font-head);
    font-size: var(--text-xl);
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
}

.hstat-lbl {
    font-size: var(--text-xs);
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: var(--s1);
}

/* Right panel — vertical text accent */
.hero-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s4);
    padding-bottom: var(--s2);
}

.hero-aside-card {
    background: var(--surf);
    border: 1px solid var(--bdr2);
    border-radius: var(--r-xl);
    padding: var(--s5);
}

.hero-aside-label {
    font-size: var(--text-xs);
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--s2);
}

.hero-aside-val {
    font-family: var(--font-head);
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--ink);
}

.hero-ticker {
    background: var(--hi);
    border-radius: var(--r-xl);
    padding: var(--s4) var(--s5);
    color: #fff;
}

.hero-ticker-label {
    font-size: var(--text-xs);
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hero-ticker-val {
    font-family: var(--font-head);
    font-size: var(--text-2xl);
    font-weight: 900;
    line-height: 1.1;
}

/* ══════════════════════════════════════════════
       FILTER BAR
    ══════════════════════════════════════════════ */
.filter-bar {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--s8) var(--s6);
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

.filter-sep {
    flex: 1;
    height: 1px;
    background: var(--bdr);
}

.flt-btn {
    padding: var(--s2) var(--s4);
    background: var(--surf2);
    border: 1px solid var(--bdr2);
    border-radius: var(--r-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink2);
    transition: all var(--dur) var(--ease);
    white-space: nowrap;
}

.flt-btn:hover {
    color: var(--hi);
    border-color: var(--hi);
    background: var(--hi-dim);
}

.flt-btn.active {
    background: var(--hi);
    border-color: var(--hi);
    color: #fff;
}

.sort-wrap {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-left: auto;
}

.sort-lbl {
    font-size: var(--text-xs);
    color: var(--ink3);
}

.sort-sel {
    background: var(--surf2);
    border: 1px solid var(--bdr2);
    color: var(--ink);
    border-radius: var(--r-md);
    padding: var(--s1) var(--s3);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    cursor: pointer;
}

/* ══════════════════════════════════════════════
       PRODUCTS SECTION
    ══════════════════════════════════════════════ */
.products-wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--s8) var(--s16);
}

.sec-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--s6);
}

.sec-title {
    font-family: var(--font-head);
    font-size: var(--text-xl);
    font-weight: 800;
}

.sec-count {
    font-size: var(--text-xs);
    color: var(--ink3);
    border: 1px solid var(--bdr2);
    border-radius: var(--r-pill);
    padding: var(--s1) var(--s3);
}

#grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    gap: var(--s5);
}

/* ══════════════════════════════════════════════
       PRODUCT CARD
    ══════════════════════════════════════════════ */
.card-wrap {
    perspective: 1100px;
}

.pcard {
    position: relative;
    background: var(--surf);
    border: 1px solid var(--bdr);
    border-radius: var(--r-2xl);
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    will-change: transform;
    transition:
        transform 0.35s var(--ease),
        box-shadow 0.35s var(--ease),
        border-color 0.25s,
        background 0.25s;

    opacity: 0;
    animation: cardIn 0.5s var(--ease) forwards;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pcard:hover {
    background: var(--card-hover-bg);
    border-color: var(--bdr2);
    box-shadow: var(--sh-lg), 0 0 0 1px var(--bdr2);
}

/* ─ Image zone ─ */
.pcard-img {
    position: relative;
    height: 220px;
    background: var(--surf3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pcard-img img {
    max-height: 170px;
    max-width: 100%;
    object-fit: contain;
    padding: var(--s4);
    transition: transform 0.5s var(--ease);
    transform-origin: center center;
}

.pcard:hover .pcard-img img {
    transform: scale(1.09) translateZ(16px);
}

/* category tag */
.cat-tag {
    position: absolute;
    top: var(--s3);
    left: var(--s3);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    z-index: 2;
}

.cat-elec {
    background: rgba(31, 168, 160, .18);
    color: var(--teal);
}

.cat-jew {
    background: rgba(232, 160, 32, .16);
    color: var(--hi);
}

.cat-men {
    background: rgba(80, 120, 255, .15);
    color: #7a9fff;
}

.cat-wom {
    background: rgba(200, 80, 160, .15);
    color: #d080c0;
}

/* wishlist btn */
.wish-btn {
    position: absolute;
    top: var(--s3);
    right: var(--s3);
    z-index: 3;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surf) 90%, transparent);
    border: 1px solid var(--bdr2);
    border-radius: var(--r-pill);
    color: var(--ink3);
    transition: all var(--dur) var(--ease);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.wish-btn:hover,
.wish-btn.on {
    color: var(--red);
    border-color: var(--red);
}

.wish-btn.on svg {
    fill: var(--red);
}

/* ─ Card body ─ */
.pcard-body {
    padding: var(--s4) var(--s5) var(--s5);
}

.pcard-name {
    font-family: var(--font-head);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: var(--s2);
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pcard-desc {
    font-size: var(--text-xs);
    line-height: 1.65;
    /* FIXED: always readable color */
    color: var(--card-desc-color);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--s4);
}

/* Extra insurance for light mode */
[data-theme="light"] .pcard-desc {
    color: #3d3628;
}

[data-theme="dark"] .pcard-desc {
    color: #b8b4cc;
}

/* rating row */
.pcard-rating {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s4);
}

.stars {
    display: flex;
    gap: 2px;
}

.star {
    width: 12px;
    height: 12px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.s-full {
    background: var(--hi);
}

.s-half {
    background: linear-gradient(90deg, var(--hi) 50%, var(--surf4) 50%);
}

.s-emp {
    background: var(--surf4);
}

.r-score {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--hi);
}

.r-cnt {
    font-size: var(--text-xs);
    color: var(--ink3);
}

.rating-bar {
    flex: 1;
    height: 3px;
    background: var(--surf4);
    border-radius: 99px;
    overflow: hidden;
}

.rating-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--hi), var(--teal));
    border-radius: 99px;
    width: 0;
    transition: width 1s var(--ease);
}

/* footer row */
.pcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--s4);
    border-top: 1px solid var(--bdr);
}

.pcard-price {
    font-family: var(--font-head);
    font-size: var(--text-lg);
    font-weight: 900;
    color: var(--teal);
}

.add-btn {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    background: var(--hi);
    color: #fff;
    border-radius: var(--r-lg);
    font-size: var(--text-xs);
    font-weight: 700;
    transition: all var(--dur) var(--ease);
    position: relative;
    overflow: hidden;
}

.add-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .15);
    opacity: 0;
    transition: opacity var(--dur);
}

.add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--hi-glow);
}

.add-btn:hover::after {
    opacity: 1;
}

.add-btn:active {
    transform: translateY(0);
}

.add-btn.ok {
    background: #2aaa60;
}

/* ══════════════════════════════════════════════
       SKELETON
    ══════════════════════════════════════════════ */
@keyframes shimmer {
    0% {
        background-position: -200% 0
    }

    100% {
        background-position: 200% 0
    }
}

.sk {
    background: linear-gradient(90deg, var(--surf3) 25%, var(--surf4) 50%, var(--surf3) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--r-sm);
}

.sk-card {
    background: var(--surf);
    border: 1px solid var(--bdr);
    border-radius: var(--r-2xl);
    overflow: hidden;
}

.sk-img {
    height: 220px;
}

.sk-body {
    padding: var(--s4) var(--s5) var(--s5);
}

.sk-line {
    height: 12px;
    margin-bottom: var(--s3);
}

/* ══════════════════════════════════════════════
       MODAL
    ══════════════════════════════════════════════ */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, .68);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s;
}

.overlay.open {
    opacity: 1;
    pointer-events: all;
}

.modal {
    background: var(--surf);
    border: 1px solid var(--bdr2);
    border-radius: var(--r-2xl);
    max-width: 780px;
    width: 100%;
    max-height: 90dvh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: var(--sh-lg), 0 0 80px var(--hi-glow);
    transform: scale(.9) translateY(30px);
    transition: transform .38s var(--ease);
    position: relative;
}

.overlay.open .modal {
    transform: scale(1) translateY(0);
}

.modal-img-side {
    background: var(--surf3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s8);
    border-radius: var(--r-2xl) 0 0 var(--r-2xl);
    min-height: 360px;
}

.modal-img-side img {
    max-height: 260px;
    max-width: 100%;
    object-fit: contain;
    transition: transform .6s var(--ease);
}

.modal-img-side img:hover {
    transform: scale(1.06) rotate(-3deg);
}

.modal-side {
    padding: var(--s8);
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.modal-cat-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--teal);
}

.modal-title {
    font-family: var(--font-head);
    font-size: var(--text-xl);
    font-weight: 900;
    line-height: 1.2;
}

.modal-desc {
    font-size: var(--text-sm);
    color: var(--ink2);
    line-height: 1.7;
}

.modal-price {
    font-family: var(--font-head);
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--teal);
}

.modal-rating {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.modal-buy-btn {
    margin-top: auto;
    width: 100%;
    padding: var(--s4);
    background: var(--hi);
    color: #fff;
    border-radius: var(--r-xl);
    font-family: var(--font-head);
    font-size: var(--text-base);
    font-weight: 800;
    transition: all var(--dur) var(--ease);
    box-shadow: 0 4px 20px var(--hi-glow);
}

.modal-buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--hi-glow);
}

.modal-close {
    position: absolute;
    top: var(--s4);
    right: var(--s4);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surf3);
    border: 1px solid var(--bdr2);
    border-radius: var(--r-pill);
    color: var(--ink2);
    transition: all var(--dur) var(--ease);
    z-index: 5;
}

.modal-close:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* ══════════════════════════════════════════════
       TOAST
    ══════════════════════════════════════════════ */
.toasts {
    position: fixed;
    bottom: var(--s8);
    right: var(--s8);
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s5);
    background: var(--surf2);
    border: 1px solid var(--hi);
    border-radius: var(--r-xl);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: 600;
    box-shadow: var(--sh-lg);
    animation: tIn .35s var(--ease) both, tOut .3s 2.4s var(--ease) forwards;
}

@keyframes tIn {
    from {
        opacity: 0;
        transform: translateX(40px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes tOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translateX(40px)
    }
}

/* ══════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════ */
footer {
    text-align: center;
    padding: var(--s8);
    border-top: 1px solid var(--bdr);
    color: var(--ink3);
    font-size: var(--text-xs);
}

footer a {
    color: var(--hi);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* ══════════════════════════════════════════════
       EMPTY / ERROR
    ══════════════════════════════════════════════ */
.empty-box {
    grid-column: 1/-1;
    text-align: center;
    padding: var(--s16) var(--s8);
    color: var(--ink2);
}

.empty-box svg {
    margin: 0 auto var(--s5);
    color: var(--ink3);
}

.empty-box h3 {
    font-family: var(--font-head);
    font-size: var(--text-xl);
    font-weight: 800;
    margin-bottom: var(--s3);
}

/* ══════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════ */
@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .hero-right {
        display: none;
    }
}

@media (max-width: 640px) {
    nav {
        padding: var(--s3) var(--s4);
    }

    .filter-bar,
    .products-wrap {
        padding-inline: var(--s4);
    }

    .hero {
        padding-inline: var(--s4);
    }

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

    .modal-img-side {
        border-radius: var(--r-2xl) var(--r-2xl) 0 0;
        min-height: 200px;
    }

    .toasts {
        left: var(--s4);
        right: var(--s4);
        bottom: var(--s5);
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}