/* ===== PMK Outdoor Living - stylesheet ===== */

/* Lora, self-hosted (fonts/, SIL Open Font License 1.1) - one variable
   file covers weights 400-700. Chosen over the old Georgia/ui-serif stack
   because those use old-style numerals (3, 4, 5, 7, 9 drop below the
   line), which made prices, dates and times look uneven. Lora's numerals
   sit level. Latin + Latin Extended only - the browser fetches the
   second file just if an accented character actually appears. */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/lora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/lora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cream: #faf6f0;
  --cream-deep: #f1e9dd;
  --paper: #fffdfa;
  --espresso: #3c2b22;
  --espresso-soft: #5c4636;
  --terracotta: #b5583b;
  --terracotta-deep: #9a4630;
  --sage: #6b7654;
  --line: #e3d8c8;
  --shadow: 0 20px 40px -20px rgba(60, 43, 34, 0.25);
  --radius: 14px;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* scroll-padding-top keeps #collection (and other in-page links) from landing
   underneath the pinned header when their nav links are clicked - it is the
   header's own height plus a little air. */
html { scroll-behavior: smooth; scroll-padding-top: 78px; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--espresso);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Level (not old-style) figures everywhere, whatever the font. */
  font-variant-numeric: lining-nums;
}

/* Prices, times and counts: equal-width digits too, so figures stacked in
   a list or grid line up column by column ($501 over $470, 9:15 over 10:30). */
.pd-price-direct, .pd-price-rrp, .card-price, .card-price-retail, .more-card-price,
.cart-item-price, .summary-line, .booking-time, .booking-cal-day, .mg-stat strong,
.mg-num, .mg-booking-time, .mg-rec-top strong {
  font-variant-numeric: lining-nums tabular-nums;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--espresso);
  letter-spacing: 0.01em;
  margin: 0;
}

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  font-weight: 600;
  margin-bottom: 14px;
}

.lede {
  font-size: 1.08rem;
  color: var(--espresso-soft);
  max-width: 56ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--terracotta);
  color: #fff8f2;
  box-shadow: 0 10px 24px -10px rgba(154, 70, 48, 0.55);
}
.btn-primary:hover { background: var(--terracotta-deep); }

.btn-ghost {
  background: transparent;
  color: var(--espresso);
  border-color: var(--espresso);
}
.btn-ghost:hover { background: var(--espresso); color: var(--cream); }

.btn-light {
  background: var(--paper);
  color: var(--espresso);
  border-color: var(--line);
}
.btn-light:hover { background: var(--cream-deep); }

/* ---------- Header ---------- */

/* The sticky lives on the mount div, NOT on <header> itself.
   js/site-chrome.js injects the header into <div id="site-header">, and a
   sticky element can only travel within its own containing block - that
   wrapper is exactly as tall as the header, so there was nowhere to stick
   and the bar just scrolled away. Sticking the wrapper (whose containing
   block is <body>) is what actually pins it. Don't move these three lines
   back onto header.site. */
#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
header.site {
  background: rgba(250, 246, 240, 0.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  max-width: 1180px;
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand img { height: 36px; width: auto; }
.brand-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--espresso);
  letter-spacing: 0.02em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 0.92rem;
  font-weight: 500;
}
.nav-links a {
  text-decoration: none;
  color: var(--espresso-soft);
}
.nav-links a:hover { color: var(--terracotta-deep); }
.nav-links a[aria-current="page"] { color: var(--espresso); font-weight: 600; }
.nav-cta { display: flex; align-items: center; }
.nav-toggle { display: none; }

#nav-links-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 6px 28px 18px;
  background: var(--cream);
  border-top: 1px solid var(--line);
}
#nav-links-mobile.open { display: flex; }
#nav-links-mobile a {
  text-decoration: none;
  color: var(--espresso-soft);
  padding: 10px 0;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--line);
}
#nav-links-mobile a:last-child { border-bottom: none; }

@media (max-width: 760px) {
  .nav-links-desktop { display: none; }
  .nav-toggle {
    display: inline-flex;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 1rem;
  }
}
@media (min-width: 761px) {
  #nav-links-mobile { display: none !important; }
}

/* Phone number in the header: icon + number on a wide screen, icon only
   when space is short (still one tap to call). */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 999px;
  color: var(--espresso);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}
.nav-phone:hover { background: var(--cream-deep); }
@media (max-width: 1120px) {
  .nav-phone-num { display: none; }
  .nav-links { gap: 20px; }
}

/* Announcement bar - above the header on every page (src/announce.js). */
.announce {
  background: var(--espresso);
  color: var(--cream);
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  padding: 9px 16px;
  line-height: 1.4;
}
.announce a { color: inherit; text-decoration: none; }
.announce a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Hero ---------- */
.hero {
  padding: 76px 0 64px;
  position: relative;
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1.12;
  margin-bottom: 20px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hero-badges {
  display: flex;
  gap: 22px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.hero-badge {
  font-size: 0.82rem;
  color: var(--espresso-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
  flex: none;
}
.hero-visual {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 1 / 1;
}
.hero-visual img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-visual .tag {
  position: absolute;
  bottom: 18px; left: 18px;
  background: rgba(255, 253, 250, 0.92);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--espresso);
}

/* Phone / small tablet: the offer first (headline, price, buttons, proof),
   then a shorter photo - so the first screen says what this is and what
   it costs, not just shows a chair. */
@media (max-width: 900px) {
  .hero { padding: 28px 0 40px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 28px; }
  .hero-visual { aspect-ratio: 4 / 3; }
  .hero h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); margin-bottom: 14px; }
  .hero-actions { margin-top: 22px; }
  .hero-proof { margin-top: 20px; }
}
@media (max-width: 480px) {
  .nav { padding: 10px 16px; }
  .brand img { height: 30px; }
  .brand-name { font-size: 0.95rem; line-height: 1.2; }
  .nav-cta { gap: 2px; }
}

/* ---------- Category heading ---------- */
.category-group + .category-group { margin-top: 56px; }
.category-heading {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* ---------- Product detail page ---------- */
.breadcrumb {
  /* padding-top only, NOT the padding shorthand: this class sits on the
     same element as .wrap (class="wrap breadcrumb") and comes later in the
     file, so a shorthand here wiped out .wrap's 28px left/right and left
     the breadcrumb hanging ~28px to the left of every other element on the
     page. */
  padding-top: 26px;
  font-size: 1rem;
  color: var(--espresso-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb a {
  text-decoration: none;
  color: var(--espresso-soft);
  font-weight: 500;
}
.breadcrumb a:hover { color: var(--terracotta-deep); }
.breadcrumb-sep { color: var(--line); font-size: 0.9rem; }
.breadcrumb-current { color: var(--espresso); font-weight: 600; }

.product-page {
  padding-top: 24px;
}
.product-page .wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 54px;
  align-items: start;
}
@media (max-width: 880px) {
  .product-page .wrap { grid-template-columns: 1fr; }
}

.pd-gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: var(--shadow);
  touch-action: pan-y;
}
.pd-gallery-main img,
.pd-gallery-main video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Click/tap the main photo to open it full size (openLightbox, common.js). */
.pd-gallery-main img.pd-main-img { cursor: zoom-in; }
.pd-gallery-main img.pd-main-img:focus-visible { outline: 3px solid var(--terracotta); outline-offset: -3px; }
.pd-gallery-wrap { position: relative; min-width: 0; }
/* Computer: the gallery stays in view while the details beside it scroll. */
@media (min-width: 881px) {
  .pd-gallery-wrap { position: sticky; top: 96px; }
}
/* "3 / 14" on the main photo. */
.pd-counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(60, 43, 34, 0.6);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
}

.pd-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(60, 43, 34, 0.55);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-nav-arrow:hover { background: rgba(60, 43, 34, 0.8); }
.pd-nav-prev { left: 12px; }
.pd-nav-next { right: 12px; }

.pd-actions-note { font-size: 0.85rem; color: var(--espresso-soft); margin-top: -10px; margin-bottom: 26px; }
.pd-actions-note a { text-decoration: underline; color: var(--espresso); }
/* One scrollable row of thumbnails (not a grid), so on a phone the name,
   price and Add to Cart come straight after the photo. */
.pd-gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding: 2px 2px 6px;
}
.pd-gallery-thumbs:empty { display: none; }
.pd-gallery-thumbs img,
.pd-gallery-thumbs .pd-thumb-video {
  flex: 0 0 84px;
  width: 84px;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.75;
}
.pd-gallery-thumbs .pd-thumb-video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--espresso);
  color: var(--cream);
  font-size: 1.2rem;
}
.pd-gallery-thumbs img:hover,
.pd-gallery-thumbs .pd-thumb-video:hover { opacity: 1; }
.pd-gallery-thumbs img.active,
.pd-gallery-thumbs .pd-thumb-video.active { opacity: 1; border-color: var(--terracotta); }
.pd-gallery-thumbs img:focus-visible,
.pd-gallery-thumbs .pd-thumb-video:focus-visible { opacity: 1; outline: 2px solid var(--terracotta); outline-offset: 2px; }

.pd-info { min-width: 0; }

/* ---------- Availability badges ---------- */
.badge {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.badge-bestseller { background: var(--terracotta); color: #fff8f2; }
.badge-hotsale { background: var(--sage); color: #fff8f2; }
.badge-unavailable { background: #8a7a6c; color: #fff8f2; }

.pd-unavailable-note {
  background: var(--cream-deep);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.9rem;
  color: var(--espresso-soft);
  margin-bottom: 20px;
}
.pd-gallery-unavailable .pd-gallery-main img,
.pd-gallery-unavailable .pd-gallery-thumbs img {
  filter: grayscale(0.85);
  opacity: 0.7;
}

.pd-info h1 { font-size: 2rem; margin-bottom: 8px; }
@media (max-width: 600px) { .pd-info h1 { font-size: 1.55rem; } }
/* SKU · ★★★★★ 5 · 15 Google reviews */
.pd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 0.85rem;
  color: var(--espresso-soft);
  margin-bottom: 18px;
}
.pd-sku strong { color: var(--espresso); font-weight: 600; letter-spacing: 0.02em; }
.pd-rating { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.pd-rating:hover { color: var(--terracotta-deep); text-decoration: underline; }
.pd-rating:empty { display: none; }
.pd-price { display: flex; flex-direction: column; gap: 3px; margin-bottom: 22px; }
.pd-price-direct { font-family: var(--serif); font-size: 1.8rem; color: var(--terracotta-deep); }
.pd-price-rrp {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--espresso-soft);
  letter-spacing: 0.01em;
}
.pd-desc { color: var(--espresso-soft); font-size: 0.98rem; margin-bottom: 26px; }
.pd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.pd-section-label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  font-weight: 600;
  margin-bottom: 14px;
}

/* ---------- More sets strip ---------- */
.more-sets { padding-top: 40px; }
.more-sets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 800px) { .more-sets-grid { grid-template-columns: repeat(2, 1fr); } }
.more-sets-grid a { text-decoration: none; color: inherit; }
.more-card-media {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream-deep);
  position: relative;
}
.more-card-media .badge { position: absolute; top: 10px; left: 10px; margin-bottom: 0; }
.more-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.more-sets-grid a:hover .more-card-media img { transform: scale(1.05); }
.more-card-name { margin-top: 10px; font-size: 0.92rem; font-weight: 600; }
.more-card-price { font-size: 0.85rem; color: var(--terracotta-deep); }

/* ---------- Section shell ---------- */
section { padding: 84px 0; }
.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}
.band { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Collection ---------- */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 940px) { .collection-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .collection-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream-deep); position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card-media img { transform: scale(1.05); }
.card-media .badge { position: absolute; top: 12px; left: 12px; margin-bottom: 0; }
.card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body h3 { font-size: 1.2rem; }
.card-sub { font-size: 0.82rem; color: var(--espresso-soft); }
.card-options { display: block; margin-top: 4px; font-weight: 600; color: var(--terracotta-deep); }

/* ---------- Homepage ---------- */
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; }
@media (max-width: 600px) { .section-head-row { flex-direction: column; align-items: flex-start; } }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.category-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; text-decoration: none;
  background: var(--cream-deep); color: #fff8f2; padding: 18px;
}
.category-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.category-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40, 28, 22, 0.7), rgba(40, 28, 22, 0) 60%); }
.category-tile:hover img { transform: scale(1.04); }
.category-tile-name, .category-tile-count { position: relative; z-index: 1; }
.category-tile-name { font-family: var(--serif); font-size: 1.3rem; }
.category-tile-count { font-size: 0.8rem; opacity: 0.85; }
.home-visit .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.home-visit h2 { margin-bottom: 8px; }
.home-visit .lede { margin: 0; }

/* ---------- Homepage: why it costs less + quality you can check ---------- */
.home-value { padding-top: 24px; }
.home-value .section-head .lede { max-width: 62ch; }
.value-chain {
  display: grid;
  gap: 12px;
  margin: 8px 0 44px;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.value-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 12px; }
.value-label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--espresso-soft); }
.value-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; font-size: 0.98rem; color: var(--espresso-soft); }
.value-steps li + li::before { content: "→"; margin: 0 10px; color: #b9a896; }
.value-row-direct .value-label,
.value-row-direct .value-steps { color: var(--terracotta-deep); font-weight: 600; }
.value-row-direct .value-steps li + li::before { color: var(--terracotta); }
@media (max-width: 600px) {
  .value-row { grid-template-columns: 1fr; gap: 6px; }
  .value-chain { padding: 18px 16px; }
}
.value-h3 { font-size: 1.25rem; margin-bottom: 16px; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 800px) { .value-grid { grid-template-columns: 1fr; } }
.value-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .value-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .value-grid-4 { grid-template-columns: 1fr; } }
.value-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.value-card h4 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 6px; }
.value-card p { margin: 0; font-size: 0.92rem; color: var(--espresso-soft); }
.value-card a { color: var(--espresso); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Homepage: first screen extras ---------- */
.hero-price { margin: 18px 0 0; font-size: 1.02rem; color: var(--espresso); }
.hero-price #hero-from { font-family: var(--serif); font-size: 1.25rem; color: var(--terracotta-deep); font-weight: 600; }
.hero-proof {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 0.86rem;
}
.hero-proof li { display: flex; align-items: center; }
.hero-proof li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); margin-right: 22px; margin-left: -12px; }
.hero-proof a { color: var(--espresso); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.hero-proof a:hover { color: var(--terracotta-deep); text-decoration: underline; text-underline-offset: 3px; }
.hero-rating:empty { display: none; }
@media (max-width: 600px) {
  .hero-proof { flex-direction: column; gap: 8px; }
  .hero-proof li::before, .hero-proof li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); margin: 0 10px 0 0; flex: none; }
}

/* "Our workshop has made furniture for ..." - names as a quiet wordmark row. */
.made-for { padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.made-for .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px; text-align: center; }
.made-for-label { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--espresso-soft); font-weight: 600; }
.made-for-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; }
.made-for-list li { font-family: var(--serif); font-size: 1.12rem; color: var(--espresso); opacity: 0.8; letter-spacing: 0.01em; }

/* Homepage: the spirit of handcraft - a dark band, the story on the left
   and three facts on the right (stacked on a phone). */
.home-craft { background: var(--espresso); color: #e6d9cb; }
.home-craft .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
@media (max-width: 860px) { .home-craft .wrap { grid-template-columns: 1fr; } }
.home-craft .eyebrow { color: #eaa98c; }
.home-craft h2 { color: var(--cream); margin-bottom: 18px; }
.home-craft .lede { color: var(--cream); margin-bottom: 16px; }
.craft-text p { max-width: 60ch; margin: 0 0 14px; line-height: 1.65; }
.craft-text .craft-close { font-family: var(--serif); font-size: 1.12rem; color: var(--cream); margin: 20px 0 18px; }
.craft-link { color: #eaa98c; font-weight: 600; text-decoration: none; }
.craft-link:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.craft-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.craft-facts li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 20px 22px; border: 1px solid rgba(250, 246, 240, 0.16); border-radius: var(--radius);
  background: rgba(250, 246, 240, 0.05);
}
.craft-facts strong { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; line-height: 1.15; color: var(--cream); }
.craft-facts span { font-size: 0.92rem; color: #d8c9ba; }
@media (max-width: 860px) and (min-width: 561px) { .craft-facts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .craft-facts strong { font-size: 1.6rem; } .craft-facts li { padding: 16px 18px; } }
/* The sections after it were spaced to follow the product grid. */
.home-craft + .home-workshop,
.home-craft + .home-workshop[hidden] + .home-value { padding-top: 84px; }

/* Workshop photos (homepage + Our Story). */
.home-workshop { padding-top: 24px; }
.workshop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 800px) { .workshop-grid { grid-template-columns: repeat(2, 1fr); } }
.workshop-tile { padding: 0; border: none; background: var(--cream-deep); border-radius: 12px; overflow: hidden; cursor: zoom-in; aspect-ratio: 1 / 1; }
.workshop-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.workshop-tile:hover img { transform: scale(1.04); }

/* The buyer's checklist. */
.checklist { list-style: none; counter-reset: check; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 960px) { .checklist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .checklist { grid-template-columns: 1fr; } }
.checklist li { counter-increment: check; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; display: flex; flex-direction: column; }
.checklist li::before {
  content: counter(check);
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--espresso); color: var(--cream);
  font-size: 0.85rem; font-weight: 700; margin-bottom: 12px;
}
.checklist h3 { font-size: 1.12rem; margin: 0 0 6px; }
.checklist p { margin: 0 0 12px; font-size: 0.92rem; color: var(--espresso-soft); }
.checklist .checklist-ours { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--espresso); }
.checklist .checklist-ours strong { color: var(--terracotta-deep); }
.checklist a { color: var(--espresso); text-decoration: underline; text-underline-offset: 3px; }

