/* Shop Cottage Goods: a quiet storefront where each vendor's parcel is the visual unit. Colours match the logo. */
:root {
  --ink: #232A1F;
  --muted: #5E5646;
  --paper: #FFFFFF;
  --wash: #F7F1E6;
  --line: #E3D9C6;
  --accent: #2F5D2E;
  --accent-dark: #234724;
  --warn: #A4372C;
  --warn-wash: #FBEDEB;
  /* Every colour below can be changed in Admin > Theme (saved values are written after this file). */
  --header-bg: #1E3F26;
  --header-text: #FFFFFF;
  --header-tagline: #E7DCC3;
  --header-link: #F2EADB;
  --header-muted: #C8D2B0;
  --header-alert: #F2C14E;
  --cart-bg: #6E3B17;
  --cart-text: #FFFFFF;
  --input-bg: #FFFFFF;
  --button-text: #FFFFFF;
  --button-disabled: #B7B1A2;
  --success-bg: #E6EEDB;
  --notice-bg: #FBF0D6;
  --notice-text: #6B4A00;
  --notice-border: #D9A93E;
  --placeholder: #C9BCA2;
  --subscription-stripe: #6E3B17;
  --danger-border: #E4B4AE;
  --radius-sm: 4px;
  --radius-lg: 10px;
  font-family: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  line-height: 1.5;
  --overlay-bg: rgba(0, 0, 0, 0.75);   /* behind the camera scanner */
  --video-bg: #000000;
  --menu-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);   /* under open drop-down menus */
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--wash); }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.page { padding-top: 28px; padding-bottom: 64px; }
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 20px; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; margin: 0; }
h3 { font-size: 1rem; margin: 0; }

/* Header */
.site-header { background: var(--header-bg); color: var(--header-text); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 120px; padding: 10px 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; color: var(--header-text); text-decoration: none; min-width: 0; }
.brand-logo { width: 100px; height: 100px; flex: none; margin-right: 14px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-weight: 700; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.01em; }
.brand-tagline { color: var(--header-tagline); font-size: 0.9rem; line-height: 1.3; }
.brand:hover .brand-name { text-decoration: underline; }
@media (max-width: 560px) {
  .brand-logo { width: 64px; height: 64px; }
  .header-inner { min-height: 84px; }
  .brand-name { font-size: 1.1rem; }
  .brand-tagline { font-size: 0.8rem; }
}
.main-nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.main-nav a { color: var(--header-link); text-decoration: none; }
.main-nav a:hover { color: var(--header-text); text-decoration: underline; }
.nav-group { color: var(--header-muted); display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; max-width: 100%; }
.cart-link { background: var(--cart-bg); color: var(--cart-text) !important; padding: 6px 14px; border-radius: var(--radius-sm); }

