/* Depot/Services — rebuilt to match CBM Depot.dc.html / CBM Services.dc.html
   exactly (see page-templates/template-directory.php's header comment).
   Sponsor row + sidebar + main grid reuse Rent Vehicles' proven .cbm-rv-*
   layout classes (assets/css/rent-vehicles.css) — pixel-identical values in
   both real sources — rather than duplicating them under a new name. */

.cbm-directory-notify-inline { display: inline; white-space: nowrap; margin: 0 2px 0 3px; cursor: pointer; line-height: 22.4px; }
.cbm-directory-notify-inline input { cursor: pointer; width: 12px; height: 12px; margin: 0 4px 0 0; vertical-align: middle; }
.cbm-directory-notify-inline span { font-size: 11px; line-height: 22.4px; vertical-align: middle; font-weight: 700; color: var(--cbm-red); text-transform: uppercase; letter-spacing: 0.03em; }

/* Reuses the MHP2 search box's visual treatment (solid red button + red-
   bordered input) directly via its own classes, per Jonathan — this is a
   different page context (a plain white page, not a photo panel) so only
   position/spacing needs overriding here; .cbm-mhp2-search's own
   margin-top:auto/padding-top:8px were tuned for sitting at the bottom of
   a flex-column panel, not relevant standalone on this page. Combined
   selector (not a single class) so it reliably beats .cbm-mhp2-search's
   own rule regardless of stylesheet load order. */
.cbm-directory-search-form.cbm-mhp2-search { position: relative; margin: 20px 0 24px; margin-top: 0; padding-top: 0; }
.cbm-directory-suggestions {
	position: absolute; top: 100%; left: 0; margin-top: 4px; width: 280px; z-index: 10;
	background: #fff; border: 1px solid var(--cbm-hairline); border-radius: 2px; box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	display: flex; flex-direction: column;
}
.cbm-directory-suggestions a { padding: 8px 12px; font-size: 13px; color: var(--cbm-near-black-alt); border-bottom: 1px solid var(--cbm-hairline); }
.cbm-directory-suggestions a:last-child { border-bottom: none; }
.cbm-directory-suggestions a:hover { background: var(--cbm-fill-light); }

