@font-face {
    font-family: "Vazirmatn";
    src: url("../assets/fonts/Vazirmatn-Variable.woff2") format("woff2-variations"), url("../assets/fonts/Vazirmatn-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap
}

@keyframes float-slow {

    0%,
    to {
        transform: translate3d(0, 0, 0)
    }

    50% {
        transform: translate3d(0, -18px, 0)
    }
}

@keyframes drift {

    0%,
    to {
        transform: translate3d(0, 0, 0) scale(1)
    }

    33% {
        transform: translate3d(4%, -6%, 0) scale(1.08)
    }

    66% {
        transform: translate3d(-5%, 4%, 0) scale(.96)
    }
}

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

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(50%)
    }
}

@keyframes ripple {
    0% {
        opacity: .5;
        transform: scale(0)
    }

    to {
        opacity: 0;
        transform: scale(3.2)
    }
}

@keyframes pop-heart {

    0%,
    to {
        transform: scale(1)
    }

    40% {
        transform: scale(1.45)
    }

    70% {
        transform: scale(.92)
    }
}

@keyframes toast-in {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(.96)
    }

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

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateY(12px) scale(.96)
    }
}

@keyframes live-scan {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(280%)
    }
}

@keyframes live-noise {

    0%,
    to {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(-1px, 1px)
    }

    50% {
        transform: translate(1px, -1px)
    }

    75% {
        transform: translate(-1px, -1px)
    }
}

@keyframes live-pulse {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: .25
    }
}

@keyframes admin-modal-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

:root {
    --radius-sm: .5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-2xl: 2.5rem;
    --radius-3xl: 3rem;
    --font-display: "Vazirmatn", "IRANSans", "Iranian Sans", Tahoma, "Segoe UI", system-ui, sans-serif;
    --font-sans: "Vazirmatn", "IRANSans", "Iranian Sans", Tahoma, "Segoe UI", system-ui, sans-serif;
    --background: oklch(0.955 0 0);
    --foreground: oklch(0.22 0.012 265);
    --card: oklch(1 0 0 / 62%);
    --card-foreground: oklch(0.22 0.012 265);
    --popover: oklch(0.995 0 0 / 88%);
    --primary: oklch(0.28 0.02 265);
    --primary-foreground: oklch(0.99 0 0);
    --secondary: oklch(1 0 0 / 70%);
    --secondary-foreground: oklch(0.28 0.02 265);
    --muted: oklch(0.93 0.002 265);
    --muted-foreground: oklch(0.53 0.014 265);
    --accent: oklch(0.7 0.13 235);
    --accent-foreground: oklch(0.99 0 0);
    --destructive: oklch(0.6 0.2 20);
    --destructive-foreground: oklch(0.99 0 0);
    --border: oklch(1 0 0 / 55%);
    --input: oklch(1 0 0 / 60%);
    --ring: oklch(0.7 0.09 235);
    --glass: oklch(1 0 0 / 45%);
    --glass-strong: oklch(1 0 0 / 72%);
    --glass-border: oklch(1 0 0 / 80%);
    --glass-quiet: oklch(1 0 0 / 28%);
    --glass-quiet-border: oklch(1 0 0 / 55%);
    --halo: oklch(0.78 0.11 232);
    --shadow-glass: 0 1px 1px oklch(1 0 0 / 70%) inset, 0 -1px 1px oklch(0.6 0.02 265 / 6%) inset,
        0 24px 60px -24px oklch(0.4 0.03 265 / 22%), 0 4px 14px -6px oklch(0.4 0.03 265 / 10%);
    --shadow-float: 0 1px 1px oklch(1 0 0 / 80%) inset, 0 40px 90px -30px oklch(0.4 0.03 265 / 30%),
        0 10px 24px -12px oklch(0.4 0.03 265 / 14%);
    --gradient-sheen: linear-gradient(135deg, oklch(1 0 0 / 80%) 0%, oklch(1 0 0 / 20%) 42%, oklch(1 0 0 / 55%) 100%)
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-color: var(--border)
}

body,
html {
    overscroll-behavior-y: none
}

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

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    min-height: 100svh;
    direction: rtl;
    overflow-x: hidden
}

img {
    display: block
}

img,
svg {
    max-width: 100%
}

button,
input,
textarea {
    font-family: inherit
}

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

ul {
    list-style: none
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    letter-spacing: -.01em;
    font-weight: 600
}

::selection {
    background: color-mix(in oklab, var(--halo) 35%, transparent)
}

.container {
    max-width: 88rem;
    margin-inline: auto;
    padding-inline: .75rem
}

@media (min-width:640px) {
    .container {
        padding-inline: 1.5rem
    }
}

.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
}

.admin-form-grid,
.compare-table .row,
.contact-grid,
.faq-grid,
.footer-links,
.footer-top,
.grid-2,
.grid-2>*,
.grid-3,
.grid-3>*,
.grid-4,
.grid-4>*,
.hero-grid,
.hero-grid>*,
.newsletter-grid,
.pd-grid,
.pd-grid>*,
.pd-thumbs,
.qv-grid,
.qv-grid>*,
.reviews-grid,
.reviews-grid>* {
    min-width: 0
}

.container,
.section-inner,
main {
    max-width: 100%;
    overflow-x: clip
}

.glass,
.glass-strong {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-3xl);
    position: relative
}

.glass {
    background: var(--glass);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: var(--shadow-glass)
}

.glass-strong {
    background: var(--glass-strong);
    backdrop-filter: blur(36px) saturate(190%);
    -webkit-backdrop-filter: blur(36px) saturate(190%);
    box-shadow: var(--shadow-float)
}

.glass-quiet {
    background: var(--glass-quiet);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-quiet-border);
    border-radius: var(--radius-lg);
    position: relative
}

/* Mobile perf: backdrop-filter blur and large fixed blurred blobs are
   expensive to composite on phone GPUs and run continuously (not just
   during scroll). Scale them down under 768px — still looks "glassy"
   but is much cheaper to paint on mid/low-end devices. */
@media (max-width:768px) {

    .glass,
    .glass-strong,
    .glass-quiet,
    nav.navbar.scrolled,
    nav.navbar:not(.scrolled),
    .mobile-quicknav,
    .btn-ghost,
    .btn-outline {
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%)
    }

    /* The blobs used to keep running their "animate-drift" keyframe
       (infinite, translating + rotating a huge blurred layer) forever,
       underneath every backdrop-filter card on the page. Phones (and
       iOS Safari in particular) have to keep re-compositing that
       blurred layer on every single frame just so the glass cards on
       top of it can sample it — that's the main source of the scroll
       jank/lag and the iOS "page reloaded to save memory" failures.
       Freezing it removes the continuous compositing cost while still
       keeping the same soft, glassy background look. */
    .ambient .blob {
        filter: blur(40px);
        animation: none
    }
}

.sheen {
    position: relative;
    overflow: hidden
}

.sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-sheen);
    opacity: 0;
    transition: opacity 700ms ease;
    pointer-events: none;
    mix-blend-mode: soft-light
}

.sheen:hover::after {
    opacity: 1
}

.lift {
    transition: transform 600ms cubic-bezier(.16, 1, .3, 1), box-shadow 600ms cubic-bezier(.16, 1, .3, 1)
}

.lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 1px 1px oklch(1 0 0/80%) inset, 0 50px 100px -30px oklch(.4 .03 265/32%), 0 0 0 1px oklch(1 0 0/70%), 0 20px 60px -20px color-mix(in oklab, var(--halo) 40%, transparent)
}

.text-gradient {
    background: linear-gradient(120deg, var(--foreground) 0%, color-mix(in oklab, var(--foreground) 55%, var(--halo)) 60%, var(--foreground) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.eyebrow {
    font-size: .6875rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--muted-foreground)
}

.animate-float-slow {
    animation: float-slow 7s ease-in-out infinite
}

.animate-drift {
    animation: drift 26s ease-in-out infinite
}

.animate-spin-slow {
    animation: spin-slow 46s linear infinite
}

.animate-marquee {
    animation: marquee 44s linear infinite
}

.animate-marquee.reverse {
    animation-direction: reverse;
    animation-duration: 56s
}

.animate-ripple {
    animation: ripple 620ms ease-out forwards
}

.animate-pop-heart {
    animation: pop-heart 460ms cubic-bezier(.16, 1, .3, 1)
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms cubic-bezier(.16, 1, .3, 1), transform 900ms cubic-bezier(.16, 1, .3, 1)
}

.reveal-in {
    opacity: 1;
    transform: translateY(0)
}

.card-reveal {
    opacity: 0;
    transform: translateY(18px) scale(.98);
    transition: opacity 800ms cubic-bezier(.16, 1, .3, 1), transform 800ms cubic-bezier(.16, 1, .3, 1);
    will-change: transform, opacity
}

.card-reveal.reveal-in {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.no-scrollbar {
    scrollbar-width: none
}

.no-scrollbar::-webkit-scrollbar {
    display: none
}

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

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

.ambient {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    pointer-events: none
}

.ambient::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--background)
}

.ambient .blob {
    position: absolute;
    border-radius: 999px;
    opacity: .6;
    filter: blur(90px)
}

.ambient .blob-1 {
    top: -10rem;
    inset-inline-start: -8rem;
    width: 42rem;
    height: 42rem;
    background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--halo) 55%, transparent), transparent 70%)
}

.ambient .blob-2 {
    top: 33%;
    inset-inline-end: -10rem;
    width: 38rem;
    height: 38rem;
    opacity: .5;
    filter: blur(100px);
    animation-delay: -9s;
    background: radial-gradient(circle at 60% 40%, color-mix(in oklab, oklch(.86 .09 300) 60%, transparent), transparent 70%)
}

.ambient .blob-3 {
    bottom: -14rem;
    inset-inline-start: 25%;
    width: 36rem;
    height: 36rem;
    opacity: .5;
    filter: blur(110px);
    animation-delay: -17s;
    background: radial-gradient(circle at 50% 50%, color-mix(in oklab, oklch(.9 .1 160) 55%, transparent), transparent 70%)
}

.ambient .grid-overlay {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: linear-gradient(to left, oklch(.4 .02 265/4%) 1px, transparent 1px), linear-gradient(to bottom, oklch(.4 .02 265/4%) 1px, transparent 1px);
    background-size: 78px 78px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 20%, #000, transparent 78%)
}

header.site-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 50;
    padding: calc(.75rem + env(safe-area-inset-top)) .75rem .75rem;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform
}

@media (min-width:640px) {
    header.site-header {
        padding: 1.25rem 1.25rem 0
    }
}

nav.navbar {
    max-width: 88rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    border-radius: 999px;
    padding: .625rem .75rem;
    transition: all 700ms cubic-bezier(.16, 1, .3, 1)
}

@media (min-width:640px) {
    nav.navbar {
        padding: .625rem 1rem
    }
}

nav.navbar.scrolled {
    background: var(--glass-strong);
    backdrop-filter: blur(36px) saturate(190%);
    -webkit-backdrop-filter: blur(36px) saturate(190%);
    box-shadow: var(--shadow-float);
    border: 1px solid var(--glass-border)
}

nav.navbar:not(.scrolled) {
    background: var(--glass);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: var(--shadow-glass);
    border: 1px solid var(--glass-border)
}

.brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding-inline-end: .5rem;
    padding-inline-start: .375rem
}

.brand-mark {
    position: relative;
    display: grid;
    place-items: center;
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--secondary)
}

