/* =========================================================
   Andrew's Pet Treats — stylesheet
   Design tokens: warm kraft-paper bakery palette, swing-tag
   product cards, rubber-stamp badges.
   ========================================================= */

:root {
  /* Color */
  --cream:        #F6EFE0;
  --cream-soft:   #FBF7EC;
  --kraft:        #E7D3A6;
  --kraft-dark:   #CDAE79;
  --ink:          #253626;
  --ink-soft:     #4C5C48;
  --honey:        #E5A03A;
  --honey-dark:   #B87A1F;
  --berry:        #E7701B;
  --berry-dark:   #B95A16;
  --plum:         #7A5C99;
  --plum-dark:    #5F4779;
  --white:        #FFFDF8;
  --line:         rgba(37, 54, 38, 0.14);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", Menlo, monospace;

  /* Layout */
  --maxw: 1180px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 26px;
  --shadow-tag: 0 14px 30px -14px rgba(37, 54, 38, 0.35);
  --shadow-lift: 0 20px 44px -18px rgba(37, 54, 38, 0.45);
  --ease: cubic-bezier(.22,.9,.32,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* The [hidden] attribute is how JS toggles visibility all over this site
   (notify/order "already subscribed" badges, admin editors, dialogs,
   etc.). By default the browser implements that with a UA-stylesheet
   `display: none`, but plenty of rules below give those same elements
   their own explicit `display` (flex/inline-flex/etc.) at equal CSS
   specificity — and an author rule always beats the UA default, so
   `element.hidden = true` silently stopped hiding anything styled that
   way. Restating it here, once, with higher specificity than any single
   class guarantees `hidden` always wins, site-wide, regardless of what
   `display` a component sets. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
:focus-visible {
  outline: 3px solid var(--berry);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* subtle paper texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(rgba(37,54,38,0.05) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--berry-dark);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--berry);
  flex: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--berry);
  color: var(--white);
  box-shadow: var(--shadow-tag);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); background: var(--berry-dark); }
.btn-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream-soft); transform: translateY(-2px); }
.btn-sm { padding: 10px 18px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* ---------- Header / Nav ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(246, 239, 224, 0.86);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
/* Single flex-wrap row that auto-arranges into two visual lines via
   `order` + a forced-basis wrap on .nav-links, rather than two separate
   fixed rows. That's what lets the same markup reflow cleanly between
   the wide layout (brand + buttons on line 1, links centered on line 2)
   and the narrow layout (brand + toggle on line 1, buttons on line 2,
   links tucked into the dropdown) without duplicating any markup. */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
  row-gap: 2px;
  padding: 14px 24px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--ink);
  align-self: center;
  order: 1;
  /* Flex items default to min-width:auto, which ignores flex-shrink once
     content (like nowrap text) is wider than the space left over — that's
     what was pushing the CTA off-screen on narrow viewports. Letting the
     brand shrink/truncate first, while the CTA and toggle hold their size
     below, is the standard fix. It also naturally right-justifies
     whatever sits after it on the same line, since it soaks up all the
     spare width itself. */
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 12px;
}
.brand .mark {
  width: 42px; height: 42px;
  flex: none;
}
.brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Its own full-width row (flex-basis:100% below forces the wrap), so
   there's always comfortable side padding regardless of how wide the
   window is — a much shorter row than the old always-shown subbar,
   since it's just link text with no button chrome. */
.nav-links {
  order: 3;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  border-top: 1px solid var(--line);
  padding: 6px 0 10px;
}
.nav-links a {
  position: relative;
  padding: 5px 2px;
  color: var(--ink-soft);
  line-height: 1.4;
  transition: color 0.2s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--berry);
  transition: right 0.25s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }
/* The "Get Notified" / "Order Online" CTAs. On the wide layout these sit
   on line 1, right-justified next to the brand (order:2, below). On the
   narrow layout they're pushed onto their own full-width line 2 instead
   — see the media query — matching the old always-shown subbar look. */