/* Forms & buttons */
label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=search],
input[type=url], input[type=date], input[type=time], select, textarea {
  width: 100%; font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--ink);
}
textarea { min-height: 90px; }
.btn, input[type=submit] {
  font: inherit; font-weight: 600; background: var(--accent); color: var(--button-text); border: 0; border-radius: var(--radius-sm);
  padding: 10px 18px; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:hover, input[type=submit]:hover { background: var(--accent-dark); }
.btn[disabled], input[type=submit][disabled], .btn.aspNetDisabled { background: var(--button-disabled); cursor: not-allowed; }
.btn-quiet { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.btn-quiet:hover { background: var(--paper); }
.link-btn, input[type=submit].link-btn, a.link-btn {
  display: inline-block; background: var(--paper); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 4px 10px; margin: 2px 4px 2px 0; font: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1.4;
  text-decoration: none; cursor: pointer; white-space: nowrap; vertical-align: middle; }
.link-btn:hover, input[type=submit].link-btn:hover, a.link-btn:hover { background: var(--accent); color: var(--button-text); text-decoration: none; }
.link-btn.danger, input[type=submit].link-btn.danger { color: var(--warn); border-color: var(--warn); }
.link-btn.danger:hover, input[type=submit].link-btn.danger:hover { background: var(--warn); color: var(--button-text); }
.btn.btn-small { padding: 4px 10px; font-size: 0.85rem; }
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.hint { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
.flash { display: block; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; background: var(--success-bg); }
.flash.error { background: var(--warn-wash); color: var(--warn); }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }

/* Storefront */
.search { display: flex; gap: 8px; margin-bottom: 24px; max-width: 520px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.product { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
/* Picture frames: the whole picture always fits inside the frame (never cropped). The image is pinned to fill the
   frame and object-fit: contain scales it to fit; max-height alone doesn't limit an image inside a grid. */
/* Shop thumbnails: the picture fills the card's full width and keeps its own proportions, so it's never cropped,
   stretched or bordered. Very tall pictures are capped (and then fitted inside, on the soft background). */
.thumb { background: var(--wash); border-radius: var(--radius-sm); overflow: hidden; display: block; margin-bottom: 6px; }
.thumb img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; }
.thumb .noimg { display: flex; align-items: center; justify-content: center; height: 200px; }
.noimg { font-size: 2.5rem; font-weight: 700; color: var(--placeholder); }
.by { color: var(--muted); font-size: 0.9rem; margin: 0; }
.price { font-weight: 700; margin: 0; }
.product .btn { margin-top: auto; }
.stock-out { color: var(--warn); font-size: 0.85rem; margin: 0; }

/* Cart: each vendor is a parcel with its own shipping line */
.ship-to { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.ship-to label { margin: 0; }
.ship-to select { width: auto; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.parcel { background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 18px; }
.parcel.cannot-ship { border-left-color: var(--warn); }
.parcel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ships-from { color: var(--muted); font-size: 0.9rem; }
.lines-wrap { overflow-x: auto; }
table.lines { width: 100%; border-collapse: collapse; }
table.lines td, table.lines th { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; }
table.lines th { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
table.lines .num { text-align: right; white-space: nowrap; }
table.lines small { display: block; color: var(--muted); }
.qty-input { width: 72px !important; }
.parcel-foot { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin-top: 12px; font-size: 0.95rem; }
.parcel-foot .num { text-align: right; }
.parcel-total { font-weight: 700; }
.parcel-note { grid-column: 1 / -1; color: var(--accent); font-size: 0.9rem; }
.parcel.cannot-ship .parcel-note { color: var(--warn); }

.summary { position: sticky; top: 20px; }
.summary dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0 0 16px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; text-align: right; }
.summary .grand { font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.summary .btn { width: 100%; text-align: center; }
.empty { background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 32px; }

/* Checkout */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.checkout-layout h2 { margin-bottom: 14px; }
.section { margin-bottom: 24px; }
#card-element { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--input-bg); }
#card-errors { color: var(--warn); margin-top: 8px; min-height: 1.2em; }
.mini-parcel { border-left: 4px solid var(--accent); padding: 4px 0 4px 12px; margin-bottom: 14px; }
.mini-parcel p { margin: 2px 0; font-size: 0.92rem; }
.mini-parcel .muted { color: var(--muted); }

/* Vendor area */
.data { width: 100%; border-collapse: collapse; background: var(--paper); }
.data th, .data td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data th { font-size: 0.85rem; color: var(--muted); }
.data .num { text-align: right; white-space: nowrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 28px; }
.status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.85rem; background: var(--wash); }
.status-Processing, .status-Held, .status-Failed { background: var(--notice-bg); }
.status-Shipped, .status-Paid { background: var(--success-bg); }
.status-Cancelled { background: var(--warn-wash); color: var(--warn); }
.inactive td { color: var(--muted); }
.ship-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ship-form input { width: 150px; }
.address { white-space: pre-line; font-size: 0.9rem; }
.order-items { margin: 6px 0 0; padding-left: 18px; font-size: 0.9rem; }

@media (max-width: 820px) {
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  h1 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Item types, consumer notices and delivery restrictions */
.type-badge { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; background: var(--wash); color: var(--muted); }
.type-badge.restricted { background: var(--notice-bg); color: var(--notice-text); }
small.notice { display: block; font-style: italic; color: var(--muted); max-width: 46ch; }
.line-issue { display: block; margin-top: 6px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--warn-wash); color: var(--warn); font-size: 0.88rem; max-width: 52ch; }
.blocked-note { display: block; margin-bottom: 12px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warn-wash); color: var(--warn); font-size: 0.9rem; }
.delivery-limit { color: var(--notice-text); font-size: 0.85rem; margin: 0; }
.tax-flags { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tax-flags label { font-weight: 400; display: inline-flex; gap: 6px; align-items: center; }
fieldset.plain { border: 0; padding: 0; margin: 0 0 14px; }
fieldset.plain legend { font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; padding: 0; }

/* Product photos: vendor editor (6 slots) */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.photo-slot { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--paper); }
.photo-slot.main { border-color: var(--accent); border-width: 2px; }
.photo-frame { aspect-ratio: 1 / 1; background: var(--wash); border-radius: var(--radius-sm); overflow: hidden; position: relative; }
.photo-frame img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.photo-empty { font-size: 2rem; color: var(--placeholder); }
.slot-label { font-size: 0.85rem; font-weight: 600; }
.photo-slot input[type=file] { font-size: 0.8rem; max-width: 100%; }
.photo-slot input[type=text] { font-size: 0.85rem; padding: 6px 8px; }
.slot-actions { display: flex; gap: 14px; font-size: 0.85rem; }

/* Product page gallery */
.product-link { color: inherit; text-decoration: none; }
.product-link:hover { text-decoration: underline; }
a.thumb { text-decoration: none; }
.product-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.gallery-main { aspect-ratio: 1 / 1; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.gallery-main img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.gallery-main .noimg { font-size: 5rem; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; }
.gallery-thumb { padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-thumb.selected { border-color: var(--accent); }
.detail-info { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.detail-info h1 { margin: 0; }
.detail-price { font-size: 1.4rem; font-weight: 700; margin: 0; }
.notice-block { font-style: italic; color: var(--muted); margin: 0; max-width: 52ch; }
.description { max-width: 60ch; margin-top: 8px; }
@media (max-width: 820px) { .product-detail { grid-template-columns: 1fr; } }

/* Accounts, vendor settings, admin */
.nav-note { color: var(--header-alert); font-size: 0.85rem; }
.choice-row label { font-weight: 400; margin: 0 18px 0 6px; display: inline; }
.ship-from { max-width: 640px; margin-bottom: 24px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form input[type=text], .inline-form input[type=tel], .inline-form input[type=email], .inline-form select { width: auto; min-width: 160px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; text-decoration: none; color: var(--ink); }
.stat strong { display: block; font-size: 1.8rem; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 0.9rem; }
.stat.needs-action { border-color: var(--notice-border); background: var(--notice-bg); }
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-tabs a { padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.admin-tabs a.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.order-block { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 14px; }
.order-block .data { margin-top: 8px; }
.refund-form { display: flex; gap: 6px; flex-wrap: wrap; }
.refund-form input[type=text], .refund-form input[type=number] { width: 200px; }
.status-Pending, .status-Suspended, .status-PartiallyRefunded { background: var(--notice-bg); }
.status-Approved, .status-Paid { background: var(--success-bg); }
.status-Rejected, .status-Failed, .status-Refunded, .status-Reversed { background: var(--warn-wash); color: var(--warn); }

/* Subscriptions */
a.nav-note { color: var(--header-alert) !important; }
.plan-list label { font-weight: 400; display: inline; margin-left: 6px; }
.plan-list input { margin: 6px 0; }
.plan-list br + input { margin-top: 10px; }
.subscription-line { border-left-color: var(--subscription-stripe); }
.sub-state { margin: 0 0 6px; color: var(--muted); }
.status-Active, .status-Comped { background: var(--success-bg); }
.status-Grace, .status-PendingPayment { background: var(--notice-bg); }
.status-Lapsed, .status-Expired, .status-Cancelled { background: var(--warn-wash); color: var(--warn); }
.override-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; margin: 8px 0 12px; }
.override-grid h3 { margin: 0 0 4px; font-size: 1rem; }
.override-grid .hint { margin: 0 0 8px; }
.btn.danger { color: var(--warn); border-color: var(--danger-border); }

/* Fee schedule form */
.fee-form { margin: 8px 0 14px; }
.fee-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fee-row input.fee-amount { width: 120px; }
.fee-row input.fee-pct { width: 80px; }

/* Fee schedule form */
.fee-form { margin: 8px 0 14px; }
.fee-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fee-row input.fee-amount { width: 120px; }
.fee-row input.fee-pct { width: 80px; }

/* Theme admin */
.theme-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 24px; align-items: start; }
.theme-group { margin-bottom: 18px; }
.theme-group h2 { margin-bottom: 10px; }
.theme-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.theme-row:last-child { border-bottom: 0; }
.theme-row input.theme-color { width: 52px !important; height: 36px; padding: 2px; flex: none; cursor: pointer; }
.theme-label { flex: 1; }
.theme-hex { margin-left: 8px; color: var(--muted); font-size: 0.85rem; }
.theme-warnings { margin: 6px 0 0; padding-left: 20px; }
.theme-preview-wrap { position: sticky; top: 20px; }
.theme-preview { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--wash); color: var(--ink); }
.theme-preview .preview-header { padding: 8px 14px; min-height: 0; }
.theme-preview .brand-name { font-size: 1.05rem; }
.preview-page { padding: 14px; }
.preview-page .parcel { padding: 12px 14px; margin-bottom: 12px; }
.preview-product { width: 90px; padding: 6px; }
@media (max-width: 960px) { .theme-layout { grid-template-columns: 1fr; } .theme-preview-wrap { position: static; } }

/* Promotion discount lines */
.discount-line small { display: block; color: var(--muted); font-size: 0.85rem; }
.discount-amount { color: var(--accent); font-weight: 600; }
.promo-list { margin: 0; padding: 0; list-style: none; }
.promo-list li { background: var(--success-bg); border-radius: var(--radius-sm); padding: 6px 10px; margin-bottom: 6px; font-size: 0.92rem; }
.product-picks label { font-weight: 400; display: inline; margin-left: 6px; }
.product-picks input { margin: 5px 0; }
.status-Running { background: var(--success-bg); }
.status-Scheduled, .status-Paused { background: var(--notice-bg); }
.status-Ended { background: var(--warn-wash); color: var(--warn); }

/* Market pickup */
.fulfillment { margin: 4px 0 12px; }
.fulfillment-choice label { font-weight: 400; display: inline; margin-left: 6px; }
.fulfillment-choice input { margin: 4px 0; }
.pickup-note { background: var(--success-bg); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.92rem; }
.pickup-note ul { margin: 4px 0; padding-left: 18px; }
.status-PickedUp { background: var(--success-bg); }
@media print {
  .site-header, .admin-tabs, form .panel:not(#MainContent_ListPanel), .table-wrap:first-of-type, .btn { display: none !important; }
}

/* Remove shipped */
details.unship { margin-top: 8px; font-size: 0.9rem; }
details.unship summary { cursor: pointer; color: var(--warn); }
details.unship .refund-form { margin-top: 6px; }
.removal-note { margin-top: 6px; }

/* Teams and passwords */
.status-Owner { background: var(--success-bg); }
.status-Admin { background: var(--wash); }
.temp-password { background: var(--notice-bg); }
.temp-code { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.05em; padding: 2px 8px; background: var(--paper); border-radius: var(--radius-sm); user-select: all; }

/* Buy/get promotion hint in the cart */
.promo-hint { margin: 6px 0 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--notice-bg); color: var(--notice-text); font-size: 0.92rem; }
.free-note { display: block; color: var(--accent); font-weight: 600; font-size: 0.8rem; margin-top: 2px; }

/* SNAP/EBT */
.snap-badge { background: var(--success-bg); color: var(--ink); }
.snap-row { color: var(--muted); font-size: 0.9rem; }

/* Shop filters */
.shop-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 8px; }
.shop-filters .field { margin-bottom: 0; min-width: 160px; }
.shop-filters .filter-search { flex: 1 1 220px; }
.shop-filters select { width: 100%; }
.filter-label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.price-range { display: flex; align-items: center; gap: 6px; }
.price-range input { width: 86px !important; }
.filter-actions { display: flex; gap: 8px; }
.results-count { margin: 0 0 16px; }
.product .size { color: var(--muted); font-size: 0.9rem; margin: 0; }

.product-details { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0; font-size: 0.92rem; }
.product-details dt { color: var(--muted); }
.product-details dd { margin: 0; }
.save-address { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 4px; }
.save-address .inline-form { margin-top: 8px; }
.address .contact { margin-top: 6px; font-size: 0.88rem; color: var(--muted); }
.address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.address-card p { margin: 0 0 8px; }
.address-label { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.status-NoShow { background: var(--notice-bg); color: var(--notice-text); }
details.item-refund { margin-top: 8px; font-size: 0.9rem; }
details.item-refund summary { cursor: pointer; color: var(--accent); }
details.item-refund .refund-form { margin-top: 6px; flex-wrap: wrap; }

/* Disputes */
.dispute-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; }
.dispute-message { white-space: pre-wrap; border-left: 3px solid var(--line); padding-left: 10px; margin: 8px 0 12px; }
.status-Open { background: var(--notice-bg); color: var(--notice-text); }
.status-Resolved { background: var(--success-bg); }

/* Header: Cart sits at the top right beside the site name; the menu runs on its own row underneath. */
.cart-link { flex: none; font-weight: 600; }
.header-nav { padding: 0 0 12px; }
.header-nav .main-nav { border-top: 1px solid var(--header-muted); padding-top: 10px; gap: 8px 18px; }
@media (max-width: 560px) {
  .header-nav .main-nav { gap: 6px 14px; font-size: 0.95rem; }
}

/* "Customer no show" opens like a button. */
details.no-show summary { list-style: none; display: inline-block; cursor: pointer; }
details.no-show summary::-webkit-details-marker { display: none; }
details.no-show[open] summary { margin-bottom: 8px; }
.cart-link, .cart-link:hover { text-decoration: none; }
.cart-link:hover { filter: brightness(1.12); }

/* Sign in / Sign up / Sign out: outlined buttons beside the solid Cart button. */
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; }
.header-btn { display: inline-block; padding: 5px 14px; border: 1.5px solid var(--header-link); border-radius: var(--radius-sm);
  color: var(--header-link); font-weight: 600; text-decoration: none; line-height: 1.4; }
.header-btn:hover, .header-btn:focus-visible { background: var(--header-link); color: var(--header-bg); text-decoration: none; }
.cart-link { border: 1.5px solid var(--cart-bg); line-height: 1.4; padding: 5px 14px; }
@media (max-width: 560px) {
  .header-actions { width: 100%; justify-content: flex-end; }
  .header-btn, .cart-link { padding: 4px 10px; font-size: 0.92rem; }
}

/* Show / Hide password */
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 68px !important; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0;
  color: var(--accent); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 4px 8px; cursor: pointer; border-radius: var(--radius-sm); }
.pw-toggle:hover { text-decoration: underline; }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); }
.account-actions { border-top: 1px dashed var(--line); margin-top: 18px; padding-top: 12px; }
.account-actions h3 { margin: 0 0 8px; }

/* ---------- Help pages ---------- */
.page-help { float: right; margin: 4px 0 8px 12px; }
.help-page { max-width: 920px; }
.help-lead { font-size: 1.08rem; }
.help-figure { margin: 18px 0 22px; }
.help-figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.help-figure figcaption { color: var(--muted); font-size: 0.88rem; margin-top: 6px; }
/* Step numbers use the same colour as the markers in the pictures (the Cart colour). */
.help-steps { list-style: none; counter-reset: help-step; padding: 0; margin: 0 0 24px; }
.help-steps li { counter-increment: help-step; position: relative; padding: 4px 0 12px 42px; }
.help-steps li::before { content: counter(help-step); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; line-height: 28px;
  border-radius: 50%; background: var(--cart-bg); color: var(--cart-text); text-align: center; font-weight: 700; }
.help-list { padding-left: 22px; }
.help-list li { margin-bottom: 8px; }
.help-checklist { list-style: none; padding: 0; }
.help-checklist li { position: relative; padding: 4px 0 8px 32px; }
.help-checklist li::before { content: "\2713"; position: absolute; left: 4px; top: 3px; color: var(--accent); font-weight: 700; }
.help-tip { background: var(--notice-bg); color: var(--notice-text); border-left: 4px solid var(--notice-border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 16px 0; }
.help-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 28px; }
.help-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 24px; }
.help-topic { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); text-decoration: none; }
.help-topic:hover { border-color: var(--accent); text-decoration: none; }
.help-topic-num { flex: none; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: var(--cart-bg); color: var(--cart-text); text-align: center; font-weight: 700; }
.help-journey { margin: 8px 0 24px; }
.help-journey svg { width: 100%; height: auto; max-width: 900px; }
.help-journey .j-box rect { fill: var(--paper); stroke: var(--accent); stroke-width: 1.5; }
.help-journey .j-end rect { fill: var(--success-bg); stroke-width: 2.5; }
.help-journey text { fill: var(--ink); font-size: 15px; font-weight: 700; text-anchor: middle; }
.help-journey .j-small { font-size: 11.5px; font-weight: 400; fill: var(--muted); }
.help-journey .j-line { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.help-journey .j-arrow { fill: var(--muted); }
@media print { .page-help, .help-nav { display: none !important; } }
.intl-panel { margin-bottom: 16px; }
.intl-panel label { font-weight: 600; }

/* Email templates */
.template-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .template-layout { grid-template-columns: 1fr; } }
.template-body { font-family: Consolas, "Courier New", monospace; font-size: 0.9rem; }
.placeholder-list { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
.placeholder-list li { margin-bottom: 8px; }
.email-preview { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; background: var(--paper); max-width: 640px; }

/* Payment page (Stripe Payment Element) */
.pay-panel { max-width: 560px; margin: 0 auto; }
.pay-total { font-size: 1.2rem; }
.pay-lines { color: var(--muted); font-size: 0.92rem; padding-left: 20px; }
.payment-element { margin: 18px 0; min-height: 120px; }
.pay-button { width: 100%; padding-top: 12px; padding-bottom: 12px; font-size: 1.05rem; margin-bottom: 8px; }
#payment-errors { margin: 8px 0 12px; }

/* Store profile */
.logo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 10px 0; }
.store-logo-preview { border: 1px solid var(--line); border-radius: var(--radius-sm); object-fit: contain; background: var(--paper); }
.format-bar { display: flex; gap: 6px; margin-bottom: 6px; }

