/* FTO 2.0 — Domain 1 stylesheet.
   Correction, 2026-09-26: this file and README_FULL_DEPLOYMENT.md
   previously referred to a future "Blueprint Domain 13 (brand/design
   system)" that would eventually replace this hand-authored stylesheet.
   That was a mislabel -- Blueprint v1.4 §6's actual 13-domain list
   defines Domain 13 as "Customer Identity & Request Recovery" (built
   2026-09-26, see RequestStatusRepository), not a design system. No
   domain in the Blueprint governs presentation/branding beyond Domain 4
   (CMS & Storefront), which this stylesheet is part of. There is
   currently no planned successor system that will "replace this
   wholesale" -- if one is ever commissioned, it isn't a Blueprint
   domain and would need its own scoping decision first.
   Brand rebrand, 2026-09-26: replaced the earlier placeholder green
   (#2f5c33-family, chosen with no brand input while there was no real
   brand yet) with the real brand supplied by the user -- Georgia body
   font, primary #FF6500 (orange) and secondary #FFA400 (amber) for every
   action color, link, and accent below. The user's palette also included
   a navy (#000080) and a pink (#FFA3CF), explicitly scoped to employee
   apparel only ("used for employee shirts") -- neither appears anywhere
   in this file, on purpose. The green in-stock badge (.badge-in_stock,
   near the end of this file) is left untouched: it's a semantic
   available/unavailable status color, not a brand-identity color, and
   green traditionally reads as "good" independent of any brand's palette.

   Domain 15 (Marketing-Editable Theming), 2026-09-26: every real use of
   the two brand colors below is now written as var(--brand-primary,
   #FF6500) / var(--brand-secondary, #FFA400) instead of the bare hex --
   the hex stays as the CSS fallback value (so this file alone, on its
   own, still renders the current brand exactly as before), but the
   var() lets a separate, admin-editable stylesheet
   (GET /assets/css/theme.css, ThemeController::css(), reading
   site_settings via BrandingSettingsSchema) override both colors at
   runtime with no code change or deploy. Direct user requirement: "They
   should be able to go to the admin panel, update the colors, [enter a
   step-up] PIN, and it apply... it shouldn't be only at deploy time."
   See ThemeController's docblock for the Cloudflare-cache mechanics that
   make an edit actually reach visitors after a manual cache purge. */