.cbm-directory-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--cbm-gap); }
@media (max-width: 1024px) { .cbm-directory-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cbm-directory-grid { grid-template-columns: 1fr; } }
.cbm-directory-card { display: block; border: 1px solid var(--cbm-hairline); border-radius: var(--cbm-radius); padding: 16px; background: #fff; color: var(--cbm-near-black-alt); }
/* Logo stacked ABOVE the title (column-reverse - the markup has the title first), not beside it: in the
   ~175px cards beside the ad box a 96px logo left ~35px for the title, so long words ran over the
   logo (RHA card, Jonathan 2026-09-28). */
.cbm-directory-card__head { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
.cbm-directory-card__title { display: block; min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-family: var(--cbm-font-body); font-weight: 600; font-size: 16px; }
/* max-height + max-width + object-fit:contain (not just width:auto) so a
   supplier logo of any shape — square, wide wordmark, tall — scales to fit
   this box without ever being stretched/cropped, whichever dimension turns
   out to be the tighter constraint for that particular logo. */
.cbm-directory-card__logo { flex-shrink: 0; max-height: 36px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.cbm-directory-card__excerpt { display: block; font-size: 12px; color: var(--cbm-muted-grey); margin-top: 6px; }
/* "Dead" cards (no dedicated page bought) — not a link at all (see
   cbm_render_directory_card() in inc/template-tags.php), just a name and
   address. Previously identical in appearance to a live, clickable card
   (same bordered box, same bold title) with nothing to tell them apart -
   Jonathan, 2026-09-30: "none of them are live" after clicking several in a
   row that turned out to have no page. Dropped the border/box look and
   muted the title so it reads as plain reference text, not a button. */
.cbm-directory-card--dead { cursor: default; border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; }
.cbm-directory-card--dead .cbm-directory-card__title { color: var(--cbm-muted-grey); font-weight: 500; }
.cbm-directory-card__address { display: block; font-size: 12px; color: var(--cbm-muted-grey); margin-top: 6px; white-space: pre-line; }

.cbm-directory-detail__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cbm-directory-detail__logo { flex-shrink: 0; max-height: 56px; max-width: 200px; width: auto; height: auto; object-fit: contain; }

/* Two standard dedicated-page layouts — same three blocks (gallery,
   description, contacts), just placed differently via grid-template-areas.
   A shared class does the column/gap/mobile-stacking work; each layout
   variant only needs to redeclare grid-template-areas. */
.cbm-directory-detail__body { display: grid; gap: 24px; margin-top: 24px; grid-template-columns: 2fr 1fr; }
.cbm-directory-detail__body--standard-a { grid-template-areas: "gallery gallery" "description contacts"; }
.cbm-directory-detail__body--standard-b { grid-template-areas: "description gallery" "description contacts"; }
@media (max-width: 780px) {
	.cbm-directory-detail__body { grid-template-columns: 1fr; grid-template-areas: "gallery" "description" "contacts" !important; }
}

.cbm-dd-gallery { grid-area: gallery; }
.cbm-dd-description { grid-area: description; }
.cbm-dd-contacts { grid-area: contacts; align-self: start; border: 1px solid var(--cbm-hairline); border-radius: var(--cbm-radius); padding: 16px; background: var(--cbm-fill-light); }
/* Business address — added 2026-08-30 alongside the basic-supplier-listing
   population work: the dedicated page previously showed name/logo/
   description/contacts but never the address itself, even though the grid
   preview card (cbm_render_directory_card()'s "dead" box) already did. */
.cbm-dd-address { font-size: 13px; color: var(--cbm-body-grey); margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--cbm-hairline); white-space: pre-line; }

.cbm-dd-gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
@media (max-width: 480px) { .cbm-dd-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
.cbm-dd-gallery__img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--cbm-radius); display: block; }
.cbm-dd-video { width: 100%; border-radius: var(--cbm-radius); margin-top: 12px; display: block; }
.cbm-dd-video-figure { margin: 0; }
.cbm-dd-video-caption { margin: 6px 0 0; font-size: 13px; color: var(--cbm-body-grey); }

.cbm-dd-contact { padding: 10px 0; border-bottom: 1px solid var(--cbm-hairline); display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cbm-dd-contact:last-of-type { border-bottom: none; }
.cbm-dd-contact__role { color: var(--cbm-body-grey); font-size: 12px; }

.cbm-dd-inquiry-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.cbm-dd-inquiry-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; }
.cbm-dd-inquiry-form input, .cbm-dd-inquiry-form textarea {
	padding: 8px 10px; border: 1px solid var(--cbm-hairline); border-radius: 2px; font-size: 13px; font-family: var(--cbm-font-body);
}

/* Basic-listing placeholders — see directory-detail.php's $basic_listing.
   The empty Products & Services / Images sections show a visible, greyed
   label rather than sitting blank, and the contact card/Contact Me form
   render disabled rather than live — per the user (2026-08-30): a stranger
   shouldn't be able to message or call a business that hasn't confirmed
   its own listing yet, and showing the empty structure (not just hiding
   it) makes the case for upgrading to a full listing more visible, not
   less — deliberately "grim" is doing real work here. */
.cbm-dd-gallery--placeholder, .cbm-dd-description--placeholder {
	border: 1px dashed var(--cbm-hairline); border-radius: var(--cbm-radius); background: var(--cbm-fill-lighter);
	padding: 18px; display: flex; align-items: center; justify-content: center; min-height: 56px;
}
.cbm-dd-placeholder-label { color: var(--cbm-muted-grey); font-size: 13px; font-style: italic; margin: 0; text-align: center; }
h2.cbm-dd-placeholder-label { font-style: normal; text-align: left; font-family: var(--cbm-font-body); font-size: 15px; margin: 0 0 10px; }

.cbm-dd-contact--disabled { color: var(--cbm-muted-grey); }
.cbm-dd-contact--disabled strong { color: var(--cbm-muted-grey); }

.cbm-dd-inquiry-form--disabled { opacity: 0.55; }
.cbm-dd-inquiry-form--disabled input, .cbm-dd-inquiry-form--disabled textarea {
	padding: 8px 10px; border: 1px solid var(--cbm-hairline); border-radius: 2px; font-size: 13px; font-family: var(--cbm-font-body);
	background: var(--cbm-fill-light); cursor: not-allowed;
}
.cbm-dd-inquiry-form--disabled label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.cbm-dd-inquiry-form--disabled button { cursor: not-allowed; filter: grayscale(0.6); opacity: 0.7; }
.cbm-dd-unverified-note { font-size: 11.5px; color: var(--cbm-muted-grey); font-style: italic; margin: 10px 0 0; }

/* Supplier on-boarding form — same field styling as .cbm-register__card
   (funnel.css) reproduced here rather than reused directly, since that
   class also carries a fixed 440px card width/border that doesn't suit a
   long multi-section form; this form additionally needs url/file inputs
   and checkboxes, which .cbm-register__card never had to style. */
.cbm-onboarding-intro { color: var(--cbm-body-grey); font-size: 14px; margin: 4px 0 24px; max-width: 640px; }
.cbm-onboarding-form { display: flex; flex-direction: column; gap: 14px; }
.cbm-onboarding-form h2 { font-family: var(--cbm-font-body); font-size: 17px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--cbm-hairline); }
.cbm-onboarding-form > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.cbm-onboarding-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; }
.cbm-onboarding-form input[type="text"],
.cbm-onboarding-form input[type="email"],
.cbm-onboarding-form input[type="tel"],
.cbm-onboarding-form input[type="url"],
.cbm-onboarding-form textarea {
	padding: 10px 12px; border: 1px solid var(--cbm-hairline); border-radius: 2px; font-size: 14px; font-weight: 400; font-family: var(--cbm-font-body);
}
.cbm-onboarding-form input[type="file"] { font-size: 13px; font-weight: 400; }
.cbm-form-hint { font-size: 12px; color: var(--cbm-body-grey); margin: -6px 0 0; }