.nav-buttons {
  order: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding-bottom: 12px;
}
.nav-buttons .btn svg { width: 16px; height: 16px; flex: none; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  color: var(--ink);
  flex: none;
  align-self: center;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* Only breaks to the hamburger layout once brand + both buttons can no
   longer sit comfortably on one line — much narrower than the old
   threshold, since the links no longer have to compete for room in that
   same row (they get their own dedicated, centered row above this
   breakpoint, and only move into the dropdown below it). */
@media (max-width: 760px) {
  .nav { padding: 14px 24px; row-gap: 0; }
  .brand { padding-bottom: 0; }
  .nav-links {
    display: none;
    border-top: none;
    padding: 0;
  }
  .nav-buttons {
    order: 4;
    flex-basis: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-bottom: 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .nav-toggle { display: inline-flex; order: 3; }
  header.site.open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cream-soft);
    padding: 10px 24px 20px;
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }
  header.site.open .nav-links a { padding: 10px 0; width: 100%; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 92px 0 70px;
  overflow: clip;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.9fr;
  gap: 50px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  line-height: 1.03;
  margin: 18px 0 22px;
}
.hero h1 em {
  font-style: italic;
  color: var(--berry);
}
.hero .lede {
  font-size: 1.14rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 34px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-art { position: relative; height: 420px; }
.hero-art .mini-tag { position: absolute; width: 200px; }
.hero-art .mini-tag.t3 { top: 6%; right: 4%; transform: rotate(-4deg); }
.hero-art .mini-tag.t1 { top: 38%; left: 2%; transform: rotate(-6deg); }
.hero-art .mini-tag.t2 { bottom: 4%; right: 12%; transform: rotate(5deg); }
.hero-blob {
  position: absolute; z-index: -1;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(229,160,58,0.35), transparent 70%);
  top: -140px; right: -160px;
}

/* ---------- Section shells ---------- */
section { position: relative; padding: 84px 0; }
.section-head { max-width: 640px; margin-bottom: 46px; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-top: 14px; }
.section-head p { color: var(--ink-soft); margin-top: 14px; font-size: 1.05rem; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Feature trio (stamps row) ---------- */
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feature {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 30px 26px;
}
.feature .icon {
  width: 44px; height: 44px;
  color: var(--berry);
  margin-bottom: 18px;
}
.feature h3 { font-size: 1.15rem; margin-bottom: 8px; }
.feature p { color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- Swing tag cards (signature component) ---------- */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 32px;
  padding-top: 6px;
}
.tag-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 780px; }
.tag {
  position: relative;
  background: var(--kraft);
  border-radius: var(--radius-m) var(--radius-m) 10px 10px;
  padding: 40px 26px 28px;
  box-shadow: var(--shadow-tag);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  text-align: left;
  border: 1px solid rgba(37,54,38,0.12);
}
.tag:nth-child(3n+1) { transform: rotate(-1.6deg); }
.tag:nth-child(3n+2) { transform: rotate(0.8deg); }
.tag:nth-child(3n+3) { transform: rotate(-0.6deg); }
.tag:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-lift); }
.tag::before {
  /* twine */
  content: "";
  position: absolute;
  top: -22px; left: 30px;
  width: 2px; height: 24px;
  background: var(--ink-soft);
  opacity: 0.55;
}
.tag::after {
  /* punch hole */
  content: "";
  position: absolute;
  top: -8px; left: 24px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px dashed var(--kraft-dark);
}
.tag .cat { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--berry-dark); }
.tag h3 { font-size: 1.32rem; margin: 10px 0 10px; }
.tag p.desc { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 18px; }
.tag .price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed var(--kraft-dark);
  padding-top: 16px;
  margin-top: auto;
}
.tag .price { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.tag .price sup { font-size: 0.75rem; top: -0.6em; }
.tag .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.88rem; color: var(--berry); }
.tag .link-arrow svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.tag:hover .link-arrow svg { transform: translateX(4px); }
.tag.link-card { display: flex; flex-direction: column; height: 100%; }
.tag .note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: rgba(255,255,255,0.35);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  margin-bottom: 16px;
}

/* category icon inside tag */
.tag .cat-icon { width: 34px; height: 34px; color: var(--ink); margin-bottom: 8px; }

