/**
 * eRetail Systems — main stylesheet.
 *
 * Breakpoints used throughout this file:
 *   max-width: 599px    phones
 *   600–1023px          tablets
 *   min-width: 1024px   desktop / laptop
 *   min-width: 1440px   large desktop
 *
 * Sections without a design comp yet (hero, homepage sections) use clean,
 * neutral starter styling and are meant to be replaced once the comps are
 * supplied — see blocks/hero/style.css for that block's own rules.
 */

/* ==========================================================================
   1. Accessibility utilities
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var( --eretail-color-bg );
	clip: auto !important;
	clip-path: none;
	color: var( --eretail-color-heading );
	display: block;
	height: auto;
	left: 8px;
	top: 8px;
	padding: 12px 16px;
	z-index: 100000;
	width: auto;
	text-decoration: none;
	border-radius: var( --eretail-radius-sm );
	box-shadow: 0 0 0 2px var( --eretail-color-primary );
}

/*
 * The skip link's markup is `class="skip-link screen-reader-text"`. All
 * showing/hiding and positioning, in both states, comes from
 * .screen-reader-text / .screen-reader-text:focus above — .skip-link only
 * layers its own visual treatment (dark pill, white text) on top. It used
 * to *also* set its own position (including an off-screen `top: -80px` at
 * rest), stacked on top of .screen-reader-text's clip-based hiding — two
 * different hide techniques on the same element, redundant at best and a
 * plausible source of layout quirks position-offset hacks like that tend
 * to cause. Removed in favor of the one clip-based technique doing the
 * whole job.
 */
.skip-link {
	background: var( --eretail-color-heading );
	color: #fff;
	padding: 12px 20px;
	border-radius: var( --eretail-radius-sm );
}

:focus-visible {
	outline: 3px solid var( --eretail-color-primary );
	outline-offset: 2px;
}

/* ==========================================================================
   2. Layout utilities
   ========================================================================== */

.eretail-container {
	width: 100%;
	max-width: var( --eretail-container-width );
	margin-inline: auto;
	padding-inline: var( --eretail-container-padding );
}

.eretail-front-page > * + * {
	margin-top: var( --eretail-space-xl );
}

/* WordPress core alignment classes */
.alignwide {
	max-width: calc( var( --eretail-container-width ) + 160px );
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc( 50% - 50vw );
}

.aligncenter {
	margin-inline: auto;
	display: block;
}

.alignleft {
	float: left;
	margin: 0 var( --eretail-space-md ) var( --eretail-space-sm ) 0;
}

.alignright {
	float: right;
	margin: 0 0 var( --eretail-space-sm ) var( --eretail-space-md );
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	color: var( --eretail-color-heading );
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 var( --eretail-space-sm );
}

h1 { font-size: clamp( 2rem, 1.6rem + 1.6vw, 3.25rem ); }
h2 { font-size: clamp( 1.6rem, 1.35rem + 1vw, 2.5rem ); }
h3 { font-size: clamp( 1.3rem, 1.15rem + 0.6vw, 1.75rem ); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
	margin: 0 0 var( --eretail-space-sm );
}

ul, ol {
	margin: 0 0 var( --eretail-space-sm );
	padding-left: 1.25em;
}

blockquote {
	margin: 0 0 var( --eretail-space-sm );
	padding-left: var( --eretail-space-md );
	border-left: 3px solid var( --eretail-color-primary );
	color: var( --eretail-color-text-light );
	font-style: italic;
}

/* ==========================================================================
   4. Links
   ========================================================================== */

a {
	color: var( --eretail-color-primary );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var( --eretail-transition-speed ) var( --eretail-transition-easing );
}

a:hover,
a:focus-visible {
	color: var( --eretail-color-primary-dark );
}

nav a,
.eretail-btn,
.footer-social a,
.eretail-card__thumb {
	text-decoration: none;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.eretail-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var( --eretail-radius-pill );
	font-weight: 600;
	font-size: 0.95rem;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background var( --eretail-transition-speed ) var( --eretail-transition-easing ),
		color var( --eretail-transition-speed ) var( --eretail-transition-easing ),
		border-color var( --eretail-transition-speed ) var( --eretail-transition-easing );
}

.eretail-btn--primary {
	background: var( --eretail-color-primary );
	color: #fff;
}

.eretail-btn--primary:hover,
.eretail-btn--primary:focus-visible {
	background: var( --eretail-color-primary-dark );
	color: #fff;
}

.eretail-btn--outline {
	background: transparent;
	color: var( --eretail-color-heading );
	border-color: var( --eretail-color-heading );
}

.eretail-btn--outline:hover,
.eretail-btn--outline:focus-visible {
	background: var( --eretail-color-heading );
	color: #fff;
}

/* ==========================================================================
   6. Forms
   ========================================================================== */

input,
textarea,
select,
button {
	font-family: inherit;
	font-size: 1rem;
}

label {
	display: block;
	font-weight: 600;
	margin-bottom: var( --eretail-space-xs );
	color: var( --eretail-color-heading );
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var( --eretail-color-border );
	border-radius: var( --eretail-radius-sm );
	background: var( --eretail-color-bg );
	color: var( --eretail-color-text );
	transition: border-color var( --eretail-transition-speed ) var( --eretail-transition-easing );
}

input:focus,
textarea:focus,
select:focus {
	border-color: var( --eretail-color-primary );
	outline: none;
	box-shadow: 0 0 0 3px rgba( 228, 30, 38, 0.15 );
}

textarea {
	min-height: 140px;
	resize: vertical;
}

.eretail-search-form {
	display: flex;
	gap: var( --eretail-space-xs );
	flex-wrap: wrap;
}

.eretail-search-form__input {
	flex: 1 1 240px;
}

/* ==========================================================================
   7. Images, figures, tables
   ========================================================================== */

img, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin: 0 0 var( --eretail-space-sm );
}

figcaption {
	font-size: 0.875rem;
	color: var( --eretail-color-text-light );
	margin-top: var( --eretail-space-xs );
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var( --eretail-space-sm );
}

th, td {
	text-align: left;
	padding: 12px;
	border-bottom: 1px solid var( --eretail-color-border );
}

/* ==========================================================================
   8. Header + navigation
   ========================================================================== */