.cbm-onboarding-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
@media (max-width: 640px) { .cbm-onboarding-categories { grid-template-columns: 1fr; } }
.cbm-onboarding-checkbox { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 400; font-size: 13px; }
.cbm-onboarding-checkbox input { width: 16px; height: 16px; }

.cbm-onboarding-contact {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px;
	padding: 14px; border: 1px solid var(--cbm-hairline); border-radius: var(--cbm-radius); background: var(--cbm-fill-light);
}
.cbm-onboarding-contact + .cbm-onboarding-contact { margin-top: 10px; }
@media (max-width: 640px) { .cbm-onboarding-contact { grid-template-columns: 1fr; } }
.cbm-onboarding-contact__remove {
	grid-column: 1 / -1; justify-self: end; background: none; border: none; padding: 0;
	font-size: 12px; font-weight: 600; color: var(--cbm-body-grey); cursor: pointer; text-decoration: underline;
}
.cbm-onboarding-contact__remove:hover { color: var(--cbm-red); }
.cbm-onboarding-add-contact {
	align-self: flex-start; background: none; border: 1px dashed var(--cbm-hairline); border-radius: 2px;
	padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--cbm-near-black); cursor: pointer;
}
.cbm-onboarding-add-contact:hover { border-color: var(--cbm-red); color: var(--cbm-red); }

/* Category browse — a compact dropdown, not a tile grid (rebuilt
   2026-09-06: at 29 real categories post-Depot-merge, a full tile grid
   was judged too big for the page — see cbm_default_nav_items() commit
   notes / project memory cbm_depot_retired_five_categories). Real merged
   counts via cbm_directory_category_counts() in inc/directory.php.
   Hub pages only (Services), not the pre-filtered sub-pages, not shown
   alongside an active free-text search. */
.cbm-dir-cat-select-form { display: flex; align-items: center; gap: 10px; margin: 4px 0 28px; flex-wrap: wrap; }
.cbm-dir-cat-select-label { font-family: var(--cbm-font-body); font-weight: 600; font-size: 13px; color: var(--cbm-near-black-alt); white-space: nowrap; }
.cbm-dir-cat-select {
	flex: 0 1 320px; padding: 8px 32px 8px 12px; border: 1px solid var(--cbm-hairline); border-radius: var(--cbm-radius);
	font-size: 13px; font-family: var(--cbm-font-body); background: #fff; color: var(--cbm-near-black-alt);
	appearance: none; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23454b54' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 9px;
}
.cbm-dir-cat-select:hover { border-color: var(--cbm-red); }
@media (max-width: 640px) {
	.cbm-dir-cat-select-form { flex-direction: column; align-items: stretch; }
	.cbm-dir-cat-select { flex: 1 1 auto; }
}

