:root {
    --bg: oklch(1 0 0);
    --surface: oklch(0.965 0.004 20);
    --surface-strong: oklch(0.925 0.008 20);
    --ink: oklch(0.18 0.015 20);
    --muted: oklch(0.46 0.018 20);
    --primary: oklch(0.47 0.175 20);
    --primary-dark: oklch(0.39 0.15 20);
    --primary-pale: oklch(0.945 0.035 20);
    --gold: oklch(0.78 0.16 84);
    --gold-pale: oklch(0.94 0.06 84);
    --black: oklch(0.105 0 0);
    --white: oklch(1 0 0);
    --success: oklch(0.52 0.145 151);
    --danger: oklch(0.52 0.19 25);
    --line: oklch(0.885 0.008 20);
    --font-body: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --container: 1200px;
    --z-sticky: 20;
    --z-backdrop: 40;
    --z-modal: 50;
    --z-toast: 60;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 7.5rem;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: calc(var(--z-toast) + 1);
    padding: .7rem 1rem;
    border-radius: .5rem;
    background: var(--white);
    color: var(--black);
    font-weight: 800;
    transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.announcement {
    display: flex;
    min-height: 2.3rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .45rem 1rem;
    background: var(--primary);
    color: var(--white);
    font-size: .78rem;
    font-weight: 800;
    text-align: center;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: color-mix(in oklch, var(--white) 96%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .7rem;
    align-items: center;
    width: min(100%, var(--container));
    margin: 0 auto;
    padding: .55rem .85rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 3.2rem;
    text-decoration: none;
}

.brand img {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    object-fit: cover;
}

.brand span { display: none; line-height: 1; }
.brand strong { display: block; font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; }
.brand small { display: block; margin-top: .18rem; color: var(--muted); font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.search-box {
    display: flex;
    height: 2.85rem;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    padding: 0 .8rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: var(--surface);
}

.search-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-pale);
}

.search-box svg, .cart-trigger svg, .add-button svg, .whatsapp-button svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.search-box input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: .9rem;
}

.search-box input::placeholder { color: var(--muted); opacity: 1; }
.search-box kbd { display: none; }

.cart-trigger {
    position: relative;
    display: inline-flex;
    min-width: 2.85rem;
    height: 2.85rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 0;
    border-radius: .65rem;
    background: var(--black);
    color: var(--white);
    cursor: pointer;
}

.cart-trigger__label { display: none; font-weight: 800; }
.cart-count {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    display: grid;
    min-width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    padding: 0 .25rem;
    border: 2px solid var(--white);
    border-radius: 999px;
    background: var(--gold);
    color: var(--black);
    font-size: .68rem;
    font-weight: 900;
}

main { overflow: clip; }

.hero {
    position: relative;
    display: grid;
    min-height: 27rem;
    overflow: hidden;
    background: var(--black);
    color: var(--white);
}

.hero::before {
    content: "";
    position: absolute;
    width: 22rem;
    height: 22rem;
    top: -13rem;
    left: -10rem;
    border: 4rem solid color-mix(in oklch, var(--primary) 30%, transparent);
    border-radius: 50%;
}