.site-header {
	border-top: 0;
	border-bottom: 0;
	background: var( --eretail-color-bg );
	position: sticky;
	top: 0;
	z-index: 50;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Sit below the WP admin toolbar (also fixed at the top) for logged-in
   users, instead of sticking underneath it. 782px matches core's own
   admin-bar responsive breakpoint. */
.admin-bar .site-header {
	top: 32px;
}

@media ( max-width: 782px ) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/*
 * Scrolled state — applies once assets/js/navigation.js adds .is-scrolled
 * (~50px down), regardless of which Header Style is active: white
 * background, dark logo/nav, borders removed in favor of a single
 * understated shadow. This is intentionally NOT scoped to a specific
 * --style- variant, so the Default style (solid at rest) also loses its
 * heavier border for the same clean separation once the page is scrolled.
 */
.site-header.is-scrolled {
	background: var( --eretail-color-bg );
	border-top-color: transparent;
	border-bottom-color: transparent;
	box-shadow: 0 2px 8px rgba( 17, 17, 17, 0.08 );
}

/* "Transparent" and "Overlay" header styles: no solid background (or a
   dark scrim, for Overlay) and light logo/nav/border until scrolled — see
   the Header Style setting in Appearance → Customize → Header Settings,
   and the per-page override in the block editor sidebar. */
.site-header--style-transparent:not( .is-scrolled ),
.site-header--style-overlay:not( .is-scrolled ) {
	border-top-color: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

.site-header--style-transparent:not( .is-scrolled ) {
	background: transparent;
}

.site-header--style-overlay:not( .is-scrolled ) {
	background: rgba( 17, 17, 17, 0.35 );
}

.site-header--style-transparent:not( .is-scrolled ) .site-branding img,
.site-header--style-overlay:not( .is-scrolled ) .site-branding img {
	filter: brightness( 0 ) invert( 1 );
}

.site-header--style-transparent:not( .is-scrolled ) .site-title,
.site-header--style-overlay:not( .is-scrolled ) .site-title,
.site-header--style-transparent:not( .is-scrolled ) .primary-menu > .menu-item > .menu-link,
.site-header--style-overlay:not( .is-scrolled ) .primary-menu > .menu-item > .menu-link {
	color: #ffffff;
}

.site-header--style-transparent:not( .is-scrolled ) .menu-toggle__bars span,
.site-header--style-overlay:not( .is-scrolled ) .menu-toggle__bars span {
	background: #ffffff;
}

.site-header--style-transparent:not( .is-scrolled ) .site-header__cta.eretail-btn--outline,
.site-header--style-overlay:not( .is-scrolled ) .site-header__cta.eretail-btn--outline {
	color: #ffffff;
	border-color: #ffffff;
}

.site-header--style-transparent:not( .is-scrolled ) .site-header__cta.eretail-btn--outline:hover,
.site-header--style-overlay:not( .is-scrolled ) .site-header__cta.eretail-btn--outline:hover {
	background: #ffffff;
	color: var( --eretail-color-heading );
}

@media ( prefers-reduced-motion: reduce ) {
	.site-header {
		transition: none;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 14px;
	min-height: var( --eretail-header-height );
}

.site-branding,
.site-header__actions {
	/* Flex items default to a content-based min-width, which can force
	   the row (and the page) to overflow horizontally if their content
	   ever gets too wide (e.g. several header CTA buttons together) —
	   allowing them to shrink below that prevents that. */
	min-width: 0;
}

.site-branding .custom-logo,
.site-branding img {
	max-height: 44px;
	width: auto;
	transition: filter 0.3s ease;
}

.site-title {
	font-size: 1.4rem;
	font-weight: 800;
	color: var( --eretail-color-heading );
	text-decoration: none;
	transition: color 0.3s ease;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.site-header__ctas {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

.site-header__cta {
	white-space: nowrap;
	padding: 10px 18px;
	font-size: 0.85rem;
	transition: background var( --eretail-transition-speed ) var( --eretail-transition-easing ),
		color var( --eretail-transition-speed ) var( --eretail-transition-easing ),
		border-color var( --eretail-transition-speed ) var( --eretail-transition-easing );
}

@media ( max-width: 479.98px ) {
	/* Keep the first (primary) CTA visible on the smallest screens, per
	   the design comp — only additional CTAs collapse to save space. */
	.site-header__cta:not( :first-child ) {
		display: none;
	}

	.site-header__cta {
		padding: 8px 14px;
	}
}

.menu-toggle {
	display: inline-flex;
	background: none;
	border: 0;
	padding: 8px;
}

.menu-toggle__bars {
	display: block;
	width: 22px;
	height: 16px;
	position: relative;
}

.menu-toggle__bars span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: var( --eretail-color-heading );
	transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.3s ease;
}

.menu-toggle__bars span:nth-child( 1 ) { top: 0; }
.menu-toggle__bars span:nth-child( 2 ) { top: 7px; }
.menu-toggle__bars span:nth-child( 3 ) { top: 14px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child( 1 ) {
	transform: translateY( 7px ) rotate( 45deg );
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child( 2 ) {
	opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child( 3 ) {
	transform: translateY( -7px ) rotate( -45deg );
}

.primary-navigation__drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var( --eretail-color-border );
	flex: 0 0 auto;
}

.primary-navigation__drawer-title {
	font-weight: 700;
}

.nav-close {
	background: none;
	border: 0;
	padding: 8px;
	color: var( --eretail-color-heading );
}

.nav-backdrop[hidden] {
	display: none;
}

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu .menu-item {
	position: relative;
}

.primary-menu .menu-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	color: var( --eretail-color-heading );
	text-decoration: none;
	transition: color 0.3s ease;
}

.primary-menu .submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 4px;
	color: inherit;
}

.primary-menu .submenu-back {
	display: none;
}

/*
 * Off-canvas drawer (mobile/tablet, <1024px).
 *
 * The <nav> itself IS the drawer — `position: fixed`, anchored to the
 * viewport's top-right corner, with `width: min(100%, <drawer-width>)`.
 * For a fixed-position element, `%` resolves against its containing
 * block, which is the viewport itself unless some ancestor sets a
 * `transform`/`filter`/`perspective`/`will-change: transform` (none of
 * this theme's header ancestors do). That makes the `100%` half of the
 * `min()` a hard, structural cap: the drawer's layout box can never be
 * wider than the viewport, whether it's open, closed, or mid-transition
 * — no extra clipping wrapper is needed, and one was previously used
 * here but didn't reliably prevent overflow in practice, so it's been
 * removed in favor of this simpler, standard approach (the same pattern
 * used by most off-canvas drawer implementations).
 *
 * `overflow: hidden` on the drawer itself contains the sliding
 * drill-down panels defined below — they're transformed within it, but
 * can never render or be interacted with outside its bounds.
 */
.primary-navigation {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	height: 100dvh;
	width: min( 100%, 360px );
	background: var( --eretail-color-bg );
	transform: translateX( 100% );
	transition: transform 0.35s ease;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 32px rgba( 0, 0, 0, 0.15 );
	overflow: hidden;
	z-index: 100;
}

.primary-navigation.is-open {
	transform: translateX( 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.primary-navigation {
		transition: none;
	}
}

/*
 * Sliding submenu panels ("drill-down", native-app style): the visible
 * menu (top level or any submenu) is the "current" panel; going deeper
 * pushes the parent panel to "before" (off to the left) and brings the
 * child in from "after" (off to the right); the Back button reverses
 * that. All panels stack in the same box via position:absolute so they
 * can cross-fade/slide past each other instead of pushing page height
 * around like an accordion.
 *
 * This wrapper is the fixed-size "viewport" the panels are absolutely
 * positioned within — kept separate from #primary-menu itself because
 * #primary-menu is also one of the sliding panels (the root one), and an
 * element can't simultaneously be the positioning anchor for its panel
 * siblings *and* slide around like them.
 */
.primary-navigation__panels {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

.primary-navigation .menu-item {
	width: 100%;
}

.primary-navigation .menu-link {
	width: 100%;
	padding: 14px 20px;
	justify-content: space-between;
}

/*
 * Mobile only (this theme's breakpoint below 1024px — see the file's
 * header comment): the parent link and its arrow/chevron toggle are
 * separate sibling elements (Eretail_Systems_Nav_Walker::start_el() in
 * inc/navigation.php), so the parent's own URL always stays a normal,
 * separately-clickable link even when it also has children. Without an
 * explicit flex row, .menu-link's width: 100% above claims the entire
 * line on its own, leaving .submenu-toggle no room to sit beside it —
 * it wraps or renders misaligned instead of sitting vertically centered
 * at the row's trailing edge. Scoped here rather than added to the
 * shared rules above so it can never affect desktop, which lays the same
 * link+toggle pair out correctly today via plain inline flow at
 * width: auto and must be left exactly as it is.
 */
@media ( max-width: 1023.98px ) {
	.primary-navigation .menu-item {
		display: flex;
		align-items: center;
	}

	.primary-navigation .menu-link {
		flex: 1 1 auto;
		min-width: 0;
	}

	.primary-navigation .submenu-toggle {
		flex: 0 0 auto;
	}
}

.primary-navigation .primary-menu,
.primary-navigation .sub-menu {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: var( --eretail-color-bg );
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	transition: transform 0.3s ease;
}

/*
 * Every panel except the current one is visually clipped by this
 * element's own `overflow: hidden` (declared just above on
 * .primary-navigation), so pointer/touch users can never see or reach
 * it regardless of visibility. Keyboard/AT users are handled separately
 * and more directly: assets/js/navigation.js sets the `inert` property
 * on every panel whenever it sets data-panel-state, in the same
 * operation, so a panel can never be interactively reachable while
 * off-screen and there's no separate CSS state to fall out of sync with
 * it (an earlier visibility-based CSS-only approach could, in some
 * situations, get stuck fully hidden).
 */
.primary-navigation [data-panel-state="current"] { transform: translateX( 0 ); }
.primary-navigation [data-panel-state="before"] { transform: translateX( -100% ); }
.primary-navigation [data-panel-state="after"] { transform: translateX( 100% ); }

@media ( prefers-reduced-motion: reduce ) {
	.primary-navigation .primary-menu,
	.primary-navigation .sub-menu {
		transition: none;
	}
}

.primary-navigation .submenu-back {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 14px 20px;
	background: var( --eretail-color-bg-light );
	border: 0;
	border-bottom: 1px solid var( --eretail-color-border );
	font-weight: 600;
	color: var( --eretail-color-heading );
}

.nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.4 );
	z-index: 90;
}

@media ( max-width: 1023.98px ) {
	.nav-backdrop {
		display: block;
	}
}

@media ( min-width: 1024px ) {
	.menu-toggle {
		display: none;
	}

	.primary-navigation__drawer-header {
		display: none;
	}

	.primary-navigation {
		position: static;
		height: auto;
		width: auto;
		top: auto;
		right: auto;
		transform: none;
		box-shadow: none;
		overflow: visible;
		background: transparent;
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		z-index: auto;
	}

	.primary-navigation__panels {
		position: static;
		overflow: visible;
	}

	.primary-navigation .primary-menu {
		position: static;
		inset: auto;
		width: auto;
		height: auto;
		display: flex;
		align-items: center;
		gap: 32px;
		overflow: visible;
		padding: 0;
		background: transparent;
		transform: none !important;
	}

	.primary-navigation .menu-item {
		width: auto;
	}

	.primary-navigation .menu-link {
		width: auto;
		padding: 8px 2px;
		justify-content: flex-start;
	}

	.primary-navigation .sub-menu {
		position: absolute;
		inset: auto;
		/* Slightly overlap the parent row. The previous hidden-state
		   translateY(8px) created a real pointer dead-zone between the
		   parent item and its dropdown: the <li> lost :hover before the
		   pointer could reach the submenu, so the menu vanished. Keeping
		   the dropdown's hit box contiguous (with a 2px overlap) makes
		   hover navigation reliable without timers or JS hover hacks. */
		top: calc( 100% - 2px );
		left: 0;
		width: auto;
		min-width: 220px;
		height: auto;
		/* Overrides the base rule's overflow-y: auto (needed for the
		   mobile drill-down panels), which would otherwise force
		   overflow-x to compute as auto too (per the CSS Overflow spec's
		   cross-axis promotion rule) and clip a nested .sub-menu .sub-menu
		   positioned at left: 100% — entirely outside this box on the
		   x-axis — making nested dropdowns unable to ever show. */
		overflow: visible;
		padding: 8px;
		margin: 0;
		background: var( --eretail-color-bg );
		border: 1px solid var( --eretail-color-border );
		border-radius: var( --eretail-radius-md );
		box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.08 );
		opacity: 0;
		visibility: hidden;
		z-index: 60;
		/* Fade only. Translating the hidden menu downward creates a gap
		   that the cursor has to cross while the parent is no longer
		   hovered, which closes the dropdown before it can be entered. */
		transform: none !important;
		transition: opacity 0.18s ease, visibility 0.18s;
	}

	.primary-navigation .sub-menu .sub-menu {
		top: 0;
		left: 100%;
	}

	/*
	 * Not scoped to top-level only (no ".primary-menu >" ancestor
	 * restriction): .menu-item-has-children can appear at any nesting
	 * depth, and hovering/focusing a nested parent item needs to reveal
	 * its own child submenu the same way a top-level one does. :hover and
	 * :focus-within are scoped to the <li> itself, and the submenu is a
	 * DOM descendant of that same <li> positioned directly below/right of
	 * it with no gap, so moving the pointer from the parent link into the
	 * submenu keeps :hover true the whole time — the submenu never
	 * disappears mid-move. The aria-expanded condition is a secondary,
	 * click-driven affordance (assets/js/navigation.js) for anyone who
	 * prefers clicking the chevron over hovering.
	 */
	.primary-navigation .menu-item-has-children:hover > .sub-menu,
	.primary-navigation .menu-item-has-children:focus-within > .sub-menu,
	.primary-navigation .menu-item-has-children > .submenu-toggle[aria-expanded="true"] ~ .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none !important;
	}

	.primary-navigation .submenu-back {
		display: none;
	}

	.nav-backdrop {
		display: none;
	}
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.site-footer {
	background: var( --eretail-color-bg-light );
	border-top: 1px solid var( --eretail-color-border );
	margin-top: var( --eretail-space-2xl );
}

.footer-form {
	background: linear-gradient( 180deg, var( --eretail-color-bg-light ) 0%, rgba( 228, 30, 38, 0.08 ) 100% );
	padding: var( --eretail-space-xl ) var( --eretail-container-padding );
}

.footer-form__heading {
	max-width: 640px;
}

.footer-form__description {
	max-width: 640px;
	color: var( --eretail-color-text-light );
}

.footer-form__shortcode {
	max-width: 480px;
	margin-top: var( --eretail-space-sm );
}

.footer-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --eretail-space-lg );
	padding-block: var( --eretail-space-xl );
}

.footer-column__heading {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var( --eretail-space-sm );
}

.footer-column__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --eretail-space-xs );
}