.brand-mark span {
    display: block;
    height: 1rem;
    width: 1rem;
    border-radius: 999px;
    border: 3px solid var(--halo);
    border-top-color: transparent
}

.brand-name {
    font-family: var(--font-display);
    font-size: .95rem;
    line-height: 1;
    font-weight: 600
}

.brand-sub,
.nav-links a {
    color: var(--muted-foreground)
}

.brand-sub {
    display: block;
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-top: .3rem
}

.nav-links {
    margin-inline-start: auto;
    margin-inline-end: auto;
    display: none;
    align-items: center;
    gap: .25rem
}

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

.nav-links a {
    border-radius: 999px;
    padding: .5rem .875rem;
    font-size: .875rem;
    transition: color 300ms
}

.nav-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: .375rem
}

@media (min-width:1024px) {
    .nav-actions {
        margin-inline-start: 0
    }
}

.icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 999px;
    color: var(--muted-foreground);
    background: 0 0;
    border: 0;
    cursor: pointer;
    transition: all 300ms
}

.icon-btn:hover,
.nav-links a.active,
.nav-links a:hover {
    background: var(--secondary);
    color: var(--foreground)
}

.icon-btn svg {
    width: 1.1rem;
    height: 1.1rem
}

.icon-btn .dot {
    position: absolute;
    top: .3rem;
    inset-inline-end: .3rem;
    height: .4rem;
    width: .4rem;
    border-radius: 999px;
    background: var(--accent)
}

.icon-btn .badge,
.mobile-quicknav a.active {
    background: var(--primary);
    color: var(--primary-foreground)
}

.icon-btn .badge {
    position: absolute;
    top: -.125rem;
    inset-inline-end: -.125rem;
    display: grid;
    place-items: center;
    height: 1.15rem;
    min-width: 1.15rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 600;
    padding-inline: .2rem
}

.wishlist-link {
    display: none
}

.wishlist-link.show {
    display: grid
}

.mobile-quicknav {
    max-width: 88rem;
    margin: .5rem auto 0;
    display: flex;
    align-items: center;
    gap: .375rem;
    overflow-x: auto;
    padding: .5rem;
    border-radius: 999px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    background: var(--glass);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--glass-border)
}

@media (min-width:1024px) {
    .mobile-quicknav {
        display: none
    }
}

.btn,
.mobile-quicknav a {
    border-radius: 999px;
    font-weight: 500
}

.mobile-quicknav a {
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: .55rem 1.05rem;
    font-size: .8rem;
    white-space: nowrap;
    color: var(--muted-foreground);
    background: var(--glass-quiet);
    border: 1px solid var(--glass-quiet-border);
    transition: all 300ms
}

.mobile-quicknav a.active {
    border-color: transparent
}

@media (max-width:639px) {
    .mobile-quicknav {
        gap: .3rem;
        padding: .35rem
    }

    .mobile-quicknav a {
        padding: .4rem .65rem;
        font-size: .68rem
    }
}

@media (max-width:380px) {
    .mobile-quicknav a {
        padding: .35rem .55rem;
        font-size: .62rem
    }
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    transition: transform 500ms cubic-bezier(.16, 1, .3, 1), box-shadow 500ms cubic-bezier(.16, 1, .3, 1), background-color 500ms, color 500ms;
    font-size: .875rem;
    padding: .75rem 1.5rem
}

.btn:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px
}

.btn-lg {
    padding: .8rem 1.5rem;
    font-size: .85rem
}

@media (min-width:640px) {
    .btn-lg {
        padding: 1rem 2rem;
        font-size: .95rem
    }
}

.btn-sm {
    padding: .5rem 1rem;
    font-size: .75rem
}

.btn-icon {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0
}

.btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0
}

.btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 18px 40px -16px oklch(.3 .02 265/45%)
}

.btn-primary:hover {
    box-shadow: 0 26px 60px -18px oklch(.3 .02 265/55%);
    transform: translateY(-2px)
}

.btn-ghost,
.btn-outline {
    border: 1px solid var(--glass-border);
    color: var(--foreground)
}

.btn-ghost {
    background: var(--glass);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%)
}

.btn-ghost:hover,
.btn-outline:hover {
    background: var(--secondary)
}

.btn-outline {
    background: 0 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px)
}

.btn:disabled {
    opacity: .6;
    cursor: not-allowed
}

.chip-btn,
.section-head p {
    color: var(--muted-foreground)
}

.chip-btn {
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--secondary);
    padding: .5rem 1rem;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 500ms
}

.chip-btn:hover {
    color: var(--foreground)
}

.chip-btn.active {
    border-color: transparent;
    background: var(--primary);
    color: var(--primary-foreground)
}

section.section {
    padding: 5rem .75rem
}

@media (max-width:639px) {
    section.section {
        padding: 3rem .75rem
    }
}

@media (min-width:640px) {
    section.section {
        padding: 7rem 1.5rem
    }
}

.section-inner {
    max-width: 88rem;
    margin-inline: auto
}

.section-head {
    max-width: 42rem
}

.section-head.center {
    margin-inline: auto;
    text-align: center
}

.section-head h2 {
    margin-top: 1rem;
    font-size: 1.9rem;
    line-height: 1.1;
    font-weight: 600
}

@media (max-width:639px) {
    .section-head h2 {
        font-size: 1.55rem;
        margin-top: .625rem
    }
}

@media (min-width:640px) {
    .section-head h2 {
        font-size: 2.4rem
    }
}

@media (min-width:768px) {
    .section-head h2 {
        font-size: 2.9rem
    }
}

.section-head p {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.7
}

@media (max-width:639px) {
    .section-head p {
        margin-top: .625rem;
        font-size: .85rem
    }
}

.section-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem
}

.hero {
    position: relative;
    display: flex;
    min-height: 100svh;
    align-items: center;
    padding: 7rem .75rem 4rem
}

@media (max-width:639px) {
    .hero {
        min-height: auto;
        padding: calc(var(--header-h, 9.5rem) + 1rem) .75rem 2rem
    }
}

@media (min-width:640px) {
    .hero {
        padding: calc(var(--header-h, 8rem) + 1rem) 1.5rem 4rem
    }
}

@media (min-width:1024px) {
    .hero {
        padding: 8rem 1.5rem 4rem
    }
}

.hero-grid {
    max-width: 88rem;
    margin-inline: auto;
    display: grid;
    gap: 2rem;
    align-items: center;
    width: 100%
}

@media (max-width:639px) {
    .hero-grid {
        gap: 1.25rem
    }
}

@media (min-width:1024px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem
    }
}

.hero-panel {
    position: relative;
    overflow: hidden;
    padding: 1.75rem
}

@media (max-width:639px) {
    .hero-panel {
        padding: 1.25rem
    }
}

@media (min-width:640px) {
    .hero-panel {
        padding: 2.75rem
    }
}

.badge-pill,
.hero-visual .rings span {
    border-radius: 999px;
    border: 1px solid var(--glass-border)
}

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--secondary);
    padding: .375rem .9rem;
    font-size: .7rem;
    font-weight: 500
}

.badge-pill svg {
    width: .875rem;
    height: .875rem
}

.hero-title {
    margin-top: 1.5rem;
    font-size: 2.4rem;
    line-height: 1.08;
    font-weight: 600
}

@media (max-width:639px) {
    .hero-title {
        margin-top: 1rem;
        font-size: 1.7rem
    }
}

@media (min-width:640px) {
    .hero-title {
        font-size: 3.4rem
    }
}

@media (min-width:1024px) {
    .hero-title {
        font-size: 4rem
    }
}

.hero-copy,
.stat-card dt {
    color: var(--muted-foreground)
}

.hero-copy {
    margin-top: 1.25rem;
    max-width: 32rem;
    font-size: 1rem;
    line-height: 1.7
}

@media (max-width:639px) {
    .hero-copy {
        margin-top: .875rem;
        font-size: .85rem;
        line-height: 1.6
    }
}

.hero-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem
}

@media (max-width:639px) {
    .hero-actions {
        margin-top: 1.25rem;
        gap: .5rem
    }

    .hero-actions .btn-lg {
        padding: .8rem 1.4rem;
        font-size: .85rem
    }
}

.hero-stats {
    margin-top: 2.75rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .625rem
}

@media (max-width:639px) {
    .hero-stats {
        margin-top: 1.5rem;
        gap: .5rem
    }
}

@media (min-width:640px) {
    .hero-stats {
        grid-template-columns: repeat(4, 1fr)
    }
}

.stat-card {
    border-radius: 1rem;
    padding: .75rem .875rem
}

@media (max-width:639px) {
    .stat-card {
        padding: .625rem .7rem
    }
}

.stat-card dd {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600
}

@media (max-width:639px) {
    .stat-card dd {
        font-size: .95rem
    }
}

.stat-card dt {
    margin-top: .25rem;
    font-size: .65rem
}

.hero-visual {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden
}

@media (max-width:639px) {
    .hero-visual {
        aspect-ratio: 4/2.5
    }
}

@media (min-width:1024px) {
    .hero-visual {
        aspect-ratio: 4/4.4
    }
}

.hero-visual .rings {
    position: absolute;
    inset: 0
}

.hero-visual .rings span {
    position: absolute
}

.ring-1 {
    top: 8%;
    inset-inline-start: 6%;
    height: 74%;
    width: 74%;
    background: oklch(1 0 0/22%)
}

.ring-2 {
    top: 22%;
    inset-inline-start: 24%;
    height: 56%;
    width: 56%;
    background: oklch(1 0 0/28%);
    animation-delay: -2.5s
}

.ring-3 {
    bottom: 10%;
    inset-inline-end: 8%;
    height: 34%;
    width: 34%;
    background: oklch(1 0 0/18%);
    animation-delay: -4.5s
}

.hero-spool-wrap {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center
}

.hero-spool-wrap img {
    width: 74%;
    max-width: 30rem;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 50px 80px rgba(60, 70, 90, .28))
}

@media (max-width:639px) {
    .hero-spool-wrap img {
        width: 56%
    }
}

@media (min-width:1024px) {
    .hero-spool-wrap img {
        width: 68%
    }
}

.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.hero-particles span {
    position: absolute;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #fff, color-mix(in oklab, var(--halo) 50%, transparent));
    box-shadow: 0 0 12px oklch(1 0 0/60%)
}

.hero-featured {
    position: absolute;
    bottom: 1.25rem;
    inset-inline: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem
}

@media (max-width:639px) {
    .hero-featured {
        bottom: .75rem;
        inset-inline: .75rem
    }

    .hero-featured .pill {
        padding: .5rem .75rem
    }
}

.hero-featured .pill {
    border-radius: 1rem;
    padding: .625rem 1rem
}

.hero-featured .pill p:first-child {
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted-foreground)
}

.hero-featured .pill p:last-child {
    font-size: .875rem;
    font-weight: 600
}

@media (max-width:639px) {
    .hero-featured .pill p:last-child {
        font-size: .78rem
    }
}

.shop-hub-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: 1fr
}

@media (min-width:720px) {
    .shop-hub-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.1rem
    }
}

.shop-hub-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    overflow: hidden
}

.shop-hub-tile:hover {
    transform: translateY(-4px)
}

.shop-hub-tile.active {
    border-color: var(--ring);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 55%, transparent)
}

.shop-hub-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    height: 3rem;
    width: 3rem;
    border-radius: 1rem;
    color: var(--halo)
}

