/* Bristol Pie Society shop — the website's look: charcoal, kraft, cream, one pink accent;
   Bebas Neue capitals for headings, Lato for text (same tokens as the staff app). */
:root {
  --charcoal: #212426; --charcoal-2: #2C3033; --cream: #E7E0CC; --cream-dim: #A9A391;
  --paper: #E7DFD0; --kraft: #C49A6C; --kraft-dark: #7A5A37; --kraft-ink: #3B2F22;
  --pink: #EE1892; --pink-strong: #DF1689; --pink-ink: #B80F6E; --pink-tint: #FCE1F0;
  --ink: #1D1F21; --muted: #5E5850; --line: #D8CFB8; --card: #F7F2E7; --ok: #376E46;
  --head: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif; --text: 'Lato', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--text); }
img { max-width: 100%; display: block; }
a { color: var(--pink-ink); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 8px; z-index: 50; background: #fff; padding: 8px; }
.muted { color: var(--muted); } .small { font-size: 0.85rem; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* Header */
.top { background: var(--charcoal); color: var(--cream); position: sticky; top: 0; z-index: 20; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.mark { color: var(--cream); text-decoration: none; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mark-name { font: 28px/1 var(--head); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark-sub { font: 700 0.75rem/1 var(--text); text-transform: uppercase; letter-spacing: 0.12em; color: var(--charcoal); background: var(--pink); padding: 4px 7px; border-radius: 3px; transform: rotate(-3deg); }
.top-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.basket-btn { font: 700 0.9rem var(--text); background: transparent; color: var(--cream); border: 2px solid var(--cream); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.basket-btn .count { display: inline-block; min-width: 1.5em; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--pink-strong); color: #fff; }
.link-btn { font: 700 0.9rem var(--text); background: none; border: 0; color: var(--cream); cursor: pointer; text-decoration: underline; padding: 6px; }

/* Hero */
.hero { background: linear-gradient(rgba(33,36,38,.55), rgba(33,36,38,.7)), url('/brand/pie-cut-beef.webp') center/cover no-repeat; color: var(--cream); }
.hero-inner { padding: 64px 16px 56px; }
.hero h1 { font: clamp(56px, 12vw, 104px)/0.9 var(--head); letter-spacing: 0.02em; margin: 0 0 12px; text-transform: uppercase; }
.hero p { max-width: 34em; margin: 0; font-size: 1.1rem; }

/* Range */
.strip { margin: 24px 0 0; padding: 12px 16px; background: var(--kraft); color: var(--kraft-ink); border-radius: 6px; font-weight: 700; }
.search-row { margin: 20px 0 4px; }
#search { width: 100%; max-width: 420px; font: 1rem var(--text); padding: 11px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
h2.sec { font: 40px/1 var(--head); letter-spacing: 0.03em; text-transform: uppercase; margin: 32px 0 12px; }
.sec-note { margin: -4px 0 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.card img, .card .ph { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; background: var(--kraft); }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card h3 { font: 28px/1 var(--head); letter-spacing: 0.03em; text-transform: uppercase; margin: 0; }
.card p { margin: 0; }
.contents { margin: 0; padding-left: 1.1em; font-size: 0.92rem; }
.allergens { font-size: 0.85rem; color: var(--muted); }
.allergens strong { color: var(--ink); }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.price { font: 700 1.15rem var(--text); }
.pub-price { font-size: 0.85rem; color: var(--muted); }
.btn { font: 700 0.95rem var(--text); border-radius: 999px; padding: 10px 18px; cursor: pointer; border: 2px solid var(--charcoal); background: var(--charcoal); color: var(--cream); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-main { background: var(--pink-strong); border-color: var(--pink-strong); color: #fff; width: 100%; margin-top: 12px; }
.btn-ghost { background: transparent; color: var(--charcoal); }

/* Drawers */
.drawer { position: fixed; inset: 0; z-index: 40; background: rgba(29,31,33,.55); display: flex; justify-content: flex-end; }
.drawer[hidden] { display: none; }
.drawer-panel { background: var(--paper); width: min(440px, 100%); height: 100%; overflow-y: auto; padding: 18px 16px 28px; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { font: 34px/1 var(--head); text-transform: uppercase; margin: 0; }
.x { font-size: 1.8rem; line-height: 1; background: none; border: 0; cursor: pointer; padding: 4px 10px; color: var(--ink); }
.line { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.line small { display: block; color: var(--muted); }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--charcoal); background: transparent; font: 700 1.1rem var(--text); cursor: pointer; }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper output { min-width: 1.6em; text-align: center; font-weight: 700; }
.note { background: var(--pink-tint); color: var(--ink); border-left: 4px solid var(--pink); padding: 10px 12px; margin: 16px 0 8px; font-size: 0.92rem; }
.total-row { display: flex; justify-content: space-between; font-size: 1.15rem; margin-top: 12px; }
.chosen { font-weight: 700; margin: 14px 0 0; }
.byo-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.byo-row small { display: block; color: var(--muted); font-size: 0.8rem; }
.msg { min-height: 1.2em; margin: 10px 0 0; font-weight: 700; }
.msg.bad { color: var(--pink-ink); }
form label { display: block; font-weight: 700; margin: 12px 0 4px; }
form input:not([type=checkbox]) { width: 100%; font: 1rem var(--text); padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
form #d-address2 { margin-top: 8px; }
form label.check { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
form label.check input { margin-top: 4px; }

/* Footer */
.foot { background: var(--charcoal); color: var(--cream-dim); margin-top: 48px; padding: 28px 0; font-size: 0.9rem; }
.foot a { color: var(--cream); }
.foot-name { font: 26px/1 var(--head); color: var(--cream); letter-spacing: 0.04em; margin: 0 0 8px; }

@media (max-width: 420px) {
  .mark-name { font-size: 22px; }
  .mark-sub { display: none; }
  .hero-inner { padding: 44px 16px 40px; }
}