:root{
  --bg: #ffffff;
  --text: #0f0f0f;
  --muted: #6b6b6b;
  --line: #e9e9e9;
  --primary: #8A6B3D; /* warm gold-brown */
  --primary-ink: #ffffff;
  --radius: 12px;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; background:var(--bg); color:var(--text); font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif; }

.site-header{
  position: sticky; top: 0; z-index: 20;
  display:flex; align-items:center; gap:24px; padding:16px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88));
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; flex-direction:column; }
.brand-mark{ font-size:22px; letter-spacing:0.5px; font-weight:600; font-family: Georgia, "Times New Roman", Times, serif; }
.brand-sub{ font-size:12px; color:var(--muted); }
.search{ flex:1; display:flex; justify-content:flex-end; }
.search input{ width: min(560px, 100%); padding:10px 12px; border:1px solid var(--line); border-radius:999px; outline:none; }
.search input:focus{ border-color:#d3d3d3; }

.container{ padding: 12px 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); max-width: 1200px; margin: 0 auto; }
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 45vw, 240px), 1fr)); gap:12px; }

.card{ border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.card-media{ aspect-ratio: 4 / 3; background:#fafafa; display:block; overflow:hidden; cursor:pointer; }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-fallback{ display:none; }
.card-body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.card-title{ font-weight:600; min-height: 2.9em; }
.card-meta{ color:var(--muted); font-size: 13px; }
.card-actions{ display:flex; gap:8px; }

.btn{ padding:10px 12px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-weight:600; }
.btn-primary{ background:var(--primary); color:var(--primary-ink); }
.btn-primary:hover{ filter: brightness(0.96); }
.btn-secondary{ background:#f4f4f4; color:#222; border-color:#eaeaea; }
.btn-secondary:hover{ background:#efefef; }
.btn-ghost{ background:transparent; border:1px solid var(--line); }

.state{ padding:40px; text-align:center; color:var(--muted); }
.state.error{ color:#a33; }

.basket-bar{ position: sticky; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(255,255,255,0.98); border-top:1px solid var(--line); }
.basket-bar.hidden{ display:none; }
.basket-info{ font-weight:600; }
.basket-actions{ display:flex; gap:8px; }

.modal{ position:fixed; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:flex-end; justify-content:center; padding:16px; }
.modal.hidden{ display:none; }
.modal-panel{ width:min(720px, 100%); max-height: 92vh; background:#fff; border-radius: 14px; overflow:auto; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.modal-header{ position:sticky; top:0; display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:#fff; }
.modal-title{ font-weight:700; }
.spacer{ flex:1; }

.gallery{ padding:12px; }
.gallery-main{ width:100%; border-radius: 12px; }
.thumbs{ display:flex; gap:8px; overflow:auto; padding-top:8px; }
.thumb{ border:1px solid var(--line); border-radius:10px; background:#fff; padding:0; cursor:pointer; }
.thumb img{ width:76px; height:60px; object-fit:cover; display:block; border-radius: 9px; }
.thumb.active{ outline:2px solid var(--primary); }

.cart-list{ padding:12px; display:flex; flex-direction:column; gap:10px; }
.cart-row{ display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding-bottom:10px; }
.cart-thumb{ width:64px; height:48px; object-fit:cover; border-radius:8px; }
.cart-name{ flex:1; font-weight:600; }
.cart-controls{ display:flex; align-items:center; gap:10px; }
.cart-qty{ min-width: 24px; text-align:center; }

/* Category chips */
.chips{ position: sticky; top: 62px; z-index: 10; display:flex; gap:8px; overflow:auto; padding:8px 0; background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92)); border-bottom:1px solid var(--line); }
.chip{ white-space:nowrap; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:600; font-size:13px; }
.chip.active{ background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

@media (min-width: 900px){
  .modal{ align-items:center; }
}

@media (max-width: 520px){
  .site-header{ gap:12px; padding:12px 14px; }
  .brand-mark{ font-size:19px; }
  .search input{ padding:8px 12px; }
}