/* Reviews */
.review-panel { max-width: 760px; }
.review-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.review-what { flex: 1 1 200px; }
.thumbs { display: inline-flex; gap: 8px; }
.thumb label { margin-left: 4px; font-weight: 600; cursor: pointer; }
.comment-box { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 220px; }
.review-comment { width: 100% !important; }
.review-summary { margin: 14px 0; }
.review-summary .counts { font-weight: 600; }
.review-list { list-style: none; padding: 0; margin: 8px 0 0; }
.review-list li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.store-rating { color: var(--muted); font-size: 0.9rem; }
.thumb-up { color: var(--accent); font-weight: 600; }
.thumb-down { color: var(--warn); font-weight: 600; }

/* Product options */
.line-options { display: block; font-size: 0.85rem; color: var(--muted); }
.line-options.issue { color: var(--warn); font-weight: 600; }
.options-box { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 16px; margin: 14px 0; }
.options-box legend { font-weight: 700; padding: 0 6px; }
.option-row { padding: 4px 0; }
.option-label { display: flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; }
.option-count { width: 70px !important; }
.option-tally { color: var(--accent); }
.manual-review { margin-bottom: 18px; }
.manual-review summary { cursor: pointer; }
.manual-tag { display: inline-block; font-size: 0.8rem; padding: 1px 8px; border-radius: 999px; background: var(--notice-bg); color: var(--notice-text); }

