/* Cleaners Hub design-system components (2026-10-06, v2).
   Builds on the site's own CSS instead of overriding it:
   - colours/easing from the --chs-* tokens in Customizer > Additional CSS (same values as the Claude
     Design project "Cleaners Hub Design System");
   - typography, text/heading colours, links, paragraph and heading spacing from Blocksy (--theme-*);
   - buttons are Blocksy's own .ct-button / .ct-button-ghost, so they match "Add to cart";
   - tables keep Blocksy's table rules, recoloured through --theme-table-border-color.
   Loaded only on product categories, About Us and the city pages (body class .chub-ds). */

.chub-ds {
	--chub-radius: 12px;     /* same as the product cards */
	--chub-radius-lg: 20px;
	--chub-gap: 16px;
	--chub-section: 56px;    /* space above each h2 section */
	--chub-shadow: 0 4px 10px rgba(30, 30, 30, .06), 0 1px 2px rgba(30, 30, 30, .05);
}

/* ---------- Sections and prose (every category description, the three pages) ---------- */
/* Core's term-description CSS sets p { margin-bottom: 0 }; put Blocksy's paragraph spacing back. */
.chub-ds .wp-block-term-description :is(p, ul, ol) { margin-block-end: var(--theme-content-spacing); }
.chub-ds .wp-block-term-description li > p { margin-block-end: 0; }
.chub-ds :is(.wp-block-term-description, .chub-page) h2 { margin-block-start: var(--chub-section); }
.chub-ds .wp-block-term-description > h2:first-child,
.chub-ds .chub-page > :first-child { margin-block-start: 0; }
.chub-ds :is(.wp-block-term-description, .chub-page) h3 { margin-block-start: 1.5em; }

/* ---------- Button row (buttons themselves are .ct-button / .ct-button-ghost) ---------- */
.chub-ds .chub-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 24px; }

/* ---------- Tables: Blocksy's table rules, recoloured ---------- */
.chub-ds .wp-block-term-description {
	--theme-table-border-color: var(--chs-hairline);
}
.chub-ds .wp-block-term-description .wp-block-table { overflow-x: auto; margin-block: 24px; }
.chub-ds .wp-block-term-description .wp-block-table table { min-width: 820px; background: var(--theme-palette-color-8); font-size: 14px; }
.chub-ds .wp-block-term-description .wp-block-table thead { background: var(--chs-off-white); }
.chub-ds .wp-block-term-description .wp-block-table :is(th, td) { padding: 12px 14px; vertical-align: top; text-align: left; }
.chub-ds .chub-price { font-weight: 600; white-space: nowrap; }

/* ---------- FAQ accordion (categories: div.chub-faq, pages: core/details) ---------- */
.chub-ds :is(.chub-faq, .chub-faq-list) { border-block-start: 1px solid var(--chs-hairline); }
.chub-ds :is(.chub-faq, .chub-faq-list) details { margin: 0; border-block-end: 1px solid var(--chs-hairline); }
.chub-ds :is(.chub-faq, .chub-faq-list) summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 0;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	color: var(--theme-headings-color);
	transition: color 120ms var(--chs-ease);
}
.chub-ds :is(.chub-faq, .chub-faq-list) summary::-webkit-details-marker { display: none; }
.chub-ds :is(.chub-faq, .chub-faq-list) summary:hover { color: var(--theme-link-hover-color); }
.chub-ds :is(.chub-faq, .chub-faq-list) summary h3 { margin: 0; font: inherit; color: inherit; }
.chub-ds :is(.chub-faq, .chub-faq-list) summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-inline-end: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform 200ms var(--chs-ease);
}
.chub-ds :is(.chub-faq, .chub-faq-list) details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
/* Details blocks use the theme's flow layout (24px margin after the question, even when closed) and the
   page spacing rule zeroes the answer's last margin, so spacing here is padding only. */
.chub-ds :is(.chub-faq, .chub-faq-list) details > * { margin-block: 0 !important; }
.chub-ds :is(.chub-faq, .chub-faq-list) details > :not(summary) { padding-block-end: 22px; max-width: 72ch; }
.chub-ds :is(.chub-faq, .chub-faq-list) details[open] > :not(summary) { animation: chub-reveal 200ms var(--chs-ease); }
@keyframes chub-reveal { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Help CTA (after every category description) ---------- */
.chub-ds .chub-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
	padding: clamp(24px, 4vw, 40px);
	margin-block-start: var(--chub-section);
}
.chub-ds .chub-cta h2 { margin: 0 0 6px; font-size: clamp(22px, 2vw, 26px); }
.chub-ds .chub-cta p { margin: 0; max-width: 560px; color: var(--chs-ink); }
.chub-ds .chub-cta .chub-actions { margin: 0; }