/* sticker badge — pinned to the card's own upper-right corner, fully
   inside the card's box (no overflow above/beside it, so it never adds
   extra height to the card or the grid gap around it). Background/text
   color come from the admin's sticker config as inline styles (see
   products.js), not a fixed per-type class — colors are user-editable
   now, in the "Product Stickers" admin section. */
.tag-sticker {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px -6px rgba(37, 54, 38, 0.45);
  transform: rotate(4deg);
  white-space: nowrap;
  z-index: 1;
  transition: transform 0.25s var(--ease);
}
.tag:hover .tag-sticker { transform: rotate(4deg) translateY(-2px); }

/* ---- Sticker shapes ----
   Each shape sets its own padding/sizing on top of the base rules above.
   "pill" is the original, only shape this app ever had, kept as the
   default so existing sites don't change unless an admin picks a new
   one. Circle/star/explosion are fixed-size and centre their text, since
   clip-path shapes (unlike a pill) don't grow cleanly with label length —
   long labels shrink to fit via the smaller font size on those shapes
   rather than spilling outside the shape. */
.tag-sticker.shape-pill {
  padding: 5px 11px;
  border-radius: 999px;
  border: 2px solid var(--cream-soft);
  white-space: nowrap;
}
.tag-sticker.shape-rounded-rectangle {
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid var(--cream-soft);
  white-space: nowrap;
}
.tag-sticker.shape-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid var(--cream-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.05;
  font-size: 0.56rem;
  padding: 4px;
}
.tag-sticker.shape-star,
.tag-sticker.shape-explosion {
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1;
  font-size: 0.52rem;
  padding: 14px 10px 10px;
}
.tag-sticker.shape-star { clip-path: polygon(50.0% 0.0%, 61.8% 33.8%, 97.6% 34.5%, 69.0% 56.2%, 79.4% 90.5%, 50.0% 70.0%, 20.6% 90.5%, 31.0% 56.2%, 2.4% 34.5%, 38.2% 33.8%); }
.tag-sticker.shape-explosion { clip-path: polygon(50.0% 0.0%, 57.9% 23.1%, 72.7% 14.7%, 71.2% 31.7%, 95.5% 29.2%, 77.7% 46.0%, 91.6% 56.0%, 75.5% 61.6%, 87.8% 82.7%, 65.1% 73.6%, 61.8% 90.3%, 50.0% 78.0%, 35.9% 98.0%, 34.9% 73.6%, 18.3% 77.5%, 24.5% 61.6%, 0.5% 57.1%, 22.3% 46.0%, 11.8% 32.6%, 28.8% 31.7%, 23.0% 7.9%, 42.1% 23.1%); }

/* ---------- How it works (numbered steps — real sequence) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.step { position: relative; padding-left: 6px; }
.step .num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--honey-dark);
  letter-spacing: 0.08em;
}
.step h3 { font-size: 1.2rem; margin: 10px 0 10px; }
.step p { color: var(--ink-soft); font-size: 0.95rem; }
.steps::before { content: none; }

/* ---------- Payment / CTA banner ---------- */
.cta-band {
  background: var(--ink);
  color: var(--cream-soft);
  border-radius: var(--radius-l);
  padding: 56px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.cta-band h2 { color: var(--cream-soft); font-size: clamp(1.7rem, 3vw, 2.3rem); }
.cta-band p { color: rgba(251,247,236,0.75); margin-top: 12px; max-width: 44ch; }
.pay-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(251,247,236,0.08);
  border: 1px solid rgba(251,247,236,0.22);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-family: var(--font-mono);
}
.pay-chip b { color: var(--honey); font-family: var(--font-body); }
.cta-band .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-band .btn-ghost { border-color: rgba(251,247,236,0.5); color: var(--cream-soft); }
.cta-band .btn-ghost:hover { background: var(--cream-soft); color: var(--ink); }

