/*
 * Shopzy — Local Tailwind Utilities
 * Hand-extracted from blade templates (replaces cdn.tailwindcss.com).
 * Custom config: brand orange, ink dark, Mulish/Outfit fonts.
 * ~8 KB vs ~130 KB CDN — eliminates render-blocking script.
 */

/* ─── CSS Reset / Base ──────────────────────────────────────────────────── */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif; }
body { margin: 0; line-height: inherit; }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-image: none; }
button:focus-visible { outline: 2px solid #f15a24; outline-offset: 2px; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
[hidden] { display: none; }

/* ─── Custom Config Colors ───────────────────────────────────────────────── */
:root {
  --brand-50:  #fff4ec;
  --brand-100: #ffe3cc;
  --brand-200: #ffc299;
  --brand-300: #ff9e5c;
  --brand-400: #fb7e2d;
  --brand-500: #f15a24;
  --brand-600: #e04708;
  --brand-700: #b8380a;
  --brand-800: #92300f;
  --brand-900: #762a10;
  --brand-950: #431407;
  --ink:       #1f2430;
}

/* ─── Display ────────────────────────────────────────────────────────────── */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.inline-flex  { display: inline-flex; }
.flex         { display: flex; }
.grid         { display: grid; }
.table        { display: table; }
.hidden       { display: none; }
.sr-only      { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0; }

/* ─── Position ───────────────────────────────────────────────────────────── */
.static   { position: static; }
.fixed    { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky   { position: sticky; }

/* ─── Inset / Positioning ────────────────────────────────────────────────── */
.inset-0    { inset: 0; }
.inset-y-0  { top: 0; bottom: 0; }
.top-0      { top: 0; }
.top-0\.5   { top: 0.125rem; }
.top-1      { top: 0.25rem; }
.top-2      { top: 0.5rem; }
.top-3      { top: 0.75rem; }
.top-4      { top: 1rem; }
.top-16     { top: 4rem; }
.top-1\/2   { top: 50%; }
.right-0    { right: 0; }
.right-1    { right: 0.25rem; }
.right-2    { right: 0.5rem; }
.right-6    { right: 1.5rem; }
.right-1\/2 { right: 50%; }
.bottom-0   { bottom: 0; }
.bottom-4   { bottom: 1rem; }
.bottom-6   { bottom: 1.5rem; }
.left-0     { left: 0; }
.left-0\.5  { left: 0.125rem; }
.left-1     { left: 0.25rem; }
.left-2     { left: 0.5rem; }
.left-3     { left: 0.75rem; }
.left-1\/2  { left: 50%; }

/* ─── Z-index ────────────────────────────────────────────────────────────── */
.z-10     { z-index: 10; }
.z-20     { z-index: 20; }
.z-30     { z-index: 30; }
.z-40     { z-index: 40; }
.z-50     { z-index: 50; }
.z-\[60\] { z-index: 60; }
.z-\[80\] { z-index: 80; }

/* ─── Overflow ───────────────────────────────────────────────────────────── */
.overflow-hidden   { overflow: hidden; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-y-auto   { overflow-y: auto; }
.overscroll-x-contain { overscroll-behavior-x: contain; }

/* ─── Flexbox ────────────────────────────────────────────────────────────── */
.flex-col     { flex-direction: column; }
.flex-row     { flex-direction: row; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-1       { flex: 1 1 0%; }
.flex-none    { flex: none; }
.flex-auto    { flex: 1 1 auto; }
.shrink-0     { flex-shrink: 0; }
.grow         { flex-grow: 1; }
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.self-start   { align-self: flex-start; }
.self-end     { align-self: flex-end; }
.self-center  { align-self: center; }
.self-stretch { align-self: stretch; }
.order-1 { order: 1; }
.order-2 { order: 2; }

/* ─── Grid ───────────────────────────────────────────────────────────────── */
.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.col-span-2   { grid-column: span 2 / span 2; }
.place-items-center { place-items: center; }

/* ─── Gap ────────────────────────────────────────────────────────────────── */
.gap-1    { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2    { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3    { gap: 0.75rem; }
.gap-3\.5 { gap: 0.875rem; }
.gap-4    { gap: 1rem; }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem; }
.gap-8    { gap: 2rem; }
.gap-12   { gap: 3rem; }
.gap-14   { gap: 3.5rem; }
.gap-x-3  { column-gap: 0.75rem; }
.gap-y-3  { row-gap: 0.75rem; }
.gap-x-4  { column-gap: 1rem; }
.gap-y-4  { row-gap: 1rem; }
.space-x-1 > * + * { margin-left: 0.25rem; }
.space-y-1   > * + * { margin-top: 0.25rem; }
.space-y-1\.5> * + * { margin-top: 0.375rem; }
.space-y-2   > * + * { margin-top: 0.5rem; }
.space-y-2\.5> * + * { margin-top: 0.625rem; }
.space-y-3   > * + * { margin-top: 0.75rem; }
.space-y-4   > * + * { margin-top: 1rem; }
.space-y-5   > * + * { margin-top: 1.25rem; }
.space-y-6   > * + * { margin-top: 1.5rem; }
.space-y-10  > * + * { margin-top: 2.5rem; }

/* ─── Width / Height ─────────────────────────────────────────────────────── */
.w-1\.5  { width: 0.375rem; }
.w-2     { width: 0.5rem; }
.w-2\.5  { width: 0.625rem; }
.w-3\.5  { width: 0.875rem; }
.w-4     { width: 1rem; }
.w-5     { width: 1.25rem; }
.w-6     { width: 1.5rem; }
.w-7     { width: 1.75rem; }
.w-8     { width: 2rem; }
.w-9     { width: 2.25rem; }
.w-10    { width: 2.5rem; }
.w-11    { width: 2.75rem; }
.w-12    { width: 3rem; }
.w-14    { width: 3.5rem; }
.w-16    { width: 4rem; }
.w-20    { width: 5rem; }
.w-24    { width: 6rem; }
.w-28    { width: 7rem; }
.w-36    { width: 9rem; }
.w-64    { width: 16rem; }
.w-72    { width: 18rem; }
.w-80    { width: 20rem; }
.w-full  { width: 100%; }
.w-fit   { width: fit-content; }
.w-auto  { width: auto; }
.w-\[300px\] { width: 300px; }
.w-\[438px\] { width: 438px; }
.w-\[32\%\]  { width: 32%; }

.h-2     { height: 0.5rem; }
.h-4     { height: 1rem; }
.h-5     { height: 1.25rem; }
.h-6     { height: 1.5rem; }
.h-7     { height: 1.75rem; }
.h-8     { height: 2rem; }
.h-9     { height: 2.25rem; }
.h-10    { height: 2.5rem; }
.h-11    { height: 2.75rem; }
.h-12    { height: 3rem; }
.h-14    { height: 3.5rem; }
.h-16    { height: 4rem; }
.h-20    { height: 5rem; }
.h-full  { height: 100%; }
.h-auto  { height: auto; }
.min-h-0       { min-height: 0; }
.min-h-screen  { min-height: 100vh; }
.min-h-\[100dvh\] { min-height: 100dvh; }
.min-w-0       { min-width: 0; }
.min-w-9       { min-width: 2.25rem; }
.min-w-\[140px\] { min-width: 140px; }
.min-w-\[160px\] { min-width: 160px; }
.min-w-\[180px\] { min-width: 180px; }
.min-w-\[200px\] { min-width: 200px; }
.max-w-sm  { max-width: 24rem; }
.max-w-md  { max-width: 28rem; }
.max-w-lg  { max-width: 32rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-xs  { max-width: 20rem; }
.max-w-full { max-width: 100%; }
.max-w-none { max-width: none; }
.max-w-\[140px\] { max-width: 140px; }
.max-w-\[335px\] { max-width: 335px; }
.max-w-\[85\%\]  { max-width: 85%; }
.max-w-\[88vw\]  { max-width: 88vw; }
.max-w-\[90\%\]  { max-width: 90%; }
.max-w-\[1440px\]{ max-width: 1440px; }
.max-h-36         { max-height: 9rem; }
.max-h-\[360px\]  { max-height: 360px; }
.max-h-\[80vh\]   { max-height: 80vh; }
.max-h-\[90vh\]   { max-height: 90vh; }

/* ─── Aspect Ratio ───────────────────────────────────────────────────────── */
.aspect-square { aspect-ratio: 1 / 1; }

/* ─── Margin ─────────────────────────────────────────────────────────────── */
.m-0    { margin: 0; }
.mx-2   { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-auto{ margin-left: auto; margin-right: auto; }
.my-6   { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mt-0   { margin-top: 0; }
.mt-0\.5{ margin-top: 0.125rem; }
.mt-1   { margin-top: 0.25rem; }
.mt-1\.5{ margin-top: 0.375rem; }
.mt-2   { margin-top: 0.5rem; }
.mt-3   { margin-top: 0.75rem; }
.mt-4   { margin-top: 1rem; }
.mt-5   { margin-top: 1.25rem; }
.mt-6   { margin-top: 1.5rem; }
.mt-8   { margin-top: 2rem; }
.mt-9   { margin-top: 2.25rem; }
.mt-10  { margin-top: 2.5rem; }
.mt-11  { margin-top: 2.75rem; }
.mt-12  { margin-top: 3rem; }
.mt-14  { margin-top: 3.5rem; }
.mb-1   { margin-bottom: 0.25rem; }
.mb-1\.5{ margin-bottom: 0.375rem; }
.mb-2   { margin-bottom: 0.5rem; }
.mb-2\.5{ margin-bottom: 0.625rem; }
.mb-3   { margin-bottom: 0.75rem; }
.mb-4   { margin-bottom: 1rem; }
.mb-5   { margin-bottom: 1.25rem; }
.mb-6   { margin-bottom: 1.5rem; }
.mb-7   { margin-bottom: 1.75rem; }
.mb-8   { margin-bottom: 2rem; }
.mb-9   { margin-bottom: 2.25rem; }
.mb-10  { margin-bottom: 2.5rem; }
.mb-12  { margin-bottom: 3rem; }
.ml-1   { margin-left: 0.25rem; }
.ml-auto{ margin-left: auto; }
.mr-1   { margin-right: 0.25rem; }
.mr-1\.5{ margin-right: 0.375rem; }
.pl-2   { padding-left: 0.5rem; }
.pl-3   { padding-left: 0.75rem; }
.pl-4   { padding-left: 1rem; }
.pl-6   { padding-left: 1.5rem; }
.pr-2   { padding-right: 0.5rem; }
.pr-10  { padding-right: 2.5rem; }
.pt-1   { padding-top: 0.25rem; }
.pt-2   { padding-top: 0.5rem; }
.pt-3   { padding-top: 0.75rem; }
.pt-4   { padding-top: 1rem; }
.pt-5   { padding-top: 1.25rem; }
.pt-8   { padding-top: 2rem; }
.pb-3   { padding-bottom: 0.75rem; }
.pb-6   { padding-bottom: 1.5rem; }
.pb-12  { padding-bottom: 3rem; }

/* ─── Padding ────────────────────────────────────────────────────────────── */
.p-1    { padding: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.p-2    { padding: 0.5rem; }
.p-3    { padding: 0.75rem; }
.p-3\.5 { padding: 0.875rem; }
.p-4    { padding: 1rem; }
.p-5    { padding: 1.25rem; }
.p-6    { padding: 1.5rem; }
.p-8    { padding: 2rem; }
.p-10   { padding: 2.5rem; }
.p-12   { padding: 3rem; }
.p-16   { padding: 4rem; }
.px-1   { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-1\.5{ padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2   { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5{ padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-3\.5{ padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4   { padding-left: 1rem; padding-right: 1rem; }
.px-5   { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6   { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8   { padding-left: 2rem; padding-right: 2rem; }
.py-0\.5{ padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1   { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5{ padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5{ padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4   { padding-top: 1rem; padding-bottom: 1rem; }
.py-5   { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6   { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8   { padding-top: 2rem; padding-bottom: 2rem; }
.py-10  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12  { padding-top: 3rem; padding-bottom: 3rem; }
.py-14  { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-16  { padding-top: 4rem; padding-bottom: 4rem; }
.py-20  { padding-top: 5rem; padding-bottom: 5rem; }

/* ─── Typography ─────────────────────────────────────────────────────────── */
.font-display  { font-family: 'Outfit', 'Mulish', sans-serif; }
.font-sans     { font-family: 'Mulish', ui-sans-serif, system-ui, sans-serif; }
.text-xs    { font-size: 0.75rem; line-height: 1rem; }
.text-sm    { font-size: 0.875rem; line-height: 1.25rem; }
.text-base  { font-size: 1rem; line-height: 1.5rem; }
.text-lg    { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl    { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl   { font-size: 1.5rem; line-height: 2rem; }
.text-3xl   { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl   { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl   { font-size: 3rem; line-height: 1; }
.text-\[10px\]  { font-size: 10px; }
.text-\[11px\]  { font-size: 11px; }
.text-\[13px\]  { font-size: 13px; }
.text-\[1\.95rem\]{ font-size: 1.95rem; }
.text-\[1\.9rem\] { font-size: 1.9rem; }
.text-\[2\.4rem\] { font-size: 2.4rem; }
.text-\[2\.75rem\]{ font-size: 2.75rem; }
.text-\[2\.85rem\]{ font-size: 2.85rem; }
.text-\[1\.22\]   { line-height: 1.22; }
.font-normal    { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black     { font-weight: 900; }
.italic         { font-style: italic; }
.antialiased    { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-\[1\.22\] { line-height: 1.22; }
.leading-\[1\.25\] { line-height: 1.25; }
.leading-\[20px\]  { line-height: 20px; }
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }
.tracking-\[0\.5em\] { letter-spacing: 0.5em; }
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.whitespace-nowrap   { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }
.underline           { text-decoration-line: underline; }
.underline-offset-4  { text-underline-offset: 4px; }
.tabular-nums        { font-variant-numeric: tabular-nums; }

/* ─── Colors — Text ──────────────────────────────────────────────────────── */
.text-white        { color: #fff; }
.text-ink          { color: var(--ink); }
.text-brand-500    { color: var(--brand-500); }
.text-brand-600    { color: var(--brand-600); }
.text-brand-700    { color: var(--brand-700); }
.text-brand-800    { color: var(--brand-800); }
.text-slate-300    { color: #cbd5e1; }
.text-slate-400    { color: #94a3b8; }
.text-slate-500    { color: #64748b; }
.text-slate-600    { color: #475569; }
.text-slate-700    { color: #334155; }
.text-slate-800    { color: #1e293b; }
.text-gray-300     { color: #d1d5db; }
.text-gray-400     { color: #9ca3af; }
.text-gray-500     { color: #6b7280; }
.text-gray-600     { color: #4b5563; }
.text-gray-700     { color: #374151; }
.text-gray-800     { color: #1f2937; }
.text-red-500      { color: #ef4444; }
.text-red-600      { color: #dc2626; }
.text-red-700      { color: #b91c1c; }
.text-green-700    { color: #15803d; }
.text-green-800    { color: #166534; }
.text-amber-300    { color: #fcd34d; }
.text-amber-400    { color: #fbbf24; }
.text-amber-500    { color: #f59e0b; }
.text-amber-600    { color: #d97706; }
.text-amber-700    { color: #b45309; }
.text-amber-800    { color: #92400e; }
.text-amber-900    { color: #78350f; }
.text-emerald-600  { color: #059669; }
.text-emerald-700  { color: #047857; }
.text-emerald-800  { color: #065f46; }
.text-rose-400     { color: #fb7185; }
.text-orange-600   { color: #ea580c; }
.text-yellow-400   { color: #facc15; }
.text-neutral-400  { color: #a3a3a3; }
.text-neutral-500  { color: #737373; }
.text-neutral-600  { color: #525252; }
.text-neutral-700  { color: #404040; }
.text-white\/70    { color: rgb(255 255 255 / 0.7); }
.text-white\/80    { color: rgb(255 255 255 / 0.8); }
.text-white\/85    { color: rgb(255 255 255 / 0.85); }
.text-white\/90    { color: rgb(255 255 255 / 0.9); }

/* ─── Colors — Background ────────────────────────────────────────────────── */
.bg-white        { background-color: #fff; }
.bg-black        { background-color: #000; }
.bg-transparent  { background-color: transparent; }
.bg-ink          { background-color: var(--ink); }
.bg-brand-50     { background-color: var(--brand-50); }
.bg-brand-500    { background-color: var(--brand-500); }
.bg-brand-600    { background-color: var(--brand-600); }
.bg-brand-700    { background-color: var(--brand-700); }
.bg-slate-100    { background-color: #f1f5f9; }
.bg-slate-200    { background-color: #e2e8f0; }
.bg-gray-50      { background-color: #f9fafb; }
.bg-gray-100     { background-color: #f3f4f6; }
.bg-gray-200     { background-color: #e5e7eb; }
.bg-red-50       { background-color: #fef2f2; }
.bg-amber-50     { background-color: #fffbeb; }
.bg-amber-100    { background-color: #fef3c7; }
.bg-emerald-600  { background-color: #059669; }
.bg-rose-500     { background-color: #f43f5e; }
.bg-white\/20    { background-color: rgb(255 255 255 / 0.2); }
.bg-white\/25    { background-color: rgb(255 255 255 / 0.25); }
.bg-ink\/50      { background-color: rgb(31 36 48 / 0.5); }
.bg-\[\#f3f4f6\] { background-color: #f3f4f6; }

/* ─── Gradient ───────────────────────────────────────────────────────────── */
.bg-gradient-to-r  { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-brand-400    { --tw-gradient-from: var(--brand-400); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-brand-500    { --tw-gradient-from: var(--brand-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-brand-600    { --tw-gradient-from: var(--brand-600); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-rose-600     { --tw-gradient-from: #e11d48; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-brand-800    { --tw-gradient-from: var(--brand-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-brand-600     { --tw-gradient-stops: var(--tw-gradient-from), var(--brand-600), var(--tw-gradient-to, transparent); }
.to-brand-400      { --tw-gradient-to: var(--brand-400); }
.to-brand-500      { --tw-gradient-to: var(--brand-500); }
.to-brand-800      { --tw-gradient-to: var(--brand-800); }
.to-transparent    { --tw-gradient-to: transparent; }
.to-white          { --tw-gradient-to: #fff; }

/* ─── Border ─────────────────────────────────────────────────────────────── */
.border        { border-width: 1px; }
.border-0      { border-width: 0; }
.border-2      { border-width: 2px; }
.border-4      { border-width: 4px; }
.border-b      { border-bottom-width: 1px; }
.border-t      { border-top-width: 1px; }
.border-l      { border-left-width: 1px; }
.border-l-4    { border-left-width: 4px; }
.border-y      { border-top-width: 1px; border-bottom-width: 1px; }
.border-slate-100  { border-color: #f1f5f9; }
.border-slate-200  { border-color: #e2e8f0; }
.border-gray-100   { border-color: #f3f4f6; }
.border-gray-200   { border-color: #e5e7eb; }
.border-gray-300   { border-color: #d1d5db; }
.border-brand-200  { border-color: var(--brand-200); }
.border-brand-300  { border-color: var(--brand-300); }
.border-brand-500  { border-color: var(--brand-500); }
.border-brand-600  { border-color: var(--brand-600); }
.border-red-200    { border-color: #fecaca; }
.border-amber-200  { border-color: #fde68a; }
.border-emerald-200{ border-color: #a7f3d0; }
.border-white      { border-color: #fff; }
.border-transparent{ border-color: transparent; }
.divide-y > * + *  { border-top-width: 1px; }
.divide-slate-100 > * + * { border-color: #f1f5f9; }
.divide-gray-100  > * + * { border-color: #f3f4f6; }

/* ─── Border Radius ──────────────────────────────────────────────────────── */
.rounded     { border-radius: 0.25rem; }
.rounded-sm  { border-radius: 0.125rem; }
.rounded-md  { border-radius: 0.375rem; }
.rounded-lg  { border-radius: 0.5rem; }
.rounded-xl  { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full{ border-radius: 9999px; }
.rounded-t   { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }
.rounded-t-lg{ border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
.rounded-t-2xl{ border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.rounded-b-2xl{ border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }
.rounded-bl-lg{ border-bottom-left-radius: 0.5rem; }
.rounded-br-lg{ border-bottom-right-radius: 0.5rem; }
.rounded-tl-lg{ border-top-left-radius: 0.5rem; }

/* ─── Ring ───────────────────────────────────────────────────────────────── */
.ring-1 { box-shadow: 0 0 0 1px; }
.ring-2 { box-shadow: 0 0 0 2px; }
.ring-slate-100 { --tw-ring-color: #f1f5f9; box-shadow: 0 0 0 1px #f1f5f9; }
.ring-slate-200 { --tw-ring-color: #e2e8f0; box-shadow: 0 0 0 1px #e2e8f0; }
.ring-brand-100 { box-shadow: 0 0 0 2px var(--brand-100); }

/* ─── Shadow ─────────────────────────────────────────────────────────────── */
.shadow     { box-shadow: 0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1); }
.shadow-sm  { box-shadow: 0 1px 2px 0 rgb(0 0 0/.05); }
.shadow-md  { box-shadow: 0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
.shadow-lg  { box-shadow: 0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0/.25); }
.shadow-soft{ box-shadow: 0 18px 44px -26px rgba(31,36,48,.4); }
.shadow-brand-600\/20 { box-shadow: 0 4px 12px 0 rgba(224,71,8,.2); }

/* ─── Opacity ────────────────────────────────────────────────────────────── */
.opacity-0   { opacity: 0; }
.opacity-30  { opacity: 0.3; }
.opacity-70  { opacity: 0.7; }
.opacity-75  { opacity: 0.75; }
.opacity-80  { opacity: 0.8; }
.opacity-85  { opacity: 0.85; }
.opacity-90  { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/* ─── Cursor / Pointer / Select ──────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-grab    { cursor: grab; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.select-none  { user-select: none; }
.touch-action-manipulation { touch-action: manipulation; }

/* ─── Transform / Transition / Animation ────────────────────────────────── */
.transform { transform: translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1)); }
.-translate-x-full      { --tw-translate-x: -100%; transform: translateX(-100%); }
.translate-x-full       { --tw-translate-x: 100%; transform: translateX(100%); }
.translate-y-0          { --tw-translate-y: 0; transform: translateY(0); }
.-translate-x-1\/2      { --tw-translate-x: -50%; transform: translateX(-50%); }
.transition             { transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.transition-all         { transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.transition-colors      { transition-property: color,background-color,border-color; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.transition-opacity     { transition-property: opacity; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.transition-transform   { transition-property: transform; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.duration-150  { transition-duration: 150ms; }
.duration-200  { transition-duration: 200ms; }
.duration-300  { transition-duration: 300ms; }

/* ─── Object fit ─────────────────────────────────────────────────────────── */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-top     { object-position: top; }

/* ─── Misc ───────────────────────────────────────────────────────────────── */
.scroll-smooth  { scroll-behavior: smooth; }
.scroll-mt-40   { scroll-margin-top: 10rem; }
.appearance-none { -webkit-appearance: none; appearance: none; }
.outline-none   { outline: 2px solid transparent; outline-offset: 2px; }
.resize-none    { resize: none; }
.list-disc      { list-style-type: disc; }
.list-decimal   { list-style-type: decimal; }
.list-inside    { list-style-position: inside; }
.table-fixed    { table-layout: fixed; }
.border-collapse{ border-collapse: collapse; }
.mix-blend-multiply  { mix-blend-mode: multiply; }
.mix-blend-darken    { mix-blend-mode: darken; }
.mix-blend-hard-light{ mix-blend-mode: hard-light; }
.backdrop-blur-sm    { backdrop-filter: blur(4px); }
.will-change-transform { will-change: transform; }
.peer { /* peer marker class */ }
.peer-checked\:bg-brand-600:is(:checked + .peer ~ *) { background-color: var(--brand-600); }
.peer-checked\:translate-x-5:is(:checked + .peer ~ *) { transform: translateX(1.25rem); }

/* ─── Disabled state ─────────────────────────────────────────────────────── */
.disabled\:opacity-50:disabled          { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled  { cursor: not-allowed; }

/* ─── Hover ──────────────────────────────────────────────────────────────── */
.hover\:bg-black:hover        { background-color: #000; }
.hover\:bg-brand-50:hover     { background-color: var(--brand-50); }
.hover\:bg-brand-500:hover    { background-color: var(--brand-500); }
.hover\:bg-brand-600:hover    { background-color: var(--brand-600); }
.hover\:bg-brand-700:hover    { background-color: var(--brand-700); }
.hover\:bg-gray-50:hover      { background-color: #f9fafb; }
.hover\:bg-gray-100:hover     { background-color: #f3f4f6; }
.hover\:bg-red-50:hover       { background-color: #fef2f2; }
.hover\:bg-slate-50:hover     { background-color: #f8fafc; }
.hover\:bg-white\/25:hover    { background-color: rgb(255 255 255 / 0.25); }
.hover\:text-brand-600:hover  { color: var(--brand-600); }
.hover\:text-brand-700:hover  { color: var(--brand-700); }
.hover\:text-brand-800:hover  { color: var(--brand-800); }
.hover\:text-ink:hover        { color: var(--ink); }
.hover\:text-red-500:hover    { color: #ef4444; }
.hover\:text-red-600:hover    { color: #dc2626; }
.hover\:text-red-700:hover    { color: #b91c1c; }
.hover\:text-white:hover      { color: #fff; }
.hover\:text-white\/80:hover  { color: rgb(255 255 255 / 0.8); }
.hover\:underline:hover       { text-decoration-line: underline; }
.hover\:shadow-md:hover       { box-shadow: 0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
.hover\:border-brand-200:hover{ border-color: var(--brand-200); }
.hover\:border-brand-300:hover{ border-color: var(--brand-300); }
.hover\:border-brand-600:hover{ border-color: var(--brand-600); }
.hover\:border-red-200:hover  { border-color: #fecaca; }
.hover\:-translate-y-0\.5:hover{ transform: translateY(-0.125rem); }

/* ─── Focus ──────────────────────────────────────────────────────────────── */
.focus\:outline-none:focus    { outline: none; }
.focus\:ring-2:focus          { box-shadow: 0 0 0 2px; }
.focus\:border-brand-500:focus{ border-color: var(--brand-500); }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .sm\:block        { display: block; }
  .sm\:inline       { display: inline; }
  .sm\:inline-flex  { display: inline-flex; }
  .sm\:flex         { display: flex; }
  .sm\:hidden       { display: none; }
  .sm\:flex-row     { flex-direction: row; }
  .sm\:flex-none    { flex: none; }
  .sm\:flex-wrap    { flex-wrap: wrap; }
  .sm\:items-center { align-items: center; }
  .sm\:items-end    { align-items: flex-end; }
  .sm\:items-start  { align-items: flex-start; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:self-center  { align-self: center; }
  .sm\:gap-2  { gap: 0.5rem; }
  .sm\:gap-3  { gap: 0.75rem; }
  .sm\:gap-4  { gap: 1rem; }
  .sm\:gap-5  { gap: 1.25rem; }
  .sm\:gap-6  { gap: 1.5rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sm\:grid-cols-\[1fr_1fr_auto\] { grid-template-columns: 1fr 1fr auto; }
  .sm\:col-span-1  { grid-column: span 1 / span 1; }
  .sm\:col-span-2  { grid-column: span 2 / span 2; }
  .sm\:col-span-3  { grid-column: span 3 / span 3; }
  .sm\:p-2   { padding: 0.5rem; }
  .sm\:p-2\.5{ padding: 0.625rem; }
  .sm\:p-4   { padding: 1rem; }
  .sm\:p-5   { padding: 1.25rem; }
  .sm\:p-6   { padding: 1.5rem; }
  .sm\:p-8   { padding: 2rem; }
  .sm\:p-12  { padding: 3rem; }
  .sm\:p-16  { padding: 4rem; }
  .sm\:pt-4  { padding-top: 1rem; }
  .sm\:px-2  { padding-left: 0.5rem; padding-right: 0.5rem; }
  .sm\:px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
  .sm\:px-4  { padding-left: 1rem; padding-right: 1rem; }
  .sm\:px-5  { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sm\:px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; }
  .sm\:py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .sm\:py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .sm\:py-4  { padding-top: 1rem; padding-bottom: 1rem; }
  .sm\:py-6  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .sm\:mt-3  { margin-top: 0.75rem; }
  .sm\:mt-4  { margin-top: 1rem; }
  .sm\:mt-6  { margin-top: 1.5rem; }
  .sm\:mt-11 { margin-top: 2.75rem; }
  .sm\:mb-2  { margin-bottom: 0.5rem; }
  .sm\:mb-4  { margin-bottom: 1rem; }
  .sm\:mb-10 { margin-bottom: 2.5rem; }
  .sm\:mb-11 { margin-bottom: 2.75rem; }
  .sm\:mb-12 { margin-bottom: 3rem; }
  .sm\:mb-14 { margin-bottom: 3.5rem; }
  .sm\:text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:text-base{ font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-xl  { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:text-xs  { font-size: 0.75rem; line-height: 1rem; }
  .sm\:text-\[11px\]  { font-size: 11px; }
  .sm\:text-\[2\.4rem\]{ font-size: 2.4rem; }
  .sm\:rounded-md { border-radius: 0.375rem; }
  .sm\:max-w-sm   { max-width: 24rem; }
  .sm\:min-w-\[200px\] { min-width: 200px; }
  .sm\:min-w-\[220px\] { min-width: 220px; }
  .sm\:w-7  { width: 1.75rem; }
  .sm\:w-72 { width: 18rem; }
  .sm\:w-auto { width: auto; }
  .sm\:h-7  { height: 1.75rem; }
  .sm\:h-16 { height: 4rem; }
  .sm\:space-y-6 > * + * { margin-top: 1.5rem; }
  .sm\:table-auto { table-layout: auto; }
}
@media (min-width: 768px) {
  .md\:block       { display: block; }
  .md\:flex        { display: flex; }
  .md\:inline      { display: inline; }
  .md\:hidden      { display: none; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:block        { display: block; }
  .lg\:flex         { display: flex; }
  .lg\:grid         { display: grid; }
  .lg\:inline       { display: inline; }
  .lg\:hidden       { display: none; }
  .lg\:flex-row     { flex-direction: row; }
  .lg\:items-start  { align-items: flex-start; }
  .lg\:justify-center{ justify-content: center; }
  .lg\:self-start   { align-self: flex-start; }
  .lg\:grow         { flex-grow: 1; }
  .lg\:shrink-0     { flex-shrink: 0; }
  .lg\:-ml-px       { margin-left: -1px; }
  .lg\:ml-0         { margin-left: 0; }
  .lg\:mt-0         { margin-top: 0; }
  .lg\:mt-10        { margin-top: 2.5rem; }
  .lg\:mb-0         { margin-bottom: 0; }
  .lg\:mb-6         { margin-bottom: 1.5rem; }
  .lg\:gap-6  { gap: 1.5rem; }
  .lg\:gap-8  { gap: 2rem; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-10{ grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .lg\:grid-cols-\[1fr_380px\]  { grid-template-columns: 1fr 380px; }
  .lg\:grid-cols-\[260px_1fr\]  { grid-template-columns: 260px 1fr; }
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
  .lg\:order-1     { order: 1; }
  .lg\:order-2     { order: 2; }
  .lg\:p-0   { padding: 0; }
  .lg\:p-6   { padding: 1.5rem; }
  .lg\:p-8   { padding: 2rem; }
  .lg\:p-20  { padding: 5rem; }
  .lg\:pb-10 { padding-bottom: 2.5rem; }
  .lg\:px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
  .lg\:px-8  { padding-left: 2rem; padding-right: 2rem; }
  .lg\:max-w-4xl { max-width: 56rem; }
  .lg\:w-\[270px\]  { width: 270px; }
  .lg\:w-\[438px\]  { width: 438px; }
  .lg\:h-20         { height: 5rem; }
  .lg\:text-5xl     { font-size: 3rem; line-height: 1; }
  .lg\:text-\[2\.75rem\]{ font-size: 2.75rem; }
  .lg\:top-0  { top: 0; }
  .lg\:top-4  { top: 1rem; }
  .lg\:top-8  { top: 2rem; }
  .lg\:static { position: static; }
  .lg\:sticky { position: sticky; }
  .lg\:z-auto { z-index: auto; }
  .lg\:translate-x-0  { transform: translateX(0); }
  .lg\:overflow-visible{ overflow: visible; }
  .lg\:shadow-none     { box-shadow: none; }
  .lg\:bg-transparent  { background-color: transparent; }
  .lg\:rounded-r-lg    { border-bottom-right-radius: 0.5rem; border-top-right-radius: 0.5rem; }
  .lg\:rounded-t-none  { border-top-left-radius: 0; border-top-right-radius: 0; }
  .lg\:rounded-tl-lg   { border-top-left-radius: 0.5rem; }
  .lg\:rounded-br-none { border-bottom-right-radius: 0; }
  .lg\:aspect-auto     { aspect-ratio: auto; }
  .lg\:mb-0  { margin-bottom: 0; }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-safe\:starting\:-translate-x-\[102px\] { transform: none; }
  .motion-safe\:starting\:-translate-x-\[26px\]  { transform: none; }
  .motion-safe\:starting\:-translate-x-\[51px\]  { transform: none; }
  .motion-safe\:starting\:-translate-x-\[78px\]  { transform: none; }
  .motion-safe\:starting\:translate-y-6           { transform: none; }
}