/* ---------- Shared panels: cards, CTA, logo tiles ---------- */
.chub-ds :is(.chub-card, .chub-cta, .chub-logo-tile) {
	background: var(--theme-palette-color-8);
	border: 1px solid var(--chs-hairline); /* visible on the white description panel and the grey page */
	border-radius: var(--chub-radius);
}
.chub-ds .chub-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--chub-gap);
	padding: 0;
	margin-block: 24px var(--theme-content-spacing);
	list-style: none;
}
.chub-ds .chub-cards:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2 x 2, not 3 + 1 */
.chub-ds .chub-cards.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chub-ds .chub-cards > li { margin: 0; }
.chub-ds .chub-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 22px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--theme-text-color);
	transition: border-color 120ms var(--chs-ease), box-shadow 120ms var(--chs-ease), transform 120ms var(--chs-ease);
}
.chub-ds a.chub-card { text-decoration: none; }
.chub-ds :is(a.chub-card:hover, .chub-card:has(a:hover)) { border-color: var(--chs-blue-200); box-shadow: var(--chub-shadow); transform: translateY(-1px); }
.chub-ds :is(a.chub-card, a.chub-logo-tile):active { transform: scale(.99); }
.chub-ds .chub-card :is(p, .chub-card-text) { display: block; margin: 0; color: var(--chs-ink); }
.chub-ds .chub-card-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--theme-headings-color); }
.chub-ds a.chub-card:hover .chub-card-title { color: var(--chs-blue-700); }
.chub-ds .chub-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--chs-blue-50);
	color: var(--chs-blue-700);
}
.chub-ds .chub-icon svg { width: 22px; height: 22px; }

/* =====================================================================================
   Page layer: About Us and the city pages. Type follows the /brands/ page (.chbr):
   Volte Light headings in Black 80%, blue eyebrow, 18px light lead, Black 60% body.
   ===================================================================================== */
.chub-ds .chub-page { color: var(--chs-ink); font-size: 16px; line-height: 1.6; }
.chub-ds .chub-page :is(h1, h2) { font-weight: 300; color: var(--chs-ink); letter-spacing: -.005em; text-wrap: balance; }
.chub-ds .chub-page h1 { font-size: clamp(34px, 4.2vw, 48px); line-height: 1.12; margin: 0 0 16px; }
.chub-ds .chub-page h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.18; margin: 0; }
.chub-ds .chub-page h3 { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--chs-black); margin: 0 0 6px; }
.chub-ds .chub-page p { margin: 0 0 1em; }
.chub-ds .chub-page strong { color: var(--chs-ink); font-weight: 600; }
.chub-ds .chub-page a:where(:not([class])) { color: var(--chs-blue-700); text-decoration: underline; text-decoration-color: var(--chs-blue-100); text-underline-offset: 3px; transition: color 120ms var(--chs-ease), text-decoration-color 120ms var(--chs-ease); }
.chub-ds .chub-page a:where(:not([class])):hover { color: var(--chs-black); text-decoration-color: currentColor; }
.chub-ds .chub-eyebrow { display: block; margin: 0 0 14px; font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: var(--chs-blue-700); }
.chub-ds .chub-lead { font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--chs-ink); margin: 0; max-width: 62ch; text-wrap: pretty; }

/* Sections: one rhythm for every block on the page. */
.chub-ds .chub-section { margin-block-start: clamp(56px, 8vw, 96px); }
.chub-ds .chub-section-head { max-width: 720px; margin-block-end: 32px; }
.chub-ds .chub-section-head .chub-lead { margin-block-start: 12px; font-size: 17px; }

/* Hero */
.chub-ds .chub-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	padding: clamp(28px, 5vw, 64px);
	background: var(--theme-palette-color-8);
	border-radius: var(--chub-radius-lg);
}
.chub-ds .chub-hero .chub-actions { margin-block-start: 28px; }
.chub-ds .chub-hero-media { margin: 0; }
.chub-ds .chub-hero-media img { display: block; width: 100%; height: auto; border-radius: var(--chub-radius); }