/* ---------- About teaser / timeline ---------- */
.timeline { position: relative; margin-top: 10px; padding-left: 34px; border-left: 2px dashed var(--kraft-dark); }
.tl-item { position: relative; padding-bottom: 40px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -41px; top: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--berry);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 2px var(--berry);
}
.tl-item .yr { font-family: var(--font-mono); color: var(--honey-dark); font-size: 0.85rem; letter-spacing: 0.06em; }
.tl-item h3 { font-size: 1.28rem; margin: 8px 0 10px; }
.tl-item p { color: var(--ink-soft); max-width: 60ch; }

.founder-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: center;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 40px;
}
.founder-portrait {
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--kraft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-tag);
  overflow: hidden;
}
.founder-portrait svg { width: 62%; height: 62%; color: var(--ink); }

/* ---------- Coming soon (cats) ---------- */
.soon-card {
  background: var(--kraft);
  border-radius: var(--radius-l);
  padding: 60px;
  text-align: center;
  box-shadow: var(--shadow-tag);
  max-width: 720px;
  margin: 0 auto;
}
.soon-card .icon-row { display: flex; justify-content: center; gap: 18px; margin-bottom: 22px; }
.soon-card .icon-row svg { width: 46px; height: 46px; color: var(--ink); }
.soon-card h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 14px; }
.soon-card p { color: var(--ink-soft); max-width: 48ch; margin: 0 auto 26px; }

/* ---------- Get Notified (dedicated page) ---------- */
.notify-page-card {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 48px;
  box-shadow: var(--shadow-tag);
  max-width: 520px;
  margin: 0 auto;
}
.notify-page-card .icon-row { display: flex; justify-content: center; margin-bottom: 22px; }
.notify-page-card .icon-row svg { width: 44px; height: 44px; color: var(--berry); }
.notify-page-card .notify-form { max-width: none; }

/* ---------- Checkout / form ---------- */
.checkout-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}
/* Grid items default to min-width:auto, so oversized inner content (e.g.
   unconstrained inputs) can force this column wider than its 1.3fr share
   and paint over/behind the aside next to it. min-width:0 lets the track
   actually shrink to fit, so overflow gets wrapped/clipped inside instead. */
.checkout-grid > .form-frame,
.checkout-grid > aside {
  min-width: 0;
}
.form-frame {
  background: var(--white);
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-tag);
}
.form-frame iframe { width: 100%; height: 1180px; border: 0; display: block; }
.form-frame-head { padding: 22px 26px; border-bottom: 1px solid var(--line); }
.form-frame-head .eyebrow { margin-bottom: 6px; }
.side-card {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 28px;
  margin-bottom: 22px;
}
.side-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.side-card p { color: var(--ink-soft); font-size: 0.94rem; }
.side-card .venmo-handle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  background: var(--kraft);
  padding: 8px 14px;
  border-radius: 999px;
  margin-top: 12px;
  font-weight: 700;
}

/* ---------- Footer ---------- */
footer.site {
  background: var(--ink);
  color: rgba(251,247,236,0.72);
  padding: 60px 0 30px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(251,247,236,0.14);
}
.footer-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 1.15rem; color: var(--cream-soft); margin-bottom: 12px; }
.footer-brand .mark { width: 34px; height: 34px; }
.footer-col h4 { color: var(--cream-soft); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-mono); margin-bottom: 16px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a:hover { color: var(--honey); }
.footer-col a [data-venmo-footer-text] { font-weight: 700; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; font-size: 0.85rem; flex-wrap: wrap; gap: 10px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Page header (inner pages) ---------- */
.page-hero {
  padding: 64px 0 40px;
  text-align: left;
}
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-top: 14px; }
.page-hero p { color: var(--ink-soft); font-size: 1.08rem; max-width: 56ch; margin-top: 16px; }
.crumb { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.04em; }
.crumb a:hover { color: var(--berry); }

/* ---------- Mini decorative tag (hero art) ---------- */
.tag-mini {
  background: var(--kraft);
  border-radius: 12px 12px 6px 6px;
  padding: 16px 18px 14px;
  box-shadow: var(--shadow-tag);
  border: 1px solid rgba(37,54,38,0.12);
  font-size: 0.85rem;
}
.tag-mini::before { content: ""; position: absolute; top: -18px; left: 20px; width: 2px; height: 20px; background: var(--ink-soft); opacity: 0.5; }
.tag-mini::after { content: ""; position: absolute; top: -6px; left: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--cream); border: 2px dashed var(--kraft-dark); }
.tag-mini .cat { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--berry-dark); margin-bottom: 4px; }
.tag-mini strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 6px; }
.tag-mini .price { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }

/* =========================================================
   Order form
   ========================================================= */
.order-form { max-width: 720px; }
[data-order-form].is-submitting { opacity: 0.65; transition: opacity 0.2s var(--ease); }
.order-category:disabled { opacity: 0.6; }
.order-category {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 24px 26px;
  margin: 0 0 22px;
  background: var(--cream-soft);
}
.order-category legend {
  font-family: var(--font-display);
  font-size: 1.1rem;
  padding: 0 8px;
  color: var(--ink);
}
.order-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px dashed var(--line);
}
.order-category .order-line:first-of-type { border-top: none; }
.order-line-info { display: flex; flex-direction: column; gap: 4px; max-width: 65%; min-width: 0; }
.order-line-desc { font-size: 0.88rem; color: var(--ink-soft); }
.order-line-tags { display: flex; gap: 8px; margin-top: 4px; }
.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--kraft);
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--ink-soft);
}
.pill.price-pill { background: transparent; border: 1px solid var(--kraft-dark); color: var(--ink); }
.order-line-active { background: rgba(229,160,58,0.08); border-radius: var(--radius-s); }
.qty-stepper { display: flex; align-items: center; gap: 8px; flex: none; }
.qty-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--kraft-dark);
  background: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink);
}
.qty-btn:hover { background: var(--kraft); }
.qty-stepper .qty-input {
  width: 56px;
  text-align: center;
  font-family: var(--font-mono);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 7px 4px;
  font-size: 0.95rem;
  /* Hide native number-input spin arrows — we have custom +/- buttons,
     and the native arrows were eating into this narrow box and clipping
     the digit. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.order-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.order-fields .field-full { grid-column: 1 / -1; }
.order-fields label, .order-notes-label, .notify-carrier, .form-field {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-soft);
}
.order-fields input, .order-notes-label textarea, .notify-carrier select,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="date"], input[type="url"], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--kraft-dark);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--berry); outline-offset: 1px; }
.order-notes-label { margin-top: 4px; }
.order-notes-label textarea { resize: vertical; }
.hint { font-weight: 400; color: var(--ink-soft); font-size: 0.8em; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.92rem; color: var(--ink); margin-bottom: 10px; }
.subscribed-badge { font-weight: 600; font-size: 0.78em; color: #4f8a5b; }
.check input { width: 16px; height: 16px; }
.subscribed-msg { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; color: #4f8a5b; margin: 0 0 10px; }
.order-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px; font-family: var(--font-display); font-size: 1.3rem;
}
.order-status { min-height: 1.4em; margin-top: 12px; font-size: 0.9rem; color: var(--ink-soft); }
.order-status-error { color: var(--berry); font-weight: 600; }
.order-status-warning { color: var(--honey-dark); font-weight: 600; }
.order-confirmation {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 40px;
  text-align: center;
}
.order-confirmation h2 { margin-bottom: 12px; }
.order-confirmation p { color: var(--ink-soft); margin-bottom: 20px; }

.venmo-confirm {
  background: var(--kraft);
  border-radius: var(--radius-m);
  padding: 28px 24px;
  margin: 0 0 24px;
  text-align: center;
}
.venmo-confirm h3 { font-size: 1.1rem; margin-bottom: 10px; }
.venmo-confirm p { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 18px; }
.venmo-confirm .btn { margin-bottom: 18px; }
.venmo-confirm-qr {
  display: block;
  margin: 0 auto 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--kraft-dark);
  background: var(--white);
  padding: 10px;
}
.venmo-confirm p.hint { font-size: 0.82rem; margin-bottom: 0; }

/* =========================================================
   Notify-me form
   ========================================================= */
.notify-form { max-width: 460px; }
.notify-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.notify-row-tight { grid-template-columns: 1fr; }
.notify-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.notify-form label.check { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; }
.notify-methods { display: flex; flex-direction: column; margin: 12px 0 16px; }
.notify-carrier { flex: 1 1 220px; }
.notify-status { min-height: 1.4em; font-size: 0.88rem; margin-top: 10px; }

/* =========================================================
   Admin
   ========================================================= */
.admin-shell { max-width: 980px; margin: 0 auto; padding: 40px 24px 100px; }
.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 30px; flex-wrap: wrap; gap: 14px;
}
.admin-header h1 { font-size: 1.9rem; }
.admin-header .who { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-soft); }
.status-panel {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px;
  background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 18px 22px; margin-bottom: 30px; font-size: 0.9rem;
}
.status-row { display: flex; align-items: center; gap: 10px; }
.status-row em { margin-left: auto; font-style: normal; color: var(--ink-soft); font-size: 0.82rem; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.status-dot.status-ok { background: #4f8a5b; }
.status-dot.status-off { background: var(--berry); }

.tab-bar { display: flex; gap: 8px; border-bottom: 2px solid var(--line); margin-bottom: 26px; flex-wrap: wrap; }
.tab-bar button {
  background: none; border: none; padding: 10px 16px; font-weight: 600;
  color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -2px;
  font-size: 0.95rem;
}
.tab-bar button.active { color: var(--berry); border-bottom-color: var(--berry); }

.admin-category {
  border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 22px; margin-bottom: 22px; background: var(--cream-soft);
}
.admin-category-head { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 14px; align-items: end; margin-bottom: 14px; }
.admin-category-head label, .admin-category > label { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 14px; }
.admin-product {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 16px 18px; margin-bottom: 14px;
}
.admin-product-grid { display: grid; grid-template-columns: 1.5fr 0.75fr 0.75fr 0.9fr 1.15fr 0.85fr; gap: 12px; margin-bottom: 10px; }
.admin-product-grid .cost-field { position: relative; }
.admin-product-grid .cost-field .hint { display: block; font-size: 0.72em; margin-top: 1px; }
.admin-product label, .admin-product > label { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; }
.admin-id-field input { font-family: var(--font-mono); font-size: 0.82rem; }
.admin-products { margin-top: 6px; }
.catalog-actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
[data-catalog-status] { margin-top: 0; }

.notify-panel { max-width: 560px; }
[data-tab-panel="site"] label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 4px;
}
.notify-failures { margin-top: 10px; font-size: 0.85rem; }
.notify-failures ul { padding-left: 20px; }

.about-photo-editor { display: flex; gap: 24px; align-items: flex-start; }
.about-photo-preview {
  width: 120px; height: 120px; flex: none;
  border-radius: 50%;
  background: var(--kraft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-tag);
}
.about-photo-preview svg { width: 55%; height: 55%; color: var(--ink); }
.about-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
[data-about-photo-input] { font-size: 0.85rem; }

.templates-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.template-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 14px 18px;
}
.template-row-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.template-badge {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--kraft); color: var(--ink-soft); padding: 2px 9px; border-radius: 999px;
}
.template-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.template-editor {
  border: 1px solid var(--line); border-radius: var(--radius-m); padding: 24px;
  background: var(--cream-soft);
}
.template-editor label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 16px; }
.template-editor textarea { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.5; }
code { font-family: var(--font-mono); font-size: 0.82em; background: var(--kraft); padding: 1px 6px; border-radius: 4px; }