.shop-hub-icon svg {
    width: 1.35rem;
    height: 1.35rem
}

.shop-hub-tile h3 {
    font-size: 1rem
}

.shop-hub-tile p {
    margin-top: .2rem;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--muted-foreground)
}

.shop-hub-arrow {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    color: var(--muted-foreground);
    opacity: .6
}

.shop-hub-arrow svg {
    width: .9rem;
    height: .9rem
}

@media (max-width:639px) {
    .shop-hub-tile {
        padding: .85rem;
        gap: .7rem
    }

    .shop-hub-icon {
        height: 2.3rem;
        width: 2.3rem;
        border-radius: .8rem
    }

    .shop-hub-icon svg {
        width: 1rem;
        height: 1rem
    }

    .shop-hub-tile h3 {
        font-size: .82rem
    }

    .shop-hub-tile p {
        font-size: .64rem
    }
}

.grid-2 {
    display: grid;
    gap: .6rem;
    grid-template-columns: 1fr 1fr
}

@media (min-width:640px) {
    .grid-2 {
        gap: 1rem
    }
}

@media (max-width:639px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: .6rem
    }
}

.grid-4 {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(2, 1fr)
}

@media (min-width:640px) {
    .grid-4 {
        gap: 1rem
    }
}

@media (min-width:1280px) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr)
    }
}

.grid-3 {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(2, 1fr)
}

@media (min-width:640px) {
    .grid-3 {
        gap: .75rem;
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (min-width:1024px) {
    .grid-3 {
        grid-template-columns: repeat(4, 1fr)
    }
}

.cat-card {
    padding: 1.25rem;
    border-radius: 1.75rem;
    transition: border-radius 600ms cubic-bezier(.16, 1, .3, 1)
}

@media (min-width:640px) {
    .cat-card {
        padding: 1.5rem
    }
}

@media (max-width:639px) {
    .cat-card {
        padding: .8rem;
        border-radius: 1.5rem
    }

    .cat-card-row {
        flex-direction: column;
        gap: .625rem
    }

    .cat-icon {
        height: 2.5rem;
        width: 2.5rem;
        border-radius: .85rem
    }

    .cat-icon b {
        font-size: .58rem
    }

    .cat-name-row h3 {
        font-size: .92rem
    }

    .cat-name-row span {
        font-size: .62rem
    }

    .cat-desc {
        margin-top: .375rem;
        font-size: .68rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .bars {
        margin-top: .625rem;
        gap: .375rem
    }

    .bar-row .lbl,
    .bar-row .val {
        width: 3rem;
        font-size: .58rem
    }

    .bar-row .val {
        width: 1.5rem
    }

    .cat-temp {
        margin-top: .5rem;
        font-size: .58rem
    }
}

.cat-card-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem
}

.cat-icon {
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    height: 3.25rem;
    width: 3.25rem;
    border-radius: 1.1rem
}

.cat-icon span.ring {
    position: absolute;
    inset: .375rem;
    border-radius: 1rem;
    border: 1px dashed var(--glass-quiet-border)
}

.cat-icon b {
    font-family: var(--font-display);
    font-weight: 600
}

.cat-name-row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap
}

.cat-name-row h3 {
    font-size: 1.25rem
}

.cat-icon b,
.cat-name-row span {
    font-size: .75rem
}

.bar-row .lbl,
.cat-desc,
.cat-name-row span {
    color: var(--muted-foreground)
}

.cat-desc {
    margin-top: .5rem;
    font-size: .8rem;
    line-height: 1.55
}

.bars {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.bar-row {
    display: flex;
    align-items: center;
    gap: .75rem
}

.bar-row .lbl {
    width: 5rem;
    flex-shrink: 0;
    font-size: .68rem
}

.bar-track {
    height: .3rem;
    flex: 1;
    overflow: hidden;
    border-radius: 999px;
    background: var(--muted)
}

.bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--halo), oklch(.72 .13 265));
    width: 0;
    transition: width 1200ms ease
}

.bar-row .val {
    width: 2rem;
    text-align: end;
    font-size: .68rem;
    font-weight: 600
}

.cat-temp {
    margin-top: .75rem;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-foreground)
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem
}

@media (min-width:640px) {
    .product-card {
        padding: 1.25rem
    }
}

@media (max-width:639px) {
    .product-card {
        padding: .65rem;
        border-radius: 1.4rem
    }
}

.pc-actions {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: .375rem
}

@media (max-width:639px) {
    .pc-actions {
        top: .5rem;
        inset-inline-end: .5rem;
        gap: .3rem
    }

    .pc-actions button {
        height: 1.85rem;
        width: 1.85rem
    }

    .pc-actions svg {
        width: .8rem;
        height: .8rem
    }
}

.pc-actions button {
    display: grid;
    place-items: center;
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 999px;
    border: 0;
    cursor: pointer
}

.pc-actions svg {
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground)
}

.pc-actions .liked svg {
    fill: var(--destructive);
    color: var(--destructive)
}

.compare-table dd.diff,
.pc-actions .comparing svg {
    color: var(--accent)
}

.pc-badge {
    position: absolute;
    top: 1rem;
    inset-inline-start: 1rem;
    z-index: 20;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--secondary);
    padding: .25rem .65rem;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .03em
}

@media (max-width:639px) {
    .pc-badge {
        top: .5rem;
        inset-inline-start: .5rem;
        padding: .18rem .5rem;
        font-size: .56rem
    }
}

.pc-media {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 1.6rem;
    cursor: pointer
}

@media (max-width:639px) {
    .pc-media {
        border-radius: 1.1rem
    }
}

.pc-media svg {
    width: 86%;
    height: 86%;
    position: absolute;
    inset: 0;
    margin: auto;
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1)
}

.product-card:hover .pc-media svg {
    transform: scale(1.07)
}

.pc-swatches {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem
}

@media (max-width:639px) {
    .pc-swatches {
        margin-top: .55rem;
        gap: .3rem
    }
}

.pc-swatches button {
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 300ms
}

@media (max-width:639px) {
    .pc-swatches button {
        height: 1rem;
        width: 1rem
    }
}

.pc-swatches button:hover {
    transform: scale(1.15)
}

.pc-swatches button.active {
    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background)
}

.pc-body {
    margin-top: 1rem;
    flex: 1
}

@media (max-width:639px) {
    .pc-body {
        margin-top: .55rem
    }
}

.pc-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem
}

.pc-title-row h3 {
    font-size: 1rem
}

.pc-title-row .price {
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 600
}

@media (max-width:639px) {
    .pc-title-row h3 {
        font-size: .78rem;
        line-height: 1.3
    }

    .pc-title-row .price {
        font-size: .78rem
    }
}

.pc-sub {
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--muted-foreground)
}

@media (max-width:639px) {
    .pc-sub {
        margin-top: .15rem;
        font-size: .62rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden
    }
}

.pc-specs {
    display: none
}

.pc-footer {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem
}

@media (max-width:639px) {
    .pc-footer {
        margin-top: .5rem
    }
}

.pc-rating {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: var(--muted-foreground)
}

@media (max-width:639px) {
    .pc-rating {
        font-size: .6rem;
        gap: .25rem
    }

    .pc-rating .stars svg {
        width: .7rem;
        height: .7rem
    }
}

.pc-qv {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--secondary);
    padding: .5rem .875rem;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 500ms
}

@media (max-width:639px) {
    .pc-qv {
        padding: .22rem .45rem;
        font-size: .52rem;
        gap: .15rem
    }

    .pc-qv svg {
        width: .52rem;
        height: .52rem
    }
}

.pc-qv:hover {
    transform: translateY(-2px)
}

.pc-qv svg {
    width: .875rem;
    height: .875rem
}

.item-add-btn,
.pc-add-btn {
    margin-top: .75rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 1rem;
    padding: .7rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    background: linear-gradient(135deg, var(--halo), oklch(.72 .13 265));
    color: #fff;
    box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--halo) 65%, transparent);
    transition: transform 320ms cubic-bezier(.16, 1, .3, 1), box-shadow 320ms
}

.item-add-btn:hover,
.pc-add-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -10px color-mix(in oklab, var(--halo) 70%, transparent)
}

.item-add-btn:active,
.pc-add-btn:active {
    transform: translateY(0) scale(.98)
}

.item-add-btn svg,
.pc-add-btn svg {
    width: .95rem;
    height: .95rem
}

@media (max-width:639px) {

    .item-add-btn,
    .pc-add-btn {
        margin-top: .55rem;
        padding: .55rem .75rem;
        font-size: .68rem;
        border-radius: .8rem;
        gap: .35rem
    }

    .item-add-btn svg,
    .pc-add-btn svg {
        width: .78rem;
        height: .78rem
    }
}

.stars {
    display: inline-flex;
    align-items: center;
    gap: .1rem
}

.stars svg {
    width: .875rem;
    height: .875rem
}

.rating-input button.on svg path,
.stars svg.on path {
    fill: var(--accent)
}

.stars svg.off path {
    fill: var(--muted)
}

.item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem
}

@media (min-width:640px) {
    .item-card {
        padding: 1.25rem
    }
}

@media (max-width:639px) {
    .item-card {
        padding: .65rem;
        border-radius: 1.4rem
    }
}

.item-media {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 1.6rem;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 28%, color-mix(in oklab, var(--halo) 20%, transparent), transparent 70%), var(--glass-quiet)
}

@media (max-width:639px) {
    .item-media {
        border-radius: 1.1rem
    }
}

.item-media-model {
    background: radial-gradient(circle at 35% 28%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%), var(--glass-quiet)
}

.item-media-icon {
    display: grid;
    place-items: center;
    height: 4.5rem;
    width: 4.5rem;
    border-radius: 999px;
    background: var(--secondary);
    border: 1px solid var(--glass-border);
    color: var(--foreground)
}

@media (max-width:639px) {
    .item-media-icon {
        height: 2.75rem;
        width: 2.75rem
    }

    .item-media-icon svg {
        width: 1.15rem;
        height: 1.15rem
    }
}

.item-media-icon svg {
    width: 2rem;
    height: 2rem
}

.item-desc {
    margin-top: .625rem;
    font-size: .78rem;
    line-height: 1.6;
    color: var(--muted-foreground)
}

@media (max-width:639px) {
    .item-desc {
        margin-top: .4rem;
        font-size: .62rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }
}

.item-specs {
    display: none
}

.cart-line .thumb.cart-thumb-icon {
    background: var(--secondary);
    border: 1px solid var(--glass-quiet-border);
    color: var(--muted-foreground)
}

.cart-line .thumb.cart-thumb-icon svg {
    width: 1.85rem;
    height: 1.85rem
}

.color-card {
    padding: 1rem;
    cursor: pointer;
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1)
}

.color-card:hover {
    transform: translateY(-8px) scale(1.03)
}

.swatch {
    display: block;
    aspect-ratio: 1/1;
    border-radius: 1.5rem;
    border: 1px solid var(--glass-border)
}

.color-card p.name {
    margin-top: .875rem;
    font-size: .875rem;
    font-weight: 600
}

.color-card p.meta {
    margin-top: .125rem;
    font-size: .68rem;
    letter-spacing: .02em;
    color: var(--muted-foreground);
    text-transform: capitalize
}

.app-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    height: 100%
}

@media (min-width:640px) {
    .app-card {
        padding: 1.75rem
    }
}