/* Footer: same colours as the header, so it follows the theme. */
.site-footer { background: var(--header-bg); color: var(--header-text); margin-top: 40px; padding: 18px 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); font-size: 0.9rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: center; }
.site-footer a { color: var(--header-link); font-weight: 600; }
.site-footer a:hover { color: var(--header-text); }
@media print { .site-footer { display: none !important; } }
/* Keep the footer at the bottom of the window on short pages. */
#MainForm { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#MainForm > main { flex: 1 0 auto; width: 100%; }

/* Seller sign-up promotion (Admin > Site text) */
.seller-promo { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 14px 18px; margin: 16px 0; }
.seller-tagline { font-size: 1.12rem; font-weight: 700; color: var(--accent); margin: 0 0 8px; }
.seller-bullets { list-style: none; padding: 0; margin: 0; }
.seller-bullets li { position: relative; padding: 3px 0 3px 26px; }
.seller-bullets li::before { content: "\2713"; position: absolute; left: 4px; color: var(--accent); font-weight: 700; }
.coupon-redeem { border-top: 1px dashed var(--line); margin-top: 18px; padding-top: 12px; }
.coupon-redeem h3 { margin: 0 0 8px; }
.coupon-box { text-transform: uppercase; }

/* Food details */
/* Allergen tick boxes: a grid, each name to the right of its box. */
.food-fields ul.allergen-list { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; }
.food-fields ul.allergen-list li { display: flex; align-items: center; gap: 8px; margin: 0; }
.food-fields ul.allergen-list li input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.food-fields ul.allergen-list li label { display: inline; margin: 0; font-weight: 400; }
.food-details { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 16px; margin: 16px 0; background: var(--paper); }
.food-details h2 { font-size: 1.05rem; margin: 0 0 8px; }
.food-details p { margin: 0 0 6px; }
.food-details .allergens strong { color: var(--warn); }

