/* ========== THEME VARS ========== */
/* LIGHT (fresh, deserty) — default */
:root{
  --bg:#f7f1e4;          /* warm sand */
  --card:#ffffff;        /* porcelain card */
  --panel:#fffdf8;       /* soft parchment */
  --text:#111827;        /* slate-900 for stronger contrast */
  --muted:#475569;       /* slate-600: better contrast */
  --accent:#d97706;      /* amber (desert sun) */
  --accent-2:#0ea5a8;    /* oasis teal */
  --ok:#16a34a;          /* green */
  --border: rgba(0,0,0,.14);
  --ring: 0 0 0 3px rgba(217,119,6,.30);
  --shadow: 0 18px 40px rgba(0,0,0,.12);

  /* Cart (light) – stronger contrast */
  --cart-bg:#ffffff;
  --cart-border: rgba(0,0,0,.18);
  --cart-chip: color-mix(in oklab, var(--panel) 85%, transparent);
}

/* DARK (amethyst night) — higher contrast */
html[data-theme="dark"]{
  --bg:#0b071a;
  --card:#130b2a;
  --panel:#0e0a20;
  --text:#fcfcff;            /* near-white */
  --muted:#dcd7fa;           /* brighter muted */
  --accent:#7c3aed;          /* amethyst */
  --accent-2:#60a5fa;        /* ocean */
  --ok:#22c55e;
  --border: rgba(255,255,255,.20);
  --ring: 0 0 0 3px rgba(124,58,237,.55);
  --shadow: 0 18px 50px rgba(0,0,0,.65);

  /* Cart (dark) */
  --cart-bg:#110a22;
  --cart-border: rgba(255,255,255,.22);
  --cart-chip: color-mix(in oklab, var(--panel) 92%, transparent);
}

/* ========== BASE / LAYOUT (mobile-safe) ========== */
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; overflow-x:hidden; /* prevent horizontal scroll */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% -10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(1200px 700px at 85% 110%, color-mix(in oklab, var(--accent-2) 18%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed, fixed, fixed;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}
a{color:inherit}
button,input{font:inherit; -webkit-appearance:none; appearance:none;}

/* Header */
header{
  position:sticky; top:0; z-index:5;
  backdrop-filter: saturate(140%) blur(8px);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--panel) 92%, transparent), color-mix(in oklab, var(--panel) 70%, transparent));
  border-bottom: 1px solid var(--border);
}
.container{max-width:1100px;margin:0 auto;padding:1rem 1rem;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.75rem;}
.logo{
  width:36px;height:36px;border-radius:9px;
  box-shadow: 0 6px 20px color-mix(in oklab, var(--accent) 45%, transparent);
  object-fit: cover; display:block;
}
.title{font-weight:800;letter-spacing:.2px}
.muted{color:var(--muted);font-size:.95rem}
.hero-sub{margin:.25rem 0 0; font-size:1rem}

/* Actions */
.actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  background:linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 85%, black));
  color:white;padding:.6rem .9rem;border-radius:999px;border:0;cursor:pointer;
  box-shadow: 0 10px 28px color-mix(in oklab, var(--accent) 45%, transparent);
  transition: transform .06s ease;
}
html[data-theme="dark"] .btn{ color:#fff; }
.btn:active{transform: translateY(1px)}
.btn.secondary{ background: var(--panel); color:var(--text); box-shadow:none; border:1px solid var(--border); }
.btn.icon{padding:.55rem .7rem}

/* Search (prevent iPhone zoom on focus) */
.search{
  display:flex;gap:.5rem;align-items:center;background:var(--panel);border:1px solid var(--border);
  padding:.45rem .7rem;border-radius:999px;flex:1;min-width:200px;max-width:520px
}
.search input{
  flex:1;background:transparent;border:0;outline:none;color:var(--text);
  font-size:16px;
}
@media (max-width:520px){ .search{display:none;} }

/* Icon-only theme toggle — high contrast in both themes */
.icon-toggle{
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:999px;border:1px solid color-mix(in oklab, var(--accent) 70%, var(--border));
  background: color-mix(in oklab, var(--accent) 22%, var(--panel));
  cursor:pointer; color:#1f2937;
}
.icon-toggle svg{fill:currentColor;stroke:currentColor}
.icon-toggle .sun{display:inline}
.icon-toggle .moon{display:none}
html[data-theme="dark"] .icon-toggle{
  color:#ffffff;
  border-color: color-mix(in oklab, var(--accent) 90%, var(--border));
  background: color-mix(in oklab, var(--accent) 38%, var(--panel));
}
html[data-theme="dark"] .icon-toggle .sun{display:none}
html[data-theme="dark"] .icon-toggle .moon{display:inline}

/* Chips — stronger in dark */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 1.25rem}
.chip{
  padding:.38rem .75rem; border-radius:999px; cursor:pointer; font-size:.9rem;
  background:var(--panel); border:1px solid var(--border); color:var(--text);
}
.chip.active{
  background:color-mix(in oklab, var(--accent) 22%, var(--panel));
  border-color: color-mix(in oklab, var(--accent) 65%, var(--border));
}
html[data-theme="dark"] .chip{
  background: color-mix(in oklab, var(--panel) 92%, black);
  border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
  color: var(--text);
}
html[data-theme="dark"] .chip.active{
  background: color-mix(in oklab, var(--accent) 36%, var(--panel));
  border-color: color-mix(in oklab, var(--accent) 85%, var(--border));
}