.hero-copy {
    position: relative;
    z-index: 1;
    align-self: center;
    width: min(100%, 42rem);
    padding: 3.5rem 1.1rem 4.5rem;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .85rem;
    color: var(--gold);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hero-tag span { width: 1.75rem; height: 3px; background: var(--primary); }

.hero h1 {
    max-width: 12ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.1rem, 13vw, 5.8rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: .9;
    text-transform: uppercase;
    text-wrap: balance;
}

.hero-copy > p:not(.hero-tag) {
    max-width: 36rem;
    margin: 1.1rem 0 0;
    color: oklch(0.85 0 0);
    font-size: clamp(.96rem, 3vw, 1.1rem);
    text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.55rem; }

.button {
    display: inline-flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    padding: .72rem 1.1rem;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 180ms cubic-bezier(.22, 1, .36, 1), background-color 180ms ease;
}

.button:active { transform: translateY(1px); }
.button--gold { background: var(--gold); color: var(--black); }
.button--gold:hover { background: oklch(0.84 0.15 84); }
.button--ghost { border: 1px solid oklch(0.55 0 0); background: transparent; color: var(--white); }
.button--ghost:hover { background: oklch(0.2 0 0); }
.button--dark { background: var(--black); color: var(--white); }

.hero-art {
    position: absolute;
    right: -7rem;
    bottom: -8rem;
    width: 21rem;
    height: 21rem;
    opacity: .26;
    transform: rotate(-6deg);
}

.hero-art > img { width: 100%; height: 100%; object-fit: contain; }
.hero-price-tag, .hero-stamp { display: none; }

.category-section, .catalog-section {
    width: min(100%, var(--container));
    margin: 0 auto;
    padding: 2.5rem 1rem 0;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.section-heading h2, .how-it-works h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 7vw, 3.1rem);
    letter-spacing: -.02em;
    line-height: 1;
    text-transform: uppercase;
    text-wrap: balance;
}

.section-heading p, .how-copy p { margin: .4rem 0 0; color: var(--muted); font-size: .9rem; }
.section-heading .section-signal { color: var(--primary); font-size: .74rem; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }

.category-list {
    display: flex;
    gap: .65rem;
    margin-inline: -1rem;
    padding: .15rem 1rem .8rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.category-list::-webkit-scrollbar { display: none; }

.category-chip {
    display: inline-flex;
    min-width: max-content;
    min-height: 4.1rem;
    align-items: center;
    gap: .65rem;
    padding: .65rem .9rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--white);
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms cubic-bezier(.22, 1, .36, 1);
}

.category-chip:hover { border-color: var(--primary); transform: translateY(-1px); }
.category-chip.is-active { border-color: var(--black); background: var(--black); color: var(--white); }
.category-icon { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border-radius: .55rem; background: var(--gold-pale); font-size: 1.2rem; }
.category-chip.is-active .category-icon { background: var(--gold); }
.category-chip span:last-child { display: grid; text-align: left; }
.category-chip strong { font-size: .85rem; }
.category-chip small { margin-top: .12rem; color: var(--muted); font-size: .68rem; }
.category-chip.is-active small { color: oklch(0.78 0 0); }

.catalog-section { padding-top: 2.8rem; padding-bottom: 4.5rem; }
.sort-control { display: none; }

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

.product-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: var(--white);
    transition: border-color 180ms ease, transform 180ms cubic-bezier(.22, 1, .36, 1);
}

.product-card:hover { border-color: oklch(0.7 0.03 20); transform: translateY(-2px); }
.product-card[hidden] { display: none; }

.product-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: var(--surface);
    cursor: pointer;
}

.product-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms cubic-bezier(.22, 1, .36, 1); }
.product-card:hover .product-media > img { transform: scale(1.035); }
.product-placeholder { display: grid; width: 100%; height: 100%; place-items: center; align-content: center; gap: .25rem; color: var(--muted); }
.product-placeholder img { width: 56%; opacity: .2; filter: grayscale(1); }
.product-placeholder small { font-size: .68rem; font-weight: 700; }

