/*
 * Shared page chrome - site header and site footer.
 *
 * WHY THESE NUMBERS: every value here was read off the live Bricks-rendered
 * chrome at cleaningwarehouse.co.za with getComputedStyle, not guessed from the
 * design. Bricks scatters the same rules across ~45 inline <style> blocks plus
 * its own @layer bricks framework sheet, so the cascade is impossible to read by
 * eye - the computed result is the only reliable source. Where a Bricks rule was
 * inert (e.g. `height: var(--100)` where --100 is the unitless `100`) the
 * COMPUTED value is reproduced, not the dead declaration.
 *
 * Layout notes worth knowing before editing:
 *  - The header is three stacked full-bleed rows: announcement (25.5px), grey
 *    utility bar (65px), white nav bar (>=65px). Total 157.25px at desktop.
 *  - The grey bar is a flex row where the SEARCH is the only flexible item.
 *    On live everything shrinks proportionally and the logo happens to land at
 *    36.4x40; here the fixed items are pinned and the search absorbs the slack,
 *    which produces the identical geometry without depending on flex-shrink
 *    arithmetic that would move if any label changed by a character.
 *  - The mega menu panel is positioned against .cwpr-navbar (NOT its own <li>),
 *    which is what lets it span the viewport edge-to-edge exactly as Bricks'
 *    JS-positioned megamenu does, with no JS needed for left/width.
 *
 * @package cw-page-rebuild
 */