/* ---------- Shared modal dialogs (admin payment reminders + customer reorder prompt) ---------- */
dialog.app-dialog {
  width: min(560px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 32px;
  background: var(--cream-soft);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
}
dialog.app-dialog::backdrop {
  background: rgba(37, 54, 38, 0.55);
  backdrop-filter: blur(2px);
}
.app-dialog-head { margin-bottom: 20px; }
.app-dialog-head h2 { font-size: 1.4rem; margin-bottom: 6px; }
.app-dialog-head p { color: var(--ink-soft); margin: 0; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }

.reminder-select-all {
  display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.92rem;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--kraft-dark);
}
.reminder-list { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; }
.reminder-row {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 12px 14px; font-weight: 400; cursor: pointer;
}
.reminder-row input { margin-top: 3px; flex: none; }
.reminder-row-info { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.reminder-row-meta { color: var(--ink-soft); font-size: 0.82rem; }
.reminder-row-items { color: var(--ink-soft); font-size: 0.8rem; }
.reminder-row:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

.reorder-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.reorder-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 10px 14px; font-size: 0.92rem;
}
.reorder-price { font-family: var(--font-mono); color: var(--ink-soft); }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.order-row-cancelled { opacity: 0.55; }
.order-row-cancelled td { text-decoration: line-through; text-decoration-color: var(--ink-soft); }