/* Recently joined — rewards a new sign-up with real visibility right on
   the hub page rather than only ever appearing buried in the full grid
   below. Reuses .cbm-directory-grid/.cbm-directory-card as-is; the
   --compact modifier just caps it at 4 columns so 8 items reads as one
   shelf, not another wall of cards identical to the main grid. */
.cbm-dir-recent { margin: 0 0 32px; }
.cbm-dir-recent__heading { font-family: var(--cbm-font-body); font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.cbm-directory-grid--compact { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .cbm-directory-grid--compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cbm-directory-grid--compact { grid-template-columns: 1fr; } }

/* "How to Make the Most of CBWMedia to Grow Your Business" — the
   supplier-facing sales pitch Jonathan asked to add directly to this
   page (2026-09-06): "costs us nothing to advertise ourselves there, but
   could generate whole new income streams." Every stat here is reused
   from the Media Pack (GA-confirmed Aug 2026) — keep both in sync if
   either changes rather than letting the numbers drift apart. */
.cbm-cbwmedia-pitch { background: #1a1a1a; color: #fff; border-radius: var(--cbm-radius); padding: 28px 30px; margin: 8px 0 32px; }
.cbm-cbwmedia-pitch__head h2 { font-family: var(--cbm-font-heading); font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.cbm-cbwmedia-pitch__head p { margin: 0 0 20px; color: rgba(255,255,255,0.82); font-size: 14px; max-width: 68ch; }
.cbm-cbwmedia-pitch__stats { display: flex; flex-wrap: wrap; gap: 1px; background: rgba(255,255,255,0.15); border-radius: var(--cbm-radius); overflow: hidden; margin: 0 0 20px; }
.cbm-cbwmedia-pitch__stat { flex: 1 1 150px; background: rgba(255,255,255,0.06); padding: 14px 16px; text-align: center; }
.cbm-cbwmedia-pitch__num { display: block; font-family: var(--cbm-font-heading); font-weight: 800; font-size: 24px; color: #ff5c72; }
.cbm-cbwmedia-pitch__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); margin-top: 4px; }
.cbm-cbwmedia-pitch__body { font-size: 14px; color: rgba(255,255,255,0.9); max-width: 72ch; margin: 0 0 20px; }
.cbm-cbwmedia-pitch__cta {
	display: inline-flex; align-items: center; gap: 6px; background: var(--cbm-red); color: #fff;
	font-family: var(--cbm-font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase;
	padding: 12px 22px; border-radius: 4px; text-decoration: none; transition: background 0.15s;
}
.cbm-cbwmedia-pitch__cta:hover { background: var(--cbm-red-hover); color: #fff; }

/* The 9-channel opportunity grid (2026-09-06) — real CBWMedia channel
   list from Jonathan, rendered as compact cards rather than a plain
   bullet list so each one reads as its own distinct asset. */
.cbm-cbwmedia-pitch__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 22px;
}
@media (max-width: 900px) { .cbm-cbwmedia-pitch__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cbm-cbwmedia-pitch__grid { grid-template-columns: 1fr; } }
.cbm-cbwmedia-pitch__card {
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--cbm-radius);
	padding: 14px 16px;
}
.cbm-cbwmedia-pitch__card-title {
	font-family: var(--cbm-font-body); font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 4px;
}
.cbm-cbwmedia-pitch__card-body { font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,0.78); }

/* The free-coverage callout (2026-09-06) — deliberately distinct from the
   paid options above it (its own border colour, not the same muted card
   style), since "free, no budget required" is the whole point of it and
   it should read as its own kind of offer, not just another list item. */
.cbm-cbwmedia-pitch__free {
	border: 1px dashed rgba(255,255,255,0.35); border-radius: var(--cbm-radius);
	padding: 14px 16px; margin: 0 0 20px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.85);
}
.cbm-cbwmedia-pitch__free strong { display: block; color: #fff; font-family: var(--cbm-font-body); font-size: 14px; margin-bottom: 4px; }

/* Second Contact Me/Visit Website prompt at the end of the page content -
   the same tracked buttons, repeated, so an operator who's read the whole
   page doesn't have to scroll back up to act (Jonathan, 2026-09-26: "enable
   easy contact probably at more than one point on the page"). Deliberately
   the same mechanism as the one at the top, not a second different contact
   UI - Jonathan removed a duplicate inline form for exactly that reason on
   2026-09-02 (see template-parts/directory-detail.php). */
.cbm-dd-second-cta {
	margin-top: 40px;
	padding-top: 0;
	text-align: center;
}
.cbm-dd-second-cta__lead {
	font-size: 14px;
	color: var(--cbm-body-grey);
	margin: 0 0 12px;
}
.cbm-dd-style-editorial .cbm-dd-second-cta .cbm-supplier-actions,
.cbm-dd-style-hero .cbm-dd-second-cta .cbm-supplier-actions {
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	margin-left: 0;
	width: auto;
	display: inline-flex;
	background: none;
	border: none;
}
/* Offer note beside CONTACT ME, not above it, so both red buttons line up
   (Jonathan, 2026-10-06, on the supplier preview pages). */
.cbm-dd-second-cta .cbm-supplier-actions__item:has(> .cbm-supplier-actions__incentive) {
	display: grid;
	grid-template-columns: 220px 220px;
	column-gap: 20px;
	max-width: none;
	align-items: start;
}
.cbm-dd-second-cta .cbm-supplier-actions__incentive { grid-column: 1; grid-row: 1 / span 2; margin: 0 !important; }
.cbm-dd-second-cta .cbm-supplier-actions__item:has(> .cbm-supplier-actions__incentive) > form,
.cbm-dd-second-cta .cbm-supplier-actions__item:has(> .cbm-supplier-actions__incentive) > button { grid-column: 2; grid-row: 1; justify-self: center; }
.cbm-dd-second-cta .cbm-supplier-actions__item:has(> .cbm-supplier-actions__incentive) > .cbm-supplier-actions__caption,
.cbm-dd-second-cta .cbm-supplier-actions__item:has(> .cbm-supplier-actions__incentive) > .cbm-form-error { grid-column: 2; grid-row: 2; }
@media (max-width: 760px) {
	.cbm-dd-second-cta .cbm-supplier-actions__item:has(> .cbm-supplier-actions__incentive) { grid-template-columns: 1fr; row-gap: 10px; }
	.cbm-dd-second-cta .cbm-supplier-actions__incentive,
	.cbm-dd-second-cta .cbm-supplier-actions__item:has(> .cbm-supplier-actions__incentive) > * { grid-column: 1; grid-row: auto; }
}

/* Page-style variants (page_style meta, cbm-core/includes/directory-fields.php) -
   Bold and Editorial override the Classic look set in components.css; this
   file loads after that one so these win on equal specificity without extra
   selector weight (Jonathan, 2026-09-26: "a range of different design
   styles... otherwise they'll all look the same"). Classic (undeclared here)
   is the untouched pre-existing look. */
.cbm-dd-style-bold .cbm-directory-detail__body {
	border-top: 3px solid var(--cbm-red);
	padding-top: 28px;
}
body.single-workshop_listing .cbm-dd-style-bold .cbm-supplier-actions,
body.single-service_listing .cbm-dd-style-bold .cbm-supplier-actions,
.cbm-dd-style-bold .cbm-dd-second-cta .cbm-supplier-actions {
	background: #fdf4f2;
	border: 1px solid #f3c9c2;
	border-left: 4px solid var(--cbm-red);
}
.cbm-dd-style-bold .cbm-dd-description p:first-of-type {
	font-weight: 600;
}
.cbm-dd-style-bold .cbm-dd-contacts {
	border-top: 3px solid var(--cbm-red);
}

/* Superseded 2026-09-27 by the real sidebar-based Editorial layout below -
   this used to style a full-width horizontal contact bar with top/bottom
   divider lines, an earlier discarded design. Left dead here for a day and
   caused a real bug (its border-top/border-bottom, being more specific,
   silently overrode the sidebar's own border:none - Jonathan: "still got
   two thin lines visible"). Removed entirely, not just its borders, since
   nothing in this block is used by the current markup. */

/* Editorial page style - real magazine-article layout (Jonathan, 2026-09-26:
   "Page should probably look like an interesting magazine article. Title,
   text, picture with text wrapping round. Margin on the right for contact
   buttons"). Two-column: main column (article text with the first photo
   floated and wrapped, per the text-wrap-around-fixed-element technique -
   an invisible shape-outside float controls the exclusion zone, a
   separately-positioned visible box holds the actual image) + a sticky
   right-hand sidebar carrying the Contact Me/Visit Website buttons instead
   of the top boxed card the other two styles use. See
   template-parts/directory-detail.php's $page_style === 'editorial' branch. */
/* Spans the FULL outer container width (matching the sitewide header row's
   own left AND right edges - Jonathan, 2026-09-26: "Contact me and view
   website are now away from the right margin") via a 3-column grid: the
   article text column is capped to a comfortable reading width, a flexible
   spacer absorbs the slack, and the sidebar sits at the true right margin. */
.cbm-dd-editorial {
	display: grid;
	grid-template-columns: 1fr 260px;
	gap: 40px;
	margin-top: 0;
	align-items: start;
}

.cbm-dd-editorial__main { display: flow-root; }
.cbm-dd-editorial__sidebar {
	position: sticky;
	top: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
/* .cbm-dd-style-editorial prefixed onto both rules below purely for CSS
   specificity (3 classes beats the Classic grey-card rule's 2 classes +
   body element, which otherwise still wins and silently reintroduces its
   border - this exact bug happened twice in one day). */
.cbm-dd-style-editorial .cbm-dd-editorial__sidebar .cbm-supplier-actions {
	width: 100%;
	margin: 0;
	padding: 0;
	align-items: stretch;
	background: none;
	border: none;
	border-radius: 0;
}
.cbm-dd-editorial__sidebar .cbm-supplier-actions__item { max-width: none; align-items: stretch; text-align: left; }
.cbm-dd-editorial__sidebar .cbm-supplier-actions__btn { text-align: center; }
.cbm-dd-editorial__wrap {
	display: flow-root;
	position: relative;
}
.cbm-dd-editorial__float {
	float: right;
	width: calc(320px + 2em);
	height: calc(3 * 1.6em + 260px);
	shape-outside: inset(calc(2 * 1.6em) 0 0 0);
}
.cbm-dd-editorial__img {
	position: absolute;
	top: calc(3 * 1.6em);
	right: 0;
	width: 320px;
	max-width: 100%;
	height: 240px;
}
.cbm-dd-editorial__wrap--b {
	/* Second large wrapped image, floats the opposite side for rhythm -
	   see cbm-dd-editorial__wrap's <?php if ( $cbm_dd_ed_part2 ) : ?> block. */
	margin-top: 24px;
}
.cbm-dd-editorial__float--b {
	float: left;
}
.cbm-dd-editorial__img--b {
	left: 0;
	right: auto;
}
.cbm-dd-editorial__img-el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--cbm-radius);
	border: 1px solid var(--cbm-hairline);
	display: block;
}
/* A cut-out image (transparent PNG, file name contains "-cutout") sits free on
   the page: whole image shown, no border or rounded box (CBWMedia magazines, 18 Oct) */