:root { color-scheme: light; }
body { font-family: Georgia, "Times New Roman", Times, serif; margin: 0; background: #f7f7f5; color: #1c1c1a; }
/* 2026-09-28 mobile-standards pass, direct user instruction ("we have to
   follow apple standards as apple iphone users are our biggest user
   base") -- two site-wide safety nets neither of which existed before:
   (1) raw admin-authored HTML (care guide sections, content pages --
   both edited via a plain textarea with no media/embed picker, see
   README's note on that editor) had NOTHING stopping a pasted-in wide
   image, iframe, or table from overflowing a narrow phone viewport;
   .storefront-rich-content (the wrapper now added around both body_html
   render sites) constrains any embedded media/table to the viewport
   width instead of forcing horizontal page scroll. (2) iOS Safari shows
   a gray tap-highlight flash on every link/button tap by default, which
   reads as janky/unpolished against Apple's own HIG guidance for a
   deliberately-designed tap state; -webkit-tap-highlight-color is set to
   transparent site-wide and :active states already carry real hover/
   active styling of their own (button, a.cta, a.button, .storefront-card
   below), so removing the default flash doesn't remove all tap feedback. */
* { -webkit-tap-highlight-color: transparent; }
.storefront-rich-content img, .storefront-rich-content iframe, .storefront-rich-content video { max-width: 100%; height: auto; }
.storefront-rich-content table { display: block; max-width: 100%; overflow-x: auto; }
.shell { max-width: 32rem; margin: 3rem auto; padding: 2rem; background: #fff; border: 1px solid #ddd; border-radius: 0.5rem; }
.auth-shell { max-width: 24rem; }
/* 2026-09-27 real defect (c8ymt795, "Admin Dashboard": "Nav is not styled,
   wrappers are too small and have information overflow"). Root cause of
   the second half: every one of the 53 admin content views was wrapped in
   `.shell`, a 32rem-wide box built for the single-column login form
   (admin/login.php, which correctly stays narrow via `.shell.auth-shell`)
   -- a dashboard table, a plant editor, a settings form all had to fit
   inside a login-box width, which is exactly "wrappers too small /
   information overflow." Those 53 views now use this separate,
   dashboard-width `.admin-shell` class instead; `.shell` itself is left
   unchanged so login.php (and the storefront's own unrelated
   home-stub.php) keep their original narrow layout. */
.admin-shell { max-width: 72rem; margin: 1.5rem auto 3rem; padding: 0 1.5rem 2rem; box-sizing: border-box; }
/* First half of the same defect: admin-global-header/-nav (used by
   app/Views/admin/partials/shell.php, included at the top of every one of
   those 53 admin pages) had no CSS at all -- an unstyled <header> and a
   flat, unstyled list of <a> tags for the whole admin area's primary
   navigation. */
.admin-global-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.5rem; background: #241a12; color: #fff; flex-wrap: wrap; }
.admin-global-header strong { font-size: 1.05rem; }
.admin-global-header form { margin: 0; }
.admin-global-header button { background: transparent; border: 1px solid #6b5744; color: #f4ede4; padding: 0.4rem 0.9rem; border-radius: 0.25rem; cursor: pointer; }
.admin-global-header button:hover { background: #3a2c1e; }
.admin-breadcrumbs { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 1rem; font-size: 0.85rem; color: #c9b8a6; }
.admin-breadcrumbs a { color: #f4ede4; text-decoration: none; }
.admin-breadcrumbs a:hover { text-decoration: underline; }
.admin-global-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.6rem 1.5rem; background: #fff; border-bottom: 1px solid #ddd; }
.admin-global-nav a { padding: 0.45rem 0.75rem; border-radius: 0.25rem; color: #3a2c1e; text-decoration: none; font-size: 0.9rem; }
.admin-global-nav a:hover { background: #fdf1e6; }
/* 2026-09-27 real defect (8upieltv, "critical"): section sub-navigation
   (e.g. Knowledge's Plants/Rootstocks/Suppliers/Claims/etc.) previously
   existed only as unstyled `.nav` plain-text links, hand-copied into just
   one dashboard view per section -- see shell.php's own docblock for the
   full fix (now rendered on every page in a section, from one shared
   place). Styled as a secondary bar, visually subordinate to
   .admin-global-nav above it (smaller text, lighter background, a bottom
   border instead of a dark fill) so the two navigation levels read as
   "main areas" vs. "pages within this area" rather than two identical
   bars stacked on top of each other. */
.admin-subnav { display: flex; flex-wrap: wrap; gap: 0.2rem; padding: 0.5rem 1.5rem; background: #fdf1e6; border-bottom: 1px solid #f0ddc8; }
.admin-subnav a { padding: 0.35rem 0.65rem; border-radius: 0.25rem; color: #6b4a1e; text-decoration: none; font-size: 0.82rem; }
.admin-subnav a:hover { background: #fff; }
.admin-subnav a.active { background: #fff; color: #241a12; font-weight: bold; box-shadow: inset 0 -2px 0 var(--brand-primary, #FF6500); }
h1 { font-size: 1.25rem; margin-top: 0; }
p.meta { color: #555; font-size: 0.875rem; }
p.notice.danger { background: #fdecea; color: #7a1f14; padding: 0.5rem 0.75rem; border-radius: 0.25rem; }
/* Domain 14, 2026-09-26: admin/care/case.php's "just labeled" confirmation
   banner -- this codebase had a .notice.danger rule but no positive/
   success counterpart anywhere until now. */
p.notice.success { background: #e6f2e8; color: #1e4a28; padding: 0.5rem 0.75rem; border-radius: 0.25rem; }
label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; }
/* input/select share one rule (2026-09-26 fix) -- select was previously
   unstyled, so it kept the browser's own default height/padding/border
   while its neighboring text inputs in the same .field-grid row (e.g.
   estimator "Quantity"/"Service") used this rule, leaving the two
   visibly misaligned. font-family: inherit is needed specifically because
   a bare <select> does not inherit the body's Georgia font by default in
   most browsers, unlike <input>.
   font-size is set explicitly to 1rem, NOT inherited (2026-09-26 second
   fix, found in the same live review as the alignment issue above): every
   form field in this app sits inside a <label>, and label itself is
   0.9rem -- a first pass at this rule used `font: inherit`, which pulled
   that same small 0.9rem caption size into every input/select/textarea's
   actual typed text, the opposite of what a working monitor at standard
   resolution needs for a comfortable input font size. Labels stay small
   (they're captions); the text people actually type or read needs to be
   larger than its own caption, not the same size. */
input, select { width: 100%; box-sizing: border-box; padding: 0.5rem; margin-top: 0.25rem; border: 1px solid #ccc; border-radius: 0.25rem; font-family: inherit; font-size: 1rem; }
button {
    padding: 0.6rem 1.4rem;
    border: 0;
    border-radius: 0.25rem;
    background: var(--brand-primary, #FF6500);
    color: #fff;
    cursor: pointer;
    /* 2026-09-26: bumped from 0.5rem/1rem padding and the browser default
       font-size -- flagged in a live review as hard to read against the
       #FF6500 orange. Kept the same color deliberately (no color change
       without marketing sign-off, see README's Domain 4 brand section)
       and made the button itself larger with bolder, bigger text instead,
       which is the safe lever to pull before anyone decides the color
       itself needs to change. */
    font-size: 1rem;
    font-weight: 600;
}
/* 2026-09-26, third fix from the same live review: button.secondary (the
   product-picker's "Change" button) had no rule of its own, so it fell
   through to the plain `button` rule above -- meaning once a plant was
   selected, "Change" rendered as a second full-weight #FF6500 CTA sitting
   directly next to the selected plant's name, competing visually with the
   actual submit button lower on the form. A secondary action should look
   subordinate to the primary one: same shape, outlined instead of filled,
   smaller type, no bold. */
button.secondary {
    background: #fff;
    color: #1c1c1a;
    border: 1px solid #ccc;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 400;
}
button.secondary:hover { background: #f2f2f0; }

/* Storefront (Domain 4, public rendering) — same hand-authored,
   minimal-but-branded ethos as the rest of this file (see the top
   comment's 2026-09-26 correction about the earlier "Domain 13" design-
   system mislabel -- no such successor is currently planned). */
.storefront-header { background: #fff; border-bottom: 1px solid #ddd; }
.storefront-header-row { max-width: 64rem; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.storefront-logo { font-weight: 700; font-size: 1.1rem; color: #1c1c1a; text-decoration: none; display: inline-flex; align-items: center; }
/* Header logo <img> (nav.php, 2026-09-26 branding build) -- the source
   file is a 600x600 square; without a height constraint it would render
   at native size and blow out the header row, so this fixes a sane
   header height and lets width follow proportionally. */
.storefront-logo-img { height: 2.75rem; width: auto; display: block; }
.storefront-nav a { margin-left: 1.25rem; color: var(--brand-primary, #FF6500); text-decoration: none; }
.storefront-nav a:first-child { margin-left: 0; }
/* 2026-09-27 real defect (h8brnknnjjg0crm1rodm): no responsive breakpoint
   existed anywhere in this file, so 7 nav links on a narrow viewport had
   nothing but flex-wrap holding them apart -- plain unstyled text on
   multiple lines, no way to collapse it. Toggle button hidden on desktop;
   the mobile breakpoint below both reveals it and collapses the nav
   itself into a dropdown panel controlled by it. assets/js/app.js toggles
   the .is-open class and the button's aria-expanded attribute. */
/* 2026-09-28: bumped from 2.5rem (40px) to 2.75rem (44px) -- Apple's Human
   Interface Guidelines set 44x44pt as the minimum comfortable tap target,
   and the user directly asked to hold this whole pass to Apple's own
   standard given iPhone is the largest share of our mobile traffic. */
.storefront-nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 0.3rem; width: 2.75rem; height: 2.75rem; padding: 0.5rem; border: 1px solid #ddd; border-radius: 0.25rem; background: #fff; cursor: pointer; }
.storefront-nav-toggle-bar { display: block; height: 2px; width: 1.25rem; background: #1c1c1a; border-radius: 1px; }
@media (max-width: 720px) {
  .storefront-nav-toggle { display: flex; }
  .storefront-header-row { position: relative; }
  .storefront-nav { display: none; flex-direction: column; width: 100%; order: 3; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #eee; gap: 0.25rem; }
  .storefront-nav.is-open { display: flex; }
  /* 2026-09-28: each link's own tap target grown to a real 44px-tall row
     (was 0.5rem vertical padding only, ~32px with this font size) --
     display:block so the padding covers the full row, not just the text. */
  .storefront-nav a { display: block; margin-left: 0; padding: 0.75rem 0.25rem; min-height: 1.25rem; }
}
.storefront-announcements { background: var(--brand-primary, #FF6500); color: #fff; text-align: center; padding: 0.5rem 1rem; font-size: 0.9rem; }
.storefront-announcement a { color: #fff; }
.storefront-shell { max-width: 64rem; margin: 2rem auto; padding: 0 1.5rem 3rem; }
.storefront-breadcrumb { font-size: 0.85rem; color: #555; }
.storefront-breadcrumb a { color: var(--brand-primary, #FF6500); }
.storefront-eyebrow { color: #555; font-style: italic; margin-top: -0.5rem; }
.storefront-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.storefront-card { display: block; background: #fff; border: 1px solid #ddd; border-radius: 0.5rem; padding: 1rem; text-decoration: none; color: #1c1c1a; }
.storefront-card h2 { font-size: 1rem; margin: 0.25rem 0; }
.storefront-card-image { width: 100%; height: 10rem; object-fit: cover; border-radius: 0.25rem; }
.storefront-price { font-weight: 600; margin: 0; }
.storefront-hero-image { width: 100%; max-height: 24rem; object-fit: cover; border-radius: 0.5rem; margin: 1rem 0; }
.storefront-category-hero { position: relative; border-radius: 0.5rem; overflow: hidden; margin: 1rem 0 1.5rem; }
.storefront-category-hero img { width: 100%; max-height: 20rem; object-fit: cover; display: block; }
.storefront-category-hero-copy { padding: 1.25rem 1.5rem; }
.storefront-category-hero--dark .storefront-category-hero-copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0)); color: #fff; }
.storefront-category-hero--light .storefront-category-hero-copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(255,255,255,0.85), rgba(255,255,255,0)); color: #1c1c1a; }
.storefront-category-hero--none .storefront-category-hero-copy { background: #fff; border: 1px solid #ddd; border-top: 0; }
.storefront-category-hero h1 { margin: 0 0 0.25rem; }
.storefront-category-hero .cta { display: inline-block; margin-top: 0.75rem; padding: 0.5rem 1rem; border-radius: 0.25rem; background: var(--brand-primary, #FF6500); color: #fff; text-decoration: none; font-size: 0.9rem; }
.storefront-gallery { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.storefront-gallery img { width: 8rem; height: 8rem; object-fit: cover; border-radius: 0.25rem; }
.storefront-body { margin-top: 1rem; }
.storefront-care-section { margin-top: 1.5rem; }
.storefront-sku { color: #777; font-size: 0.85rem; }
/* Domain 13 (Customer Identity & Request Recovery), 2026-09-26: the
   status_token shown on estimate/special-order confirmation pages is a
   64-character hex string -- without word-break it overflows a narrow
   mobile viewport instead of wrapping. */
.storefront-eyebrow code { word-break: break-all; }
/* 2026-09-27, same c8ymt795 pass: a wide admin table (many columns, or the
   long SKU/hash-style values .table-wrap already has a word-break note
   about above) can still be wider than even the new .admin-shell -- this
   lets it scroll horizontally within its own box instead of forcing the
   whole page to overflow sideways. */
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.table-wrap th, .table-wrap td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #eee; }
p.empty { color: #777; font-style: italic; }

/* Domain 6 honeypot spam trap (storefront/care/intake.php). Positioned
   off-screen rather than display:none/visibility:hidden -- some simple
   bots specifically skip fields hidden that way but still fill in ones
   that are merely moved off-screen, which is exactly the behavior this
   field exists to catch. aria-hidden + tabindex="-1" on the input itself
   (already in the markup) keep it out of screen readers and tab order. */
.field-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Domain 6, second slice (2026-09-21): shared Square identity-verification
   widget (storefront/care/intake.php, storefront/care/status-lookup.php).
   Step visibility itself is controlled by the "hidden" attribute set from
   assets/js/app.js, not by these rules -- this is just the error-text
   styling. */
.identity-widget-error, p.identity-widget-error { color: #b00020; }

/* Admin queue per-status counters (2026-09-21 request), admin/care/queue.php.
   Every other .badge in this codebase is a single standalone span with no
   spacing needs; these are several in a row, so they need their own rule. */
a.badge { display: inline-block; margin: 0 0.4rem 0.4rem 0; padding: 0.2rem 0.6rem; border: 1px solid #ccc; border-radius: 999px; text-decoration: none; color: inherit; }
a.badge.subtle { background: var(--brand-secondary, #FFA400); color: #1c1c1a; border-color: var(--brand-secondary, #FFA400); }

/* Domain 14 (ML Case Assistance), 2026-09-22: intake's product picker
   (storefront/care/intake.php) and symptom checklist. Same "minimal
   placeholder" ethos as the rest of this file -- just enough that the
   search results are legible and the checklist isn't one unreadable wall
   of text. */
button.link { background: none; color: var(--brand-primary, #FF6500); padding: 0; text-decoration: underline; }
[data-product-picker] { position: relative; margin-bottom: 1rem; }
/* 2026-09-26: neither of these had a rule before, so the selected-plant
   line and the container-size dropdown that appears under it sat flush
   against whatever was above/below with only the browser's default <p>
   margin holding them apart -- explicit spacing so the "selected" state
   reads as its own row, not a layout accident. */
[data-product-selected] { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.75rem; }
[data-product-selected] strong { font-weight: 600; }
[data-variation-wrap] { margin-bottom: 0.75rem; }
.product-search-results { position: absolute; z-index: 5; left: 0; right: 0; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #ccc; border-top: 0; border-radius: 0 0 0.25rem 0.25rem; max-height: 12rem; overflow-y: auto; }
.product-search-results li { border-bottom: 1px solid #eee; }
.product-search-results button { display: block; width: 100%; text-align: left; background: #fff; color: #1c1c1a; padding: 0.5rem; border-radius: 0; }
.product-search-results button:hover { background: #f2f2f0; }
.symptom-checklist { border: 1px solid #ddd; border-radius: 0.25rem; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.symptom-checklist legend { font-size: 0.9rem; font-weight: 600; padding: 0 0.25rem; }
label.checkbox { display: inline-flex; align-items: center; gap: 0.35rem; width: auto; margin: 0 1rem 0.5rem 0; font-size: 0.85rem; }
label.checkbox input { width: auto; margin: 0; }

/* Domain 14: admin case page's "Suggested diagnoses" panel (admin/care/case.php). */
.prediction-list { list-style: none; margin: 0.5rem 0 1rem; padding: 0; }
.prediction-list li { border: 1px solid #ddd; border-radius: 0.25rem; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; }
.prediction-confidence { color: #555; font-size: 0.85rem; }
.prediction-rationale { color: #555; font-size: 0.8rem; margin: 0.2rem 0; }
.prediction-example { font-size: 0.85rem; margin: 0.3rem 0 0; padding: 0.4rem 0.6rem; background: #f7f7f5; border-radius: 0.25rem; }

/* Domain 7 (Estimator & Routing), Slice 1: public estimate result breakdown. */
.estimate-breakdown { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.estimate-breakdown td { padding: 0.4rem 0.6rem; border-bottom: 1px solid #eee; }
.estimate-breakdown td:last-child { text-align: right; }
.estimate-breakdown tr.estimate-total td { font-weight: 700; border-top: 2px solid var(--brand-primary, #FF6500); border-bottom: none; }
.estimate-breakdown tr.estimate-subtotal td { border-top: 1px solid #ccc; }

/* Homepage build (Domain 4, 2026-09-25) -- storefront/home.php and
   storefront/partials/footer.php. Fixes a real defect found live the same
   night the homepage shipped: these templates were written before any
   matching CSS existed, so the bare <video>/<img> hero rendered at its
   native pixel size with nothing constraining it (no max-width, no
   object-fit, no explicit aspect ratio) -- visually a huge, offset block
   eating the top of the page. Every rule below has an explicit size/ratio
   constraint for exactly that reason; nothing here is decorative-only. */
.storefront-home { padding-top: 0; }
.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; }
.storefront-kicker { color: var(--brand-primary, #FF6500); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.35rem; }
.cta { display: inline-block; margin-top: 0.75rem; padding: 0.6rem 1.25rem; border-radius: 0.25rem; background: var(--brand-primary, #FF6500); color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600; }

.storefront-hero { position: relative; border-radius: 0.5rem; overflow: hidden; margin: 1.5rem 0 2.5rem; }
.storefront-hero--media { background: #F4EDE4; min-height: 20rem; display: flex; align-items: flex-end; }
.storefront-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; max-height: 28rem; object-fit: cover; object-position: center; display: block; }
.storefront-hero-copy { position: relative; z-index: 1; padding: 2rem 0; max-width: 36rem; box-sizing: border-box; }
.storefront-hero--media .storefront-hero-copy { padding: 2rem 1.75rem; max-width: 36rem; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0.15) 70%, rgba(0,0,0,0)); width: 100%; }
.storefront-hero-copy h1 { margin: 0 0 0.5rem; font-size: 1.75rem; }
.storefront-hero-copy p { margin: 0 0 0.5rem; }

.storefront-home-section { margin: 2.5rem 0; }
.storefront-home-section h2 { margin: 0.15rem 0 0; font-size: 1.35rem; }
.storefront-home-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.storefront-view-all { color: var(--brand-primary, #FF6500); font-weight: 600; text-decoration: none; font-size: 0.9rem; white-space: nowrap; }

.storefront-category-grid .storefront-card-image { height: 9rem; }
.storefront-card-cta { display: inline-block; margin-top: 0.5rem; color: var(--brand-primary, #FF6500); font-weight: 600; font-size: 0.85rem; }

.storefront-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.storefront-trust-item { background: #fff; border: 1px solid #ddd; border-radius: 0.5rem; padding: 1.1rem 1.25rem; }
.storefront-trust-item h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.storefront-trust-item p { margin: 0; color: #444; font-size: 0.9rem; }

.storefront-support-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.storefront-support-card h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.storefront-support-card p { margin: 0; color: #444; font-size: 0.9rem; }

/* FAQ page (migration 046, 2026-09-26) */
.storefront-faq-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.storefront-faq-item { border: 1px solid #ddd; border-radius: 0.5rem; padding: 0.75rem 1rem; }
.storefront-faq-item summary { cursor: pointer; font-weight: 600; }
.storefront-faq-item summary::-webkit-details-marker { color: #666; }
.storefront-faq-item div { margin-top: 0.5rem; color: #333; }

/* Footer background/border were the previous green scheme's darkest
   shades (#1c2a1d/#33472f); rebranded to a warm dark neutral rather than
   the brand orange itself (a full-bleed #FF6500 background at this scale
   would be overpowering and would fight the orange CTAs/links elsewhere
   on the page), with #FFA400 (the brand's secondary/amber) used for the
   footer's own links so the dark footer still reads as on-brand. */
.storefront-footer { background: #241a12; color: #ede3d8; margin-top: 3rem; padding: 2.5rem 1.5rem 1.5rem; }
.storefront-footer-grid { max-width: 64rem; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2rem; }
/* 2026-09-28: "Fruit trees only should be all caps like the other section
   titles" -- direct management instruction via the user. Adds the same
   text-transform/letter-spacing storefront-footer-heading already uses,
   keeping this rule's own larger/bolder size distinct rather than
   switching this element to that class outright. */
.storefront-footer-brand { color: #fff; font-weight: 700; font-size: 1.05rem; margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.03em; }
.storefront-footer-heading { color: #fff; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.5rem; }
.storefront-footer-col p { margin: 0 0 0.5rem; font-size: 0.9rem; }
.storefront-footer-col a { color: var(--brand-secondary, #FFA400); }
.storefront-footer-hours { white-space: pre-line; }
.storefront-footer-meta { color: #c9b8a8; font-size: 0.8rem; }
/* 2026-09-28: "copyright and certification logos should be centered at
   the bottom" -- direct user instruction. */
.storefront-footer-copyright { max-width: 64rem; margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid #4a3626; color: #c9b8a8; font-size: 0.8rem; text-align: center; }
/* 2026-09-27 UAT defect: FNGLA / Fresh From Florida membership badges --
   see footer.php and WebsiteProfileSchema for the fields this renders.
   White background chip behind each badge since both are typically
   supplied as logos designed for a light background, sitting on this
   footer's dark brown (#241a12). */
.storefront-footer-badges { max-width: 64rem; margin: 1.5rem auto 0; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }
.storefront-footer-badges img { height: 3rem; width: auto; background: #fff; border-radius: 4px; padding: 0.35rem 0.5rem; }

/* Domain 8 (Special Orders / Maxi), 2026-09-25. Also fills in a few
   classes several earlier storefront views already reference in markup
   (estimator form/result, this domain's own form/result) but that never
   got a matching rule -- .editor/.field-grid/.error/a plain .badge span,
   and a .button link style -- rather than leaving them unstyled forever
   or inventing yet another one-off name here. */
.editor label { margin-bottom: 1rem; }
.editor fieldset { border: 1px solid #ddd; border-radius: 0.25rem; padding: 1rem; margin: 1rem 0; }
.editor legend { font-size: 0.9rem; font-weight: 600; padding: 0 0.25rem; }
/* font-family: inherit + explicit font-size: 1rem, not `font: inherit` --
   same small-caption-size bug as the input/select rule above, fixed the
   same way, since a textarea sits inside a <label> too. */
.editor textarea { width: 100%; box-sizing: border-box; padding: 0.5rem; margin-top: 0.25rem; border: 1px solid #ccc; border-radius: 0.25rem; font-family: inherit; font-size: 1rem; }
/* 2026-09-26: the Cloudflare Turnstile widget and the submit button right
   after it (estimator/special-order/care intake forms) had no spacing
   rule at all, so the button sat flush against the widget. */
.cf-turnstile { margin-bottom: 1rem; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 1rem; }
/* 2026-09-26: multi-item estimates -- each plant is its own repeatable
   `.plant-item` block ("Add another plant"). A single plant (the default,
   most common case) needs no visual separation at all; a second/third one
   gets a top border + spacing so each plant row reads as its own item,
   not a run-on continuation of the one above it. `[data-add-plant-item]`
   sits right below the last plant row before the Service dropdown, so it
   needs its own bottom margin the same way the Turnstile/submit-button
   gap above was fixed for an identical "two elements sitting flush"
   reason. */
.plant-item + .plant-item { border-top: 1px solid #ddd; margin-top: 1rem; padding-top: 1rem; }
[data-remove-plant-item] { display: inline-block; margin-top: 0.5rem; }
[data-add-plant-item] { display: inline-block; margin: 0.5rem 0 1rem; }
p.error, .error { background: #fdecea; color: #7a1f14; padding: 0.5rem 0.75rem; border-radius: 0.25rem; }
/* 2026-09-27 -- Maxi delivery/pricing-intent callout (see
   storefront/maxi.php); deliberately NOT .error styling -- this isn't a
   failure state, it's a helpful redirect to the right tool. */
p.storefront-callout { background: #fdf1e6; color: #6b4405; border: 1px solid var(--brand-secondary, #FFA400); padding: 0.75rem 1rem; border-radius: 0.25rem; }
span.badge, a.badge:not([class*="badge-"]) { display: inline-block; padding: 0.2rem 0.6rem; border: 1px solid #ccc; border-radius: 999px; }
.badge-in_stock { background: #e6f2e8; border-color: #2f6f3e; color: #1e4a28; }
.badge-low_stock { background: #fff6e0; border-color: #b8860b; color: #6b4e05; }
.badge-out_of_stock, .badge-unknown { background: #f2f2f0; border-color: #999; color: #444; }
/* 2026-09-27 -- bulk CSV import preview (BulkImportController) needed a
   per-row "Ready" vs. "Error" pill; a generic .badge.danger variant is
   more reusable than a one-off class, matching the badge-<status> naming
   this file already uses for inventory. */
.badge.danger { background: #fdecea; border-color: #c0392b; color: #7a1f14; }
a.button { display: inline-block; margin-top: 0.5rem; padding: 0.6rem 1.25rem; border-radius: 0.25rem; background: var(--brand-primary, #FF6500); color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600; }

/* v1.52.0 -- plant facts, catalog filters, care-guide link.
   Apple/mobile standards carried over: 44px minimum tap targets, 16px form text (iOS Safari
   zooms the page on focus of anything smaller), no JavaScript required for filtering. */
.storefront-filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; margin: 1rem 0 0.5rem; padding: 0.75rem 1rem; border: 1px solid #d9d9d9; border-radius: 0.5rem; background: #fafafa; }
.storefront-filters label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; color: #444; }
.storefront-filters select { min-height: 2.75rem; font-size: 1rem; padding: 0 0.5rem; border: 1px solid #bbb; border-radius: 0.375rem; background: #fff; min-width: 9rem; }
.storefront-filters .storefront-filter-check { flex-direction: row; align-items: center; min-height: 2.75rem; gap: 0.5rem; }
.storefront-filters .storefront-filter-check input { width: 1.25rem; height: 1.25rem; }
.storefront-filters button { min-height: 2.75rem; font-size: 1rem; padding: 0 1.25rem; }
.storefront-filter-clear { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.5rem; }
.storefront-results-heading { margin-top: 1.5rem; }
.storefront-card-meta { color: #555; font-size: 0.875rem; margin: 0.25rem 0; }
.storefront-plant-facts { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid #d9d9d9; border-radius: 0.5rem; background: #fafafa; }
.storefront-plant-facts h2 { margin-top: 0; font-size: 1.125rem; }
.storefront-facts-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem 1.5rem; margin: 0; }
.storefront-facts-list div { min-width: 0; }
.storefront-facts-list dt { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: #666; }
.storefront-facts-list dd { margin: 0.125rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.storefront-care-link { margin: 1.5rem 0; }
.storefront-care-link a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 40rem) { .storefront-filters label, .storefront-filters select { width: 100%; } }

/* v1.53.0 -- grower journeys (homepage "kiosk"), Find Your Tree quiz. 44px targets, 16px text. */
.storefront-journey-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.storefront-journey-card { display: flex; flex-direction: column; gap: 0.5rem; min-height: 9rem; padding: 1.25rem; border: 2px solid var(--brand-primary, #FF6500); border-radius: 0.75rem; background: #fff; color: #1c1c1a; text-decoration: none; }
.storefront-journey-card h3 { margin: 0; font-size: 1.25rem; }
.storefront-journey-card p { margin: 0; flex: 1; font-size: 1rem; color: #444; }
.storefront-journey-card .storefront-card-cta { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; color: var(--brand-primary, #FF6500); }
.storefront-journey-card:hover, .storefront-journey-card:focus-visible { background: #fff7f0; }
.storefront-journey-card--featured { grid-column: 1 / -1; background: var(--brand-primary, #FF6500); border-color: var(--brand-primary, #FF6500); color: #fff; min-height: 11rem; }
.storefront-journey-card--featured h3 { font-size: 1.75rem; }
.storefront-journey-card--featured p, .storefront-journey-card--featured .storefront-card-cta { color: #fff; font-size: 1.125rem; }
.storefront-journey-card--featured:hover, .storefront-journey-card--featured:focus-visible { background: #e65a00; }
.storefront-journey-chips { margin-top: 1.5rem; }
.storefront-journey-chips h3 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.storefront-journey-chips ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.storefront-journey-chips a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid #bbb; border-radius: 999px; background: #fff; color: #1c1c1a; text-decoration: none; }
.storefront-journey-chips a:hover, .storefront-journey-chips a:focus-visible { border-color: var(--brand-primary, #FF6500); }
.quiz-form { max-width: 36rem; }
.quiz-options { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; }
.quiz-option { display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0.5rem 1rem; border: 2px solid #ccc; border-radius: 0.75rem; background: #fff; font-size: 1.0625rem; cursor: pointer; }
.quiz-option input { width: 1.5rem; height: 1.5rem; flex: none; }
.quiz-option:has(input:checked) { border-color: var(--brand-primary, #FF6500); background: #fff7f0; }
.quiz-form button[type="submit"] { min-height: 3rem; font-size: 1.0625rem; padding: 0 2rem; }
.quiz-nav { margin-top: 1.25rem; }
.quiz-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.quiz-answers { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.quiz-answers li { padding: 0.25rem 0.75rem; border: 1px solid #ccc; border-radius: 999px; background: #fafafa; }
.quiz-result { display: flex; flex-direction: column; gap: 0.5rem; }
.quiz-result-link { color: inherit; text-decoration: none; }
.quiz-result-actions { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.quiz-result-actions .cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; }
.quiz-result-actions .care-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
.quiz-request { margin: 2rem 0; padding: 1.25rem; border: 2px solid var(--brand-primary, #FF6500); border-radius: 0.75rem; background: #fff7f0; }
.quiz-request h2 { margin-top: 0; }
.quiz-orchard-form { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.quiz-orchard-form label { display: flex; flex-direction: column; gap: 0.25rem; }
.quiz-orchard-form input { min-height: 2.75rem; font-size: 1rem; }
@media (max-width: 40rem) { .storefront-journey-card--featured { min-height: 9rem; } .quiz-orchard-form label, .quiz-orchard-form input, .quiz-orchard-form button { width: 100%; } }

/* v1.54.0 -- audit log (Domain 10) and system health (Domain 12) admin screens. */
.audit-summary { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.audit-summary .stat { display: flex; flex-direction: column; min-width: 9rem; padding: 0.5rem 0.875rem; border: 1px solid #d9d9d9; border-radius: 0.5rem; background: #fafafa; }
.audit-summary .stat strong { font-size: 1.125rem; }
.audit-summary .stat span { font-size: 0.8125rem; color: #555; }
.audit-filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.audit-filters label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; }
.audit-filters select, .audit-filters input { min-height: 2.5rem; font-size: 1rem; }
.audit-table td { vertical-align: top; }
.audit-table .mono { font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
.audit-changes { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: 0.875rem; overflow-wrap: anywhere; }
.audit-pager { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.health-table td { vertical-align: top; }
.cron-lines { overflow-x: auto; padding: 0.75rem 1rem; border: 1px solid #d9d9d9; border-radius: 0.5rem; background: #fafafa; font-size: 0.8125rem; line-height: 1.5; white-space: pre; }
.notice.danger { background: #fdecea; border-color: #c0392b; color: #7a1f14; }

/* v1.56.5 storefront pagination (12 cards per page) */
.storefront-pager { margin: 1.5rem 0; text-align: center; }
.storefront-pager-count { margin: 0 0 0.5rem; color: #555; font-size: 0.9rem; }
.storefront-pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.storefront-pager li { min-width: 2.75rem; }
.storefront-pager a, .storefront-pager [aria-current="page"] { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.75rem; border: 1px solid #c9c9c9; border-radius: 0.375rem; text-decoration: none; color: inherit; background: #fff; box-sizing: border-box; }
.storefront-pager [aria-current="page"] { background: #2f5d2a; border-color: #2f5d2a; color: #fff; font-weight: 600; }
.storefront-pager a:hover { background: #f1f6ef; }

/* v1.56.6 -- accordions that read as cards, plus a shared page banner */
.storefront-faq-item { background: #fff; border: 1px solid #c9c4b8; border-left: 4px solid var(--brand-primary, #FF6500); box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: box-shadow .15s, border-color .15s; }
.storefront-faq-item:hover { box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.storefront-faq-item[open] { border-color: var(--brand-primary, #FF6500); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.storefront-faq-item summary { padding: .15rem 0; list-style-position: inside; }
.storefront-faq-item summary:focus-visible { outline: 3px solid var(--brand-secondary, #FFA400); outline-offset: 3px; border-radius: .25rem; }
.storefront-faq-item[open] summary { border-bottom: 1px solid #eee; padding-bottom: .6rem; }
.storefront-page-banner { position: relative; border-radius: .5rem; overflow: hidden; margin: 1rem 0 1.5rem; min-height: 11rem; display: flex; align-items: flex-end; background: linear-gradient(120deg, #FF6500 0%, #FFA400 100%); background-size: cover; background-position: center; color: #fff; }
.storefront-page-banner.has-photo { min-height: 16rem; }
.storefront-page-banner-copy { width: 100%; padding: 1.5rem; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.storefront-page-banner h1 { margin: 0 0 .35rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.storefront-page-banner p { margin: 0; max-width: 46rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
@media (max-width: 600px) { .storefront-page-banner { min-height: 9rem; } .storefront-page-banner.has-photo { min-height: 12rem; } }
.storefront-slot-banner { margin: 1rem 0 1.25rem; border-radius: .5rem; overflow: hidden; position: relative; }
.storefront-slot-banner img { width: 100%; max-height: 18rem; object-fit: cover; display: block; }
.storefront-slot-banner figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem 1rem; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.care-picker { margin: .25rem 0 .5rem; }
.care-picker-btns button { font-size: .85rem; padding: .3rem .7rem; }
.care-picker-box { margin-top: .5rem; padding: .6rem; border: 1px solid #c9c4b8; border-radius: .4rem; background: #fff; }
.care-picker-results { display: flex; flex-direction: column; gap: .3rem; margin-top: .4rem; }
.care-pick { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; background: #faf8f3; color: #1c1c1a; border: 1px solid #ddd; font-weight: 400; padding: .4rem .6rem; }
.care-pick span { font-size: .8rem; color: #555; }
.care-pick-img { flex-direction: row; align-items: center; gap: .6rem; }
.care-pick-img img { object-fit: cover; border-radius: .25rem; }

/* v1.56.6 -- admin Site tests */
.st-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.st-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.st-pill { padding: .35rem .75rem; border-radius: 999px; border: 1px solid #ccc; background: #fff; }
.st-badge { display: inline-block; padding: .15rem .55rem; border-radius: .3rem; font-weight: 700; font-size: .85rem; border: 1px solid #ccc; background: #f3f3f3; color: #333; }
.st-pass { background: #e6f4ea; border-color: #2e7d32; color: #1b5e20; }
.st-warn { background: #fff6e0; border-color: #b8860b; color: #6b4e05; }
.st-fail { background: #fdeaea; border-color: #c62828; color: #8e1b1b; }
.st-info { background: #e8f0fe; border-color: #3367d6; color: #1a3d8f; }
.st-idle { background: #f3f3f3; border-color: #bbb; color: #555; }
.st-grouphead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.st-detail { word-break: break-word; max-width: 38rem; }
.st-ms { font-size: .8rem; }

/* Build 101 */
.storefront-slot-banner--fallback{height:120px;border-radius:10px;margin:0 0 1.25rem;background:linear-gradient(135deg,var(--t-navy-deep,#14213D),var(--t-accent,#FF6500))}
.storefront-hero .storefront-kicker,.storefront-kicker.on-hero{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.storefront-card{transition:box-shadow .15s}.storefront-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.14)}
@media print{.storefront-nav,.storefront-nav-toggle,footer,.storefront-slot-banner{display:none!important}}

/* Build 101: homepage collection cards -- 4 x 2 on desktop, 2 across on tablet, stacked on phones */
.storefront-collection-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.storefront-collection-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.storefront-collection-grid{grid-template-columns:1fr}}

/* Build 102: phone-first field tools */
.field-body{margin:0;background:#FAF7F2;font-family:system-ui,-apple-system,sans-serif;color:#1A1A1A}
.field-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1rem;background:#14213D;color:#fff;position:sticky;top:0}
.field-top a,.field-top .field-link{color:#fff;text-decoration:none;background:none;border:0;font-size:1rem;padding:.5rem}
.field-main{max-width:640px;margin:0 auto;padding:1rem 1rem 4rem}
.field-tile{display:block;background:#fff;border:1px solid #cfdccb;border-radius:14px;padding:1.1rem 1rem;margin:.75rem 0;text-decoration:none;color:inherit;min-height:56px}
.field-tile strong{display:block;font-size:1.2rem}.field-tile span{color:#4A463F;font-size:.95rem}
.field-search,.field-form input,.field-form select,.field-stepper input{width:100%;box-sizing:border-box;font-size:1.1rem;padding:.85rem;border:1px solid #8C857A;border-radius:10px;background:#fff}
.field-form label{display:block;margin:.75rem 0;font-weight:600}.field-form input,.field-form select{margin-top:.3rem}
.field-btn{display:inline-block;font-size:1.1rem;padding:.9rem 1.2rem;min-height:48px;border:0;border-radius:10px;background:var(--t-accent,#FF6500);color:var(--t-on-accent,#1A1A1A);font-weight:700;margin:.5rem .25rem .5rem 0;text-decoration:none;cursor:pointer}
.field-btn.secondary{background:#FDF1E6;color:#1A1A1A}.field-btn[disabled]{opacity:.5}
.field-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid #DCD5C9;border-radius:12px;padding:.8rem;margin:.5rem 0;font-size:1rem;font:inherit}
.field-card.out .field-qty{color:#b03a2e;font-weight:700}.field-card.in .field-qty{color:#1e7a3c;font-weight:700}
.field-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:3px solid var(--t-accent,#FF6500);padding:1rem;box-shadow:0 -6px 20px rgba(0,0,0,.2);z-index:10}
.field-stepper{display:flex;gap:.5rem;align-items:center}.field-stepper button{font-size:1.8rem;width:64px;height:64px;border-radius:12px;border:1px solid #8C857A;background:#FAF7F2}
.field-stepper input{text-align:center;font-size:1.6rem}
.field-error{color:#b03a2e;font-weight:600}.field-ok{color:#1e7a3c;font-weight:600}.field-hint{color:#4A463F}
.field-lines{list-style:none;padding:0}.field-lines li{background:#fff;border-left:5px solid var(--t-amber,#FFA400);border-radius:8px;padding:.6rem .8rem;margin:.4rem 0}
.field-lines li.posted{border-color:#1e7a3c}.field-lines li.failed{border-color:#b03a2e}
.field-link{background:none;border:0;color:#b03a2e;text-decoration:underline;font-size:1rem;padding:.75rem 0}
/* Build 104: the global `button` rule sets white text, which made button-based field cards and the +/- buttons unreadable */
.field-card{color:#1A1A1A;font-weight:400;border-radius:12px;padding:.8rem;line-height:1.35}
.field-card strong{font-weight:700}
.field-stepper button{color:#1A1A1A;padding:0}

/* Build 105: field jobs + signed forms */
.field-big{width:100%;font-size:1.25rem;padding:1.1rem;min-height:60px;margin:.75rem 0}
.field-call{display:inline-block;margin:.4rem 0;padding:.6rem .9rem;background:#FDF1E6;border-radius:8px;color:#1A1A1A;text-decoration:none;font-weight:600}
.field-legal{background:#fff;border:1px solid #DCD5C9;border-radius:12px;padding:.25rem 1rem;margin:1rem 0;font-size:1.05rem;line-height:1.5}
.field-legal h2{font-size:1rem;margin:1rem 0 .3rem}
.field-form textarea{width:100%;box-sizing:border-box;font-size:1.05rem;padding:.8rem;border:1px solid #8C857A;border-radius:10px;font-family:inherit}
.field-check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}.field-check input{width:auto;margin-top:.25rem;transform:scale(1.4)}
.field-sig{width:100%;height:190px;background:#fff;border:2px dashed #7d967a;border-radius:12px;touch-action:none;display:block}
.field-stars{display:flex;gap:.25rem;justify-content:center;margin:1rem 0}
.field-stars .star{font-size:3rem;line-height:1;background:none;color:#c9cfc6;padding:.1rem .35rem;border:0}
.field-stars .star.on{color:#f2a900}

/* Header search = Maxi (build 108). Explicit colors: the global button{color:#fff} rule would otherwise bite. */
.storefront-search{max-width:64rem;margin:0 auto;padding:0 1.5rem 0.9rem;display:flex;gap:0.5rem;align-items:center}
.storefront-search-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.storefront-search input{flex:1;min-width:0;padding:0.6rem 0.8rem;border:1px solid #bbb;border-radius:0.3rem;font-size:1rem;color:#1c1c1a;background:#fff}
.storefront-search button{padding:0.6rem 1.1rem;border-radius:0.3rem;border:0;background:var(--t-accent,#FF6500);color:var(--t-on-accent,#1A1A1A);font-weight:700;font-size:1rem;cursor:pointer}
@media print{.storefront-search{display:none!important}}

.field-h1{font-size:1.5rem;margin:.5rem 0}
.field-pin{display:block;margin:.75rem 0;font-weight:600}.field-pin input{width:100%;box-sizing:border-box;font-size:1.3rem;padding:.8rem;margin-top:.3rem;border:1px solid #8C857A;border-radius:10px;color:#1A1A1A;background:#fff}
.field-sheet{max-height:85vh;overflow:auto;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
.field-tick{color:#1e7a3c;font-weight:700}.field-card.counted{background:#f1f8ee;border-color:#9bc58f}
/* Build 120: phone Plant Count (production counter layout) */
.pc-sub{margin:.2rem 0 .6rem}.pc-status{display:none;padding:.7rem .8rem;border-radius:12px;margin:0 0 .6rem;font-size:.95rem}.pc-status.info{display:block;background:#eff6ff;color:#1e40af}.pc-status.success{display:block;background:#ecfdf5;color:#166534}.pc-status.error{display:block;background:#fef2f2;color:#991b1b}
.pc-locrow{display:grid;grid-template-columns:1fr auto;gap:.5rem;margin-bottom:.6rem}.pc-locrow select{min-height:52px;font-size:1.05rem;border:1px solid #8C857A;border-radius:12px;background:#fff;color:#1A1A1A;padding:.5rem}
.pc-refresh{width:52px;height:52px;border:1px solid #8C857A;border-radius:12px;background:#fff;color:#1A1A1A;font-size:1.4rem;padding:0}
.pc-searchwrap{position:sticky;top:0;z-index:20;background:#f6f8f4;padding:.2rem 0 .4rem}.pc-searchwrap .field-search{padding-right:2.8rem}
.pc-clear{position:absolute;right:.5rem;top:.55rem;width:36px;height:36px;border:0;border-radius:50%;background:#e2e8f0;color:#334155;font-size:1.3rem;padding:0}
.pc-progress{display:flex;justify-content:space-between;font-size:.9rem;color:#4A463F;margin:.3rem .1rem .6rem}
.pc-results{display:grid;gap:.55rem}.pc-item{display:flex;gap:.7rem;align-items:flex-start;width:100%;text-align:left;border:1px solid #DCD5C9;border-radius:14px;background:#fff;color:#1A1A1A;padding:.85rem;font:inherit;font-weight:400}
.pc-item.counted{background:#f0fdf4;border-color:#bbf7d0}.pc-copy{flex:1;min-width:0;display:block}.pc-copy span{display:block}.pc-name{font-size:1.05rem;font-weight:800;line-height:1.2;overflow-wrap:anywhere}.pc-variant{color:#4A463F;margin-top:.2rem}.pc-codes{font-size:.78rem;color:#4A463F;margin-top:.3rem}.pc-check{font-size:.8rem;color:#166534;font-weight:800;margin-top:.4rem}
.pc-stock{flex:0 0 auto;min-width:64px;text-align:center;background:#F2F2F0;border-radius:10px;padding:.4rem .5rem;color:#1A1A1A}.pc-stock small{display:block;text-transform:uppercase;font-size:.6rem;letter-spacing:.04em;color:#4A463F;font-weight:800}.pc-stock strong{font-size:1.4rem}.pc-item.counted .pc-stock{background:#dcfce7}
.pc-empty{background:#fff;border:1px dashed #cbd5e1;border-radius:14px;padding:1.8rem 1rem;text-align:center;color:#4A463F}
.pc-bg{position:fixed;inset:0;z-index:100;background:rgba(15,23,42,.5);display:flex;align-items:flex-end;justify-content:center}.pc-bg[hidden]{display:none}
.pc-sheet{width:100%;max-width:680px;background:#fff;color:#1A1A1A;border-radius:20px 20px 0 0;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom,0px));max-height:92vh;overflow:auto}
.pc-sheet h2{margin:0;font-size:1.4rem;line-height:1.15}.pc-var{color:#4A463F;margin-top:.3rem}.pc-code{font-size:.78rem;color:#4A463F;margin-top:.3rem}.pc-old{margin:.8rem 0 .5rem;padding:.6rem .7rem;background:#f8fafc;border-radius:10px}.pc-q{font-size:1.1rem;font-weight:800;margin:.6rem 0 .4rem}
.pc-save{width:100%;min-height:58px;margin-top:.7rem;font-size:1.1rem;background:#059669;color:#fff}.pc-cancel{width:100%;min-height:44px;margin-top:.4rem;border:0;background:transparent;color:#4A463F;font-weight:700}

/* =====================================================================
   BUILD 122 DESIGN LAYER (KC / management review, Oct 2 2026)
   - one type scale site wide (Georgia headings, system sans body)
   - logo orange + amber on white or black, navy as the staff colour and a
     sprinkle on customer pages (footer, hours strip, search button)
   - light / dark / match-device themes (assets/js/theme.js sets
     data-theme on <html>; no choice saved = follow the device)
   - 44px tap targets, visible keyboard focus, hover + focus card shadow
   Text on a brand colour always uses --on-brand (calculated server side in
   ThemeController from the admin Branding colours), so contrast holds.
   ===================================================================== */
:root {
  --font-head: Georgia, "Times New Roman", Times, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);   /* 44px max: page titles */
  --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);      /* section titles */
  --fs-h3: 1.25rem;                                       /* card titles */
  --fs-body: 1.0625rem;                                   /* 17px */
  --fs-small: 0.9375rem;                                  /* 15px captions, meta */
  --fs-label: 0.875rem;                                   /* 14px kickers, badges */
  --t-bg: #FFFFFF; --t-surface: #FFFFFF; --t-surface2: #FAF7F2;
  --t-text: #1A1A1A; --t-muted: #4A463F; --t-border: #DCD5C9; --t-field-border: #8C857A;
  --t-accent: var(--brand-primary, #FF6500); --t-on-accent: var(--on-brand, #1A1A1A);
  --t-amber: var(--brand-secondary, #FFA400); --t-on-amber: var(--on-brand-2, #1A1A1A);
  --t-accent-text: var(--brand-text, #B84900);
  --t-link: var(--brand-text, #B84900);
  --t-navy: #1B2A4A; --t-navy-deep: #14213D; --t-on-navy: #FFFFFF; --t-navy-text: #FFA400;
  --t-footer: #14213D; --t-footer-text: #E9EDF6; --t-footer-muted: #B9C3D9; --t-footer-line: #2C3C63;
  --t-shadow: 0 1px 2px rgba(20,16,12,.08);
  --t-shadow-hover: 0 10px 28px rgba(20,16,12,.22);
  --t-focus: #1B2A4A;
  --t-staff-bg: #F1F4F9;
  --t-danger-bg: #FDECEA; --t-danger-fg: #7A1F14; --t-danger-line: #C0392B;
  --t-ok-bg: #E6F2E8; --t-ok-fg: #1E4A28; --t-ok-line: #2F6F3E;
  --t-warn-bg: #FFF6E0; --t-warn-fg: #6B4E05; --t-warn-line: #B8860B;
  --t-info-bg: #E8F0FE; --t-info-fg: #1A3D8F; --t-info-line: #3367D6;
  --t-neutral-bg: #F2F2F0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --t-bg: #0E0C0A; --t-surface: #1B1713; --t-surface2: #231E18;
    --t-text: #F3EEE7; --t-muted: #BDB2A4; --t-border: #41372D; --t-field-border: #8A8175;
    --t-accent-text: var(--brand-text-dark, #FFA400); --t-link: var(--brand-text-dark, #FFA400);
    --t-navy: #213560; --t-navy-deep: #0A1020;
    --t-footer: #0A1020; --t-footer-line: #22305A;
    --t-shadow: 0 1px 2px rgba(0,0,0,.5);
    --t-shadow-hover: 0 10px 28px rgba(255,164,0,.24);
    --t-focus: #FFA400;
    --t-staff-bg: #0B1220;
    --t-danger-bg: #3A1612; --t-danger-fg: #FFB4A8;
    --t-ok-bg: #12301A; --t-ok-fg: #A6E3B2;
    --t-warn-bg: #3A2D08; --t-warn-fg: #FFD98A;
    --t-info-bg: #14264D; --t-info-fg: #B6CBFF;
    --t-neutral-bg: #2A241D;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --t-bg: #0E0C0A; --t-surface: #1B1713; --t-surface2: #231E18;
  --t-text: #F3EEE7; --t-muted: #BDB2A4; --t-border: #41372D; --t-field-border: #8A8175;
  --t-accent-text: var(--brand-text-dark, #FFA400); --t-link: var(--brand-text-dark, #FFA400);
  --t-navy: #213560; --t-navy-deep: #0A1020;
  --t-footer: #0A1020; --t-footer-line: #22305A;
  --t-shadow: 0 1px 2px rgba(0,0,0,.5);
  --t-shadow-hover: 0 10px 28px rgba(255,164,0,.24);
  --t-focus: #FFA400;
  --t-staff-bg: #0B1220;
  --t-danger-bg: #3A1612; --t-danger-fg: #FFB4A8;
  --t-ok-bg: #12301A; --t-ok-fg: #A6E3B2;
  --t-warn-bg: #3A2D08; --t-warn-fg: #FFD98A;
  --t-info-bg: #14264D; --t-info-fg: #B6CBFF;
  --t-neutral-bg: #2A241D;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---- base ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; background: var(--t-bg); color: var(--t-text); }
body:has(.admin-global-header), body.field-body { background: var(--t-staff-bg); --t-link: #1B3F8F; --t-accent-text: #8A3700; }
:root[data-theme="dark"] body:has(.admin-global-header), :root[data-theme="dark"] body.field-body { --t-link: #9DB7FF; --t-accent-text: #FFA400; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body:has(.admin-global-header), :root:not([data-theme="light"]) body.field-body { --t-link: #9DB7FF; --t-accent-text: #FFA400; } }
h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; }
a { color: var(--t-link); }
:focus-visible { outline: 3px solid var(--t-focus); outline-offset: 2px; }
.shell { background: var(--t-surface); border-color: var(--t-border); color: var(--t-text); }
p.meta, .meta { color: var(--t-muted); }
p.empty { color: var(--t-muted); }

/* ---- customer type scale (Georgia headings, sans body) ---- */
body:has(.storefront-header) :is(h1, h2, h3, h4) { font-family: var(--font-head); font-weight: 700; }
body:has(.storefront-header) h1 { font-size: var(--fs-display); margin-top: 0; }
body:has(.storefront-header) h2 { font-size: var(--fs-h2); }
body:has(.storefront-header) :is(h3, h4) { font-size: var(--fs-h3); }
body:has(.storefront-header) :is(p, li, dd, summary, label, td, th, blockquote) { font-size: var(--fs-body); }
body:has(.storefront-header) :is(.meta, .storefront-card-meta, .storefront-sku, .storefront-breadcrumb, .storefront-pager-count,
  .storefront-eyebrow, .storefront-facts-list dt, .prediction-confidence, .prediction-rationale, .prediction-example,
  .storefront-footer-col p, .storefront-footer-meta, .storefront-footer-copyright, .storefront-hours, .storefront-filters label) { font-size: var(--fs-small); }
body:has(.storefront-header) :is(.storefront-kicker, span.badge, a.badge, .storefront-view-all) { font-size: var(--fs-label); }
body:has(.storefront-header) :is(.storefront-card-cta, .cta, a.button, button, input, select, textarea) { font-size: var(--fs-body); }
.storefront-kicker { color: var(--t-accent-text); letter-spacing: 0.06em; font-weight: 700; }
.storefront-eyebrow { color: var(--t-muted); }
.storefront-breadcrumb, .storefront-card-meta, .storefront-sku, .storefront-pager-count { color: var(--t-muted); }
.storefront-breadcrumb a { color: var(--t-link); }
.storefront-facts-list dt { color: var(--t-muted); }

/* ---- buttons, links, form fields (44px targets) ---- */
button, .cta, a.button, .storefront-category-hero .cta { background: var(--t-accent); color: var(--t-on-accent); }
button.secondary { background: var(--t-surface); color: var(--t-text); border: 1px solid var(--t-field-border); }
button.secondary:hover { background: var(--t-surface2); }
button.link { background: none; color: var(--t-link); }
.cta, a.button, .storefront-category-hero .cta { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 0.5rem; }
body:has(.storefront-header) :is(button, .cta, a.button, input:not([type=checkbox]):not([type=radio]), select) { min-height: 2.75rem; }
.admin-shell :is(button, input:not([type=checkbox]):not([type=radio]), select) { min-height: 2.75rem; }
input, select, textarea { background: var(--t-surface); color: var(--t-text); border-color: var(--t-field-border); }
input::placeholder, textarea::placeholder { color: var(--t-muted); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--t-accent); width: 1.25rem; height: 1.25rem; }
label.checkbox, .storefront-filter-check, .quiz-option { min-height: 2.75rem; }
.storefront-card-cta { color: var(--t-accent-text); font-size: var(--fs-body); font-weight: 700; display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 0.25rem; }
.storefront-view-all { color: var(--t-accent-text); display: inline-flex; align-items: center; min-height: 2.75rem; }
.storefront-card:hover .storefront-card-cta, .storefront-card:focus-visible .storefront-card-cta { text-decoration: underline; }

/* ---- header: business name, navy hours strip, mobile Call button ---- */
.storefront-header { background: var(--t-surface); border-bottom: 1px solid var(--t-border); display: flex; flex-direction: column; }
.storefront-hours { order: -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15rem 1.75rem;
  background: var(--t-navy); color: var(--t-on-navy); padding: 0.55rem 1.5rem; text-decoration: none; line-height: 1.35; }
a.storefront-hours:hover .storefront-hours-go, a.storefront-hours:focus-visible .storefront-hours-go { text-decoration: underline; }
a.storefront-hours:focus-visible { outline-color: var(--t-navy-text); outline-offset: -3px; }
.storefront-hours-status { font-weight: 700; display: inline-flex; align-items: center; gap: 0.5rem; }
.storefront-hours-status::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--t-navy-text); flex: none; }
.storefront-hours-status.is-open::before { background: #5BE37D; }
.storefront-hours-go { display: none; color: var(--t-navy-text); font-weight: 700; white-space: nowrap; }
.storefront-hours-phone { font-weight: 700; }
.storefront-header-row { gap: 0.5rem 1.5rem; width: 100%; box-sizing: border-box; }
.storefront-logo { color: var(--t-text); gap: 0.65rem; min-width: 0; min-height: 2.75rem; }
.storefront-logo-name { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.storefront-logo-img { height: 2.75rem; width: auto; flex: none; }
.storefront-nav { align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0 1.25rem; }
@media (min-width: 721px) { .storefront-nav { display: flex; } }
.storefront-nav a { margin-left: 0; color: var(--t-link); font-size: var(--fs-small); font-weight: 600; display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.storefront-nav a:hover, .storefront-nav a:focus-visible { text-decoration: underline; }
.storefront-call { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; background: var(--t-accent); color: var(--t-on-accent); flex: none; }
.storefront-nav-toggle { width: 2.75rem; height: 2.75rem; background: var(--t-surface); border-color: var(--t-field-border); flex: none; }
.storefront-nav-toggle-bar { background: var(--t-text); }
.storefront-search { width: 100%; box-sizing: border-box; }
.storefront-search input { background: var(--t-surface); color: var(--t-text); border-color: var(--t-field-border); font-size: var(--fs-body); min-height: 2.75rem; }
.storefront-search button { background: var(--t-navy); color: var(--t-on-navy); border: 1px solid transparent; min-height: 2.75rem; border-radius: 0.5rem; font-weight: 700; }
@media (max-width: 720px) {
  .storefront-hours { order: 1; flex-wrap: nowrap; justify-content: space-between; gap: 0.75rem; padding: 0 1rem; min-height: 2.75rem; font-size: var(--fs-label); }
  body:has(.storefront-header) .storefront-hours { font-size: var(--fs-label); }
  .storefront-hours { padding-top: 0.35rem; padding-bottom: 0.35rem; }
  .storefront-hours-status { min-width: 0; }
  .storefront-hours-addr, .storefront-hours-phone { display: none; }
  .storefront-hours-go { display: inline; }
  .storefront-search { order: 2; padding-top: 0.25rem; }
  .storefront-header-row { flex-wrap: wrap; padding: 0.6rem 1rem; gap: 0.5rem; }
  .storefront-logo { flex: 1 1 0; justify-content: flex-start; }
  .storefront-logo-img { height: 2.25rem; }
  .storefront-logo-name { font-size: 1.125rem; }
  .storefront-call { display: inline-flex; }
  .storefront-nav { justify-content: flex-start; gap: 0.25rem; flex-direction: column; align-items: stretch; }
  .storefront-nav a { font-size: var(--fs-body); }
}
.storefront-announcements { background: var(--t-accent); color: var(--t-on-accent); font-size: var(--fs-small); padding: 0.25rem 1rem; }
.storefront-announcement a, .storefront-announcement strong { color: var(--t-on-accent); font-weight: 700; display: inline-flex; align-items: center; min-height: 2.75rem; }
.storefront-announcement a { text-decoration: underline; }

/* ---- cards: soft shadow, bigger shadow on hover and keyboard focus ---- */
.storefront-card, .storefront-trust-item, .storefront-journey-card {
  background: var(--t-surface); color: var(--t-text); border: 1px solid var(--t-border); border-radius: 0.875rem;
  box-shadow: var(--t-shadow); transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
a.storefront-card:hover, a.storefront-card:focus-visible, .storefront-journey-card:hover, .storefront-journey-card:focus-visible {
  box-shadow: var(--t-shadow-hover); transform: translateY(-2px); border-color: var(--t-accent); background: var(--t-surface);
}
@media (prefers-reduced-motion: reduce) { .storefront-card, .storefront-journey-card { transition: none; } a.storefront-card:hover, .storefront-journey-card:hover { transform: none; } }
.storefront-card { padding: 1.1rem; }
.storefront-card h2, .storefront-card h3 { margin: 0.25rem 0 0.4rem; font-size: var(--fs-h3); }
.storefront-card p { margin: 0 0 0.4rem; }
.storefront-card-image { display: block; width: 100%; height: 10rem; object-fit: cover; border-radius: 0.5rem; margin-bottom: 0.75rem; }
.storefront-category-grid .storefront-card-image { height: 10rem; }
.storefront-card-image--empty { background: linear-gradient(135deg, rgba(255,164,0,0.30), rgba(255,101,0,0.22)), var(--t-surface2); }
.storefront-price { font-weight: 700; }
.storefront-trust-item { padding: 1.25rem; }
.storefront-trust-item h3, .storefront-support-card h3 { margin: 0 0 0.5rem; font-size: var(--fs-h3); }
.storefront-trust-item p, .storefront-support-card p, .storefront-journey-card p, .storefront-journey-card--featured p { color: var(--t-muted); font-size: var(--fs-body); margin: 0; }
.storefront-home-section { margin: 3rem 0; }
.storefront-home-section h2 { font-size: var(--fs-h2); margin: 0.15rem 0 0; }
.storefront-journey-card { border-top: 4px solid var(--t-accent); min-height: 8.5rem; }
.storefront-journey-card h3 { font-size: var(--fs-h3); }
.storefront-journey-card .storefront-card-cta { color: var(--t-accent-text); }
.storefront-journey-card--featured { background: var(--t-navy); border-color: var(--t-navy); border-top-color: var(--t-amber); color: var(--t-on-navy); }
.storefront-journey-card--featured h3 { font-size: var(--fs-h2); color: var(--t-on-navy); }
.storefront-journey-card--featured p { color: var(--t-on-navy); font-size: var(--fs-body); }
.storefront-journey-card--featured .storefront-card-cta { color: var(--t-navy-text); font-size: var(--fs-body); }
a.storefront-journey-card--featured:hover, a.storefront-journey-card--featured:focus-visible { background: var(--t-navy); border-color: var(--t-amber); }
.storefront-journey-chips a { background: var(--t-surface); color: var(--t-text); border-color: var(--t-field-border); }
.storefront-faq-item { background: var(--t-surface); border-color: var(--t-border); border-left-color: var(--t-accent); color: var(--t-text); }
.storefront-faq-item div { color: var(--t-text); }
.storefront-faq-item[open] summary { border-bottom-color: var(--t-border); }
.storefront-filters, .storefront-plant-facts, .audit-summary .stat, .cron-lines { background: var(--t-surface2); border-color: var(--t-border); color: var(--t-text); }
.storefront-filters label { color: var(--t-muted); }
.storefront-filters select { background: var(--t-surface); color: var(--t-text); border-color: var(--t-field-border); }
.quiz-option, .quiz-answers li, .care-picker-box, .care-pick, .st-pill, .product-search-results, .product-search-results button { background: var(--t-surface); color: var(--t-text); border-color: var(--t-field-border); }
.quiz-option:has(input:checked), .quiz-request { background: var(--t-surface2); border-color: var(--t-accent); }
.product-search-results button:hover { background: var(--t-surface2); }
.prediction-example { background: var(--t-surface2); }
.storefront-pager a { background: var(--t-surface); color: var(--t-text); border-color: var(--t-field-border); }
.storefront-pager a:hover { background: var(--t-surface2); }
.storefront-pager [aria-current="page"] { background: var(--t-navy); border-color: var(--t-navy); color: var(--t-on-navy); }
.table-wrap th, .table-wrap td, .estimate-breakdown td { border-bottom-color: var(--t-border); }
p.storefront-callout { background: var(--t-warn-bg); color: var(--t-warn-fg); border-color: var(--t-amber); }
a.badge.subtle { background: var(--t-amber); color: var(--t-on-amber); border-color: var(--t-amber); }
span.badge, a.badge:not([class*="badge-"]), a.badge { border-color: var(--t-field-border); }

/* ---- hero: headline above, video with nothing on top, text below ---- */
.storefront-hero { position: static; border-radius: 0; overflow: visible; min-height: 0; margin: 1.5rem 0 3rem; display: grid; gap: 1.25rem; background: none; }
.storefront-hero-head h1 { margin: 0; max-width: 28ch; font-size: var(--fs-display); }
.storefront-hero .storefront-kicker { color: var(--t-accent-text); text-shadow: none; }
.storefront-hero-frame { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 16 / 9; max-height: 34rem; width: 100%; background: #000; }
.storefront-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; }
.storefront-hero-copy { position: static; padding: 0; max-width: 46rem; background: none; color: var(--t-text); }
.storefront-hero-copy p { margin: 0 0 0.5rem; font-size: var(--fs-body); color: var(--t-text); }
.storefront-hero-toggle { position: absolute; right: 0.75rem; bottom: 0.75rem; min-height: 2.75rem; min-width: 5rem; padding: 0 1.1rem; border-radius: 999px;
  background: rgba(0,0,0,0.78); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.7); font-size: var(--fs-label); font-weight: 700; }
.storefront-hero-toggle:hover { background: #000; }
.storefront-hero-toggle:focus-visible { outline-color: #FFFFFF; }
.storefront-page-banner h1, .storefront-category-hero h1 { font-size: var(--fs-display); }

/* ---- footer: navy ---- */
.storefront-footer { background: var(--t-footer); color: var(--t-footer-text); }
.storefront-footer-col a { color: var(--t-navy-text); display: inline-block; padding: 0.35rem 0; }
.storefront-footer-meta, .storefront-footer-copyright { color: var(--t-footer-muted); }
.storefront-footer-copyright { border-top-color: var(--t-footer-line); }
.storefront-footer-brand, .storefront-footer-heading { color: #FFFFFF; font-family: var(--font-head); }
.storefront-footer-heading { font-size: var(--fs-label); }
.storefront-footer-brand { font-size: var(--fs-body); }

/* ---- theme switch ---- */
.theme-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin: 1.5rem auto 0; }
.theme-switch-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 0.25rem; }
.theme-switch button { min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; background: transparent; color: inherit; border: 1px solid currentColor; font-size: var(--fs-small); font-weight: 600; }
.theme-switch button[aria-pressed="true"] { background: var(--t-amber); color: var(--t-on-amber); border-color: var(--t-amber); }
.storefront-footer .theme-switch { color: var(--t-footer-text); }
.admin-theme-row, .field-theme-row { max-width: 72rem; margin: 0 auto; padding: 0.5rem 1.5rem; color: var(--t-text); display: flex; justify-content: flex-end; }
.admin-theme-row .theme-switch, .field-theme-row .theme-switch { margin: 0; }
.field-theme-row { justify-content: center; padding: 1.5rem 0 0; }

/* ---- staff chrome: navy, amber/orange only as an accent ---- */
.admin-global-header { background: var(--t-navy-deep); }
.admin-global-header button { border-color: #5C6E99; background: transparent; color: #EEF2FA; }
.admin-global-header button:hover { background: #22305A; }
.admin-breadcrumbs { color: #B9C3D9; }
.admin-breadcrumbs a { color: #FFFFFF; }
.admin-global-nav { background: var(--t-surface); border-bottom-color: var(--t-border); }
.admin-global-nav a { color: var(--t-text); min-height: 2.75rem; display: inline-flex; align-items: center; }
.admin-global-nav a:hover { background: var(--t-surface2); }
.admin-subnav { background: var(--t-surface2); border-bottom-color: var(--t-border); }
.admin-subnav a { color: var(--t-text); min-height: 2.5rem; display: inline-flex; align-items: center; }
.admin-subnav a:hover { background: var(--t-surface); }
.admin-subnav a.active { background: var(--t-surface); color: var(--t-text); box-shadow: inset 0 -3px 0 var(--t-accent); }
.admin-shell button:not(.secondary):not(.link) { background: var(--t-navy); color: var(--t-on-navy); }
.admin-shell button:not(.secondary):not(.link):hover { background: var(--t-navy-deep); }
.admin-shell a.button { background: var(--t-navy); color: var(--t-on-navy); }
.admin-shell fieldset, .editor fieldset, .symptom-checklist { border-color: var(--t-border); }
.admin-shell table, .admin-shell td, .admin-shell th { border-color: var(--t-border); }
.admin-shell textarea { background: var(--t-surface); color: var(--t-text); border-color: var(--t-field-border); }

/* ---- status colours that work in both themes ---- */
p.notice.danger, p.error, .error, .notice.danger, .badge.danger, .st-fail { background: var(--t-danger-bg); color: var(--t-danger-fg); border-color: var(--t-danger-line); }
p.notice.success, .badge-in_stock, .st-pass { background: var(--t-ok-bg); color: var(--t-ok-fg); border-color: var(--t-ok-line); }
.badge-low_stock, .st-warn { background: var(--t-warn-bg); color: var(--t-warn-fg); border-color: var(--t-warn-line); }
.badge-out_of_stock, .badge-unknown, .st-idle, .st-badge { background: var(--t-neutral-bg); color: var(--t-muted); border-color: var(--t-field-border); }
.st-info { background: var(--t-info-bg); color: var(--t-info-fg); border-color: var(--t-info-line); }

/* ---- field tools: navy with amber/orange accents ---- */
.field-body { font-family: var(--font-body); color: var(--t-text); }
.field-top { background: var(--t-navy-deep); }
.field-top a, .field-top .field-link { color: #FFFFFF; min-height: 2.75rem; display: inline-flex; align-items: center; }
.field-tile, .field-card, .field-sheet, .field-legal, .field-lines li, .pc-item, .pc-sheet, .pc-empty { background: var(--t-surface); color: var(--t-text); border-color: var(--t-border); }
.field-sheet { border-top-color: var(--t-navy); }
.field-tile span, .field-hint, .pc-var, .pc-code, .pc-progress, .pc-sub { color: var(--t-muted); }
.field-btn { background: var(--t-accent); color: var(--t-on-accent); font-weight: 700; }
.field-btn.secondary { background: var(--t-surface2); color: var(--t-text); border: 1px solid var(--t-border); }
.field-search, .field-form input, .field-form select, .field-form textarea, .field-stepper input, .field-pin input, .pc-locrow select, .pc-refresh { background: var(--t-surface); color: var(--t-text); border-color: var(--t-field-border); }
.field-stepper button { background: var(--t-surface2); color: var(--t-text); border-color: var(--t-field-border); }
.field-link { color: var(--t-danger-fg); }
.field-call { background: var(--t-surface2); color: var(--t-text); }
.field-error { color: var(--t-danger-fg); }
.field-ok, .field-tick { color: var(--t-ok-fg); }
.field-card.counted, .pc-item.counted { background: var(--t-ok-bg); border-color: var(--t-ok-line); }
.pc-stock { background: var(--t-surface2); color: var(--t-text); }
.pc-searchwrap { background: var(--t-staff-bg); }
.pc-clear { background: var(--t-surface2); color: var(--t-text); }
.pc-old { background: var(--t-surface2); }
.pc-cancel { color: var(--t-muted); }
.pc-save { background: var(--t-accent); color: var(--t-on-accent); font-weight: 700; }
.pc-status.info { background: var(--t-info-bg); color: var(--t-info-fg); }
.pc-status.success { background: var(--t-ok-bg); color: var(--t-ok-fg); }
.pc-status.error, .pc-status.danger { background: var(--t-danger-bg); color: var(--t-danger-fg); }
.field-sig { background: #FFFFFF; }

/* ---- Build 122: Plant Count photo (optional, one tap) ---- */
.pc-photo { display: flex; gap: 0.75rem; align-items: center; margin: 0.9rem 0 0.4rem; padding: 0.7rem; border: 1px dashed var(--t-field-border); border-radius: 12px; }
.pc-photo-img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.pc-photo-copy { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.pc-photo-btn { min-height: 48px; padding: 0 1rem; border-radius: 10px; border: 1px solid var(--t-navy); background: var(--t-surface); color: var(--t-text); font-size: 1rem; font-weight: 700; text-align: left; }
.pc-photo-msg { font-size: var(--fs-small); color: var(--t-muted); }
.pc-photo-msg.ok { color: var(--t-ok-fg); font-weight: 700; }
.pc-photo-msg.bad { color: var(--t-danger-fg); font-weight: 700; }
.pc-nophoto { display: block; font-size: var(--fs-label); color: var(--t-muted); margin-top: 0.15rem; }
.photo-review-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 0.75rem 0; }
.photo-review-pair figure { margin: 0; }
.photo-review-pair img { width: 100%; height: auto; max-height: 22rem; object-fit: contain; border-radius: 0.5rem; background: var(--t-surface2); }
.photo-review-none { display: flex; align-items: center; justify-content: center; min-height: 10rem; border: 1px dashed var(--t-field-border); border-radius: 0.5rem; color: var(--t-muted); }
.photo-review figcaption { font-size: var(--fs-small); color: var(--t-muted); margin-top: 0.25rem; }

/* ---- Build 122: product page size photos + Florida zone map ---- */
.storefront-size-photos, .storefront-zone-map { margin: 2rem 0; }
.storefront-size-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.storefront-size-tabs button { border-radius: 999px; padding: 0 1.1rem; font-weight: 700; }
.storefront-size-tabs button[aria-pressed="true"] { background: var(--t-navy); color: var(--t-on-navy); border-color: var(--t-navy); }
.storefront-size-photo { margin: 0; max-width: 38rem; }
.storefront-size-photo img { display: block; width: 100%; height: auto; border-radius: 0.875rem; background: var(--t-surface2); }
.storefront-size-photo figcaption, .storefront-zone-map figcaption { font-size: var(--fs-small); color: var(--t-muted); margin-top: 0.5rem; }
.storefront-zone-map figure { margin: 0; max-width: 38rem; }
.storefront-zone-map img { display: block; width: 100%; height: auto; border-radius: 0.875rem; background: #FFFFFF; border: 1px solid var(--t-border); }
.storefront-zone-key { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.75rem 0 0; padding: 0; }
.storefront-zone-key li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; border: 2px solid transparent; border-radius: 0.5rem; font-size: var(--fs-small); color: var(--t-muted); }
.storefront-zone-key li.is-on { border-color: var(--t-text); color: var(--t-text); font-weight: 700; }
.storefront-zone-swatch { width: 1.1rem; height: 1.1rem; border-radius: 0.25rem; border: 1px solid rgba(0,0,0,0.35); }

/* ---- Build 122: New arrivals strip ---- */
.storefront-arrivals-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.storefront-arrivals-track li[hidden] { display: none; }
.storefront-arrivals-track .storefront-card { height: 100%; box-sizing: border-box; }
.storefront-arrivals-track .storefront-card-image { height: 9rem; }
.storefront-arrivals-nav { display: flex; align-items: center; gap: 0.5rem; }
.storefront-arrivals-nav[hidden] { display: none; }
.storefront-arrivals-nav button { border-radius: 999px; padding: 0 1rem; font-weight: 700; }
.storefront-arrivals-nav button:disabled { opacity: 0.45; cursor: default; }
.storefront-arrivals-page { font-size: var(--fs-small); color: var(--t-muted); min-width: 5.5rem; text-align: center; }
@media (max-width: 720px) { .storefront-arrivals-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .storefront-arrivals-track .storefront-card { padding: 0.75rem; } .storefront-arrivals-track .storefront-card-image { height: 7rem; } }

/* BUILD 122: Maxi card grid */
.maxi-card { display: flex; flex-direction: column; gap: 0.25rem; }
.maxi-card h2 { margin: 0.25rem 0 0; font-size: var(--fs-h3, 20px); }
.maxi-card h2 a { color: inherit; text-decoration: none; }
.maxi-card h2 a:hover, .maxi-card h2 a:focus-visible { text-decoration: underline; }
.maxi-card p { margin: 0; }
.maxi-card-media { display: block; }
.maxi-line { font-size: var(--fs-small, 15px); }
.maxi-request a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* BUILD 126: hero text spans the same width as the video; paragraph in two columns on wide screens to keep lines readable */
.storefront-hero-head h1 { max-width: none; }
.storefront-hero-copy { max-width: none; }
/* Build 137: the hero paragraph stays ONE column, as wide as the video (the two-column split is removed). */
.storefront-hero-copy > p { column-count: 1; max-width: none; }
.storefront-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.storefront-hero-actions .cta { margin: 0; }
.storefront-hero-cta-secondary { background: transparent; color: var(--t-text); border: 2px solid currentColor; }

/* BUILD 128: social links sit under About Us */
.storefront-footer-follow a { white-space: nowrap; }

/* BUILD 131: size photo is a small thumbnail; tap to enlarge in a dialog */
.storefront-size-photo { max-width: 20rem; display: block; }
.storefront-size-photo-link { display: block; flex: 0 0 auto; width: 11rem; max-width: 100%; border-radius: 0.875rem; outline-offset: 3px; cursor: zoom-in; }
.storefront-size-photo img { width: 100%; height: auto; }
.storefront-size-photo figcaption { margin: 0.5rem 0 0; line-height: 1.35; }
.storefront-size-photo figcaption strong { display: block; }
.storefront-size-photo-hint { color: var(--t-muted); }
/* Build 134: display:flex above beat the hidden attribute, so every size photo showed at once; only the chosen size shows */
.storefront-size-photo[hidden] { display: none; }
.storefront-photo-dialog { padding: 0.75rem; border: 0; border-radius: 1rem; max-width: min(96vw, 60rem); max-height: 96vh; background: var(--t-surface, #fff); color: var(--t-text); }
.storefront-photo-dialog::backdrop { background: rgba(0, 0, 0, 0.75); }
.storefront-photo-dialog img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: 0.5rem; }
.storefront-photo-dialog p { margin: 0.5rem 0 0; text-align: center; font-size: var(--fs-small); }
.storefront-photo-close { position: sticky; top: 0; display: block; margin: 0 0 0.5rem auto; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; font-weight: 700; }

/* Build 132: Page Banners on the phone */
.fb-img{display:block;width:100%;aspect-ratio:16/5;object-fit:cover;border-radius:10px;margin:.4rem 0 1rem;background:var(--t-surface2,#FDF1E6)}
.fb select,.fb input[type=text]{width:100%}
.fb-img-card{aspect-ratio:3/2;max-width:22rem}
.fb optgroup{font-weight:700}

/* Build 135: yard-help line, delivery section, collections link, quiz intro */
.storefront-yard-help, .storefront-collections-link, .storefront-quiz-intro { margin: 1rem 0; }
.storefront-delivery { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--t-border, #ddd); border-radius: 0.5rem; }
.storefront-delivery h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.storefront-delivery p { margin: 0; }

/* Build 141: language button, "also called" line and dictionary note */
.storefront-lang { max-width: 64rem; margin: 0 auto; width: 100%; box-sizing: border-box; padding: 0.25rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.storefront-lang-label { font-size: 0.8rem; opacity: 0.8; }
.storefront-lang-select { font: inherit; font-size: 0.85rem; padding: 0.2rem 0.4rem; border: 1px solid currentColor; border-radius: 0.3rem; background: transparent; color: inherit; max-width: 10rem; }
.storefront-lang-note { font-size: 0.75rem; margin: 0; opacity: 0.8; flex: 1 1 100%; text-align: right; }
.storefront-lang-note[hidden] { display: none; }
.storefront-also-called { font-size: 0.95rem; margin: 0.25rem 0 0.75rem; }
.storefront-dict-note { margin: 0 0 0.75rem; padding: 0.6rem 0.9rem; border-left: 4px solid #B84900; background: rgba(255,101,0,0.08); border-radius: 0.2rem; }
#google_translate_element .goog-te-gadget { font-size: 0.9rem; }

/* Build 148: admin menu = one row of areas, then the links of the current area. */
.admin-areas { gap: 0.25rem; padding-block: 0.35rem; }
.admin-areas a { min-height: 2.5rem; padding: 0.4rem 0.9rem; font-size: 0.95rem; }
.admin-areas a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--t-accent, #FF6500); }
.admin-group-links { padding-block: 0.3rem; }
.admin-section-links { background: transparent; border-bottom: 1px solid var(--t-border, #ddd); font-size: 0.8rem; }
.admin-header-tools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.admin-header-tools form { margin: 0; }
.admin-header-tools .theme-switch { margin: 0; gap: 0.15rem; flex-wrap: nowrap; }
.admin-header-tools .theme-switch-label { display: none; }
.admin-header-tools .theme-switch button { min-height: 2rem; padding: 0 0.6rem; font-size: 0.75rem; color: #EEF2FA; border-color: #5C6E99; border-radius: 0.25rem; }
.admin-header-tools .theme-switch button[aria-pressed="true"] { background: #22305A; border-color: #EEF2FA; color: #fff; }

/* Build 149: public readability */
/* Language drop-down: first thing under today's hours, 16px text, 44px tall. */
.storefront-lang { order: -1; max-width: none; padding: 0.4rem 1.5rem; justify-content: center; gap: 0.5rem 0.75rem; background: var(--t-navy); color: var(--t-on-navy); }
.storefront-lang-label { font-size: 1rem; font-weight: 700; opacity: 1; }
.storefront-lang-select { font-size: 1rem; min-height: 2.75rem; width: auto; max-width: 14rem; margin-top: 0; padding: 0.4rem 0.75rem; background: var(--t-surface); color: var(--t-text); border: 2px solid var(--t-navy-text); border-radius: 0.5rem; }
.storefront-lang-note { font-size: 1rem; opacity: 1; text-align: center; }
/* Small buttons, form labels and checkbox labels are never below 16px; buttons are at least 44px tall. */
body:has(.storefront-header) :is(button.secondary, button.link, .storefront-size-tabs button, [data-product-clear], [data-remove-plant-item], [data-add-plant-item]) { font-size: 1rem; min-height: 2.75rem; }
body:has(.storefront-header) :is(label, label > span, label.checkbox, label.check, .symptom-checklist label, .storefront-filters label, .storefront-filter-check, .quiz-option) { font-size: 1rem; }
/* Contrast: the theme layer above already puts dark text (--t-on-accent, about 5.9:1) on the orange fill and the darker --t-link / --t-accent-text (about 5.3:1) on orange link text; white-on-orange is no longer used on the storefront. */
.storefront-call-line { font-size: 1.0625rem; font-weight: 600; margin: 1rem 0; }

/* Build 149: admin */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; margin: 0.8rem 0; }
.cards article { background: var(--t-surface, #fff); border: 1px solid var(--t-border, #d5d5d0); border-radius: 10px; padding: 0; }
.cards article a { display: block; padding: 0.7rem 0.8rem; min-height: 2.75rem; color: var(--t-text, #1c1c1a); text-decoration: none; border-radius: 10px; }
.cards article a:hover, .cards article a:focus-visible { box-shadow: 0 0 0 2px var(--t-accent, #FF6500); }
.cards article strong { display: block; font-size: 0.9rem; font-weight: 600; }
.cards article span { display: block; font-size: 1.6rem; font-weight: 700; }
.start-here { margin: 0.5rem 0 1rem; padding: 0.6rem 0.8rem; border-left: 4px solid var(--t-accent, #FF6500); background: var(--t-surface, #f7f7f4); color: var(--t-text, #1c1c1a); line-height: 1.9; }
.start-here a { display: inline-block; min-height: 2.25rem; }
.attention h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.attention .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--t-border, #bbb); border-radius: 999px; background: var(--t-surface, #fff); color: var(--t-text, #1c1c1a); text-decoration: none; }
.chip strong { font-size: 1.15rem; }
.chip-hot { border-color: var(--t-accent, #FF6500); box-shadow: inset 0 0 0 1px var(--t-accent, #FF6500); }
.square-warn { margin: 0.5rem 0; padding: 0.5rem 0.7rem; border-left: 4px solid var(--t-accent, #FF6500); background: var(--t-surface, #fff7e0); color: var(--t-text, #1c1c1a); font-size: 0.95rem; }
.inv-tiles a { min-height: 2.75rem; }
.field-signout { text-align: center; margin: 2rem 0 1rem; }
.request-search { margin: 0 0 1rem; }

/* Build 150: plain link lists (Products We Recommend, Maxi examples) */
.storefront-link-list{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.5rem}
.storefront-link-list a{display:inline-block;min-height:44px;padding:.6rem 0;font-size:1.05rem}

/* =====================================================================
   Build 150: visual refresh
   One override-by-cascade block (nothing above was rewritten).
   Order of this block: 1 tokens (light, then dark), 2 base type and forms, 3 buttons, 4 cards,
   5 header / nav / footer, 6 catalog, 7 product page, 8 content pages and guides, 9 result pages.
   Brand identity is unchanged: logo orange (#FF6500) and amber (#FFA400) stay the action colours
   (the admin Branding colours still win through --brand-primary); navy stays the header strip and
   footer; a deep leaf green is added only for "in stock" and success. Neutrals lean warm-green.
   ===================================================================== */
:root {
  --font-head: Georgia, "Times New Roman", Times, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* type scale */
  --fs-display: clamp(1.9rem, 1.5rem + 1.7vw, 2.6rem);
  --fs-h2: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.875rem;
  --lh-body: 1.55;
  --lh-head: 1.2;
  /* spacing scale (4px base) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;
  /* one radius, one soft shadow, one content width, one reading width */
  --radius: 12px;
  --shadow-soft: 0 1px 2px rgba(31, 36, 32, 0.06), 0 8px 24px rgba(31, 36, 32, 0.07);
  --shadow-lift: 0 2px 4px rgba(31, 36, 32, 0.08), 0 14px 32px rgba(31, 36, 32, 0.12);
  --content-w: 70rem;
  --read-w: none; /* Build 173: text runs the full page width (it was 68ch), so every page lines up with its banner stripe */
  /* palette: warm-green neutrals, brand orange, leaf green for stock */
  --t-bg: #FBFAF6; --t-surface: #FFFFFF; --t-surface2: #F4F3EC;
  --t-text: #1F2420; --t-muted: #4B534A; --t-border: #DCDACD; --t-field-border: #7B8274;
  --t-leaf: #2E6B3A; --t-leaf-bg: #E4F0E3;
  --t-tint: #FFF3E3;
  --t-shadow: var(--shadow-soft);
  --t-shadow-hover: var(--shadow-lift);
  --t-ok-bg: #E4F0E3; --t-ok-fg: #1B4A26; --t-ok-line: #2E6B3A;
  --t-neutral-bg: #EEEDE5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-bg: #0F1210; --t-surface: #181D19; --t-surface2: #202622;
    --t-text: #F3EEE7; --t-muted: #BDB2A4; --t-border: #41372D; --t-field-border: #8A8175;
    --t-leaf: #7FD08F; --t-leaf-bg: #14301B;
    --t-tint: #2B2216;
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.5), 0 14px 32px rgba(0, 0, 0, 0.55);
    --t-shadow: var(--shadow-soft);
    --t-shadow-hover: var(--shadow-lift);
    --t-ok-bg: #14301B; --t-ok-fg: #A6E3B2; --t-ok-line: #3F8A4F;
    --t-neutral-bg: #262C27;
  }
}
:root[data-theme="dark"] {
  --t-bg: #0F1210; --t-surface: #181D19; --t-surface2: #202622;
  --t-text: #F3EEE7; --t-muted: #BDB2A4; --t-border: #41372D; --t-field-border: #8A8175;
  --t-leaf: #7FD08F; --t-leaf-bg: #14301B;
  --t-tint: #2B2216;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.5), 0 14px 32px rgba(0, 0, 0, 0.55);
  --t-shadow: var(--shadow-soft);
  --t-shadow-hover: var(--shadow-lift);
  --t-ok-bg: #14301B; --t-ok-fg: #A6E3B2; --t-ok-line: #3F8A4F;
  --t-neutral-bg: #262C27;
}

/* ---- 2. base type, layout and forms ---- */
body { font-size: var(--fs-body); line-height: var(--lh-body); }
h1, h2, h3, h4 { line-height: var(--lh-head); }
.storefront-shell { max-width: var(--content-w); margin: var(--sp-5) auto 0; padding: 0 var(--sp-4) var(--sp-8); box-sizing: border-box; }
@media (min-width: 721px) { .storefront-shell { padding-left: var(--sp-5); padding-right: var(--sp-5); } }
/* Build 178: on desktop the page content, header and search run as wide as the footer (the gutter now sits outside the content width, not inside it) */
@media (min-width: 721px) { .storefront-shell { max-width: calc(var(--content-w) + 2 * var(--sp-5)); } }
.storefront-shell h1 { margin: var(--sp-2) 0 var(--sp-3); }
.storefront-shell h2 { margin: var(--sp-6) 0 var(--sp-3); }
.storefront-shell > p, .storefront-body p, .storefront-rich-content p, .storefront-rich-content li, .storefront-care-section li { max-width: var(--read-w); }
.storefront-shell > p { margin: 0 0 var(--sp-3); }
.storefront-eyebrow { font-style: normal; margin: 0 0 var(--sp-3); color: var(--t-muted); }
.storefront-pdp-buy h1 + .storefront-eyebrow { font-style: italic; margin-top: 0; }
.storefront-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); margin: 0; color: var(--t-muted); }
.storefront-breadcrumb a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--t-muted); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.storefront-breadcrumb a:hover, .storefront-breadcrumb a:focus-visible { color: var(--t-text); }
.storefront-breadcrumb [aria-current="page"] { color: var(--t-text); }
a { text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--t-focus); outline-offset: 3px; border-radius: 4px; }
/* forms: label above the field, 44px+ fields, calm error styling */
label { display: block; margin-bottom: var(--sp-4); font-weight: 600; color: var(--t-text); }
label > input, label > select, label > textarea { font-weight: 400; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
  width: 100%; box-sizing: border-box; min-height: 2.75rem; padding: 0.65rem 0.85rem; margin-top: var(--sp-1);
  border: 1.5px solid var(--t-field-border); border-radius: var(--radius); background: var(--t-surface); color: var(--t-text);
  font-family: inherit; font-size: 1rem; line-height: 1.35;
}
textarea { min-height: 7rem; resize: vertical; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { outline: 3px solid var(--t-focus); outline-offset: 1px; border-color: var(--t-text); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], input:user-invalid { border-color: var(--t-danger-line); box-shadow: 0 0 0 1px var(--t-danger-line); }
fieldset { border: 1px solid var(--t-border); border-radius: var(--radius); }
legend { font-weight: 700; padding: 0 var(--sp-2); }
.editor fieldset { padding: var(--sp-4) var(--sp-5) var(--sp-3); margin: var(--sp-4) 0; background: var(--t-surface); }
p.error, .error, p.notice.danger { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--t-danger-line); border-left-width: 5px; border-radius: var(--radius); font-weight: 600; max-width: var(--read-w); }
p.notice.success { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--t-ok-line); border-left-width: 5px; border-radius: var(--radius); }

/* ---- 3. buttons: one primary, one secondary ---- */
button, .cta, a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); box-sizing: border-box;
  min-height: 2.75rem; padding: 0.7rem 1.5rem; border: 2px solid transparent; border-radius: var(--radius);
  font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
  background: var(--t-accent); color: var(--t-on-accent); cursor: pointer; transition: filter 0.15s ease, box-shadow 0.15s ease;
}
button:hover, .cta:hover, a.button:hover { filter: brightness(0.93); }
button:active, .cta:active, a.button:active { filter: brightness(0.88); }
button.secondary, a.button.secondary {
  background: transparent; color: var(--t-text); border-color: var(--t-field-border);
}
button.secondary:hover, a.button.secondary:hover { background: var(--t-surface2); filter: none; border-color: var(--t-text); }
button.link { background: none; border-color: transparent; padding-inline: 0.25rem; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
a.button { margin-top: var(--sp-2); }
.storefront-search button { background: var(--t-navy); color: var(--t-on-navy); }
.storefront-nav-toggle { padding: 0.5rem; }

/* ---- 4. one card ---- */
.storefront-card, .storefront-trust-item, .storefront-journey-card, .storefront-delivery, .storefront-faq-item, .storefront-callout-card {
  background: var(--t-surface); color: var(--t-text); border: 1px solid var(--t-border); border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.storefront-card { padding: var(--sp-5); }
.storefront-card h2, .storefront-card h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); line-height: 1.25; }
a.storefront-card { display: block; text-decoration: none; }
a.storefront-card:hover, a.storefront-card:focus-visible { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--t-field-border); }
.storefront-card:has(> .storefront-card-image:first-child) { padding: 0; overflow: hidden; }
.storefront-card:has(> .storefront-card-image:first-child) > :not(.storefront-card-image) { margin-left: var(--sp-4); margin-right: var(--sp-4); }
.storefront-card:has(> .storefront-card-image:first-child) > .storefront-card-image + * { margin-top: var(--sp-4); }
.storefront-card:has(> .storefront-card-image:first-child) > :last-child { margin-bottom: var(--sp-4); }
/* photos: one ratio, soft edge, a calm placeholder when there is no photo */
.storefront-card .storefront-card-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; border-radius: 0; background: var(--t-surface2); }
.storefront-card-image--empty { background: linear-gradient(160deg, var(--t-surface2) 0%, var(--t-tint) 100%); }
.storefront-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 600px) { .storefront-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .storefront-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.storefront-card-meta { margin: 0 0 var(--sp-2); color: var(--t-muted); font-size: var(--fs-small); line-height: 1.4; }
.storefront-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: auto; }
.storefront-card-foot .storefront-price { font-size: 1.0625rem; }
.storefront-card:has(.storefront-card-foot) { display: flex; flex-direction: column; }
.storefront-card h2 { text-wrap: balance; }
.storefront-price { font-weight: 700; }
span.badge, a.badge:not([class*="badge-"]), .badge { display: inline-flex; align-items: center; margin: 0; padding: 0.15rem 0.7rem; border: 1px solid var(--t-field-border); border-radius: 999px; font-size: var(--fs-label); font-weight: 600; line-height: 1.4; }
.badge-in_stock { background: var(--t-leaf-bg); color: var(--t-ok-fg); border-color: var(--t-ok-line); }
.badge-out_of_stock { background: var(--t-neutral-bg); color: var(--t-muted); }

/* ---- 5. header, nav, footer, banners ---- */
.storefront-header-row { max-width: var(--content-w); padding: var(--sp-3) var(--sp-5); margin: 0 auto; }
.storefront-header { border-bottom: 1px solid var(--t-border); }
.storefront-hours { padding: 0.35rem var(--sp-5); font-size: var(--fs-small); }
.storefront-lang { padding: 0.15rem var(--sp-4) 0.4rem; margin: 0; width: 100%; max-width: none; box-sizing: border-box; }
.storefront-lang-label { font-size: var(--fs-small); font-weight: 600; color: inherit; margin: 0; }
.storefront-lang-select { font-size: 1rem; border-width: 1px; border-color: transparent; }
.storefront-logo-name { font-size: 1.3rem; letter-spacing: -0.01em; }
.storefront-nav { gap: 0 var(--sp-5); }
.storefront-nav a { color: var(--t-text); font-size: 1rem; font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; box-sizing: border-box; padding-top: 3px; }
.storefront-nav a:hover, .storefront-nav a:focus-visible { text-decoration: none; border-bottom-color: var(--t-field-border); }
.storefront-nav a[aria-current="page"] { border-bottom-color: var(--t-accent); }
@media (max-width: 720px) {
  .storefront-nav a { border-bottom: 0; border-left: 4px solid transparent; padding: 0 var(--sp-3); }
  .storefront-nav a[aria-current="page"] { border-left-color: var(--t-accent); background: var(--t-surface2); }
  .storefront-header-row { padding: var(--sp-2) var(--sp-4); }
}
.storefront-search { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--sp-5) var(--sp-3); }
@media (max-width: 720px) { .storefront-search { padding: 0 var(--sp-4) var(--sp-3); } }
@media (min-width: 721px) { .storefront-header-row, .storefront-search { max-width: calc(var(--content-w) + 2 * var(--sp-5)); } } /* Build 178: header lines up with the wider page */
.storefront-search input { border-radius: var(--radius); }
/* announcement bar: quiet tint, not a solid orange band */
.storefront-announcements { background: var(--t-tint); color: var(--t-text); border-bottom: 1px solid var(--t-border); font-size: var(--fs-small); padding: 0 var(--sp-4); }
.storefront-announcement a, .storefront-announcement strong { color: var(--t-text); font-weight: 600; text-decoration-color: var(--t-accent); text-decoration-thickness: 2px; }
.storefront-slot-banner, .storefront-page-banner { border-radius: var(--radius); margin: var(--sp-2) 0 var(--sp-4); }
.storefront-slot-banner--fallback { height: 0.5rem; min-height: 0; background: linear-gradient(90deg, var(--t-accent), var(--t-amber)); border-radius: 999px; margin: var(--sp-2) 0 var(--sp-3); opacity: 0.9; }
.storefront-slot-banner img { max-height: 20rem; }
/* footer: 4 columns on desktop, stacked on phone, quiet legal rows */
.storefront-footer { margin-top: var(--sp-7); padding: var(--sp-7) var(--sp-4) var(--sp-5); }
.storefront-footer-grid { max-width: var(--content-w); grid-template-columns: 1fr; gap: var(--sp-5); padding: 0 var(--sp-1); }
@media (min-width: 640px) { .storefront-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .storefront-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); } }
/* the long Help list runs in two columns, so the desktop footer reads as four columns */
.storefront-footer-hours { white-space: normal; }
.storefront-footer-col p { margin: 0 0 var(--sp-2); font-size: var(--fs-small); line-height: 1.5; }
.storefront-footer-col .storefront-footer-brand { font-size: 1.125rem; text-transform: none; letter-spacing: 0; margin-bottom: var(--sp-3); }
.storefront-footer-heading { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-footer-muted); margin-bottom: var(--sp-3); }
.storefront-footer-col a { color: var(--t-footer-text); display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; text-decoration-color: rgba(233, 237, 246, 0.45); text-underline-offset: 0.2em; }
@media (pointer: fine) { .storefront-footer-col a { min-height: 2.25rem; } .storefront-footer-col p { margin-bottom: 0; } .storefront-footer-col .storefront-footer-heading { margin-bottom: var(--sp-3); } }
.storefront-footer-col a:hover, .storefront-footer-col a:focus-visible { color: #FFFFFF; text-decoration-color: var(--t-navy-text); }
.storefront-footer-col a:focus-visible { outline-color: var(--t-navy-text); }
.storefront-footer-meta, .storefront-footer-copyright { font-size: 0.8125rem; line-height: 1.5; }
.storefront-footer-copyright { max-width: var(--content-w); margin-top: var(--sp-5); padding-top: var(--sp-4); text-align: left; }
.storefront-footer .theme-switch { margin-top: var(--sp-5); justify-content: flex-start; max-width: var(--content-w); padding: 0 var(--sp-1); box-sizing: border-box; }
.storefront-footer .theme-switch-label { font-size: 0.8125rem; color: var(--t-footer-muted); }
.storefront-footer .theme-switch button { font-size: var(--fs-label); border-color: var(--t-footer-line); }
.storefront-footer .theme-switch button[aria-pressed="true"] { border-color: var(--t-amber); }
.storefront-footer-badges { max-width: var(--content-w); justify-content: flex-start; }

/* ---- 6. catalog: filters in a tidy, collapsible panel ---- */
.storefront-filter-panel { margin: var(--sp-4) 0 var(--sp-5); border: 1px solid var(--t-border); border-radius: var(--radius); background: var(--t-surface); box-shadow: var(--shadow-soft); }
.storefront-filter-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 2.75rem; padding: var(--sp-2) var(--sp-4); font-weight: 700; font-size: 1rem; cursor: pointer; list-style: none; border-radius: var(--radius); }
.storefront-filter-panel > summary::-webkit-details-marker { display: none; }
.storefront-filter-panel > summary::after { content: ""; width: 0.6rem; height: 0.6rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s ease; flex: none; }
.storefront-filter-panel[open] > summary::after { transform: rotate(-135deg); }
.storefront-filter-panel[open] > summary { border-bottom: 1px solid var(--t-border); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.storefront-filter-count { margin-left: auto; font-size: var(--fs-label); font-weight: 600; color: var(--t-on-accent); background: var(--t-accent); border-radius: 999px; padding: 0.1rem 0.6rem; }
.storefront-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); align-items: end; margin: 0; padding: var(--sp-4); border: 0; border-radius: 0 0 var(--radius) var(--radius); background: transparent; box-shadow: none; }
@media (min-width: 960px) { .storefront-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .storefront-filters { grid-template-columns: 1fr; } }
.storefront-filters label { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; width: 100%; font-size: 1rem; color: var(--t-text); font-weight: 600; }
.storefront-filters label span { font-size: var(--fs-small); color: var(--t-muted); font-weight: 600; }
.storefront-filters select { width: 100%; min-width: 0; min-height: 2.75rem; font-size: 1rem; margin-top: 0; padding: 0 var(--sp-3); border-radius: var(--radius); }
.storefront-filters .storefront-filter-check { flex-direction: row; align-items: center; gap: var(--sp-2); }
.storefront-filters .storefront-filter-check span { color: var(--t-text); font-size: 1rem; }
.storefront-filters button { min-height: 2.75rem; padding: 0 var(--sp-5); font-size: 1rem; }
.storefront-filter-clear { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 481px) { .storefront-filters button { grid-column: auto; } }
.storefront-results-heading { margin: var(--sp-5) 0 0; font-size: var(--fs-h3); }
.storefront-size-picker { margin: var(--sp-4) 0; }
.storefront-size-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.storefront-size-chips a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--sp-4); border: 1.5px solid var(--t-field-border); border-radius: 999px; background: var(--t-surface); color: var(--t-text); text-decoration: none; font-weight: 600; }
.storefront-size-chips a:hover, .storefront-size-chips a:focus-visible { border-color: var(--t-text); background: var(--t-surface2); }
.storefront-category-hero { border-radius: var(--radius); margin: var(--sp-3) 0 var(--sp-5); }
.storefront-category-hero img { aspect-ratio: 21 / 8; max-height: 20rem; }
@media (max-width: 600px) { .storefront-category-hero img { aspect-ratio: 16 / 9; } }
.storefront-pager a, .storefront-pager [aria-current="page"] { border-radius: var(--radius); }
.storefront-pager { margin: var(--sp-6) 0 0; }
.storefront-collections-link { margin-top: var(--sp-5); }

/* ---- 7. product page: photo left, buy area right ---- */
.storefront-pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); margin: var(--sp-2) 0 var(--sp-6); align-items: start; }
@media (min-width: 900px) { .storefront-pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-7); } .storefront-pdp-media { position: sticky; top: var(--sp-4); } }
.storefront-pdp-media .storefront-hero-image { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: none; object-fit: cover; margin: 0; border-radius: var(--radius); background: var(--t-surface2); box-shadow: var(--shadow-soft); }
@media (max-width: 899px) { .storefront-pdp-media { display: contents; } .storefront-pdp-media .storefront-hero-image { aspect-ratio: 16 / 10; max-height: 14rem; } .storefront-pdp-media .storefront-gallery { order: 3; } }
.storefront-pdp-media .storefront-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.storefront-pdp-media .storefront-gallery img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--radius); }
.storefront-pdp-buy h1 { margin: 0 0 var(--sp-1); }
.storefront-pdp-buy > p { margin: 0 0 var(--sp-3); max-width: var(--read-w); }
.storefront-pdp-buy .table-wrap { margin: var(--sp-4) 0; border: 1px solid var(--t-border); border-radius: var(--radius); background: var(--t-surface); overflow: hidden; box-shadow: var(--shadow-soft); }
.storefront-pdp-buy .table-wrap table { display: table; width: 100%; margin: 0; border-collapse: collapse; }
.storefront-pdp-buy .table-wrap th { padding: var(--sp-3) var(--sp-3); background: var(--t-surface2); color: var(--t-muted); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--t-border); }
.storefront-pdp-buy .table-wrap td { padding: var(--sp-3) var(--sp-3); font-size: 1rem; vertical-align: top; }
.storefront-pdp-buy .table-wrap td:nth-child(2) { font-weight: 700; }
.storefront-pdp-buy .table-wrap td:nth-child(-n+2), .storefront-pdp-buy .table-wrap th:nth-child(-n+2) { white-space: nowrap; }
@media (min-width: 480px) { .storefront-pdp-buy .table-wrap th, .storefront-pdp-buy .table-wrap td { padding-left: var(--sp-4); padding-right: var(--sp-4); } }
.storefront-pdp-buy .table-wrap tr:last-child td { border-bottom: 0; }
.storefront-pdp-buy .table-wrap td a { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* the one main action */
.storefront-pdp-buy p:has(> a.button) { margin: var(--sp-4) 0 var(--sp-3); }
.storefront-pdp-buy p > a.button { display: flex; width: 100%; min-height: 3.25rem; margin: 0; font-size: 1.125rem; box-shadow: var(--shadow-soft); }
.storefront-pdp-buy .storefront-callout { margin: var(--sp-4) 0 var(--sp-2); }
.storefront-pdp-buy .storefront-eyebrow, .storefront-pdp-buy .storefront-yard-help { font-size: var(--fs-small); color: var(--t-muted); margin: 0 0 var(--sp-2); }
.storefront-pdp-buy .storefront-eyebrow a, .storefront-pdp-buy .storefront-yard-help a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.storefront-pdp-buy .storefront-yard-help { padding-top: var(--sp-3); border-top: 1px solid var(--t-border); margin-top: var(--sp-3); }
p.storefront-callout { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border-width: 1px; border-left-width: 5px; }
/* facts: a tidy definition grid under the buy area */
.storefront-plant-facts { margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0; border: 0; border-top: 1px solid var(--t-border); border-radius: 0; background: transparent; }
.storefront-plant-facts h2 { margin: 0 0 var(--sp-3); font-size: 1.125rem; }
.storefront-facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--t-border); border-radius: var(--radius); background: var(--t-surface); overflow: hidden; }
.storefront-facts-list > div { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--t-border); }
.storefront-facts-list > div:nth-child(odd) { border-right: 1px solid var(--t-border); }
.storefront-facts-list > div:nth-last-child(-n+2):nth-child(odd), .storefront-facts-list > div:last-child { border-bottom: 0; }
.storefront-facts-list > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
@media (max-width: 420px) { .storefront-facts-list { grid-template-columns: 1fr; } .storefront-facts-list > div { border-right: 0 !important; } .storefront-facts-list > div:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--t-border); } }
.storefront-facts-list dt { font-size: var(--fs-label); letter-spacing: 0.04em; }
.storefront-facts-list dd { font-size: 1.0625rem; }
.storefront-pdp-more { max-width: none; margin: 0 0 var(--sp-5); }
.storefront-pdp-more .storefront-body { margin: 0 0 var(--sp-4); }
.storefront-care-link { margin: var(--sp-4) 0; }
.storefront-care-link a { display: inline-flex; }
.storefront-size-photos, .storefront-zone-map { margin: var(--sp-6) 0; }
.storefront-zone-map { padding-top: var(--sp-5); border-top: 1px solid var(--t-border); }
.storefront-zone-map figure { max-width: 30rem; }
.storefront-zone-map img { border-radius: var(--radius); }
.storefront-size-photo-link, .storefront-size-photo img { border-radius: var(--radius); }
.storefront-delivery { margin: var(--sp-6) 0; padding: var(--sp-5); max-width: none; }
.storefront-delivery h2 { margin: 0 0 var(--sp-2); font-size: 1.25rem; }
.storefront-related { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--t-border); }
.storefront-related h2 { margin-top: 0; }
.storefront-related .storefront-card-grid { margin-top: var(--sp-4); }

/* ---- 8. content pages (Services, Delivery, Installation, About, Policies) and guides ---- */
.storefront-hero-image { border-radius: var(--radius); aspect-ratio: 21 / 8; width: 100%; max-height: 18rem; margin: var(--sp-3) 0 var(--sp-5); box-shadow: var(--shadow-soft); }
/* Build 172: content pages (Services, About, Policies, guides) used to be narrowed to 52rem; every customer page now shares the same page width. Paragraph line length is still capped by --read-w above. */
.storefront-rich-content { font-size: var(--fs-body); }
.storefront-rich-content :is(h2, h3, h4) { margin: var(--sp-6) 0 var(--sp-3); }
.storefront-rich-content > :first-child { margin-top: 0; }
.storefront-rich-content h2 { padding-top: var(--sp-2); }
.storefront-rich-content h3 { font-size: 1.3rem; }
.storefront-rich-content p { margin: 0 0 var(--sp-4); }
.storefront-rich-content :is(ul, ol) { padding-left: 1.4rem; margin: 0 0 var(--sp-4); }
.storefront-rich-content li { margin-bottom: var(--sp-2); }
.storefront-rich-content li::marker { color: var(--t-accent-text); }
.storefront-rich-content a { color: var(--t-link); text-decoration-thickness: 1.5px; }
.storefront-rich-content a:hover { text-decoration-thickness: 3px; }
.storefront-rich-content center { display: block; text-align: left; }
.storefront-rich-content iframe { display: block; width: 100%; border: 0; border-radius: var(--radius); aspect-ratio: 4 / 3; height: auto; margin: var(--sp-4) 0; }
.storefront-rich-content img { border-radius: var(--radius); }
.storefront-rich-content blockquote { margin: var(--sp-4) 0; padding: var(--sp-2) var(--sp-4); border-left: 4px solid var(--t-accent); background: var(--t-surface2); border-radius: 0 var(--radius) var(--radius) 0; }
.storefront-rich-content table { display: block; width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; border: 1px solid var(--t-border); border-radius: var(--radius); background: var(--t-surface); }
.storefront-rich-content th, .storefront-rich-content td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--t-border); vertical-align: top; }
.storefront-rich-content th { background: var(--t-surface2); font-size: var(--fs-small); }
.storefront-rich-content tr:last-child td { border-bottom: 0; }
.storefront-rich-content hr { border: 0; border-top: 1px solid var(--t-border); margin: var(--sp-5) 0; }
/* service sections: an article whose heading is a link becomes a card with one clear link */
.storefront-rich-content:has(> article > h3 > a) { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.storefront-rich-content:has(> article > h3 > a) > * { grid-column: 1 / -1; margin: 0; }
@media (min-width: 700px) { .storefront-rich-content:has(> article > h3 > a) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .storefront-rich-content:has(> article > h3 > a) > article:has(> h3 > a) { grid-column: auto; } }
.storefront-rich-content > article:has(> h3 > a) { position: relative; display: flex; flex-direction: column; padding: var(--sp-5); background: var(--t-surface); border: 1px solid var(--t-border); border-top: 4px solid var(--t-accent); border-radius: var(--radius); box-shadow: var(--shadow-soft); transition: box-shadow 0.18s ease, transform 0.18s ease; }
.storefront-rich-content > article:has(> h3 > a):hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.storefront-rich-content > article:has(> h3 > a) > h3 { margin: 0 0 var(--sp-3); font-size: 1.35rem; }
.storefront-rich-content > article:has(> h3 > a) > h3 a { color: var(--t-text); text-decoration: none; }
.storefront-rich-content > article:has(> h3 > a) > h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.storefront-rich-content > article:has(> h3 > a) > h3 a:focus-visible { outline: none; }
.storefront-rich-content > article:has(> h3 > a):has(a:focus-visible) { outline: 3px solid var(--t-focus); outline-offset: 3px; }
.storefront-rich-content > article:has(> h3 > a) > p { flex: 1 1 auto; margin: 0 0 var(--sp-4); color: var(--t-muted); }
.storefront-rich-content > article:has(> h3 > a)::after { content: "Learn more  \2192"; content: "Learn more  \2192" / ""; display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; color: var(--t-accent-text); }
.storefront-rich-content > article > header { margin-bottom: var(--sp-3); }
.storefront-rich-content > article > header h2 { margin-top: 0; }
.storefront-rich-content > section > p { font-size: 1.125rem; }
/* the estimate form is the main action on Delivery and Installation */
.storefront-jump { margin: 0 0 var(--sp-4); }
.storefront-jump a.button { margin-top: 0; min-height: 3rem; }
.storefront-estimate { scroll-margin-top: var(--sp-4); margin: var(--sp-7) 0 0; padding: var(--sp-5); background: var(--t-surface); border: 1px solid var(--t-border); border-top: 6px solid var(--t-accent); border-radius: var(--radius); box-shadow: var(--shadow-lift); }
@media (min-width: 700px) { .storefront-estimate { padding: var(--sp-6); } }
.storefront-estimate > h2 { margin-top: 0; }
.storefront-estimate .editor fieldset { background: var(--t-surface2); }
.storefront-estimate form button[type="submit"] { min-height: 3.25rem; font-size: 1.125rem; padding-inline: var(--sp-6); }
/* guides: one readable column with an on-this-page list */
.storefront-care-section { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--t-border); scroll-margin-top: var(--sp-4); }
.storefront-care-section h2 { margin: 0 0 var(--sp-3); }
.storefront-toc { margin: var(--sp-4) 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--t-surface2); border: 1px solid var(--t-border); border-radius: var(--radius); }
.storefront-toc-title { margin: 0 0 var(--sp-2); font-weight: 700; }
.storefront-toc ol { margin: 0; padding-left: 1.4rem; columns: 1; }
@media (min-width: 640px) { .storefront-toc ol { columns: 2; column-gap: var(--sp-6); } }
.storefront-toc li { break-inside: avoid; }
.storefront-toc a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--t-link); }
p.storefront-callout.storefront-callout, .storefront-shell > p.storefront-callout { margin-top: var(--sp-6); }

/* ---- 9. result pages and small tidy-ups ---- */
.estimate-breakdown { border: 1px solid var(--t-border); border-radius: var(--radius); background: var(--t-surface); overflow: hidden; }
.estimate-breakdown td { padding: var(--sp-3) var(--sp-4); }
.storefront-call-line { margin: var(--sp-4) 0; }
.storefront-shell h2 + p { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .storefront-rich-content > article:has(> h3 > a), button, .cta, a.button { transition: none; } .storefront-rich-content > article:has(> h3 > a):hover { transform: none; } }

/* Build 150: Maxi diagnosis */
.maxi-q { margin: 1rem 0; }
.maxi-opt { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; margin: 0.4rem 0; padding: 0.5rem 0.75rem; border: 1px solid currentColor; border-radius: 0.5rem; cursor: pointer; }
.maxi-opt input[type="radio"] { width: 1.5rem; height: 1.5rem; flex: none; margin: 0; }
.maxi-cause { margin: 1.25rem 0; padding: 0.75rem 1rem; border: 1px solid currentColor; border-radius: 0.5rem; }
.maxi-cause h4 { margin: 0.75rem 0 0.25rem; }

/* Build 152: homepage fixes found in a screen recording of the live site.
   1. The "Find Your Tree" feature card lost its navy background to the one-card rule above (same specificity, later in the file), so its white text sat on white.
   2. A card with no photo showed a tall flat grey box that looked like a broken image; it is now a short leaf-tinted band. */
.storefront-journey-card.storefront-journey-card--featured { background: var(--t-navy); border-color: var(--t-navy); border-top-color: var(--t-amber); color: var(--t-on-navy); }
.storefront-journey-card.storefront-journey-card--featured h3, .storefront-journey-card.storefront-journey-card--featured p { color: var(--t-on-navy); }
.storefront-journey-card.storefront-journey-card--featured .storefront-card-cta { color: var(--t-navy-text); }
a.storefront-journey-card.storefront-journey-card--featured:hover, a.storefront-journey-card.storefront-journey-card--featured:focus-visible { background: var(--t-navy); border-color: var(--t-amber); }
.storefront-card-image--empty, .storefront-category-grid .storefront-card-image--empty { height: 3.5rem; background: linear-gradient(135deg, var(--t-leaf-bg) 0%, var(--t-tint) 100%); border-bottom: 3px solid var(--t-leaf); }

/* Build 152: homepage cards carry one short line, so the text is a little smaller and the card a little shorter. */
.storefront-journey-card:not(.storefront-journey-card--featured) { min-height: 6.5rem; }
.storefront-journey-card:not(.storefront-journey-card--featured) p { font-size: 0.95rem; }

/* Build 153: product page rows. Banner, then photo, then details, all full width, no columns. */
@media (min-width: 900px) { .storefront-pdp { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .storefront-pdp-media { position: static; } }
@media (min-width: 900px) { .storefront-pdp-media .storefront-hero-image { aspect-ratio: 16 / 9; max-height: 26rem; } }

/* Build 154: the Ask Maxi box in the home hero. Big enough to see and to tap; stacks on a phone. */
.storefront-hero-ask { margin: 1rem 0 0; max-width: 40rem; }
.storefront-hero-ask + .storefront-hero-actions { margin-top: 1rem; }
.storefront-hero-ask-label { display: block; margin: 0 0 0.35rem; font-weight: 700; color: var(--t-text); }
.storefront-hero-ask-row { display: flex; gap: 0.5rem; }
.storefront-hero-ask-row input { flex: 1; min-width: 0; box-sizing: border-box; min-height: 3rem; padding: 0.6rem 0.9rem; font-size: 1rem; background: var(--t-surface); color: var(--t-text); border: 2px solid var(--t-field-border); border-radius: 0.5rem; }
.storefront-hero-ask-row button { min-height: 3rem; padding: 0.6rem 1.25rem; font-size: 1rem; font-weight: 700; background: var(--t-navy); color: var(--t-on-navy); border: 1px solid transparent; border-radius: 0.5rem; cursor: pointer; }
@media (max-width: 520px) { .storefront-hero-ask-row { flex-direction: column; } .storefront-hero-ask-row button { width: 100%; } }
.storefront-stock-asof { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--t-muted, var(--t-text)); }

/* Build 154: iPhone Safari (about two thirds of visitors). Safari draws its own look on search boxes unless told not to, ignoring our border, radius and colors. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/* Result card titles are links: give them a finger-sized target. */
.maxi-card h2 a { display: inline-block; padding: 0.4rem 0; }
/* vh on an iPhone ignores the browser bar, so a tall sheet runs off the bottom; dvh follows the visible screen (older browsers keep the vh line). */
.field-sheet { max-height: 85vh; max-height: 85dvh; }
.pc-sheet { max-height: 92vh; max-height: 92dvh; }

/* Build 154: on a phone, category and collection cards sit two across (one giant card each made eight categories a very long scroll). */
@media (max-width: 599px) {
  .storefront-card-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .storefront-card-grid--tiles .storefront-card h2 { font-size: 1.05rem; line-height: 1.25; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
  .storefront-card-grid--tiles .storefront-card p { font-size: var(--fs-small); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .storefront-card-grid--tiles .storefront-card:has(> .storefront-card-image:first-child) > :not(.storefront-card-image) { margin-left: var(--sp-3); margin-right: var(--sp-3); }
}

/* Build 154: on a phone the size and price table was cut off at the right edge (the Availability heading read "AVAILABILIT"). Tighter cells and a smaller heading make all three columns fit, down to the smallest iPhone. */
@media (max-width: 479px) {
  .storefront-pdp-buy .table-wrap th, .storefront-pdp-buy .table-wrap td { padding-left: 0.6rem; padding-right: 0.6rem; }
  .storefront-pdp-buy .table-wrap th { font-size: 0.75rem; letter-spacing: 0.02em; }
  .storefront-pdp-buy .table-wrap th:nth-child(n+3) { white-space: normal; }
  .storefront-pdp-buy .table-wrap td:nth-child(3) { overflow-wrap: anywhere; }
}
@media (max-width: 359px) { .storefront-pdp-buy .table-wrap td:nth-child(-n+2), .storefront-pdp-buy .table-wrap th:nth-child(-n+2) { white-space: normal; } }

/* Build 156: the home Ask Maxi box as a navy card with Maxi's photo (same navy and amber as the Find Your Tree card). Photo beside the text, stacks above it on a phone. */
.storefront-hero-ask { display: flex; align-items: center; gap: 1.1rem; box-sizing: border-box; max-width: 40rem; padding: 1.1rem 1.25rem; background: var(--t-navy); color: var(--t-on-navy); border: 1px solid var(--t-navy); border-top: 3px solid var(--t-amber); border-radius: 0.75rem; }
.storefront-hero-ask-photo { flex: none; width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--t-amber); background: var(--t-navy-deep); }
.storefront-hero-ask-body { flex: 1; min-width: 0; }
.storefront-hero-ask .storefront-hero-ask-label { color: var(--t-on-navy); font-size: 1.125rem; margin: 0 0 0.6rem; line-height: 1.3; }
.storefront-hero-ask .storefront-hero-ask-row button { background: var(--t-amber); color: var(--t-on-amber); }
.storefront-hero-ask .storefront-hero-ask-row button:hover { filter: brightness(1.08); }
.storefront-hero-ask .storefront-hero-ask-row input:focus-visible, .storefront-hero-ask .storefront-hero-ask-row button:focus-visible { outline: 3px solid var(--t-on-navy); outline-offset: 2px; }
@media (max-width: 520px) { .storefront-hero-ask { flex-direction: column; align-items: center; text-align: center; } .storefront-hero-ask-body { width: 100%; } .storefront-hero-ask-photo { width: 5.5rem; height: 5.5rem; } }

/* Build 157: the Ask Maxi page. One column as wide as the search box; the question box is a navy card with Maxi's photo; examples and plant problems are one-tap tiles. */
.maxi-hub { max-width: 48rem; }
.maxi-ask { display: flex; align-items: center; gap: 1.1rem; box-sizing: border-box; margin: 1.25rem 0 1.5rem; padding: 1.25rem; background: var(--t-navy); color: var(--t-on-navy); border: 1px solid var(--t-navy); border-top: 3px solid var(--t-amber); border-radius: 0.75rem; }
.maxi-ask-photo { flex: none; width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--t-amber); background: var(--t-navy-deep); }
.maxi-ask-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.maxi-ask .maxi-ask-label { display: block; margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--t-on-navy); }
.maxi-ask input[type="text"] { width: 100%; box-sizing: border-box; min-height: 3rem; padding: 0.6rem 0.9rem; font-size: 1rem; background: var(--t-surface); color: var(--t-text); border: 2px solid var(--t-field-border); border-radius: 0.5rem; }
.maxi-ask button { align-self: flex-start; min-height: 3rem; padding: 0.6rem 1.5rem; font-size: 1rem; font-weight: 700; background: var(--t-amber); color: var(--t-on-amber); border: 1px solid transparent; border-radius: 0.5rem; cursor: pointer; }
.maxi-ask button:hover { filter: brightness(1.08); }
.maxi-ask input:focus-visible, .maxi-ask button:focus-visible { outline: 3px solid var(--t-on-navy); outline-offset: 2px; }
.maxi-tiles-h { margin: 0 0 0.75rem; }
.maxi-tiles { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.maxi-tiles li { display: flex; }
.maxi-tile { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; box-sizing: border-box; width: 100%; min-height: 3.5rem; padding: 0.75rem 1rem; background: var(--t-surface); color: var(--t-text); border: 2px solid var(--t-border); border-left: 5px solid var(--t-amber); border-radius: 0.5rem; font-weight: 600; line-height: 1.3; text-decoration: none; }
.maxi-tile::after { content: "\2192"; flex: none; color: var(--t-navy-text, var(--t-amber)); font-weight: 700; }
.maxi-tile:hover, .maxi-tile:focus-visible { background: var(--t-navy); color: var(--t-on-navy); border-color: var(--t-navy); border-left-color: var(--t-amber); }
.maxi-tile:focus-visible { outline: 3px solid var(--t-amber); outline-offset: 2px; }
.maxi-pick h3 { margin: 1.25rem 0 0.6rem; }
@media (max-width: 520px) { .maxi-ask { flex-direction: column; align-items: center; text-align: center; } .maxi-ask-body { width: 100%; } .maxi-ask button { align-self: stretch; } .maxi-tiles { grid-template-columns: 1fr; } }

/* Build 158 (KC, Oct 7): the home Ask Maxi card sits in the middle of the page column instead of against the left edge. */
.storefront-hero-ask { margin: 1.75rem auto 0; }
.storefront-hero-ask + .storefront-hero-actions { margin-top: 1.75rem; }
.storefront-hero-copy + .storefront-journeys, .storefront-hero + .storefront-journeys { margin-top: 2.5rem; }

/* Build 161 (KC, Oct 7): footer titles are white capitals; footer links are orange again (amber, white on hover). */
.storefront-footer-heading, .storefront-footer-col .storefront-footer-brand { color: #FFFFFF; text-transform: uppercase; }
.storefront-footer-col .storefront-footer-brand { font-size: var(--fs-label); letter-spacing: 0.08em; font-weight: 600; }
.storefront-footer-col a { color: var(--t-navy-text); text-decoration-color: var(--t-navy-text); }
.storefront-footer-col a:hover, .storefront-footer-col a:focus-visible { color: #FFFFFF; }
.storefront-footer-badges { justify-content: center; }
.storefront-footer-copyright { text-align: center; }
.storefront-footer .theme-switch { justify-content: center; max-width: none; }

/* Build 162 (KC, Oct 7): the Ask Maxi page lines up under its banner: one centered column, centered headings and text, tiles centered row by row. Care answers stay left-aligned for reading. */
.maxi-hub { max-width: 54rem; margin-left: auto; margin-right: auto; text-align: center; padding-top: 0.5rem; }
.maxi-hub .maxi-ask { text-align: left; }
.maxi-hub .maxi-dx { text-align: left; }
.maxi-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.maxi-tiles li { display: flex; flex: 0 1 calc((100% - 1.5rem) / 3); min-width: 14rem; }
.maxi-tile { text-align: left; }
@media (max-width: 520px) { .maxi-hub .maxi-ask { text-align: center; } .maxi-tiles li { flex-basis: 100%; min-width: 0; } }

/* Build 162: the plant-problem picker is five tap-to-open sections; tiles inside are an even left-aligned grid. */
.maxi-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
.maxi-tiles li { flex: none; min-width: 0; }
@media (max-width: 640px) { .maxi-tiles { grid-template-columns: 1fr; } }
.maxi-groups { display: grid; gap: 0.75rem; text-align: left; margin: 0 0 1.5rem; }
.maxi-group { background: var(--t-surface); border: 2px solid var(--t-border); border-left: 5px solid var(--t-amber); border-radius: 0.5rem; }
.maxi-group summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 0.75rem 1rem; cursor: pointer; list-style: none; }
.maxi-group summary::-webkit-details-marker { display: none; }
.maxi-group summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--t-navy-text, var(--t-amber)); }
.maxi-group[open] summary::after { content: "\2212"; }
.maxi-group-title { font-weight: 700; font-size: 1.1rem; color: var(--t-text); }
.maxi-group-count { font-size: 0.875rem; color: var(--t-muted, var(--t-text)); margin-left: auto; padding-right: 0.5rem; }
.maxi-group summary:focus-visible { outline: 3px solid var(--t-amber); outline-offset: 2px; }
.maxi-group[open] summary { border-bottom: 1px solid var(--t-border); }
.maxi-group .maxi-tiles { margin: 0; padding: 0.75rem; }

/* Build 163: Growers Resources sections, grouped by intent. */
.resource-section { margin: 2rem 0 2.5rem; }
.resource-section > h2 { margin: 0 0 0.35rem; }
.resource-section > p { margin: 0 0 1rem; }
.resource-section .storefront-card-grid { margin-top: 1rem; }
.resource-section .maxi-groups { margin-bottom: 0; }

/* Build 165: Products We Recommend */
.rec-intro { font-size: 1.1rem; margin: 0 0 0.5rem; }
.rec-disclosure { font-size: 0.9rem; color: #555; background: #f6f3ec; border-left: 4px solid var(--brand-primary, #FF6500); border-radius: 0.25rem; padding: 0.6rem 0.9rem; margin: 0 0 1.5rem; }
.rec-section { margin: 2rem 0; }
.rec-section > h2 { margin: 0 0 1rem; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; }
.rec-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #ddd; border-radius: 0.6rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.rec-photo { background: #fff; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #eee; padding: 0.75rem; }
.rec-photo-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.rec-photo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.rec-photo--none { background: linear-gradient(135deg, #f1efe6, #e4ecd9); }
.rec-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; flex: 1; }
.rec-body h3 { margin: 0; font-size: 1.05rem; }
.rec-body p { margin: 0; color: #444; font-size: 0.92rem; }
.rec-buy { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; background: var(--brand-primary, #FF6500); color: #fff; font-weight: 700; text-decoration: none; }
.rec-buy:hover, .rec-buy:focus { filter: brightness(0.92); }
.rec-note { color: #555; font-size: 0.9rem; }

/* Build 169: the intro and the earnings statement run the full width of the page stripe */
.storefront-shell > p.rec-intro, .storefront-shell > p.rec-disclosure { max-width: none; }
.storefront-shell > p.rec-intro { font-size: 1.05rem; line-height: 1.65; }
.storefront-shell > p.rec-disclosure { margin: 2rem 0 0; }

/* Build 177: home page collection cards, three across and three rows (nine) per page on a computer, two across and three rows (six) on a phone or tablet */
@media (min-width: 901px) { .storefront-collection-grid--paged { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.storefront-collection-grid--paged [data-collection-item][hidden] { display: none; }

/* Build 179: Photos to do (field) */
.fpt-total{font-size:1.15rem;margin:.5rem 0}
.fpt-group{border:1px solid var(--t-border,#ccd);border-radius:10px;margin:.6rem 0;background:var(--t-surface,#fff)}
.fpt-group>summary{cursor:pointer;padding:.9rem 1rem;min-height:48px;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-weight:700}
.fpt-count{font-weight:400;color:var(--t-muted,#4A463F);white-space:nowrap}
.fpt-list{list-style:none;margin:0;padding:0 1rem .5rem}
.fpt-row{display:flex;gap:.75rem;align-items:center;justify-content:space-between;padding:.7rem 0;border-top:1px solid var(--t-border,#ccd)}
.fpt-info{display:flex;flex-direction:column;min-width:0;gap:.15rem}
.fpt-where{font-size:.9rem;color:var(--t-muted,#4A463F)}
.fpt-status{font-size:.9rem}
.fpt-btn{flex:none;margin:0}

/* Build 179: Plant Care Guides cards get the same warm top bar as the other cards, so the plain text cards have some color */
.storefront-card--guide { border-top: 4px solid var(--t-accent); border-color: var(--t-border); border-top-color: var(--t-accent); }
.storefront-card--guide .storefront-eyebrow { color: var(--t-accent-text); font-weight: 700; }
a.storefront-card--guide:hover, a.storefront-card--guide:focus-visible { border-color: var(--t-accent); }

/* Build 179: in a care guide each cultivar picture sits on the LEFT of its text (picture, then heading and notes beside it) */
.storefront-rich-content section > div[data-accordion]:has(> a > img) { display: grid; grid-template-columns: minmax(5.5rem, 12.5rem) minmax(0, 1fr); gap: var(--sp-4); align-items: start; margin: var(--sp-4) 0; }
.storefront-rich-content section > div[data-accordion] > a:has(> img) { display: block; }
.storefront-rich-content section > div[data-accordion] > a > img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.storefront-rich-content section > div[data-accordion] > div > h3 { margin-top: 0; }
@media (max-width: 480px) { .storefront-rich-content section > div[data-accordion]:has(> a > img) { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--sp-3); } }

/* Build 186: Field Stock Checker and reorder list. The search bar stays pinned at the top; the header scrolls away so the list gets the room. */
body.field-stock .field-top, body.field-reorder .field-top { position: static; }
.field-stockbar { position: sticky; top: 0; z-index: 40; background: var(--t-staff-bg, #FAF7F2); padding: .5rem 0 .35rem; margin: 0 0 .35rem; }
.field-stockbar .field-hint { margin: .3rem .1rem 0; font-size: .85rem; }
.field-stock .field-main, .field-reorder .field-main { padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px)); }
.stock-card { display: flex; gap: .75rem; align-items: center; justify-content: space-between; background: var(--t-surface, #fff); color: var(--t-text, #1A1A1A); border: 1px solid var(--t-border, #DCD5C9); border-left: 6px solid var(--t-amber,#FFA400); border-radius: 12px; padding: .7rem .8rem; margin: .5rem 0; }
.stock-card.in { border-left-color: #1e7a3c; } .stock-card.low { border-left-color: #c47f00; } .stock-card.out { border-left-color: #b03a2e; }
.stock-main { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.stock-name { font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; }
.stock-size { font-weight: 700; color: var(--t-text, #1A1A1A); }
.stock-meta { font-size: .9rem; color: var(--t-muted, #4A463F); overflow-wrap: anywhere; }
.stock-qty { flex: 0 0 auto; min-width: 4.2rem; text-align: center; background: var(--t-surface2, #F2F2F0); border-radius: 10px; padding: .35rem .5rem; color: var(--t-text, #1A1A1A); }
.stock-qty strong { display: block; font-size: 1.6rem; line-height: 1.1; }
.stock-qty small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--t-muted, #4A463F); font-weight: 700; }
.stock-card.out .stock-qty strong { color: #b03a2e; } .stock-card.low .stock-qty strong { color: #9a6200; } .stock-card.in .stock-qty strong { color: #1e7a3c; }
.field-search { font-size: 1rem; } /* 16px minimum so iPhone Safari does not zoom the page when the box is tapped */
.stock-card.out .stock-qty strong { color: #b03a2e; } .stock-card.low .stock-qty strong { color: #9a6200; } .stock-card.in .stock-qty strong { color: #1e7a3c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stock-card.out .stock-qty strong { color: #ff8a7a; } :root:not([data-theme="light"]) .stock-card.low .stock-qty strong { color: #ffc24d; } :root:not([data-theme="light"]) .stock-card.in .stock-qty strong { color: #7ddc98; } }
:root[data-theme="dark"] .stock-card.out .stock-qty strong { color: #ff8a7a; } :root[data-theme="dark"] .stock-card.low .stock-qty strong { color: #ffc24d; } :root[data-theme="dark"] .stock-card.in .stock-qty strong { color: #7ddc98; }

/* Build 186: admin on a phone. Quick actions, owner dashboard, and every admin table readable as cards under 720px. */
.quick { margin: 0 0 1.25rem; }
.quick .request-search { margin: 0 0 .75rem; } .quick .request-search label { display: block; font-weight: 700; } .quick .request-search input[type="search"] { width: 100%; box-sizing: border-box; font-size: 1rem; min-height: 2.9rem; margin: .25rem 0 .5rem; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }
.quick-btn { display: flex; flex-direction: column; gap: .15rem; min-height: 3.5rem; padding: .8rem .9rem; border: 1px solid var(--t-border, #ddd); border-radius: .6rem; background: var(--t-surface, #fff); color: var(--t-text, #1c1c1a); text-decoration: none; }
.quick-btn strong { font-size: 1.05rem; } .quick-btn span { font-size: .85rem; color: var(--t-muted, #555); }
.owner-total { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; }
.owner-stat span { display: block; font-size: .85rem; color: var(--t-muted, #555); } .owner-stat strong { font-size: 1.7rem; line-height: 1.15; }
.owner-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin: .5rem 0 1.25rem; }
.owner-tile { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; border: 1px solid var(--t-border, #ddd); border-radius: .6rem; background: var(--t-surface, #fff); color: var(--t-text, #1c1c1a); text-decoration: none; }
.owner-tile span { font-weight: 700; } .owner-tile strong { font-size: 1.6rem; } .owner-tile em { font-style: normal; font-size: .85rem; color: var(--t-muted, #555); }
.owner-cat > summary { display: flex; justify-content: space-between; align-items: center; gap: .75rem; cursor: pointer; list-style: none; min-height: 2.75rem; }
.owner-cat > summary::-webkit-details-marker { display: none; }
.owner-cat-name { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; } .owner-cat-nums { text-align: right; display: flex; flex-direction: column; } .owner-cat-nums em { font-style: normal; font-size: .85rem; color: var(--t-muted, #555); }
.reorder-cat { margin: 1.25rem 0 .25rem; font-size: 1.15rem; } .reorder-cat small { color: #4A463F; font-weight: 400; }
@media (max-width: 720px) {
  body:has(.admin-global-header) .admin-shell { padding-left: 1rem; padding-right: 1rem; margin-top: .75rem; }
  .admin-global-header { padding: .6rem 1rem; } .admin-breadcrumbs { display: none; }
  .admin-global-nav, .admin-subnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-left: 1rem; padding-right: 1rem; scrollbar-width: none; }
  .admin-global-nav a, .admin-subnav a { flex: 0 0 auto; white-space: nowrap; min-height: 2.75rem; display: inline-flex; align-items: center; }
  body:has(.admin-global-header) h1 { font-size: 1.5rem; }
  body:has(.admin-global-header) .panel { padding: .9rem; }
  body:has(.admin-global-header) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), body:has(.admin-global-header) select, body:has(.admin-global-header) textarea { font-size: 1rem; min-height: 2.75rem; max-width: 100%; box-sizing: border-box; }
  body:has(.admin-global-header) button, body:has(.admin-global-header) a.button { min-height: 2.75rem; }
  body:has(.admin-global-header) form.inline-form { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
  body:has(.admin-global-header) form.inline-form label { display: block; }
  /* Every table becomes a stack of cards: one card per row, each cell labelled with its column heading (labels are added by theme.js). */
  body:has(.admin-global-header) .table-wrap { overflow-x: visible; }
  body:has(.admin-global-header) .table-wrap table, body:has(.admin-global-header) .table-wrap tbody { display: block; width: 100%; margin-top: .5rem; }
  body:has(.admin-global-header) .table-wrap tr { display: block; border: 1px solid var(--t-border, #ddd); border-radius: .6rem; padding: .35rem .75rem; margin: 0 0 .6rem; background: var(--t-surface, #fff); }
  body:has(.admin-global-header) .table-wrap tr:has(> th) { display: none; }
  body:has(.admin-global-header) .table-wrap td { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--t-border, #eee); text-align: right; overflow-wrap: anywhere; }
  body:has(.admin-global-header) .table-wrap td:last-child { border-bottom: 0; }
  body:has(.admin-global-header) .table-wrap td[data-label]::before { content: attr(data-label); flex: 0 0 38%; max-width: 38%; text-align: left; font-weight: 700; color: var(--t-muted, #555); }
  .photo-review-pair { grid-template-columns: 1fr; }
  .owner-stat strong { font-size: 1.4rem; }
}

/* Build 186: Maxi's guided quote */
.maxi-quote [hidden] { display: none !important; }
.maxi-log { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.maxi-bubble { margin: 0; padding: .7rem .9rem; border-radius: 1rem; max-width: 92%; line-height: 1.4; }
.maxi-bot { align-self: flex-start; background: var(--t-surface2, #eef2ee); color: var(--t-text, #1c1c1a); border-bottom-left-radius: .25rem; }
.maxi-me { align-self: flex-end; background: var(--brand-primary, #FF6500); color: #fff; border-bottom-right-radius: .25rem; }
.maxi-nav { display: flex; gap: .6rem; margin: 1rem 0; } .maxi-nav button { min-height: 2.75rem; }

/* Build 190: Maxi delivery-charge answer: the quote button sits centered under the answer */
.maxi-center { text-align: center; margin: 1.25rem 0; }

/* Build 194: Maxi's answers quoted from our own pages, plant facts, and the "still learning" note. Colours come from the theme tokens. */
.maxi-quote-text { margin: 0.5rem 0; padding: 0.75rem 1rem; border-left: 4px solid var(--t-amber, #FFA400); background: var(--t-warn-bg, #fdf1e6); color: var(--t-warn-fg, #6b4405); border-radius: 0 0.25rem 0.25rem 0; }
.maxi-fact { margin: 0.5rem 0 1rem; }
.maxi-fact ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.maxi-learning { border: 1px solid var(--t-amber, #FFA400); background: var(--t-warn-bg, #fdf1e6); color: var(--t-warn-fg, #6b4405); padding: 0.75rem 1rem; border-radius: 0.25rem; margin: 0.5rem 0; }
.maxi-learning p { margin: 0.25rem 0; }
.maxi-learning a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Build 196: the admin home "Open" list on a phone. No meaningless "Area" label, the name sits above its description, and Open is a full width button. */
@media (max-width: 720px) {
  body:has(.admin-global-header) .table-wrap table.area-list td { display: block; text-align: left; border-bottom: 0; padding: .25rem 0; }
  body:has(.admin-global-header) .table-wrap table.area-list tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--line, #ddd); }
  body:has(.admin-global-header) .table-wrap table.area-list tr:first-child { display: none; }
  body:has(.admin-global-header) .table-wrap table.area-list td strong { display: block; font-size: 1.1rem; }
  body:has(.admin-global-header) .table-wrap table.area-list .area-desc { display: block; }
  body:has(.admin-global-header) .table-wrap table.area-list .area-dash { display: none; }
  body:has(.admin-global-header) .table-wrap table.area-list td::before { display: none; content: none; }
  body:has(.admin-global-header) .table-wrap table.area-list td:last-child a.button { display: block; text-align: center; width: 100%; box-sizing: border-box; }
}

/* Build 196: help cards two across on phones and tablets, four across on wide screens; the Call us / Email us buttons sit under them. */
.storefront-support-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .storefront-support-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.storefront-support-contact { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.25rem 0 0; }
.storefront-support-contact .button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 480px) { .storefront-support-contact .button { flex: 1 1 100%; } }
/* Gift cards as the fourth trust item: two across from 480px, four across from 1000px; one column on the smallest phones. */
.storefront-trust-grid--four { grid-template-columns: 1fr; }
@media (min-width: 480px) { .storefront-trust-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .storefront-trust-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Build 196: Previous / Next also sit below the group, centred, with room for the iPhone home bar. Not a fixed bar, so nothing covers the page. */
.storefront-pager-bottom { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; padding-bottom: env(safe-area-inset-bottom, 0px); }
.storefront-pager-bottom[hidden] { display: none; }
.storefront-pager-bottom button { min-height: 44px; min-width: 44px; }
.storefront-arrivals .storefront-home-section-head, .storefront-collections .storefront-home-section-head { scroll-margin-top: 1rem; }

/* Build 196: links that go with an FAQ answer Maxi quotes (from the FAQ importer's Link 1 / Link 2) */
.maxi-passage-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.maxi-passage-links .button { min-height: 44px; display: inline-flex; align-items: center; }

/* Build 196: newsletter signup row in the footer */
.storefront-newsletter { max-width: 64rem; margin: 2rem auto 0; padding: 1.25rem; border: 1px solid var(--t-footer-line, #4a3626); border-radius: .5rem; background: rgba(255,255,255,.05); color: var(--t-footer-text, #ede3d8); }
.storefront-newsletter h2 { color: var(--t-footer-text, #fff); }
.storefront-newsletter label, .storefront-newsletter legend, .storefront-newsletter-field span { color: var(--t-footer-text, #ede3d8); }
.storefront-newsletter a { color: var(--t-navy-text, #FFA400); }
.storefront-newsletter-consent { color: var(--t-footer-muted, #c9b8a8); }
.storefront-newsletter-msg { color: #ffb4a8; }
.storefront-newsletter h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.storefront-newsletter p { margin: 0 0 .75rem; }
.storefront-newsletter-form { display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: end; }
@media (min-width: 720px) { .storefront-newsletter-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; } }
.storefront-newsletter-field { display: grid; gap: .25rem; font-size: .9rem; }
.storefront-newsletter-field input { font-size: 16px; min-height: 44px; padding: .5rem .75rem; width: 100%; box-sizing: border-box; } /* 16px stops iPhone Safari zooming in */
.storefront-newsletter-form button, .storefront-newsletter-actions button { min-height: 44px; }
.storefront-newsletter-consent { font-size: .8rem; margin: .75rem 0 0; }
.storefront-newsletter-msg { min-height: 1.2em; margin: .5rem 0 0; }
.storefront-newsletter-interests fieldset { border: 0; padding: 0; margin: 0 0 .75rem; }
.storefront-newsletter-interests legend { font-weight: bold; padding: 0; margin-bottom: .5rem; }
.storefront-newsletter-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.storefront-newsletter-choice { display: flex; gap: .5rem; align-items: center; min-height: 44px; }
.storefront-newsletter-choice input { width: 1.25rem; height: 1.25rem; }
.storefront-newsletter-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Build 197: field job load list, form labels, no inner scroll boxes */
.field-form textarea { overflow: hidden; resize: none; }
.field-items { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.field-items li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--t-border, #DCD5C9); }
.field-items li:first-child { border-top: 0; }
.field-qty-badge { flex: 0 0 4.8rem; box-sizing: border-box; white-space: nowrap; text-align: center; font-size: 1.4rem; font-weight: 800; line-height: 1; padding: .55rem .5rem; border-radius: 10px; background: var(--t-ok-bg, #f1f8ee); color: var(--t-text, #1A1A1A); border: 1px solid var(--t-ok-line, #9bc58f); }
.field-item-text { min-width: 0; display: flex; flex-direction: column; gap: .15rem; font-size: 1.1rem; overflow-wrap: anywhere; }
.field-item-size { font-size: 1.05rem; font-weight: 700; color: var(--t-ok-fg, #1e7a3c); }
.field-tile .field-when { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--t-ok-fg, #1e7a3c); margin-bottom: .15rem; }
.field-tile.signed { border-color: var(--t-ok-line, #9bc58f); background: var(--t-ok-bg, #f1f8ee); }
.field-card { box-sizing: border-box; }

/* Build 198: Ask our team, Did you mean row, admin question list */
.maxi-dym { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .6rem; }
.maxi-dym a.button { margin: 0; }
.ask-form { max-width: 40rem; }
.ask-form textarea { width: 100%; box-sizing: border-box; }
.question-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.faq-ask { margin-top: 1.5rem; }
.maxi-dym a.button { text-decoration: none; }

/* Build 199: store status and weather stripe under Ask Maxi on the home page */
.storefront-status-stripe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin: 1rem 0 1.5rem; padding: .85rem 1.1rem; border: 1px solid var(--t-border); border-left: 5px solid var(--t-amber); border-radius: .5rem; background: var(--t-surface2); color: var(--t-text); box-sizing: border-box; }
.storefront-status-stripe p { margin: 0; }
.storefront-status-stripe .status-weather { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.5rem; flex: 1 1 18rem; min-width: 0; }
.storefront-status-stripe .status-weather-main { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.storefront-status-stripe .status-icon { display: inline-flex; flex: none; color: var(--t-accent-text); }
.storefront-status-stripe .status-title { font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.storefront-status-stripe .status-sub { font-size: 1.05rem; color: var(--t-text); }
.storefront-status-stripe .status-open { font-weight: 700; color: var(--t-ok-fg); background: var(--t-ok-bg); border: 1px solid var(--t-ok-line); border-radius: 2rem; padding: .2rem .8rem; }
.storefront-status-stripe .status-tip { flex: 1 1 14rem; min-width: 0; color: var(--t-muted); font-size: .95rem; }
.storefront-status-stripe.is-notice { flex-direction: column; align-items: stretch; background: var(--t-warn-bg); color: var(--t-warn-fg); border-color: var(--t-warn-line); border-left-color: var(--t-warn-line); }
.storefront-status-stripe.is-notice .status-notice { display: flex; flex-direction: column; gap: .3rem; }
.storefront-status-stripe.is-notice .status-title { font-size: 1.1rem; color: var(--t-warn-fg); }
.storefront-status-stripe.is-notice .status-icon { color: var(--t-warn-fg); }
.storefront-status-stripe.is-notice .status-message { font-size: 1.1rem; font-weight: 600; }
.storefront-status-stripe.is-notice .status-small { font-size: .9rem; }
.storefront-status-stripe.is-notice .status-sub, .storefront-status-stripe.is-notice .status-tip { color: var(--t-warn-fg); }
.storefront-status-stripe.is-notice .status-weather { border-top: 1px solid var(--t-warn-line); padding-top: .5rem; }
.storefront-status-stripe.is-closed, .storefront-status-stripe.is-early_closure { background: var(--t-danger-bg); color: var(--t-danger-fg); border-color: var(--t-danger-line); border-left-color: var(--t-danger-line); }
.storefront-status-stripe.is-closed .status-title, .storefront-status-stripe.is-early_closure .status-title, .storefront-status-stripe.is-closed .status-icon, .storefront-status-stripe.is-early_closure .status-icon, .storefront-status-stripe.is-closed .status-sub, .storefront-status-stripe.is-early_closure .status-sub, .storefront-status-stripe.is-closed .status-tip, .storefront-status-stripe.is-early_closure .status-tip { color: var(--t-danger-fg); }
.storefront-status-stripe.is-closed .status-weather, .storefront-status-stripe.is-early_closure .status-weather { border-top-color: var(--t-danger-line); }
@media (max-width: 40rem) { .storefront-status-stripe { padding: .75rem .9rem; } }
/* Build 200: stripe layout follows the approved mock. Row 1: weather on the left, status on the right. Row 2: the garden tip with its icon. */
.storefront-status-stripe { flex-direction: column; align-items: stretch; gap: .6rem; }
.storefront-status-stripe .status-weather { flex: none; justify-content: space-between; gap: .5rem 1.5rem; }
.storefront-status-stripe .status-open { margin-left: auto; white-space: nowrap; }
.storefront-status-stripe .status-tip { flex: none; display: flex; align-items: center; gap: .55rem; border-top: 1px solid var(--t-border); padding-top: .6rem; }
.storefront-status-stripe .status-tip .status-icon { color: var(--t-info-line); }
.storefront-status-stripe.is-notice .status-tip { border-top-color: var(--t-warn-line); }
.storefront-status-stripe.is-notice .status-tip .status-icon { color: inherit; }
.storefront-status-stripe.is-closed .status-tip, .storefront-status-stripe.is-early_closure .status-tip { border-top-color: var(--t-danger-line); }
/* Build 203: footer newsletter row. It now spans the same width as the footer columns (it was capped at 64rem inside a 70rem footer, so it sat
   inset). The global label rule's bottom margin made each field cell 12px taller than its input, which pushed the Subscribe button below the
   fields; the field labels carry no margin here. The empty status line no longer leaves a blank band under the consent text. */
.storefront-newsletter { max-width: var(--content-w, 70rem); box-sizing: border-box; }
.storefront-newsletter .storefront-newsletter-field { margin-bottom: 0; }
.storefront-newsletter-field input { margin-top: 0; }
.storefront-newsletter-consent { margin: .75rem 0 0; }
.storefront-newsletter-msg { min-height: 0; margin: 0; }
.storefront-newsletter-msg:not(:empty) { margin-top: .5rem; }

/* Build 213: price and inventory disclaimer on every page that shows stock or prices. */
.stock-disclaimer { max-width: 64rem; margin: 1.5rem auto 1rem; padding: 0.75rem 1rem; border-left: 4px solid var(--t-amber, #FFA800); background: var(--t-surface2, #f4f7fb); color: var(--t-muted, #4A463F); font-size: 0.9rem; line-height: 1.45; }

/* Build 213: card text never splits inside a word unless one word is wider than the whole column. */
.storefront-card h2, .storefront-card h3, .storefront-card p, .storefront-card-meta { overflow-wrap: break-word; word-break: normal; }

/* Build 213 (options 2 and 3): large page text. The Safari aA menu and Larger Text scale only the letters, never the columns, so the page
   cannot see it from CSS. assets/js/app.js measures it and sets html.big-text-1 (125 percent or more: smaller card padding and images) and
   html.big-text (150 percent or more: one card per row). Below 150 percent the two-column layout from Build 154 is kept. */
@media (max-width: 899px) {
  html.big-text-1 .storefront-card { padding: 0.6rem; }
  html.big-text-1 .storefront-card-image { height: 6rem; }
  html.big-text-1 .storefront-arrivals-track .storefront-card-image { height: 5.5rem; }
  html.big-text .storefront-card-grid--tiles,
  html.big-text .storefront-card-grid,
  html.big-text .storefront-arrivals-track,
  html.big-text .storefront-collection-grid,
  html.big-text .storefront-filters,
  html.big-text .storefront-facts-list,
  html.big-text .storefront-footer-grid,
  html.big-text .storefront-rich-content:has(> article > h3 > a),
  html.big-text .maxi-tiles { grid-template-columns: 1fr; }
  html.big-text .storefront-card-image { height: 8rem; }
}

/* Build 213: nothing on a field page may be wider than the screen (a wider page is what iPhone Safari keeps zoomed after a turn). */
.field-body { overflow-x: clip; max-width: 100%; }
.field-main, .field-sheet, .pc-sheet { min-width: 0; box-sizing: border-box; }
.field-sheet { max-width: 100%; }
.field-sig, canvas.field-sig { max-width: 100%; }

/* Build 215: brand colors site wide. Price areas are navy-led, information areas are orange-led (orange text only as the darker brand text shade, which passes 4.5:1);
   success and error states keep their green and red. Dark mode uses a light navy tint so prices stay readable. */
:root { --t-price: #1B2A4A; --t-price-bg: #EEF2FA; --t-info-line: #B84900; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-price: #B6CBFF; --t-price-bg: #14264D; --t-info-line: #FFA400; } }
:root[data-theme="dark"] { --t-price: #B6CBFF; --t-price-bg: #14264D; --t-info-line: #FFA400; }
.storefront-price, .storefront-card-foot .storefront-price { color: var(--t-price); }
.estimate-total, .price-total, .pricing-total, .receipt-total { color: var(--t-price); font-weight: 700; }
.storefront-delivery, .storefront-dict-note, .storefront-callout-card { border-left: 4px solid var(--t-info-line); }
.storefront-delivery h2, .storefront-dict-note strong { color: var(--t-accent-text); }
.field-hint { color: var(--t-muted, #4A463F); }
.field-card.counted, .pc-item.counted { border-left: 5px solid var(--t-ok-line, #2F6F3E); }

/* Build 217: Products We Recommend cards. The card was a fixed white box with theme text, so in dark mode the titles were light on white (not readable).
   Card, text and border now follow the theme; product photos keep a white mat because Amazon pictures have white backgrounds. */
.rec-card { background: var(--t-surface, #fff); color: var(--t-text, #1A1A1A); border-color: var(--t-border, #DCD5C9); }
.rec-photo { border-bottom-color: var(--t-border, #DCD5C9); }
.rec-photo--none { background: var(--t-surface2, #FAF7F2); }
.rec-body h3 { color: var(--t-text, #1A1A1A); }
.rec-body p, .rec-note { color: var(--t-muted, #4A463F); }
.rec-card .rec-buy { background: var(--t-accent, #FF6500); color: var(--t-on-accent, #1A1A1A); }

/* Build 218: the Delivery and installation heading is a link; the out-of-stock buttons sit side by side. */
.storefront-delivery h2 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a.button.secondary { background: var(--t-surface2, #F4EDE4); color: var(--t-text, #1A1A1A); border: 1px solid var(--t-border, #DCD5C9); }