/* ---------- Product Stickers admin ---------- */
.stickers-editor { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.sticker-row {
  display: grid;
  grid-template-columns: 1.2fr auto auto auto auto auto;
  align-items: center;
  gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 12px 14px;
}
.sticker-row label { display: flex; flex-direction: column; gap: 4px; font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); margin: 0; }
.sticker-row input[type="text"] { min-width: 0; }
.sticker-row input[type="color"] { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--kraft-dark); border-radius: 6px; background: var(--white); cursor: pointer; }
.sticker-row select { min-width: 140px; }
.sticker-row-preview { justify-self: center; }

/* ---------- Reporting: periods manager ---------- */
.periods-editor { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.period-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 12px 16px; font-size: 0.9rem;
}
.period-row-name { font-family: var(--font-mono); font-weight: 700; background: var(--kraft); padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; }
.period-row-dates { color: var(--ink-soft); }
.period-row-actions { margin-left: auto; display: flex; gap: 8px; }
.period-form {
  display: flex; align-items: end; gap: 14px; flex-wrap: wrap;
  background: var(--cream-soft); border: 1px dashed var(--kraft-dark); border-radius: var(--radius-s);
  padding: 16px; margin-top: 4px;
}
.period-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); margin: 0; }
.period-form input[type="date"] { min-width: 160px; }
.period-form-name { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); padding-bottom: 10px; }

/* ---------- Reporting: overview cards ---------- */
.report-section { margin-bottom: 34px; }
.report-section h3 { font-size: 1.15rem; margin-bottom: 4px; }
.report-section > p.hint-block { color: var(--ink-soft); font-size: 0.85rem; margin: 0 0 14px; }
.report-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 10px; }
.report-card {
  background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 16px 18px;
}
.report-card .label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); display: block; margin-bottom: 8px; }
.report-card .value { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; display: block; }
.report-card .sub { font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; display: block; }
.report-card.warn { border-color: var(--berry); }
.report-card.warn .value { color: var(--berry-dark); }