/* Warehouse card (city hero) */
.chub-ds .chub-info { padding: 28px; background: var(--chs-off-white); border-radius: var(--chub-radius); }
.chub-ds .chub-info dl { display: grid; gap: 16px; margin: 0; }
.chub-ds .chub-info dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--chs-ink); }
.chub-ds .chub-info dd { margin: 2px 0 0; color: var(--chs-ink); }

/* Facts band: one strip with hairline dividers, not four boxes. */
.chub-ds .chub-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding: 0;
	margin: 16px 0 0;
	list-style: none;
	background: var(--theme-palette-color-8);
	border-radius: var(--chub-radius-lg);
}
.chub-ds .chub-facts li { margin: 0; padding: 24px 28px; font-size: 14px; line-height: 1.45; color: var(--chs-ink); }
.chub-ds .chub-facts li + li { border-inline-start: 1px solid var(--chs-divider); }
.chub-ds .chub-facts strong { display: block; margin-block-end: 4px; font-size: 26px; font-weight: 300; line-height: 1.15; color: var(--chs-black); font-variant-numeric: tabular-nums; }

/* Two-column list with dividers (industries, warehouses) */
.chub-ds .chub-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; padding: 0; margin: 0; list-style: none; border-block-start: 1px solid var(--chs-hairline); }
.chub-ds .chub-rows > li { margin: 0; border-block-end: 1px solid var(--chs-hairline); }
.chub-ds .chub-rows a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 0; text-decoration: none; color: inherit; }
.chub-ds .chub-rows a::after { content: "→"; color: var(--chs-blue-700); transition: transform 120ms var(--chs-ease); }
.chub-ds .chub-rows a:hover::after { transform: translateX(3px); }
.chub-ds .chub-rows a:hover h3 { color: var(--chs-blue-700); }
.chub-ds .chub-rows p { margin: 0; font-size: 15px; line-height: 1.45; }

/* Split: two columns of content */
.chub-ds .chub-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.chub-ds .chub-panel { padding: clamp(24px, 3vw, 36px); background: var(--theme-palette-color-8); border-radius: var(--chub-radius-lg); }

/* Suburb chips */
.chub-ds .chub-region + .chub-region { margin-block-start: 18px; }
.chub-ds .chub-region-name { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--chs-ink); }
.chub-ds .chub-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 0 0; list-style: none; }
.chub-ds .chub-chips li { margin: 0; padding: 6px 14px; border: 1px solid var(--chs-hairline); border-radius: 9999px; background: var(--theme-palette-color-8); font-size: 14px; color: var(--chs-ink); }

/* Brand logos (same tiles as /brands/) */
.chub-ds .chub-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; }
.chub-ds .chub-logos li { margin: 0; }
.chub-ds .chub-logo-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: 18px 22px; color: var(--chs-black); transition: border-color 120ms var(--chs-ease), box-shadow 120ms var(--chs-ease); }
.chub-ds .chub-logo-tile svg { width: 100%; max-height: 52px; }
.chub-ds .chub-logo-tile:hover { border-color: var(--chs-blue-200); box-shadow: var(--chub-shadow); }
.chub-ds .chub-more { margin-block-start: 20px; font-size: 15px; }

/* Own-brand ranges (About Us): alternating image and text */
.chub-ds .chub-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.chub-ds .chub-range + .chub-range { margin-block-start: clamp(40px, 6vw, 72px); }
.chub-ds .chub-range:nth-of-type(even) > figure { order: 2; }
.chub-ds .chub-range figure { margin: 0; }
.chub-ds .chub-range img { display: block; width: 100%; height: auto; border-radius: var(--chub-radius-lg); background: var(--theme-palette-color-8); }
.chub-ds .chub-range figcaption { margin-block-start: 10px; font-size: 13px; color: var(--chs-ink); }
.chub-ds .chub-range h3 { font-size: 24px; font-weight: 300; color: var(--chs-ink); }
.chub-ds .chub-linklist { columns: 2; column-gap: 32px; padding: 0; margin: 16px 0 0; list-style: none; font-size: 15px; }
.chub-ds .chub-linklist li { break-inside: avoid; margin: 0 0 10px; }