.footer-column__menu a {
	color: var( --eretail-color-text );
	text-decoration: none;
}

.footer-column__menu a:hover,
.footer-column__menu a:focus-visible {
	color: var( --eretail-color-primary );
}

.footer-logo {
	max-height: 44px;
	width: auto;
	margin-bottom: var( --eretail-space-sm );
}

.footer-logo--text {
	font-weight: 800;
	font-size: 1.4rem;
	color: var( --eretail-color-heading );
}

.footer-supporting-text {
	color: var( --eretail-color-text-light );
	max-width: 320px;
}

.footer-contact {
	list-style: none;
	margin: 0 0 var( --eretail-space-sm );
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.footer-contact a {
	color: var( --eretail-color-text );
	text-decoration: none;
}

.footer-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var( --eretail-space-xs );
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var( --eretail-color-border );
	color: var( --eretail-color-heading );
}

.footer-social a:hover,
.footer-social a:focus-visible {
	background: var( --eretail-color-heading );
	color: #fff;
	border-color: var( --eretail-color-heading );
}

/*
 * Footer bottom row: two columns — copyright (+ legal nav) on the left,
 * payment/partner icons flush right on the right. Stacks on mobile.
 */
.footer-bottom {
	border-top: 1px solid var( --eretail-color-border );
	padding-block: var( --eretail-space-sm ) var( --eretail-space-lg );
	display: flex;
	flex-direction: column;
	gap: var( --eretail-space-md );
}

.footer-bottom__left {
	display: flex;
	flex-direction: column;
	gap: var( --eretail-space-xs );
}

.footer-bottom__right {
	display: flex;
}

.footer-legal__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var( --eretail-space-sm );
}

.footer-legal__menu a {
	color: var( --eretail-color-text-light );
	text-decoration: none;
	font-size: 0.875rem;
}

.footer-payment-icons ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var( --eretail-space-md );
	align-items: center;
	justify-content: flex-start;
}

.footer-payment-icons img {
	height: 28px;
	width: auto;
}

@media ( min-width: 600px ) {
	.footer-columns {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 782px ) {
	.footer-bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.footer-bottom__right {
		margin-left: auto;
	}

	.footer-payment-icons ul {
		justify-content: flex-end;
	}
}

@media ( min-width: 1024px ) {
	.footer-columns {
		grid-template-columns: 1.4fr repeat( 4, 1fr );
	}
}

/* ==========================================================================
   10. Blog content, cards, pagination, search, 404
   ========================================================================== */

.eretail-archive,
.eretail-page,
.eretail-single,
.eretail-404 {
	padding-block: var( --eretail-space-xl );
}

.eretail-archive__header {
	margin-bottom: var( --eretail-space-lg );
}

.eretail-archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --eretail-space-lg );
}

.eretail-card {
	border: 1px solid var( --eretail-color-border );
	border-radius: var( --eretail-radius-md );
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.eretail-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.eretail-card__body {
	padding: var( --eretail-space-md );
}

.eretail-card__title a {
	color: var( --eretail-color-heading );
	text-decoration: none;
}

.eretail-card__meta {
	color: var( --eretail-color-text-light );
	font-size: 0.875rem;
}

.eretail-pagination {
	margin-top: var( --eretail-space-xl );
	display: flex;
	justify-content: center;
	gap: var( --eretail-space-sm );
}

.eretail-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 8px;
	border-radius: var( --eretail-radius-sm );
	border: 1px solid var( --eretail-color-border );
	color: var( --eretail-color-heading );
	text-decoration: none;
}

.eretail-pagination .page-numbers.current {
	background: var( --eretail-color-primary );
	border-color: var( --eretail-color-primary );
	color: #fff;
}

.eretail-no-results {
	max-width: 560px;
}

.eretail-404 {
	text-align: center;
}

.eretail-404 .eretail-search-form {
	justify-content: center;
	max-width: 480px;
	margin: var( --eretail-space-md ) auto;
}

.eretail-404__home {
	margin-top: var( --eretail-space-sm );
}

.eretail-comments {
	margin-top: var( --eretail-space-xl );
	padding-top: var( --eretail-space-xl );
	border-top: 1px solid var( --eretail-color-border );
}

.eretail-comment-list {
	list-style: none;
	margin: 0 0 var( --eretail-space-lg );
	padding: 0;
}

.eretail-comment-list .children {
	list-style: none;
	margin-left: var( --eretail-space-lg );
	padding: 0;
}

