/* RecyclingBin classic theme styles.
   The site chrome (utility bar, header, primary nav, footer) is rendered in PHP
   (header.php / footer.php) and styled here, ported from the mockup. Block
   editor / post content styling still comes from theme.json; this file adds the
   base document styles, chrome, and light content/alignment rules classic
   themes need. Palette variables live in :root below and mirror theme.json. */

:root {
    --green-deep: #3f6b1f;
    --green-mid: #4f7a24;
    --green-bright: #7cb342;
    --green-hover-strong: rgba(150, 186, 62, .55);
    --green-hover-soft: rgba(150, 186, 62, .22);
    --navy: #1f3a5f;
    --navy-2: #274b7a;
    --ink: #1c2318;
    --ink-soft: #4b5548;
    --line: #e3e7dd;
    --line-2: #d3dac9;
    --paper: #ffffff;
    --wash: #f6f8f2;
    --wash-2: #eef2e7;
    --amber: #e0a01e;
    --blue-stream: #1f6fb2;
    --red: #c0392b;
    --shadow: 0 1px 3px rgba(28, 35, 24, .08), 0 6px 20px rgba(28, 35, 24, .06);
    --shadow-lg: 0 10px 40px rgba(28, 35, 24, .14);
    --radius: 10px;
    --radius-sm: 6px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --maxw: 1200px;
}
:root :where(.is-layout-flow) > * {
    margin-block-start: 0;
}
.wp-block-heading{
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}
.wp-block-button{
  margin-top: 1.5rem!important;
}
body.home .wp-block-button.is-style-rb-ghost .wp-block-button__link {
  display: none;
}
/* ===== base document ===== */
* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: var(--font);
	color: var(--ink);
	background: var(--paper);
	line-height: 1.5;
	font-size: 16px;
}
/* Headings — mock line 24. The theme previously declared none of these, so
   every h2/h3 without a component rule of its own inherited the browser
   default (1.5em/1.17em) instead of the mockup's scale. */
h1, h2, h3, h4 {
	line-height: 1.15; margin: 0 0 .4em; color: var(--ink);
	font-weight: 700; letter-spacing: -.01em;
}
h1 { font-size: 2.3rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.2rem; }

/* Bottom margin only. The browser default is `1em 0`, and the extra top margin
   made every band 2–5px taller than the approved design — caught by diffing the
   mockup's pages under both stylesheets. */
p { margin: 0 0 1em; }

/* Link colours were inverted against the approved design — mid green at rest,
   deep on hover, not the other way round. Caught by diffing imported pages
   against the mockup; it was wrong on every link on the site. */
a { color: var(--green-mid); text-decoration: none; }
a:hover { color: var(--green-deep); text-decoration: underline; }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
body.blog .wrap:not(.crumb), body.wp-singular .wrap:not(.crumb) {
  padding: 20px 20px;
}
body.blog .wrap.crumb {
  padding: 20px 0px;
}

/* Accessibility helpers */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}
.skip-link { position: absolute; left: -9999px; z-index: 999; }
.skip-link:focus {
	left: 8px; top: 8px; width: auto; height: auto; clip: auto; clip-path: none;
	background: #fff; color: var(--ink); padding: .6em 1em; border-radius: 6px; box-shadow: var(--shadow);
}

/* ===== sticky topbar (util + header + nav pinned) ===== */
.topbar { position: sticky; top: 0; z-index: 100; background: #fff; }
.topbar header.site { position: static; box-shadow: none; }

/* Utility / trust bar — approved mockup: a light wash bar, not the old navy one. */
.util { background: var(--wash); color: var(--ink-soft); font-size: .76rem; border-bottom: 1px solid var(--line); position: relative; }
.util .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1.2em; padding-top: 4px; padding-bottom: 4px; }
.util strong { color: var(--ink); }
.util a { color: var(--ink-soft); }
.util a:hover { color: var(--green-deep); }
.util-right { margin-left: auto; display: flex; gap: 1.4em; align-items: center; }
.badge-usa { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--ink); }
.flag-ic { font-size: 1rem; line-height: 1; }
/* The "Account Setup & W-9" pill. */
.util-w9 {
	background: var(--green-deep); border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px;
	padding: .25em .7em; font-weight: 700; color: #fff !important; white-space: nowrap;
}
.util-w9:hover { background: var(--green-mid); text-decoration: none; }

/* ===== header ===== */
/* mock line 63: the header carries the rule between it and the nav. The
   box-shadow the mockup pairs with it is suppressed inside .topbar (line 493),
   which we already mirror below. */