@media (max-width:639px) {
    .app-card {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
        padding: .75rem;
        border-radius: 1.3rem
    }

    .app-icon {
        height: 2.25rem;
        width: 2.25rem;
        border-radius: .7rem
    }

    .app-icon svg {
        width: 1rem;
        height: 1rem
    }

    .app-card h3 {
        font-size: .78rem
    }

    .app-card p.copy {
        margin-top: .2rem;
        font-size: .64rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .app-tag {
        margin-top: .4rem;
        padding: .18rem .5rem;
        font-size: .55rem
    }
}

.app-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 1rem
}

.app-icon svg {
    width: 1.5rem;
    height: 1.5rem
}

.app-card h3 {
    font-size: 1.1rem
}

.app-card p.copy {
    margin-top: .375rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--muted-foreground)
}

.app-tag {
    margin-top: .75rem;
    display: inline-flex;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--secondary);
    padding: .25rem .75rem;
    font-size: .65rem;
    letter-spacing: .02em
}

.marquee-section {
    overflow: hidden;
    padding-block: 5rem
}

@media (min-width:640px) {
    .marquee-section {
        padding-block: 7rem
    }
}

.marquee-row {
    position: relative;
    margin-top: 1rem
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: 1rem;
    padding-inline-end: 1rem
}

.testi-card {
    width: 20rem;
    flex-shrink: 0;
    padding: 1.5rem
}

@media (min-width:640px) {
    .testi-card {
        width: 24rem
    }
}

.testi-top {
    display: flex;
    align-items: center;
    gap: .75rem
}

.testi-avatar {
    display: grid;
    place-items: center;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--secondary);
    font-size: .75rem;
    font-weight: 600;
    flex-shrink: 0
}

.testi-name,
.testi-role {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.testi-name {
    font-size: .875rem;
    font-weight: 600
}

.testi-role {
    font-size: .7rem;
    color: var(--muted-foreground)
}

.blog-card p.excerpt,
.faq-a p,
.testi-quote {
    font-size: .875rem;
    line-height: 1.7;
    color: var(--muted-foreground)
}

.testi-quote {
    margin-top: .875rem
}

.fade-edge {
    pointer-events: none;
    position: absolute;
    inset-block: 0;
    width: 5rem;
    z-index: 2
}

.fade-edge.start {
    inset-inline-start: 0;
    background: linear-gradient(to left, transparent, var(--background))
}

.fade-edge.end {
    inset-inline-end: 0;
    background: linear-gradient(to right, transparent, var(--background))
}

.faq-grid {
    display: grid;
    gap: 2.5rem
}

@media (min-width:1024px) {
    .faq-grid {
        grid-template-columns: .9fr 1.1fr
    }
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.faq-item {
    overflow: hidden;
    transition: all 500ms
}

.faq-q,
.newsletter-form input {
    width: 100%;
    background: 0 0;
    border: 0;
    color: var(--foreground)
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    text-align: start;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .98rem
}

.faq-icon {
    display: grid;
    place-items: center;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    border-radius: 999px
}

.faq-icon svg {
    width: 1rem;
    height: 1rem
}

.faq-a-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: all 700ms cubic-bezier(.16, 1, .3, 1)
}

.faq-item.open .faq-a-wrap {
    grid-template-rows: 1fr;
    opacity: 1
}

.blog-card,
.faq-a {
    overflow: hidden
}

.blog-card p.excerpt,
.faq-a p {
    padding: 0 1.5rem 1.25rem
}

.blog-card {
    padding: .875rem
}

@media (min-width:640px) {
    .blog-card {
        padding: 1.1rem
    }
}

.blog-card.wide {
    grid-column: 1/-1
}

@media (min-width:640px) {
    .blog-card.wide {
        display: grid
    }
}

.blog-img-wrap {
    overflow: hidden;
    border-radius: 1.5rem
}

.blog-img-wrap img {
    height: 13rem;
    width: 100%;
    object-fit: cover;
    transition: transform 1200ms cubic-bezier(.16, 1, .3, 1)
}

@media (min-width:640px) {
    .blog-img-wrap img {
        height: 16rem
    }
}

.blog-card:hover .blog-img-wrap img {
    transform: scale(1.05)
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.25rem .25rem 0;
    font-size: .68rem;
    letter-spacing: .02em;
    color: var(--muted-foreground)
}

.blog-meta .tag {
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--secondary);
    padding: .25rem .65rem
}

.blog-card h3 {
    margin-top: .75rem;
    padding-inline: .25rem;
    font-size: 1.25rem
}

.blog-card p.excerpt {
    margin-top: .5rem;
    padding: 0 .25rem .5rem;
    line-height: 1.6
}

.blog-read,
.newsletter-grid p {
    margin-top: .75rem;
    font-size: .875rem
}

.blog-read {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0 .25rem .25rem;
    font-weight: 500
}

.newsletter-panel {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.5rem;
    border-radius: 2.5rem
}

@media (min-width:640px) {
    .newsletter-panel {
        padding: 3.5rem
    }
}

.newsletter-glow {
    position: absolute;
    top: -6rem;
    inset-inline-end: 0;
    height: 18rem;
    width: 18rem;
    border-radius: 999px;
    opacity: .7;
    filter: blur(60px);
    background: radial-gradient(circle, color-mix(in oklab, var(--halo) 60%, transparent), transparent 70%)
}

.newsletter-grid {
    position: relative;
    display: grid;
    gap: 2rem
}

@media (min-width:1024px) {
    .newsletter-grid {
        grid-template-columns: 1fr 1fr;
        align-items: center
    }
}

.newsletter-grid h2 {
    margin-top: 1rem;
    font-size: 1.9rem;
    line-height: 1.15;
    font-weight: 600
}

@media (min-width:640px) {
    .newsletter-grid h2 {
        font-size: 2.3rem
    }
}

.newsletter-grid p {
    max-width: 28rem;
    line-height: 1.6;
    color: var(--muted-foreground)
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    border-radius: 1.75rem;
    padding: .625rem
}

@media (min-width:640px) {
    .newsletter-form {
        flex-direction: row;
        align-items: center
    }
}

.newsletter-form .field {
    display: flex;
    flex: 1;
    align-items: center;
    gap: .625rem;
    padding: .625rem 1rem
}

.newsletter-form .field svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--muted-foreground)
}

.newsletter-form input {
    outline: 0;
    font-size: .875rem
}

.field-block input::placeholder,
.field-block textarea::placeholder,
.newsletter-form input::placeholder,
.search-input-row input::placeholder {
    color: var(--muted-foreground)
}

footer.site-footer {
    padding: 0 .75rem calc(1.25rem + env(safe-area-inset-bottom))
}

@media (min-width:640px) {
    footer.site-footer {
        padding: 0 1.5rem 1.5rem
    }
}

.footer-panel {
    max-width: 88rem;
    margin-inline: auto;
    overflow: hidden;
    padding: 1.25rem;
    border-radius: 1.5rem
}

@media (min-width:640px) {
    .footer-panel {
        padding: 1.75rem 2.25rem
    }
}

.footer-top {
    display: grid;
    gap: 1.5rem
}

@media (min-width:1024px) {
    .footer-top {
        grid-template-columns: 1.1fr 1fr;
        align-items: start;
        gap: 2rem
    }
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: .625rem
}

.footer-brand span.name {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 600
}

.cart-empty p,
.footer-desc,
.footer-social a {
    color: var(--muted-foreground)
}

.footer-desc {
    margin-top: .6rem;
    max-width: 22rem;
    font-size: .78rem;
    line-height: 1.5
}

.footer-social {
    margin-top: .9rem;
    display: flex;
    gap: .4rem
}

.footer-social a {
    display: grid;
    place-items: center;
    height: 2rem;
    width: 2rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--secondary);
    transition: all 500ms
}

.footer-social a:hover {
    transform: translateY(-4px)
}

.footer-social svg {
    width: .85rem;
    height: .85rem
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem
}

.footer-links p.eyebrow {
    font-size: .62rem
}

.footer-bottom,
.footer-links ul {
    margin-top: .625rem;
    display: flex;
    flex-direction: column;
    gap: .45rem
}

.footer-links a {
    font-size: .78rem
}

.footer-bottom .legal a:hover,
.footer-links a:hover,
.footer-social a:hover {
    color: var(--foreground)
}

.footer-bottom {
    margin-top: 1.25rem;
    gap: .5rem;
    border-top: 1px solid var(--glass-border);
    padding-top: .9rem;
    font-size: .68rem;
    color: var(--muted-foreground)
}

@media (min-width:640px) {
    .footer-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }
}

.footer-bottom .legal {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem
}

.footer-bottom .legal a,
.footer-links a {
    color: var(--muted-foreground);
    transition: color 300ms
}

.overlay-backdrop {
    position: fixed;
    inset: 0;
    background: oklch(.22 .012 265/10%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 500ms
}

.drawer-root {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none
}

.drawer-root.open {
    pointer-events: auto
}

.drawer-root.open .overlay-backdrop {
    opacity: 1
}

.cart-drawer {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: flex;
    height: 100%;
    height: 100dvh;
    width: 100%;
    max-width: 27rem;
    flex-direction: column;
    border-radius: 2.25rem 0 0 2.25rem;
    transform: translateX(110%);
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1)
}

[dir=rtl] .cart-drawer {
    transform: translateX(-110%);
    border-radius: 0 2.25rem 2.25rem 0
}

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

.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 1.5rem 1rem
}

.cart-head h2 {
    margin-top: .375rem;
    font-size: 1.25rem
}

.cart-close,
.qty-stepper button {
    display: grid;
    place-items: center;
    border-radius: 999px;
    cursor: pointer
}

.cart-close {
    height: 2.5rem;
    width: 2.5rem;
    border: 1px solid var(--glass-border);
    background: var(--secondary);
    transition: transform 300ms
}

.cart-close:hover {
    transform: rotate(90deg)
}

.cart-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column
}