/* Shipping labels */
.label-addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
.label-bought { border-left: 4px solid var(--accent); margin-bottom: 16px; }
.rate-list label { font-weight: 400; margin-left: 4px; }
.rate-list input { margin: 6px 0; }
.label-summary { font-size: 0.88rem; margin-top: 6px; }

/* Logs */
.log-filters { max-width: 900px; margin-bottom: 16px; }
.log-table td { vertical-align: top; font-size: 0.9rem; }
.log-table .nowrap { white-space: nowrap; }
.change-list { margin: 0; padding-left: 16px; font-size: 0.85rem; }
.log-detail pre { white-space: pre-wrap; word-break: break-word; font-size: 0.8rem; max-height: 300px; overflow: auto; background: var(--paper); padding: 8px; border-radius: var(--radius-sm); }
.email-frame { width: 100%; height: 420px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--input-bg); }

/* POS receipts */
.receipt-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.receipt-layout > div > .panel { margin-bottom: 16px; }
@media (max-width: 900px) { .receipt-layout { grid-template-columns: 1fr; } }
.receipt-template { font-family: Consolas, "Courier New", monospace; font-size: 0.88rem; }
.receipt-preview { font-family: Consolas, "Courier New", monospace; font-size: 0.8rem; line-height: 1.3; background: var(--input-bg); border: 1px solid var(--line);
  padding: 10px; overflow-x: auto; white-space: pre; max-width: 100%; }