.cbm-dd-editorial__img-el[src*="-cutout"] {
	object-fit: contain;
	border: 0;
	border-radius: 0;
	position: relative;
	top: -24px; /* sits level with the text beside it (Jonathan, 18 Oct) */
}
.cbm-dd-editorial__text p { line-height: 1.6; }
.cbm-dd-editorial__text p:first-of-type {
	font-size: 18px;
	line-height: 1.6;
	/* The lead sentence acts like a strapline (drew the eye at 18px already) -
	   Jonathan, 2026-09-27, on Navaho: "their name is dark, but the title
	   sentence is light... I'd make the first sentence darker" - so it should
	   read as part of the heading treatment, not recede with the rest of the
	   body copy. */
	color: var(--cbm-near-black-alt);
}
/* Chapter labels (a "cbm-kicker" paragraph placed just above an H2), matching the
   manufacturer pages' red chapter kickers - first used on CBWMedia, 2026-10-16. */
.cbm-dd-editorial__text p.cbm-kicker {
	margin: 28px 0 4px; font-size: 12px; line-height: 1.3; font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--cbm-red);
}
.cbm-dd-editorial__text p.cbm-kicker + h2 { margin-top: 0; }
/* Lists sit beside a wrapped photo as a block, rather than their last line slipping under it */
.cbm-dd-editorial__text ul { overflow: hidden; }
/* Full-width photo in the body copy (image block with class "cbm-wide-photo") - starts below any
   wrapped photo rather than sliding under it. First used on CBWMedia, 2026-10-16. */
