:root{
  --paper:#F6E8D0;
  --ink:#2A2D33;
  --graphite:#585D67;
  --muted:#857a65;
  --tan:#EADFC4;
  --accent:#D9643F;
  --call-audio:#E2735A;
  --call-video:#F5C518;
  --call-chat:#F6C9A0;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--paper);
  color:var(--ink);
}

a{color:inherit}
a:hover{opacity:.8}
button{font-family:inherit}

.page{
  position:relative;
  min-height:100vh;
  background:var(--paper);
  padding:18px 0 36px;
}
.page::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16 0 0 0 0 .18 0 0 0 0 .2 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.vitryna{
  position:relative;
  max-width:400px;
  margin:0 auto;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:32px;
  box-shadow:6px 6px 0 var(--ink);
  overflow:hidden;
}

.doodle{position:absolute;opacity:.4;pointer-events:none}

.header{
  padding:20px 18px 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.shop-id{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{
  width:52px;height:52px;border-radius:50%;
  background:var(--accent);border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Neucha',cursive;font-size:24px;color:var(--ink);
  flex-shrink:0;
}
.shop-name{font-family:'Neucha',cursive;font-size:24px;color:var(--ink);line-height:1.1}
.category-pill{
  display:inline-flex;align-items:center;gap:5px;margin-top:4px;
  background:color-mix(in srgb, var(--accent) 22%, white);
  color:var(--ink);font-weight:600;font-size:12px;
  padding:4px 10px;border-radius:999px;
}
.cart-btn{
  width:38px;height:38px;border-radius:50%;background:#fff;
  border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;
}

.products{padding:12px 18px 0}
.grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
.card{border:2.5px solid var(--ink);border-radius:18px;overflow:hidden;background:#fff}
.card-photo{aspect-ratio:1/1;background:var(--tan);display:flex;align-items:center;justify-content:center}
.card-photo span{font-size:12px;color:var(--muted)}
.card-body{padding:10px 11px 12px;display:flex;flex-direction:column;gap:2px;border-top:2.5px solid var(--ink)}
.card-name{font-size:14px;font-weight:600;color:var(--ink)}
.card-price{font-size:13px;color:var(--graphite)}
.tier-note{font-size:12px;color:var(--graphite);margin-top:12px;text-align:center}

.pay{padding:18px 18px 4px}
.btn-pay{
  width:100%;min-height:54px;background:var(--accent);color:var(--ink);
  font-size:16px;font-weight:700;border:2.5px solid var(--ink);
  border-radius:999px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:4px 4px 0 var(--ink);
}

.calls{padding:14px 18px 6px}
.call-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.call-btn{
  min-height:54px;border:2.5px solid var(--ink);border-radius:16px;
  box-shadow:3px 3px 0 var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  cursor:pointer;
}
.call-btn span{font-size:12px;font-weight:700;color:var(--ink)}
.call-audio{background:var(--call-audio)}
.call-video{background:var(--call-video)}
.call-chat{background:var(--call-chat)}
.call-caption{text-align:center;font-size:11px;color:var(--muted);margin-top:8px}

.footer{padding:10px 18px 24px;display:flex;align-items:center;justify-content:center;gap:8px}
.footer a{font-size:12px;color:var(--muted);text-decoration:none}