.receipt-logo { text-align: center; margin: 0 0 6px; }
.receipt-logo img { max-width: 100%; image-rendering: pixelated; }
.error-text { color: var(--warn); }
.receipt-printer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.order-lookup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 16px; }
.order-lookup input[type="text"] { flex: 1 1 320px; max-width: 480px; }
.order-lookup label { font-weight: 700; }

/* Quantity in the cart: one less / how many / one more */
.qty-stepper { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.qty-stepper .step { min-width: 40px; min-height: 40px; padding: 4px 10px; font-size: 1.15rem; line-height: 1; }
.qty-in-cart { font-size: 0.95rem; }

/* Checkout paused by an admin */
.site-notice { background: var(--notice-bg); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 16px; }
.checkout-paused { display: block; font-weight: 600; color: var(--warn); margin-top: 6px; }

/* Fallback for the frames' shape where aspect-ratio isn't supported: an invisible spacer as tall as the shape needs
   (4:3 = 75% of the width, square = 100%). Where aspect-ratio works, the result is the same. */
.photo-frame::before, .gallery-main::before { content: ""; display: block; padding-top: 100%; }

/* Recipes */
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 10px; }
.recipe-card { display: flex; flex-direction: column; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; text-decoration: none; color: inherit; }
.recipe-card:hover, .recipe-card:focus { border-color: var(--accent); }
.recipe-card-title { font-size: 1.05rem; }
.recipe-facts { font-size: 0.88rem; color: var(--muted); }
.recipe-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 22px; align-items: start; margin-bottom: 18px; }
.recipe-photo { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.recipe-body { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 28px; align-items: start; }
.recipe-ingredients { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 18px; }
.recipe-ingredients ul { padding-left: 18px; margin: 0 0 14px; }
.recipe-ingredients li { margin-bottom: 8px; }
.recipe-product { display: block; font-size: 0.85rem; color: var(--muted); }
.recipe-steps ol { padding-left: 22px; }
.recipe-steps li { margin-bottom: 10px; line-height: 1.5; }
.recipe-notes { background: var(--wash); border-radius: var(--radius-sm); padding: 10px 14px; }
.product-recipes { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 16px; margin: 16px 0; background: var(--paper); }
.product-recipes h2 { font-size: 1.05rem; margin: 0 0 8px; }
.product-recipes ul { margin: 0; padding-left: 18px; }
.ingredient-rows input[type="text"], .ingredient-rows select { width: 100%; min-width: 80px; }
.recipe-photo-preview { max-width: 260px; height: auto; border-radius: var(--radius-sm); }
@media (max-width: 760px) { .recipe-header, .recipe-body { grid-template-columns: 1fr; } }

/* Related products (bottom of a product's page): small cards linking to each product. */
.related-products { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.related-products h2 { font-size: 1.15rem; margin: 0 0 12px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.related-card { display: flex; flex-direction: column; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; text-decoration: none; color: inherit; }
.related-card:hover, .related-card:focus { border-color: var(--accent); }
.related-thumb { position: relative; display: block; background: var(--wash); border-radius: var(--radius-sm); overflow: hidden; }
.related-thumb::before { content: ""; display: block; padding-top: 100%; }
.related-thumb img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.related-thumb .noimg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.related-name { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.related-price { font-size: 0.88rem; color: var(--muted); }
.related-fields ul.related-choices { list-style: none; padding: 0; margin: 6px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.related-fields ul.related-choices li { display: flex; align-items: center; gap: 8px; }
.related-fields ul.related-choices li input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.related-fields ul.related-choices li label { display: inline; margin: 0; font-weight: 400; }

/* Removing a store (Admin > Vendors) */
.danger-zone { margin-top: 28px; border: 1px solid var(--warn); border-radius: var(--radius-lg); padding: 14px 18px; }
.danger-zone h3 { margin: 0 0 8px; color: var(--warn); }
.removal-checks td { vertical-align: top; }
.danger-btn { background: var(--warn); border-color: var(--warn); }

/* ---------- Vendor app (phones) ---------- */
.install-card { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 16px; }
.install-card p { margin: 6px 0; }
.install-card .btn { margin-left: 6px; }
.scan-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: var(--overlay-bg); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.scan-overlay[hidden] { display: none; }
.scan-box { background: var(--paper); border-radius: var(--radius-lg); padding: 14px; width: 100%; max-width: 480px; text-align: center; }
.scan-box video { width: 100%; max-height: 60vh; background: var(--video-bg); border-radius: var(--radius-sm); }
/* Orders as cards on phones: each order a card, each field with its label. */
@media (max-width: 720px) {
    table.vendor-orders, table.vendor-orders tbody, table.vendor-orders tr, table.vendor-orders td { display: block; width: 100%; }
    table.vendor-orders thead { display: none; }
    table.vendor-orders tr { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 0 12px; padding: 6px 10px; }
    table.vendor-orders td { border: 0; padding: 6px 0; text-align: left; }
    table.vendor-orders td[data-label]::before { content: attr(data-label); display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
    table.vendor-orders td.num { text-align: left; }
    .order-lookup input[type="text"] { flex-basis: 100%; max-width: none; }
    .ship-form input, .ship-form select { width: 100%; }
    .btn { min-height: 44px; }
}

/* Preparation instructions on the product page */
.prep-details { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 16px; margin: 16px 0; background: var(--paper); }
.prep-details h2 { font-size: 1.05rem; margin: 0 0 6px; }
.prep-details h3 { font-size: 0.95rem; margin: 10px 0 4px; color: var(--accent); }
.prep-details p { margin: 0; line-height: 1.5; }
.footer-build { font-size: 0.82rem; opacity: 0.85; }


/* ---------- Menu bars (admin pages, and the store menu in the header): groups with drop-down menus ---------- */
.menu-bar .menu-top { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.menu-group { position: relative; margin: 0; }
.menu-link, .menu-button { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; cursor: pointer; background: none; border: 1px solid transparent; text-decoration: none; line-height: 1.2; }
.menu-caret { font-size: 0.75em; }
.admin-menu { margin: 0 0 18px; }
.admin-menu .menu-link, .admin-menu .menu-button { color: var(--ink); background: var(--paper); border-color: var(--line); }
.admin-menu .current > .menu-link, .admin-menu .current > .menu-button { background: var(--accent); color: var(--button-text); border-color: var(--accent); }
.vendor-menu { display: inline-block; vertical-align: middle; }
.vendor-menu .menu-link, .vendor-menu .menu-button { color: var(--header-link); padding: 5px 10px; }
.vendor-menu .current > .menu-link, .vendor-menu .current > .menu-button { border-color: var(--header-link); }
.menu-sub { display: none; position: absolute; left: 0; top: 100%; z-index: 40; min-width: 220px; list-style: none; margin: 4px 0 0; padding: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--menu-shadow); }
.menu-button[aria-expanded="true"] + .menu-sub { display: block; }
.menu-sub li { margin: 0; }
.menu-sub a { display: block; padding: 9px 12px; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); font-weight: 500; }
.menu-sub a:hover, .menu-sub a:focus { background: var(--wash); }
.menu-sub a[aria-current="page"] { font-weight: 700; color: var(--accent); }
@media (max-width: 720px) {
  /* Phones in portrait: the drop-downs open just below the whole menu bar, across its width. The bar anchors them;
     without that they were placed a screen-height down the page, out of sight (landscape was wide enough not to need it). */
  .menu-bar { position: relative; }
  .vendor-menu { display: block; width: 100%; }
  .menu-bar .menu-top { gap: 4px; }
  .menu-group.has-sub { position: static; }
  .menu-sub { left: 0; right: 0; top: 100%; min-width: 0; max-height: 70vh; overflow-y: auto; }
  .menu-sub a { padding: 12px 14px; }
}

/* "Welcome, Jane" under the header buttons */
.header-actions { flex-wrap: wrap; justify-content: flex-end; }
.header-welcome { flex-basis: 100%; text-align: right; font-size: 0.85rem; color: var(--header-muted); margin-top: 4px; }

/* Product form: Save and Cancel stay at the bottom of the screen while the form is in view. */
.form-save-bar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--paper); border-top: 1px solid var(--line); padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); margin-top: 16px; }
.form-save-bar .hint { flex: 1 1 260px; }

/* Local deliveries (vendor) */
.route-links .btn { margin: 4px 6px 4px 0; }
.delivery-card { margin-bottom: 12px; }
.delivery-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.delivery-miles { margin-left: auto; font-weight: 700; color: var(--accent); }
.delivery-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 8px; }
.delivery-items { margin: 0 0 6px; padding-left: 18px; }

/* Reports */
.report-table td, .report-table th { white-space: nowrap; }
.report-table .report-subtotal td { font-weight: 700; background: var(--wash); }
.report-table .report-total td { font-weight: 700; border-top: 2px solid var(--ink); }

/* Seller agreement */
.agreement-box { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); padding: 12px 16px; font-size: 0.92rem; line-height: 1.5; }
.agreement-box h2 { font-size: 1.15rem; margin: 0 0 8px; }
.agreement-box h3 { font-size: 1rem; margin: 14px 0 6px; }
.agreement-box:focus { outline: 2px solid var(--accent); }
.agreement-accept { margin-top: 10px; }
.agreement-accept input[disabled] + label { color: var(--muted); }
.agreement-page { max-width: 820px; }
.agreement-notice { background: var(--notice-bg); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 16px; }