header.site { background: #fff; border-bottom: 1px solid var(--line); }
.header-main { display: flex; align-items: center; gap: 20px; padding: 12px 0; }
.logo-lock { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.logo-lock .rb-logo img, .logo-lock .rb-logo-img { height: 72px; max-width: 200px; width: auto; display: block; }
.rb-logo--text { font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: var(--green-deep); }
.rb-logo--text:hover { text-decoration: none; }

/* Header tagline — replaces the old .tag strapline beside the logo. */
.tagline-hdr {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
	margin-left: 24px; margin-right: 20px; flex: 1 1 auto; min-width: 0; align-self: center;
}
.tagline-main {
	font-size: 1.12rem; font-weight: 700; color: var(--navy); line-height: 1.3;
	white-space: nowrap; letter-spacing: -.01em; font-style: italic; overflow: hidden; text-overflow: ellipsis;
}
.tagline-call {
	font-size: .82rem; font-weight: 700; font-style: normal; color: var(--green-deep);
	text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .35em;
}
.tagline-call:hover { text-decoration: underline; }

/* Search pill. The mockup puts its search trigger in the utility bar on desktop
   and in the nav's mobile bar under 720px, so the header renders the form twice
   and these two classes show exactly one of them. */
.rb-search {
	display: inline-flex; align-items: center; gap: 6px; background: #fff;
	border: 1px solid #ccc; border-radius: 20px; padding: .3em .9em; font-size: .76rem;
	color: #555; white-space: nowrap; transition: .15s; max-width: 260px;
}
.rb-search:focus-within { border-color: var(--green-mid); }
.rb-search .rb-search-ic { flex-shrink: 0; color: var(--green-mid); }
/* Zero vertical padding deliberately: the pill's own .3em does the spacing, and
   an input that adds its own makes the whole utility bar 5px taller than the
   mockup's (39px against 34px). */
.rb-search input[type="search"] {
	flex: 1; border: 0; background: transparent; padding: 0; font-size: .76rem;
	font-family: inherit; color: var(--ink); outline: none; min-width: 0; width: 100%;
}
.rb-search button {
	flex-shrink: 0; border: 0; background: none; color: var(--green-mid);
	padding: 0; cursor: pointer; display: flex; align-items: center;
}
.rb-search button:hover { color: var(--green-deep); }
.nav-mobile-search { display: none; }

/* In a page body (404, search results) the chrome-sized pill is far too small,
   so this variant restores a readable field. Each caller also passes its own
   id — two forms sharing `rb-search-field` would break the <label for>. */
.rb-search--page { max-width: 420px; width: 100%; padding: .5em 1.1em; font-size: .95rem; margin: 18px 0; }
.rb-search--page input[type="search"] { font-size: .95rem; }
.rb-search--page .rb-search-ic { width: 16px; height: 16px; }

/* Header action buttons */
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.hdr-btn {
	display: inline-flex; flex-direction: column; align-items: center; gap: 3px; background: none;
	border: 1px solid transparent; border-radius: 8px; padding: .4em .6em; font-size: .68rem; font-weight: 600;
	color: var(--ink-soft); cursor: pointer; position: relative; min-width: 54px; transition: .15s;
}
.hdr-btn:hover { color: var(--green-deep); background: var(--wash); border-color: var(--line); text-decoration: none; }
.hdr-btn svg { width: 22px; height: 22px; stroke-width: 1.7; }
.cart-count {
	position: absolute; top: 0; right: 4px; transform: translate(9px, -8px); background: var(--amber);
	color: #3a2c00; font-size: .62rem; font-weight: 800; border-radius: 10px; padding: 0 5px; min-width: 16px; text-align: center;
}
.cart-count[data-empty="1"] { display: none; }

/* ===== primary nav =====
   Approved mockup: a green gradient bar with white links, and a THREE-level
   menu whose submenu is a <div class="sub"> of bare links — not a nested list.
   `nav.primary ul{display:flex}` matches every <ul> inside the nav, so a
   <ul class="sub"> would lay its items out horizontally and the dropdown would
   collapse. RB_Nav_Walker emits divs for exactly this reason. */
nav.primary { border-top: 1px solid var(--green-deep); background: linear-gradient(180deg, var(--green-mid), var(--green-deep)); }
nav.primary ul { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; max-width: var(--maxw); }
nav.primary > ul { padding: 0 20px; }
nav.primary li { position: relative; }
nav.primary > ul > li > a { display: block; padding: .75em .9em; font-size: .86rem; font-weight: 600; color: #fff; white-space: nowrap; }
nav.primary > ul > li > a:hover { color: #eaf6df; background: var(--green-hover-strong); text-decoration: none; }

nav.primary li .sub {
	display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--line);
	box-shadow: var(--shadow-lg); border-radius: 0 0 8px 8px; min-width: 210px; padding: 6px; z-index: 60;
}
nav.primary li:hover .sub, nav.primary li:focus-within .sub { display: block; }
nav.primary .sub a { display: block; padding: .55em .8em; font-size: .85rem; border-radius: 5px; color: var(--ink); }
nav.primary .sub a:hover { background: var(--green-hover-soft); text-decoration: none; }

/* third level */
nav.primary .sub .has-flyout { position: relative; }
nav.primary .sub .flyout {
	display: none; position: absolute; top: 0; left: 100%; background: #fff; border: 1px solid var(--line);
	box-shadow: var(--shadow-lg); border-radius: 8px; min-width: 200px; padding: 6px; z-index: 61;
}
nav.primary .sub .has-flyout:hover .flyout,
nav.primary .sub .has-flyout:focus-within .flyout,
nav.primary .sub .has-flyout.open .flyout { display: block; }
nav.primary .sub .flyout a { display: block; padding: .55em .8em; font-size: .85rem; border-radius: 5px; color: var(--ink); }
nav.primary .sub .flyout a:hover { background: var(--green-hover-soft); text-decoration: none; }

/* the model picker: a two-column image grid */
nav.primary .sub .flyout.model-flyout {
	display: none; min-width: 420px; max-width: 460px; padding: 10px;
	grid-template-columns: 1fr 1fr; gap: 2px 14px;
}
nav.primary .sub .has-flyout:hover .flyout.model-flyout,
nav.primary .sub .has-flyout:focus-within .flyout.model-flyout,
nav.primary .sub .has-flyout.open .flyout.model-flyout { display: grid; }
nav.primary .sub .flyout .model-flyout-item {
	display: flex; align-items: center; gap: 10px; padding: .4em .5em; border-radius: 6px; color: var(--ink);
}
nav.primary .sub .flyout .model-flyout-item img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
nav.primary .sub .flyout .model-flyout-item span { font-size: .87rem; }
nav.primary .sub .flyout .model-flyout-item:hover { background: var(--green-hover-soft); text-decoration: none; }

.nav-toggle { display: none; }
.nav-mobile-bar { display: none; }
.mob-arrow { display: none; }

/* ==========================================================================
   EDITORIAL VOCABULARY
   Ported from the APPROVED mockup's stylesheet
   (docs/new mockup/approved-extraction/assets/css/styles.css).

   This is the whole surface the 22 non-commerce content pages are written in.
   I inventoried every class inside <main> across all of them before porting:
   it is genuinely this small — bands, a breadcrumb, an eyebrow, four grid
   widths, three card shapes, a spec table, an accordion and a two-column
   layout. Page bodies are built from these through block patterns
   (inc/patterns.php); the breadcrumb, page header and closing CTA are owned by
   the template, not the editor.

   Keep OUTPUTTING these class names. Do not re-declare padding, size or weight
   in plugin CSS or in a page's own inline styles.
   ========================================================================== */

/* --- sections ------------------------------------------------------------ */
section.band, .band { padding: 40px 0; }
section.band.tight, .band.tight { padding: 28px 0; }
body.page-id-4862 section.band.tight, .band.tight { padding: 0px 0px!important; }
body.page-id-4862 .rb-page-head h1 { font-size:32px; }
.band.wash { background: var(--wash); }
.band.wash2 { background: var(--wash-2); }
.band.navy { background: var(--navy); color: #eaf0f8; }
/* h1 included deliberately, where the mockup's own stylesheet covers only h2 and
   h3 — it puts `style="color:#fff"` on the one h1 that lands in a navy band
   (Government's hero), and the converter does not carry inline colour. Without
   h1 here, WordPress wins: theme.json emits `:where(.wp-block-heading){color:ink}`
   and this file has `h1,h2,h3,h4{color:var(--ink))}`, so the headline rendered
   rgb(28,35,24) on rgb(31,58,95) — near-black on navy, which is what Chris was
   looking at. A container that sets a light ink has to say so for headings too;
   they never inherit it. */
.band.navy h1, .band.navy h2, .band.navy h3, .band.navy h4 { color: #fff; }
.band.gradient { background: linear-gradient(135deg, var(--navy) 0%, var(--green-deep) 100%); color: #fff; }
.band.gradient h1, .band.gradient h2, .band.gradient h3 { color: #fff; }

.crumb { font-size: .82rem; color: var(--ink-soft); padding: 14px 0; }
.crumb a { color: var(--ink-soft); }

.eyebrow {
	text-transform: uppercase; letter-spacing: .09em; font-size: .72rem;
	font-weight: 700; color: var(--green-mid); margin-bottom: .6em;
}
.band.navy .eyebrow, .band.gradient .eyebrow { color: var(--green-bright); }

.sec-head { max-width: 720px; margin-bottom: 20px; }
.sec-head p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }
.band.navy .sec-head p, .band.gradient .sec-head p { color: #c6d3e6; }

/* The intro/body paragraph the mockup writes inline as
   `color:var(--ink-soft);font-size:1.05rem` on nearly every editorial page. */
.lede { color: var(--ink-soft); font-size: 1.05rem; }
.band.navy .lede, .band.gradient .lede { color: #c6d3e6; }

/* --- grids --------------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-6 { grid-template-columns: repeat(6, 1fr); }

/* --- cards --------------------------------------------------------------- */
/* Section icon. The approved pages set these inline as an oversized emoji above
   a card or tile heading; `.rb-ic` is the class that carries that treatment, so
   the size lives here once instead of in every page's content. */
.rb-ic { font-size: 2rem; line-height: 1; margin: 0 0 10px; display: block; }

/* --- the approved typographic scale --------------------------------------
   The approved pages vary type size and colour per element, written inline
   (`color:var(--ink-soft);font-size:.95rem`). The theme cannot infer that from
   context, so the converter maps each inline value onto one of these classes.

   Classes rather than inline styles: this is still presentation in content,
   but it is a NAMED scale that can be restyled centrally, which an inline
   `font-size:.95rem` on four hundred paragraphs cannot. */
.soft { color: var(--ink-soft); }
.fs-xs { font-size: .82rem; }
.fs-sm { font-size: .9rem; }
.fs-md { font-size: .95rem; }
.fs-lg { font-size: 1.05rem; }
.fs-xl { font-size: 1.15rem; }
.fs-xxl { font-size: 1.3rem; }

/* The converter's exact type scale (`.fs-98`, `.fs-102` …) lives at the END of
   this file, where a utility has to live to beat the component rules it
   overrides. See "the approved design's own type scale" there. */
/* Colour ONLY. The converter adds `.h-green` to anything the design writes in
   green-deep, so anything else in here travels to every green heading on the
   site. It used to carry the size, the left bar and the margin as well, which
   is why Our Bins' plain green headings came out 18.4px with a rule down the
   side where the design has 19.2px and nothing — the treatment belongs to
   `.h-rule` below, and only Reduce Your Waste asks for it. */
.h-green { color: var(--green-deep); }

/* The ruled heading: green, with a mid-green bar down the left edge. Reduce Your
   Waste writes it inline as
   `color:…green-deep;font-size:1.15rem;border-left:4px solid …green-mid;
   padding-left:12px;margin-bottom:12px`, and this is that, verbatim. */
.h-rule {
	font-size: 1.15rem;
	border-left: 4px solid var(--green-mid);
	padding-left: 12px;
	margin-bottom: 12px;
}

/* Pull-quote — a left rule, no fill. Distinct from `.note`, which is a tinted
   box; using .note here gave it a background the design does not have. */
.pullquote {
	font-style: italic; color: var(--ink-soft); border-left: 3px solid var(--green-mid);
	padding-left: 14px; margin: 14px 0; background: none;
}

/* Utility containers the approved pages write inline. */
.text-center { text-align: center; }
/* `.panel.panel--navy`, not `.panel--navy`: `.panel` is declared later in this
   file, so at equal specificity it would win and repaint the card wash-green. */
.panel.panel--navy { background: var(--navy); color: #fff; border: 0; padding: 32px; }
.panel.panel--navy h2, .panel.panel--navy h3, .panel.panel--navy h4 { color: #fff; }
.panel.panel--navy p { color: #c6d3e6; }

/* The Fan-favorites track lives in woocommerce.css — it has to override
   `.woocommerce ul.products`, which is declared there at the same specificity
   and would win on source order from here. */

/* Numbered step row — a circular number beside a heading and copy
   (Start a Recycling Program). Distinct from `.steps`, which is a grid. */
.numstep { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.numstep:last-child { border-bottom: 0; }
.numstep .numstep-n {
	min-width: 38px; height: 38px; border-radius: 50%; background: var(--green-mid); color: #fff;
	font-weight: 800; font-size: .95rem; display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; margin: 0;
}
.numstep-body > :last-child { margin-bottom: 0; }
.numstep-body h3 { margin: 0 0 5px; font-size: 1.02rem; }
.numstep-body p { color: var(--ink-soft); margin: 0; font-size: .92rem; line-height: 1.6; }

/* Pill badge on a dark header (About). */
.usa-chip {
	display: inline-flex; align-items: center; gap: .5em; background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .25); padding: .5em 1em; border-radius: 20px;
	margin-top: 16px; font-weight: 700; font-size: .88rem;
}

/* Newsletter sign-up (inc/newsletter.php). */
.rb-newsletter { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.rb-newsletter input[type="email"] {
	flex: 1; min-width: 220px; padding: .7em 1em; border: 1.5px solid var(--line-2);
	border-radius: 30px; font-family: inherit; font-size: .95rem;
}
.rb-newsletter input[type="email"]:focus { outline: none; border-color: var(--green-mid); }
.rb-newsletter .rb-hp { position: absolute; left: -9999px; }
.rb-newsletter-done { background: var(--wash-2); color: var(--green-deep); }
.rb-newsletter-error { background: #fdeceb; color: var(--red); }

/* .vmod — the plain white card (Government, Specialty, Shop By, About). */
.vmod { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.vmod .num { font-size: 2rem; font-weight: 800; color: var(--green-deep); letter-spacing: -.02em; line-height: 1; min-height: 40px; display: flex; align-items: center; }
.vmod .rb-ic { font-size: 2rem; line-height: 1; margin-bottom: 10px; display: block; }
.vmod h3 { margin: .5em 0 .3em; font-size: 1.05rem; }
.vmod p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.vmod > :last-child { margin-bottom: 0; }

/* .panel — the larger tinted card (Our Bins, Contributions). */
.panel { background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.panel .rb-ic { font-size: 2rem; line-height: 1; margin-bottom: 10px; display: block; }
.panel h3 { margin: 0 0 10px; color: var(--green-deep); }
.panel p { color: var(--ink-soft); font-size: .92rem; margin: 0; line-height: 1.6; }
.panel > :last-child { margin-bottom: 0; }

/* .media-card — image above copy (The Recycling Process, Recycling Facts). */
.media-card { background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.media-card > img, .media-card figure { margin: 0; }
.media-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.media-card__body { padding: 20px; }
.media-card__body > :last-child { margin-bottom: 0; }
.media-card h3 { margin: 0 0 8px; color: var(--green-deep); font-size: 1.05rem; }
.media-card p { color: var(--ink-soft); font-size: .9rem; margin: 0 0 12px; line-height: 1.6; }
.media-card .btn { font-size: .82rem; padding: .45em .9em; }

/* .statcard — big figure over a caption (Recycling Facts). */
.statcard { text-align: center; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.statcard .stat-n { font-size: 2rem; font-weight: 800; color: var(--green-deep); line-height: 1; }
.statcard .stat-c { font-size: .85rem; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }

/* .tile — image card with the label sitting over it (Resource Center, Home).
   `.tile--flat` drops the photo and keeps the flat #ECEEE8 ground. */
.tile { position: relative; border-radius: var(--radius); overflow: hidden; display: block; background: #eceee8; box-shadow: var(--shadow); min-height: 200px; color: #fff; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: .4s; }
.tile:hover img { transform: scale(1.05); }
.tile .ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(20, 32, 20, .82) 100%); }
.tile .t-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; }
.tile h3 { color: #fff; margin: 0 0 .15em; font-size: 1.15rem; }
.tile .t-cta { font-size: .82rem; color: #dff0cc; font-weight: 600; }
.tile .flag { position: absolute; top: 12px; left: 12px; background: var(--amber); color: #3a2c00; font-size: .68rem; font-weight: 800; padding: .25em .6em; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; }
.tile:hover { text-decoration: none; }

/* `.tile--flat` — the Resource Center's photo-less tile: a flat #ECEEE8 card
   with dark type. The mockup writes this as an absolutely-positioned overlay
   inside a .tile; as a pattern it is a plain padded block, which is the same
   result in ordinary editable blocks.

   It carried a `#e8ece3 → #c8d4b8 → #8fa87a` gradient until 2026‑09‑15. That
   gradient is what the approved mockup's author typed, but they typed it into
   `style="position:absolute;inset:0;linear-gradient(…)"` — no property name, so
   every browser drops the declaration and the approved page renders the flat
   #ECEEE8 of `.tile` underneath. Chris's call: match the approved page as it
   actually renders. **Do not "restore" the gradient** — it never rendered. */
.tile--flat {
	position: static; min-height: 240px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end;
	background: #eceee8; color: var(--ink);
}
.tile--flat .rb-ic { font-size: 1.8rem; margin-bottom: 6px; }
.tile--flat h3 { color: var(--ink); margin: 0 0 6px; font-size: 1.1rem; }
.tile--flat p { color: var(--ink-soft); font-size: .82rem; margin: 0 0 8px; line-height: 1.4; }
.tile--flat .t-cta { color: var(--green-deep); font-weight: 600; font-size: .82rem; margin: 0; }
/* Card CTAs that carry the link. The approved design makes the whole card one
   <a> and draws the CTA as text — the Resource Center tiles, and the Shop by
   market cards, which reached staging with no link on them at all. A block group
   cannot be an <a>, so the converter emits the CTA as a paragraph holding the
   link, and these rules make it render as the design's text CTA rather than the
   ghost BUTTON it used to be (Chris, 2026‑09‑15). The hover is ours: the mockup
   has none, and a link with no affordance is what he flagged. `.tile .t-cta`
   above is more specific, so a photo tile keeps its own pale-on-dark CTA. */
.t-cta { color: var(--green-deep); font-weight: 600; margin: 0; }
.t-cta a { color: inherit; font: inherit; text-decoration: none; }
.t-cta a:hover { color: var(--green-mid); text-decoration: underline; }
/* `.vmod p` (0,2,0) outranks `.t-cta` (0,1,0), so inside a card the CTA came out
   soft grey at .9rem instead of green at body size — §0's "check specificity
   against what the container already declares" in our own stylesheet this time.
   The approved CTA span carries no size, so it renders at 1rem. */
.vmod .t-cta { color: var(--green-deep); font-size: 1rem; }

/* --- chips, steps, tables, accordion ------------------------------------- */
.contract-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
/* `color` is ours, not the mockup's: a chip declares a near-white background and
   no text colour, so dropped into a dark band it inherits that band's pale ink
   and disappears — rgb(234,240,248) on rgb(246,248,242), which is what happened
   on Government once `.gov-card` went missing. A component that brings its own
   background must bring its own ink; it cannot assume the page is light. */
.contract-chip { border: 1px solid var(--line-2); border-radius: 6px; padding: .5em .8em; font-size: .8rem; font-weight: 600; background: var(--wash); color: var(--ink); }
.gov-card { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-lg); }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: s; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; position: relative; }
.step:before {
	counter-increment: s; content: counter(s); display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; background: var(--green-mid); color: #fff; font-weight: 800; margin-bottom: 10px;
}
.step h4 { font-size: .95rem; margin: 0 0 4px; }
.step p { font-size: .82rem; color: var(--ink-soft); margin: 0; }

.spec-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spec-table th, .spec-table td { text-align: left; padding: .6em .8em; border-bottom: 1px solid var(--line); }
.spec-table th { width: 200px; color: var(--ink-soft); font-weight: 600; }

/* Built on the core Details block, so questions and answers stay ordinary
   editable content — no custom block, no shortcode. */
.faq { margin-top: 16px; }
.faq details, .wp-block-details.faq-item {
	border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 8px; overflow: hidden;
}
.faq summary, .wp-block-details.faq-item summary {
	cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: .95rem; list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker, .wp-block-details.faq-item summary::-webkit-details-marker { display: none; }
.faq summary::after, .wp-block-details.faq-item summary::after { content: '+'; color: var(--green-mid); font-weight: 800; font-size: 1.2rem; }
.faq details[open] summary::after, .wp-block-details.faq-item[open] summary::after { content: '\2212'; }
.faq details[open] summary, .wp-block-details.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq .faq-a { padding: 12px 16px; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.wp-block-details.faq-item > :not(summary) { padding: 0 16px; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.wp-block-details.faq-item > :not(summary):first-of-type { padding-top: 12px; }
.wp-block-details.faq-item > :not(summary):last-child { padding-bottom: 12px; }

.empty { text-align: center; padding: 60px 20px; color: var(--ink-soft); }

/* --- the editorial page shell -------------------------------------------- */
.rb-page-head { padding: 40px 0 0; }
.rb-page-head.band { padding: 48px 0; }
.rb-page-head.band.solid { padding: 56px 0; }
.rb-page-head h1 { margin-bottom: .3em; }
.rb-page-head.band h1 { color: #fff; }
.rb-page-head .rb-page-sub { max-width: 680px; margin-bottom: 0; }
.rb-page-head.band .rb-page-sub { color: #c6d3e6; font-size: 1.1rem; }
.rb-page-head__media { margin-top: 22px; }
.rb-page-head__media img { border-radius: var(--radius); width: 100%; }

/* Split hero (Government) — copy left, card right. */
.rb-hero-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }

/* Image hero — featured image behind the title, under a scrim so white type
   stays legible whatever the photo is. */
.rb-page-head--image { position: relative; color: #fff; overflow: hidden; background: var(--navy); }
.rb-page-head--image .rb-page-head__bg { position: absolute; inset: 0; }
.rb-page-head--image .rb-page-head__bg img { width: 100%; height: 100%; object-fit: cover; }
.rb-page-head--image .rb-page-head__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(20, 32, 20, .86) 0%, rgba(20, 32, 20, .66) 42%, rgba(20, 32, 20, .25) 100%);
}
.rb-page-head--image .wrap { position: relative; }
.rb-page-head--image h1 { color: #fff; }
.rb-page-head--image .eyebrow { color: var(--green-bright); }
.rb-page-head--image .rb-page-sub { color: #e7eee6; font-size: 1.05rem; max-width: 560px; }

.rb-closing { padding: 28px 0 44px; }
.rb-closing__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.rb-closing.band { padding: 36px 0; }

/* ===== main content ===== */
.rb-main { margin: 40px auto; }
.rb-main--flush { margin: 0 auto; }
.rb-page-head { margin-bottom: 0px; }
.rb-page-title { font-size: 1.9rem; margin: 0 0 8px; }
.rb-page-desc { color: var(--ink-soft); }
.rb-post-list { display: flex; flex-direction: column; gap: 28px; }
.rb-post-card { border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.rb-post-card:last-child { border-bottom: 0; }
.rb-post-card__title { font-size: 1.4rem; margin: 0 0 6px; }
.rb-post-card__meta { font-size: .82rem; color: var(--ink-soft); margin-bottom: 8px; }
.rb-article__title { font-size: 2.2rem; margin: 0 0 10px; }
.rb-article__meta { font-size: .82rem; color: var(--ink-soft); margin-bottom: 24px; }
.rb-article__image { margin: 0 0 28px; }
.rb-article__image img { border-radius: var(--radius); }
.rb-article__foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-soft); }

/* Constrain block content in classic templates; let wide/full breathe. */
.entry-content { font-size: 1.02rem; }
/* The approved pages set body copy at 1rem, not 1.02 — every paragraph on an
   imported page was rendering a pixel large. */
.rb-body .entry-content { font-size: 1rem; }

body.single .entry-content > *, body.page .entry-content > *{
   max-width:100%;
}
.entry-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: 1100px; }
.entry-content > .alignfull { max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.entry-content > .alignleft { margin-left: 0; }
.entry-content > .alignright { margin-right: 0; }
.rb-page--no-title .entry-content > *:not(.alignfull) { padding-left: 20px; padding-right: 20px; }
/* Legacy front-page rules, kept for any site still using the old fallback
   markup. `.rb-home` (front-page.php) deliberately does NOT use them — its
   bands run full width and each supplies its own centred .wrap. Note the
   :not() selectors here: they make this rule (0,4,1) and it beat
   `.rb-body--flush .entry-content > *` (0,2,1), which is what pinned every
   homepage band to the left edge. */
.rb-front .entry-content > *:not(.alignfull):not(.alignwide) { max-width: var(--maxw); padding-left: 20px; padding-right: 20px; }
.rb-front .entry-content > .alignwide { max-width: 1100px; }

/* The editorial shell (page.php / page-landing.php) already sits inside a
   .wrap, so its body must not be re-constrained to the 760px article measure —
   the patterns set their own widths. `.alignfull` still breaks out to the
   viewport so a section band can run edge to edge. */
.rb-body .entry-content > * { max-width: none; margin-left: 0; margin-right: 0; }
.rb-body .entry-content > .alignfull {
	margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; width: 100vw;
}
.rb-body .entry-content > p, .rb-body .entry-content > ul, .rb-body .entry-content > ol { max-width: 820px; }
.rb-body .entry-content > .rb-measure, .rb-body .entry-content > .rb-measure > * { max-width: 820px; }
/* A band pattern is a full-bleed group holding its own .wrap. */
.entry-content .band > .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
body.page-id-2154 .entry-content .band > .wrap { padding: 20px; }
/* Landing pages run their bands edge to edge; each band supplies its own wrap,
   so nothing here adds a container. */
.rb-body--flush .entry-content > * { max-width: none; margin-left: 0; margin-right: 0; }
.rb-body--flush .entry-content > p,
.rb-body--flush .entry-content > ul,
.rb-body--flush .entry-content > ol { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding: 0 20px; }

/* Wide pages: /estimate/, /quote/, /quick-order/ are regular pages, so free
   them from the 760px article measure and let the mockup layout span the wrap.
   The body class is added by rb-b2b / rb-estimates when their shortcode is
   present on the page. */
.rb-wide-page .entry-content > * { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.rb-wide-page .rb-article__head, .rb-wide-page .rb-page .entry-content { max-width: none; }

/* ===== mockup primitives =====
   Ported verbatim from docs/recyclingbin-mock.html (the spec). These are the
   canonical classes; templates and plugins should OUTPUT these class names
   rather than re-declaring padding/size/weight in their own CSS. theme.css
   loads on every page, so plugin pages that are not WooCommerce pages
   (/estimate/, /quote/, /quick-order/) inherit them too. */

/* buttons — mock line 35. `.button` is the legacy classic/WP alias for `.btn`
   and keeps its historical primary-green default. */
.btn, .button, .rb-404__actions .button {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	border: 1px solid transparent; border-radius: var(--radius-sm);
	padding: .7em 1.25em; font-size: .95rem; font-weight: 600; cursor: pointer;
	background: var(--wash); color: var(--ink); transition: .15s; line-height: 1.1; text-align: center;
}
.btn:hover, .button:hover { text-decoration: none; filter: brightness(.97); }
.btn-primary, .button { background: var(--green-mid); color: #fff; }
.btn-primary:hover, .button:hover { background: var(--green-deep); color: #fff; filter: none; }
.btn-amber, .button--amber { background: var(--amber); color: #3a2c00; }
.btn-amber:hover, .button--amber:hover { background: #c98c11; color: #3a2c00; filter: none; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); color: #fff; filter: none; }
.btn-ghost, .button--outline { background: #fff; border-color: var(--line-2); color: var(--ink); box-shadow: none; }
/* The approved hover is a SOLID green fill, not a tint of the outline:
   `.btn-ghost:hover{background:var(--green-deep);border-color:var(--green-deep);
   color:#fff}`. Ours kept a white background with green text, which reads as no
   hover at all — Chris on recycling-facts, 2026‑09‑15. */
.btn-ghost:hover, .button--outline:hover { background: var(--green-deep); border-color: var(--green-deep); color: #fff; filter: none; }
.btn-lg { padding: .9em 1.6em; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn[disabled], .button[disabled] { opacity: .5; cursor: not-allowed; }

/* Core button block styles registered in inc/patterns.php, so a pattern can
   offer the mockup's button variants through the normal editor UI. The default
   (green) core button is already styled by theme.json. */
.wp-block-button.is-style-rb-ghost .wp-block-button__link {
	background: #fff; border: 1px solid var(--line-2); color: var(--ink);
}
.wp-block-button.is-style-rb-ghost .wp-block-button__link:hover {
	background: var(--green-deep); border-color: var(--green-deep); color: #fff;
}
/* The design's small button: `font-size:.82rem;padding:.45em .9em` inline on the
   "Browse … →" links in the resource articles. The converter adds `btn-sm` when
   it sees that size, so they stop rendering at the full .95rem. */
.wp-block-button.btn-sm .wp-block-button__link {
	font-size: .82rem; padding: .45em .9em;
}
.wp-block-button.is-style-rb-amber .wp-block-button__link { background: var(--amber); color: #3a2c00; }
.wp-block-button.is-style-rb-amber .wp-block-button__link:hover { background: #c98c11; color: #3a2c00; }
.wp-block-button.is-style-rb-navy .wp-block-button__link { background: var(--navy); color: #fff; }
.wp-block-button.is-style-rb-navy .wp-block-button__link:hover { background: var(--navy-2); color: #fff; }

/* Core table block wearing the spec-table look. */
.wp-block-table.is-style-rb-spec table,
.wp-block-table.is-style-rb-spec { border-collapse: collapse; font-size: .9rem; }
.wp-block-table.is-style-rb-spec th, .wp-block-table.is-style-rb-spec td {
	text-align: left; padding: .6em .8em; border: 0; border-bottom: 1px solid var(--line);
}
.wp-block-table.is-style-rb-spec th { width: 200px; color: var(--ink-soft); font-weight: 600; }

/* forms — mock line 345 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 2px; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 5px; }
.req { color: var(--red); }
.field input, .field select, .field textarea {
	width: 100%; border: 1px solid var(--line-2); border-radius: 6px;
	padding: .6em .8em; font-size: .92rem; font-family: inherit; background: #fff;
}
.field textarea { min-height: 90px; resize: vertical; }
.field .err { color: var(--red); font-size: .78rem; margin-top: 4px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--red); }
.field.invalid .err { display: block; }
.note { background: var(--wash-2); border-radius: 8px; padding: 12px 14px; font-size: .85rem; color: var(--ink-soft); }
.note.ops { background: #eef4fb; color: var(--navy); border: 1px solid #d5e2f2; }

/* Build note — a deliberately conspicuous marker for something the mockup shows
   that is gated on a decision, credential, or plugin we do not have yet. Not a
   mockup element: it exists so a reviewer can tell "blocked" from "missed".
   Rendered by rb_build_note(); hidden by defining RB_BUILD_NOTES false. */
.rb-build-note {
	background: repeating-linear-gradient(135deg, #fff8e6, #fff8e6 10px, #fff3d6 10px, #fff3d6 20px);
	border: 1px dashed #c9962a; border-radius: 8px;
	padding: 10px 14px; margin: 10px 0; font-size: .82rem; color: #6b4e0e;
  display:none;
}
.rb-build-note b { color: #8a6410; }
@media print { .rb-build-note { display: none; } }

/* layout / cards — mock line 414 */
.summary-box { background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.summary-box .row { display: flex; justify-content: space-between; padding: 7px 0; font-size: .92rem; }
.summary-box .row.total { border-top: 2px solid var(--line); margin-top: 8px; padding-top: 12px; font-size: 1.2rem; font-weight: 800; }
.two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }

/* line-item table — mock line 407. Shared by cart, checkout review and the
   estimate document, so it lives here rather than in the WooCommerce skin. */
.linetable { width: 100%; border-collapse: collapse; }
.linetable th {
	text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
	color: var(--ink-soft); padding: 0 10px 10px; border-bottom: 1px solid var(--line);
}
.linetable td { padding: 16px 10px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .9rem; }
.li-prod { display: flex; gap: 14px; align-items: flex-start; }
.li-prod img {
	width: 70px; height: 70px; object-fit: contain; border: 1px solid var(--line);
	border-radius: 6px; background: #fff; padding: 5px; flex-shrink: 0;
}
.li-prod .li-name { font-weight: 700; font-size: .92rem; }
.li-prod .li-opts { font-size: .78rem; color: var(--ink-soft); margin-top: 3px; }

/* quantity stepper — mock line 264 (cart lines and the PDP buybox) */
.stepper { display: flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.stepper button { width: 34px; border: 0; background: #fff; font-size: 1.1rem; cursor: pointer; }
.stepper input { width: 48px; border: 0; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); text-align: center; }

/* ZIP shipping estimator — mock line 418 */
.zip-est { display: flex; gap: 8px; margin: 12px 0; }
.zip-est input { flex: 1; }

.rb-404__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
/* A row of .btn anchors inside a PHP template. Block content gets core's Buttons
   block, which brings its own flex layout; a template has to say it. Values are
   the mockup's inline row: `display:flex;gap:12px;flex-wrap:wrap;margin-top:8px`. */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* Pagination */
.pagination, .navigation.pagination { margin-top: 40px; }
.pagination .nav-links, .navigation .nav-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pagination a, .pagination span {
	display: inline-block; padding: .5em .85em; border: 1px solid var(--line-2); border-radius: 6px; font-weight: 600; font-size: .9rem;
}
.pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Comments */
.rb-comments { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.rb-comment-list { list-style: none; padding: 0; }
.rb-comment-list ol { list-style: none; }

/* ===== front-page fallback ===== */
.rb-hero { background: var(--navy); color: #fff; }
.rb-hero .wrap { padding: 80px 20px; max-width: 820px; margin-inline: auto; }
.rb-hero__eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; font-weight: 700; color: var(--green-bright); margin: 0 0 12px; }
.rb-hero__title { color: #fff; font-size: 2.6rem; line-height: 1.12; margin: 0 0 14px; }
.rb-hero__lede { color: #dbe4f2; font-size: 1.1rem; margin: 0 0 24px; max-width: 640px; }
.rb-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.rb-trust { background: var(--wash); }
.rb-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 28px; padding-bottom: 28px; text-align: center; font-size: .95rem; }
.rb-featured { margin: 56px auto; }
.rb-featured > h2 { margin: 0 0 24px; }

/* ===== footer ===== */
footer.site { background: var(--footer, #141d13); color: #c4cdbb; padding: 48px 0 28px; font-size: .88rem; }
footer.site h4 { color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 14px; }
footer.site a { color: #c4cdbb; }
footer.site a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 8px; }
.foot-brand p { max-width: 290px; }
/* Specificity raised deliberately: WooCommerce ships
   `.woocommerce img, .woocommerce-page img { height:auto }` at (0,1,1), which
   beats a bare `.foot-logo` and stretched this to the full column on every
   store page. The mockup sets 58px and uses a purpose-made white logo.
   `--inverted` is the fallback for when only the colour logo is available;
   it flattens a multi-colour mark to a white silhouette, so set a real footer
   logo (Customizer → Site Identity → Footer logo) wherever possible. */
footer.site .foot-logo { display: block; height: 58px; width: auto; margin-bottom: 16px; }
footer.site .foot-logo--inverted { filter: brightness(0) invert(1); }
.foot-wordmark { font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: 14px; }
.foot-brand address { font-style: normal; font-size: .86rem; color: #9aa591; line-height: 1.9; }
.foot-brand address b { color: #c4cdbb; font-weight: 700; }
.foot-badge-usa { color: #c4cdbb; font-size: .86rem; margin-bottom: 10px; }
.social-row { display: flex; gap: 10px; margin-top: 16px; }
.social-ic {
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
	border-radius: 50%; background: rgba(255, 255, 255, .08); color: #c4cdbb; transition: .15s;
}
.social-ic:hover { background: var(--green-mid); color: #fff; }
.foot-bottom {
	border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 34px; padding-top: 20px;
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .78rem; color: #8f9a86;
}

/* ===== responsive ===== */
/* mock line 465 */
@media (max-width: 960px) {
	.two-col { grid-template-columns: 1fr; }
	.rb-hero-split { grid-template-columns: 1fr; }
	.steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.tagline-main { font-size: .92rem; }
	.tagline-hdr { margin-left: 16px; margin-right: 16px; }
	.tagline-call { font-size: .74rem; }
	.util-right { width: 100%; margin-left: 0; }
	.rb-hero__title { font-size: 2rem; }
	.rb-trust__grid { grid-template-columns: 1fr; }
}

/* The mockup collapses the nav at 720px into a bar carrying the search pill,
   the tagline and the hamburger, with accordion submenus below it. */
@media (max-width: 720px) {
	h1 { font-size: 1.8rem; }
	h2 { font-size: 1.4rem; }
	.badge-usa-desktop { display: none; }

	.header-main { gap: 12px; padding: 12px; }
	.logo-lock .rb-logo img, .logo-lock .rb-logo-img { height: 52px; }
	.tagline-hdr, .tagline-call { display: none; }

	.util-search-trigger { display: none !important; }
	.nav-mobile-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
	.nav-mobile-search { display: inline-flex; flex-shrink: 0; }
	.nav-mobile-tagline {
		flex: 1; min-width: 0; display: flex; flex-direction: column;
		align-items: center; text-align: center; line-height: 1.25; color: #fff;
	}
	.nav-mobile-tagline-main {
		font-size: .7rem; font-weight: 600; white-space: nowrap;
		overflow: hidden; text-overflow: ellipsis; max-width: 100%;
	}
	.nav-mobile-tagline-call { font-size: .72rem; color: #fff; text-decoration: underline; }
	.nav-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .4); color: #fff;
		border-radius: 6px; width: 38px; height: 38px; padding: 0; cursor: pointer; margin: 0; flex-shrink: 0;
	}
	.nav-toggle svg { display: block; }

	nav.primary > ul { display: none; flex-direction: column; padding: 8px; gap: 4px; }
	nav.primary.open > ul { display: flex; }
	nav.primary > ul > li > a {
		padding: .8em .9em; border-bottom: 1px solid rgba(255, 255, 255, .16);
		display: flex; justify-content: flex-start; align-items: center; gap: 8px;
	}
	nav.primary > ul > li:last-child > a { border-bottom: 0; }
	nav.primary li .sub {
		display: none; position: static; box-shadow: none; border: 0; border-radius: 0;
		padding: 0 0 6px 14px; min-width: 0;
	}
	nav.primary li:hover .sub, nav.primary li:focus-within .sub { display: none; }
	nav.primary li.mob-open > .sub { display: block; }
	nav.primary li .sub a { padding: .5em .6em; color: var(--ink-soft); font-size: .83rem; }
	nav.primary > ul > li.mob-open > a { background: var(--green-hover-strong); }

	nav.primary .sub .flyout, nav.primary .sub .flyout.model-flyout {
		display: none; position: static; box-shadow: none; border: 0; padding: 0 0 4px 14px;
		min-width: 0; max-width: none;
	}
	nav.primary .sub .has-flyout:hover .flyout,
	nav.primary .sub .has-flyout:focus-within .flyout,
	nav.primary .sub .has-flyout:hover .flyout.model-flyout,
	nav.primary .sub .has-flyout:focus-within .flyout.model-flyout { display: none; }
	nav.primary .sub .has-flyout.open > .flyout { display: block; }
	nav.primary .sub .has-flyout.open > .flyout.model-flyout { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 0 6px 14px; }
	nav.primary .sub .has-flyout > a { display: flex; justify-content: flex-start; align-items: center; gap: 8px; }
	nav.primary .sub .has-flyout.open > a { background: var(--green-hover-soft); }

	.mob-arrow { display: inline-block; transition: transform .2s; flex-shrink: 0; transform: rotate(90deg); }
	nav.primary > ul > li > a .mob-arrow { font-size: 1.15rem; color: #fff; }
	nav.primary > ul > li.mob-open > a .mob-arrow { transform: rotate(-90deg); }
	nav.primary .sub .has-flyout > a .mob-arrow { font-size: 1.05rem; color: var(--green-deep); }
	nav.primary .sub .has-flyout.open > a .mob-arrow { transform: rotate(-90deg); }

	.hdr-btn span:not(.cart-count) { display: block; font-size: .55rem; line-height: 1; }
	.hdr-btn { min-width: 36px; gap: 2px; }
	.hdr-btn svg { width: 18px; height: 18px; }
	.foot-grid { grid-template-columns: 1fr 1fr; }
	.form-grid { grid-template-columns: 1fr; }
	.g-3, .g-2 { grid-template-columns: 1fr; }
	.g-4, .g-6 { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: 1fr; }
	.rb-page-head.band, .rb-page-head.band.solid { padding: 32px 0; }
	.util .wrap { gap: .4em .9em; }
	.util .util-right { width: 100%; margin-left: 0; flex-wrap: nowrap; justify-content: space-between; gap: .5em; }
}

@media (max-width: 600px) {
	.logo-lock .rb-logo img, .logo-lock .rb-logo-img { height: 42px; }
	.foot-grid { grid-template-columns: 1fr; }

	/* DELIBERATE DEVIATION (HANDOFF §5): the approved mockup's header row is
	   ~25px wider than a 375px viewport, so its Cart button is clipped off the
	   right edge. Same four actions, same order — the labels just wrap inside a
	   narrower button instead of overflowing. */
	.header-main { gap: 8px; }
	.header-actions { gap: 4px; min-width: 0; }
	.hdr-btn { min-width: 0; padding: .4em .25em; }
	.hdr-btn span:not(.cart-count) {
		font-size: .5rem; line-height: 1.15; text-align: center; max-width: 46px; white-space: normal;
	}
	.cart-count { right: 0; transform: translate(6px, -6px); }
}

@media (max-width: 480px) {
	.util { font-size: .7rem; }
	.util .util-right { gap: .4em .8em; }
	.badge-usa { font-size: .7rem; }
	.nav-mobile-tagline-main { display: none; }
	.nav-mobile-bar { padding: 8px 10px; }
}

@media (max-width: 430px) {
	.logo-lock .rb-logo img, .logo-lock .rb-logo-img { height: 36px; }
}

/* ===== print ===== */
@media print {
	.util, .topbar nav.primary, .header-actions, .rb-search, footer.site, .skip-link { display: none !important; }
	body { background: #fff; }
}

/* added by developer - can be removed by coding agent */

 .wc-block-components-product-sku span {
    display: block;
    white-space: nowrap;
 }
 .wc-block-components-product-sku{
    align-self: start;
	display: flex;
    gap: 10px;
 } 
 .woocommerce div.product div.images .flex-control-thumbs {
    overflow: hidden!important;
    zoom: 1!important;
    margin: 0!important;
    padding: 0!important;
    display: flex!important;
    gap: 10px!important;
    margin-top: 14px!important;
    flex-wrap: wrap!important;
}
.flex-control-thumbs li {
    width: 76px!important;
    height: 76px!important;
    border: 1.5px solid var(--line-2)!important;
    border-radius: 8px!important;
    background: #fff!important;
    padding: 6px!important;
    cursor: pointer!important;
    transition: .15s!important;
}
.flex-control-thumbs li img {
    width: 100%!important;
    height: 100%!important;
    object-fit: contain!important;
    /* WooCommerce core fades every inactive thumbnail to opacity .5 and only
       lifts the active one. The rules above restyle the LI but never touched the
       IMG, so that fade showed through — Chris, 2026-09-21. The approved page
       never varies opacity; it signals the active thumb with border colour
       alone, which is what the two rules below do. */
    opacity: 1!important;
}
.flex-control-thumbs li:hover,
.flex-control-thumbs li:has(img.flex-active) {
    border-color: var(--green-mid)!important;
}


/* ==========================================================================
   HOMEPAGE
   Ported from the approved mockup stylesheet (lines 806-1353). Home is the
   documented exception to the shared-template rule: it is a distinct
   composition, so its hero and carousels live in the theme while the bands
   between them are ordinary block content built from the home patterns.
   ========================================================================== */

/* ---- HERO ---- */
.rbc-hero {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: stretch;
}
/* .rbc-hero-bg removed — full-bleed JPG slides used instead */
.rbc-hero-track {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.rbc-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity .8s ease-in-out;
  pointer-events: none;
}
.rbc-hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide-link{display:block;position:absolute;inset:0;z-index:0;}
.rbc-hero-slide img.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

/* There is no backdrop layer and no product layer. Every slide is one whole
   image filling the hero, styled by `.rbc-hero-slide img.hero-bg-img` above.

   What used to live here: a `.rbc-hero-bg` scene, `.hero-product` cut-outs
   placed over it at capped sizes per breakpoint, and five filename-keyed
   `bottom` offsets to make each cut-out's feet meet the backdrop's ground —
   because each PNG carried a different amount of empty space beneath the
   product. None of that is needed when the ground is part of the photograph,
   and the reasoning is worth recording rather than rediscovering: the durable
   answer to "the product does not sit on the ground" was never CSS, it was
   artwork that already contains the ground. */
.rbc-hero-content {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  left: 80px;
  max-width: 480px;
  z-index: 4;
}
.rbc-hero-h1 {
  color: #fff;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 24px;
  text-shadow: 0 2px 12px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.9);
}
.rbc-hero-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.rbc-btn-green {
  background: var(--green-mid);
  color: #fff;
  border: none;
  padding: .75em 1.4em;
  font-size: .9rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: .02em;
}
.rbc-btn-green:hover { background: var(--green-deep); color: #fff; text-decoration: none; }
.rbc-btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: .7em 1.3em;
  font-size: .9rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: .02em;
}
.rbc-btn-outline:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.rbc-buy-hint {
  position: absolute;
  right: calc(6% + 50px);
  bottom: 20px;
  z-index: 6;
  margin: 0;
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: right;
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 1px 8px rgba(0,0,0,.5);
  pointer-events: none;
  transform-origin: right center;
  animation: rbcBuyHintPulse 1.8s ease-in-out infinite;
}
@keyframes rbcBuyHintPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .78; transform: scale(1.06); }
}
/* product overlay removed — full-bleed slides */
/* Hero nav arrows */
.rbc-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,.28);
  border: 0;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background .15s;
  line-height: 1;
  padding: 0;
}
.rbc-hero-nav:hover { background: rgba(0,0,0,.52); }
.rbc-hero-nav.prev { left: 16px; }
.rbc-hero-nav.next { right: 16px; }
/* Hero dots */
.rbc-hero-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.rbc-hero-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: .2s;
}
.rbc-hero-dot.active {
  background: #fff;
  transform: scale(1.25);
}
/* Made in America badge */
.rbc-made-usa {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
  line-height: 1.2;
}
/* Mobile hero scaling */
@media (max-width: 700px) {
  .rbc-hero { min-height: 56vw; max-height: 90vh; }
  .rbc-hero-content {
    left: 16px;
    right: 16px;
    max-width: calc(100% - 32px);
    top: 84px;
    bottom: auto;
    transform: none;
  }
  .rbc-hero-h1 { font-size: clamp(1.1rem, 5vw, 1.8rem); margin-bottom: 12px; }
  .rbc-btn-green { font-size: .78rem; padding: .55em 1em; }
  .rbc-buy-hint { right: calc(5% + 30px); bottom: 10px; font-size: .68rem; }
  .rbc-hero-nav { width: 32px; height: 32px; font-size: 1.2rem; }
  .rbc-hero-nav.prev { left: 8px; }
  .rbc-hero-nav.next { right: 8px; }
  .rbc-hero-dots { bottom: 10px; gap: 6px; }
  .rbc-hero-dot { width: 8px; height: 8px; }
  .rbc-made-usa { bottom: 10px; right: 10px; font-size: .5rem; }
  .rbc-made-usa img { width: 26px !important; height: 17px !important; }
}
/* also add a subtle dark scrim to left side for text legibility */

/* ---- CLIENT LOGOS BAND ---- */
.rbc-logos-band {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.rbc-logos-label {
  text-align: center;
  font-weight: 700;
  font-size: .85rem;
  color: var(--ink);
  margin: 0 0 16px;
}
.rbc-logos-carousel {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rbc-logos-nav {
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: .15s;
}
.rbc-logos-nav:hover { background: var(--wash); border-color: var(--green-mid); color: var(--green-deep); }
/* `hidden`, as the approved file has it, because the row is moved with
   `transform` rather than scrolled. A scroll container cannot go past its own
   end: the final page slides back to sit flush right, so a strip of fifteen
   shown six at a time ends on 10-15 instead of 13-15, and the same page lands
   in two different places depending on which way you arrived at it. A
   transform has no such limit and the pages stay discrete. */
.rbc-logos-viewport {
  flex: 1;
  overflow: hidden;
}
.rbc-logos-row {
  --logo-gap: 24px;
  /* How many logos fill the strip exactly. The ONLY number to change, and
     home.js reads it from here so the two cannot disagree. */
  --logos-per-view: 6;
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  transition: transform .4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .rbc-logos-row { transition: none; }
}
/* An arrow at the end of the strip does nothing, and should look like it. */
.rbc-logos-nav[disabled] { opacity: .35; cursor: default; }
.rbc-logos-nav[disabled]:hover { background: none; border-color: var(--line-2); color: var(--ink-soft); }
/* Sized FROM the viewport, not in fixed pixels.
   The approved file uses `flex: 0 0 auto` with a 90px floor, so every logo is a
   different width; a fixed width instead of that is tidier but no better here,
   because neither divides evenly into whatever the viewport happens to be. The
   leftover always shows as a sliver of the next logo, and paging past it clips
   one at each edge.
   N items plus N-1 gaps summing to exactly 100% leaves no remainder at all, so
   a page is precisely one viewport, nothing is ever half-shown, and home.js's
   whole-item step resolves to exactly N. The images keep their own proportions
   inside the cell via object-fit. */
.rbc-logo-item {
  flex: 0 0 calc(100% / var(--logos-per-view)
                 - var(--logo-gap) * (var(--logos-per-view) - 1) / var(--logos-per-view));
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
}
@media (max-width: 900px) { .rbc-logos-row { --logos-per-view: 4; } }
@media (max-width: 600px) { .rbc-logos-row { --logos-per-view: 3; } }
@media (max-width: 420px) { .rbc-logos-row { --logos-per-view: 2; } }
.rbc-logo-item img {
  height: 44px;
  width: auto;
  /* Was a flat 110px, which overflows the cell at the narrow breakpoints. */
  max-width: 100%;
  object-fit: contain;
  filter: saturate(.15) contrast(.85);
  opacity: .8;
  mix-blend-mode: multiply;
}
.rbc-logo-text {
  font-size: .75rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  border: 1px solid var(--line);
  padding: .3em .7em;
  border-radius: 4px;
  white-space: nowrap;
}

/* ---- CATEGORY TILES ---- */
.rbc-cats-band {
  padding: 28px 0;
  background: #f5f7f2;
  border-bottom: 1px solid var(--line);
}
.rbc-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.rbc-cat-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e5da;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 1px 4px rgba(28,35,24,.07);
  transition: box-shadow .15s, transform .15s;
}
.rbc-cat-tile:hover {
  box-shadow: 0 6px 24px rgba(28,35,24,.12);
  transform: translateY(-3px);
  text-decoration: none;
}
.rbc-cat-img {
  width: 100%;
  aspect-ratio: 900/540;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}
.rbc-cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rbc-cat-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid #eef1ea;
}
.rbc-cat-title {
  font-size: .92rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
  letter-spacing: .015em;
}
.rbc-cat-blue .rbc-cat-title { color: var(--blue-stream); }
.rbc-cat-dark .rbc-cat-title { color: var(--ink); }
.rbc-cat-wood .rbc-cat-title { color: #7a5b1f; }
.rbc-cat-sub {
  font-size: .84rem;
  color: var(--ink-soft);
  margin: 2px 0 8px;
}
.rbc-cat-cta {
  font-size: .82rem;
  font-weight: 700;
  color: var(--green-mid);
  letter-spacing: .01em;
}
@media(max-width:900px) { .rbc-cats-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px) { .rbc-cats-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* ---- BEST SELLERS CAROUSEL ---- */
.rbc-bestsellers-wrap {
  position: relative;
}
.rbc-bestsellers-viewport {
  overflow: hidden;
}
.rbc-bestsellers-track {
  display: flex;
  gap: 18px;
  transition: transform .35s ease;
}
.rbc-bestsellers-track > .card {
  flex: 0 0 calc(20% - 14.4px);
  min-width: 0;
}
.rbc-bs-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  box-shadow: var(--shadow);
  z-index: 2;
}
.rbc-bs-nav:hover { border-color: var(--green-mid); }
.rbc-bs-nav.prev { left: -14px; }
.rbc-bs-nav.next { right: -14px; }
@media(max-width:900px) { .rbc-bestsellers-track > .card { flex: 0 0 calc(50% - 9px); } }
@media(max-width:560px) {
  .rbc-bestsellers-track > .card { flex: 0 0 100%; }
  .rbc-bs-nav.prev { left: -6px; }
  .rbc-bs-nav.next { right: -6px; }
}

/* ---- VALUE PROPS ---- */
.rbc-values-band {
  background: #eef1e9;
  padding: 32px 0;
  border-bottom: 1px solid #d9e0d0;
}
.rbc-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.rbc-value-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 24px 8px 0;
  border-right: 1px solid #d0d9c7;
}
.rbc-value-item:last-child { border-right: 0; padding-right: 0; }
.rbc-value-item:not(:first-child) { padding-left: 24px; }
.rbc-value-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-deep);
}
.rbc-value-icon svg { width: 40px; height: 40px; }
.rbc-value-text-block { display: flex; flex-direction: column; gap: 3px; }
.rbc-value-title {
  font-size: .88rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
}
.rbc-value-desc {
  font-size: .82rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}
@media(max-width:860px) {
  .rbc-values-grid { grid-template-columns: repeat(2,1fr); }
  .rbc-value-item { border-right: 0; padding: 12px 0; border-bottom: 1px solid #d0d9c7; }
  .rbc-value-item:last-child { border-bottom: 0; }
  .rbc-value-item:not(:first-child) { padding-left: 0; }
}

/* ---- ABOUT / COMPANY BAND ---- */
.rbc-about-band {
  padding: 48px 0;
  background: #fff;
}
.rbc-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.rbc-about-img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--wash);
  min-height: 260px;
}
.rbc-about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 260px;
}
.rbc-about-copy h2 {
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0 0 12px;
}
.rbc-about-copy p {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.65;
  margin: 0 0 20px;
}
.rbc-stats-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.rbc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 12px 8px;
  border-right: 1px solid var(--line);
}
.rbc-stat:last-child { border-right: 0; }
.rbc-stat-ic { font-size: 1.4rem; margin-bottom: 4px; }
.rbc-stat strong { font-size: .95rem; font-weight: 800; color: var(--navy); display: block; }
.rbc-stat span { font-size: .75rem; color: var(--ink-soft); line-height: 1.4; }
@media(max-width:860px) { .rbc-about-grid { grid-template-columns: 1fr; } }
@media(max-width:600px) { .rbc-stats-row { grid-template-columns: 1fr; } .rbc-stat { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---- NEWSLETTER ---- */
.rbc-newsletter-band {
  background: var(--navy);
  padding: 20px 0;
}
.rbc-newsletter-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.rbc-newsletter-copy {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
}
/* Scoped to the copy block deliberately: the mockup's icon is a bare <div>,
   but as editable content it is a <p>, and `.rbc-newsletter-copy p` at (0,2,1)
   would otherwise shrink it to .82rem. */
.rbc-newsletter-copy .rbc-newsletter-icon { font-size: 2rem; margin: 0; line-height: 1; }
.rbc-newsletter-copy strong { font-size: 1rem; font-weight: 700; display: block; }
.rbc-newsletter-copy p { font-size: .82rem; margin: 2px 0 0; color: #b8c9e0; }
.rbc-newsletter-form {
  display: flex;
  gap: 0;
  flex: 0 0 auto;
  max-width: 440px;
  width: 100%;
}
.rbc-email-input {
  flex: 1;
  border: 0;
  padding: .7em 1.1em;
  font-size: .9rem;
  border-radius: 4px 0 0 4px;
  font-family: inherit;
  outline: none;
  color: var(--ink);
}
.rbc-signup-btn {
  background: var(--green-mid);
  color: #fff;
  border: 0;
  padding: .7em 1.3em;
  font-weight: 700;
  font-size: .85rem;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  letter-spacing: .04em;
  font-family: inherit;
}
.rbc-signup-btn:hover { background: var(--green-deep); }
@media(max-width:720px) {
  .rbc-newsletter-grid { flex-direction: column; align-items: flex-start; }
  .rbc-newsletter-form { max-width: 100%; }
}

/* Why Recycle's reason rows: a fixed thumbnail beside the copy, with a rule
   under each. Ported from the approved stylesheet declaration for declaration.
   These were missing entirely — the converter emitted `.media-row`, which is
   also undefined here, so every row fell back to bare flow: image above, text
   below, full width (Chris, 2026‑09‑15). The class lands on the block's <figure>
   for the image, so the size rule reaches through to the <img>. */
.why-recycle-row { display: flex; gap: 24px; align-items: flex-start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.why-recycle-row > .wp-block-group { flex: 1; }
.wp-block-image.why-recycle-img { flex-shrink: 0; margin: 0; }
.wp-block-image.why-recycle-img img {
	width: 170px; height: 120px; border-radius: 8px; object-fit: cover;
	display: block; box-shadow: var(--shadow);
}
@media (max-width: 640px) {
	.why-recycle-row { flex-direction: column; gap: 14px; }
	.wp-block-image.why-recycle-img img { width: 100%; height: 140px; }
}

/* --- blog ---------------------------------------------------------------- *
 * Ported from the approved stylesheet declaration for declaration.
 *
 * The mockup draws every post thumbnail as an emoji on a gradient, because it
 * had no media library. Chris (2026‑09‑15): "I am going to assume that icon …
 * is supposed to represent an image." So the templates render the featured
 * image, and the gradient is what shows when a post has none — the shape and
 * size stay exactly as designed either way. */
.blog-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.blog-cat-pill {
	display: inline-flex; align-items: center; background: var(--wash-2);
	border: 1px solid var(--line-2); border-radius: 20px; padding: .45em 1em;
	font-size: .82rem; font-weight: 600; color: var(--ink);
}
.blog-cat-pill:hover { background: var(--wash); text-decoration: none; }
.blog-cat-pill.active { background: var(--green-mid); border-color: var(--green-mid); color: #fff; }
.blog-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.blog-two-col { display: grid; grid-template-columns: 2.4fr 1fr; gap: 40px; align-items: start; }
.blog-also-like { margin-top: 48px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); }
.blog-also-like h2 { margin: 0 0 20px; font-size: 1.3rem; }
.blog-card {
	display: flex; gap: 16px; align-items: flex-start; background: #fff;
	border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; color: var(--ink);
}
.blog-card:hover { border-color: var(--green-mid); box-shadow: var(--shadow); text-decoration: none; }
.blog-thumb {
	flex-shrink: 0; width: 72px; height: 72px; border-radius: 8px; display: flex;
	align-items: center; justify-content: center; font-size: 1.7rem; overflow: hidden;
	background: linear-gradient(135deg, #4f7a24, #3f6b1f);
}
.blog-thumb-lg {
	width: 96px; height: 96px; border-radius: 10px; display: flex; align-items: center;
	justify-content: center; font-size: 2.4rem; margin-bottom: 16px; overflow: hidden;
	background: linear-gradient(135deg, #4f7a24, #3f6b1f);
}
.blog-thumb img, .blog-thumb-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The post's own image, at the top of an article — the design's `.blog-thumb-lg`
   is a 96px tile, which is a placeholder shape, not a lead image. */
/* The article's two closing actions. `.btn-row` is 8px from what precedes it;
   the design gives these 24px, because they follow body copy rather than a
   heading. */
.blog-post-actions { margin-top: 24px; }
/* "Related posts" — the mockup writes `style="margin-top:40px"` on this h2. */
.blog-related-head { margin-top: 40px; }
.blog-hero-img { margin: 0 0 20px; border-radius: 10px; overflow: hidden; }
.blog-hero-img img { width: 100%; height: auto; display: block; width: 96px;
    height: 96px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
  }
.blog-card-body h3 { margin: 2px 0 6px; font-size: 1.05rem; color: var(--ink); }
.blog-card-body p { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }
.blog-meta { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--green-deep); font-weight: 700; }
.blog-side-product { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.blog-side-product:last-child { border-bottom: 0; }
.blog-side-product:hover { color: var(--green-deep); text-decoration: none; }
.blog-side-product img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px; }
.blog-side-product span { font-size: .85rem; line-height: 1.3; }
/* The sidebar's link rows: `.summary-box .row` is a cart line — space-between,
   which pushes a single link nowhere useful. */
.blog-side .row { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.blog-side .row:last-child { border-bottom: 0; }
.blog-side + .blog-side { margin-top: 20px; }
@media (max-width: 860px) {
	.blog-two-col { grid-template-columns: 1fr; gap: 28px; }
	.blog-list { grid-template-columns: 1fr; }
}

/* Submit an Order — a stack of label/detail rows, ported from the approved
   stylesheet declaration for declaration. Adding them here is also what makes
   the converter KEEP these classes: it preserves any class theme.css styles, so
   an unstyled one is silently flattened. Without these the page's chips came out
   as a run-on paragraph. */
.submit-order-row {
	display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; padding: 28px 0;
	border-bottom: 1px solid var(--line); align-items: start;
}
/* The row heading is 1.15rem, not the global h2's 1.7rem — these are labels for
   a list of methods, not section titles. Missing this rendered them at 27px
   against the design's 18px, on every row of the page. */
.so-left h2 { font-size: 1.15rem; margin: 0 0 .3em; }
.so-right { font-size: .92rem; }
.so-sub { font-size: .88rem; color: var(--ink-soft); margin: 0; }
.so-contact-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .9rem; align-items: start; }
.so-label { color: var(--ink-soft); font-weight: 600; white-space: nowrap; padding-top: 1px; }
.so-qualify-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.so-steps { margin: .3em 0 0 1.2em; padding: 0; font-size: .9rem; color: var(--ink-soft); }
.so-steps li { margin-bottom: 6px; line-height: 1.45; }
.so-steps li b { color: var(--ink); }
.so-cta-band {
	margin-top: 32px; background: var(--wash); border: 1px solid var(--line-2);
	border-radius: var(--radius); padding: 22px 24px; display: flex;
	align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
/* `.so-left` carries no rule in the approved stylesheet either — it is a hook
   for the grid's first column. Declared so the converter keeps the class and the
   markup still reads the way the design does. */
.so-left { min-width: 0; }
@media (max-width: 960px) {
	.submit-order-row { grid-template-columns: 1fr; gap: 20px; }
}

/* --- image treatments ---------------------------------------------------- *
 *
 * The approved pages size every image inline. The converter maps each treatment
 * to one of these classes (IMG_SHAPES in python/build_content_pages.py) and
 * REFUSES to build when it meets one that is not mapped — an unsized image
 * renders at its natural width, which is how recycling-facts ended up with
 * 900px-wide photos where the design says 420.
 *
 * The class lands on the block's <figure>, so each rule reaches through to the
 * <img>. Values are the mockup's own, declaration for declaration. */
.wp-block-image.img-fact img {
	width: 100%; max-width: 420px; height: 220px; object-fit: cover;
	border-radius: 8px; display: block; margin-bottom: 14px; box-shadow: var(--shadow);
}
.wp-block-image.img-fact { margin: 0; }
.wp-block-image.img-cover img { width: 100%; height: 220px; object-fit: cover; display: block; }
.wp-block-image.img-banner img { width: 100%; display: block; object-fit: cover; aspect-ratio: 3.42 / 1; }
.wp-block-image.img-fill img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-block-image.img-plain img { object-fit: cover; }
.wp-block-image.img-icon img { height: 58px; width: auto; margin-bottom: 16px; }
.wp-block-image.img-logo img { height: 70px; width: auto; max-width: 100px; object-fit: contain; border-radius: 6px; }
.wp-block-image.img-logo-sm img { height: 70px; width: auto; max-width: 90px; object-fit: contain; border-radius: 6px; }
.wp-block-image.img-180 img { width: 180px; border-radius: 8px; box-shadow: var(--shadow); margin-bottom: 16px; }
.wp-block-image.img-round img { width: 100%; border-radius: 8px; display: block; }
.wp-block-image.img-badge img { height: 34px; margin-top: 10px; display: inline-block; }
.wp-block-image.img-flag img { width: 36px; height: 24px; border: 1px solid rgba(255, 255, 255, .4); }

/* --- the approved design's own type scale ------------------------------- *
 *
 * One class per size the approved pages actually use, named in hundredths of a
 * rem. `python/build_content_pages.py` emits these from each element's inline
 * font-size and REFUSES to emit a size not defined here, so a new size on a
 * page has to be added below — deliberately, instead of being rounded to a
 * neighbour and looking almost right.
 *
 * The six semantic steps (.fs-xs … .fs-xxl) near the top of this file used to
 * be the whole scale, and the converter snapped to the nearest one. The design
 * uses 26 distinct sizes, so .98rem rendered at .95 and 1.02rem at 1.05: half a
 * pixel each, across hundreds of elements, on every page. Those names stay for
 * hand-written templates and patterns.
 *
 * TWO THINGS MATTER HERE, and both are load-bearing:
 *   - the selectors are DOUBLED (`.fs-98.fs-98`), which makes them 0,2,0 —
 *     enough to outrank a component rule like `.vmod h3` or `.vmod p` that
 *     styles an element by its container;
 *   - this block sits LAST in the file, so a 0,2,0 tie resolves in its favour.
 * Move it up the file, or un-double a selector, and card headings quietly go
 * back to the container's size. */
.fs-56.fs-56 { font-size: .56rem; }
.fs-72.fs-72 { font-size: .72rem; }
.fs-75.fs-75 { font-size: .75rem; }
.fs-76.fs-76 { font-size: .76rem; }
.fs-78.fs-78 { font-size: .78rem; }
.fs-80.fs-80 { font-size: .80rem; }
.fs-82.fs-82 { font-size: .82rem; }
.fs-84.fs-84 { font-size: .84rem; }
.fs-85.fs-85 { font-size: .85rem; }
.fs-86.fs-86 { font-size: .86rem; }
.fs-88.fs-88 { font-size: .88rem; }
.fs-90.fs-90 { font-size: .90rem; }
.fs-92.fs-92 { font-size: .92rem; }
.fs-93.fs-93 { font-size: .93rem; }
.fs-95.fs-95 { font-size: .95rem; }
.fs-98.fs-98 { font-size: .98rem; }
.fs-102.fs-102 { font-size: 1.02rem; }
.fs-105.fs-105 { font-size: 1.05rem; }
.fs-110.fs-110 { font-size: 1.10rem; }
.fs-115.fs-115 { font-size: 1.15rem; }
.fs-130.fs-130 { font-size: 1.30rem; }
.fs-140.fs-140 { font-size: 1.40rem; }
.fs-180.fs-180 { font-size: 1.80rem; }
.fs-190.fs-190 { font-size: 1.90rem; }
.fs-200.fs-200 { font-size: 2rem; }
.fs-250.fs-250 { font-size: 2.5rem; }