.cwpr-body {
	/* Palette, lifted from the Bricks global colour set actually in use. */
	/* Announcement strip. Was the live site's rewards blue (#185aa6), changed
	   2026-08-20: the approved system quarantines --cw-rewards to rewards and
	   money zones, and this strip carries a delivery-threshold message on every
	   page of the site — chrome, not a rewards band. Charcoal is the live
	   chrome's own character. REVERT = put var(--cw-rewards, #185aa6) back. */
	--cwprc-announce-bg: var(--cw-ink, #263238);
	--cwprc-announce-fg: var(--cw-ground, #f7f7f5);
	--cwprc-grey: var(--cw-ink-2, #52575a);          /* grey utility bar + footer background   */
	--cwprc-grey-pill: var(--cw-ink-2, #52575a);     /* the two rounded pills (1 shade off)    */
	--cwprc-cream: var(--cw-lime-wash, #f3f9e4);         /* pill icon, person icon, sign-in text   */
	--cwprc-white: var(--cw-card, #fff);
	--cwprc-lime: var(--cw-lime, #80bc00);          /* footer button                          */
	--cwprc-lime-hover: var(--cw-lime, #80bc00);    /* pickup pill hover                      */
	--cwprc-ink: var(--cw-ink, #263238);           /* body text colour                       */
	--cwprc-panel: var(--cw-ink, #263238);         /* mobile off-canvas panel                */
	--cwprc-container: 1100px;      /* Bricks --header-width                  */

	/* The Bricks theme body font stack, reproduced so the chrome does not
	   silently restyle if Bricks' own theme-style CSS is ever dequeued. */
	--cwprc-font: -apple-system, "system-ui", "Segoe UI", roboto, helvetica, arial, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* ==========================================================================
   HEADER SHELL
   ========================================================================== */

#cwpr-header {
	position: sticky;
	top: 0;
	z-index: 998;
	width: 100%;
	font-family: var(--cwprc-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 25.5px;
	color: var(--cwprc-ink);
	transition: background-color 0.2s, transform 0.4s;
}

/* Bricks offsets its sticky header by the admin bar; match it or the logged-in
   view sits under the toolbar. */
body.admin-bar #cwpr-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * THE RESETS ARE WRAPPED IN :where() ON PURPOSE. Written as `#cwpr-header a`
 * these carry id specificity and silently beat every component rule below -
 * `.cwpr-footer__link { color: white }` loses, and white-on-grey footer links
 * render dark grey. :where() drops the id to zero specificity, so the reset is
 * a floor that any single class overrides. Do not unwrap them.
 *
 * `height: auto` on img mirrors Bricks' own reset: without it a slow or missing
 * image is laid out at its HTML height attribute (the footer logo is 1070px
 * tall), so the footer would jump as it loads.
 */
:where(#cwpr-header, #cwpr-footer) * {
	box-sizing: border-box;
}

:where(#cwpr-header, #cwpr-footer) a {
	color: inherit;
	text-decoration: none;
}

:where(#cwpr-header, #cwpr-footer) img {
	max-width: 100%;
	height: auto;
}

/* --- announcement strip --------------------------------------------------- */

.cwpr-announce {
	max-width: 100%;
	background-color: var(--cwprc-announce-bg);
	color: var(--cwprc-announce-fg);
	text-align: center;
}

.cwpr-announce .emoji,
.cwpr-announce img {
	display: inline;
	height: 1em;
	width: 1em;
	vertical-align: -0.1em;
}

/* ==========================================================================
   BREAKPOINTS - a faithful copy of a live defect, read this before "fixing" it
   --------------------------------------------------------------------------
   Live gates the grey bar and nav bar on `min-width: 767px` and the mobile bar
   on `max-width: 478px`. Between 479px and 766px BOTH are display:none, so a
   tablet gets the blue strip and nothing else - no logo, no search, no menu.
   That is reproduced here deliberately, because this file is a pixel copy and
   changing it would make the rebuild and the Bricks original disagree. It is
   flagged for the team as a live bug to fix in BOTH places at once.
   ========================================================================== */

.cwpr-topbar,
.cwpr-navbar {
	display: none;
}

.cwpr-mobilebar {
	display: none;
}

@media (min-width: 767px) {

	.cwpr-topbar,
	.cwpr-navbar {
		display: block;
	}
}

@media (max-width: 478px) {

	.cwpr-mobilebar {
		display: flex;
	}
}

/* ==========================================================================
   HEADER ROW 1 - grey utility bar (desktop)
   ========================================================================== */

.cwpr-topbar {
	width: 100%;
	min-height: 65px;
	padding: 5px 20px;
	background-color: var(--cwprc-grey);
	z-index: 1;
}

.cwpr-topbar__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: var(--cwprc-container);
	max-width: 100%;
	margin: 0 auto;
	padding: 0 25px;
}

/* --- logo ---------------------------------------------------------------- */

.cwpr-logo {
	flex: 0 0 auto;
	display: block;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	color: currentColor;
}

/* 40px is the live RENDERED height. Bricks asks for `height: var(--100)` where
   --100 is the unitless value `100`, so that declaration is invalid and dropped;
   the logo then shrinks as a flex item to 36.4x40. Pinning the height gives the
   same pixels without depending on how much slack the row happens to have. */
.cwpr-logo img {
	display: block;
	height: 40px;
	width: auto;
}

/* --- the two rounded pills ----------------------------------------------- */

.cwpr-pill {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	column-gap: 20px;
	row-gap: 10px;
	background-color: var(--cwprc-grey-pill);
	border: 1px solid var(--cwprc-white);
	border-radius: 50px;
}

/* Live keeps the class `pisol-date-time-popup` on the pickup pill. It is a CSS
   hook the site author added (padding + hover), and it is also the handle any
   future Pisol pickup-popup binding would use, so it is NOT renamed to cwpr-. */
.cwpr-pill--pickup {
	flex: 0 0 232px;
	padding: 0 15px;
	margin-left: 50px;
	transition: background-color 0.3s ease;
}

.cwpr-pill--pickup:hover {
	background-color: var(--cwprc-lime-hover);
}

/*
 * flex, not inline-block: an inline-block wrapper sits on the text baseline and
 * reserves descender space under the 40px icon, which pushes the pill from 42px
 * to 49px. Bricks' own .bricks-link-wrapper is a flex box for the same reason.
 */
.cwpr-pill__iconlink {
	display: flex;
	align-items: center;
}

/*
 * 40x40 is the box live measures (a 30x30 glyph plus the 5px/10px padding).
 * The min-* pair is stated as the BORDER box, not the glyph, because the header
 * sets box-sizing: border-box - min-width: 30px here would include the padding
 * and give a 30px box. It changes nothing when the Themify font loads, and keeps
 * the pill 42px tall if it ever does not; without it a failed icon font
 * collapses this to 10x10 and visibly shortens the whole pill.
 */
.cwpr-pill__icon {
	display: inline-block;
	min-width: 40px;
	min-height: 40px;
	padding: 5px 10px 5px 0;
	font-size: 30px;
	line-height: 30px;
	color: var(--cwprc-cream);
	fill: var(--cwprc-cream);
}

.cwpr-pill__label {
	padding: 5px 0;
}

.cwpr-pill__label p {
	margin: 0;
	padding: 0;
	color: var(--cwprc-white);
}

.cwpr-pill--faq {
	flex: 0 0 130px;
	margin: 0 50px 0 10px;
}

/* Deliberately `inline`: live leaves this anchor inline so its 5px vertical
   padding bleeds out of the line box and does NOT grow the 27.5px pill. */
.cwpr-pill__faqlink {
	display: inline;
	padding: 5px 0;
	color: var(--cwprc-white);
}

/* --- search -------------------------------------------------------------- */

/* The only flexible item in the row: `flex-basis: 0` hands it exactly the space
   the fixed items leave over, which is the 415.7px live measures at 1100px. */
.cwpr-search--desktop {
	flex: 1 1 0;
	min-width: 0;
}

/* FiboSearch (ajax-search-for-woocommerce) styles its own input. These rules
   only apply to the plain-WooCommerce fallback form, so a site without that
   plugin still gets the right shape instead of an unstyled input. */
.cwpr-search__fallback {
	position: relative;
	display: block;
	width: 100%;
}

.cwpr-search__input {
	width: 100%;
	height: 54px;
	padding: 13px 24px 13px 48px;
	background-color: var(--cw-ground, #f7f7f5);
	border: 2px solid var(--cw-ground, #f7f7f5);
	border-radius: 30px;
	font-family: Roboto, sans-serif;
	font-size: 17px;
	line-height: 24px;
	color: var(--cw-grey, #6b6b6b);
}

.cwpr-search__submit {
	position: absolute;
	top: 50%;
	left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	margin-top: -16.5px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 100%;
	color: var(--cw-grey, #6b6b6b);
	cursor: pointer;
}

.cwpr-search__submit svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Core ships this class, but the fallback form must not depend on core's block
   stylesheet being enqueued for its label to stay out of the layout. */
.cwpr-search__fallback .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- account ------------------------------------------------------------- */

/*
 * 37.5x50 is the live box: the Ionicons person glyph at font-size 50. Pinned as
 * minimums for the same reason as the pill icon, and because this is one of the
 * fixed widths the search subtracts from to find its own - so a collapsed icon
 * would silently resize the search field too.
 */
.cwpr-account-icon {
	flex: 0 0 auto;
	display: inline-block;
	min-width: 37.5px;
	min-height: 50px;
	margin: 0 5px 0 30px;
	font-size: 50px;
	line-height: 50px;
	color: var(--cwprc-cream);
	fill: var(--cwprc-cream);
}

.cwpr-account-links {
	flex: 0 0 auto;
	color: var(--cwprc-cream);
}

.cwpr-account-links a {
	color: inherit;
}

/* ==========================================================================
   HEADER ROW 2 - white nav bar (desktop)
   --------------------------------------------------------------------------
   position: relative is load-bearing. It makes this row the containing block
   for the mega menu panel, which is how the panel spans the viewport exactly.
   ========================================================================== */

.cwpr-navbar {
	position: relative;
	width: 100%;
	min-height: 65px;
	background-color: var(--cwprc-white);
}

.cwpr-navbar__inner {
	display: flex;
	justify-content: center;
	width: var(--cwprc-container);
	max-width: 100%;
	margin: 0 auto;
	padding: 10px 35px; /* 25px container + 10px inner block, as live stacks them */
}

.cwpr-nav {
	display: flex;
	align-items: center;
}

/*
 * align-items: baseline is copied from live, where it is why the row measures
 * 66.75px rather than a clean 65.5px: the mega-menu <li> is a flex box, so its
 * baseline sits below that of the plain list items and the extra offset shows up
 * as row height.
 *
 * THE ONE KNOWN 1px DIFFERENCE IN THIS FILE. Measured, this row comes out
 * 67.75px against live's 66.75px, because the baseline offset between a flex
 * <li> and a list-item <li> resolves to 2.25px here and 1px on live. That number
 * is a browser-internal baseline calculation, not something either stylesheet
 * asks for, so it cannot be matched without hardcoding a height that has no
 * design meaning. The consequence is that the header is 157px on live and 158px
 * here, shifting page content down by one pixel. Left as-is deliberately; if
 * exact parity is ever needed, pin .cwpr-navbar to height: 66.75px and accept
 * that the menu labels then sit 1px higher than live instead.
 */
.cwpr-nav__items {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 20px;
	row-gap: 10px;
	margin: 0;
	padding: 10px;
	list-style: none;
}

.cwpr-nav__item {
	position: static; /* see .cwpr-navbar - the panel must escape this <li> */
}

/* Live gives the active page no visual treatment at all - only aria-current
   and a current-menu-item class, with nothing styling them. The hook is kept
   so active state can be designed later without touching the PHP. */
.cwpr-nav__link[aria-current="page"] {
	/* intentionally no declarations - matches live */
}

/* ==========================================================================
   MEGA MENU - "Shopping Aisles"
   ========================================================================== */

/* Mirrors Bricks' .brxe-dropdown so the item sizes to its toggle, as live does. */
.cwpr-mega {
	display: flex;
	flex-direction: column;
}

.cwpr-mega__toggle {
	display: flex;
	flex-direction: row-reverse; /* icon left, label right */
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
}

.cwpr-mega__button {
	display: flex;
	align-items: center;
	padding: 0;
	background: none;
	border: 0;
	color: currentColor;
	font-size: 15px;
	line-height: 17.25px;
	cursor: pointer;
}

.cwpr-mega__button i {
	display: flex;
	align-items: center;
	width: 15px;
	height: 15px;
	font-size: 15px;
	line-height: 15px;
}

/*
 * top: 45.5px is not a magic number - it is this row's own box arithmetic:
 *   10px  .cwpr-navbar__inner padding-top
 * + 10px  .cwpr-nav__items padding-top
 * + 25.5px the menu item line box
 * = the bottom edge of the "Shopping Aisles" item, which is where live anchors
 * the panel (Bricks resolves `top: 100%` against the <li>). Because the panel
 * is positioned against .cwpr-navbar instead, left/right: 0 makes it span the
 * viewport with no JS, exactly as Bricks' JS-positioned megamenu does.
 */
.cwpr-mega__panel {
	position: absolute;
	top: calc(10px + 10px + 25.5px);
	left: 0;
	right: 0;
	z-index: 1001;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-evenly;
	padding: 0 50px;
	background-color: var(--cwprc-white);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cwpr-mega:hover > .cwpr-mega__panel,
.cwpr-mega:focus-within > .cwpr-mega__panel,
.cwpr-mega.is-open > .cwpr-mega__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.cwpr-mega__grid {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: 10px;
	width: 800px;
	max-width: 800px;
	max-height: 800px;
	margin: 0 auto;
	padding: 20px;
	background-color: var(--cwprc-white);
	border-radius: 10px;
	list-style: none;
}

.cwpr-mega__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 160px;
	max-width: 160px;
	padding: 10px;
	row-gap: 10px;
	margin: 0;
	list-style: none;
}

.cwpr-mega__tile {
	position: relative;
	display: block;
	width: 100%;
}

.cwpr-mega__tile img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   HEADER ROW 3 - mobile bar (<= 478px)
   ========================================================================== */

.cwpr-mobilebar {
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	padding: 5px 0;
	background-color: var(--cwprc-grey);
	z-index: 1;
}

.cwpr-logo--mobile img {
	height: 50px;
}

/* Live pins the wrapper to 200px while FiboSearch's own input keeps a 230px
   min-width, so the field overhangs its wrapper. Reproduced, not corrected. */
.cwpr-search--mobile {
	flex: 0 0 200px;
	min-width: 200px;
	max-width: 200px;
}

/* --- hamburger ----------------------------------------------------------- */

/* The white background really is on this 20x16 wrapper on live, showing as a
   small white square behind the black bars. */
.cwpr-mobilenav {
	background: var(--cwprc-white);
}

.cwpr-mobilenav__toggle {
	position: relative;
	display: block;
	width: 20px;
	min-width: 12px;
	height: 16px;
	padding: 0;
	background-color: transparent;
	border: 0;
	color: #000;
	cursor: pointer;
}

.cwpr-bar {
	position: absolute;
	right: 0;
	display: block;
	width: 20px;
	min-width: 12px;
	height: 2px;
	background-color: currentColor;
	transition: all 0.2s;
}

.cwpr-bar--top {
	top: 0;
}

.cwpr-bar--center {
	top: 7px;
}

.cwpr-bar--bottom {
	top: 14px;
}

.cwpr-mobilenav.is-open .cwpr-bar--top {
	top: 50%;
	transform: rotate(45deg);
}

.cwpr-mobilenav.is-open .cwpr-bar--center {
	opacity: 0;
}

.cwpr-mobilenav.is-open .cwpr-bar--bottom {
	top: 50%;
	transform: rotate(-45deg);
}

/* --- off-canvas panel ---------------------------------------------------- */

.cwpr-mobilenav__panel {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	bottom: 0;
	left: 0;
	right: auto;
	z-index: 999;
	display: flex;
	flex-direction: column;
	width: 300px;
	max-width: 100vw;
	color: var(--cwprc-white);
	transform: translateX(-100%);
	visibility: hidden;
	transition: background-color 0.2s, opacity 0.2s, transform 0.2s, visibility 0.2s;
}

/* Bricks paints the panel background on a ::before at z-index -1 rather than on
   the element, so the element itself is transparent. Copied as-is. */
.cwpr-mobilenav__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--cwprc-panel);
	background-size: cover;
}

.cwpr-mobilenav.is-open .cwpr-mobilenav__panel {
	transform: translateX(0);
	visibility: visible;
}

.cwpr-mobilemenu {
	position: relative;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	scrollbar-width: none;
}

.cwpr-mobilemenu::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
}

.cwpr-mobilemenu a {
	display: block;
	width: 100%;
	color: var(--cwprc-white);
	text-decoration: none;
}

.cwpr-mobilemenu > li > a,
.cwpr-mobilemenu > li > .cwpr-mobilemenu__toggle > * {
	padding: 0 30px;
	line-height: 60px;
}

.cwpr-mobilemenu__toggle {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.cwpr-mobilemenu__toggle button {
	display: flex;
	align-items: center;
	margin-left: 10px;
	background-color: transparent;
	border: 0;
	color: currentColor;
	cursor: pointer;
}

.cwpr-mobilemenu__toggle svg {
	width: 15px;
	height: 15px;
}

.cwpr-mobilemenu .sub-menu {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	line-height: 40px;
}

.cwpr-mobilemenu li.is-open > .sub-menu {
	display: block;
}

.cwpr-mobilemenu .sub-menu li > a,
.cwpr-mobilemenu .sub-menu li > .cwpr-mobilemenu__toggle > * {
	padding: 0 45px;
}

/* Category menu items carry an <img> as their label. Live renders them at their
   natural size (the width="auto" attribute is invalid, so both HTML dimensions
   are ignored); keep that, only capping the width so nothing overflows 300px. */
.cwpr-mobilemenu .sub-menu img {
	display: inline;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.cwpr-mobilenav__overlay {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s;
}

.cwpr-mobilenav.is-open .cwpr-mobilenav__overlay {
	z-index: 998;
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   FOOTER
   --------------------------------------------------------------------------
   The footer ships TWO complete layouts, as live does: a desktop one (> 767px)
   and a mobile one (<= 767px, in two stacked containers). They are separate
   markup with different content - the mobile column drops the email address and
   the Google links and adds a Refund policy link - so they cannot be merged
   without changing what the page says.
   ========================================================================== */

#cwpr-footer {
	position: relative;
	font-family: var(--cwprc-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 25.5px;
	color: var(--cwprc-ink);
}

.cwpr-footer__section {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 100%;
	padding: 65px 0 12px;
	background-color: var(--cwprc-grey);
}

.cwpr-footer__heading {
	margin: 0 0 20px;
	font-size: 27px;
	font-weight: 700;
	line-height: 37.8px;
	color: var(--cwprc-white);
}

.cwpr-footer__text {
	margin: 0 0 13px;
	color: var(--cwprc-white);
}

.cwpr-footer__link {
	display: block;
	color: var(--cwprc-white);
}

.cwpr-footer__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 7.5px 15px;
	background-color: var(--cwprc-lime);
	border-width: 0;
	color: var(--cwprc-announce-fg);
	text-align: center;
}

.cwpr-footer__counter {
	color: var(--cwprc-white);
}

/*
 * Bricks' block defaults, which every footer column inherits: 10px padding,
 * 10px/20px gap, baseline cross-axis alignment - and width: 100%, which is the
 * one that matters most. It is what makes the max-width percentages below
 * resolve against the row rather than against each column's own content, and
 * what lets the three columns shrink to fit the row exactly as live does
 * (30% + 32% + 37% + a 22px margin overflows, so the widest column gives way).
 * Without it the columns size to their text and the whole footer is narrower.
 */
.cwpr-footer__block {
	display: flex;
	flex-direction: column;
	align-items: baseline;
	column-gap: 20px;
	row-gap: 10px;
	width: 100%;
	padding: 10px;
}

/* --- desktop layout ------------------------------------------------------ */

.cwpr-footer__row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: 86%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 25px;
}

/* The 30px bottom gutter is on the desktop row only - live leaves the mobile
   container flush, and the mobile brand bar supplies its own spacing. */
.cwpr-footer__row.cwpr-footer__desktop {
	padding-bottom: 30px;
}

.cwpr-footer__col--connect {
	max-width: 30%;
	padding-right: 0;
}

.cwpr-footer__connect {
	max-width: 79%;
}

.cwpr-footer__connect .cwpr-footer__text {
	margin-right: 1px;
	padding-right: 0;
}

.cwpr-footer__col--policies {
	flex-direction: row;
	max-width: 32%;
	margin-left: 22px;
}

.cwpr-footer__policies {
	max-width: 67%;
	margin-right: 10px;
}

.cwpr-footer__visitors {
	max-width: 54%;
}

.cwpr-footer__col--brand {
	max-width: 37%;
}

.cwpr-footer__brand {
	max-width: 62%;
	padding-bottom: 0;
}

.cwpr-footer__brand img {
	width: 100%;
	object-fit: contain;
}

.cwpr-footer__social {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cwpr-footer__social li,
.cwpr-footer__social li a {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.cwpr-footer__social li a {
	padding: 15px;
	color: var(--cwprc-white);
}

.cwpr-footer__social i {
	line-height: unset;
}

.cwpr-footer__social span {
	display: inline-flex;
	align-items: center;
}

.cwpr-footer__social--stacked {
	flex-direction: column;
}

.cwpr-footer__copy {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
	width: var(--cwprc-container);
	max-width: 100%;
	margin: 0 auto;
	padding: 0 25px;
	text-align: center;
}

.cwpr-footer__copy p {
	margin: 0;
	color: var(--cwprc-white);
}

/* --- mobile layout ------------------------------------------------------- */

.cwpr-footer__row--mobile {
	flex-direction: row;
}

.cwpr-footer__row--mobile .cwpr-footer__block--connect {
	max-width: 79%;
	margin-right: 160px;
}

.cwpr-footer__row--mobile .cwpr-footer__heading {
	padding-right: 13px;
}

/* Not decorative: this 58px gutter is what makes the paragraph wrap onto four
   lines between 479px and 767px. It is dropped again below 479px (see the
   max-width: 478px block), where the column is already narrow. */
.cwpr-footer__row--mobile .cwpr-footer__text {
	padding-right: 58px;
}

.cwpr-footer__row--mobile .cwpr-footer__block--policies {
	max-width: 67%;
	margin-right: 10px;
}

.cwpr-footer__row--mobile .cwpr-footer__block--visitors {
	max-width: 54%;
}

.cwpr-footer__social--inline {
	flex-direction: row;
}

/* The WhatsApp entry gets a blue plate between 479px and 767px, then loses it
   again below 479px. Both live rules, reproduced. */
.cwpr-footer__social--inline li:nth-child(3) {
	background-color: #4cc2ff;
}

.cwpr-footer__row2 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: var(--cwprc-container);
	max-width: 100%;
	margin: 0 auto;
	padding: 0 25px;
}

.cwpr-footer__brandbar {
	flex-direction: row;
	justify-content: space-between;
	padding-bottom: 20px;
}

.cwpr-footer__brandbar img {
	object-fit: contain;
}

.cwpr-footer__copy2 {
	margin: 0;
	font-size: 2rem;
	color: var(--cwprc-white);
}

/* ==========================================================================
   BRICKS' SUB-767px WRAP RULE
   --------------------------------------------------------------------------
   Bricks flips every container and block to flex-wrap: wrap below 767px, and it
   is structural, not cosmetic. Each mobile footer block is width: 100%, so wrap
   is what puts the four of them on their own lines; it is also what stacks the
   footer logo above the copyright line instead of beside it. Without this rule
   they sit side by side and shrink to fit, and the mobile footer comes out
   ~130px shorter than live.
   ========================================================================== */

@media (max-width: 767px) {

	.cwpr-mobilebar,
	.cwpr-footer__row,
	.cwpr-footer__row2,
	.cwpr-footer__copy,
	.cwpr-footer__block {
		flex-wrap: wrap;
	}
}

/* --- which footer layout shows ------------------------------------------- */

@media only screen and (max-width: 767px) {

	.cwpr-footer__desktop {
		display: none !important;
	}
}

@media only screen and (min-width: 767px) {

	.cwpr-footer__mobile {
		display: none !important;
	}
}

@media (max-width: 478px) {

	.cwpr-footer__section {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.cwpr-footer__row--mobile {
		flex-direction: column;
		align-self: auto;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.cwpr-footer__row--mobile .cwpr-footer__text {
		padding-right: 0;
	}

	.cwpr-footer__social--inline li:nth-child(3) {
		background-color: rgba(0, 0, 0, 0);
	}

	.cwpr-footer__row2 {
		align-self: auto;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.cwpr-footer__brandbar {
		flex-direction: column;
		align-items: center;
		align-self: auto;
		text-align: center;
	}

	.cwpr-footer__copy2 {
		font-size: 15px;
		text-align: center;
		margin-bottom: 50px;
	}

	.cwpr-footer__copy p {
		text-align: center;
		margin-bottom: 50px;
	}
}

/* ==========================================================================
   PAGE-SPECIFIC OVERRIDES ON BRICKS-OWNED CONTENT
   --------------------------------------------------------------------------
   These pages are still built and edited in the Bricks page builder - the
   Wave-6 chrome takeover only puts our header/footer around them, their BODY
   content is unchanged Bricks/Code-element markup, not ours. Design-system
   fixes asked for on that content land here, scoped tightly by page-id so
   they can never leak onto an unrelated page that happens to reuse the same
   class name.
   ========================================================================== */

/* FAQ's (/faqs/, page id 355613) - the category filter pills are printed by a
   Bricks Code element with its own inline <style> block using
   border-radius: 30px (full pill). 2026-08-20 user decision: radius 8,
   matching the design system's button/pill radius elsewhere. !important is
   necessary - the inline block prints inside the page body, AFTER this
   stylesheet in the document, so on equal specificity it would otherwise win
   by source order alone. */
body.page-id-355613 .faq-tab {
	border-radius: 8px !important;
}