/* Two-step sign-in */
.mfa-code { font-size: 1.4rem; letter-spacing: 0.25em; max-width: 12ch; text-align: center; font-variant-numeric: tabular-nums; }
.mfa-steps { padding-left: 20px; }
.mfa-steps li { margin-bottom: 10px; }
.mfa-qr { background: #ffffff; display: block; width: fit-content; padding: 4px; border-radius: var(--radius-sm); margin: 10px 0 4px; line-height: 0; min-height: 40px; }
.mfa-qr svg { width: 210px; height: 210px; max-width: 100%; }
.mfa-key { font-size: 1rem; letter-spacing: 0.08em; word-break: break-all; }
.backup-codes { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 12px 0 16px; max-width: 420px; font-size: 1.15rem; }
.backup-codes li { width: 50%; margin-bottom: 8px; }
.mfa-history { padding-left: 20px; color: var(--muted); font-size: 0.92rem; }
@media print {
    body:has(.mfa-codes-panel) header, body:has(.mfa-codes-panel) footer, body:has(.mfa-codes-panel) .no-print,
    body:has(.mfa-codes-panel) .site-notice, body:has(.mfa-codes-panel) main > div > p,
    body:has(.mfa-codes-panel) main > div > h1, body:has(.mfa-codes-panel) .flash { display: none !important; }
    .mfa-codes-panel { border: none; box-shadow: none; }
}

/* Notifications */
.push-hidden { display: none !important; }
.push-card ol { padding-left: 20px; }

/* Promotions: a free-item offer on hold because the free item has no stock */
.status-Nostock { background: var(--warn-wash); color: var(--warn); }

/* Porch pickup settings: address fields side by side, stacked on phones */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.form-grid .span-2 { grid-column: span 2; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: auto; } }
.porch-form select { width: auto; }