@media ( min-width: 600px ) {
	.eretail-archive__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1024px ) {
	.eretail-archive__grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* ==========================================================================
   11. Customizer repeater control (Social Links / Payment Icons)
   admin-only — loaded solely on the Customizer screen, see inc/enqueue.php
   ========================================================================== */

.eretail-repeater-control {
	display: block;
	margin-bottom: 8px;
}

.eretail-repeater__rows {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.eretail-repeater__row {
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
	padding: 10px;
	margin-bottom: 10px;
}

.eretail-repeater__row-heading {
	font-weight: 600;
	margin-bottom: 6px;
}

.eretail-repeater__field {
	margin: 0 0 8px;
}

.eretail-repeater__field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 2px;
}

.eretail-repeater__field input[type="text"],
.eretail-repeater__field input[type="url"] {
	width: 100%;
}

.eretail-repeater__media-preview {
	max-width: 100%;
	height: 40px;
	width: auto;
	display: block;
	margin-bottom: 6px;
}

.eretail-repeater__row-controls {
	display: flex;
	gap: 10px;
	margin-top: 6px;
}

.eretail-repeater__empty {
	font-style: italic;
	color: #646970;
	font-size: 13px;
	margin-bottom: 10px;
}

/* ==========================================================================
   Responsive hardening: off-canvas navigation + homepage ticker
   ========================================================================== */

/* The logo strip sits directly beneath the hero in the approved homepage
   comp, so don't add the generic front-page inter-block margin on top of the
   block's own controlled vertical padding. */
.eretail-front-page > .wp-block-eretail-systems-partner-logos,
.eretail-front-page > .eretail-partner-logos {
	margin-top: 0;
}

@media ( max-width: 1023.98px ) {
	/* Keep the closed drawer completely out of layout/paint calculations.
	   The transform still provides the slide animation, while visibility and
	   pointer-events prevent the translated 360px drawer from producing the
	   phantom white area seen after switching DevTools to a mobile viewport. */
	.primary-navigation {
		width: min( 100vw, 360px );
		max-width: 100vw;
		visibility: hidden;
		pointer-events: none;
		transition: transform 0.35s ease, visibility 0s linear 0.35s;
	}

	.primary-navigation.is-open {
		visibility: visible;
		pointer-events: auto;
		transition: transform 0.35s ease, visibility 0s linear 0s;
	}

	/* Prevent header flex items from preserving a desktop intrinsic width
	   after a responsive resize. */
	.site-header,
	.site-header__inner,
	.site-branding,
	.site-header__actions {
		max-width: 100%;
	}

	.site-header__inner {
		width: 100%;
	}
}

/* ========================================================================== 
   9b. Footer — approved homepage composition
   ========================================================================== */
.site-footer {
	margin-top: 0;
	background: #f9f8f8;
	border-top: 1px solid #dedede;
}

.site-footer .footer-columns,
.site-footer .footer-bottom {
	width: min( calc( 100% - 64px ), 1376px );
	margin-inline: auto;
}

.site-footer .footer-columns {
	display: grid;
	grid-template-columns: minmax( 250px, 1.25fr ) repeat( 4, minmax( 150px, 0.85fr ) );
	column-gap: clamp( 48px, 5.5vw, 104px );
	row-gap: 32px;
	align-items: start;
	padding: 74px 0 67px;
}

.site-footer .footer-column--brand {
	min-width: 0;
}

.site-footer .footer-logo {
	display: block;
	width: auto;
	max-width: 138px;
	max-height: none;
	height: auto;
	margin: 0 0 22px;
}

.site-footer .footer-supporting-text {
	max-width: 286px;
	margin: 0 0 24px;
	color: #6c6c6c;
	font-size: 18px;
	line-height: 1.65;
}

.site-footer .footer-column__heading {
	margin: 0 0 20px;
	color: #121212;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.site-footer .footer-column__menu {
	gap: 13px;
}

.site-footer .footer-column__menu a {
	color: #4f4f4f;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.45;
}

.site-footer .footer-social {
	gap: 10px;
}

.site-footer .footer-social a {
	width: 44px;
	height: 44px;
	border: 1px solid #d9d9d9;
	background: transparent;
	color: #111111;
	font-size: 18px;
}

.site-footer .footer-social a:hover,
.site-footer .footer-social a:focus-visible {
	background: #111111;
	border-color: #111111;
	color: #ffffff;
}

.site-footer .footer-bottom {
	min-height: 114px;
	padding: 24px 0 42px;
	border-top: 1px solid #dedede;
	align-items: center;
}

.site-footer .footer-bottom__left {
	gap: 0;
}

.site-footer .footer-legal__copyright {
	margin: 0;
	color: #555555;
	font-size: 17px;
	line-height: 1.5;
}

.site-footer .footer-legal__nav {
	display: none;
}

.site-footer .footer-payment-icons ul {
	gap: 18px;
}

.site-footer .footer-payment-icons li {
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-footer .footer-payment-icons img {
	display: block;
	width: auto;
	max-width: 50px;
	height: 28px;
	object-fit: contain;
}

@media ( max-width: 1023px ) {
	.site-footer .footer-columns {
		grid-template-columns: minmax( 220px, 1fr ) repeat( 2, minmax( 140px, 0.65fr ) );
		column-gap: 48px;
	}
}

@media ( max-width: 781px ) {
	.site-footer {
		border-top-color: #dedede;
	}

	.site-footer .footer-columns,
	.site-footer .footer-bottom {
		width: min( calc( 100% - 40px ), 420px );
	}

	.site-footer .footer-columns {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
		padding: 46px 0 28px;
		text-align: center;
	}

	.site-footer .footer-column {
		width: 100%;
	}

	.site-footer .footer-column--brand {
		display: contents;
	}

	.site-footer .footer-logo {
		order: 0;
		width: min( 250px, 72vw );
		max-width: 250px;
		margin: 0 auto 36px;
	}

	.site-footer .footer-supporting-text,
	.site-footer .footer-contact,
	.site-footer .footer-column__menu,
	.site-footer .footer-payment-icons {
		display: none !important;
	}

	.site-footer .footer-column:not(.footer-column--brand) {
		margin: 0 0 24px;
	}

	.site-footer .footer-column__heading {
		margin: 0;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}

	.site-footer .footer-social {
		order: 10;
		justify-content: center;
		gap: 10px;
		margin: 0 auto 31px;
	}

	.site-footer .footer-social a {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}

	.site-footer .footer-bottom {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding: 26px 0 59px;
		gap: 33px;
	}

	.site-footer .footer-bottom__left {
		display: contents;
	}

	.site-footer .footer-legal__nav {
		display: block;
		order: 0;
	}

	.site-footer .footer-legal__menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.site-footer .footer-legal__menu a {
		color: #111111;
		font-size: 14px;
		line-height: 1.2;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.site-footer .footer-legal__copyright {
		order: 1;
		font-size: 14px;
		line-height: 1.4;
		text-align: center;
	}
}
@media ( max-width: 781px ) {
	.site-footer .footer-column:nth-of-type( 2 ) { order: 1; }
	.site-footer .footer-column:nth-of-type( 3 ) { order: 2; }
	.site-footer .footer-column:nth-of-type( 4 ) { order: 3; }
	.site-footer .footer-column:nth-of-type( 5 ) { order: 4; }
	.site-footer .footer-social { order: 5; }
}

/* ========================================================================== 
   9c. Navigation + footer refinement — v1.0.18
   ========================================================================== */

/* Desktop primary navigation: keep menu labels intact, expose current-page
   hierarchy clearly, and make dropdown motion feel deliberate without
   introducing a hover dead-zone between a parent and its submenu. */
@media ( min-width: 1024px ) {
	.primary-navigation .primary-menu {
		gap: clamp( 24px, 2.25vw, 38px );
	}

	.primary-navigation .menu-link {
		position: relative;
		white-space: nowrap;
		transition: color 180ms ease;
	}

	.primary-navigation .primary-menu > .menu-item > .menu-link::after {
		content: "";
		position: absolute;
		left: 2px;
		right: 2px;
		bottom: 1px;
		height: 2px;
		border-radius: 999px;
		background: var( --eretail-color-primary, #e41e26 );
		transform: scaleX( 0 );
		transform-origin: left center;
		transition: transform 180ms ease;
	}

	.primary-navigation .primary-menu > .menu-item:hover > .menu-link,
	.primary-navigation .primary-menu > .menu-item:focus-within > .menu-link,
	.primary-navigation .primary-menu > .current-menu-item > .menu-link,
	.primary-navigation .primary-menu > .current-menu-parent > .menu-link,
	.primary-navigation .primary-menu > .current-menu-ancestor > .menu-link,
	.primary-navigation .primary-menu > .current_page_item > .menu-link,
	.primary-navigation .primary-menu > .current_page_parent > .menu-link,
	.primary-navigation .primary-menu > .current_page_ancestor > .menu-link {
		color: var( --eretail-color-primary, #e41e26 );
	}

	.primary-navigation .primary-menu > .current-menu-item > .menu-link::after,
	.primary-navigation .primary-menu > .current-menu-parent > .menu-link::after,
	.primary-navigation .primary-menu > .current-menu-ancestor > .menu-link::after,
	.primary-navigation .primary-menu > .current_page_item > .menu-link::after,
	.primary-navigation .primary-menu > .current_page_parent > .menu-link::after,
	.primary-navigation .primary-menu > .current_page_ancestor > .menu-link::after {
		transform: scaleX( 1 );
	}

	.primary-navigation .sub-menu {
		width: max-content;
		min-width: 250px;
		max-width: min( 440px, calc( 100vw - 32px ) );
		padding: 10px;
		border-radius: 14px;
		box-shadow: 0 18px 45px rgba( 0, 0, 0, 0.12 );
		transform-origin: top left !important;
		filter: blur( 0.001px );
		transition: opacity 180ms ease, visibility 180ms ease, box-shadow 180ms ease, filter 180ms ease;
	}

	.primary-navigation .sub-menu > .menu-item {
		display: block;
	}

	.primary-navigation .sub-menu .menu-link {
		display: flex;
		width: 100%;
		padding: 11px 14px;
		border-radius: 9px;
		white-space: nowrap;
		line-height: 1.25;
		color: var( --eretail-color-heading );
		transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
	}

	.primary-navigation .sub-menu .menu-item:hover > .menu-link,
	.primary-navigation .sub-menu .menu-item:focus-within > .menu-link {
		color: var( --eretail-color-primary, #e41e26 );
		background: rgba( 228, 30, 38, 0.065 );
		transform: translateX( 2px );
	}

	.primary-navigation .sub-menu .current-menu-item > .menu-link,
	.primary-navigation .sub-menu .current-menu-parent > .menu-link,
	.primary-navigation .sub-menu .current-menu-ancestor > .menu-link,
	.primary-navigation .sub-menu .current_page_item > .menu-link,
	.primary-navigation .sub-menu .current_page_parent > .menu-link,
	.primary-navigation .sub-menu .current_page_ancestor > .menu-link {
		color: var( --eretail-color-primary, #e41e26 );
		background: rgba( 228, 30, 38, 0.09 );
		font-weight: 650;
	}

	.primary-navigation .submenu-toggle {
		transition: color 160ms ease, transform 180ms ease;
	}

	.primary-navigation .menu-item:hover > .submenu-toggle,
	.primary-navigation .menu-item:focus-within > .submenu-toggle,
	.primary-navigation .current-menu-parent > .submenu-toggle,
	.primary-navigation .current-menu-ancestor > .submenu-toggle,
	.primary-navigation .current_page_parent > .submenu-toggle,
	.primary-navigation .current_page_ancestor > .submenu-toggle {
		color: var( --eretail-color-primary, #e41e26 );
	}

	.primary-navigation .menu-item-has-children:hover > .submenu-toggle .submenu-toggle__icon,
	.primary-navigation .menu-item-has-children:focus-within > .submenu-toggle .submenu-toggle__icon,
	.primary-navigation .menu-item-has-children > .submenu-toggle[aria-expanded="true"] .submenu-toggle__icon {
		transform: rotate( 180deg );
	}

	.primary-navigation .submenu-toggle__icon {
		transition: transform 180ms ease;
	}
}

/* Mobile active states stay subtle but visible inside the drill-down drawer. */
@media ( max-width: 1023.98px ) {
	.primary-navigation .current-menu-item > .menu-link,
	.primary-navigation .current-menu-parent > .menu-link,
	.primary-navigation .current-menu-ancestor > .menu-link,
	.primary-navigation .current_page_item > .menu-link,
	.primary-navigation .current_page_parent > .menu-link,
	.primary-navigation .current_page_ancestor > .menu-link {
		color: var( --eretail-color-primary, #e41e26 );
		font-weight: 650;
	}
}

/* Footer desktop: use the available width more efficiently so marketing
   phrases stay together instead of wrapping after nearly every word. */
@media ( min-width: 1024px ) {
	.site-footer .footer-columns,
	.site-footer .footer-bottom {
		width: min( calc( 100% - 80px ), 1456px );
	}

	.site-footer .footer-columns {
		grid-template-columns:
			minmax( 270px, 1.18fr )
			minmax( 220px, 0.88fr )
			minmax( 215px, 0.86fr )
			minmax( 300px, 1.12fr )
			minmax( 210px, 0.84fr );
		column-gap: clamp( 34px, 3.1vw, 58px );
	}

	.site-footer .footer-column__menu a {
		display: inline-block;
		white-space: nowrap;
	}

	.site-footer .footer-column__heading-link {
		color: inherit;
		text-decoration: none;
		white-space: nowrap;
		transition: color 160ms ease;
	}

	.site-footer .footer-column__heading-link:hover,
	.site-footer .footer-column__heading-link:focus-visible {
		color: var( --eretail-color-primary, #e41e26 );
	}

	/* Legal links are useful on desktop too. Keep them tucked beside the
	   copyright rather than hiding an assigned WordPress menu. */
	.site-footer .footer-bottom__left {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		column-gap: 24px;
		row-gap: 10px;
	}

	.site-footer .footer-legal__nav {
		display: block;
	}

	.site-footer .footer-legal__menu {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px 18px;
	}

	.site-footer .footer-legal__menu li {
		position: relative;
	}

	.site-footer .footer-legal__menu li + li::before {
		content: "·";
		position: absolute;
		left: -11px;
		top: 50%;
		transform: translateY( -52% );
		color: #9a9a9a;
	}

	.site-footer .footer-legal__menu a {
		color: #626262;
		font-size: 14px;
		line-height: 1.4;
		text-decoration: none;
		white-space: nowrap;
		transition: color 160ms ease;
	}

	.site-footer .footer-legal__menu a:hover,
	.site-footer .footer-legal__menu a:focus-visible {
		color: #111111;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/* Heading links remain useful on mobile even though child menu items are
   intentionally hidden to match the approved compact footer treatment. */
.site-footer .footer-column__heading-link {
	color: inherit;
	text-decoration: none;
}

/* ========================================================================== 
   9d. Footer + mobile navigation stability — v1.0.19
   ========================================================================== */

@media ( min-width: 1024px ) {
	.site-footer .footer-columns {
		grid-template-columns:
			minmax( 250px, 1.12fr )
			minmax( 220px, 0.95fr )
			minmax( 205px, 0.88fr )
			minmax( 285px, 1.18fr )
			minmax( 220px, 0.95fr );
		column-gap: clamp( 28px, 2.6vw, 48px );
	}

	.site-footer .footer-column,
	.site-footer .footer-column__menu,
	.site-footer .footer-column__menu li {
		min-width: 0;
	}

	/* Let long marketing phrases wrap only when the column truly needs it.
	   This avoids the v1.0.18 overflow caused by forcing every link to nowrap. */
	.site-footer .footer-column__menu a {
		display: inline;
		white-space: normal;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
		text-wrap: pretty;
	}

	.site-footer .footer-column__heading-link {
		white-space: normal;
	}

	/* Legal links belong with the brand/supporting utility content rather
	   than beside the copyright row. */
	.site-footer .footer-legal__nav--brand {
		display: block;
		margin-top: 20px;
	}

	.site-footer .footer-legal__nav--brand .footer-legal__menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 14px;
	}

	.site-footer .footer-legal__nav--brand .footer-legal__menu li + li::before {
		content: none;
	}

	.site-footer .footer-legal__nav--brand .footer-legal__menu a {
		font-size: 13px;
		color: #686868;
		text-decoration: underline;
		text-underline-offset: 3px;
		white-space: nowrap;
	}

	.site-footer .footer-bottom__left {
		display: block;
	}
}

@media ( max-width: 1023.98px ) {
	/* Every mobile row stays above sliding panel transforms and has a clear,
	   full-width hit target. */
	.primary-navigation .primary-menu,
	.primary-navigation .sub-menu {
		overscroll-behavior: contain;
	}

	.primary-navigation .menu-item {
		position: relative;
		min-height: 52px;
	}

	.primary-navigation .menu-link {
		position: relative;
		z-index: 1;
		min-height: 52px;
		padding: 14px 54px 14px 20px;
		white-space: normal;
		line-height: 1.3;
	}

	.primary-navigation .menu-item:not(.menu-item-has-children) > .menu-link {
		padding-right: 20px;
	}

	.primary-navigation .submenu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		width: 52px;
		height: 52px;
		padding: 0;
		cursor: pointer;
	}

	.primary-navigation .submenu-back {
		position: sticky;
		top: 0;
		z-index: 5;
		min-height: 54px;
		cursor: pointer;
		background: #fff;
	}
}

@media ( max-width: 781px ) {
	.site-footer .footer-legal__nav--brand {
		order: 6;
		width: 100%;
		margin: 0 auto 0;
		padding: 27px 0 0;
		border-top: 1px solid #dedede;
	}

	.site-footer .footer-legal__nav--brand .footer-legal__menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.site-footer .footer-legal__nav--brand .footer-legal__menu a {
		font-size: 14px;
		color: #111;
	}

	/* Legal nav now lives in the brand area, so the bottom row only needs
	   the copyright. */
	.site-footer .footer-bottom {
		padding-top: 28px;
		gap: 0;
	}
}

/* ========================================================================== 
   9e. Mobile navigation rebuild — v1.0.21
   ========================================================================== */

/* The desktop WordPress tree remains untouched. A separate flat panel set is
   generated by navigation.js for mobile, eliminating DOM re-parenting bugs. */
.primary-navigation__mobile-panels {
	display: none;
}

@media ( max-width: 1023.98px ) {
	.primary-navigation {
		box-sizing: border-box;
		width: min( 360px, 100% );
		max-width: 100%;
		transform: translate3d( 100%, 0, 0 );
		contain: layout paint;
		isolation: isolate;
	}

	.primary-navigation.is-open {
		transform: translate3d( 0, 0, 0 );
	}

	/* The nested source tree is for desktop only on small viewports. */
	.primary-navigation__panels > #primary-menu {
		display: none !important;
	}

	.primary-navigation__mobile-panels {
		display: block;
		position: absolute;
		inset: 0;
		overflow: hidden;
	}

	.primary-navigation .mobile-nav-panel {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		margin: 0;
		padding: 8px 0;
		list-style: none;
		background: var( --eretail-color-bg );
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		transition: transform 0.3s ease;
		will-change: transform;
	}

	.primary-navigation .mobile-nav-panel[data-panel-state="current"] {
		transform: translate3d( 0, 0, 0 );
		pointer-events: auto;
	}

	.primary-navigation .mobile-nav-panel[data-panel-state="before"] {
		transform: translate3d( -100%, 0, 0 );
		pointer-events: none;
	}

	.primary-navigation .mobile-nav-panel[data-panel-state="after"] {
		transform: translate3d( 100%, 0, 0 );
		pointer-events: none;
	}

	.primary-navigation .mobile-nav-panel > .menu-item {
		display: flex;
		align-items: stretch;
		position: relative;
		width: 100%;
		min-height: 54px;
	}

	.primary-navigation .mobile-nav-panel .menu-link {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		min-height: 54px;
		box-sizing: border-box;
		padding: 14px 56px 14px 20px;
		white-space: normal;
		line-height: 1.3;
		position: relative;
		z-index: 1;
	}

	.primary-navigation .mobile-nav-panel .menu-item:not(.menu-item-has-children) > .menu-link {
		padding-right: 20px;
	}

	.primary-navigation .mobile-nav-panel .submenu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 3;
		width: 56px;
		min-height: 54px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		touch-action: manipulation;
	}

	.primary-navigation .mobile-nav-panel .submenu-toggle__icon {
		transform: rotate( -90deg );
	}

	.primary-navigation .mobile-nav-panel > .submenu-back {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 10;
		align-items: center;
		gap: 9px;
		width: 100%;
		min-height: 56px;
		box-sizing: border-box;
		padding: 14px 20px;
		border: 0;
		border-bottom: 1px solid var( --eretail-color-border );
		background: #fff;
		color: var( --eretail-color-heading );
		font: inherit;
		font-weight: 600;
		text-align: left;
		cursor: pointer;
		touch-action: manipulation;
	}

	/* Keep the off-canvas element from ever affecting document width, even
	   during resize/devtools breakpoint changes and after closing it. */
	html,
	body,
	.site-header,
	.site-main,
	.site-footer {
		min-width: 0;
		max-width: 100%;
	}

	body {
		width: 100%;
	}
}

@media ( min-width: 1024px ) {
	.primary-navigation__mobile-panels {
		display: none !important;
	}
}

/* ==========================================================================
   Footer link containment + typography — v1.0.22
   ========================================================================== */
.site-footer,
.site-footer .eretail-container,
.site-footer .footer-columns,
.site-footer .footer-column,
.site-footer .footer-column__menu,
.site-footer .footer-column__menu li {
	min-width: 0;
	max-width: 100%;
}

.site-footer .footer-column__menu a {
	color: rgba(0, 0, 0, 0.60);
	font-family: "Avenir Next", Avenir, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 19px;
	display: inline;
	white-space: normal;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
	max-width: 100%;
}

@media ( min-width: 1024px ) {
	.site-footer .footer-columns {
		/* Zero minimum tracks are intentional: long labels wrap instead of
		   forcing the footer/grid wider than its parent at narrower desktops. */
		grid-template-columns: 1.18fr 0.95fr 0.9fr 1.2fr 0.95fr;
		column-gap: clamp(20px, 2.4vw, 46px);
		width: 100%;
		max-width: 100%;
	}
}
/* ==========================================================================
   Footer content width — v1.0.23
   Keep the logo + menu columns inside the approved 1240px centered wrapper.
   ========================================================================== */
.site-footer .footer-columns {
	width: calc(100% - 48px);
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 0;
}

@media ( max-width: 599px ) {
	.site-footer .footer-columns {
		width: calc(100% - 40px);
	}
}


/* ========================================================================== 
   Footer bottom width + responsive nav sync — v1.0.24
   ========================================================================== */

/* Match the approved 1240px centered width used by the main footer columns. */
.site-footer .footer-bottom {
	width: calc(100% - 48px);
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 0;
	box-sizing: border-box;
}

@media ( max-width: 599px ) {
	.site-footer .footer-bottom {
		width: calc(100% - 40px);
	}
}

/* Mobile overlay stacking — v1.0.25.
 *
 * The CTA/toggle group used to sit at a higher z-index than the drawer, so
 * those header controls painted on top of the open mobile menu. Keep the
 * ordinary header content at the base layer and put the backdrop + drawer
 * above the entire header row. The drawer has its own close button, so the
 * hamburger does not need to remain above the open panel. */
@media ( max-width: 1023.98px ) {
	.site-header {
		isolation: isolate;
	}

	/* Do not give the entire inner header row a z-index. Doing so creates a
	   stacking context that traps the fixed mobile drawer beneath the
	   backdrop (which is a sibling of .site-header__inner). Keep only the
	   ordinary visible controls on the base layer so the drawer can sit
	   above the backdrop as intended. */
	.site-header__inner {
		position: relative;
		z-index: auto;
	}

	.site-branding,
	.site-header__actions,
	.site-header__ctas,
	.menu-toggle {
		position: relative;
		z-index: 1;
	}

	.primary-navigation {
		z-index: 300;
		pointer-events: none;
	}

	.primary-navigation.is-open {
		pointer-events: auto;
	}

	.nav-backdrop {
		z-index: 250;
	}

	.menu-toggle {
		cursor: pointer;
		touch-action: manipulation;
	}
}

/* ==========================================================================
   Block-built inner pages
   ========================================================================== */

/*
 * Standard pages use the same section architecture as the front page:
 * blocks may span the viewport while each block controls its own inner
 * container. Blog/archive/single templates remain constrained separately.
 */
.eretail-page--blocks {
	padding-block: 0;
	width: 100%;
	max-width: none;
}

.eretail-page-content--blocks,
.eretail-page-content--blocks .eretail-page-content__body {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.eretail-page-content--blocks .eretail-page-content__body > :first-child {
	margin-top: 0;
}

.eretail-page-content--blocks .eretail-page-content__body > :last-child {
	margin-bottom: 0;
}

.eretail-page-comments {
	padding-block: var( --eretail-space-xl );
}

/* Inner-page core Gutenberg blocks: custom sections remain full-bleed. */
.eretail-page-content--blocks .eretail-page-content__body > :is(.wp-block-heading,.wp-block-paragraph,.wp-block-list,.wp-block-quote,.wp-block-buttons,.wp-block-image,.wp-block-table,.wp-block-columns,.wp-block-separator,.wp-block-shortcode) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--eretail-container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--eretail-container-padding);
  padding-right: var(--eretail-container-padding);
}
.eretail-page-content--blocks .eretail-page-content__body > .wp-block-heading {
  margin-top: clamp(2.5rem, 5vw, 5rem);
  margin-bottom: 1.25rem;
}
.eretail-page-content--blocks .eretail-page-content__body > .wp-block-paragraph {
  margin-top: 0;
  margin-bottom: 1.5rem;
}
.eretail-page-content--blocks .eretail-page-content__body > :is(.wp-block-heading,.wp-block-paragraph,.wp-block-list,.wp-block-quote,.wp-block-buttons,.wp-block-image,.wp-block-table,.wp-block-columns,.wp-block-separator,.wp-block-shortcode):last-child { margin-bottom: clamp(2rem, 4vw, 4rem); }
/* Preserve intentional full-width core blocks. */
.eretail-page-content--blocks .eretail-page-content__body > .alignfull { max-width: none; }

/* Contact page WPForms 2203: align with the site's editorial container. */
body.page-id-18 #wpforms-2203 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--eretail-container-width, 1200px);
  margin: 0 auto clamp(3rem, 6vw, 6rem);
  padding-inline: var(--eretail-container-padding, 24px);
  --wpforms-field-size-input-height: 52px;
  --wpforms-field-size-input-spacing: 22px;
  --wpforms-field-size-font-size: 16px;
  --wpforms-field-size-padding-h: 16px;
  --wpforms-container-border-radius: 8px;
  --wpforms-button-background-color: #e41e26;
  --wpforms-button-text-color: #fff;
  --wpforms-button-border-radius: 999px;
}
body.page-id-18 #wpforms-2203 .wpforms-form {
  width: 100%;
  max-width: 800px;
}
body.page-id-18 #wpforms-2203 .wpforms-field-container {
  width: 100%;
}
body.page-id-18 #wpforms-2203 .wpforms-field:not([style*="position: absolute"]) {
  margin-bottom: 1.25rem;
}
body.page-id-18 #wpforms-2203 .wpforms-field-label,
body.page-id-18 #wpforms-2203 legend.wpforms-field-label {
  font-family: inherit;
  font-weight: 650;
  color: #171717;
  margin-bottom: 0.6rem;
}
body.page-id-18 #wpforms-2203 :is(input[type="text"],input[type="email"],input[type="tel"],select,textarea):not([tabindex="-1"]) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 52px;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  background: #fff;
  color: #171717;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.page-id-18 #wpforms-2203 textarea:not([tabindex="-1"]) {
  min-height: 160px;
  resize: vertical;
}
body.page-id-18 #wpforms-2203 :is(input,textarea,select):focus-visible {
  outline: 2px solid #e41e26;
  outline-offset: 2px;
  border-color: #e41e26;
}
body.page-id-18 #wpforms-2203 .wpforms-field-sublabel {
  color: #666;
  font-size: .875rem;
}
body.page-id-18 #wpforms-2203 .wpforms-submit-container {
  padding-top: .5rem;
}
body.page-id-18 #wpforms-2203 button.wpforms-submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .8rem 2.25rem;
  border: 2px solid #e41e26;
  border-radius: 999px;
  background: #e41e26;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease;
}
body.page-id-18 #wpforms-2203 button.wpforms-submit:hover {
  background: #bd161d;
  border-color: #bd161d;
  color: #fff;
}
body.page-id-18 #wpforms-2203 button.wpforms-submit:focus-visible {
  outline: 3px solid #171717;
  outline-offset: 3px;
}
body.page-id-18 #wpforms-2203 button.wpforms-submit:disabled {
  opacity: .65;
  cursor: wait;
}
@media (max-width: 600px) {
  body.page-id-18 #wpforms-2203 .wpforms-field-row-block.wpforms-one-half {
    float: none;
    width: 100%;
    margin-left: 0;
  }
  body.page-id-18 #wpforms-2203 .wpforms-field-row-block.wpforms-one-half + .wpforms-field-row-block {
    margin-top: 1rem;
  }
}