.cart-body {
    padding: 0 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.cart-empty {
    padding: 2rem;
    text-align: center
}

.cart-empty p {
    font-size: .875rem
}

.cart-line {
    display: flex;
    gap: .75rem;
    padding: .75rem
}

.cart-line .thumb {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    height: 5rem;
    width: 5rem;
    border-radius: 1rem
}

.cart-line .thumb svg {
    width: 4rem;
    height: 4rem
}

.cart-line .info {
    flex: 1;
    min-width: 0
}

.cart-line .name {
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.cart-line .meta {
    margin-top: .125rem;
    font-size: .75rem;
    color: var(--muted-foreground)
}

.cart-line .row2 {
    margin-top: .625rem;
    justify-content: space-between
}

.coupon-row input,
.qty-stepper {
    border: 1px solid var(--glass-border)
}

.cart-line .row2,
.qty-stepper {
    display: flex;
    align-items: center
}

.qty-stepper {
    gap: .25rem;
    border-radius: 999px;
    background: var(--secondary);
    padding: .125rem
}

.qty-stepper button {
    height: 1.5rem;
    width: 1.5rem;
    border: 0;
    background: 0 0
}

.qty-stepper button:hover {
    background: var(--background)
}

.qty-stepper span {
    width: 1.5rem;
    text-align: center;
    font-size: .75rem;
    font-weight: 600
}

.cart-line .price-remove {
    display: flex;
    align-items: center;
    gap: .5rem
}

.cart-line .price-remove .price {
    font-size: .875rem;
    font-weight: 600
}

.cart-line .price-remove button {
    display: grid;
    place-items: center;
    height: 1.75rem;
    width: 1.75rem;
    border: 0;
    background: 0 0;
    border-radius: 999px;
    color: var(--muted-foreground);
    cursor: pointer
}

.cart-line .price-remove button:hover {
    color: var(--destructive);
    background: var(--background)
}

.cart-line .price-remove svg {
    width: .875rem;
    height: .875rem
}

.cart-foot {
    border-top: 1px solid var(--glass-border);
    padding: 1rem 1.5rem 1.75rem
}

.coupon-row {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem
}

.coupon-row input {
    flex: 1;
    min-width: 0;
    border-radius: .8rem;
    background: var(--glass-quiet);
    padding: .5rem .75rem;
    font-size: .78rem;
    color: var(--foreground)
}

.coupon-row input:focus {
    outline: 2px solid var(--ring);
    outline-offset: 1px
}

.coupon-row .btn-sm {
    white-space: nowrap
}

.coupon-msg {
    margin: -.4rem 0 .6rem;
    font-size: .72rem;
    color: var(--accent)
}

.coupon-msg.err {
    color: var(--destructive)
}

.coupon-remove {
    display: inline-grid;
    place-items: center;
    margin-inline-start: .3rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    border: 0;
    background: var(--glass-quiet);
    color: var(--muted-foreground);
    cursor: pointer
}

.coupon-remove svg {
    width: .6rem;
    height: .6rem
}

.cart-row,
.cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cart-row {
    font-size: .875rem;
    color: var(--muted-foreground);
    margin-top: .375rem
}

.cart-total {
    margin-top: .75rem;
    border-top: 1px solid var(--glass-border);
    padding-top: .75rem
}

.cart-total span:first-child {
    font-family: var(--font-display);
    font-weight: 600
}

.cart-total span:last-child {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600
}

.cart-note,
.search-root {
    display: flex;
    justify-content: center
}

.cart-note {
    margin-top: .75rem;
    align-items: center;
    gap: .375rem;
    font-size: .7rem;
    color: var(--muted-foreground)
}

.cart-note svg {
    width: .875rem;
    height: .875rem
}

.search-root {
    position: fixed;
    inset: 0;
    z-index: 80;
    align-items: flex-start;
    padding: 6rem .75rem 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms
}

.search-root.open {
    opacity: 1;
    pointer-events: auto
}

@media (min-width:640px) {
    .search-root {
        padding: 7rem 1.5rem 1rem
    }
}

.search-panel {
    position: relative;
    width: 100%;
    max-width: 48rem;
    overflow: hidden;
    padding: .5rem;
    transform: translateY(-24px) scale(.95);
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1)
}

.modal-root.open .modal-panel,
.search-root.open .search-panel {
    transform: translateY(0) scale(1)
}

.search-input-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1rem
}

.search-input-row svg.search-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--muted-foreground)
}

.search-input-row input {
    width: 100%;
    background: 0 0;
    border: 0;
    outline: 0;
    font-size: 1.05rem;
    color: var(--foreground)
}

.search-close,
.search-suggestions button {
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    cursor: pointer
}

.search-close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    height: 2.25rem;
    width: 2.25rem;
    background: var(--secondary)
}

.search-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    padding: 0 1rem .75rem
}

.search-suggestions button {
    padding: .25rem .75rem;
    font-size: .7rem;
    color: var(--muted-foreground)
}

.search-results {
    max-height: 52vh;
    overflow-y: auto;
    padding: 0 .375rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .375rem
}

.search-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: .875rem;
    color: var(--muted-foreground)
}

.search-hit {
    display: flex;
    align-items: center;
    gap: .75rem;
    border-radius: 1rem;
    padding: .625rem .75rem;
    transition: background 300ms;
    cursor: pointer
}

.search-hit .thumb,
.search-hit:hover,
.search-suggestions button {
    background: var(--secondary)
}

.search-hit .thumb {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    height: 3rem;
    width: 3rem;
    border-radius: .75rem;
    border: 1px solid var(--glass-border)
}

.search-hit .thumb svg {
    width: 2.5rem;
    height: 2.5rem
}

.search-hit .info {
    flex: 1;
    min-width: 0
}

.search-hit .info p:first-child {
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.search-hit .info p:last-child {
    font-size: .75rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.search-hit .price,
.toast strong {
    font-size: .875rem;
    font-weight: 600
}

.search-cats,
.search-colors {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .75rem
}

.search-cats a,
.search-colors a,
.search-colors span {
    border-radius: 999px;
    border: 1px solid var(--glass-border)
}

.search-cats a,
.search-colors a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--secondary);
    padding: .375rem .75rem;
    font-size: .75rem
}

.search-colors span {
    height: 1rem;
    width: 1rem
}

.modal-root {
    position: fixed;
    inset: 0;
    z-index: 75;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms
}

.modal-root.open {
    opacity: 1;
    pointer-events: auto
}

.modal-panel {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-height: 90vh;
    max-height: 90dvh;
    transform: translateY(24px) scale(.95);
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1)
}

.qv-panel {
    max-width: 56rem
}

.qv-grid {
    display: grid;
    gap: 1rem;
    padding: 1rem
}

@media (max-width:767px) {
    .qv-media {
        max-height: 38vh
    }
}

@media (min-width:768px) {
    .qv-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        padding: 1.75rem
    }
}

.qv-media {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 1.8rem
}

.qv-media svg {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 88%;
    height: 88%
}

.qv-info {
    display: flex;
    flex-direction: column
}

.qv-info h3 {
    margin-top: .5rem;
    font-size: 1.4rem
}

.page-hero-panel p.lead,
.qv-info p.tagline,
.qv-rating {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--muted-foreground)
}

.qv-rating {
    margin-top: .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem
}

.qv-specs,
.qv-swatches {
    margin-top: 1.25rem;
    gap: .5rem
}

.qv-swatches {
    display: flex;
    flex-wrap: wrap
}

.qv-swatches button {
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 300ms
}

.qv-swatches button:hover {
    transform: scale(1.1)
}

.qv-swatches button.active {
    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background)
}

.qv-specs {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.qv-specs div {
    border-radius: 1rem;
    padding: .5rem .75rem
}

@media (min-width:768px) {
    .qv-specs div {
        padding: .625rem .875rem
    }
}

.contact-detail dt,
.qv-specs dt {
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-foreground)
}

.qv-specs dd {
    margin-top: .125rem
}

.qv-buy {
    margin-top: auto;
    padding-top: 1.5rem
}

.qv-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between
}

.qv-price-row .price {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600
}

.qv-price-row a {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .875rem
}

.modal-close {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 20;
    display: grid;
    place-items: center;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--secondary);
    cursor: pointer;
    transition: transform 300ms
}

.modal-close:hover {
    transform: rotate(90deg)
}

.color-modal {
    max-width: 26rem;
    padding: 1.75rem
}

.color-modal-media {
    display: grid;
    place-items: center;
    aspect-ratio: 1/1;
    border-radius: 1.75rem
}

.color-modal-media svg {
    width: 86%;
    height: 86%
}

.color-modal h3 {
    margin-top: 1.25rem;
    font-size: 1.25rem
}

.color-modal p,
.qv-price-row a,
.toast span {
    color: var(--muted-foreground)
}

.color-modal p {
    margin-top: .25rem;
    font-size: .875rem;
    text-transform: capitalize
}

.storage-warning-banner {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: calc(.75rem + env(safe-area-inset-top)) 1.25rem .75rem;
    background: oklch(.75 .17 70);
    color: oklch(.2 .05 70)
}

.storage-warning-banner p {
    flex: 1;
    font-size: .78rem;
    line-height: 1.6
}

.storage-warning-banner .inline-icon {
    width: .9rem;
    height: .9rem;
    vertical-align: -.15em
}

.storage-warning-banner button {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 999px;
    border: 0;
    background: color-mix(in oklab, oklch(.2 .05 70) 12%, transparent);
    color: inherit;
    cursor: pointer
}

.storage-warning-banner button svg {
    width: .9rem;
    height: .9rem
}

@media (max-width:639px) {
    .storage-warning-banner p {
        font-size: .72rem
    }
}

.toast-region {
    position: fixed;
    bottom: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    width: min(22rem, calc(100vw - 2rem))
}

.toast {
    padding: .875rem 1.1rem;
    border-radius: 1.25rem;
    animation: toast-in 400ms cubic-bezier(.16, 1, .3, 1)
}

.toast strong {
    display: block;
    font-size: .85rem
}

.toast span {
    display: block;
    margin-top: .125rem;
    font-size: .75rem
}

.toast.leaving {
    animation: toast-out 300ms ease forwards
}

.page-top {
    padding: calc(var(--header-h, 9.5rem) + 1rem) .75rem 0
}

@media (min-width:640px) {
    .page-top {
        padding: calc(var(--header-h, 8rem) + 1rem) 1.5rem 0
    }
}

@media (min-width:1024px) {
    .page-top {
        padding: 7rem 1.5rem 0
    }
}

.page-hero-panel {
    padding: 2rem 1.25rem
}

@media (min-width:640px) {
    .page-hero-panel {
        padding: 3.5rem
    }
}

.page-hero-panel h1 {
    margin-top: 1rem;
    max-width: 48rem;
    font-size: 2.2rem;
    line-height: 1.1
}

@media (min-width:640px) {
    .page-hero-panel h1 {
        font-size: 3rem
    }
}

.page-hero-panel p.lead {
    margin-top: 1.1rem;
    max-width: 40rem;
    font-size: 1rem;
    line-height: 1.7
}

.breadcrumb {
    margin-bottom: 1.25rem;
    display: flex;
    gap: .5rem;
    font-size: .75rem;
    color: var(--muted-foreground)
}

.breadcrumb .current,
.breadcrumb a:hover {
    color: var(--foreground)
}

.pillar-card {
    padding: 1.75rem;
    height: 100%
}

@media (max-width:639px) {
    .pillar-card {
        padding: .85rem;
        border-radius: 1.3rem
    }

    .pillar-num {
        font-size: 1.25rem
    }

    .notfound-card h2,
    .pillar-card h3 {
        margin-top: .4rem;
        font-size: .82rem
    }

    .pillar-card p {
        margin-top: .3rem;
        font-size: .66rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden
    }
}

.pillar-num {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--muted-foreground) 50%, transparent)
}

.notfound-card h2,
.pillar-card h3 {
    margin-top: 1rem;
    font-size: 1.25rem
}

.contact-panel>p,
.pillar-card p {
    margin-top: .625rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--muted-foreground)
}

.contact-grid {
    display: grid;
    gap: 1rem
}

@media (min-width:1024px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr
    }
}

.contact-panel {
    padding: 2rem 1.25rem;
    height: 100%
}

@media (min-width:640px) {
    .contact-panel {
        padding: 3rem
    }
}

.contact-panel h1 {
    margin-top: 1rem;
    font-size: 2.2rem;
    line-height: 1.2
}

@media (min-width:640px) {
    .contact-panel h1 {
        font-size: 2.8rem
    }
}

.contact-panel>p {
    margin-top: 1rem
}

.contact-details {
    margin-top: 2.5rem;
    display: grid;
    gap: .625rem
}

@media (min-width:640px) {
    .contact-details {
        grid-template-columns: 1fr 1fr
    }
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: .75rem;
    border-radius: 1rem;
    padding: .875rem 1rem
}