/* Review quote */
.chub-ds .chub-quote { margin: 0; padding: clamp(24px, 3vw, 36px); background: var(--theme-palette-color-8); border-radius: var(--chub-radius-lg); }
.chub-ds .chub-quote p { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.45; color: var(--chs-ink); }
.chub-ds .chub-quote cite { display: block; margin-block-start: 14px; font-size: 14px; font-style: normal; color: var(--chs-ink); }
.chub-ds .chub-stars { display: block; margin-block-end: 12px; color: var(--chs-blue-400); letter-spacing: 2px; }

/* Page FAQ + closing band */
.chub-ds .chub-page .chub-faq-list { margin: 0; }
.chub-ds .chub-page .chub-faq-list summary { font-size: 17px; color: var(--chs-ink); }
.chub-ds .chub-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(28px, 4vw, 48px); background: var(--chs-blue-50); border-radius: var(--chub-radius-lg); }
.chub-ds .chub-band h2 { font-size: clamp(24px, 2.4vw, 30px); }
.chub-ds .chub-band p { margin: 8px 0 0; color: var(--chs-ink); }
.chub-ds .chub-band .chub-actions { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
	.chub-ds :is(.chub-hero, .chub-split, .chub-range) { grid-template-columns: 1fr; }
	.chub-ds .chub-range:nth-of-type(even) > figure { order: 0; }
	.chub-ds :is(.chub-cards, .chub-cards.is-4, .chub-cards:has(> li:nth-child(4):last-child), .chub-facts) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.chub-ds .chub-facts li:nth-child(3) { border-inline-start: 0; }
	.chub-ds .chub-facts li:nth-child(n+3) { border-block-start: 1px solid var(--chs-divider); }
	.chub-ds .chub-rows { grid-template-columns: 1fr; }
	.chub-ds .chub-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.chub-ds :is(.chub-cards, .chub-cards.is-4, .chub-cards:has(> li:nth-child(4):last-child)) { grid-template-columns: 1fr; }
	.chub-ds .chub-facts li { padding: 18px 16px; }
	.chub-ds .chub-facts strong { font-size: 24px; }
	.chub-ds .chub-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.chub-ds .chub-linklist { columns: 1; }
	.chub-ds .chub-quote p { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.chub-ds :is(.chub-card, .chub-logo-tile, .chub-rows a::after, summary, summary::after, details > *) { transition: none; animation: none; }
}
.chub-ds .chub-rows a { color: inherit; }
.chub-ds .chub-rows h3 { transition: color 120ms var(--chs-ease); }

/* Spacing: the page sections own their rhythm. Blocksy's flow layout adds a bottom margin to every
   block in .entry-content; drop it here so section gaps come only from .chub-section. */
.chub-ds .chub-page > * { margin-block-end: 0; }
.chub-ds .chub-page :is(p, ul, ol, dl):last-child,
.chub-ds .chub-page .chub-linklist li:last-child { margin-block-end: 0; }
.chub-ds .chub-page .chub-more { margin-block-end: 0; }

/* Accessibility (Lighthouse colour contrast, WCAG AA 4.5:1). White on the brand light blue is 2.03:1,
   so buttons on these pages use black text on blue, as the design system specifies ("on-blue text is
   black"), and the outline button is black instead of light blue. Theme links in category copy
   (#4bc3ee on white, 2.03:1) use the darker brand blue. */
.chub-ds :is(.chub-page, .chub-cta) {
	--theme-button-text-initial-color: var(--chs-black);
	--theme-button-text-hover-color: var(--chs-black);
	--theme-button-background-hover-color: var(--chs-blue-500);
}
.chub-ds :is(.chub-page, .chub-cta) .ct-button-ghost { color: var(--chs-black); border-color: var(--chs-black); }
.chub-ds :is(.chub-page, .chub-cta) .ct-button-ghost:hover { color: #fff; background: var(--chs-black); border-color: var(--chs-black); }
.chub-ds :is(.wp-block-term-description, .chub-term-intro) a:not([class]) { color: var(--chs-blue-700); text-decoration: underline; text-decoration-color: var(--chs-blue-100); text-underline-offset: 3px; }
.chub-ds :is(.wp-block-term-description, .chub-term-intro) a:not([class]):hover { color: var(--chs-black); text-decoration-color: currentColor; }
.chub-ds .chub-more a { display: inline-block; padding-block: 5px; } /* 24px touch target */

/* ---------- Contact Us ---------- */
.chub-ds .chub-contact-list { display: grid; gap: 4px; padding: 0; margin: 0; list-style: none; }
.chub-ds .chub-contact-list li { display: flex; gap: 16px; align-items: flex-start; margin: 0; padding: 18px 20px; background: var(--chs-off-white); border-radius: var(--chub-radius); }
.chub-ds .chub-contact-list strong { display: block; margin-block-end: 2px; font-size: 15px; font-weight: 600; color: var(--chs-black); }
.chub-ds .chub-contact-list li > div > span { display: block; font-size: 15px; line-height: 1.45; }
.chub-ds .chub-loc { display: flex; flex-direction: column; overflow: hidden; background: var(--theme-palette-color-8); border-radius: var(--chub-radius-lg); }
.chub-ds .chub-map { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--chs-off-white); }
.chub-ds .chub-loc-body { display: flex; flex: 1; flex-direction: column; padding: clamp(24px, 3vw, 32px); }
.chub-ds .chub-loc-body h3 { font-size: 24px; font-weight: 300; color: var(--chs-ink); margin: 0 0 16px; }
.chub-ds .chub-loc-body .chub-actions { margin-block-start: auto; padding-block-start: 24px; }
.chub-ds .chub-dl { margin: 0; border-block-start: 1px solid var(--chs-divider); }
.chub-ds .chub-dl > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 16px; padding-block: 12px; border-block-end: 1px solid var(--chs-divider); }
.chub-ds .chub-dl dt { padding-block-start: 2px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--chs-ink); }
.chub-ds .chub-dl dd { margin: 0; overflow-wrap: break-word; }
.chub-ds .chub-newsletter { align-items: center; }
.chub-ds .chub-newsletter > div:first-child { flex: 1 1 320px; }
.chub-ds .chub-newsletter .ct-newsletter-subscribe-block { flex: 1 1 380px; max-width: 520px; }
.chub-ds .chub-newsletter .ct-newsletter-subscribe-form { margin: 0; }
/* One white pill: email field + Subscribe inside it (the theme's footer styling made this a dark box
   with a square blue outline and a second pill border around the input). */