.product-badges { position: absolute; top: .5rem; left: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.badge { display: inline-flex; min-height: 1.55rem; align-items: center; padding: .18rem .45rem; border-radius: 999px; font-size: .62rem; font-weight: 900; }
.badge--sale { background: var(--primary); color: var(--white); }
.badge--featured { background: var(--gold); color: var(--black); }

.product-info { display: flex; min-height: 11.7rem; flex-direction: column; padding: .7rem; }
.product-category { overflow: hidden; color: var(--primary); font-size: .64rem; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.product-name { display: -webkit-box; min-height: 2.55rem; margin: .32rem 0 .45rem; padding: 0; overflow: hidden; border: 0; background: transparent; font-size: .82rem; font-weight: 700; line-height: 1.35; text-align: left; cursor: pointer; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-name:hover { color: var(--primary); }
.product-pricing { display: flex; flex-wrap: wrap; align-items: baseline; gap: .12rem .35rem; margin-top: auto; }
.product-pricing del { width: 100%; color: var(--muted); font-size: .68rem; }
.product-pricing strong { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; }
.product-pricing small { color: var(--muted); font-size: .6rem; }

.add-button {
    display: inline-flex;
    width: 100%;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    margin-top: .72rem;
    border: 0;
    border-radius: .55rem;
    background: var(--black);
    color: var(--white);
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}

.add-button:hover { background: var(--primary); }
.add-button:disabled { background: var(--surface-strong); color: var(--muted); cursor: not-allowed; }

.catalog-empty { display: none; max-width: 34rem; margin: 2rem auto 0; padding: 2.5rem 1rem; text-align: center; }
.catalog-empty.is-visible { display: block; }
.catalog-empty > span { display: block; font-size: 2.5rem; }
.catalog-empty h3 { margin: .7rem 0 .25rem; font-size: 1.15rem; }
.catalog-empty p { margin: 0 auto 1rem; color: var(--muted); }

.how-it-works {
    display: grid;
    gap: 1.5rem;
    width: min(calc(100% - 2rem), var(--container));
    margin: 0 auto 4rem;
    padding: 1.5rem;
    border-radius: 1rem;
    background: var(--gold);
    color: var(--black);
}

.how-it-works ol { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.how-it-works li { display: flex; align-items: center; gap: .75rem; min-height: 3.8rem; padding: .55rem; border-bottom: 1px solid color-mix(in oklch, var(--black) 20%, transparent); }
.how-it-works li:last-child { border-bottom: 0; }
.how-it-works li > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: var(--black); color: var(--white); font-family: var(--font-display); font-size: 1.25rem; }
.how-it-works li div { display: grid; }
.how-it-works li strong { font-size: .9rem; }
.how-it-works li small { color: oklch(0.32 0.03 65); font-size: .74rem; }

.site-footer {
    display: grid;
    gap: 1.2rem;
    align-items: center;
    padding: 2.5rem 1rem 7rem;
    background: var(--black);
    color: oklch(0.78 0 0);
    font-size: .8rem;
    text-align: center;
}

.site-footer p { margin: 0; }
.footer-brand { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; }
.footer-brand img { width: 3.4rem; height: 3.4rem; border-radius: 50%; }
.footer-brand div { display: grid; text-align: left; }
.footer-brand strong { color: var(--white); font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; }
.footer-brand span { font-size: .7rem; }

.mobile-cart-bar {
    position: fixed;
    right: .75rem;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    left: .75rem;
    z-index: var(--z-sticky);
    display: flex;
    min-height: 3.75rem;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .9rem;
    border: 0;
    border-radius: .8rem;
    background: var(--black);
    color: var(--white);
    box-shadow: 0 6px 8px color-mix(in oklch, var(--black) 25%, transparent);
    cursor: pointer;
}

.mobile-cart-bar[hidden] { display: none; }
.mobile-cart-bar span { display: grid; text-align: left; }
.mobile-cart-bar span strong { font-size: .82rem; }
.mobile-cart-bar span small { color: oklch(0.75 0 0); font-size: .68rem; }
.mobile-cart-bar > strong { color: var(--gold); }

dialog {
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    color: var(--ink);
}

dialog::backdrop { background: color-mix(in oklch, var(--black) 70%, transparent); }

.cart-drawer {
    width: 100%;
    height: min(90dvh, 46rem);
    margin: auto 0 0;
    border-radius: 1rem 1rem 0 0;
    background: var(--white);
}

.drawer-shell { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--line); }
.drawer-header span { color: var(--primary); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.drawer-header h2 { margin: 0; font-family: var(--font-display); font-size: 2rem; line-height: 1; text-transform: uppercase; }
.icon-button { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--white); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.drawer-header .icon-button:hover { background: var(--surface); }
.cart-content { overflow-y: auto; padding: .2rem 1rem; }
.cart-items { display: grid; }
.cart-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.cart-item__image { width: 4.5rem; height: 4.5rem; overflow: hidden; border-radius: .6rem; background: var(--surface); }
.cart-item__image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__body { display: grid; grid-template-columns: 1fr auto; gap: .4rem; align-items: start; }
.cart-item__name { font-size: .84rem; font-weight: 700; }
.cart-item__price { font-size: .88rem; font-weight: 800; }
.quantity-control { display: inline-flex; width: max-content; min-height: 2.25rem; align-items: center; border: 1px solid var(--line); border-radius: 999px; }
.quantity-control button { width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: transparent; font-size: 1.15rem; cursor: pointer; }
.quantity-control span { min-width: 1.4rem; font-size: .8rem; font-weight: 800; text-align: center; }
.remove-item { align-self: center; padding: .35rem; border: 0; background: transparent; color: var(--danger); font-size: .72rem; font-weight: 700; cursor: pointer; }
.cart-empty { display: grid; min-height: 21rem; place-items: center; align-content: center; padding: 2rem 1rem; text-align: center; }
.cart-empty[hidden] { display: none; }
.cart-empty > span { font-size: 2.5rem; }
.cart-empty h3 { margin: .7rem 0 .25rem; }
.cart-empty p { max-width: 28ch; margin: 0 0 1rem; color: var(--muted); font-size: .84rem; }
.cart-footer { padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--white); }
.cart-footer label { display: flex; justify-content: space-between; margin-bottom: .35rem; font-size: .75rem; font-weight: 700; }
.cart-footer label span { color: var(--muted); font-weight: 400; }
.cart-footer textarea { width: 100%; resize: none; padding: .65rem; border: 1px solid var(--line); border-radius: .55rem; color: var(--ink); }
.cart-total { display: flex; align-items: end; justify-content: space-between; padding: .8rem 0; }
.cart-total span { font-size: .78rem; font-weight: 700; }
.cart-total strong { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; }
.whatsapp-button { display: flex; width: 100%; min-height: 3.25rem; align-items: center; justify-content: center; gap: .55rem; border: 0; border-radius: .65rem; background: var(--success); color: var(--white); font-weight: 900; cursor: pointer; }
.whatsapp-button:disabled { background: var(--surface-strong); color: var(--muted); cursor: not-allowed; }
.cart-footer > small { display: block; margin-top: .5rem; color: var(--muted); font-size: .66rem; line-height: 1.4; text-align: center; }
.setup-warning { margin: .45rem 0 0; color: var(--danger); font-size: .72rem; font-weight: 700; text-align: center; }

.product-dialog {
    width: min(calc(100% - 1.5rem), 46rem);
    max-height: calc(100dvh - 1.5rem);
    margin: auto;
    overflow: visible;
    border-radius: 1rem;
    background: var(--white);
}

.product-dialog__close { position: absolute; top: .55rem; right: .55rem; z-index: 1; }
.product-detail { display: grid; max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
.product-detail__media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 1rem 1rem 0 0; background: var(--surface); }
.product-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__copy { padding: 1.2rem; }
.product-detail__category { color: var(--primary); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.product-detail h2 { margin: .35rem 0 .7rem; font-family: var(--font-display); font-size: 2.2rem; line-height: .95; text-transform: uppercase; }
.product-detail__description { color: var(--muted); font-size: .9rem; }
.product-detail__price { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0; }
.product-detail__price del { color: var(--muted); }
.product-detail__price strong { font-family: var(--font-display); font-size: 2rem; }

.toast {
    position: fixed;
    right: 1rem;
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
    left: 1rem;
    z-index: var(--z-toast);
    max-width: 26rem;
    margin: 0 auto;
    padding: .8rem 1rem;
    border-radius: .65rem;
    background: var(--black);
    color: var(--white);
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(.75rem);
    transition: opacity 180ms ease, transform 180ms cubic-bezier(.22, 1, .36, 1);
}

.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (min-width: 40rem) {
    .header-inner { padding-inline: 1rem; }
    .brand span { display: block; }
    .search-box { max-width: 33rem; justify-self: center; width: 100%; }
    .search-box kbd { display: inline-block; padding: .16rem .35rem; border: 1px solid var(--line); border-radius: .3rem; color: var(--muted); font-family: inherit; font-size: .64rem; }
    .cart-trigger { padding: 0 .85rem; }
    .cart-trigger__label { display: inline; }
    .hero { grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr); min-height: 31rem; }
    .hero-copy { margin-left: max(0px, calc((100vw - var(--container)) / 2)); padding: 4rem 1.5rem; }
    .hero-art { position: relative; right: auto; bottom: auto; width: auto; height: 100%; opacity: 1; transform: none; }
    .hero-art::before { content: ""; position: absolute; inset: 12% 5% 0 12%; background: var(--primary); clip-path: polygon(12% 0, 100% 7%, 88% 100%, 0 88%); }
    .hero-art > img { position: absolute; z-index: 1; right: clamp(1rem, 5vw, 5rem); bottom: -1.2rem; width: min(30rem, 90%); height: min(30rem, 90%); filter: drop-shadow(0 8px 5px oklch(0 0 0 / .3)); transform: rotate(-4deg); }
    .hero-price-tag { position: absolute; z-index: 2; top: 3rem; left: 8%; display: grid; padding: .45rem .7rem; background: var(--gold); color: var(--black); font-family: var(--font-display); line-height: .9; text-align: center; transform: rotate(-7deg); }
    .hero-price-tag span { font-size: .75rem; }
    .hero-price-tag strong { font-size: 1.35rem; }
    .hero-stamp { position: absolute; z-index: 2; right: 1.5rem; bottom: 2rem; display: grid; width: 5rem; height: 5rem; place-items: center; border: 2px solid var(--white); border-radius: 50%; font-family: var(--font-display); font-size: 1rem; line-height: .9; text-align: center; transform: rotate(9deg); }
    .category-section, .catalog-section { padding-inline: 1.5rem; }
    .category-list { margin-inline: -1.5rem; padding-inline: 1.5rem; }
    .sort-control { display: grid; gap: .25rem; color: var(--muted); font-size: .68rem; font-weight: 700; }
    .sort-control select { min-height: 2.6rem; padding: 0 2.2rem 0 .7rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--white); color: var(--ink); }
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
    .product-info { padding: .9rem; }
    .product-name { font-size: .9rem; }
    .product-pricing strong { font-size: 1.65rem; }
    .how-it-works { grid-template-columns: .75fr 1.25fr; align-items: center; padding: 2rem; }
    .how-it-works ol { grid-template-columns: repeat(3, 1fr); }
    .how-it-works li { border-right: 1px solid color-mix(in oklch, var(--black) 20%, transparent); border-bottom: 0; }
    .how-it-works li:last-child { border-right: 0; }
    .site-footer { grid-template-columns: 1fr 1fr 1fr; padding: 3rem max(1.5rem, calc((100vw - var(--container)) / 2)); text-align: left; }
    .site-footer p:last-child { text-align: right; }
    .mobile-cart-bar { display: none !important; }
    .cart-drawer { width: min(100%, 29rem); height: 100dvh; margin: 0 0 0 auto; border-radius: 0; }
    .toast { right: 1.5rem; bottom: 1.5rem; left: auto; margin: 0; }
    .product-detail { grid-template-columns: 1fr 1fr; }
    .product-detail__media { border-radius: 1rem 0 0 1rem; }
    .product-detail__copy { align-self: center; padding: 2rem; }
}

@media (min-width: 64rem) {
    .announcement { font-size: .82rem; }
    .hero-copy { padding-left: 2rem; }
    .category-section, .catalog-section { padding-inline: 2rem; }
    .category-list { margin-inline: -2rem; padding-inline: 2rem; }
    .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
}

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