/* Customers' photos from reviews. */
.home-homes { padding-bottom: 56px; }
.homes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
@media (max-width: 800px) { .homes-grid { grid-template-columns: repeat(2, 1fr); } }
.homes-tile { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--cream-deep); }
.homes-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.homes-tile:hover img { transform: scale(1.04); }
.home-homes #reviews-trust-mount { text-align: center; }

/* ---------- Our Story page ---------- */
.story-hero { padding: 40px 0 28px; }
.story-hero h1 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.15; max-width: 22ch; margin: 8px 0 18px; }
.story-hero .lede { max-width: 64ch; }
.story-gallery { padding: 0 0 40px; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.steps li { counter-increment: step; border-top: 2px solid var(--terracotta); padding-top: 14px; }
.steps li::before { content: "0" counter(step); font-family: var(--serif); font-size: 1.4rem; color: var(--terracotta-deep); display: block; margin-bottom: 6px; }
.steps h3 { font-size: 1.15rem; margin: 0 0 6px; }
.steps p { margin: 0; font-size: 0.93rem; color: var(--espresso-soft); }
.story-promise { padding-top: 56px; }
.story-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }

/* Product page: why it costs less + quality points. */
.pd-value { background: var(--cream-deep); border-radius: var(--radius); padding: 18px 20px; margin: 4px 0 20px; }
.pd-value p { margin: 0 0 10px; font-size: 0.92rem; color: var(--espresso-soft); }
.pd-quality { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 0.9rem; color: var(--espresso-soft); }
.pd-quality strong { color: var(--espresso); }
.pd-quality a { color: var(--espresso); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Shop ---------- */
.shop-page { padding-top: 8px; }
.shop-head { max-width: 680px; margin-bottom: 22px; }
.shop-head h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 8px; }
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.shop-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-cat { font-size: 0.86rem; font-weight: 600; text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); }
.shop-cat:hover { border-color: var(--espresso-soft); }
.shop-cat.active { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.shop-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-left: auto; font-size: 0.88rem; }
.shop-count { color: var(--espresso-soft); }
.shop-instock { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.shop-instock input { accent-color: var(--terracotta); width: 16px; height: 16px; }
.shop-sort { display: flex; align-items: center; gap: 6px; }
.shop-sort select { font: inherit; font-size: 0.88rem; color: var(--espresso); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.shop-more { text-align: center; margin-top: 30px; }
.shop-page .lede a { color: var(--terracotta-deep); }

/* ---------- Product options (variants) ---------- */
.pd-variants { margin: 0 0 18px; }
.pd-variants-label { font-size: 0.85rem; color: var(--espresso-soft); margin-bottom: 8px; }
.pd-variants-label strong { color: var(--espresso); }
.pd-variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-variant {
  font: inherit; font-size: 0.88rem; font-weight: 600; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--espresso); cursor: pointer;
}
.pd-variant:hover { border-color: var(--espresso-soft); }
.pd-variant.selected { border-color: var(--terracotta); box-shadow: 0 0 0 1px var(--terracotta); color: var(--terracotta-deep); }
.pd-variant.sold-out { color: #b1a192; text-decoration: line-through; }
.pd-variant:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.card-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-price { font-family: var(--serif); font-size: 1.15rem; color: var(--terracotta-deep); }
.card-price-group { display: flex; flex-direction: column; gap: 1px; }
.card-price-retail { font-size: 0.72rem; color: var(--espresso-soft); }
.card-link { font-size: 0.82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Unavailable state (card + "more sets" strip) ---------- */
.card-unavailable .card-media img,
.more-card-unavailable .more-card-media img {
  filter: grayscale(0.85);
  opacity: 0.6;
}
.card-unavailable .card-price,
.more-card-unavailable .more-card-price { color: var(--espresso-soft); }
.card-unavailable .card-link { color: var(--espresso-soft); text-decoration: none; }

/* ---------- Reviews ----------
   Styled to read as a real Google review card (white, grey border, Roboto,
   gold stars, the Google "G") rather than the site's own cream/terracotta/
   serif look - the contrast with the rest of the page is what sells "this
   is genuinely from Google," so don't reach for the brand tokens in here.
   The homepage trust line just below is the one exception: it's the site
   talking about its Google rating, not a Google review card, so it does
   use the brand tokens. */

/* ---------- Homepage trust line ---------- */

/* Slim section, not a .band - a single line of text does not need the
   paper background and top/bottom rules a full content band carries, and
   the section below it is already a band.
   No top padding of its own: the collection above already ends with a
   section's worth of space, and stacking 48px on top of that left the pill
   marooned - 149px below the last product card while sitting only 48px
   above the next band. The collection's own bottom padding is trimmed just
   below to even the two sides up. */
.reviews-trust-band { padding: 0 0 56px; text-align: center; }

/* The collection is the only thing that ever precedes the trust pill, and a
   small trailing line does not need a full 84px section gap ahead of it. */
#collection { padding-bottom: 36px; }

/* All that's left of reviews on the homepage - one line, no cards. The
   whole pill is the link through to reviews.html. */
.reviews-trust {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--espresso);
  font-size: 0.95rem;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reviews-trust:hover {
  border-color: var(--espresso-soft);
  box-shadow: 0 2px 10px rgba(60, 64, 67, 0.08);
}
.reviews-trust .review-google-g { margin-left: 0; }
.reviews-trust-figure { font-weight: 600; }
.reviews-trust-sep { color: var(--line); }
.reviews-trust-cta { color: var(--terracotta-deep); }
.reviews-trust:hover .reviews-trust-cta { text-decoration: underline; text-underline-offset: 3px; }
/* A pill this wide overflows a narrow screen once it wraps to two lines,
   so square it off and let it read as a block instead. */
@media (max-width: 520px) {
  .reviews-trust { border-radius: 14px; padding: 13px 18px; gap: 8px; font-size: 0.88rem; }
}

/* ---------- reviews.html: three-per-row card grid ---------- */

/* Three across on desktop, two on tablet, one on phone. A wrapping grid
   rather than the horizontal strip this used to be: on a page whose whole
   job is the reviews, showing them all at once beats making people scroll
   sideways through them.
   Rows stretch by default, so every card in a row is the height of the
   tallest one in that row - see .review-photos for what keeps the photo
   blocks lined up inside them. */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } }

.review-card {
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 1px 3px rgba(60, 64, 67, 0.1);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: "Google Sans", Roboto, Arial, Helvetica, sans-serif;
}

.review-head { display: flex; align-items: center; gap: 10px; }
.review-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
}
.review-who { display: flex; flex-direction: column; min-width: 0; }
.review-name {
  font-size: 0.86rem;
  font-weight: 500;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.review-name { text-decoration: none; }
a.review-name:hover { text-decoration: underline; }
.review-meta { font-size: 0.72rem; color: #70757a; }
/* "More from Google" (js/reviews.js renderMoreFromGoogle) */
.reviews-more-title { text-align: center; font-size: 1.3rem; margin: 44px 0 20px; }
.review-google-g { width: 16px; height: 16px; margin-left: auto; flex: none; }
.review-stars { color: #fbbc04; font-size: 0.85rem; letter-spacing: 1px; }
.review-text { font-size: 0.82rem; line-height: 1.5; color: #3c4043; margin: 0; }

/* The review text and its More/Less toggle, grouped as one block. */
.review-body { display: flex; flex-direction: column; }
/* A text-only review has no photo block to fill the bottom of its card, and
   its row is still as tall as whatever photo card sits beside it. Centring
   the text in that space reads as a deliberate pull-quote variant; left at
   the top it just leaves an obvious white void underneath. */
.review-card-nophoto .review-body { flex: 1; justify-content: center; }

/* Truncated to 4 lines by default (matches Google's own review cards) with
   a "More"/"Less" toggle appended by JS only when the text actually
   overflows - see wireTextToggles() in reviews.js. */
.review-text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A card with no photo has the whole photo block's height to spare, so it
   clamps much later - no reason to cut a long review off at four lines and
   leave the rest of the card empty. */
.review-text-clamp-tall { -webkit-line-clamp: 14; }
.review-text-clamp.review-text-expanded { -webkit-line-clamp: unset; overflow: visible; }
.review-more-toggle {
  display: block;
  /* A <button> is centred by the UA stylesheet; the review text it belongs
     to is left-aligned, so it has to be told. */
  text-align: left;
  margin-top: 2px;
  padding: 0;
  border: none;
  background: none;
  color: #1a73e8;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
}
.review-more-toggle:hover { text-decoration: underline; }

/* ---------- Review photos ---------- */

/* One fixed-height block per card no matter how many photos are in it: the
   container carries the aspect ratio and the tiles divide it into equal
   columns. That's what keeps the photo blocks lined up across a row -
   giving each tile its own aspect-ratio instead (which is what this did
   when the cards were a single wide column) would make a two-photo card's
   block half the height of a one-photo card's.
   margin-top:auto pins the block to the bottom of the card, so the blocks
   still line up when one review is a single line and its neighbour is
   three paragraphs - and when someone expands one with "More". */
.review-videos { display: grid; gap: 8px; margin-top: 12px; }
.review-video { width: 100%; max-height: 360px; border-radius: 10px; background: #000; }
.review-photos {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 2px;
  aspect-ratio: 4 / 3;
  margin-top: auto;
  border-radius: 8px;
  overflow: hidden;
}
.review-photo-tile { position: relative; overflow: hidden; cursor: zoom-in; }
.review-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-photo-tile:focus-visible { outline: 3px solid #1a73e8; outline-offset: -3px; }
/* A 4th+ photo doesn't get its own tile; it shows as a "+N" overlay on the
   3rd, matching Google's own convention, and still opens the lightbox with
   every photo. */
.review-photo-more {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reviews-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 36px 0 0;
  font-size: 0.95rem;
  color: var(--espresso-soft);
}
/* The plain (non-.btn) link - a lower-emphasis secondary action next to
   the primary button. */
.reviews-cta a:not(.btn) { color: var(--terracotta-deep); text-decoration: underline; text-underline-offset: 3px; }

/* The rating + count under the reviews.html heading. Reads live from
   Google where configured, otherwise from the hand-checked figures in
   reviews.js - see VERIFIED_SUMMARY there. */
.reviews-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--espresso-soft);
  font-size: 0.98rem;
  min-height: 1.5em;
}
.reviews-summary .review-stars { font-size: 1.1rem; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--espresso);
  color: #d8c9ba;
  padding: 48px 0 28px;
  font-size: 0.86rem;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 22px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { height: 30px; filter: brightness(0) invert(1); opacity: 0.9; }
.footer-brand span { font-family: var(--serif); color: var(--cream); font-size: 1rem; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; color: #d8c9ba; }
.footer-links a:hover { color: var(--cream); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: #a4917f;
  font-size: 0.78rem;
}

/* ---------- Spec list (used on product detail pages) ---------- */
.spec-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.spec-list li { font-size: 0.9rem; color: var(--espresso-soft); display: flex; gap: 8px; }
.spec-list li strong { color: var(--espresso); font-weight: 600; min-width: 110px; }

/* ---------- Utility ---------- */
.center { text-align: center; }
.nowrap { white-space: nowrap; } /* keeps short ranges like "6-9pm" from splitting at the hyphen */
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Full-image lightbox (product page) ---------- */
.img-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 10, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 30px;
  cursor: zoom-out;
  /* Pointer-driven pinch/pan is tracked on the whole overlay (not just the
     image - see openLightbox in common.js), since a photo that doesn't
     exactly match the viewport's aspect ratio leaves letterboxed space
     within the overlay that a real two-finger pinch commonly touches.
     Without this the browser's own pinch-zoom/scroll would intercept
     gestures in that space before our JS ever saw them. */
  touch-action: none;
}
.img-lightbox.open { display: flex; }
.img-lightbox img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.img-lightbox img.zoomed { cursor: grab; }
.img-lightbox img.zoomed:active { cursor: grabbing; }
.img-lightbox-close {
  /* Above the image (z-index 1) so a pinch-zoomed image spilling over this
     corner can never cover the one control that closes the lightbox. */
  z-index: 2;
  position: absolute;
  top: 22px; right: 26px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px; height: 40px;
  font-size: 1.1rem;
  cursor: pointer;
}
.img-lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }

.img-lightbox-arrow {
  z-index: 2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-lightbox-arrow:hover { background: rgba(255, 255, 255, 0.28); }
.img-lightbox-prev { left: 16px; }
.img-lightbox-next { right: 16px; }
@media (max-width: 600px) {
  .img-lightbox-arrow { width: 40px; height: 40px; font-size: 1.5rem; }
  .img-lightbox-prev { left: 6px; }
  .img-lightbox-next { right: 6px; }
}

/* ---------- Header cart link ---------- */
.nav-cta { gap: 14px; }
.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: var(--espresso);
  text-decoration: none;
}
.nav-cart:hover { background: var(--cream-deep); }
.nav-cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--terracotta);
  color: #fff8f2;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.nav-cart-count[hidden] { display: none; }

/* ---------- Footer contact / policy columns ---------- */
.footer-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: 26px 60px;
  padding: 28px 0;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 760px) { .footer-info { grid-template-columns: 1fr; } }
.footer-info-col { display: flex; flex-direction: column; gap: 6px; }
.footer-info-col a { color: #d8c9ba; text-decoration: none; }
.footer-info-col a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.footer-info-col span a { text-decoration: underline; text-underline-offset: 3px; }
.footer-info-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e3b79f;
  font-weight: 600;
  margin-bottom: 4px;
}

/* ---------- Product page: buying ---------- */
.pd-actions { margin-bottom: 16px; }
.pd-buy-points {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--espresso-soft);
}
.pd-buy-points li { padding-left: 22px; position: relative; }
.pd-buy-points li::before { content: "✓"; position: absolute; left: 2px; color: var(--sage); font-weight: 700; }
.pd-buy-points a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pd-buy-points { margin-bottom: 28px; }

/* Key features and Dimensions & materials: sections that open and close
   with a tap on the heading (product.js foldHtml). */
.pd-fold { border-top: 1px solid var(--line); }
.pd-fold:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.pd-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  padding: 12px 2px;
}
.pd-fold > summary::-webkit-details-marker { display: none; }
.pd-fold > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.pd-fold[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.pd-fold > summary:hover { color: var(--terracotta); }
.pd-fold > summary:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; border-radius: 4px; }
.pd-fold .pd-features, .pd-fold .spec-list { margin: 2px 0 18px; }

/* Key features: short bullets under the buy box. */
.pd-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--espresso);
}
.pd-features li { padding-left: 20px; position: relative; }
.pd-features li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}
.pd-info > .pd-actions-note { margin-top: 8px; margin-bottom: 0; }

/* Phone: a slim "Add to Cart" bar once the main button has scrolled away
   (product.js shows it). Never on a computer - the buy box is beside the
   photos there. */