/* WPForms 2203 layout: one authoritative set of rules.
   Use flex for the nested Name inputs to avoid WPForms grid-placement
   declarations pushing First/Last into different rows. */
body.page-id-18 #wpforms-2203 .wpforms-form { max-width: 900px; }
body.page-id-18 #wpforms-2203 .wpforms-field-name fieldset {
  display: block !important;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body.page-id-18 #wpforms-2203 .wpforms-field-name .wpforms-field-row {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: flex-start;
  gap: 24px;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.page-id-18 #wpforms-2203 .wpforms-field-name .wpforms-field-row > .wpforms-field-row-block {
  display: block !important;
  position: static !important;
  float: none !important;
  flex: 1 1 0 !important;
  order: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  transform: none !important;
}
body.page-id-18 #wpforms-2203 .wpforms-field-name .wpforms-field-row > .wpforms-first { order: -1 !important; }
body.page-id-18 #wpforms-2203 .wpforms-field-name .wpforms-field-row input {
  display: block;
  width: 100% !important;
  max-width: none !important;
}
body.page-id-18 #wpforms-2203 .wpforms-form :is(input.wpforms-field-medium,textarea.wpforms-field-medium,select.wpforms-field-medium) {
  max-width: 100% !important;
}
body.page-id-18 #wpforms-2203 .wpforms-field-container > .wpforms-field-textarea textarea { min-height: 150px; }
/* WPForms honeypots must remain in the DOM and participate in submission,
   but must not consume visual grid cells. */