/* ---------- Reporting: bar rows (hand-rolled, no chart library) ---------- */
.report-bars { display: flex; flex-direction: column; gap: 10px; }
.report-bar-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; font-size: 0.85rem; }
.report-bar-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-bar-track { background: var(--kraft); border-radius: 999px; height: 16px; overflow: hidden; position: relative; }
.report-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--berry); min-width: 3px; transition: width 0.4s var(--ease); }
.report-bar-fill.cost { background: var(--honey-dark); }
.report-bar-fill.profit { background: #4f8a5b; }
.report-bar-fill.tip { background: var(--plum); }
.report-bar-value { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.report-bar-legend { display: flex; gap: 16px; margin-bottom: 10px; font-size: 0.78rem; color: var(--ink-soft); align-items: center; }
.report-bar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.report-bar-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--berry); }
.report-bar-legend i.cost { background: var(--honey-dark); }
.report-bar-legend i.profit { background: #4f8a5b; }
.report-bar-legend i.tip { background: var(--plum); }

/* A single stacked bar per period: track width = that period's revenue
   scaled against the shared max (same idea as .report-bar-track), and
   the filled portion (.report-stack-inner) is itself split into
   cost/profit/tip segments that always sum to 100% of the filled width. */
.report-stack-track { padding: 0; }
.report-stack-inner { display: flex; height: 100%; min-width: 3px; }
.report-stack-seg { height: 100%; }
.report-stack-seg.cost { background: var(--honey-dark); }
.report-stack-seg.profit { background: #4f8a5b; }
.report-stack-seg.tip { background: var(--plum); }

.report-scope-controls { margin-bottom: 24px; }
.report-period-groups { display: flex; flex-direction: column; gap: 20px; }
.report-period-group { padding: 14px 16px; background: var(--cream-soft); border: 1px dashed var(--kraft-dark); border-radius: var(--radius-s); }
.report-period-group-name { font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem; margin-bottom: 10px; }

.change-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.change-pill.up { background: rgba(79,138,91,0.15); color: #2f6a3c; }
.change-pill.down { background: rgba(231,112,27,0.15); color: var(--berry-dark); }
.change-pill.flat { background: var(--kraft); color: var(--ink-soft); }

.report-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.report-controls label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.report-controls select { width: auto; }
.report-table-wrap { overflow-x: auto; }

.login-shell {
  max-width: 380px; margin: 110px auto; padding: 0 24px;
}
.login-card {
  background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 40px 34px; box-shadow: var(--shadow-tag);
}
.login-card h1 { font-size: 1.5rem; margin-bottom: 6px; }
.login-card p.lede-sm { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 24px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; }
  /* Taller hero-art + top-based (rather than bottom-based) positions for
     all three mini-tags so they land at evenly-spread, non-overlapping
     heights on narrow single-column layouts. Desktop keeps its own
     (unmodified) positions above — this only kicks in once there's
     enough width pressure to justify the extra vertical room. */
  .hero-art { height: 380px; margin-top: 16px; }
  .hero-art .mini-tag.t3 { top: 0; right: 4%; bottom: auto; }
  .hero-art .mini-tag.t1 { top: 38%; left: 2%; bottom: auto; }
  .hero-art .mini-tag.t2 { top: 76%; right: 8%; bottom: auto; }
  .feature-row { grid-template-columns: 1fr; }
  .tag-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .cta-band { grid-template-columns: 1fr; padding: 40px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .founder-card { grid-template-columns: 1fr; text-align: center; }
  .founder-portrait { width: 160px; margin: 0 auto; }
  .checkout-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .nav { padding: 12px 16px; column-gap: 10px; }
  .brand { gap: 8px; }
  /* Even narrower phones need a bit more room still to keep all three
     mini-tags legible and clear of each other. */
  .hero-art { height: 420px; }
  .hero-art .mini-tag { width: 84%; max-width: 220px; }
  .hero-art .mini-tag.t3 { right: 2%; }
  .hero-art .mini-tag.t1 { left: 0; }
  .hero-art .mini-tag.t2 { right: 2%; }
  .tag-grid, .tag-grid.cols-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  section { padding: 60px 0; }
  .hero { padding: 60px 0 40px; }
  .form-frame iframe { height: 1400px; }
  .order-fields { grid-template-columns: 1fr; }
  .order-line { flex-direction: column; align-items: flex-start; gap: 10px; }
  .order-line-info { max-width: 100%; }
  .notify-row { grid-template-columns: 1fr; }
  .admin-category-head { grid-template-columns: 1fr; }
  .admin-product-grid { grid-template-columns: 1fr 1fr; }
  .admin-shell { padding: 28px 16px 80px; }
  .status-panel { grid-template-columns: 1fr; }
  .about-photo-editor { flex-direction: column; align-items: center; text-align: center; }
  dialog.app-dialog { padding: 22px; width: 94vw; max-height: 90vh; }
  .app-dialog-actions { flex-direction: column-reverse; }
  .app-dialog-actions .btn { width: 100%; }
  [data-orders-table], [data-subscribers-table] { overflow-x: auto; }
  .admin-table { min-width: 640px; }
  .sticker-row { grid-template-columns: 1fr; }
  .sticker-row-preview { justify-self: start; }
  .period-row { flex-direction: column; align-items: flex-start; }
  .period-row-actions { margin-left: 0; }
  .report-bar-row { grid-template-columns: 90px 1fr; }
  .report-bar-value { grid-column: 1 / -1; }
}