.chub-ds .chub-newsletter .ct-newsletter-subscribe-form-elements {
	display: flex;
	align-items: center;
	gap: 4px;
	height: auto;
	padding: 4px;
	/* !important: a global inline style sets #363636 + blue border !important on every newsletter form (footer). */
	background: var(--theme-palette-color-8) !important;
	border: 1px solid var(--chs-hairline) !important;
	border-radius: 9999px;
	box-shadow: none;
	transition: border-color 120ms var(--chs-ease), box-shadow 120ms var(--chs-ease);
}
.chub-ds .chub-newsletter .ct-newsletter-subscribe-form-elements:focus-within { border-color: var(--chs-blue-600) !important; box-shadow: 0 0 0 3px rgba(75, 195, 238, .35); }
.chub-ds .chub-newsletter .ct-newsletter-subscribe-form-elements input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--chs-black);
	box-shadow: none;
	outline: none;
}
.chub-ds .chub-newsletter .ct-newsletter-subscribe-form-elements input[type="email"]::placeholder { color: var(--chs-ink); opacity: 1; }
.chub-ds .chub-newsletter .ct-newsletter-subscribe-form-elements button { flex: none; height: 46px; min-height: 46px; padding: 0 24px; border-radius: 9999px; }
.chub-ds .chub-newsletter .gdpr-confirm-policy { margin-block-start: 12px; font-size: 14px; }
@media (max-width: 600px) {
	.chub-ds .chub-dl > div { grid-template-columns: 1fr; }
}

/* ---------- City pages: delivery area (text + suburbs beside a metro map) ---------- */
.chub-ds .chub-area { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.chub-ds .chub-area-intro { margin: 28px 0 0; }
.chub-ds .chub-area-map { display: flex; flex-direction: column; margin: 0; }
.chub-ds .chub-area-map iframe { display: block; flex: 1; width: 100%; min-height: 420px; border: 0; border-radius: var(--chub-radius-lg); background: var(--chs-off-white); }
.chub-ds .chub-area-map figcaption { margin-block-start: 10px; font-size: 14px; color: var(--chs-ink); }
@media (max-width: 1000px) {
	.chub-ds .chub-area { grid-template-columns: 1fr; }
	.chub-ds .chub-area-map iframe { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
}