body.page-id-18 #wpforms-2203 .wpforms-field-container > .wpforms-field:has(> input[tabindex="-1"][aria-hidden="true"]) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none;
}
@media (min-width: 768px) {
  body.page-id-18 #wpforms-2203 .wpforms-field-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 26px;
    align-items: start;
  }
  body.page-id-18 #wpforms-2203 .wpforms-field-container > .wpforms-field {
    min-width: 0;
    margin: 0;
  }
  body.page-id-18 #wpforms-2203 #wpforms-2203-field_1-container { grid-column: 1 / -1; }
  body.page-id-18 #wpforms-2203 #wpforms-2203-field_5-container { grid-column: 1; }
  body.page-id-18 #wpforms-2203 #wpforms-2203-field_2-container { grid-column: 2; }
  body.page-id-18 #wpforms-2203 #wpforms-2203-field_6-container { grid-column: 1; }
  body.page-id-18 #wpforms-2203 #wpforms-2203-field_3-container { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  body.page-id-18 #wpforms-2203 .wpforms-field-container { display: block; }
  body.page-id-18 #wpforms-2203 .wpforms-field-name .wpforms-field-row {
    flex-direction: column !important;
    gap: 16px;
  }
  body.page-id-18 #wpforms-2203 .wpforms-field-name .wpforms-field-row > .wpforms-field-row-block {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}