/* Products on sale */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.price-now { font-weight: 700; color: var(--warn); }
.price-was { color: var(--muted); font-weight: 400; font-size: 0.9em; }
.save-badge { display: inline-block; background: var(--warn-wash); color: var(--warn); font-size: 0.78rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.sale-fields { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 10px; }
.sale-ends { display: inline-block; font-size: 0.8rem; color: var(--warn); font-weight: 600; margin-left: 4px; }

/* Display order and featured product (store's product list) */
.order-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.order-tools .field { margin: 0; flex: 1 1 240px; max-width: 360px; }
.order-box { width: 4.5em; text-align: right; }
.featured-badge { display: inline-block; background: var(--accent); color: var(--button-text); font-size: 0.76rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }

/* Featured product: first, two columns wide where there's room, with its label */
.product.featured { grid-column: span 2; border: 2px solid var(--accent); box-shadow: 0 4px 18px rgba(0,0,0,0.08); }
.product.featured .featured-label { order: -1; align-self: flex-start; margin: 0; background: var(--accent); color: var(--button-text); font-weight: 700; font-size: 0.85rem; padding: 3px 12px; border-radius: 999px; }
.product.featured h3 { font-size: 1.3rem; }
.product.featured .featured-text { margin: 0; color: var(--ink); font-size: 0.95rem; line-height: 1.45; }
@media (max-width: 560px) { .product.featured { grid-column: auto; } }

/* Selections from the catalog; stock below 0 (keeps selling) */
.option-row.sold-out .option-label { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.stock-negative { color: var(--warn); font-weight: 700; }
.option-table select.option-product { max-width: 260px; }

/* Starburst badges (New, spice level) over a product's picture. --burst-size sets their size. */
:root { --burst-size: 36px; }
.thumb-wrap, .gallery-main { position: relative; }
.bursts { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; pointer-events: none; z-index: 1; }
.gallery-main .bursts { --burst-size: 46px; top: 10px; left: 10px; }
.burst { width: var(--burst-size); height: var(--burst-size); display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.3)); }
.burst text { font-family: inherit; font-weight: 800; letter-spacing: 0.02em; }
.burst-new polygon { fill: #f5b700; } .burst-new text { fill: #3a2a00; }
.burst-mild polygon { fill: #3f9c35; } .burst-mild text { fill: #ffffff; }
.burst-medium polygon { fill: #e8820c; } .burst-medium text { fill: #ffffff; }
.burst-hot polygon { fill: #d62828; } .burst-hot text { fill: #ffffff; }
.list-bursts .bursts { position: static; display: inline-flex; vertical-align: middle; margin-left: 6px; --burst-size: 24px; }
.badge-fields { align-items: flex-end; }

/* Previous / next through the store's products (product page) */
.store-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.store-nav a.store-nav-prev, .store-nav a.store-nav-next { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 34%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--paper); }
.store-nav a.store-nav-prev:hover, .store-nav a.store-nav-next:hover { border-color: var(--accent); }
.store-nav-arrow { font-size: 1.4rem; line-height: 1; color: var(--accent); }
.store-nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.store-nav-pos { color: var(--muted); font-size: 0.88rem; text-align: center; flex: 1 1 auto; }
@media (max-width: 560px) { .store-nav-name { display: none; } .store-nav a.store-nav-prev, .store-nav a.store-nav-next { max-width: none; padding: 6px 14px; } }