/* Grid / Cards — 1/2/3 columns */
main{padding:2rem 1rem}
.grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width:720px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1040px){ .grid{ grid-template-columns: repeat(3, 1fr); } }

/* Cards */
.card{
  background:linear-gradient(180deg, color-mix(in oklab, white 3%, transparent), color-mix(in oklab, white 1.5%, transparent)), var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
  max-width:none; width:100%;
}
.thumb{
  aspect-ratio: 1 / 1;
  background:color-mix(in oklab, var(--panel) 86%, transparent);
  position:relative; overflow:hidden; display:grid; place-items:center;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb svg{ width:60%; height:auto; }

.badge{
  position:absolute; top:.6rem; left:.6rem;
  background: color-mix(in oklab, var(--accent) 78%, white);
  padding:.25rem .6rem; border-radius:999px; font-size:.75rem; color:#111827; font-weight:700;
  border:1px solid rgba(0,0,0,.1);
}
html[data-theme="dark"] .badge{
  background: color-mix(in oklab, var(--accent) 92%, black);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.22);
}

.content{padding:0.9rem 0.95rem 1rem; display:flex; flex-direction:column; gap:.45rem}
.name{font-weight:800; font-size:1rem}
.notes{color:var(--muted); font-size:.92rem; min-height:2.2em}
.price{font-weight:800; margin-top:.1rem; font-size:1rem}

/* CTA column: quantity on top (smaller), Add to cart below (full width) */
.cta-col{display:flex; flex-direction:column; gap:.5rem; margin-top:.6rem}
.qty{
  display:flex; align-items:center; justify-content:center; gap:.25rem;
  background:var(--panel); border:1px solid var(--border); padding:.28rem .4rem; border-radius:9px;
  font-size:.95rem;
}
.qty button{
  background:transparent;color:var(--text);border:0; cursor:pointer; font-size:1rem; line-height:1; width:1.6rem; height:1.6rem;
}
.qty .dec, .qty .inc{font-weight:700}
.qty input{
  width:2.2rem; text-align:center; background:transparent; border:0; color:var(--text); outline:none;
  font-size:.95rem;
}
.card .btn.add{width:100%; justify-content:center}

/* Drawer (cart) – higher contrast in light, crisp in dark; mobile-safe scroll */
.drawer{
  position:fixed; inset:0 0 0 auto; width:360px; max-width:95vw;
  transform: translateX(110%); transition: transform .25s ease;
  background: var(--cart-bg);
  border-left:1px solid var(--cart-border);
  box-shadow: -24px 0 60px rgba(0,0,0,.45);
  z-index:20; display:flex; flex-direction:column;
  color: var(--text);
}
.drawer.open{ transform: translateX(0) }
.drawer header{ position:static; background:transparent; border:0 }
.drawer .items{
  padding:1rem; display:flex; flex-direction:column; gap:.75rem;
  overflow:auto; min-height:0; -webkit-overflow-scrolling: touch;
}
.line{
  display:grid; grid-template-columns: 1fr auto; gap:.5rem;
  background: var(--panel);
  border:1px solid var(--cart-border);
  border-radius:12px; padding:.7rem;
}
.line .meta{display:flex; flex-direction:column; gap:.2rem}
.line .qty-controls{display:flex; align-items:center; gap:.35rem; justify-self:end}
.line .qty-controls button,.line .remove{
  background: var(--cart-chip);
  border:1px solid var(--cart-border);
  padding:.2rem .5rem; border-radius:7px; color:var(--text); cursor:pointer
}
.drawer .summary{
  border-top:1px solid var(--cart-border);
  padding:1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:.6rem; background:var(--panel)
}
.row{display:flex; justify-content:space-between}
.total{font-weight:800; font-size:1.05rem}
.empty{padding:2rem; text-align:center; color:var(--muted)}
.note{font-size:.85rem}

/* Focus ring */
.btn:focus-visible, .chip:focus-visible, .qty button:focus-visible, .qty input:focus-visible,
.line .remove:focus-visible, .line .qty-controls button:focus-visible, .icon-toggle:focus-visible {
  outline:none; box-shadow: var(--ring);
}

/* Footer — two lines */
footer{padding:2rem 1rem 3rem; color:var(--muted); text-align:center}
footer .slogan{display:inline-block; margin-top:.35rem}