/* ========================================================================
   Blog refresh — editorial index, topic navigation and readable full articles
   ======================================================================== */
.eretail-blog__hero {
  padding: clamp(48px, 6vw, 88px) 0;
  background: #f8f7f7;
  border-bottom: 1px solid var(--eretail-color-border);
}
.eretail-blog__hero .eretail-container { max-width: 1140px; }
.eretail-blog__eyebrow {
  display: block; margin-bottom: 15px; color: var(--eretail-color-primary);
  font-size: .77rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.eretail-blog__hero h1 { max-width: 960px; margin: 0 0 16px; font-size: clamp(2.3rem, 4.5vw, 4.1rem); line-height: 1.12; }
.eretail-blog__hero p { max-width: 740px; margin: 0; color: var(--eretail-color-text-light); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.65; }
.eretail-blog__layout { max-width: 1140px; padding-top: 48px; padding-bottom: 80px; }
.eretail-blog__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 30px; }
.eretail-blog__filter-label { margin-right: 10px; font-weight: 700; font-size: .9rem; }
.eretail-blog__chip { display: inline-flex; padding: 9px 17px; border: 1px solid var(--eretail-color-border); border-radius: 99px; color: var(--eretail-color-heading); text-decoration: none; font-size: .87rem; font-weight: 600; transition: background .15s, border-color .15s; }
.eretail-blog__chip:hover, .eretail-blog__chip.is-active { background: var(--eretail-color-primary); color: #fff; border-color: var(--eretail-color-primary); }
.eretail-blog__list, .eretail-blog-archive .eretail-archive__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.eretail-blog__list .eretail-card, .eretail-blog-archive .eretail-card { display: block; border-radius: 14px; }
.eretail-blog__list .eretail-card__body, .eretail-blog-archive .eretail-card__body { padding: clamp(24px, 3vw, 38px); }
.eretail-blog__list .eretail-card__title, .eretail-blog-archive .eretail-card__title { max-width: 900px; margin: 0 0 12px; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.24; letter-spacing: -.025em; }
.eretail-blog__list .eretail-card__title a:hover, .eretail-blog-archive .eretail-card__title a:hover { color: var(--eretail-color-primary); }
.eretail-blog__list .eretail-card__meta, .eretail-blog-archive .eretail-card__meta { margin: 0 0 15px; }
.eretail-blog__list .eretail-card__excerpt, .eretail-blog-archive .eretail-card__excerpt { max-width: 850px; margin-bottom: 22px; line-height: 1.75; }
.eretail-blog__list .eretail-card__excerpt p, .eretail-blog-archive .eretail-card__excerpt p { margin-bottom: 0; }
.eretail-blog__list .eretail-card__thumb img, .eretail-blog-archive .eretail-card__thumb img { max-height: 340px; }
.eretail-blog__back { display: inline-block; margin-bottom: 30px; font-size: .92rem; font-weight: 700; text-decoration: none; }
.eretail-blog__hero--article { padding-bottom: clamp(40px, 5vw, 70px); }
.eretail-blog__hero--article h1 { max-width: 960px; font-size: clamp(2.25rem, 4vw, 3.75rem); }
.eretail-blog__date { font-size: .92rem !important; }
.eretail-blog__article { max-width: 1140px; padding-top: clamp(36px, 5vw, 70px); padding-bottom: 75px; }
.eretail-blog__prose { max-width: 780px; font-size: 1.07rem; line-height: 1.85; overflow-wrap: anywhere; }
.eretail-blog__prose p { margin: 0 0 1.45em; }
.eretail-blog__prose h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.3; margin: 2em 0 .7em; }
.eretail-blog__prose h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin: 1.7em 0 .6em; }
.eretail-blog__prose ul, .eretail-blog__prose ol { padding-left: 1.5em; margin: 0 0 1.5em; }
.eretail-blog__prose li { margin-bottom: .5em; }
.eretail-blog__prose img { max-width: 100%; height: auto; }
.eretail-blog__featured { max-width: 780px; margin: 0 0 36px; }
.eretail-blog__featured img { width: 100%; height: auto; border-radius: 12px; }
.eretail-blog__article-footer { max-width: 780px; border-top: 1px solid var(--eretail-color-border); margin-top: 50px; padding-top: 28px; }
.eretail-blog__comments { max-width: 1140px; padding-bottom: 60px; }
.eretail-blog-archive { max-width: 1140px; }
.eretail-blog-archive .eretail-archive__title { font-size: clamp(2.1rem, 3.6vw, 3.4rem); }
.eretail-blog-archive .eretail-archive__header { margin-bottom: 30px; }
.eretail-blog .eretail-pagination .nav-links, .eretail-blog-archive .eretail-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.eretail-blog .eretail-pagination .page-numbers, .eretail-blog-archive .eretail-pagination .page-numbers { min-width: 44px; height: 44px; border-radius: 50px; font-weight: 700; }
.eretail-blog .eretail-pagination .page-numbers:hover:not(.current), .eretail-blog-archive .eretail-pagination .page-numbers:hover:not(.current) { border-color: var(--eretail-color-primary); color: var(--eretail-color-primary); }
@media (max-width: 600px) {
  .eretail-blog__layout { padding-top: 30px; padding-bottom: 50px; }
  .eretail-blog__filters { gap: 8px; }
  .eretail-blog__filter-label { flex-basis: 100%; }
  .eretail-blog__chip { font-size: .8rem; padding: 8px 12px; }
  .eretail-blog__list .eretail-card__body, .eretail-blog-archive .eretail-card__body { padding: 22px; }
  .eretail-blog__prose { font-size: 1rem; }
}

