:root {
  --red: #d94338;
  --red-dark: #b92f27;
  --ink: #211f1e;
  --muted: #726e69;
  --paper: #fffdfa;
  --wash: #f5f1ec;
  --line: #e3ddd6;
  --green: #247456;
  --shadow: 0 18px 50px rgba(53, 39, 29, .12);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { background: #eee9e3; }
body { margin: 0; color: var(--ink); font-family: Manrope, ui-sans-serif, system-ui, sans-serif; background: radial-gradient(circle at top left,#fff 0,#f4f0eb 48%,#ece6df 100%); min-height: 100vh; }
button,input,textarea { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; background: var(--paper); }
.topbar { height: 76px; padding: 0 18px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; color: white; background: var(--red); position: sticky; top: 0; z-index: 20; box-shadow: 0 8px 22px rgba(125,34,27,.18); }
.brand { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: .34em; text-indent: .34em; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; display: grid; place-items: center; font-size: 24px; position: relative; }
.icon-btn:hover,.icon-btn:focus-visible { background: rgba(255,255,255,.16); outline: none; }
.badge { position:absolute; top:1px; right:0; min-width:20px; height:20px; padding:0 5px; border-radius:12px; background:#fff; color:var(--red); font-size:11px; font-weight:800; display:grid; place-items:center; }
.page { padding: 24px 18px 110px; animation: page-in .26s ease-out both; }
@keyframes page-in { from { opacity:0; transform:translateY(8px) } }
.eyebrow { color:var(--red); text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:800; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size: clamp(28px,8vw,42px); line-height:1.06; letter-spacing:-.045em; margin-bottom:10px; }
h2 { font-size:26px; letter-spacing:-.035em; }
.lede { color:var(--muted); line-height:1.6; max-width:48ch; }
.hero-row { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }
.pill { white-space:nowrap; padding:8px 12px; background:#f0e8df; color:#5f554b; border-radius:99px; font-size:12px; font-weight:700; }
.category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.category-card { border:0; text-align:left; min-height:210px; border-radius:20px; overflow:hidden; background:#f3eee8; position:relative; color:#fff; box-shadow:0 8px 24px rgba(47,36,28,.09); transition:.2s ease; }
.category-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.category-card img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter:saturate(.85); }
.category-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(20,13,8,.8)); }
.category-card span { position:absolute; left:16px; bottom:16px; z-index:1; font-size:20px; font-weight:800; }
.contact-link { width:max-content; display:block; margin:38px auto 0; color:var(--red-dark); font-weight:700; text-decoration-thickness:2px; text-underline-offset:5px; }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.product-card { background:white; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 5px 18px rgba(48,36,28,.06); }
.product-card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--wash); }
.product-card .info { padding:13px; }
.product-card h3 { font-size:15px; margin-bottom:6px; line-height:1.25; }
.price { font-weight:800; color:var(--red-dark); }
.product-actions { display:grid; grid-template-columns:1fr 44px; gap:8px; margin-top:12px; }
.btn { min-height:48px; padding:0 18px; border:0; border-radius:13px; font-weight:800; transition:.18s ease; }
.btn:active { transform:scale(.98); }
.btn-primary { background:var(--red); color:#fff; }
.btn-primary:hover { background:var(--red-dark); }
.btn-secondary { background:var(--wash); color:var(--ink); }
.btn-outline { background:white; color:var(--red-dark); border:1px solid #e9b5b0; }
.product-detail-img { width:100%; max-height:390px; object-fit:cover; border-radius:22px; background:var(--wash); }
.detail-card { padding:22px 2px 0; }
.detail-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.detail-price { font-size:26px; font-weight:800; color:var(--red-dark); }
.qty { display:flex; align-items:center; gap:12px; background:var(--wash); padding:6px; border-radius:14px; }
.qty button { width:38px;height:38px;border:0;border-radius:10px;background:#fff;font-size:20px; }
.bottom-action { position:fixed; z-index:30; bottom:0; left:0; right:0; background:rgba(255,253,250,.92); backdrop-filter:blur(14px); padding:12px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.bottom-action .btn { width:100%; }
.cart-list { display:grid; gap:12px; }
.cart-item { display:grid; grid-template-columns:78px 1fr auto; gap:12px; padding:10px; border:1px solid var(--line); border-radius:16px; background:white; align-items:center; }
.cart-item img { width:78px;height:78px;object-fit:cover;border-radius:12px; }
.cart-item h3 { font-size:14px;margin-bottom:4px; }
.remove { border:0;background:transparent;color:#a33;font-size:20px; }
.summary { margin-top:18px; padding:18px; background:#f5f0ea; border-radius:18px; }
.summary-row { display:flex;justify-content:space-between;margin:8px 0;color:var(--muted); }
.summary-row.total { color:var(--ink);font-size:20px;font-weight:800;border-top:1px solid #d8d0c7;padding-top:14px;margin-top:14px; }
.form { display:grid; gap:17px; }
.field { display:grid; gap:7px; }
.field label { font-size:13px;font-weight:800; }
.field input,.field textarea { width:100%; min-height:54px; padding:14px 15px; border:1px solid #d8d0c7; border-radius:13px; background:white; outline:none; }
.field textarea { min-height:130px;resize:vertical; }
.field input:focus,.field textarea:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(217,67,56,.12); }
.two-col { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.splash { min-height:100vh; display:grid; grid-template-rows:1fr auto; background:var(--red); color:white; padding:32px 24px max(28px,env(safe-area-inset-bottom)); overflow:hidden; position:relative; }
.splash::before,.splash::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.17); border-radius:50%; }
.splash::before { width:380px;height:380px;right:-170px;top:-120px; }
.splash::after { width:260px;height:260px;left:-130px;bottom:100px; }
.splash-main { display:grid; place-items:center; position:relative;z-index:1; text-align:center; }
.splash-logo { font-size:clamp(64px,22vw,108px);font-weight:800;letter-spacing:.22em;text-indent:.22em; }
.splash-copy { margin-top:15px;color:#ffe7e4;letter-spacing:.08em; }
.splash .btn { background:#fff;color:var(--red-dark);width:100%;position:relative;z-index:1; }
.success { text-align:center;padding-top:8vh; }
.success-mark { width:90px;height:90px;border-radius:50%;background:#e7f5ee;color:var(--green);display:grid;place-items:center;margin:0 auto 26px;font-size:44px;font-weight:800; }
.order-number { display:inline-block;padding:10px 15px;border-radius:10px;background:var(--wash);font-family:ui-monospace,monospace;font-weight:800;margin:10px 0 28px; }
.empty { text-align:center;padding:16vh 20px;color:var(--muted); }
.empty-icon { font-size:56px;filter:grayscale(1);opacity:.55; }
.toast { position:fixed;left:50%;bottom:92px;z-index:60;transform:translate(-50%,18px);background:#241f1c;color:white;padding:11px 16px;border-radius:99px;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:.25s ease;white-space:nowrap; }
.toast.show { opacity:1;transform:translate(-50%,0); }
.search { margin-bottom:18px; position:relative; }
.search input { width:100%;height:52px;border-radius:14px;border:1px solid var(--line);padding:0 16px 0 46px;background:white;outline:none; }
.search span { position:absolute;left:16px;top:14px; }
.auth-tabs { display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--wash);padding:4px;border-radius:14px;margin-bottom:32px; }
.auth-tabs button { min-height:44px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-weight:800; }
.auth-tabs button.active { background:#fff;color:var(--red-dark);box-shadow:0 4px 12px rgba(45,32,24,.08); }
.field small { color:var(--muted);font-size:11px; }
.btn:disabled { opacity:.55;cursor:not-allowed; }
.home-links { display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:34px; }
.home-links .contact-link { margin:0; }
.age-note { background:#fff4e7;color:#70431f;border:1px solid #edd7bd;border-radius:13px;padding:12px 14px;font-size:12px;font-weight:700;margin-bottom:14px; }
.stock { color:var(--green);font-size:12px;font-weight:800; }
.check { display:flex;gap:11px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:13px;background:#fff;line-height:1.45;font-size:13px; }
.check input { width:20px;height:20px;accent-color:var(--red);flex:none;margin:0; }
.payment-card { display:flex;justify-content:space-between;align-items:center;padding:17px;background:var(--wash);border-radius:14px; }
.payment-card span { color:var(--muted);font-size:13px; }
.order-list { display:grid;gap:10px; }
.order-card { display:flex;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff; }
.order-card>div { display:grid;gap:5px; }
.order-card>div:last-child { text-align:right; }
.order-card small { color:var(--muted); }
.status { color:var(--green);text-transform:capitalize;font-size:12px;font-weight:800; }
.account-logout { width:100%;margin-top:28px; }
.toast[data-type="error"] { background:#8f2721; }
@media (min-width: 760px) {
  body { padding:32px 0; }
  .app-shell,.splash { width:min(100% - 40px, 760px); min-height:calc(100vh - 64px); margin:0 auto; border-radius:28px; overflow:hidden; box-shadow:0 24px 80px rgba(52,38,29,.2); }
  .app-shell { position:relative; }
  .topbar { position:sticky; }
  .page { padding:32px 32px 120px; }
  .category-grid { grid-template-columns:repeat(4,1fr); }
  .category-card { min-height:260px; }
  .product-grid { grid-template-columns:repeat(3,1fr); }
  .bottom-action { position:sticky; margin-top:-86px; padding-left:32px;padding-right:32px;border-radius:0 0 28px 28px; }
}
@media (max-width:380px) { .page{padding-left:14px;padding-right:14px}.category-card{min-height:180px}.product-grid{gap:10px}.two-col{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}