.cbm-dd-editorial__text .cbm-wide-photo { clear: both; margin: 28px 0; }
.cbm-dd-editorial__text .cbm-wide-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--cbm-hairline); border-radius: var(--cbm-radius); }
.cbm-dd-editorial__text .cbm-wide-photo figcaption { margin-top: 6px; font-size: 12px; color: var(--cbm-muted-grey); }
.cbm-dd-editorial__more {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
	margin-bottom: 24px;
}
.cbm-dd-editorial .cbm-dd-address {
	border-bottom: none;
	padding-bottom: 0;
}
.cbm-dd-editorial__more-img {
	width: 180px;
	height: 120px;
	object-fit: cover;
	border-radius: var(--cbm-radius);
	border: 1px solid var(--cbm-hairline);
}
.cbm-dd-editorial__contacts {
	margin: 0;
	border: none;
	background: none;
	padding: 20px 0 0;
}
.cbm-dd-style-editorial .cbm-dd-second-cta {
	max-width: none;
}

@media (max-width: 780px) {
	.cbm-dd-editorial { grid-template-columns: 1fr; max-width: none; }
	.cbm-dd-style-editorial .cbm-dd-second-cta { max-width: none; }
	.cbm-dd-editorial__sidebar { position: static; }
	.cbm-dd-editorial__float { float: none; width: 100%; height: auto; shape-outside: none; }
	.cbm-dd-editorial__img { position: static; width: 100%; margin-bottom: 16px; }
}