.contact-detail svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--muted-foreground)
}

.contact-detail dd,
.qv-specs dd {
    font-size: .8rem;
    font-weight: 600
}

.field-block {
    display: block;
    margin-bottom: .875rem
}

.field-block input,
.field-block textarea {
    margin-top: .5rem;
    width: 100%;
    resize: none;
    border-radius: 1rem;
    padding: .875rem 1rem;
    font-size: .875rem;
    outline: 0;
    border: 1px solid var(--glass-quiet-border);
    background: var(--glass-quiet);
    color: var(--foreground);
    transition: box-shadow 500ms
}

.field-block input:focus,
.field-block textarea:focus {
    box-shadow: 0 0 0 2px var(--ring)
}

.compare-chips {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.compare-slot {
    padding: 1.5rem;
    height: 100%;
    min-height: 16rem
}

.compare-slot .media {
    display: grid;
    place-items: center;
    aspect-ratio: 4/3;
    border-radius: 1.5rem
}

.compare-slot .media svg {
    width: 84%;
    height: 84%
}

.compare-slot h3 {
    margin-top: 1.25rem;
    font-size: 1.25rem
}

.compare-slot .empty,
.compare-slot p.tag {
    font-size: .875rem;
    color: var(--muted-foreground)
}

.compare-slot p.tag {
    margin-top: .25rem
}

.compare-slot .empty {
    display: grid;
    height: 100%;
    min-height: 13rem;
    place-items: center;
    text-align: center
}

.compare-table {
    margin-top: 1rem;
    overflow: hidden
}

.compare-table .row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.25rem;
    font-size: .875rem
}

@media (min-width:640px) {
    .compare-table .row {
        padding: .875rem 1.75rem
    }
}

.compare-table .row.odd,
.pd-specs-table .row.odd {
    background: color-mix(in oklab, var(--secondary) 40%, transparent)
}

.compare-table dt {
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted-foreground)
}

.compare-table dd {
    font-weight: 500
}

.compare-table dd:last-child {
    text-align: end
}

.pd-grid {
    display: grid;
    gap: 1rem
}

@media (min-width:1024px) {
    .pd-grid {
        grid-template-columns: 1fr 1fr
    }
}

.pd-gallery {
    padding: 1rem
}

@media (min-width:640px) {
    .pd-gallery {
        padding: 1.5rem
    }
}

.pd-media,
.pd-thumbs button {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 1.75rem
}

.pd-media svg,
.pd-thumbs svg {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 88%;
    height: 88%
}

.pd-thumbs {
    margin-top: .75rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .625rem
}

.pd-thumbs button {
    display: grid;
    place-items: center;
    border-radius: 1.1rem;
    cursor: pointer;
    border: 0;
    padding: 0;
    min-width: 0
}

.pd-thumbs button.active {
    box-shadow: 0 0 0 2px var(--ring)
}

.pd-thumbs svg {
    width: 82%;
    height: 82%
}

.pd-info {
    padding: 1.5rem 1.25rem
}

@media (min-width:640px) {
    .pd-info {
        padding: 2.25rem
    }
}

.pd-price-row,
.pd-top-row {
    display: flex;
    align-items: center
}

.pd-top-row {
    justify-content: space-between;
    gap: .75rem
}

.pd-top-row .badge {
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--secondary);
    padding: .25rem .75rem;
    font-size: .65rem;
    font-weight: 600
}

.pd-info h1 {
    margin-top: .75rem;
    font-size: 1.5rem;
    line-height: 1.2
}

@media (min-width:640px) {
    .pd-info h1 {
        font-size: 2.2rem;
        line-height: 1.15
    }
}

.pd-info h1 .colorname {
    display: block;
    margin-top: .25rem;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--muted-foreground)
}

.pd-price-row {
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 1rem
}

.pd-price-row .price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600
}

@media (min-width:640px) {
    .pd-price-row .price {
        font-size: 1.9rem
    }
}

.pd-desc,
.pd-price-row .compare-at {
    font-size: .875rem;
    color: var(--muted-foreground)
}

.pd-price-row .compare-at {
    text-decoration: line-through
}

.pd-price-row .rating {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: var(--muted-foreground)
}

.pd-desc {
    margin-top: 1.25rem;
    line-height: 1.7
}

.pd-color-block {
    margin-top: 1.75rem
}

.pd-color-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between
}

.pd-color-head p:last-child {
    font-size: .7rem;
    color: var(--muted-foreground)
}

.pd-swatches {
    margin-top: .75rem;
    display: flex;
    gap: .625rem;
    overflow-x: auto;
    padding-bottom: .25rem
}

.pd-swatches button {
    flex-shrink: 0;
    height: 2.15rem;
    width: 2.15rem;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 500ms
}

@media (min-width:640px) {
    .pd-swatches button {
        height: 2.5rem;
        width: 2.5rem
    }
}

.pd-swatches button:hover {
    transform: scale(1.1)
}

.pd-swatches button.active {
    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background)
}

.pd-specs-mini {
    margin-top: 1.75rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .625rem
}

@media (min-width:640px) {
    .pd-specs-mini {
        grid-template-columns: repeat(4, 1fr)
    }
}

.pd-specs-mini div {
    border-radius: .875rem;
    padding: .6rem .7rem
}

@media (min-width:640px) {
    .pd-specs-mini div {
        border-radius: 1rem;
        padding: .75rem .875rem
    }
}

.pd-specs-mini dt {
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-foreground)
}

.pd-specs-mini dd {
    margin-top: .25rem;
    font-size: .78rem;
    font-weight: 600
}

.pd-features {
    margin-top: 1.5rem;
    display: grid;
    gap: .5rem
}

@media (min-width:640px) {
    .pd-features {
        grid-template-columns: 1fr 1fr
    }
}

.pd-features li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .875rem;
    color: var(--muted-foreground)
}

.pd-features li::before {
    content: "";
    margin-top: .5rem;
    height: .375rem;
    width: .375rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--accent)
}

.pd-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .625rem
}

.pd-specs-table {
    margin-top: 1rem;
    overflow: hidden
}

.pd-specs-table>p {
    padding: 1.5rem 1.5rem 0
}

@media (min-width:640px) {
    .pd-specs-table>p {
        padding: 1.5rem 2rem 0
    }
}

.pd-specs-table dl {
    margin-top: 1rem;
    display: grid
}

@media (min-width:640px) {
    .pd-specs-table dl {
        grid-template-columns: 1fr 1fr
    }
}

.pd-specs-table .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1.5rem;
    font-size: .875rem
}

@media (min-width:640px) {
    .pd-specs-table .row {
        padding: .875rem 2rem
    }
}

.auth-tabs button,
.notfound-card p,
.pd-specs-table dt {
    color: var(--muted-foreground)
}

.pd-specs-table dd {
    font-weight: 500
}

.filter-bar {
    margin-top: 2rem;
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem
}

.notfound-wrap {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: 1rem
}

.notfound-card {
    max-width: 28rem;
    border-radius: 2rem;
    padding: 2.5rem;
    text-align: center
}

.notfound-card h1 {
    font-family: var(--font-display);
    font-size: 4.5rem;
    font-weight: 600
}

.notfound-card p {
    margin-top: .5rem;
    font-size: .875rem
}

.notfound-card .btn {
    margin-top: 1.5rem
}

@media (min-width:1024px) {

    body.has-cursor,
    body.has-cursor * {
        cursor: none
    }
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 999px;
    border: 1.5px solid var(--foreground);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 200ms, height 200ms, opacity 200ms;
    opacity: 0
}

.custom-cursor.show {
    opacity: .6
}

.custom-cursor.hover {
    width: 2.75rem;
    height: 2.75rem;
    opacity: .9;
    background: color-mix(in oklab, var(--halo) 20%, transparent)
}

main {
    display: block;
    min-height: 60vh
}

.account-wrap {
    position: relative
}

.account-avatar {
    display: grid;
    place-items: center;
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: .68rem;
    font-weight: 700
}

.account-menu {
    position: absolute;
    top: calc(100% + .5rem);
    inset-inline-end: 0;
    z-index: 60;
    min-width: 13rem;
    border-radius: 1.25rem;
    padding: .875rem
}

.account-menu .account-name {
    font-size: .85rem;
    font-weight: 600
}

.account-menu .account-email {
    margin-top: .1rem;
    font-size: .72rem;
    color: var(--muted-foreground);
    word-break: break-all
}

.account-menu-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    margin-top: .625rem;
    border-radius: .75rem;
    border: 0;
    background: var(--secondary);
    padding: .5rem .75rem;
    font-size: .8rem;
    cursor: pointer;
    color: var(--foreground);
    text-align: start
}

.account-menu-link:hover {
    background: var(--muted)
}

.account-menu-link svg {
    width: .875rem;
    height: .875rem;
    flex-shrink: 0
}

.auth-panel {
    max-width: 26rem;
    padding: 1.75rem
}

.auth-tabs {
    display: flex;
    gap: .375rem;
    border-radius: 999px;
    background: var(--secondary);
    padding: .25rem;
    margin-top: 1rem
}

.auth-tabs button {
    flex: 1;
    border: 0;
    background: 0 0;
    border-radius: 999px;
    padding: .5rem;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer
}

.auth-tabs button.active {
    background: var(--primary);
    color: var(--primary-foreground)
}

.auth-note {
    margin-top: .875rem;
    border-radius: .875rem;
    background: var(--glass-quiet);
    border: 1px solid var(--glass-quiet-border);
    padding: .625rem .875rem;
    font-size: .78rem;
    color: var(--muted-foreground)
}

.auth-error {
    margin: -.25rem 0 .75rem;
    font-size: .75rem;
    color: var(--destructive)
}

.auth-hint {
    text-align: center;
    font-size: .7rem;
    color: var(--muted-foreground)
}

#auth-form-wrap,
.auth-hint,
.store-toolbar {
    margin-top: 1rem
}

.checkout-panel {
    max-width: 28rem;
    padding: 1.75rem
}

@media (max-width:639px) {
    .checkout-panel {
        padding: 1.25rem
    }
}

.orders-panel {
    max-width: 32rem;
    padding: 1.75rem
}

@media (max-width:639px) {
    .orders-panel {
        padding: 1.25rem
    }
}

.my-orders-list {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .875rem
}

.my-order-card {
    border-radius: 1.25rem;
    padding: 1.1rem
}

.my-order-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem
}

.my-order-id {
    font-family: monospace;
    font-weight: 600;
    font-size: .85rem
}

.my-order-date {
    margin-top: .2rem;
    font-size: .7rem;
    color: var(--muted-foreground)
}

.my-order-items {
    margin-top: .75rem;
    font-size: .78rem;
    line-height: 1.6;
    color: var(--muted-foreground)
}

.my-order-tracker {
    margin-top: .875rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem
}

.my-order-tracker span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    color: var(--muted-foreground)
}

.my-order-tracker span svg {
    width: .8rem;
    height: .8rem
}

.my-order-tracker span .dot {
    display: inline-block;
    width: .4rem;
    height: .4rem;
    border-radius: 999px;
    background: var(--muted-foreground);
    opacity: .5
}

.my-order-tracker span.active {
    color: var(--accent);
    font-weight: 600
}

