:root{--color-paper: oklch(98% .01 90);--color-paper-2: oklch(100% 0 0);--color-paper-3: oklch(95% .015 90);--color-ink: oklch(24% .03 260);--color-ink-soft: oklch(48% .02 260);--color-border: oklch(90% .01 90);--color-accent: oklch(38% .11 250);--color-accent-soft: oklch(94% .03 250);--color-accent-ink: oklch(98% .01 250);--color-highlight: oklch(74% .16 45);--color-highlight-ink: oklch(20% .02 45);--color-danger: oklch(55% .18 25);--color-success: oklch(62% .14 150);--color-focus: oklch(60% .15 250);--font-display: "Plus Jakarta Sans", ui-rounded, "Segoe UI", sans-serif;--font-body: "Inter", ui-sans-serif, system-ui, sans-serif;--text-4xl: clamp(2rem, 1.6rem + 2vw, 3rem);--text-2xl: clamp(1.35rem, 1.2rem + .8vw, 1.75rem);--text-lg: 1.125rem;--text-base: 1rem;--text-sm: .875rem;--text-xs: .75rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 10px;--radius-md: 16px;--radius-lg: 24px;--radius-pill: 999px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.7, 0, .84, 0);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-fast: .12s;--dur-base: .2s;--shadow-sm: 0 1px 2px oklch(24% .03 260 / .06);--shadow-md: 0 8px 24px oklch(24% .03 260 / .1);--shadow-lg: 0 16px 40px oklch(24% .03 260 / .16)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--color-paper: oklch(20% .02 260);--color-paper-2: oklch(24% .02 260);--color-paper-3: oklch(28% .02 260);--color-ink: oklch(95% .01 90);--color-ink-soft: oklch(75% .02 260);--color-border: oklch(32% .02 260);--color-accent: oklch(72% .1 250);--color-accent-soft: oklch(30% .05 250);--color-accent-ink: oklch(14% .02 250);--color-highlight: oklch(78% .15 45);--color-highlight-ink: oklch(18% .02 45)}}:root[data-theme=dark]{--color-paper: oklch(20% .02 260);--color-paper-2: oklch(24% .02 260);--color-paper-3: oklch(28% .02 260);--color-ink: oklch(95% .01 90);--color-ink-soft: oklch(75% .02 260);--color-border: oklch(32% .02 260);--color-accent: oklch(72% .1 250);--color-accent-soft: oklch(30% .05 250);--color-accent-ink: oklch(14% .02 250);--color-highlight: oklch(78% .15 45);--color-highlight-ink: oklch(18% .02 45)}*{box-sizing:border-box}html,body{overflow-x:clip}body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:var(--font-display);font-style:normal;font-weight:700;margin:0}a{color:inherit}button{font-family:inherit;cursor:pointer}img{max-width:100%;display:block}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.nav{position:sticky;top:var(--space-3);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:var(--space-3) auto 0;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-5);max-width:1100px;width:calc(100% - var(--space-6));background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-md)}.nav__brand{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg)}.nav__brand span{color:var(--color-accent)}.nav__cart{display:flex;align-items:center;gap:var(--space-2);background:var(--color-accent);color:var(--color-accent-ink);border:none;border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);font-weight:600;font-size:var(--text-sm);transition:transform var(--dur-fast) var(--ease-out)}.nav__cart:hover{transform:translateY(-1px)}.nav__cart:active{transform:translateY(0)}.nav__cart-count{background:var(--color-highlight);color:var(--color-highlight-ink);border-radius:var(--radius-pill);min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:800;padding:0 5px}.hero{max-width:1100px;margin:var(--space-10) auto var(--space-8);padding:0 var(--space-6);text-align:center}.hero h1{font-size:var(--text-4xl);letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0}.hero p{color:var(--color-ink-soft);font-size:var(--text-lg);margin-top:var(--space-3)}.chips{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;margin:var(--space-6) auto;max-width:1100px;padding:0 var(--space-6)}.chip{border:1px solid var(--color-border);background:var(--color-paper-2);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:600;color:var(--color-ink-soft);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.chip:hover{border-color:var(--color-accent)}.chip.is-active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}.grid{max-width:1100px;margin:0 auto;padding:0 var(--space-6) var(--space-16);display:grid;gap:var(--space-5);grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width: 900px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width: 640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}}.card{background:var(--color-paper-2);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;text-align:left;display:flex;flex-direction:column;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.card__img-wrap{position:relative;aspect-ratio:1;background:var(--color-paper-3)}.card__img-wrap img{width:100%;height:100%;object-fit:cover}.card__badge{position:absolute;top:var(--space-2);left:var(--space-2);background:var(--color-highlight);color:var(--color-highlight-ink);font-size:var(--text-xs);font-weight:800;padding:3px var(--space-2);border-radius:var(--radius-pill)}.card__body{padding:var(--space-3) var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);flex:1}.card__brand{font-size:var(--text-xs);color:var(--color-accent);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.card__name{font-size:var(--text-sm);font-weight:600;line-height:1.3}.card__price-row{margin-top:auto;display:flex;align-items:baseline;gap:var(--space-2);padding-top:var(--space-2)}.card__price{font-weight:800;font-size:var(--text-base)}.card__price--old{font-size:var(--text-xs);color:var(--color-ink-soft);text-decoration:line-through}.empty-state{text-align:center;color:var(--color-ink-soft);padding:var(--space-16) var(--space-4)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#11161f80;display:flex;align-items:flex-end;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out)}.overlay.is-open{opacity:1;pointer-events:auto}@media (min-width: 768px){.overlay{align-items:center}}.sheet{background:var(--color-paper);width:100%;max-width:720px;max-height:92vh;overflow-y:auto;border-radius:var(--radius-lg) var(--radius-lg) 0 0;transform:translateY(24px);transition:transform var(--dur-base) var(--ease-out)}.overlay.is-open .sheet{transform:translateY(0)}@media (min-width: 768px){.sheet{border-radius:var(--radius-lg)}}.sheet__header{display:flex;justify-content:flex-end;padding:var(--space-3);position:sticky;top:0;background:var(--color-paper);z-index:1}.sheet__close{width:32px;height:32px;border-radius:var(--radius-pill);border:1px solid var(--color-border);background:var(--color-paper-2);font-size:var(--text-lg);line-height:1}.sheet__body{padding:0 var(--space-6) var(--space-8);display:grid;gap:var(--space-6);grid-template-columns:1fr}@media (min-width: 640px){.sheet__body{grid-template-columns:1fr 1fr}}.sheet__img{border-radius:var(--radius-md);overflow:hidden;aspect-ratio:1;background:var(--color-paper-3)}.sheet__img img{width:100%;height:100%;object-fit:cover}.sheet__brand{color:var(--color-accent);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.04em}.sheet__name{font-size:var(--text-2xl);margin-top:var(--space-1);overflow-wrap:anywhere}.sheet__price{font-size:var(--text-2xl);font-weight:800;margin-top:var(--space-3)}.sheet__price--old{font-size:var(--text-base);font-weight:500;color:var(--color-ink-soft);text-decoration:line-through;margin-left:var(--space-2)}.attr-group{margin-top:var(--space-5)}.attr-group__label{font-size:var(--text-xs);font-weight:700;color:var(--color-ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--space-2)}.attr-options{display:flex;gap:var(--space-2);flex-wrap:wrap}.attr-option{border:1.5px solid var(--color-border);background:var(--color-paper-2);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:600;min-width:44px;text-align:center;transition:border-color var(--dur-fast) var(--ease-out)}.attr-option:hover{border-color:var(--color-accent)}.attr-option.is-selected{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent)}.attr-option:disabled{opacity:.35;cursor:not-allowed}.stock-note{margin-top:var(--space-3);font-size:var(--text-sm)}.stock-note.in{color:var(--color-success)}.stock-note.out{color:var(--color-danger)}.qty-row{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5)}.qty-btn{width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-paper-2);font-size:var(--text-lg)}.qty-val{min-width:24px;text-align:center;font-weight:700}.btn-add{margin-top:var(--space-6);width:100%;padding:var(--space-4);background:var(--color-accent);color:var(--color-accent-ink);border:none;border-radius:var(--radius-md);font-weight:700;font-size:var(--text-base);transition:transform var(--dur-fast) var(--ease-out)}.btn-add:hover{transform:translateY(-1px)}.btn-add:disabled{opacity:.5;cursor:not-allowed;transform:none}.drawer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:110;display:flex;justify-content:flex-end;background:#11161f80;opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out)}.drawer.is-open{opacity:1;pointer-events:auto}.drawer__panel{width:min(420px,100%);height:100%;background:var(--color-paper);display:flex;flex-direction:column;transform:translate(24px);transition:transform var(--dur-base) var(--ease-out)}.drawer.is-open .drawer__panel{transform:translate(0)}.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-5) var(--space-3);border-bottom:1px solid var(--color-border)}.drawer__items{flex:1;overflow-y:auto;padding:var(--space-4) var(--space-5)}.cart-item{display:flex;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border)}.cart-item img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-sm);background:var(--color-paper-3)}.cart-item__info{flex:1;min-width:0}.cart-item__name{font-size:var(--text-sm);font-weight:600}.cart-item__attrs{font-size:var(--text-xs);color:var(--color-ink-soft)}.cart-item__remove{font-size:var(--text-xs);color:var(--color-danger);margin-top:var(--space-1)}.drawer__footer{padding:var(--space-5);border-top:1px solid var(--color-border)}.drawer__total{display:flex;justify-content:space-between;font-weight:800;font-size:var(--text-lg);margin-bottom:var(--space-4)}.field{margin-bottom:var(--space-3)}.field label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--color-ink-soft);margin-bottom:var(--space-1)}.field input,.field textarea{width:100%;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font:inherit;background:var(--color-paper-2);color:var(--color-ink)}.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-accent)}.order-success{text-align:center;padding:var(--space-8) var(--space-5)}.order-success__code{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-accent);margin:var(--space-3) 0}.footer{text-align:center;padding:var(--space-10) var(--space-4);color:var(--color-ink-soft);font-size:var(--text-sm)}