/* Blog container alignment and single-article navigation (2026-10-16) */
.eretail-blog__hero .eretail-container,
.eretail-blog__layout,
.eretail-blog__article,
.eretail-blog__comments,
.eretail-blog-archive {
  max-width: var(--eretail-container-width);
}
.eretail-blog__article-footer { max-width: 780px; }
.eretail-blog__post-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.eretail-blog__post-nav-prev,
.eretail-blog__post-nav-next { flex: 1 1 0; min-width: 0; }
.eretail-blog__post-nav-next { text-align: right; }
.eretail-blog__post-nav .eretail-btn { white-space: nowrap; }
@media (max-width: 600px) {
  .eretail-blog__post-nav { gap: 10px; }
  .eretail-blog__post-nav .eretail-btn {
    font-size: .8rem;
    padding: 11px 13px;
    white-space: normal;
    line-height: 1.3;
  }
}
@media (max-width: 370px) {
  .eretail-blog__post-nav .eretail-btn { font-size: .74rem; padding: 10px; }
}


/* Single article: full-width content region with a sticky latest-posts rail. */
.eretail-blog__body-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, 300px);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
.eretail-blog__body-main { min-width: 0; }
.eretail-blog__body-main .eretail-blog__prose,
.eretail-blog__body-main .eretail-blog__article-footer { max-width: none; }
.eretail-blog__sidebar { min-width: 0; align-self: stretch; }
.eretail-blog__sidebar-inner {
  position: sticky;
  top: 112px;
  border: 1px solid var(--eretail-color-border);
  background: #f8f7f7;
  border-radius: 16px;
  padding: clamp(22px, 2.4vw, 32px);
}
.admin-bar .eretail-blog__sidebar-inner { top: 144px; }
.eretail-blog__sidebar-eyebrow {
  display: block; color: var(--eretail-color-primary); font-size: .73rem;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 800; margin-bottom: 9px;
}
.eretail-blog__sidebar h2 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 20px; }
.eretail-blog__recent-list { list-style: none; margin: 0; padding: 0; }
.eretail-blog__recent-list li { padding: 15px 0; border-top: 1px solid var(--eretail-color-border); }
.eretail-blog__recent-list a { display: block; color: var(--eretail-color-heading); font-weight: 700; line-height: 1.4; text-decoration: none; }
.eretail-blog__recent-list a:hover { color: var(--eretail-color-primary); }
.eretail-blog__recent-list time { display: block; margin-top: 7px; font-size: .78rem; color: var(--eretail-color-text-light); }
.eretail-blog__sidebar-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: .9rem; font-weight: 700; text-decoration: none; }
.eretail-blog__sidebar-all:hover { color: var(--eretail-color-primary); }
@media (max-width: 900px) {
  .eretail-blog__body-layout { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .eretail-blog__sidebar-inner, .admin-bar .eretail-blog__sidebar-inner { position: static; }
  .eretail-blog__sidebar { max-width: 100%; }
}
@media (max-width: 600px) {
  .eretail-blog__sidebar-inner { padding: 22px; }
}

/* Mobile drill-down interaction and persistent drawer actions — 2026-10-17 */
.primary-navigation__footer { display: none; }
@media (max-width: 1023.98px) {
  .primary-navigation__panels { min-height: 0; flex: 1 1 auto; }
  .primary-navigation__footer {
    display: flex; flex: 0 0 auto; flex-direction: column; gap: 10px;
    padding: 16px 20px max(18px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--eretail-color-border, #ddd);
    background: #fff; z-index: 2;
  }
  .primary-navigation__footer-cta { display: flex; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; min-height: 46px; text-align: center; }
  .primary-navigation .mobile-nav-panel { overscroll-behavior-y: contain; }
  .primary-navigation .mobile-nav-panel[data-panel-state="current"] { visibility: visible; z-index: 2; }
  .primary-navigation .mobile-nav-panel[data-panel-state="before"],
  .primary-navigation .mobile-nav-panel[data-panel-state="after"] { visibility: hidden; z-index: 0; }
  .primary-navigation .mobile-nav-panel > .mobile-nav-back-row { display: block; min-height: 56px; }
  .primary-navigation .mobile-nav-panel .mobile-nav-back-row > .submenu-back {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
    padding: 12px 20px; background: #fff; border: 0;
    border-bottom: 1px solid var(--eretail-color-border, #ddd);
    color: #111; font: inherit; font-weight: 700; text-align: left;
    cursor: pointer; touch-action: manipulation; position: relative; z-index: 4;
  }
  .primary-navigation .mobile-nav-panel .mobile-nav-back-row > .submenu-back svg { width: 13px; height: 18px; pointer-events: none; }
  .primary-navigation .mobile-nav-panel .submenu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 60px; min-height: 54px; height: 100%; color: #e41e26;
  }
  .primary-navigation .mobile-nav-panel .submenu-toggle__icon { width: 13px; height: 13px; }
  .primary-navigation .mobile-nav-panel .submenu-toggle__icon path { stroke-width: 2.7; }
  .primary-navigation .mobile-nav-panel .menu-item > .menu-link { pointer-events: auto; }
  .primary-navigation .mobile-nav-panel .submenu-toggle:focus-visible,
  .primary-navigation .mobile-nav-panel .submenu-back:focus-visible,
  .primary-navigation .mobile-nav-panel .menu-link:focus-visible { outline: 3px solid #e41e26; outline-offset: -3px; }
}

/* Mobile drill-down: explicitly display each active panel's immediate rows.
   Hidden desktop submenu rules must not leak into cloned mobile lists. */
@media (max-width: 1023.98px) {
  .primary-navigation__mobile-panels[aria-hidden="false"] { visibility: visible; }
  .primary-navigation .mobile-nav-panel[data-panel-state="current"] {
    display: block !important; opacity: 1 !important; visibility: visible !important;
  }
  .primary-navigation .mobile-nav-panel[data-panel-state="current"] > li.menu-item {
    display: flex; visibility: visible; opacity: 1;
  }
  .primary-navigation .mobile-nav-panel[data-panel-state="current"] > li.menu-item > a.menu-link {
    display: flex; visibility: visible; opacity: 1;
  }
}

/* v3: Show exactly one mobile drill-down level at a time. Avoid inherited
   WordPress desktop submenu visibility and transform rules. */
@media (max-width: 1023.98px) {
  .primary-navigation .mobile-nav-panel {
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    position: absolute;
    inset: 0;
  }
  .primary-navigation .mobile-nav-panel[data-panel-state="current"] {
    display: block !important; visibility: visible !important; pointer-events: auto;
  }
  .primary-navigation .mobile-nav-panel:not([data-panel-state="current"]) {
    display: none !important; visibility: hidden !important; pointer-events: none;
  }
  .primary-navigation .mobile-nav-panel > li.mobile-nav-back-row {
    display: block !important; visibility: visible !important;
  }
  .primary-navigation .mobile-nav-panel > li.mobile-nav-back-row > button.submenu-back {
    display: flex !important; width: 100%; min-height: 56px;
  }
  .primary-navigation .mobile-nav-panel > li.mobile-has-children { display: flex; }
}

/* Gutenberg editorial lists: reserve space for markers inside the content
   container rather than placing them into its outer gutter. Applies to both
   unordered and ordered lists, with normal indentation for nested lists. */
.eretail-page-content--blocks .eretail-page-content__body > :is(ul.wp-block-list, ol.wp-block-list) {
  padding-left: calc(var(--eretail-container-padding) + 1.75rem);
  padding-right: var(--eretail-container-padding);
  list-style-position: outside;
  margin-bottom: 1.5rem;
}
.eretail-page-content--blocks .eretail-page-content__body .wp-block-list ul,
.eretail-page-content--blocks .eretail-page-content__body .wp-block-list ol {
  padding-left: 1.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}