.my-order-total {
    margin-top: .875rem;
    padding-top: .875rem;
    border-top: 1px solid var(--glass-quiet-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem
}

.my-order-total b {
    font-size: 1rem
}

.my-order-note {
    margin-top: .625rem;
    font-size: .68rem;
    color: var(--muted-foreground)
}

.checkout-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    padding: .875rem 1rem;
    border-radius: 1rem;
    background: var(--secondary);
    font-size: .85rem
}

.checkout-total-row .checkout-total-amount {
    font-size: 1.1rem;
    font-weight: 700
}

.checkout-pay-card {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1.1rem
}

.checkout-pay-card .eyebrow {
    display: flex;
    align-items: center;
    gap: .35rem
}

.checkout-pay-card .eyebrow svg {
    width: .85rem;
    height: .85rem;
    flex-shrink: 0
}

.checkout-card-number-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .5rem
}

.checkout-card-number {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .05em;
    direction: ltr;
    unicode-bidi: plaintext
}

@media (max-width:380px) {
    .checkout-card-number {
        font-size: .92rem
    }
}

.checkout-card-holder {
    margin-top: .375rem;
    font-size: .78rem;
    color: var(--muted-foreground)
}

.checkout-instructions {
    margin-top: .75rem;
    font-size: .78rem;
    line-height: 1.7;
    color: var(--muted-foreground)
}

#checkout-form {
    margin-top: 1.25rem
}

.checkout-upload-block {
    margin-top: 0
}

.checkout-upload-zone {
    position: relative;
    margin-top: .5rem;
    border-radius: 1rem;
    border: 1.5px dashed var(--glass-border);
    background: var(--glass-quiet);
    padding: 1.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    cursor: pointer;
    transition: border-color 300ms, background 300ms
}

.checkout-upload-zone:hover {
    border-color: var(--halo)
}

.checkout-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: var(--muted-foreground);
    font-size: .78rem;
    text-align: center
}

.checkout-upload-placeholder svg {
    width: 1.6rem;
    height: 1.6rem
}

.checkout-receipt-preview {
    max-width: 100%;
    max-height: 12rem;
    border-radius: .75rem;
    display: block;
    margin: 0 auto
}

.checkout-receipt-remove {
    position: absolute;
    top: .5rem;
    inset-inline-end: .5rem;
    display: grid;
    place-items: center;
    height: 1.75rem;
    width: 1.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    cursor: pointer
}

.checkout-receipt-remove svg {
    width: .8rem;
    height: .8rem
}

.checkout-success {
    text-align: center;
    padding: .5rem 0 0
}

.checkout-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 999px;
    background: color-mix(in oklab, oklch(.7 .17 150) 18%, transparent);
    color: oklch(.55 .14 150);
    margin-bottom: 1rem
}

.checkout-success-icon svg {
    width: 1.75rem;
    height: 1.75rem
}

.checkout-success h2 {
    font-size: 1.15rem
}

.checkout-success p {
    margin-top: .5rem;
    font-size: .82rem;
    color: var(--muted-foreground);
    line-height: 1.7
}

.checkout-success .btn {
    margin-top: 1.25rem
}

.inline-icon {
    width: .8rem;
    height: .8rem;
    vertical-align: -1px;
    margin-inline-end: .2rem;
    flex-shrink: 0
}

.admin-receipt-thumb {
    max-width: 100%;
    max-height: 18rem;
    border-radius: .9rem;
    display: block;
    margin-top: .5rem;
    cursor: zoom-in;
    border: 1px solid var(--glass-border)
}

.admin-order-payment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem
}

.store-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    background: var(--glass-quiet);
    border: 1px solid var(--glass-quiet-border)
}

.pd-tiers ul,
.store-field {
    display: flex;
    flex-direction: column
}

.store-field {
    gap: .375rem;
    font-size: .72rem;
    color: var(--muted-foreground)
}

.store-field input[type=range],
.store-field select {
    font-family: inherit
}

.store-field select {
    border-radius: .75rem;
    border: 1px solid var(--glass-quiet-border);
    background: var(--card);
    padding: .5rem .625rem;
    font-size: .8rem;
    color: var(--foreground);
    min-width: 9rem
}

.store-field input[type=range] {
    width: 10rem;
    accent-color: var(--accent)
}

.store-colors {
    flex: 1;
    min-width: 12rem
}

.store-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem
}

.store-color-swatches button {
    height: 1.4rem;
    width: 1.4rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: transform 300ms
}

.store-color-swatches button:hover {
    transform: scale(1.15)
}

.store-color-swatches button.active {
    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background)
}

.store-count {
    margin-top: 1.25rem;
    font-size: .78rem;
    color: var(--muted-foreground)
}

.pc-badge-discount {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: transparent
}

.discount-badge svg,
.pc-badge-discount svg {
    width: .68rem;
    height: .68rem
}

.discount-badge,
.pc-more-colors {
    display: inline-flex;
    align-items: center;
    font-size: .65rem
}

.pc-more-colors {
    color: var(--muted-foreground);
    padding-inline-start: .25rem
}

.discount-badge {
    margin-top: .375rem;
    gap: .25rem;
    font-weight: 600;
    color: var(--accent)
}

.pd-tiers li,
.price-strike {
    color: var(--muted-foreground)
}

.price-strike {
    font-size: .72rem;
    text-decoration: line-through
}

.cart-row svg {
    vertical-align: -1px
}

.pd-qty-row {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem
}

.qty-stepper-lg {
    padding: .25rem
}

.qty-stepper-lg button {
    height: 2rem;
    width: 2rem
}

.qty-stepper-lg span {
    width: 2rem;
    font-size: .875rem
}

.pd-tiers {
    margin-top: 1.25rem;
    border-radius: 1rem;
    padding: .875rem 1rem
}

.pd-tiers p.eyebrow {
    display: flex;
    align-items: center;
    gap: .375rem
}

.cart-row svg,
.pd-tiers p.eyebrow svg {
    width: .8rem;
    height: .8rem
}

.pd-tiers ul {
    margin-top: .5rem;
    gap: .25rem
}

.pd-tiers li {
    font-size: .8rem
}

.live-widget {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/8;
    border-radius: 1.75rem;
    padding: 0
}

@media (max-width:640px) {
    .live-widget {
        aspect-ratio: 4/3.4
    }
}

.live-canvas {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, oklch(.3 .02 240/85%), transparent 55%), radial-gradient(circle at 80% 70%, oklch(.24 .02 260/90%), transparent 60%), linear-gradient(160deg, oklch(.2 .01 250) 0%, oklch(.14 .01 250) 100%);
    overflow: hidden
}

.live-canvas-glow {
    position: absolute;
    top: 20%;
    inset-inline-start: 15%;
    width: 40%;
    height: 60%;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in oklab, var(--halo) 55%, transparent), transparent 70%);
    filter: blur(40px);
    animation: drift 18s ease-in-out infinite;
    opacity: .6
}

.live-line {
    position: absolute;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, oklch(1 0 0/35%), transparent);
    animation: live-scan 5s linear infinite
}

.live-line.l1 {
    top: 28%;
    width: 60%;
    inset-inline-start: -60%;
    animation-duration: 6s
}

.live-line.l2 {
    top: 52%;
    width: 45%;
    inset-inline-start: -45%;
    animation-duration: 8s;
    animation-delay: -2s
}

.live-line.l3 {
    top: 72%;
    width: 55%;
    inset-inline-start: -55%;
    animation-duration: 7s;
    animation-delay: -4s
}

.live-dust {
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: radial-gradient(oklch(1 0 0/60%) 1px, transparent 1px);
    background-size: 3px 3px;
    animation: live-noise 1.2s steps(4) infinite
}

.live-topbar {
    position: absolute;
    top: 1rem;
    inset-inline: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    background: oklch(.55 .2 20/92%);
    color: #fff;
    padding: .3rem .75rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em
}

.live-dot {
    display: inline-block;
    height: .45rem;
    width: .45rem;
    border-radius: 999px;
    background: #fff;
    animation: live-pulse 1.4s ease-in-out infinite
}

.live-viewers {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 999px;
    background: oklch(1 0 0/12%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: .3rem .75rem;
    font-size: .68rem;
    font-weight: 600
}

.live-viewers svg {
    width: .78rem;
    height: .78rem
}

.live-bottombar {
    position: absolute;
    bottom: 1rem;
    inset-inline: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem
}

.live-caption,
.live-clock {
    border-radius: .75rem;
    background: oklch(0 0 0/38%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    padding: .4rem .75rem;
    font-size: .72rem
}

.live-clock {
    padding: .4rem .625rem;
    font-variant-numeric: tabular-nums;
    direction: ltr
}

.reviews-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 2.5rem
}

@media (min-width:1024px) {
    .reviews-grid {
        grid-template-columns: 22rem 1fr
    }
}

.review-form-card {
    padding: 1.5rem
}

.rating-input {
    display: flex;
    gap: .3rem;
    margin-top: .5rem
}

.rating-input button {
    background: 0 0;
    border: 0;
    cursor: pointer;
    padding: 0;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--muted)
}

.rating-input button svg {
    width: 100%;
    height: 100%
}

.rating-input button.on {
    color: var(--accent)
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: .875rem
}

.review-item {
    padding: 1.25rem
}

.review-top {
    display: flex;
    align-items: center;
    gap: .75rem
}

.qa-form textarea,
.review-avatar {
    border: 1px solid var(--glass-border)
}

.review-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 999px;
    background: var(--secondary);
    font-size: .7rem;
    font-weight: 700
}

.review-name {
    font-size: .85rem;
    font-weight: 600
}

.review-date,
.review-text {
    font-size: .68rem;
    color: var(--muted-foreground)
}

.review-top .review-stars {
    margin-inline-start: auto
}

.review-text {
    margin-top: .75rem;
    font-size: .85rem;
    line-height: 1.7
}

.qa-form,
.qa-wrap {
    display: flex;
    flex-direction: column
}

.qa-wrap {
    margin-top: 2rem;
    gap: 1rem
}

.qa-form {
    padding: 1.1rem;
    gap: .625rem
}

.qa-form textarea {
    width: 100%;
    border-radius: .8rem;
    background: var(--glass-quiet);
    padding: .6rem .75rem;
    font-size: .8rem;
    color: var(--foreground);
    resize: vertical
}

.qa-form textarea:focus {
    outline: 2px solid var(--ring);
    outline-offset: 1px
}

.qa-list {
    display: flex;
    flex-direction: column;
    gap: .625rem
}

.qa-item {
    padding: .9rem 1.1rem
}

.qa-q {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 600
}

.qa-q svg {
    width: .9rem;
    height: .9rem;
    flex-shrink: 0;
    margin-top: .15rem;
    color: var(--halo)
}

.qa-a,
.qa-pending {
    margin-top: .5rem;
    color: var(--muted-foreground)
}

.qa-a {
    font-size: .78rem;
    line-height: 1.6
}

.qa-pending {
    font-size: .72rem;
    font-style: italic
}

.admin-shell {
    display: grid;
    grid-template-columns: 15rem 1fr;
    min-height: 100vh;
    min-height: 100dvh
}

@media (max-width:900px) {
    .admin-shell {
        grid-template-columns: 1fr
    }
}

.admin-sidebar {
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

@media (max-width:900px) {
    .admin-sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        overflow-x: auto;
        gap: .5rem;
        padding: 1rem
    }
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 0 .5rem 1.25rem
}

@media (max-width:900px) {
    .admin-brand {
        display: none
    }
}