/* Hero Feature page style - full-bleed photo with an overlaid opening line
   and an optional image-with-caption callout box, per Jonathan's magazine
   references (2026-09-27): "a background image, overlaid successfully with
   more images and text in boxes... intense colour contrast and light".
   The rest of the article continues below in normal flow - this is a
   striking opener, not a container for the whole piece. */
.cbm-dd-hero {
	position: relative;
	min-height: 480px;
	border-radius: var(--cbm-radius);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	margin-top: 8px;
	background: var(--cbm-charcoal, #1a1a1a);
}
.cbm-dd-hero__bg {
	position: absolute;
	inset: 0;
}
.cbm-dd-hero__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cbm-dd-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.88) 100%);
	pointer-events: none;
}
.cbm-dd-hero__panel {
	position: relative;
	z-index: 1;
	color: #fff;
	padding: 40px;
	max-width: 620px;
}
.cbm-dd-hero--panel-top {
	align-items: flex-start;
}
.cbm-dd-hero--panel-top .cbm-dd-hero__panel {
	/* Leave room for the top-right image callout (200px + 28px + 28px) so a
	   top-positioned panel never overlaps it - see cbm_supplier_page... 2026-09-27. */
	max-width: min(620px, calc(100% - 260px));
}
.cbm-dd-hero--panel-top::after {
	background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 45%);
}
.cbm-dd-hero--no-panel::after {
	/* No overlay text at all - Jonathan, 2026-09-27: some photos have
	   nowhere text will sit cleanly, so let the photo show undarkened. */
	display: none;
}
.cbm-dd-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
	font-weight: 700;
	color: var(--cbm-red);
	background: #fff;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 2px;
	margin: 0 0 16px;
}
.cbm-dd-hero__headline {
	font-family: var(--cbm-font-heading);
	font-size: 32px;
	line-height: 1.15;
	margin: 0 0 14px;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.cbm-dd-hero__lead p {
	margin: 0;
	line-height: 1.6;
	font-size: 17px;
}
.cbm-dd-hero__callout {
	position: absolute;
	z-index: 1;
	width: 200px;
	background: #fff;
	border: 3px solid #fff;
	border-radius: var(--cbm-radius);
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0,0,0,0.35), 0 14px 32px rgba(0,0,0,0.35);
}
.cbm-dd-hero__callout--a { right: 28px; top: 28px; }