.pd-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 24px -16px rgba(60, 43, 34, 0.35);
  transform: translateY(110%);
  transition: transform 0.2s ease;
}
.pd-sticky.show { transform: none; }
.pd-sticky-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pd-sticky-name { font-size: 0.8rem; color: var(--espresso-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-sticky-price { font-family: var(--serif); font-size: 1.15rem; color: var(--terracotta-deep); }
.pd-sticky .btn { flex: none; padding-left: 22px; padding-right: 22px; }
@media (min-width: 881px) { .pd-sticky { display: none; } }
/* Room under the footer so the bar never covers its last line. */
@media (max-width: 880px) { body:has(.pd-sticky) { padding-bottom: 72px; } }
/* Phone: keep the name, price and Add to Cart close under the photo. */
@media (max-width: 600px) {
  .pd-gallery-thumbs { margin-top: 8px; gap: 8px; }
  .pd-gallery-thumbs img,
  .pd-gallery-thumbs .pd-thumb-video { flex-basis: 56px; width: 56px; }
  .product-page { padding-top: 8px; }
  .product-page .wrap { gap: 18px; }
  .pd-info .badge { margin-bottom: 8px; }
  .pd-meta { margin-bottom: 12px; }
  /* "$450  Retail Price $1,200" on one line. */
  .pd-price { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 12px; margin-bottom: 16px; }
  /* Long product names: one line of breadcrumb, not two. */
  .breadcrumb { white-space: nowrap; padding-top: 14px; font-size: 0.92rem; }
  .breadcrumb a, .breadcrumb-sep { flex: none; }
  .breadcrumb-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Address autocomplete (cart) ---------- */
.addr-field { position: relative; }
/* Set pages: "Delivery to your suburb" (js/product.js) */
.pd-suburb { margin: 4px 0 18px; }
.pd-suburb-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.pd-suburb input {
  width: 100%; font: inherit; font-size: 16px; color: var(--espresso); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px;
}
.pd-suburb input:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; border-color: transparent; }
.pd-suburb-result { font-size: 0.9rem; margin-top: 8px; }
.pd-suburb-result:empty { display: none; }
.quote-next { display: block; margin-top: 2px; font-weight: 600; color: var(--terracotta-deep); }
.addr-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.addr-option {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.addr-option:last-child { border-bottom: none; }
.addr-option:hover, .addr-option.active { background: var(--cream-deep); }
.addr-main { font-size: 0.92rem; color: var(--espresso); }
.addr-secondary { font-size: 0.78rem; color: var(--espresso-soft); }

.quote-result { font-size: 0.9rem; margin-top: 8px; min-height: 1.4em; }
.quote-result:empty { display: none; }
.quote-ok { color: var(--espresso); }
.quote-ok strong { color: var(--terracotta-deep); }
.quote-muted { color: var(--espresso-soft); }
.quote-warn { color: #8a3b24; }
.quote-result a { color: inherit; text-decoration: underline; }

/* ---------- Form fields (cart) ---------- */
.checkout-page input[type="text"],
.checkout-page input[type="tel"],
.checkout-page input[type="email"],
.checkout-page textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px stops iOS Safari zooming the page on focus */
  color: var(--espresso);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
}
/* Notes stretch down only - dragged sideways they ran over the order summary. */
.checkout-page textarea { resize: vertical; max-width: 100%; min-height: 64px; max-height: 220px; }
.checkout-page input:focus,
.checkout-page textarea:focus {
  outline: 2px solid var(--terracotta);
  outline-offset: 1px;
  border-color: transparent;
}
.field-label { display: block; font-size: 0.85rem; font-weight: 600; margin: 16px 0 6px; }
.field-label .optional { font-weight: 400; color: var(--espresso-soft); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row .field-label { margin-top: 16px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.field-hint { font-size: 0.82rem; color: var(--espresso-soft); margin: 10px 0 0; }

/* ---------- Cart / checkout page ---------- */
.checkout-page { padding-top: 12px; }
.checkout-title { font-size: 2rem; margin-bottom: 24px; }
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.checkout-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
@media (max-width: 600px) { .checkout-card { padding: 18px 16px; } }
.checkout-step { font-size: 1.25rem; margin-bottom: 14px; }
.checkout-notice {
  background: #f7e6dc;
  border: 1px solid #e7c3b1;
  color: #7a3522;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.92rem;
}
.checkout-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px 0 40px; }

.cart-items { list-style: none; padding: 0; margin: 0; }
.cart-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item:first-child { padding-top: 0; }
.cart-item img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; background: var(--cream-deep); }
.cart-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-item-name { font-weight: 600; text-decoration: none; }
.cart-item-name:hover { text-decoration: underline; }
.cart-item-sub { font-size: 0.82rem; color: var(--espresso-soft); }
.cart-item-remove {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 4px 0 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--espresso-soft);
  text-decoration: underline;
  cursor: pointer;
}
.cart-item-price { font-family: var(--serif); font-size: 1.1rem; color: var(--terracotta-deep); text-align: right; }
.cart-item-each { display: block; font-family: var(--sans); font-size: 0.75rem; color: var(--espresso-soft); margin-top: 2px; }
.cart-item-qty { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.cart-item-qty .cart-item-remove { padding: 0; align-self: center; }
.summary-sub { font-size: 0.78rem; color: var(--espresso-soft); margin: -2px 0 4px; text-align: right; }

/* "- 1 +" quantity picker (js/common.js qtyStepperHtml): product page + cart */
.qty-stepper {
  display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); overflow: hidden; height: 40px; flex: none;
}
.qty-stepper button {
  width: 40px; border: none; background: none; font: inherit; font-size: 1.15rem; line-height: 1;
  color: var(--espresso); cursor: pointer;
}
.qty-stepper button:hover:not(:disabled) { background: var(--cream-deep); }
.qty-stepper button:disabled { color: var(--line); cursor: default; }
.qty-stepper input {
  width: 38px; border: none; background: none; text-align: center; font: inherit; font-size: 16px; font-weight: 600;
  color: var(--espresso); -moz-appearance: textfield; appearance: textfield; padding: 0;
}
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-actions .qty-stepper { height: auto; min-height: 48px; }
.pd-actions .qty-stepper button { width: 46px; }
.checkout-continue { display: inline-block; margin-top: 14px; font-size: 0.88rem; font-weight: 600; color: var(--terracotta-deep); text-decoration: none; }
.checkout-continue:hover { text-decoration: underline; }

.choice-group { display: grid; gap: 10px; }
.choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  background: var(--paper);
}
.choice:hover { border-color: var(--espresso-soft); }
.choice.selected { border-color: var(--terracotta); box-shadow: 0 0 0 1px var(--terracotta); background: #fffaf5; }
.choice input { margin-top: 4px; accent-color: var(--terracotta); flex: none; }
.choice-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.choice-title { font-weight: 600; }
.choice-desc { font-size: 0.85rem; color: var(--espresso-soft); }

/* Checkout extras (js/checkout.js): assembly, "where did you find us?", free-delivery nudge */
.extra-option {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 16px;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; background: var(--paper);
}
.extra-option:hover { border-color: var(--espresso-soft); }
.extra-option.selected { border-color: var(--terracotta); box-shadow: 0 0 0 1px var(--terracotta); background: #fffaf5; }
.extra-option input { margin-top: 4px; accent-color: var(--terracotta); flex: none; width: 18px; height: 18px; }
.extra-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.extra-title { font-weight: 600; }
.extra-desc { font-size: 0.85rem; color: var(--espresso-soft); }
.extra-price { font-weight: 600; color: var(--terracotta-deep); text-align: right; white-space: nowrap; }
.extra-each { display: block; font-weight: 400; font-size: 0.75rem; color: var(--espresso-soft); }
.found-us { border: none; padding: 0; margin: 18px 0 0; min-width: 0; }
.found-us legend { padding: 0; }
.found-us-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Same as the booking form's "Where did you find us?" (.booking-found-chips) */
.found-chip {
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--espresso);
  font: inherit; font-size: 0.92rem; font-weight: 600; padding: 9px 12px; cursor: pointer; white-space: nowrap;
}
.found-chip:hover { border-color: var(--espresso-soft); }
.found-chip.selected { border-color: var(--terracotta); background: #fffaf5; color: var(--terracotta-deep); box-shadow: 0 0 0 1px var(--terracotta); font-weight: 600; }
.extras-label { margin-top: 18px; }
.extras-label + .extra-option { margin-top: 0; }
.extra-option + .extra-option { margin-top: 10px; }
.extra-option.locked { cursor: default; }
/* The delivery choice's rows (js/checkout.js planHtml): what, when, fee. */
.plan { display: grid; gap: 6px; margin-top: 8px; }
.plan-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; font-size: 0.88rem; }
.plan-row-one { grid-template-columns: 1fr auto; }
.plan-what { font-weight: 600; color: var(--espresso); }
.plan-when { color: var(--espresso-soft); }
.plan-fee { font-weight: 700; color: var(--espresso); }
.plan-fee.plan-free { color: var(--sage); }
/* "Free delivery over $1,000 within Sydney" (js/common.js freeNoteHtml) -
   the .free-badge pill on its own line, checkout and the set pages. */
.free-badge-row { display: block; margin-top: 4px; }
/* Free delivery over $1,000 - pushed (owner, 2 Nov 2026): the meter in the summary.
   Forest green, the brand's offer colour (Livesummers, 11 Nov 2026). */
.free-badge {
  display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--sale, #2e5339); color: #f6f1ea; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
}
.free-meter { margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--sale-tint, #e4ebe3); border: 1px solid #c9d6c8; }
.free-meter p { margin: 0 0 8px; font-size: 0.88rem; color: var(--espresso); }
.free-meter strong { color: var(--sale, #2e5339); }
.free-bar { height: 6px; border-radius: 999px; background: #c9d6c8; overflow: hidden; }
.free-bar span { display: block; height: 100%; border-radius: 999px; background: var(--sale, #2e5339); }
.free-meter.free-done { background: var(--sale-tint, #e4ebe3); border-color: #c9d6c8; }
.free-meter.free-done p { margin: 0; }
.free-meter.free-done strong { color: var(--sale, #2e5339); }

#delivery-fields { margin-top: 6px; }
.pickup-info {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--espresso-soft);
  background: var(--cream);
  border-radius: 10px;
  padding: 14px 16px;
}
.pickup-info strong { color: var(--espresso); }

.checkout-summary {
  position: sticky;
  top: 96px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
@media (max-width: 900px) { .checkout-summary { position: static; } }
.summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; padding: 5px 0; }
.summary-line span:first-child { color: var(--espresso-soft); }
.summary-total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.summary-total .summary-line { font-size: 1.05rem; font-weight: 700; }
.summary-total .summary-line span:first-child { color: var(--espresso); }
.summary-later .summary-line { font-size: 0.88rem; }
.summary-note { font-size: 0.75rem; color: var(--espresso-soft); margin: 6px 0 0; }
/* The voucher code (js/checkout.js renderVoucher). */
.voucher-box { margin-top: 14px; }
.voucher-link { background: none; border: 0; padding: 0; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--terracotta-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.voucher-row { display: flex; gap: 8px; align-items: stretch; }
.voucher-row input[type="text"] { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.voucher-row .btn { padding: 10px 18px; flex: none; }
.voucher-row .btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.voucher-msg { margin: 8px 0 0; font-size: 0.84rem; color: #8a3b24; }
.voucher-on { margin: 0; font-size: 0.88rem; color: var(--espresso); }
.voucher-on .voucher-link { margin-left: 6px; font-weight: 500; }
.voucher-saved { margin: 0; font-size: 0.95rem; color: var(--espresso-soft); }
.checkout-pay { width: 100%; justify-content: center; margin-top: 18px; }
.checkout-pay:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.checkout-error {
  margin-top: 12px;
  font-size: 0.86rem;
  color: #7a3522;
  background: #f7e6dc;
  border-radius: 8px;
  padding: 10px 12px;
}
.checkout-error a { color: inherit; }
.trust-list {
  list-style: none;
  padding: 16px 0 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--espresso-soft);
}
.trust-list li { padding-left: 22px; position: relative; }
.trust-list li::before { content: "✓"; position: absolute; left: 2px; color: var(--sage); font-weight: 700; }
.trust-list a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.checkout-help { font-size: 0.8rem; color: var(--espresso-soft); margin: 14px 0 0; }
.checkout-pay[hidden] { display: none; }

/* Embedded Stripe payment form step (js/checkout.js startPayment) */
.payment-step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.payment-back {
  background: none; border: none; padding: 0; font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--terracotta-deep); cursor: pointer;
}
.payment-back:hover { text-decoration: underline; }
.payment-step-note { font-size: 0.9rem; color: var(--espresso-soft); margin: 0 0 18px; }
.payment-step-note strong { color: var(--espresso); }
#checkout-form { min-height: 120px; }
.payment-terms { font-size: 0.85rem; color: var(--espresso-soft); margin: 16px 0 0; }
.payment-terms a { color: var(--terracotta-deep); }
.payment-secure { font-size: 0.8rem; color: var(--espresso-soft); margin: 16px 0 0; }
.payment-terms + .payment-secure { margin-top: 6px; }
.checkout-help a { color: var(--espresso); }

/* ---------- Order confirmation ---------- */
.order-confirm { max-width: 640px; padding: 20px 0 40px; }
.order-confirm h1 { font-size: 2.2rem; margin-bottom: 12px; }
.order-tick {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--sage);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 18px;
}
.order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.88rem;
  color: var(--espresso-soft);
  margin: 18px 0 28px;
}
.order-when { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--cream); font-size: 0.95rem; }
.order-help { font-size: 0.9rem; color: var(--espresso-soft); margin-bottom: 26px; }
.order-help a, .order-confirm .lede a { color: var(--terracotta-deep); }

/* ---------- Policies page ---------- */
.policy-page { padding-top: 12px; }
.policy-page .wrap { max-width: 820px; }
.policy-page h1 { font-size: 2.2rem; margin-bottom: 14px; }
.policy-page .lede a { color: var(--terracotta-deep); }
.policy-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 12px;
}
.policy-toc a {
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--paper);
}
.policy-toc a:hover { border-color: var(--terracotta); }
.policy-section { padding-top: 36px; border-bottom: 1px solid var(--line); padding-bottom: 30px; }
.policy-section:last-child { border-bottom: none; }
.policy-section h2 { font-size: 1.6rem; margin-bottom: 14px; }
.policy-section h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 20px 0 8px; }
.policy-section p, .policy-section li { color: var(--espresso-soft); font-size: 0.95rem; }
.policy-section ul { padding-left: 20px; display: grid; gap: 8px; margin: 0; }
.policy-section strong { color: var(--espresso); }
.policy-section a { color: var(--terracotta-deep); }
.policy-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 0.95rem; }
.policy-table th, .policy-table td { padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.policy-table th { text-align: left; font-weight: 400; color: var(--espresso-soft); padding-right: 16px; }
.policy-table td { text-align: right; color: var(--espresso-soft); }
.policy-acl {
  background: var(--paper);
  border-left: 3px solid var(--sage);
  padding: 12px 16px;
  font-size: 0.85rem !important;
  border-radius: 0 8px 8px 0;
}
.policy-about { display: grid; gap: 8px; font-size: 0.95rem; }
.policy-label {
  display: inline-block;
  min-width: 96px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--espresso-soft);
  font-weight: 600;
}
.policy-updated { font-size: 0.8rem !important; margin-top: 20px; }

/* ---------- Booking page (book.html, js/booking.js) ----------
   Calendly-style: info | calendar | times on desktop; info on top with the
   calendar and times side by side on a tablet; all stacked on a phone. */
.booking-section { padding: 8px 0 72px; }
.booking-title { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: 20px; }
.booking-card {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
@media (max-width: 980px) { .booking-card { grid-template-columns: 1fr; } }

/* Visit info */
.booking-info { padding: 28px 26px; border-right: 1px solid var(--line); background: var(--cream); }
@media (max-width: 980px) { .booking-info { border-right: none; border-bottom: 1px solid var(--line); } }
.booking-info .eyebrow { margin-bottom: 6px; }
.booking-info h2 { font-size: 1.45rem; margin-bottom: 8px; }
.booking-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.booking-meta span {
  font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); color: var(--espresso-soft);
}
.booking-facts { margin: 0; display: grid; gap: 16px; }
@media (max-width: 980px) and (min-width: 641px) { .booking-facts { grid-template-columns: repeat(3, 1fr); } }
.booking-facts dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 3px; }
.booking-facts dd { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.booking-facts dd span { display: block; font-size: 0.8rem; color: var(--espresso-soft); margin-top: 2px; }
.booking-facts a { color: var(--espresso); }
/* Phone: the page title already says what this is, so drop the repeated
   heading, and lay each fact out as one row - label left, detail right -
   instead of a label line above every block. */
@media (max-width: 640px) {
  .booking-info .eyebrow, .booking-info h2 { display: none; }
  .booking-meta { margin-bottom: 14px; }
  .booking-facts { gap: 10px; }
  .booking-facts > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: baseline; }
  .booking-facts dt { margin: 0; }
  .booking-facts dd { font-size: 0.86rem; overflow-wrap: anywhere; }
}

/* Calendar + times */
.booking-main { padding: 26px; min-width: 0; }
@media (max-width: 640px) { .booking-main, .booking-info { padding: 20px 16px; } }
.booking-loading, .booking-empty, .booking-hint { color: var(--espresso-soft); margin: 0; }
.booking-empty a { color: var(--terracotta-deep); }
.booking-set { margin: 0 0 16px; font-size: 0.9rem; color: var(--espresso-soft); }
.booking-set strong { color: var(--espresso); }
.booking-pick { display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 640px) { .booking-pick { grid-template-columns: 1fr; gap: 22px; } }

.booking-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.booking-cal-month { font-size: 1.2rem; }
.booking-cal-month span { color: var(--espresso-soft); font-weight: 400; }
.booking-cal-nav { display: flex; gap: 4px; }
.booking-cal-arrow {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  font-size: 1.2rem; line-height: 1; color: var(--espresso); cursor: pointer;
}
.booking-cal-arrow:hover:not(:disabled) { border-color: var(--espresso-soft); }
.booking-cal-arrow:disabled { opacity: 0.35; cursor: default; }
.booking-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.booking-cal-wd { font-size: 0.72rem; font-weight: 600; color: var(--espresso-soft); padding: 4px 0 6px; }
.booking-cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font: inherit; font-size: 0.92rem;
  border: none;
  position: relative;
}
button.booking-cal-day {
  background: rgba(181, 88, 59, 0.1);
  color: var(--terracotta-deep);
  font-weight: 700;
  cursor: pointer;
}
button.booking-cal-day:hover { background: rgba(181, 88, 59, 0.2); }
.booking-cal-day.selected, button.booking-cal-day.selected:hover { background: var(--terracotta); color: #fff8f2; }
.booking-cal-day.unavailable { color: #b9a999; }
/* A small dot marks today. */
.booking-cal-day.today::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 999px; background: currentColor;
}
.booking-cal-key { font-size: 0.75rem; color: var(--espresso-soft); margin: 12px 0 0; }

.booking-times-title { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; margin: 6px 0 12px; }
.booking-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .booking-times { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .booking-times { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.booking-time {
  padding: 11px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font: inherit; font-size: 0.92rem; font-weight: 600;
  color: var(--espresso);
  cursor: pointer;
}
.booking-time:hover { border-color: var(--terracotta); color: var(--terracotta-deep); }
.booking-cal-day:focus-visible, .booking-time:focus-visible, .booking-cal-arrow:focus-visible, .booking-back:focus-visible {
  outline: 2px solid var(--terracotta); outline-offset: 2px;
}

/* Details step */
.booking-form { max-width: 460px; }
.booking-back {
  background: none; border: none; padding: 0; margin-bottom: 14px; font: inherit; font-size: 0.88rem;
  font-weight: 600; color: var(--terracotta-deep); cursor: pointer;
}
.booking-back:hover { text-decoration: underline; }
.booking-chosen { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 18px; }
.booking-chosen span { display: block; font-family: var(--sans); font-size: 0.95rem; color: var(--espresso-soft); margin-top: 2px; }
.booking-fields { display: grid; gap: 12px; }
.booking-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; }
.booking-fields input, .booking-fields textarea {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--espresso);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
}
.booking-fields textarea { resize: vertical; min-height: 76px; }
.booking-fields input:focus, .booking-fields textarea:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; border-color: transparent; }
.booking-fields label span { font-weight: 400; color: var(--espresso-soft); }
.booking-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* "Where did you find us?" - optional, one tap (owner, 20 Oct 2026). */
.booking-found { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.booking-found legend { font-size: 0.85rem; font-weight: 600; padding: 0; margin-bottom: 8px; }
.booking-found legend span { font-weight: 400; color: var(--espresso-soft); }
.booking-found-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.booking-found-chips .booking-time { padding: 9px 12px; }
.booking-error { margin: 12px 0; font-size: 0.88rem; color: #7a3522; background: #f7e6dc; border-radius: 8px; padding: 10px 12px; }
.booking-error a { color: inherit; }
.booking-submit { margin-top: 16px; width: 100%; justify-content: center; }
.booking-submit:disabled { opacity: 0.6; cursor: default; transform: none; }
.booking-small { font-size: 0.78rem; color: var(--espresso-soft); margin: 10px 0 0; text-align: center; }

/* Booked */
.booking-done { text-align: center; padding: 16px 0; }
.booking-done h2 { font-size: 1.8rem; margin-bottom: 4px; }
.booking-done-when { font-family: var(--serif); font-size: 1.3rem; color: var(--terracotta-deep); margin: 0 0 14px; }
.booking-done p { color: var(--espresso-soft); max-width: 460px; margin: 0 auto 12px; }
.booking-done a:not(.btn) { color: var(--terracotta-deep); }
.booking-done .btn { margin-top: 6px; }
.booking-done-tips {
  list-style: none; padding: 14px 16px; margin: 4px auto 18px; max-width: 460px; text-align: left;
  display: grid; gap: 10px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px;
  font-size: 0.9rem; color: var(--espresso-soft);
}
.booking-done-tips strong { color: var(--espresso); }
.booking-tick {
  width: 56px; height: 56px; border-radius: 999px; background: var(--sage); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 14px;
}

/* ---------- /manage (private records page) ---------- */
/* Room for the scrollbar is kept even on short tabs, so the page doesn't
   shift sideways when switching between a short tab and a long one. */
html.mg-page { scrollbar-gutter: stable; }
body.mg { background: var(--cream); padding-bottom: 60px; }
.mg-bar { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
/* The header and tabs are the wide tabs' width on every tab (only the page
   content below narrows), so they stay put when switching tabs. */
.mg-bar-inner { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; }
.mg-brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.15rem; text-decoration: none; }
.mg-brand img { height: 28px; }
.mg-site-link { font-size: 0.82rem; color: var(--espresso-soft); }
.mg-bar-links { display: flex; align-items: center; gap: 10px; }
.mg-refresh { width: 44px; height: 44px; margin: -6px -10px -6px 0; border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--espresso); cursor: pointer; }
.mg-update-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--espresso); color: var(--cream); font-size: 0.88rem; }
.mg-update-bar[hidden] { display: none; }
.mg-version { margin: 14px 0 0; font-size: 0.78rem; color: var(--espresso-soft); text-align: center; }
.mg-test-banner { background: #f3d36b; color: #4a3b00; text-align: center; font-size: 0.8rem; font-weight: 700; padding: 6px 16px; }
.mg-tabs { max-width: 1120px; margin: 0 auto; display: flex; gap: 4px; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; }
.mg-tabs::-webkit-scrollbar { display: none; }
.mg-tabs button {
  flex: none; font: inherit; font-size: 0.85rem; font-weight: 600; border: none; background: none;
  padding: 8px 10px; border-radius: 999px; color: var(--espresso-soft); cursor: pointer;
}
.mg-tabs button.active { background: var(--espresso); color: var(--cream); }
.mg-main { max-width: 760px; margin: 0 auto; padding: 18px 16px; }
/* The site-wide "section { padding: 84px 0 }" is for marketing pages. */
.mg-panel { padding: 0; }
.mg-h1 { font-size: 1.5rem; margin-bottom: 6px; }
.mg-h2 { font-size: 1.15rem; margin: 28px 0 10px; }
.mg-h2-note { font-family: var(--sans); font-size: 0.78rem; color: var(--espresso-soft); font-weight: 400; }
.mg-lede { color: var(--espresso-soft); font-size: 0.9rem; margin: 0 0 16px; }
.mg-hint { color: var(--espresso-soft); font-size: 0.8rem; margin: 4px 0 0; }
.mg-empty { color: var(--espresso-soft); font-size: 0.9rem; }
.mg-muted { color: var(--espresso-soft); font-size: 0.84rem; }

.mg-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mg-month h1 { font-size: 1.4rem; }
.mg-icon-btn {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--espresso);
}
.mg-icon-btn:disabled { opacity: 0.35; cursor: default; }

.mg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 520px) { .mg-stats { grid-template-columns: repeat(2, 1fr); } }
.mg-stat { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.mg-stat span { font-size: 0.75rem; color: var(--espresso-soft); }
.mg-stat strong { font-size: 1.2rem; font-family: var(--serif); font-weight: 500; }
.mg-stat-pos strong { color: var(--sage); }
.mg-stat-neg strong { color: #a13d24; }
.mg-stat-warn { background: #fbf1d8; border-color: #ecd9a4; }
.mg-stats-small .mg-stat strong { font-size: 1.05rem; }
.mg-channels { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8rem; color: var(--espresso-soft); margin-top: 10px; }
.mg-channels strong { color: var(--espresso); }

.mg-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.mg-due-top { font-size: 0.95rem; margin-bottom: 2px; }
.mg-due-actions, .mg-rec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.8rem; color: var(--espresso-soft); }
.mg-small-btn {
  font: inherit; font-size: 0.8rem; font-weight: 600; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--cream); color: var(--espresso); cursor: pointer; text-decoration: none;
}
.mg-small-btn:hover { border-color: var(--espresso-soft); }
.mg-small-btn:disabled { opacity: 0.5; }
.mg-danger { color: #a13d24; }

.mg-table-card { padding: 4px 14px; }
.mg-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mg-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--espresso-soft); font-weight: 600; padding: 8px 0; }
.mg-table th:last-child, .mg-table td:last-child { text-align: right; }
.mg-table td { padding: 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
.mg-sku { display: block; font-size: 0.72rem; color: var(--espresso-soft); }
.mg-num { font-weight: 700; font-size: 1.05rem; }
.mg-num.warn { color: #a36a00; }
.mg-num.neg { color: #a13d24; }
.mg-held { display: block; font-size: 0.7rem; font-weight: 400; color: var(--espresso-soft); }

.mg-form { display: flex; flex-direction: column; gap: 14px; }
.mg-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; font-weight: 600; flex: 1; min-width: 0; }
.mg-form input[type="text"], .mg-form input[type="email"], .mg-form input[type="number"], .mg-form input[type="date"], .mg-form input[type="time"], .mg-form select,
.mg-inline select, .mg-backup select {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--espresso); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%;
  height: 48px; /* one height for every box - date pickers otherwise come out taller */
}
.mg-form input:disabled { background: var(--cream-deep); }
.mg-row { display: flex; gap: 10px; align-items: flex-end; }
.mg-opt { font-weight: 400; color: var(--espresso-soft); }
.mg-req { font-weight: 600; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--terracotta-deep); margin-left: 4px; }

/* Product editor: how the product shows as a Google / Meta ad. */
.mg-adprev { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: start; margin: 10px 0 18px; }
@media (max-width: 700px) { .mg-adprev { grid-template-columns: 1fr; } }
.mg-adprev-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px -12px rgba(60, 43, 34, 0.35); font-family: Arial, Helvetica, sans-serif; }
.mg-adprev-card img, .mg-adprev-nophoto { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--cream-deep); }
.mg-adprev-nophoto { display: flex; align-items: center; justify-content: center; color: var(--espresso-soft); font-size: 0.85rem; }
.mg-adprev-body { padding: 10px 12px 12px; display: grid; gap: 3px; }
.mg-adprev-title { font-size: 0.9rem; color: #1a0dab; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mg-adprev-price { font-weight: 700; color: #202124; font-size: 0.95rem; }
.mg-adprev-store { font-size: 0.8rem; color: #202124; }
.mg-adprev-meta { font-size: 0.78rem; color: #188038; }
.mg-adprev-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 0.85rem; }
.mg-adprev-checks li { padding-left: 24px; position: relative; color: var(--espresso); }
.mg-adprev-checks li::before { position: absolute; left: 0; font-weight: 700; }
.mg-adprev-checks li.ok::before { content: "✓"; color: var(--sage); }
.mg-adprev-checks li.todo::before { content: "!"; color: var(--terracotta-deep); left: 5px; }

/* Product editor: the Google & Meta overview at the top. */
.mg-ov { background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 0 0 18px; }
.mg-ov-head h2 { font-size: 1.05rem; margin: 0 0 2px; }
.mg-ov-head .mg-hint { margin: 0 0 14px; }
.mg-ov-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 700px) { .mg-ov-grid { grid-template-columns: 1fr; } }
.mg-ov-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; padding: 0 10px 10px; }
.mg-ov-more .mg-ov-thumbs { padding: 6px 0 0; }
.mg-ov-thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; background: var(--cream-deep); }
.mg-ov-info { display: grid; gap: 10px; min-width: 0; }
.mg-ov-more { border-top: 1px solid var(--line); padding-top: 8px; font-size: 0.86rem; }
.mg-ov-more summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: 6px; }
.mg-ov-more p, .mg-ov-more ul { margin: 6px 0 0; color: var(--espresso); line-height: 1.5; }
.mg-ov-more ul { padding-left: 18px; }
.mg-ov-sec { margin: 12px 0 4px; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--espresso-soft); }
.mg-ov-dl { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 0.85rem; }
.mg-ov-dl dt { font-weight: 600; color: var(--espresso); }
.mg-ov-dl dd { margin: 0; color: var(--espresso); overflow-wrap: anywhere; }
.mg-ov-fixed { font-size: 0.7rem; color: var(--espresso-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; white-space: nowrap; }
.mg-ov-meta { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; margin-top: 6px; }
.mg-ov-meta img { width: 90px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
.mg-ov-meta p { margin: 4px 0 0; }
.mg-fixed { background: var(--cream); border-radius: 10px; padding: 10px 12px; }
.mg-form fieldset { border: none; padding: 0; margin: 0; }
.mg-form legend { font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; padding: 0; }
.mg-check { flex-direction: row !important; align-items: center; gap: 8px !important; min-height: 44px; font-weight: 400 !important; }
.mg-check input { width: 20px; height: 20px; accent-color: var(--terracotta); }
.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-chips button {
  font: inherit; font-size: 0.86rem; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); color: var(--espresso); cursor: pointer;
}
.mg-chips button.active { background: var(--terracotta); border-color: var(--terracotta); color: #fff8f2; font-weight: 600; }
.mg-chips-tabs { margin-bottom: 12px; }
.mg-submit { justify-content: center; width: 100%; margin-top: 4px; }
.mg-submit:disabled { opacity: 0.6; }

.mg-receipt-pick { position: relative; border: 2px dashed var(--line); border-radius: 12px; padding: 22px 14px; text-align: center; cursor: pointer; background: var(--paper); }
.mg-receipt-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mg-receipt-pick span { font-size: 0.95rem; }
.mg-receipt-preview { max-height: 220px; width: auto; margin: 0 auto; border-radius: 8px; border: 1px solid var(--line); }
.mg-receipt-preview[hidden] { display: none; } /* beats the global img { display: block } */

.mg-inline { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; margin-bottom: 12px; }
.mg-inline select { width: auto; }
.mg-rec-top { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--espresso-soft); margin-bottom: 2px; }
.mg-rec-top strong { font-size: 1rem; color: var(--espresso); }
.mg-rec-returned { opacity: 0.6; }
.mg-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mg-tag { font-size: 0.7rem; font-weight: 600; background: var(--cream-deep); border-radius: 999px; padding: 3px 9px; }
.mg-tag-warn { background: #fbf1d8; color: #7a5200; }
.mg-tag-neg { background: #f7e0d7; color: #8a3b24; }
.mg-tag-claude { background: #ece4f4; color: #5a3f7a; }
/* The Claude connector card on the Overview (js/manage.js renderClaude). */
.mg-code { font-size: 0.8rem; background: var(--cream-deep); border-radius: 6px; padding: 6px 8px; word-break: break-all; }
.mg-activity { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.85rem; }
.mg-activity li { padding: 5px 0; border-top: 1px solid var(--line); }
.mg-activity li span { color: var(--espresso-soft); font-size: 0.75rem; margin-right: 4px; }
.mg-backup { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mg-backup select { width: auto; flex: 1; min-width: 200px; }

.mg-stock-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.mg-stock-tools input, .mg-stock-tools select {
  font: inherit; font-size: 16px; color: var(--espresso); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; min-height: 42px;
}
.mg-stock-tools input { flex: 1; min-width: 0; }
.mg-day { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; margin: 20px 0 8px; }
.mg-day span { font-weight: 400; color: var(--espresso-soft); }
.mg-booking { display: flex; gap: 14px; align-items: flex-start; }
.mg-booking-time { font-family: var(--serif); font-size: 1.15rem; min-width: 64px; flex-shrink: 0; }
.mg-booking-until { display: block; font-family: var(--sans); font-size: 0.75rem; color: var(--espresso-soft); }
.mg-chip-n { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--cream-deep); color: var(--espresso); font-size: 0.75rem; font-weight: 600; line-height: 20px; }
.mg-booking-photo { display: block; width: 72px; height: 72px; margin-top: 10px; border-radius: 10px; object-fit: cover; background: var(--cream); }
.mg-booking-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mg-address { font-size: 0.9rem; color: var(--espresso); -webkit-user-select: text; user-select: text; }
/* Bookings › To deliver › Delivery route (src/route-plan.js; redesigned
   10 Nov 2026 - owner: "clear and concise ... check mobile") */
.mg-route { padding: 16px; margin: 4px 0 20px; border-radius: var(--radius); box-shadow: 0 8px 24px -18px rgba(60, 43, 34, 0.35); }
.mg-route-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
/* Folds when nothing is due (11 Nov 2026). */
summary.mg-route-head { list-style: none; cursor: pointer; margin: 0; }
summary.mg-route-head::-webkit-details-marker { display: none; }
summary.mg-route-head .mg-route-title::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 3px 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.mg-route[open] summary.mg-route-head { margin-bottom: 8px; }
.mg-route[open] summary.mg-route-head .mg-route-title::before { transform: rotate(45deg); margin-bottom: 5px; }
details.mg-route { padding: 14px 16px; }
.mg-route-title { font-size: 1.15rem; margin: 0; }
.mg-route-count { font-size: 0.8rem; color: var(--espresso-soft); }
.mg-route-stops { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mg-route-pick { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 0.92rem; }
.mg-route-pick input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--terracotta); }
.mg-route-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-route-pick .mg-route-sub { margin-left: auto; text-align: right; flex: none; max-width: 40%; }
.mg-route-pick { padding: 8px 0; }
.mg-route-who { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mg-route-later .mg-route-name { color: var(--espresso-soft); font-weight: 500; }
.mg-route-sets { display: block; font-size: 0.78rem; color: var(--espresso-soft); line-height: 1.4; }
.mg-route-pre { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; background: #e9ecdf; color: #4a5636; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; line-height: 18px; vertical-align: 1px; }
.mg-route-when { color: #7a5200; font-weight: 600; }
.mg-route-load { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.mg-route-load-label { flex: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--espresso-soft); }
.mg-route-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-route-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--cream-deep); font-size: 0.8rem; font-weight: 600; }
.mg-route-chip small { font-size: 0.66rem; font-weight: 700; color: #4a5636; }
.mg-route-chip-pre { background: #e9ecdf; }
.mg-route-info .mg-route-sets { margin-top: 1px; }
.mg-route-sub { font-size: 0.8rem; color: var(--espresso-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mg-route-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.mg-route-leave { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; }
.mg-route-leave input { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--espresso); min-height: 40px; }
.mg-route-leave input[type="number"] { width: 72px; }
.mg-route-switch { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; min-height: 40px; cursor: pointer; }
.mg-route-more { margin-top: 6px; font-size: 0.85rem; }
.mg-route-more summary, .mg-route-times summary { cursor: pointer; color: var(--espresso-soft); padding: 8px 0; list-style-position: inside; }
.mg-route-more .mg-route-opts { margin-top: 4px; }
.mg-route-go { width: 100%; margin-top: 12px; display: flex; justify-content: center; text-align: center; }
.mg-route-warn { color: #7a5200; font-weight: 600; }
.mg-route-result:not(:empty) { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.mg-route-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.mg-route-stats div { background: var(--cream); border-radius: 10px; padding: 8px 10px; }
.mg-route-stats strong { display: block; font-size: 1.05rem; }
.mg-route-stats span { font-size: 0.74rem; color: var(--espresso-soft); }
.mg-route-note { margin: 8px 0 0; font-size: 0.82rem; color: var(--sage); font-weight: 600; }
.mg-route-line { list-style: none; margin: 16px 0 14px; padding: 0; position: relative; }
.mg-route-line::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.mg-route-stop { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 0.92rem; }
.mg-route-dot { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--terracotta); color: #fff8f2; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mg-route-end .mg-route-dot { background: var(--paper); border: 2px solid var(--line); width: 24px; height: 24px; }
.mg-route-end { color: var(--espresso-soft); font-size: 0.85rem; }
.mg-route-info { flex: 1; min-width: 0; line-height: 1.35; }
.mg-route-info .mg-route-sub { display: block; white-space: normal; }
.mg-route-text { flex: none; }
.mg-route-maps { width: 100%; display: flex; justify-content: center; }
.mg-route-hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--espresso-soft); text-align: center; }
.mg-route-times { margin-top: 10px; border-top: 1px solid var(--line); font-size: 0.88rem; }
.mg-route-times summary { color: var(--espresso); }
.mg-route-times .mg-table { margin-top: 4px; }
.mg-route-times .mg-route-hint { text-align: left; }
.mg-route-chosen td { font-weight: 700; }
#mg-block-times[hidden] { display: none; }

.mg-toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60;
  background: var(--espresso); color: var(--cream); padding: 12px 18px; border-radius: 12px;
  font-size: 0.9rem; box-shadow: var(--shadow); max-width: calc(100% - 32px);
}
.mg-toast-error { background: #8a3b24; }

/* ---------- /manage: Products + Reviews (js/manage-catalog.js) ---------- */
/* Built for a computer screen: these two tabs use the full width. */
body.mg-wide .mg-main { max-width: 1120px; }
.mg-publish-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: #fbf1d8; border-top: 1px solid #ecd9a4; padding: 7px 16px; font-size: 0.84rem; color: #5a4200;
}
.mg-publish-bar[hidden] { display: none; }
.mg-publish-btn {
  font: inherit; font-size: 0.82rem; font-weight: 700; border: none; border-radius: 999px; padding: 7px 14px;
  background: var(--terracotta); color: #fff8f2; cursor: pointer;
}
.mg-publish-btn:hover { background: var(--terracotta-deep); }
.mg-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.mg-cat-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mg-btn-sm { padding: 9px 16px; font-size: 0.86rem; }
.mg-ptable tbody tr { cursor: pointer; }
.mg-ptable tbody tr:hover td { background: var(--cream); }
.mg-ptable td, .mg-ptable th { padding-right: 12px; vertical-align: middle; }
.mg-ptable th:last-child, .mg-ptable td:last-child { padding-right: 0; }
.mg-drag { width: 22px; color: var(--espresso-soft); cursor: grab; user-select: none; letter-spacing: -2px; }
.mg-dragging { opacity: 0.4; }
.mg-thumb-cell { width: 58px; }
.mg-thumb-cell img, .mg-thumb-empty { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--cream-deep); display: block; }
.mg-row-removing td { opacity: 0.55; text-decoration: line-through; }
.mg-review-text { max-width: 420px; color: var(--espresso-soft); font-size: 0.85rem; }
@media (max-width: 700px) {
  .mg-ptable th:nth-child(4), .mg-ptable td:nth-child(4), .mg-review-text { display: none; }
}
.mg-pill { display: inline-block; font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; vertical-align: middle; font-family: var(--sans); }
.mg-pill-new { background: #dfe9d3; color: #3f5227; }
.mg-pill-changed { background: #fbf1d8; color: #7a5200; }
.mg-pill-removing { background: #f7e0d7; color: #8a3b24; }
.mg-link-btn { font: inherit; font-size: 0.85rem; font-weight: 600; background: none; border: none; padding: 4px 0; color: var(--terracotta); cursor: pointer; }
.mg-link-btn:hover { text-decoration: underline; }
.mg-warn-box { background: #f7e0d7; color: #8a3b24; border-radius: 10px; padding: 10px 14px; font-size: 0.88rem; }

/* Editor */
.mg-ed-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mg-ed-top-actions { display: flex; gap: 6px; }
.mg-ed { gap: 18px; margin-top: 12px; }
.mg-ed .mg-ed-sec { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.mg-ed .mg-ed-sec legend { float: left; width: 100%; font-family: var(--serif); font-size: 1.1rem; font-weight: 500; margin: 0 0 2px; }
.mg-ed .mg-ed-sec legend + * { clear: both; }
.mg-ed-sec > .mg-small-btn { align-self: flex-start; }
.mg-ed-h3 { font-family: var(--sans); font-size: 0.86rem; font-weight: 700; margin: 6px 0 -6px; }
.mg-ed textarea {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--espresso); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; resize: vertical; line-height: 1.5;
}
.mg-ed input[readonly] { background: var(--cream-deep); color: var(--espresso-soft); }
/* Editor rows: a shared grid, so every field's label, box and hint sit on
   the same three lines as its neighbours' - however long a label or hint
   is. Fields wrap onto new lines on narrow screens. (js/manage-catalog.js
   field() / slot() make the label / box / hint.) */
.mg-ed .mg-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  column-gap: 12px; row-gap: 6px; align-items: start;
}
.mg-ed .mg-row > label, .mg-ed .mg-row > .mg-field {
  grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 6px;
  min-width: 0; margin-bottom: 4px;
}
.mg-ed .mg-row > * > span:first-child { align-self: end; }
.mg-ed .mg-row > [hidden] { display: none; }
.mg-field { font-size: 0.82rem; font-weight: 600; }
.mg-field > .mg-check { min-height: 48px; align-self: center; }
.mg-field > button { align-self: center; justify-self: start; }
.mg-field-btn { justify-items: start; }
.mg-ed small.mg-hint { font-weight: 400; }
/* Collections / weaves: tick boxes, chips, the colour square, badges. */
.mg-checks { display: flex; flex-wrap: wrap; column-gap: 18px; }
.mg-checks .mg-check { min-height: 36px; }
.mg-groups { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mg-groups .mg-sku { flex-basis: 100%; }
.mg-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--cream-deep); border: 1px solid var(--line); font-size: 0.78rem; font-weight: 400; color: var(--espresso); white-space: nowrap; }
.mg-chip-btn { cursor: pointer; font: inherit; font-size: 0.82rem; padding: 5px 11px; }
.mg-chip-btn:hover { border-color: var(--terracotta); }
.mg-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; border: 1px solid rgba(60, 43, 34, 0.25); margin-right: 5px; vertical-align: -1px; }
.mg-form input.mg-colour { width: 64px; height: 44px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.mg-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.mg-prefix { display: flex; align-items: stretch; }
.mg-prefix span { display: flex; align-items: center; padding: 0 10px; background: var(--cream-deep); border: 1px solid var(--line); border-right: none; border-radius: 10px 0 0 10px; font-weight: 400; color: var(--espresso-soft); font-size: 0.9rem; }
.mg-prefix input { border-radius: 0 10px 10px 0 !important; }
.mg-ed-save {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--cream); border-top: 1px solid var(--line); padding: 12px 0;
}
.mg-specs { display: flex; flex-direction: column; gap: 8px; }
.mg-spec-row { display: grid; grid-template-columns: 1fr 2fr auto auto; gap: 8px; align-items: center; }
.mg-icon-sm {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream);
  font-size: 1rem; line-height: 1; cursor: pointer; color: var(--espresso);
}
.mg-icon-sm:disabled { opacity: 0.35; cursor: default; }
.mg-variant { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
/* Option rows: name, SKU, price, retail, barcode, remove. */
.mg-variant .mg-row { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) auto; }
@media (max-width: 760px) { .mg-variant .mg-row { grid-template-columns: 1fr 1fr; } }
.mg-variant-photos { display: flex; flex-direction: column; gap: 6px; }

/* Photo/video tiles */
.mg-media { display: flex; flex-wrap: wrap; gap: 10px; }
.mg-tile {
  position: relative; width: 112px; height: 112px; border-radius: 10px; overflow: hidden;
  background: var(--cream-deep); border: 1px solid var(--line); cursor: grab;
}
.mg-tile img { width: 100%; height: 100%; object-fit: cover; }
.mg-tile-x {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 999px; border: none;
  background: rgba(40, 28, 22, 0.75); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer;
}
.mg-tile-tag { position: absolute; left: 4px; bottom: 4px; font-size: 0.66rem; font-weight: 700; background: var(--terracotta); color: #fff8f2; border-radius: 999px; padding: 2px 7px; }
.mg-tile-vid { width: 100%; height: 100%; object-fit: cover; display: block; background: #2a1f19; pointer-events: none; }
.mg-tile-play { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 999px; background: rgba(40, 28, 22, 0.7); color: #fff; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* "Use in" / "Plays in" label under a tile's photo. */
.mg-form .mg-media .mg-tile-role { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 24px; min-height: 0; margin: 0;
  font-size: 0.66rem; line-height: 1; padding: 0 4px; border: 0; border-radius: 0; border-top: 1px solid var(--line); box-shadow: none;
  background: rgba(255, 250, 244, 0.94); color: var(--espresso); cursor: pointer; }
/* A tile that's in use for a section stands out. */
.mg-form .mg-media .mg-tile-role.on { background: var(--terracotta); color: #fff8f2; font-weight: 700; border-top-color: var(--terracotta); }
.mg-tile:has(.mg-tile-role) .mg-tile-tag { bottom: 26px; }
.mg-tile-edit, .mg-tile-restore { position: absolute; top: 4px; width: 26px; height: 26px; border-radius: 999px; border: none; background: rgba(40, 28, 22, 0.75); color: #fff; font-size: 0.85rem; line-height: 1; cursor: pointer; }
.mg-tile-edit { left: 4px; }
.mg-tile-restore { left: 34px; background: var(--terracotta); }
.mg-tile-edit:hover, .mg-tile-restore:hover { background: var(--espresso); }
.mg-tile-video { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; font-size: 1.6rem; color: var(--espresso-soft); gap: 4px; }
.mg-tile-video small { font-size: 0.62rem; word-break: break-all; padding: 0 6px; text-align: center; }
.mg-form .mg-tile-add {
  display: flex; flex-direction: row; align-items: center; justify-content: center; text-align: center; border-style: dashed;
  border-width: 2px; background: var(--paper); cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--espresso-soft); flex: none;
}
.mg-tile-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mg-tile-add:hover { border-color: var(--terracotta); color: var(--terracotta); }
.mg-tile-busy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: default; }
.mg-tile-busy span { font-weight: 700; font-size: 1.05rem; }
.mg-tile-busy small { font-size: 0.62rem; color: var(--espresso-soft); }

/* Review & publish */
.mg-dialog {
  width: min(680px, calc(100% - 24px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 24px); overflow-y: auto;
  overscroll-behavior: contain; border: none; border-radius: 16px;
  padding: 0; background: var(--paper); color: var(--espresso); box-shadow: var(--shadow);
}
.mg-dialog::backdrop { background: rgba(40, 28, 22, 0.45); }
.mg-dialog-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--paper); border-bottom: 1px solid var(--line); }
.mg-dialog-head h2 { font-size: 1.25rem; }
#mg-publish-body { padding: 14px 18px 18px; }
.mg-pub-h { font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--espresso-soft); margin: 14px 0 6px; }
.mg-pub-lines { list-style: none; margin: 0; padding: 0; }
.mg-pub-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.mg-pub-errors { background: #f7e0d7; color: #6e2c19; border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.mg-pub-errors h3 { font-family: var(--sans); font-size: 0.9rem; margin-bottom: 4px; }
.mg-pub-errors ul { margin: 0; padding-left: 18px; font-size: 0.88rem; }
.mg-pub-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.mg-history { margin-top: 18px; font-size: 0.88rem; }
.mg-history summary { cursor: pointer; font-weight: 600; }
.mg-history ul { list-style: none; margin: 8px 0 0; padding: 0; }
.mg-history li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }

/* Records: "Returned or cancelled" (js/manage.js returnDialog) */
.mg-return { width: min(480px, calc(100% - 24px)); }
.mg-return-body { padding: 14px 18px 18px; display: grid; gap: 14px; font-size: 0.92rem; }
.mg-return-body p { margin: 0; color: var(--espresso-soft); }
.mg-return-fee { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; margin: 0; display: grid; gap: 10px; }
.mg-return-fee legend { font-weight: 700; padding: 0 4px; }
.mg-return-fee label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.mg-return-fee input { margin-top: 3px; accent-color: var(--terracotta); }
.mg-return-note { display: grid; gap: 6px; font-weight: 600; }
.mg-return-note input { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.mg-return .mg-pub-actions { margin-top: 0; justify-content: flex-start; }

/* Booking: "Please check your booking" box (js/booking.js confirmBooking) */
.booking-confirm {
  width: min(420px, calc(100% - 32px)); border: none; border-radius: 16px; padding: 22px 22px 18px;
  background: var(--paper); color: var(--espresso); box-shadow: var(--shadow);
}
.booking-confirm::backdrop { background: rgba(40, 28, 22, 0.45); }
.booking-confirm h2 { font-size: 1.3rem; margin-bottom: 12px; }
.booking-confirm-list { margin: 0 0 12px; display: grid; gap: 8px; }
.booking-confirm-list div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.booking-confirm-list dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracotta-deep); }
.booking-confirm-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.booking-confirm-list dd span { font-weight: 400; color: var(--espresso-soft); }
.booking-confirm-note { font-size: 0.85rem; color: var(--espresso-soft); margin: 0 0 16px; }
.booking-confirm-warn { font-size: 0.85rem; background: #fbf1d8; color: #6b4a00; border-radius: 10px; padding: 8px 12px; margin: 0 0 16px; }
.booking-confirm-private { font-size: 0.85rem; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: -4px 0 16px; }
.booking-confirm-actions { display: flex; flex-direction: column; gap: 8px; }
.booking-confirm-actions .btn { justify-content: center; width: 100%; }
.booking-cal-label { margin: 18px 0 8px; font-size: 0.85rem; color: var(--espresso-soft); }
.booking-cal-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---------- Photo editor (public/js/manage-photo-edit.js) ---------- */
.pe-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(28, 20, 16, 0.82); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pe-box { background: var(--cream, #fbf7f1); border-radius: 14px; width: min(1180px, 100%); height: min(760px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 300px; overflow: hidden; }
.pe-stage { position: relative; background: #2a1f19; display: flex; align-items: center; justify-content: center; padding: 18px; min-height: 0; }
.pe-stage canvas { display: block; cursor: grab; touch-action: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.pe-stage canvas:active { cursor: grabbing; }
.pe-grid { position: absolute; pointer-events: none; background-image:
  linear-gradient(to right, rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 33.333% 33.333%; background-position: -1px -1px; }
.pe-loading { color: #f3e9dc; font-size: 0.95rem; }
.pe-tools { min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; border-left: 1px solid var(--line); }
.pe-group { display: flex; flex-direction: column; gap: 6px; }
.pe-label { font-size: 0.8rem; font-weight: 700; color: var(--espresso); display: flex; justify-content: space-between; }
.pe-label output { font-weight: 400; color: var(--espresso-soft); }
.pe-hint { font-size: 0.75rem; color: var(--espresso-soft); }
.pe-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-btn { border: 1px solid var(--line); background: #fff; color: var(--espresso); border-radius: 8px; padding: 7px 10px; font-size: 0.8rem; cursor: pointer; }
.pe-btn:hover { border-color: var(--terracotta); }
.pe-btn.on { background: var(--espresso); border-color: var(--espresso); color: #fff8f2; }
.pe-btn:disabled { opacity: 0.5; cursor: default; }
.pe-tools input[type="range"] { width: 100%; accent-color: var(--terracotta); }
.pe-actions { margin-top: auto; display: flex; gap: 8px; justify-content: flex-end; }
.pe-save { background: var(--terracotta); border-color: var(--terracotta); color: #fff8f2; font-weight: 700; }
@media (max-width: 800px) {
  .pe-overlay { padding: 8px; }
  .pe-box { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
  .pe-stage { padding: 10px; }
  .pe-tools { border-left: 0; border-top: 1px solid var(--line); max-height: 46vh; }
}
/* /manage: what a launch price or sale will look like (manage-catalog.js offerState). */
.mg-offer-status { background: var(--cream-deep); padding: 10px 12px; margin: 4px 0 8px; font-size: 0.85rem; }
.mg-offer-warn { color: #9e3a1f; }
/* /manage product editor: rarely changed sections fold to one line - the
   title and a summary of what's in them (manage-catalog.js fold()). */
.mg-ed details.mg-fold { display: block; padding: 0; }
.mg-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; min-width: 0; }
.mg-fold > summary::-webkit-details-marker { display: none; }
.mg-fold > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(-45deg); transition: transform 0.15s; }
.mg-fold[open] > summary::before { transform: translateY(-4px) rotate(45deg); }
.mg-fold-t { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--espresso); white-space: nowrap; }
.mg-fold-s { font-size: 0.8rem; color: var(--espresso-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mg-fold[open] .mg-fold-s { display: none; }
.mg-fold-body { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.mg-fold-head { margin: 8px 0 -6px; font-family: var(--serif); font-size: 1rem; color: var(--espresso-soft); }
.mg-sale-tag { color: #9e3a1f; }
/* /manage Products: the "More" menu (homepage settings, collections, ...). */
.mg-more { position: relative; }
.mg-more > summary { list-style: none; cursor: pointer; }
.mg-more > summary::-webkit-details-marker { display: none; }
.mg-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 260px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(60, 43, 34, 0.14); padding: 6px; display: flex; flex-direction: column; }
.mg-more-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--espresso); cursor: pointer; }
.mg-more-menu button:hover, .mg-more-menu button:focus-visible { background: var(--cream-deep); }
.mg-more-menu small { font-size: 0.75rem; font-weight: 400; color: var(--espresso-soft); }
.mg-connect { margin-top: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }

/* ---------- /manage Posts tab (js/manage-posts.js; redesigned 5 Nov 2026: short, phone first) ---------- */
#mg-posts { min-width: 0; overflow-wrap: anywhere; }
#mg-posts textarea, #mg-post-dialog textarea { font: inherit; }
.pp-head { display: flex; align-items: center; gap: 10px; }
.pp-head .mg-h1 { margin: 0; }
.pp-write { margin-left: auto; }
.pp-pill { font-size: 0.72rem; font-weight: 600; background: #fbf1d8; color: #7a5200; border-radius: 999px; padding: 3px 10px; cursor: help; }
.pp-h2 { font-size: 1.05rem; margin: 26px 0 10px; display: flex; align-items: center; gap: 8px; }
.pp-h2.pp-first { margin-top: 0; }
.pp-n { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; background: var(--cream-deep); color: var(--espresso-soft); border-radius: 999px; padding: 2px 8px; }
.pp-muted { color: var(--espresso-soft); font-size: 0.8rem; margin: 0; }
.pp-err { color: #a13d24; font-size: 0.82rem; margin: 6px 0 0; }
.pp-one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Make a post */
.pp-make { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 16px; }
.pp-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 12px; padding: 0 14px 2px; }
.pp-chips::-webkit-scrollbar { display: none; }
.pp-chip { flex: none; font: inherit; font-size: 0.82rem; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream); color: var(--espresso); cursor: pointer; white-space: nowrap; }
.pp-chip.on { background: var(--espresso); border-color: var(--espresso); color: var(--cream); font-weight: 600; }
.pp-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pp-form select, .pp-form textarea, .pp-form input[type="number"], .pp-form input[type="datetime-local"] {
  font: inherit; font-size: 0.92rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--espresso); padding: 9px 11px; min-width: 0; width: 100%;
}
.pp-form textarea { resize: vertical; }
.pp-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-line > select { flex: 1; }
.pp-num { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--espresso-soft); white-space: nowrap; flex: none; }
.pp-form .pp-num input { width: 64px; padding: 8px; text-align: center; }
.pp-go { justify-content: space-between; }
.pp-go .btn { padding: 10px 22px; }
.pp-go .btn:disabled { opacity: 0.55; }

/* Photo tiles: your uploads, and the picker in Write a post */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.pp-tile { position: relative; display: block; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--cream-deep); cursor: pointer; }
.pp-tile img, .pp-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-tile.on { box-shadow: inset 0 0 0 3px var(--terracotta); }
.pp-tile.on img, .pp-tile.on video { opacity: 0.85; }
.pp-tile-tick { position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 999px; border: 2px solid #fff; background: rgba(0,0,0,.25); color: #fff; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pp-tile.on .pp-tile-tick { background: var(--terracotta); }
.pp-tile-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 999px; border: 0; background: rgba(255,255,255,.9); color: var(--espresso); font-size: 1rem; line-height: 1; cursor: pointer; }
.pp-add { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px dashed var(--line); background: var(--cream); color: var(--espresso-soft); font-size: 1.5rem; line-height: 1; }
.pp-add span { font-size: 0.75rem; margin-top: 2px; }

/* Being made */
.pp-job { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; font-size: 0.88rem; }
.pp-dot { flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--line); }
.pp-job-working .pp-dot { background: var(--sage); animation: pp-pulse 1.4s ease-in-out infinite; }
.pp-job-failed .pp-dot { background: #a13d24; }
.pp-job-failed .pp-muted { color: #a13d24; }
@keyframes pp-pulse { 50% { opacity: 0.3; } }
.pp-row-text { flex: 1; min-width: 0; }
.pp-job-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.pp-close { width: 32px; height: 32px; border-radius: 999px; border: 0; background: none; color: var(--espresso-soft); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.pp-close:hover { background: var(--cream-deep); }

/* A post */
.pp-post { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.pp-strip { display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; background: var(--cream-deep); padding: 4px; }
.pp-slide { position: relative; flex: none; scroll-snap-align: start; }
.pp-thumb { display: block; height: 220px; width: auto; max-width: 78vw; object-fit: cover; border-radius: 8px; background: var(--cream); cursor: zoom-in; }
.pp-strip .pp-slide:only-child { margin: 0 auto; }
.pp-slide.off .pp-thumb { opacity: 0.35; }
.pp-tick { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 999px; border: 2px solid #fff; background: var(--terracotta); color: #fff; font-weight: 700; font-size: 0.8rem; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.pp-slide.off .pp-tick { background: rgba(255,255,255,.92); color: var(--espresso); }
.pp-move { position: absolute; bottom: 6px; left: 6px; width: 28px; height: 28px; border-radius: 999px; border: 0; background: rgba(255,255,255,.92); color: var(--espresso); font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.pp-body { padding: 10px 14px 12px; }
.pp-meta { font-size: 0.8rem; font-weight: 600; color: var(--espresso-soft); }
.pp-when { font-weight: 400; }
.pp-when::before { content: "· "; }
.pp-ai { font-size: 0.66rem; font-weight: 700; background: #e7eef7; color: #2f4f75; border-radius: 999px; padding: 1px 6px; vertical-align: 1px; }
.pp-caption { white-space: pre-wrap; font-size: 0.9rem; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.pp-caption.open { display: block; -webkit-line-clamp: unset; }
.pp-actions { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.pp-approve { padding: 8px 22px; }
.pp-x { font: inherit; font-size: 0.8rem; background: none; border: 0; color: #a13d24; cursor: pointer; padding: 6px 4px; margin-left: auto; }
.pp-x:disabled { opacity: 0.5; }

/* Posted / rejected rows */
.pp-fold { margin-top: 18px; }
.pp-fold > summary { cursor: pointer; font-family: var(--serif); font-size: 1rem; display: flex; align-items: center; gap: 8px; padding: 6px 0; list-style: none; }
.pp-fold > summary::-webkit-details-marker { display: none; }
.pp-fold > summary::before { content: "›"; font-family: var(--sans); transition: transform 0.15s; }
.pp-fold[open] > summary::before { transform: rotate(90deg); }
.pp-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pp-row-thumb { flex: none; width: 48px; height: 48px !important; aspect-ratio: auto !important; object-fit: cover; border-radius: 8px; background: var(--cream-deep); cursor: zoom-in; }
.pp-row-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.pp-row-acts .pp-x { margin-left: 0; }

/* Write / edit a post (dialog) */
.pp-checks label { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; cursor: pointer; }
.pp-checks input { width: 18px; height: 18px; accent-color: var(--terracotta); }
.pp-at { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; font-weight: 600; }
.pp-editor { padding: 14px 18px 18px; }
@media (min-width: 700px) { .pp-thumb { height: 300px; } }
.pp-editor .btn { justify-content: center; }

/* Records: + Sale / + Expense, back link, filters (owner, 20 Oct 2026). */
.mg-back { background: none; border: 0; padding: 0; margin: 0 0 10px; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--terracotta-deep); cursor: pointer; }
.mg-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.mg-records-filters { display: flex; flex-wrap: wrap; gap: 0 14px; }
.mg-records-filters [hidden] { display: none; } /* beat .mg-inline { display: flex } */
.mg-file-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.mg-file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#mg-stock-body { padding: 14px 18px 18px; }

/* Overview: this month in four small boxes, expenses without a receipt. */
.mg-stats-mini { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mg-stats-mini .mg-stat { padding: 8px 10px; }
.mg-stats-mini .mg-stat strong { font-size: 1rem; }
@media (max-width: 520px) { .mg-stats-mini { grid-template-columns: repeat(2, 1fr); } }
.mg-note-btn { display: block; width: 100%; text-align: left; margin-top: 10px; font: inherit; font-size: 0.85rem; color: #7a5200; background: #fbf1d8; border: 1px solid #ecd9a4; border-radius: 12px; padding: 10px 14px; cursor: pointer; }

/* Bookings: where they found us. */
.mg-found { font-size: 0.88rem; margin: 20px 0 0; }
/* Bookings tab: Done after a visit / a website order (js/manage.js openDone). */
.mg-done-btn { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.mg-done-btn:hover { border-color: var(--espresso); opacity: 0.9; }
#mg-done-body { padding: 14px 18px 18px; }
/* Done / Didn't buy stay in view on a phone, however many sales are listed. */
#mg-done-body .mg-done-actions { position: sticky; bottom: -18px; margin: 0 -18px -18px; padding: 12px 18px 18px; background: var(--paper); border-top: 1px solid var(--line); }
#mg-pdf-body { padding: 14px 18px 18px; }
.mg-pdf-frame { display: block; width: 100%; height: min(70vh, 760px); border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 12px; }
.mg-sale-pick { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mg-sale-pick .mg-check { align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mg-sale-pick .mg-check input { flex: none; margin-top: 2px; }
.mg-sale-pick .mg-check > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mg-done-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mg-pay-pick { display: flex; flex-wrap: wrap; column-gap: 18px; }
.mg-receipt-no { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.78rem; color: var(--espresso-soft); letter-spacing: 0.02em; }
/* Overview: Today, and Connections folded to one line. */
/* Today (redone 11 Nov 2026): a label column, chips, and one tappable line
   per customer owing money - each opens where it's collected. */
.mg-today { padding: 4px 16px 6px; margin-bottom: 18px; }
.mg-today-head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 8px; font-family: var(--serif); font-size: 1.15rem; }
.mg-today-head span { font-family: var(--sans); font-size: 0.85rem; color: var(--espresso-soft); }
.mg-today-row, .mg-today-owe {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 0; border: 0; border-top: 1px solid var(--line);
  background: none; font: inherit; font-size: 0.92rem; color: var(--espresso); text-align: left;
}
button.mg-today-row, .mg-today-owe { cursor: pointer; }
.mg-today-lbl { flex: none; width: 92px; white-space: nowrap; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--espresso-soft); }
.mg-today-val { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mg-today-go { flex: none; color: var(--espresso-soft); font-size: 1.2rem; line-height: 1; }
.mg-today-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--cream-deep); font-size: 0.84rem; white-space: nowrap; }
.mg-today-chip-done { color: var(--espresso-soft); }
.mg-today-chip-btn { border: 1px solid transparent; font: inherit; font-size: 0.84rem; color: var(--espresso); cursor: pointer; }
.mg-today-chip-btn:hover, .mg-today-chip-btn:focus-visible { border-color: var(--terracotta); }
.mg-today-total { margin-left: auto; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--terracotta-deep); }
.mg-today-collect .mg-today-row { padding-bottom: 4px; }
.mg-today-owe { border-top: 0; padding: 7px 0 7px 104px; }
.mg-today-owe:hover .mg-today-who strong, .mg-today-owe:focus-visible .mg-today-who strong { color: var(--terracotta-deep); text-decoration: underline; }
.mg-today-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mg-today-who strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-today-who .mg-muted { font-size: 0.78rem; }
.mg-today-amt { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .mg-today-lbl { width: 84px; font-size: 0.68rem; letter-spacing: 0.05em; }
  .mg-today-owe { padding-left: 0; }
}
/* A To finish card (11 Nov 2026): name + money on top, then what, where, the rest small. */
.mg-job .mg-booking-time:empty { display: none; }
.mg-job .mg-booking-time .mg-booking-photo:first-child { margin-top: 2px; }
.mg-job-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mg-job-head strong { font-size: 1rem; }
.mg-job-due { flex: none; font-weight: 700; color: var(--terracotta-deep); text-align: right; line-height: 1.1; }
.mg-job-due small { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: var(--espresso-soft); }
.mg-job-what { font-size: 0.9rem; }
.mg-job-when { font-weight: 600; }
.mg-job-note { font-size: 0.86rem; font-style: italic; color: var(--espresso-soft); }
.mg-job-meta { margin-top: 4px; font-size: 0.76rem; color: var(--espresso-soft); }
.mg-link-btn { margin-left: auto; padding: 6px 4px; border: 0; background: none; font: inherit; font-size: 0.8rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mg-danger-text { color: #a13d24; }
.mg-block-fold { margin-top: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.mg-block-fold .mg-form { margin: 0; }
.mg-health-fold { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.mg-health-fold .mg-health { border: 0; padding: 0; margin: 0; }
.mg-more-sales > summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--terracotta); padding: 10px 0; }
.mg-done-fold { margin-top: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.mg-done-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.9rem; }
.mg-done-row:first-child { border-top: 0; padding-top: 0; }

/* Finance (owner, 20 Oct 2026). */
.mg-fin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-bottom: 10px; }
.mg-fin-head .mg-inline { margin: 0; }
.mg-panel.mg-loading .mg-stats, .mg-panel.mg-loading .mg-card { opacity: 0.55; transition: opacity 0.15s; }
.mg-stats-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 520px) { .mg-stats-4 { grid-template-columns: repeat(2, 1fr); } }
.mg-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mg-fin-table th:not(:first-child), .mg-fin-table td:not(:first-child) { text-align: right; padding-left: 10px; }
.mg-fin-table td:first-child { white-space: nowrap; }
@media (max-width: 520px) {
  .mg-fin-table { font-size: 0.8rem; } .mg-fin-table th { font-size: 0.62rem; letter-spacing: 0.04em; }
  /* Phones: the month table drops Delivery so it fits (it's in the year boxes and on a computer). */
  .mg-fin-months th:nth-child(4), .mg-fin-months td:nth-child(4) { display: none; }
}
.mg-fin-table td { font-variant-numeric: tabular-nums; }
.mg-fin-table .mg-total td { font-weight: 700; border-top: 2px solid var(--line); }
.mg-fin-table .mg-neg { color: #a13d24; }
.mg-fin-chart-card { padding: 12px 14px 8px; }
.mg-chart-legend { display: flex; gap: 16px; font-size: 0.8rem; color: var(--espresso-soft); margin-bottom: 6px; }
.mg-chart-legend i, .mg-chart-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.mg-chart-tip i { width: 12px; height: 2px; vertical-align: 3px; }
.mg-chart-wrap { position: relative; }
.mg-chart-wrap svg { display: block; overflow: visible; }
.mg-chart-grid { stroke: var(--line); stroke-width: 1; }
.mg-chart-base { stroke: #cbbca8; stroke-width: 1; }
.mg-chart-axis { font-size: 11px; fill: var(--espresso-soft); font-family: var(--sans); }
.mg-chart-hit { fill: transparent; }
.mg-chart-col { outline: none; cursor: default; }
.mg-chart-col.mg-chart-on .mg-chart-hit, .mg-chart-col:focus-visible .mg-chart-hit { fill: rgba(60, 43, 34, 0.05); }
.mg-chart-tip { position: absolute; top: 0; z-index: 2; pointer-events: none; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 18px -10px rgba(60, 43, 34, 0.45); padding: 8px 10px; font-size: 0.8rem; color: var(--espresso-soft); white-space: nowrap; }
.mg-chart-tip strong { display: block; color: var(--espresso); margin-bottom: 2px; }
.mg-chart-tip b { color: var(--espresso); }

/* One set's stock (dialog) and the product editor's Stock box. */
.mg-stock-form { margin-bottom: 6px; }
.mg-ed-stock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.mg-ed-stock-row:first-child { border-top: 0; }
.mg-ed-stock-row strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
.mg-ed-stock-row strong.mg-pre-wait { font-size: 1rem; color: #9e3a1f; }
.mg-arrived-form { background: var(--cream-deep); padding: 12px; margin-bottom: 14px; }

/* Connections (src/health.js): problems on top of the Overview, the list further down. */
.mg-alert { display: block; width: 100%; text-align: left; font: inherit; font-size: 0.86rem; border-radius: 12px; padding: 10px 14px; margin: 0 0 8px; cursor: pointer; border: 1px solid; }
.mg-alert-down { background: #f7e0d7; border-color: #e9b9a6; color: #6e2c19; }
.mg-alert-warn { background: #fbf1d8; border-color: #ecd9a4; color: #6a4800; }
.mg-health { padding: 4px 14px; }
.mg-hrow { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.mg-hrow:first-child { border-top: 0; }
.mg-hrow-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.9rem; }
.mg-hrow-text .mg-hint { margin: 2px 0 0; }
.mg-hwhen { font-size: 0.72rem; color: var(--espresso-soft); white-space: nowrap; padding-top: 2px; }
.mg-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 5px; background: #c9bfb4; }
.mg-dot-ok { background: var(--sage); }
.mg-dot-warn { background: #d9a227; }
.mg-dot-down { background: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18); }
.mg-dot-off { background: transparent; border: 2px solid #c9bfb4; width: 7px; height: 7px; }
.mg-health-sub { list-style: none; margin: 4px 0 0; padding: 0; font-size: 0.8rem; color: var(--espresso-soft); }
.mg-health-sub li { padding: 2px 0; }
@media (max-width: 520px) { .mg-hrow { grid-template-columns: 14px minmax(0, 1fr); } .mg-hwhen { grid-column: 2; padding-top: 0; } }

/* ---------- /manage Chats tab (js/manage-chats.js) ---------- */
.mg-tab-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px; border-radius: 999px; background: var(--terracotta); color: #fff8f2; font-size: 0.72rem; font-weight: 700; line-height: 18px; text-align: center; }
.mg-tab-count[hidden] { display: none; }

.mg-chats-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mg-chats-head .mg-h1 { margin-bottom: 2px; }
.mg-chats-head .mg-hint { margin: 0; }
.mg-chat-cost { margin: 0; font-size: 0.86rem; color: var(--espresso); text-align: right; }
.mg-chat-cost span { display: block; font-size: 0.76rem; color: var(--espresso-soft); }

/* Channel switches: one row of toggles. */
.mg-chat-switches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 16px; }
.mg-chat-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; min-width: 0; transition: border-color .15s, background .15s; }
.mg-chat-switch.is-on { border-color: #cdbfae; background: #fffaf4; }
.mg-chat-switch-t { display: flex; flex-direction: column; min-width: 0; }
.mg-chat-switch-t b { font-size: 0.9rem; color: var(--espresso); }
.mg-chat-switch-s { font-size: 0.74rem; color: var(--espresso-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-toggle { appearance: none; -webkit-appearance: none; flex: none; width: 38px; height: 22px; border-radius: 999px; background: #d8cec3; position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.mg-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.mg-toggle:checked { background: var(--terracotta); }
.mg-toggle:checked::after { transform: translateX(16px); }
.mg-toggle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* Products › Deals › Delivery offers (js/manage-deals.js) */
.mg-deliv { display: grid; gap: 12px; margin-bottom: 22px; }
.mg-deliv-row { display: flex; align-items: center; gap: 12px; }
.mg-deliv-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mg-deliv-t b { font-size: 0.95rem; color: var(--espresso); }
.mg-deliv-t span { font-size: 0.78rem; color: var(--espresso-soft); }
.mg-deliv-amt { display: flex; align-items: center; gap: 4px; font-weight: 600; flex: none; }
.mg-deliv-amt input { width: 84px; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.mg-deliv .btn { justify-self: start; }

/* List + open chat. */
.mg-chats-layout { display: block; }
.mg-chats-pane { display: none; padding: 0; }
.mg-chat-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px; }
.mg-chat-filters button { flex: none; font: inherit; font-size: 0.82rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--espresso); cursor: pointer; }
.mg-chat-filters button.active { background: var(--espresso); border-color: var(--espresso); color: #fff8f2; }
.mg-chat-group { margin: 10px 2px 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--espresso-soft); }
.mg-chat-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 6px; font: inherit; color: var(--espresso); cursor: pointer; min-width: 0; }
.mg-chat-row:hover, .mg-chat-row:focus-visible { border-color: #cdbfae; }
.mg-chat-row.is-needs { border-left: 3px solid var(--terracotta); }
.mg-chat-row.is-open { background: #fff4ea; border-color: var(--terracotta); }
.mg-chat-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mg-chat-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; color: #fff8f2; background: #8b7464; }
.mg-chat-av-website { background: #8b7464; }
.mg-chat-av-marketplace { background: #3d6fb0; }
.mg-chat-av-messenger { background: #6b5fd0; }
.mg-chat-av-instagram { background: #c2457f; }
.mg-chat-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mg-chat-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mg-chat-when { margin-left: auto; flex: none; font-size: 0.74rem; color: var(--espresso-soft); }
.mg-chat-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mg-chat-ch { flex: none; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 6px; background: var(--cream-deep); color: var(--espresso); }
.mg-chat-ch-marketplace { background: #e3eefc; color: #1f4f8f; }
.mg-chat-ch-messenger { background: #e8e6fb; color: #4a3fa3; }
.mg-chat-ch-instagram { background: #fbe4ef; color: #9a2a62; }
.mg-chat-flag { font-size: 0.7rem; font-weight: 700; color: #9e3a1f; background: #fbe1d6; border-radius: 6px; padding: 2px 6px; }
.mg-chat-flag-quiet { color: var(--espresso-soft); background: var(--cream-deep); }
.mg-chat-preview { font-size: 0.84rem; color: var(--espresso-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
/* Select mode: tick chats, then Delete. */
.mg-chat-pickbar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; margin: -2px 0 8px; font-size: 0.8rem; color: var(--espresso-soft); }
.mg-chat-pickbar span { margin-right: auto; }
.mg-chat-tick { flex: none; align-self: center; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #cdbfae; background: var(--paper); }
.mg-chat-row.is-picked { background: #fff4ea; border-color: var(--terracotta); }
.mg-chat-row.is-picked .mg-chat-tick { background: var(--terracotta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--terracotta); }
.mg-chat-del { color: #a13d24; }
.mg-chat-del:hover { border-color: #a13d24; }

/* The open chat. */
.mg-chat-pane-head { display: flex; align-items: center; gap: 10px; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mg-chat-back { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); font-size: 1.3rem; line-height: 1; color: var(--espresso); cursor: pointer; }
.mg-chat-pane-who { min-width: 0; }
.mg-chat-pane-who h2 { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--espresso); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-chat-pane-who p { margin: 2px 0 0; font-size: 0.8rem; color: var(--espresso-soft); overflow-wrap: anywhere; }
.mg-chat-pane-who a { color: var(--espresso); }
.mg-chat-call { margin-left: 4px; font-weight: 600; }
.mg-chat-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; }
.mg-chat-state { font-size: 0.8rem; color: #4d6b3c; margin-right: auto; display: inline-flex; align-items: center; gap: 6px; }
.mg-chat-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6d8f55; }
.mg-chat-state.is-paused { color: var(--espresso-soft); }
.mg-chat-state.is-paused::before { background: #c9b8a6; }
.mg-chat-done { background: var(--espresso); color: #fff8f2; border-color: var(--espresso); }
.mg-chat-callout { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: #fbe9df; color: #6b2a16; font-size: 0.88rem; overflow-wrap: anywhere; }
.mg-chat-callout b { margin-right: 6px; }
.mg-chat-thread { display: flex; flex-direction: column; gap: 6px; padding: 12px 2px; }
.mg-chat-msg { display: flex; flex-direction: column; gap: 3px; max-width: 78%; padding: 8px 12px; border-radius: 16px; font-size: 0.92rem; line-height: 1.4; }
.mg-chat-them { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.mg-chat-us { align-self: flex-end; background: var(--cream-deep); border-bottom-right-radius: 5px; }
.mg-chat-me { align-self: flex-end; background: var(--espresso); color: #fff8f2; border-bottom-right-radius: 5px; }
.mg-chat-me .mg-chat-time { color: #d9cbbd; }
.mg-chat-unsent { opacity: 0.6; border: 1px dashed var(--line); }
.mg-chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.mg-chat-time { font-size: 0.68rem; color: var(--espresso-soft); align-self: flex-end; }
.mg-chat-msg-note { align-self: center; text-align: center; font-size: 0.74rem; color: var(--espresso-soft); background: var(--cream-deep); border-radius: 999px; padding: 4px 12px; max-width: 92%; margin: 4px 0; overflow-wrap: anywhere; }

/* Message box: pinned to the bottom, like a messaging app. */
.mg-chat-compose { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--cream, #faf6f0); border-top: 1px solid var(--line); }
.mg-chat-compose textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; line-height: 1.4; padding: 10px 14px; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--espresso); resize: none; max-height: 160px; }
.mg-chat-compose textarea:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(181, 89, 59, .12); }
.mg-chat-send { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--terracotta); color: #fff8f2; display: grid; place-items: center; cursor: pointer; }
.mg-chat-send:disabled { opacity: .5; }
.mg-chat-compose-hint { grid-column: 1 / -1; margin: 0 4px; font-size: 0.72rem; color: var(--espresso-soft); }
.mg-chat-compose-note { margin: 0; padding: 12px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--espresso-soft); text-align: center; }
.mg-chat-empty { display: grid; place-content: center; text-align: center; height: 100%; color: var(--espresso-soft); font-size: 0.9rem; }
.mg-chat-empty p { margin: 2px 0; }

/* Phone: the list, or the open chat full screen. */
@media (max-width: 999px) {
  .mg-chats-open .mg-chats-head, .mg-chats-open .mg-chat-switches, .mg-chats-open .mg-chats-list, .mg-chats-open .mg-chat-rules { display: none; }
  /* The open chat fills the screen; only the messages scroll (js sets
     top/height to what the keyboard leaves free). */
  .mg-chats-open .mg-chats-pane { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: 0; height: 100dvh; z-index: 80; background: var(--cream); padding: calc(10px + env(safe-area-inset-top)) 14px 0; box-sizing: border-box; }
  .mg-chats-open .mg-chat-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .mg-chats-open .mg-chat-compose { position: static; }
  body.mg-chat-full { overflow: hidden; }
  .mg-chat-switches { grid-template-columns: 1fr 1fr; }
  .mg-chat-cost { text-align: left; }
  .mg-chat-msg { max-width: 86%; }
}

/* Computer: list on the left, the open chat on the right. */
@media (min-width: 1000px) {
  .mg-chats-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
  .mg-chats-list { max-height: var(--chat-h, calc(100vh - 290px)); min-height: 420px; overflow-y: auto; padding-right: 4px; }
  .mg-chats-pane { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 0; height: var(--chat-h, calc(100vh - 290px)); min-height: 420px; position: sticky; top: 12px; }
  .mg-chats-pane .mg-chat-thread { flex: 1; overflow-y: auto; }
  .mg-chats-pane .mg-chat-compose { position: static; background: var(--paper); }
  .mg-chat-back { display: none; }
}

.mg-chat-rules { margin-top: 24px; padding: 0; }
.mg-chat-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--espresso); }
.mg-chat-field textarea, .mg-chat-field input { font: inherit; font-weight: 400; font-size: 0.92rem; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--espresso); width: 100%; box-sizing: border-box; }
.mg-chat-field input { max-width: 160px; }
.mg-chat-fields-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.mg-chat-rules-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.mg-chat-version { border-top: 1px solid var(--line); padding: 10px 0; }
.mg-chat-version-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.82rem; background: var(--cream-deep); border-radius: 8px; padding: 8px 10px; margin: 6px 0 8px; max-height: 180px; overflow: auto; }

/* ---------- /manage Overview > Notifications (js/manage-push.js) ---------- */
.mg-push { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px; }
.mg-push.is-on { border-color: #cdd8c2; background: #fbfdf8; }
.mg-push-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fbe9df; color: var(--terracotta); }
.mg-push.is-on .mg-push-icon { background: #e7efdf; color: #4d6b3c; }
.mg-push-body { flex: 1; min-width: 200px; }
.mg-push-title { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--espresso); }
.mg-push-text { margin: 3px 0 0; font-size: 0.86rem; color: var(--espresso-soft); }
.mg-push-note { margin: 6px 0 0; font-size: 0.82rem; color: #8a4b2d; }
.mg-push-pill { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 999px; background: var(--cream-deep); color: var(--espresso-soft); }
.mg-push-pill.is-on { background: #dfead5; color: #3f5c30; }
.mg-push-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-push-btn { white-space: nowrap; }
.mg-push-switch { flex-basis: 100%; }
.mg-push-switch-s { font-size: 0.78rem; color: var(--espresso-soft); }
@media (max-width: 520px) { .mg-push-actions { width: 100%; } .mg-push-btn { width: 100%; } }

/* ---------- /manage: Homepage - the homepage's photo tiles (js/manage-home.js) ---------- */
/* The list beside a live preview of the homepage: the widest tab. */
body.mg-home-wide .mg-main { max-width: 1560px; }
.mg-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.mg-home-sec .mg-h2 { margin-top: 18px; }
.mg-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.mg-home-slot { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font: inherit; text-align: left; color: var(--espresso); cursor: pointer; }
.mg-home-slot:hover { border-color: var(--espresso-soft); }
.mg-home-slot.on { border-color: var(--terracotta); box-shadow: 0 0 0 2px var(--terracotta); }
.mg-home-slot.off { opacity: 0.55; }
.mg-home-thumb { display: block; width: 100%; overflow: hidden; border-radius: 8px; background: var(--cream-deep); }
.mg-home-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-home-name { font-size: 0.84rem; font-weight: 600; line-height: 1.25; }
.mg-home-tag { font-size: 0.72rem; color: var(--espresso-soft); }
.mg-home-tag.own { color: var(--terracotta); font-weight: 600; }
.mg-home-picker { margin-top: 14px; padding: 14px; border: 2px solid var(--terracotta); border-radius: 14px; background: var(--paper); display: grid; gap: 12px; scroll-margin: 80px; }
.mg-home-pk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mg-home-pk-head h3 { font-size: 1.05rem; margin: 0; }
.mg-home-focus { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.mg-home-full { position: relative; cursor: crosshair; line-height: 0; border-radius: 8px; overflow: hidden; }
.mg-home-full img { width: 100%; max-height: 340px; object-fit: contain; background: var(--cream-deep); }
.mg-home-dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; background: var(--terracotta); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); pointer-events: none; }
.mg-home-crop { display: grid; gap: 8px; }
.mg-home-pk-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.86rem; }
.mg-home-source select { font: inherit; max-width: 260px; margin-left: 4px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.mg-home-upload { position: relative; overflow: hidden; cursor: pointer; }
.mg-home-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mg-home-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; }
.mg-home-choice { position: relative; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--cream-deep); cursor: pointer; aspect-ratio: 1; }
.mg-home-choice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-home-choice:hover { border-color: var(--espresso-soft); }
.mg-home-choice.on { border-color: var(--terracotta); }
.mg-home-choice small { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; background: rgba(46, 32, 25, 0.7); color: #fff; font-size: 0.66rem; }
.mg-home-preview { position: sticky; top: 12px; display: grid; gap: 8px; }
.mg-home-pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.84rem; color: var(--espresso-soft); }
.mg-home-frame { position: relative; height: calc(100vh - 150px); min-height: 420px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.mg-home-frame iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
@media (max-width: 900px) {
  .mg-home { grid-template-columns: 1fr; }
  .mg-home-preview { position: static; order: -1; }
  .mg-home-frame { height: 60vh; }
  .mg-home-focus { grid-template-columns: 1fr; }
}
.mg-home-dev { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.mg-home-dev button { font: inherit; font-size: 0.8rem; padding: 5px 12px; border: 0; background: var(--paper); color: var(--espresso); cursor: pointer; }
.mg-home-dev button.active { background: var(--espresso); color: #fff8f2; }

/* Website -> Announcement & story: the bar's messages (js/manage-catalog.js) */
.mg-msgs { display: grid; gap: 8px; margin: 4px 0 10px; }
.mg-msg { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.mg-msg input[type="text"] { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 0; }
.mg-announce-preview .announce { margin-top: 6px; }
.mg-announce-preview .announce.announce-sale { margin-top: 0; background: #9e4a30; color: #fff; }
.mg-msg-ann { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto auto; }
.mg-msg-line { grid-template-columns: minmax(0, 1fr) auto auto; }
/* Sale: a tick beside each message / line; a ticked one shows red here too. */
.mg-msg-sale { display: inline-flex; flex-direction: row !important; align-items: center; gap: 6px !important; min-height: 40px; padding: 0 4px; font-size: 0.85rem; color: #9e4a30; font-weight: 400 !important; cursor: pointer; white-space: nowrap; }
.mg-msg-sale input { width: 18px; height: 18px; margin: 0; accent-color: #b5583b; }
.mg-msg.is-sale input[type="text"]:first-child { color: #9e4a30; background: #f6e3d9; border-left: 3px solid #b5583b; }
@media (max-width: 640px) {
  .mg-msg-ann { grid-template-columns: 1fr auto auto; }
  .mg-msg-ann input + input { grid-column: 1; grid-row: 2; }
}

/* ---------- /manage Ads tab (js/manage-ads.js, owner 29 Oct 2026) ---------- */
/* Google, Facebook & Instagram and Marketplace in one tab. Each channel has
   its colour (the chart, the dots, the tags); a campaign is a card with an
   on/off switch, its budget and end as tappable tiles, and its numbers. */
.ad-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ad-head .mg-hint { margin: 0; }
.ad-head-tools { display: flex; gap: 6px; }
.ad-test { background: #fbf1d8; border: 1px solid #ecd9a4; color: #6a4800; border-radius: 12px; padding: 9px 14px; font-size: 0.84rem; margin: 0 0 12px; }

.ad-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 10px; background: var(--cream-deep); border-radius: 14px; }
.ad-switch-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
  background: none; border: 0; border-radius: 10px; padding: 9px 6px; color: var(--espresso-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-switch-btn:hover { color: var(--espresso); }
.ad-switch-btn.active { background: var(--paper); color: var(--espresso); box-shadow: 0 1px 4px rgba(60, 43, 34, 0.15); }
@media (max-width: 440px) { .ad-switch-btn { font-size: 0.78rem; gap: 4px; padding: 9px 2px; } .ad-switch-btn .ad-dot { width: 7px; height: 7px; } }
.ad-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #c9bfb4; }
.ad-dot-ok { background: var(--sage); }
.ad-dot-warn { background: #d9a227; }
.ad-dot-down { background: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.2); }
.ad-dot-off { background: transparent; border: 2px solid #c9bfb4; width: 6px; height: 6px; }
.ad-dot-idle { background: #c9bfb4; }
.ad-periods { margin: 0 0 14px; }
.ad-periods button { padding: 7px 13px; font-size: 0.82rem; }

.ad-alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ad-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid; border-radius: 12px; padding: 9px 12px; font-size: 0.86rem; }
.ad-alert-down { background: #f7e0d7; border-color: #e9b9a6; color: #6e2c19; }
.ad-alert-warn { background: #fbf1d8; border-color: #ecd9a4; color: #6a4800; }
.ad-alert-ch { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); border-left: 3px solid var(--c); white-space: nowrap; }
.ad-alert-a { display: flex; gap: 6px; }
@media (max-width: 620px) { .ad-alert { grid-template-columns: minmax(0, 1fr); } .ad-alert-ch { justify-self: start; } }

.ad-stats { margin-bottom: 10px; }
.ad-stat-sub { font-size: 0.72rem !important; }
.ad-sub { display: block; font-size: 0.76rem; color: var(--espresso-soft); font-weight: 400; margin-top: 2px; }
.ad-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.ad-chname { font-weight: 600; }
.ad-chart-card { padding: 12px 14px 8px; }
.ad-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; margin-bottom: 4px; }
.ad-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.76rem; color: var(--espresso-soft); }
.ad-chart-svg { width: 100%; height: auto; display: block; }
.ad-grid { stroke: var(--line); stroke-width: 1; }
.ad-axis { font: 11px var(--sans); fill: var(--espresso-soft); }
.ad-table td { vertical-align: middle; }
.ad-table td:not(:first-child) { white-space: nowrap; }
.ad-row-link { cursor: pointer; }
.ad-row-link:hover td { background: #fffaf4; }
.ad-foot { margin: 6px 2px 0; }
.ad-heard { margin-top: 0; }

.ad-ch-card { padding: 14px; }
.ad-ch-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ad-ch-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ad-ch-card .mg-hint { margin-top: 8px; }
.ad-none { margin: 8px 2px 14px; }

.ad-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
@media (min-width: 900px) { body.mg-wide .ad-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ad-card-on { border-color: #cfd6c4; box-shadow: 0 8px 22px -18px rgba(60, 43, 34, 0.5); }
.ad-card-not_showing { border-color: #e9b9a6; }
.ad-card-paused, .ad-card-finished { background: #fdfaf5; }
.ad-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ad-card-name { min-width: 0; }
.ad-card-name h3 { font-size: 1.05rem; line-height: 1.3; margin: 6px 0 0; overflow-wrap: anywhere; }
.ad-pill { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--cream-deep); color: var(--espresso-soft); }
.ad-pill-on { background: #e4ead9; color: #46512f; }
.ad-pill-not_showing { background: #f7e0d7; color: #8a3b24; }
.ad-pill-finished { background: #ece7df; color: #6b5d50; }

.ad-toggle { flex: none; position: relative; width: 52px; height: 30px; border-radius: 999px; border: none; cursor: pointer; background: #d8cfc3; transition: background .18s; padding: 0; }
.ad-toggle span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform .18s; }
.ad-toggle.is-on { background: var(--sage); }
.ad-toggle.is-on span { transform: translateX(22px); }
.ad-toggle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

.ad-card-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.ad-set { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font: inherit; text-align: left; cursor: pointer; min-width: 0;
  background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; color: var(--espresso); }
.ad-set:hover { border-color: var(--espresso-soft); }
.ad-set span { font-size: 0.7rem; color: var(--espresso-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.ad-set span::after { content: " \270E"; text-transform: none; opacity: 0.6; }
.ad-set strong { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; }
.ad-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.ad-metric { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ad-metric span { font-size: 0.7rem; color: var(--espresso-soft); }
.ad-metric strong { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; }
.ad-metric small { display: block; font-family: var(--sans); font-size: 0.7rem; color: var(--espresso-soft); font-weight: 400; }
.ad-today { display: flex; align-items: center; gap: 10px; font-size: 0.76rem; color: var(--espresso-soft); }
.ad-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--cream-deep); overflow: hidden; }
.ad-bar i { display: block; height: 100%; border-radius: 999px; background: var(--sage); }
.ad-note { font-size: 0.82rem; color: var(--espresso-soft); margin: 0; }
.ad-card-more { display: flex; justify-content: flex-end; margin-top: -4px; }
.ad-rest { padding: 0; }
.ad-rest-body { padding: 0 12px 12px; }

.ad-key { padding: 14px; margin-top: 6px; }
.ad-key-top { display: flex; flex-direction: column; margin-bottom: 10px; }
.ad-key-form { display: flex; gap: 8px; flex-wrap: wrap; }
.ad-key-form input { flex: 1; min-width: 200px; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; }
.ad-how { margin-top: 10px; font-size: 0.86rem; }
.ad-how summary { cursor: pointer; font-weight: 600; color: var(--espresso-soft); }
.ad-how ol { margin: 8px 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ad-err { color: #8a3b24; background: #f7e0d7; border-radius: 10px; padding: 8px 12px; font-size: 0.86rem; margin: 8px 0 0; }

.ad-dialog { width: min(560px, calc(100% - 24px)); }
.ad-dialog-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.ad-form textarea { font: inherit; font-size: 16px; font-weight: 400; color: var(--espresso); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; resize: vertical; }
.ad-preview-sum { font-family: var(--serif); font-size: 1.05rem; margin: 0; overflow-wrap: anywhere; }
.ad-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ad-ba div { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font-size: 0.86rem; overflow-wrap: anywhere; }
.ad-ba div:last-child { background: #f1f4ec; border-color: #cfd6c4; }
.ad-ba span { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--espresso-soft); margin-bottom: 2px; }
@media (max-width: 480px) { .ad-ba { grid-template-columns: 1fr; } }
.ad-over { background: #fbf1d8; border: 1px solid #ecd9a4; color: #6a4800; border-radius: 12px; padding: 10px 12px; font-size: 0.86rem; }
.ad-over p { margin: 4px 0 0; }
.ad-notes { margin: 0; padding-left: 18px; font-size: 0.84rem; color: var(--espresso-soft); display: flex; flex-direction: column; gap: 4px; }
.ad-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ad-end-pick { gap: 8px; }
.ad-radio { flex-direction: row !important; align-items: center; gap: 8px !important; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 500 !important; cursor: pointer; flex: 0 0 auto !important; }
.ad-radio:has(input:checked) { border-color: var(--terracotta); background: #fbeee8; }
.ad-radio input { accent-color: var(--terracotta); }
.ad-menu { display: flex; flex-direction: column; gap: 6px; }
.ad-menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; cursor: pointer; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; color: var(--espresso); }
.ad-menu-item:hover { border-color: var(--espresso-soft); }
.ad-menu-item span { font-size: 0.8rem; color: var(--espresso-soft); }
.ad-checklist { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; }
.ad-check { flex-direction: row !important; align-items: center; gap: 10px !important; padding: 9px 12px; border-top: 1px solid var(--line); font-weight: 400 !important; cursor: pointer; }
.ad-check:first-child { border-top: 0; }
.ad-check input { width: 20px; height: 20px; accent-color: var(--terracotta); flex: none; }
.ad-check span { display: flex; flex-direction: column; min-width: 0; }
.ad-check small, .ad-list-row small { font-size: 0.74rem; color: var(--espresso-soft); }
.ad-list { display: flex; flex-direction: column; }
.ad-list-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
.ad-list-row:first-child { border-top: 0; }
.ad-list-row > span:first-child { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ad-list-a { display: flex; gap: 6px; flex: none; }
.ad-limits { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.ad-limits legend { font-weight: 600; font-size: 0.86rem; padding: 0 4px; }
.ad-limits label { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px !important; font-weight: 500 !important; }
.ad-limits input { max-width: 110px; }
.ad-search-only { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
#mg-ads.mg-loading { opacity: 0.6; transition: opacity .15s; }
.ad-periods.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-dialog .mg-dialog-head { justify-content: flex-start; gap: 10px; }
.ad-dialog .mg-dialog-head h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-back { font-size: 1.6rem; padding-bottom: 3px; }
.ad-back[hidden] { display: none; }
.ad-checklist.ad-dim { opacity: 0.5; }
.ad-keyline { display: block; margin-top: 2px; }
/* The period picker (29 Oct 2026): one row that scrolls sideways on a phone. */
@media (max-width: 620px) {
  .ad-periods.mg-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 10px; padding: 0 16px 2px; scrollbar-width: none; }
  .ad-periods.mg-chips::-webkit-scrollbar { display: none; }
  .ad-periods button { flex: none; white-space: nowrap; }
}
.ad-period-line { font-size: 0.82rem; color: var(--espresso-soft); margin: -6px 0 14px; }
.ad-period-line strong { color: var(--espresso); font-weight: 600; }
.ad-updated { font-size: 0.76rem; color: var(--espresso-soft); align-self: center; white-space: nowrap; }
.ad-head-tools [data-act=fetch]:disabled { opacity: 0.55; cursor: default; }
.ad-inline { display: inline; font-weight: 400; }
.ad-axis-on { fill: var(--espresso); font-weight: 700; }
.ad-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ad-dates input { min-width: 0; }

/* ---------- /manage › Products › Deals (js/manage-deals.js) ---------- */
.mg-deal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.mg-deal-form { margin-bottom: 14px; }
.mg-deal-form .mg-ed-h3 { margin: 0; }
.mg-voucher-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.mg-voucher-code { font-size: 1.05rem; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; margin-right: 4px; }
.mg-voucher .mg-muted { margin-top: 2px; }
.mg-voucher-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.mg-voucher-btns a.mg-small-btn { text-decoration: none; color: inherit; }
.mg-voucher-made { border-color: var(--terracotta); }
.mg-voucher-made .mg-code { margin: 8px 0 0; font-size: 0.86rem; word-break: normal; white-space: pre-wrap; }
#mg-deals .mg-ed-h3 { margin: 18px 0 8px; }

/* Ads tab - the channel and set tables (js/manage-ads.js channelTable,
   setsHtml; owner 3 Nov 2026: "draw a line between collum"): a row per
   number or set, lines between the columns, the names only at the top. */
.ad-tbl { padding: 0; overflow: hidden; }
.ad-tbl-row { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ad-sets .ad-tbl-row { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.ad-tbl-row:first-child { border-top: 0; }
.ad-tbl-row > *, .ad-tbl-total > * { padding: 9px 12px; min-width: 0; }
.ad-tbl-n { border-left: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; font-size: 0.95rem; white-space: nowrap; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
.ad-tbl-label { font-size: 0.86rem; color: var(--espresso-soft); display: flex; align-items: center; }
.ad-tbl-head { background: var(--cream); font-size: 0.76rem; font-weight: 600; color: var(--espresso-soft); }
.ad-tbl-head .ad-tbl-n { font-size: 0.76rem; }
.ad-tbl-ch { flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--espresso); background: none; border: 0; border-left: 1px solid var(--line); cursor: pointer; text-align: right; white-space: normal; }
.ad-tbl-ch:hover { background: #fffaf4; }
.ad-tbl-ch span { overflow-wrap: anywhere; }
.ad-tbl-ch { border-top: 3px solid var(--c); }
.ad-tbl-ch small { font-size: 0.68rem; font-weight: 400; color: var(--espresso-soft); }
.ad-tbl-total { display: contents; }
.ad-tbl-total .ad-tbl-n { font-weight: 700; background: rgba(0, 0, 0, 0.015); }
.ad-tbl-total .ad-tbl-none { font-weight: 400; }
.ad-tbl-none { font-size: 0.74rem; color: var(--espresso-soft); opacity: 0.8; white-space: normal; text-align: right; line-height: 1.2; }
.ad-set-name { flex-direction: column; align-items: flex-start; justify-content: center; color: var(--espresso); }
.ad-set-name strong { font-weight: 600; font-size: 0.9rem; line-height: 1.3; overflow-wrap: anywhere; }
.ad-set-name .ad-sub { line-height: 1.35; }
.ad-up, .ad-tbl-n.ad-up { color: #2f6b34; font-weight: 700; }
.ad-down, .ad-tbl-n.ad-down { color: #a2402a; font-weight: 700; }
.ad-set-quiet { opacity: 0.6; }
.ad-set-more { display: block; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); background: var(--cream);
  font: inherit; font-weight: 600; color: var(--espresso); cursor: pointer; }
.ad-set-more:hover { background: var(--cream-deep); }
@media (max-width: 620px) {
  .ad-tbl-row { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr)); }
  .ad-sets .ad-tbl-row { grid-template-columns: minmax(0, 1fr) repeat(3, 60px); }
  .ad-tbl-ch { font-size: 0.74rem; }
  .ad-tbl-row > *, .ad-tbl-total > * { padding: 9px 8px; }
  .ad-tbl-n { font-size: 0.88rem; }
  .ad-tbl-label { font-size: 0.8rem; }
}
/* "Worth a look" - the tips (js/manage-ads.js tipsHtml) */
.ad-tips { padding: 12px 14px; margin-bottom: 10px; border-color: #e6d6a8; background: #fffaf0; }
.ad-tips-h { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: #7a5a12; margin-bottom: 4px; }
.ad-tip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #efe3c4; font-size: 0.88rem; }
.ad-tip:first-of-type { border-top: 0; }
.ad-tip .mg-small-btn { flex: none; }

/* "How are the ads doing?" (js/manage-ads.js scoreHtml, owner 10 Nov 2026:
   targets, healthy and ideal). One row per number: what it means, a bar of
   zones (bad on the left, good on the right) with a marker where we are, and
   the value with its grade. Phone: the bar goes under the name and value. */
.ad-score { padding: 16px 18px 12px; margin-bottom: 10px; }
.ad-score-head h2 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; margin: 0 0 8px; }
.ad-verdict { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 6px; font-size: 0.95rem; line-height: 1.4; }
.ad-verdict .ad-grade { flex: none; margin-top: 1px; }
.ad-score-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 168px; grid-template-areas: "l bar v";
  align-items: center; gap: 6px 22px; padding: 14px 0; border-top: 1px solid var(--line); }
.ad-score-l { grid-area: l; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ad-score-l strong { font-size: 0.95rem; font-weight: 600; }
.ad-score-l span { font-size: 0.78rem; color: var(--espresso-soft); line-height: 1.35; }
.ad-score-l .ad-score-ideal { color: #2f5a1f; font-weight: 600; margin-top: 2px; }
.ad-score-v { grid-area: v; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.ad-score-v strong { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ad-score-sub { font-size: 0.72rem; color: var(--espresso-soft); }
.ad-score-bar { grid-area: bar; position: relative; padding: 8px 0 18px; }
.ad-zones { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; }
.ad-zones i { display: block; height: 100%; }
.ad-mark { position: absolute; top: 2px; width: 4px; height: 22px; margin-left: -2px; border-radius: 3px; background: var(--espresso); box-shadow: 0 0 0 2px var(--paper); }
.ad-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; }
.ad-ticks span { position: absolute; transform: translateX(-50%); font-size: 0.68rem; color: var(--espresso-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ad-row-early .ad-mark, .ad-row-none .ad-mark { background: #a99a8b; }
.ad-row-early .ad-zones, .ad-row-none .ad-zones { opacity: 0.55; }
.ad-score-foot { font-size: 0.74rem; color: var(--espresso-soft); line-height: 1.45; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
/* The zones: bar colour (i) and grade pill (em) */
.ad-zones .ad-z-bad, .ad-zones .ad-z-weak { background: #e3a08b; }
.ad-zones .ad-z-ok { background: #edd08a; }
.ad-zones .ad-z-good { background: #c3d2a6; }
.ad-zones .ad-z-ideal { background: #6f9a52; }
.ad-zones .ad-z-more { background: #9dbbd3; }
.ad-grade { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.3; }
.ad-grade b { font-size: 0.8rem; }
.ad-grade.ad-z-bad, .ad-grade.ad-z-weak { background: #f7e0d7; color: #8a3b24; }
.ad-grade.ad-z-ok { background: #fbf1d8; color: #6a4800; }
.ad-grade.ad-z-good { background: #eaf0df; color: #46512f; }
.ad-grade.ad-z-ideal { background: #d9e8cc; color: #2a5219; }
.ad-grade.ad-z-more { background: #e0ebf3; color: #2c5470; }
.ad-grade.ad-z-early { background: var(--cream-deep); color: var(--espresso-soft); font-weight: 600; }
.mg-stat .ad-grade { display: flex; width: fit-content; margin: 5px 0 2px; }
@media (max-width: 620px) {
  .ad-score { padding: 14px 14px 10px; }
  .ad-score-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "bar bar"; gap: 8px 12px; }
  .ad-score-v strong { font-size: 1.25rem; }
  .ad-score-bar { padding-top: 4px; }
  .ad-mark { top: -2px; }
  .ad-verdict { flex-direction: column; gap: 6px; }
}

/* /manage › Records › Invoices (js/manage-invoices.js, 10 Nov 2026). */
.mg-inv-row { flex-wrap: wrap; margin-bottom: 10px; }
.mg-inv-row > label { flex: 1 1 200px; }
.mg-inv-line > label:nth-child(2) { flex: 0 1 90px; }
.mg-inv-line > .mg-small-btn { margin-bottom: 12px; }
.mg-inv-preview { margin: 12px 0; background: var(--cream); }
.mg-inv-preview .mg-table { width: 100%; margin: 8px 0; }
.mg-inv-email { white-space: pre-wrap; font: inherit; font-size: 0.88rem; margin: 8px 0 0; }

/* /manage › Bookings: the section tiles (10 Nov 2026 - js/manage.js bookCounts).
   Computer: three groups in a row. Phone: stacked, each tile a compact row. */
.mg-bk-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr); gap: 14px; margin: 6px 0 22px; }
.mg-bk-glabel { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--espresso-soft); margin: 0 0 6px 2px; }
.mg-bk-glabel span { font-weight: 400; letter-spacing: 0.02em; text-transform: none; font-size: 0.78rem; }
.mg-bk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.mg-bk-tile {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon n" "name name" "sub sub";
  align-items: center; gap: 2px 8px; width: 100%; min-height: 104px; padding: 12px 14px; text-align: left;
  font: inherit; color: var(--espresso); background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.mg-bk-tile:hover { border-color: #d6c4ad; box-shadow: 0 4px 14px -10px rgba(60, 43, 34, 0.45); }
.mg-bk-tile:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.mg-bk-icon { grid-area: icon; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cream-deep); color: var(--espresso-soft); }
.mg-bk-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mg-bk-n { grid-area: n; justify-self: end; font-family: var(--serif); font-size: 1.7rem; line-height: 1; font-weight: 500; }
.mg-bk-name { grid-area: name; font-weight: 600; font-size: 0.95rem; margin-top: 6px; }
.mg-bk-sub { grid-area: sub; font-size: 0.78rem; color: var(--espresso-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-bk-empty .mg-bk-n { color: #b9a894; }
.mg-bk-empty .mg-bk-sub { color: #a8957f; }
.mg-bk-owing .mg-bk-sub { color: var(--terracotta-deep); font-weight: 600; }
.mg-bk-tile.active { background: #fbefe8; border-color: var(--terracotta); box-shadow: inset 0 0 0 1px var(--terracotta); }
.mg-bk-tile.active .mg-bk-icon { background: var(--terracotta); color: #fff; }
.mg-bk-tile.active .mg-bk-n { color: var(--terracotta-deep); }

@media (max-width: 640px) {
  .mg-bk-nav { grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
  .mg-bk-glabel { margin-bottom: 4px; }
  .mg-bk-tile {
    grid-template-columns: auto 1fr auto; grid-template-areas: "icon name n" "icon sub n";
    min-height: 60px; padding: 9px 12px; gap: 0 10px; border-radius: 12px;
  }
  .mg-bk-name { margin-top: 0; font-size: 0.9rem; }
  .mg-bk-sub { white-space: normal; line-height: 1.25; }
  .mg-bk-n { font-size: 1.45rem; }
  .mg-bk-icon { width: 30px; height: 30px; }
}
@media (max-width: 380px) {
  .mg-bk-tiles { grid-template-columns: 1fr; }
}