.admin-header p,
.admin-nav-link {
    font-size: .85rem;
    color: var(--muted-foreground)
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    border-radius: .875rem;
    padding: .625rem .875rem;
    cursor: pointer;
    border: 0;
    background: 0 0;
    text-align: start;
    white-space: nowrap
}

.admin-nav-link:hover {
    background: var(--secondary);
    color: var(--foreground)
}

.admin-nav-link.active {
    background: var(--primary);
    color: var(--primary-foreground)
}

.admin-nav-link svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0
}

.cart-badge-inline {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--destructive);
    color: #fff;
    font-size: .6rem;
    font-weight: 700
}

.admin-nav-link.active .cart-badge-inline {
    background: rgba(255, 255, 255, .35)
}

.admin-main {
    padding: 1.5rem;
    max-width: 80rem
}

@media (min-width:640px) {
    .admin-main {
        padding: 2.5rem
    }
}

.admin-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem
}

.admin-header h1 {
    font-size: 1.6rem
}

.admin-header p {
    margin-top: .375rem
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem
}

@media (min-width:768px) {
    .admin-stat-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.admin-stat-card {
    padding: 1.25rem
}

.admin-stat-card .icon {
    display: inline-grid;
    place-items: center;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: .875rem;
    margin-bottom: .75rem
}

.admin-stat-card .icon svg {
    width: 1.1rem;
    height: 1.1rem
}

.admin-stat-card .value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700
}

.admin-stat-card .label {
    margin-top: .25rem;
    font-size: .78rem;
    color: var(--muted-foreground)
}

.admin-table-wrap {
    overflow-x: auto;
    border-radius: 1.25rem
}

table.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    min-width: 44rem
}

table.admin-table td,
table.admin-table th {
    border-bottom: 1px solid var(--glass-quiet-border)
}

table.admin-table th {
    text-align: start;
    padding: .875rem 1rem;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    white-space: nowrap
}

table.admin-table td {
    padding: .75rem 1rem;
    vertical-align: middle
}

table.admin-table tr:last-child td {
    border-bottom: none
}

.admin-color-picker button,
.admin-table .swatch-sm {
    border-radius: 999px;
    border: 1px solid var(--glass-border)
}

.admin-table .swatch-sm {
    display: inline-block;
    height: 1.1rem;
    width: 1.1rem;
    vertical-align: -2px;
    margin-inline-end: .25rem
}

.admin-row-actions {
    display: flex;
    gap: .375rem
}

.admin-icon-btn {
    display: grid;
    place-items: center;
    height: 2rem;
    width: 2rem;
    border-radius: .625rem;
    border: 1px solid var(--glass-quiet-border);
    background: var(--secondary);
    cursor: pointer;
    color: var(--muted-foreground)
}

.admin-icon-btn:hover {
    color: var(--foreground);
    background: var(--muted)
}

.admin-icon-btn svg {
    width: .85rem;
    height: .85rem
}

.admin-icon-btn.danger:hover {
    color: var(--destructive)
}

.admin-search,
.admin-toolbar {
    display: flex;
    align-items: center
}

.admin-toolbar {
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
    justify-content: space-between
}

.admin-search {
    gap: .5rem;
    border-radius: .875rem;
    border: 1px solid var(--glass-quiet-border);
    background: var(--glass-quiet);
    padding: .5rem .875rem;
    min-width: 16rem
}

.admin-search input {
    border: 0;
    background: 0 0;
    outline: 0;
    font-size: .82rem;
    width: 100%;
    color: var(--foreground)
}

.admin-search svg {
    width: .875rem;
    height: .875rem;
    color: var(--muted-foreground);
    flex-shrink: 0
}

.admin-empty {
    padding: 3rem;
    text-align: center;
    font-size: .85rem;
    color: var(--muted-foreground)
}

.admin-panel-card {
    padding: 1.5rem;
    margin-bottom: 1.5rem
}

.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .875rem
}

@media (max-width:640px) {
    .admin-form-grid {
        grid-template-columns: 1fr
    }
}

.admin-form-grid .span-2 {
    grid-column: 1/-1
}

.admin-form-grid label {
    display: block
}

.admin-form-grid label span.lbl {
    display: block;
    margin-bottom: .375rem;
    font-size: .72rem;
    color: var(--muted-foreground)
}

.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea {
    width: 100%;
    border-radius: .75rem;
    border: 1px solid var(--glass-quiet-border);
    background: var(--glass-quiet);
    padding: .625rem .75rem;
    font-size: .85rem;
    color: var(--foreground);
    font-family: inherit
}

.admin-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    max-height: 8rem;
    overflow-y: auto;
    padding: .5rem;
    border-radius: .75rem;
    border: 1px solid var(--glass-quiet-border);
    background: var(--glass-quiet)
}

.admin-color-picker button {
    height: 1.4rem;
    width: 1.4rem;
    cursor: pointer
}

.admin-color-picker button.active {
    box-shadow: 0 0 0 2px var(--ring)
}

.admin-login-wrap {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem
}

.admin-login-card {
    max-width: 24rem;
    width: 100%;
    padding: 2rem
}

.admin-badge-role,
.status-badge {
    display: inline-flex;
    border-radius: 999px;
    padding: .2rem .625rem;
    font-size: .65rem;
    font-weight: 600
}

.admin-badge-role.custom {
    background: var(--secondary);
    color: var(--foreground)
}

.admin-badge-role.base {
    background: var(--muted);
    color: var(--muted-foreground)
}

.status-badge {
    align-items: center;
    gap: .3rem;
    padding: .25rem .7rem;
    white-space: nowrap
}

.status-badge::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 999px;
    background: currentColor
}

.status-badge.status-0 {
    background: color-mix(in oklab, oklch(.75 .17 70) 18%, transparent);
    color: oklch(.6 .17 60)
}

.status-badge.status-1 {
    background: color-mix(in oklab, var(--accent) 18%, transparent);
    color: var(--accent)
}

.status-badge.status-2 {
    background: color-mix(in oklab, oklch(.62 .19 300) 18%, transparent);
    color: oklch(.55 .17 300)
}

.status-badge.status-3 {
    background: color-mix(in oklab, oklch(.7 .17 150) 18%, transparent);
    color: oklch(.55 .14 150)
}

.admin-filter-bar,
.status-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.status-stepper {
    margin-top: .75rem
}

.status-stepper button {
    color: var(--muted-foreground);
    padding: .5rem .9rem;
    font-size: .74rem;
    cursor: pointer;
    transition: all 300ms
}

.status-stepper button.active {
    border-color: transparent;
    background: var(--primary);
    color: var(--primary-foreground)
}

.admin-filter-bar {
    margin-bottom: 1.25rem;
    align-items: center
}

.admin-filter-select,
.chat-thread-foot input,
.qa-admin-item input,
.status-stepper button {
    border-radius: .8rem;
    border: 1px solid var(--glass-quiet-border);
    background: var(--glass-quiet)
}

.admin-filter-select,
.chat-thread-foot input,
.qa-admin-item input {
    padding: .5rem .75rem;
    font-size: .78rem;
    color: var(--foreground)
}

.admin-modal-root {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    background: color-mix(in oklab, #000 55%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: admin-modal-in 260ms ease
}

.admin-modal-panel {
    width: 100%;
    max-width: 42rem;
    margin: 2rem auto;
    padding: 1.5rem;
    position: relative
}

@media (max-width:640px) {
    .admin-modal-panel {
        padding: 1.1rem;
        margin: .75rem auto
    }
}

.admin-modal-close {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    display: grid;
    place-items: center;
    height: 2rem;
    width: 2rem;
    border-radius: 999px;
    border: 0;
    background: var(--secondary);
    color: var(--muted-foreground);
    cursor: pointer
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    height: 11rem;
    margin-top: 1rem;
    padding: 0 .25rem
}

.bar-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    height: 100%;
    justify-content: flex-end
}

.bar-chart-bar {
    width: 100%;
    max-width: 2.6rem;
    border-radius: .5rem .5rem .2rem .2rem;
    background: linear-gradient(180deg, var(--halo), oklch(.72 .13 265));
    min-height: .3rem;
    transition: height 700ms cubic-bezier(.16, 1, .3, 1)
}

.bar-chart-label {
    font-size: .62rem;
    color: var(--muted-foreground);
    text-align: center
}

.bar-chart-value {
    font-size: .6rem;
    font-weight: 600;
    color: var(--foreground)
}

.dash-grid-2 {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    margin-bottom: 1.5rem
}

@media (min-width:1024px) {
    .dash-grid-2 {
        grid-template-columns: 1.3fr 1fr
    }
}

.chat-shell {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    min-height: 32rem
}

@media (max-width:780px) {
    .chat-shell {
        grid-template-columns: 1fr
    }
}

.chat-convo-list {
    border-inline-end: 1px solid var(--glass-quiet-border);
    overflow-y: auto;
    max-height: 34rem
}

@media (max-width:780px) {
    .chat-convo-list {
        max-height: 14rem;
        border-inline-end: none;
        border-bottom: 1px solid var(--glass-quiet-border)
    }
}

.chat-convo-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .75rem 1rem;
    border: 0;
    background: 0 0;
    cursor: pointer;
    text-align: start;
    border-bottom: 1px solid var(--glass-quiet-border)
}

.chat-convo-item.active,
.chat-convo-item:hover {
    background: var(--secondary)
}

.chat-convo-item .avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 999px;
    background: var(--muted);
    font-size: .68rem;
    font-weight: 700
}

.chat-convo-item .meta {
    min-width: 0;
    flex: 1
}

.chat-convo-item .meta p.name {
    font-size: .78rem;
    font-weight: 600
}

.chat-convo-item .meta p.preview {
    font-size: .68rem;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.chat-convo-item .unread-dot {
    flex-shrink: 0;
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--destructive)
}

.chat-thread {
    display: flex;
    flex-direction: column;
    height: 34rem
}

.chat-thread-head {
    padding: .875rem 1.1rem;
    border-bottom: 1px solid var(--glass-quiet-border);
    font-size: .85rem;
    font-weight: 600
}

.chat-thread-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .625rem
}

.chat-bubble {
    max-width: 75%;
    padding: .55rem .85rem;
    border-radius: 1rem;
    font-size: .8rem;
    line-height: 1.5
}

.chat-bubble.from-admin {
    align-self: flex-start;
    background: var(--primary);
    color: var(--primary-foreground);
    border-end-start-radius: .25rem
}

.chat-bubble.from-customer {
    align-self: flex-end;
    background: var(--secondary);
    border-end-end-radius: .25rem
}

.chat-bubble time {
    display: block;
    margin-top: .25rem;
    font-size: .6rem;
    opacity: .65
}

.chat-thread-foot {
    display: flex;
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--glass-quiet-border)
}

.chat-thread-foot input,
.qa-admin-item input {
    flex: 1;
    padding: .55rem .8rem;
    font-size: .8rem
}

.chat-thread-foot button {
    flex-shrink: 0
}

.chat-typing {
    align-self: flex-start;
    font-size: .68rem;
    color: var(--muted-foreground);
    font-style: italic
}

.qa-admin-item {
    padding: .9rem 1.1rem;
    margin-bottom: .625rem
}

.qa-admin-item form {
    display: flex;
    gap: .5rem;
    margin-top: .625rem
}

.qa-admin-item input {
    border-radius: .7rem;
    padding: .45rem .7rem;
    font-size: .76rem
}

.discount-scope-products {
    margin-top: .5rem
}