.cbm-dd-hero__extra {
	margin: 28px 0;
	max-width: 420px;
}
.cbm-dd-hero__extra-img {
	width: 100%;
	height: auto;
	border-radius: var(--cbm-radius);
	border: 1px solid var(--cbm-hairline);
	display: block;
}
.cbm-dd-hero__extra-caption {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--cbm-body-grey);
}
.cbm-dd-hero__callout-img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
}
.cbm-dd-hero__callout-caption {
	margin: 0;
	padding: 10px 12px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--cbm-body-grey);
}
.cbm-dd-hero-continued {
	max-width: 700px;
	margin-top: 28px;
}
.cbm-dd-hero-continued p {
	line-height: 1.6;
	margin: 0 0 16px;
}
@media (max-width: 640px) {
	.cbm-dd-hero { min-height: 340px; }
	.cbm-dd-hero__panel { padding: 24px; max-width: 100%; }
	.cbm-dd-hero__callout { display: none; }
}

/* "Above" headline position - Jonathan, 2026-09-27: "the main headline would
   be above the hero image normally, not in it, but in it is also valid and
   we may get requests for that" - plain heading sitting above the photo,
   instead of overlaid on it (client-choosable via hero_headline_position). */
.cbm-dd-hero__above {
	margin: 8px 0 20px;
}
.cbm-dd-editorial__above {
	margin: 8px 0 16px;
}
.cbm-dd-hero__eyebrow--above {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
	font-weight: 700;
	color: var(--cbm-red);
	background: none;
	padding: 0;
	display: block;
	margin: 0 0 8px;
}
.cbm-dd-hero__headline--above {
	font-family: var(--cbm-font-heading);
	font-size: 32px;
	line-height: 1.15;
	margin: 0;
	color: var(--cbm-charcoal, #1a1a1a);
	text-shadow: none;
}
.cbm-dd-hero__standfirst {
	margin: 10px 0 0;
	max-width: 700px;
}
.cbm-dd-hero__standfirst p {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--cbm-body-grey);
}

/* A-Z bar, Products and Services page only (2026-09-28, sales request) - a full-width
   row of letters between the TBF banner/intro and the search box. Letters with no
   companies are greyed and not clickable; the current letter is red. */
.cbm-az-bar {
	display: flex;
	flex-wrap: nowrap;
	gap: 3px;
	margin-top: 16px;
	margin-bottom: 8px;
}
.cbm-az-bar__item {
	flex: 1 1 0;
	min-width: 0;
	padding: 11px 0;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	color: #fff;
	background: var(--cbm-red);
	border: 0;
	border-radius: 2px;
	text-decoration: none;
}
a.cbm-az-bar__item:hover { background: var(--cbm-red-hover); color: #fff; }
.cbm-az-bar__item.is-active,
a.cbm-az-bar__item.is-active:hover { background: var(--cbm-near-black); color: #fff; }
.cbm-az-bar__item.is-empty { color: var(--cbm-muted-grey); background: var(--cbm-fill-light); }
@media (max-width: 640px) {
	.cbm-az-bar { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
}

/* Directory grid beside the sidebar ad box (Products and Services and, from 2026-09-28, Industry Bodies ONLY - Jonathan: leave the other pages as they were): the
   base grid is 5 columns, which is wider than the 758px main column, so the 5th card ran
   under the ad box (found 2026-09-28 once the A-Z bar made this grid the main content).
   4 columns, same as the "Latest Businesses" shelf above it; minmax(0,1fr) stops long
   words stretching a column. */
.cbm-rv-main--grid4 .cbm-directory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .cbm-rv-main--grid4 .cbm-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cbm-rv-main--grid4 .cbm-directory-grid { grid-template-columns: minmax(0, 1fr); } }