:root {
  color-scheme: light;
  font: 1rem/1.5 system-ui, sans-serif;
  color: #251923;
  background: #faf6f2;
  --accent: #922944;
  --muted: #60535c;
  --line: #e7dcd9;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header { background: #fffcf9; border-bottom: 1px solid var(--line); }
.frame { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.brand { display: flex; justify-content: space-between; align-items: center; min-height: 4.4rem; gap: .6rem; }
.brand strong { font-size: 1.35rem; letter-spacing: -.05em; }
.brand strong span, .eyebrow { color: var(--accent); }
.badge, .eyebrow, .code { font: 700 .72rem/1.4 ui-monospace, monospace; letter-spacing: .04em; }
.badge { padding: .38rem .65rem; border-radius: 2rem; background: #f2e2e8; color: var(--accent); }
.intro { padding-block: clamp(2.4rem, 6vw, 5rem) 2rem; border-bottom: 1px solid var(--line); }
.intro p { max-width: 42rem; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(2.5rem, 7.5vw, 5.2rem); line-height: 1.04; letter-spacing: -.07em; margin-block: .42rem .8rem; }
h2 { font-size: 1.4rem; letter-spacing: -.035em; margin-bottom: .75rem; }
h3 { font-size: 1rem; overflow-wrap: anywhere; }
.intro > p:last-child, #status, #order-status, .hint, footer, .products p { color: var(--muted); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, .45fr); align-items: start; gap: 1.6rem; padding-block: 2rem; }
label { display: block; margin-bottom: .35rem; font-weight: 600; }
input { width: 100%; min-height: 2.8rem; border: 1px solid #a798a1; border-radius: .55rem; padding: .5rem .75rem; background: #fff; color: inherit; font: inherit; }
#status { font-size: .9rem; margin: .55rem 0 .8rem; }
.products, .order-lines { margin: 0; padding: 0; list-style: none; }
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .7rem; }
.products li, #order { background: #fffcf9; border: 1px solid var(--line); border-radius: .8rem; }
.products li { display: flex; flex-direction: column; align-items: flex-start; gap: .36rem; padding: .95rem; }
.code { color: var(--accent); }
.products p, .hint { font-size: .875rem; }
button, .whatsapp, #order-shortcut { min-height: 2.75rem; border-radius: .48rem; font: 650 .875rem/1.25 system-ui, sans-serif; }
button { cursor: pointer; color: inherit; border: 1px solid var(--line); background: #fff; padding: .42rem .6rem; }
button:disabled { opacity: .5; cursor: default; }
button:hover:enabled { border-color: var(--accent); }
:focus-visible { outline: 2px solid #6b1645; outline-offset: 3px; }
.add { margin-top: auto; color: var(--accent); }
#order { position: sticky; top: .85rem; max-height: calc(100dvh - 1.7rem); overflow: auto; padding: 1.15rem; }
.order-lines li { display: flex; justify-content: space-between; align-items: center; gap: .45rem; border-top: 1px solid var(--line); padding-block: .55rem; }
.order-lines li:first-child { margin-top: .65rem; }
.order-lines li span { font-size: .9rem; overflow-wrap: anywhere; }
.quantity { display: flex; gap: .4rem; align-items: center; font-variant-numeric: tabular-nums; }
.quantity button { width: 2rem; min-height: 2rem; padding: 0; font-size: 1rem; }
.whatsapp, #order-shortcut { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; }
.whatsapp { margin-top: .75rem; background: #146345; }
.whatsapp:hover { background: #0e5036; }
.hint { margin: .45rem 0 .7rem; }
.quiet { border: 0; background: none; text-decoration: underline; }
#order-shortcut { display: none; }
footer { padding-block: 1rem 2rem; border-top: 1px solid var(--line); font-size: .85rem; }

@media (max-width: 730px) {
  .layout { grid-template-columns: 1fr; }
  #order { position: static; max-height: none; grid-row: 1; }
  #order-shortcut { display: flex; position: fixed; bottom: 1rem; right: 1rem; gap: .6rem; background: var(--accent); padding-inline: 1rem; }
  footer { padding-bottom: 5rem; }
}