:root {
color-scheme: light;
--font-sans: "Montserrat", system-ui, sans-serif;
--color-surface: light-dark(oklch(100% 0 0), oklch(24% 0.02 260));
--color-page: oklch(96.7% 0.003 264.5);
--color-text-muted: oklch(45% 0.03 260);
--color-border: oklch(91% 0.01 260);
--color-brand: oklch(62% 0.18 145);
--shadow-soft: 0 14px 35px oklch(20% 0.04 260 / 18%);
--shadow-lift: 0 24px 60px oklch(20% 0.04 260 / 24%);
--radius-sm: 10px;
--radius-md: 14px;
--space-page: clamp(12px, 3vw, 24px);
}

/* Base */
body {
font-family:var(--font-sans);
background:#fff;
color:oklch(27% 0.02 260);
}

html.modal-open,
body.modal-open {
overflow:hidden;
overscroll-behavior:none;
touch-action:none;
}

/* Menu and images */
.menu-item {
--menu-item-delay:0ms;
--menu-item-final-opacity:1;
opacity:var(--menu-item-final-opacity);
contain:layout paint;
border-radius:0;
box-shadow:none;
}

.menu-item.opacity-70 {
--menu-item-final-opacity:0.7;
}

.menu-item.is-entering {
opacity:0;
transform:translateY(20px);
animation:fadeUp 0.4s ease var(--menu-item-delay) forwards;
}

.img-box {
position:relative;
}

#menu {
align-items:start;
}

.menu-image {
transition:opacity 0.2s ease;
}

.menu-image.is-loaded {
opacity:1;
}

.image-spinner {
position:absolute;
top:50%;
left:50%;
width:32px;
height:32px;
border:3px solid oklch(0% 0 0 / 12%);
border-top-color:oklch(21% 0.03 265);
border-radius:50%;
transform:translate(-50%, -50%);
animation:imageSpin 0.8s linear infinite;
z-index:1;
will-change:transform;
}

.image-spinner-sm {
width:18px;
height:18px;
border-width:2px;
}

/* Toast */
.toast-container {
position:fixed;
top:16px;
left:16px;
right:16px;
display:flex;
flex-direction:column;
gap:10px;
align-items:center;
z-index:9999;
pointer-events:none;
}

.toast {
max-width:420px;
width:min(100%, 420px);
padding:12px 14px;
border-radius:12px;
box-shadow:var(--shadow-soft);
font-size:14px;
font-weight:600;
line-height:1.35;
opacity:0;
transform:translateY(-12px);
transition:opacity 0.25s ease, transform 0.25s ease;
pointer-events:auto;
will-change:opacity, transform;
}

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

.toast-error {
background:oklch(92% 0.06 25);
color:oklch(37% 0.14 29);
border:1px solid oklch(84% 0.08 25);
}

.toast-success {
background:oklch(94% 0.08 145);
color:oklch(35% 0.11 145);
border:1px solid oklch(84% 0.1 145);
}

/* Admin DataTables */
.dt-container {
font-family:var(--font-sans);
}

.dt-container .dt-layout-row {
padding:14px 16px;
margin:0;
gap:12px;
}

.dt-container .dt-search input,
.dt-container .dt-length select {
border:1px solid oklch(87% 0.01 260);
border-radius:8px;
padding:6px 10px;
font-size:14px;
outline:none;
}

.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
border-color:oklch(55% 0.18 255);
box-shadow:0 0 0 3px oklch(75% 0.12 255 / 22%);
}

.dt-container .dt-paging .dt-paging-button {
border-radius:8px;
font-size:14px;
}

/* Cart page */
.cart-page {
background:#fff;
}

.cart-page-top {
box-shadow:0 1px 0 oklch(20% 0.04 260 / 6%);
}

.cart-page-list,
.cart-product-card {
min-width:0;
}

.cart-list-item {
min-width:0;
border-bottom:1px solid var(--color-border);
contain:layout paint;
}

.cart-list-item.is-leaving {
pointer-events:none;
animation:cartItemOut 0.28s ease forwards;
}

.cart-list-item:last-child {
border-bottom:0;
}

.cart-list-counter {
min-width:104px;
}

.cart-product-card button,
.cart-list-item button,
.cart-page-bottom a {
touch-action:manipulation;
}

.cart-page-bottom {
box-shadow:0 -10px 28px oklch(20% 0.04 260 / 10%);
padding-bottom:calc(12px + env(safe-area-inset-bottom));
}

/* Cart tutorial */
.cart-tour-overlay {
position:fixed;
inset:0;
background:oklch(20% 0.04 260 / 56%);
z-index:60;
}

.cart-tour-popover {
position:fixed;
left:0;
top:0;
width:min(320px, calc(100vw - 32px));
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-md);
box-shadow:var(--shadow-lift);
padding:16px;
z-index:62;
transition:transform 0.18s ease, opacity 0.18s ease;
will-change:transform;
}

.cart-tour-step {
font-size:12px;
font-weight:700;
color:var(--color-brand);
margin-bottom:8px;
}

.cart-tour-title {
font-size:16px;
font-weight:800;
line-height:1.25;
margin:0 0 8px;
}

.cart-tour-text {
font-size:14px;
line-height:1.45;
color:var(--color-text-muted);
margin:0;
}

.cart-tour-actions {
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-top:14px;
}

.cart-tour-skip,
.cart-tour-next {
height:38px;
border-radius:var(--radius-sm);
font-weight:700;
padding:0 14px;
touch-action:manipulation;
}

.cart-tour-skip {
background:var(--color-page);
color:oklch(32% 0.03 260);
}

.cart-tour-next {
background:var(--color-brand);
color:#fff;
}

.cart-tour-target {
position:relative;
z-index:61;
box-shadow:0 0 0 4px oklch(72% 0.18 145 / 45%), 0 18px 45px oklch(20% 0.04 260 / 22%);
border-radius:16px;
}

.cart-tour-parent {
z-index:61;
}

/* Modal animations */
.modal-overlay {
animation:fadeIn 0.3s ease-out;
}

.modal-overlay.hidden {
animation:fadeOut 0.3s ease-out forwards;
pointer-events:none;
}

.modal-content {
animation:slideUp 0.3s ease-out;
}

.modal-overlay.hidden .modal-content {
animation:slideDown 0.3s ease-out forwards;
}

@keyframes fadeUp {
to {
opacity:var(--menu-item-final-opacity);
transform:translateY(0);
}
}

@keyframes cartItemOut {
to {
opacity:0;
transform:translateX(18px) scale(0.98);
}
}

@keyframes imageSpin {
to {
transform:translate(-50%, -50%) rotate(360deg);
}
}

@keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}

@keyframes fadeOut {
from {
opacity:1;
}
to {
opacity:0;
}
}

@keyframes slideUp {
from {
transform:translateY(20px);
opacity:0;
}
to {
transform:translateY(0);
opacity:1;
}
}

@keyframes slideDown {
from {
transform:translateY(0);
opacity:1;
}
to {
transform:translateY(20px);
opacity:0;
}
}