/* storefront — its own look (the back office keeps dml's style.css) */
:root { --bg:#faf8f5; --card:#fff; --line:#e7e2da; --fg:#1f1d1a; --dim:#77706a; --acc:#1d4e89; --acc-fg:#fff;
  --ok:#2f7a3d; --warn:#a15c00; --err:#b42318; --ph:#ece6dd }
@media (prefers-color-scheme: dark) {
  :root { --bg:#151412; --card:#1e1c19; --line:#34302b; --fg:#ece8e2; --dim:#9c958c; --acc:#7fb0ef; --acc-fg:#10161f;
    --ok:#7ccb8a; --warn:#f0b35a; --err:#ff8a7a; --ph:#2a2723 }
}
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif }
a { color:var(--acc); text-decoration:none } a:hover { text-decoration:underline }
.dim { color:var(--dim) } .small { font-size:.85rem } .err { color:var(--err) }
input,textarea,button { font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.55rem .7rem }
button { cursor:pointer } button:disabled { opacity:.45; cursor:not-allowed }
button.pri, .btn.pri { background:var(--acc); color:var(--acc-fg); border-color:var(--acc); font-weight:600 }
button.link { background:none; border:0; color:var(--dim); padding:.2rem; text-decoration:underline }
.btn { display:inline-block; padding:.6rem 1.1rem; border:1px solid var(--line); border-radius:8px; background:var(--card) }
.btn:hover { text-decoration:none } .btn[aria-disabled=true] { opacity:.45; pointer-events:none }

.top { display:flex; gap:1rem; align-items:center; padding:.8rem max(1rem, calc((100% - 72rem)/2)); background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2 }
.brand { font-weight:800; font-size:1.2rem; letter-spacing:-.01em; color:var(--fg); white-space:nowrap }
.top input { flex:1; min-width:0; max-width:28rem; margin-left:auto }
.cartlink { font-weight:600; white-space:nowrap }
.cats { display:flex; gap:.4rem; padding:.6rem max(1rem, calc((100% - 72rem)/2)); overflow-x:auto }
.cats a { padding:.3rem .8rem; border-radius:99px; border:1px solid var(--line); color:var(--fg); white-space:nowrap; background:var(--card) }
.cats a.sel { background:var(--fg); color:var(--bg); border-color:var(--fg) } .cats a:hover { text-decoration:none; border-color:var(--fg) }
main { max-width:72rem; margin:0 auto; padding:1rem }
h1 { font-size:1.6rem; margin:.4rem 0 1rem; letter-spacing:-.01em }
.foot { text-align:center; color:var(--dim); font-size:.85rem; padding:3rem 1rem 2rem }

.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:1rem }
.card { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; color:var(--fg) }
.card:hover { text-decoration:none; border-color:var(--dim) }
.card .body { padding:.8rem; display:flex; flex-direction:column; gap:.5rem; flex:1 }
.card h2 { font-size:1rem; font-weight:600; margin:0; flex:1 }
.card .row { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; font-size:.9rem }
.img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--ph) }
.ph { display:grid; place-items:center; font-size:3rem; font-weight:800; color:var(--dim); background:var(--ph) }
.in { color:var(--ok) } .low { color:var(--warn) } .out { color:var(--err) }

.crumbs { font-size:.9rem; color:var(--dim) }
.prd { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:2rem; align-items:start }
.prd .big { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; background:var(--ph) }
.prd .ph.big { font-size:6rem }
.prd .price { font-size:1.5rem; font-weight:700; margin:.2rem 0 }
.prd .desc { white-space:pre-line; margin:1rem 0 1.4rem }
.thumbs { display:flex; gap:.5rem; margin-top:.5rem; flex-wrap:wrap }
.thumbs button { padding:0; border-radius:8px; overflow:hidden; width:4.5rem; height:4.5rem }
.thumbs img { width:100%; height:100%; object-fit:cover; display:block }

.lines { display:flex; flex-direction:column; border-top:1px solid var(--line) }
.line { display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--line) }
.line .grow { flex:1; min-width:0 } .line input { width:4.5rem } .line .sum { min-width:6rem; text-align:right }
.mini { width:3.5rem; height:3.5rem; object-fit:cover; border-radius:8px; flex:none; font-size:1.4rem; background:var(--ph) }
.total { text-align:right; font-size:1.2rem; padding:1rem 0 }
.acts { display:flex; justify-content:space-between; align-items:center; gap:1rem }

.checkout { display:flex; flex-direction:column; gap:.9rem; max-width:32rem }
.checkout label { display:flex; flex-direction:column; gap:.25rem; font-weight:500 }

@media (max-width:640px) {
  .top { flex-wrap:wrap; gap:.6rem } .top input { order:3; flex-basis:100%; max-width:none }
  .cartlink { margin-left:auto }
  .grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6rem }
  .prd { grid-template-columns:1fr; gap:1rem }
  .line { flex-wrap:wrap } .line .sum { min-width:0 }
}