/**
 * 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: 2px solid var( --eretail-color-heading );
	border-bottom: 2px solid var( --eretail-color-heading );
	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;
}