/*!
 * Rooster X — base.css
 * Loads on every page (including Elementor docs). Tokens-only + light reset + theme block styles.
 * Aesthetic skin lives in styles/ variations and per-template sheets, not here.
 */

@layer roosterx.reset, roosterx.tokens, roosterx.blocks, roosterx.variations;

/* CSS-only View Transitions — supported browsers morph; everyone else navigates normally. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 200ms;
}

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

@layer roosterx.reset {
	*, *::before, *::after { box-sizing: border-box; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { margin: 0; }
	img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
	button, input, select, textarea { font: inherit; color: inherit; }
	:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
}


@layer roosterx.blocks {

	.roosterx-announcement-bar {
		background: var(--wp--preset--color--accent);
		color:      var(--wp--preset--color--bg);
		padding:    var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
		text-align: center;
		font-size:  var(--wp--preset--font-size--sm);
		line-height: 1.4;
	}
	.roosterx-announcement-bar a {
		color: inherit;
		text-decoration: underline;
	}

	/*
	 * Trust tile — icon centred above 15 Bold title + 15 Regular subtitle.
	 * Mobile: stacked (vertical column); same look applies on desktop too —
	 * the wp:columns wrapper handles 1-col → 4-col layout responsively.
	 * Icons inherit text colour via currentColor (paths fill="currentColor"),
	 * so light/dark backgrounds work without two icon files.
	 */
	.roosterx-trust-tile {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--wp--preset--spacing--3);
		padding: var(--wp--preset--spacing--4) 0;
		color: var(--wp--preset--color--fg);
	}
	.roosterx-trust-tile__icon {
		width: 48px;
		height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
	}
	.roosterx-trust-tile__icon svg { width: 100%; height: 100%; }
	.roosterx-trust-tile__icon--missing {
		background: var(--wp--preset--color--border);
		border-radius: var(--wp--preset--border-radius--card);
	}
	.roosterx-trust-tile__body {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}
	/*
	 * Fonts inherit from the active theme's body. A child theme that
	 * registers a brand family (e.g. Aeonik Pro) and sets it as the
	 * default body font will see the trust tile pick it up automatically.
	 * Parent-only mode falls back to the system stack — still readable.
	 */
	.roosterx-trust-tile__title {
		font-size: 0.9375rem;     /* 15px */
		font-weight: 700;          /* Bold */
		line-height: 1.4;
		letter-spacing: 0.038em;
	}
	.roosterx-trust-tile__subtitle {
		font-size: 0.9375rem;     /* 15px */
		font-weight: 400;          /* Regular */
		line-height: 1.467;
	}

	.roosterx-promo-tile {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--preset--border-radius--card);
		overflow: hidden;
		background: var(--wp--preset--color--bg);
	}
	.roosterx-promo-tile__body-wrap {
		padding: var(--wp--preset--spacing--4);
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--2);
	}
	.roosterx-promo-tile__heading { margin: 0; font-size: var(--wp--preset--font-size--lg); }
	.roosterx-promo-tile__body    { margin: 0; color: var(--wp--preset--color--muted); }
	.roosterx-promo-tile__cta {
		align-self: flex-start;
		font-weight: 600;
		text-decoration: underline;
	}

	.roosterx-badge {
		display: inline-flex;
		gap: 4px;
		align-items: center;
		color: var(--wp--preset--color--fg);
		text-decoration: none;
	}
	.roosterx-badge__icon {
		width: 22px;
		height: 22px;
		background: currentColor;
		display: inline-block;
		opacity: 0.85;
	}
	.roosterx-badge__count {
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--bg);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 600;
		border-radius: var(--wp--preset--border-radius--chip);
		padding: 2px 6px;
		min-width: 18px;
		text-align: center;
		line-height: 1;
	}

	.roosterx-responsive-img {
		display: block;
		width: 100%;
	}
	.roosterx-responsive-img img {
		width: 100%;
		height: auto;
	}
	.roosterx-responsive-img__link {
		display: block;
		line-height: 0;
	}

	.roosterx-header-cart {
		display: inline-flex;
		gap: 6px;
		align-items: center;
		text-decoration: none;
		color: inherit;
		padding: 4px 8px;
		border-radius: var(--wp--preset--border-radius--btn);
	}
	.roosterx-header-cart__icon { font-size: 22px; line-height: 1; }
	.roosterx-header-cart__count {
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--bg);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 600;
		padding: 2px 6px;
		min-width: 18px;
		text-align: center;
		border-radius: var(--wp--preset--border-radius--chip);
		line-height: 1;
	}
}

/* WP 7.0 Block Visibility (viewport) — display:none wins regardless of @layer order. */
.wp-block-hidden-mobile  { /* hidden ≤480px      — handled by core */ }
.wp-block-hidden-tablet  { /* hidden 481–782px   — handled by core */ }
.wp-block-hidden-desktop { /* hidden >782px      — handled by core */ }

/* ============================================================================
 * roosterx/newsletter-banner — full-width banner with embedded form
 * ============================================================================
 *
 * Mobile-first. Background images flow in via inline custom properties
 * (`--rx-newsletter-bg-desktop`, `--rx-newsletter-bg-mobile`) emitted
 * by the block renderer, so a single stylesheet handles every brand.
 * Per-brand visual tweaks (font, colour, padding) belong in the child
 * theme; this file ships the structural geometry only.
 *
 * Layout:
 *   Mobile  — full-viewport image, content card centred with a frosted
 *             glass panel so text reads cleanly over any background.
 *   Desktop — wide horizontal banner; content card pinned to the LEFT
 *             edge, vertically centred. Glass effect is opt-in via
 *             `.newsletter-banner--glass-desktop`.
 */

.newsletter-banner {
	position: relative;
	width: 100%;
	background: var(--rx-newsletter-bg-mobile, none) center center / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 20px 0;
	min-height: 70vh;
	margin-bottom: 30px;
	overflow: hidden;
}

.newsletter-banner .newsletter-content {
	position: relative;
	width: 90%;
	max-width: 400px;
	background: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	text-align: center;
	padding: 30px 15px;
	border-radius: 4px;
	box-sizing: border-box;
}

.newsletter-banner .newsletter-logo { text-align: center; margin-bottom: 12px; }
.newsletter-banner .newsletter-logo .newsletter-logo__img,
.newsletter-banner .newsletter-logo img {
	display: block;
	max-width: 70%;
	height: auto;
	margin: 0 auto;
}
.newsletter-banner .subscribe-text {
	font-size: 14px;
	line-height: 1.4;
	padding: 25px 0 15px;
	text-align: center;
}

/* The Newsletter Plugin (`[newsletter_form]`) emits a `<form>` with
 * fields wrapped in `.tnp-field`. Reset the heavy default styling so
 * the form blends with the brand glass card. */
.newsletter-banner .newsletter-form .tnp-subscription { margin: 0; }
.newsletter-banner .newsletter-form .tnp-field { margin: 0 0 10px; }
.newsletter-banner .newsletter-form .tnp-field label[for="tnp-1"] { display: none; }
.newsletter-banner .newsletter-form .tnp-email {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #fff;
	font-size: 14px;
}
.newsletter-banner .newsletter-form .tnp-privacy-field label {
	font-size: 12px;
	line-height: 1.4;
	display: inline-flex;
	gap: 6px;
	align-items: flex-start;
	text-align: left;
}
.newsletter-banner .newsletter-form .tnp-field-button { text-align: center; }
.newsletter-banner .newsletter-form .tnp-submit {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	background: #fff;
	color: var(--wp--preset--color--fg, #1a1a1a);
	border: 1px solid var(--wp--preset--color--fg, #1a1a1a);
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background-color 150ms ease, color 150ms ease;
}
.newsletter-banner .newsletter-form .tnp-submit:hover {
	background: var(--wp--preset--color--fg, #1a1a1a);
	color: #fff;
}

.newsletter-banner .newsletter-form__missing {
	margin: 0;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.6);
	text-align: center;
}

/* ── Desktop (≥782px) — wide banner, content card on the LEFT ─── */

@media (min-width: 782px) {
	.newsletter-banner {
		background-image: var(--rx-newsletter-bg-desktop, var(--rx-newsletter-bg-mobile, none));
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-start;
		padding: 0;
		min-height: 0;
		/* aspect ratio of the typical horizontal banner crop (~1920×307) */
		aspect-ratio: 1920 / 307;
	}
	/* Content card pinned to the LEFT, vertically centred. Glass
	 * effect dropped by default; opt back in via the modifier class. */
	.newsletter-banner .newsletter-content {
		position: absolute;
		top: 50%;
		left: 40px;
		transform: translateY(-50%);
		width: auto;
		max-width: 380px;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		padding: 0;
		text-align: left;
	}
	.newsletter-banner .newsletter-logo { text-align: left; margin-bottom: 10px; }
	.newsletter-banner .newsletter-logo .newsletter-logo__img,
	.newsletter-banner .newsletter-logo img {
		max-width: 213px;
		margin: 0;
	}
	.newsletter-banner .subscribe-text {
		text-align: left;
		padding: 8px 0 0;
		font-size: 16px;
	}
	.newsletter-banner .newsletter-form .tnp-privacy-field label { text-align: left; }
	.newsletter-banner .newsletter-form .tnp-field-button { text-align: left; }

	/* Desktop layout — TWO COLUMNS inside .newsletter-content:
	 *   - left:  intro (title + description)
	 *   - right: form (Name + Surname row → Email + Submit row → SSO row)
	 *
	 * Mobile rules above stay untouched (single-column stacked card).
	 * The card no longer pins to absolute-left at 380/640px; instead
	 * it spans the banner with constrained inner padding so the form
	 * has horizontal room to breathe. The .alignfull section already
	 * gives us full viewport width.
	 *
	 * IMPORTANT: this rule overrides the absolute-positioned card set
	 * in the block above. We re-flow `.newsletter-content` from
	 * `position: absolute` to a centred constrained block so the
	 * 2-col grid can layout naturally without overflowing the banner.
	 */
	.newsletter-banner .newsletter-content {
		position: static;
		transform: none;
		left: auto;
		top: auto;
		width: 100%;
		/* Span the full viewport — the parent .newsletter-banner is
		 * .alignfull. Constrain only the inner padding so text +
		 * inputs don't kiss the edges on ultrawide screens. */
		max-width: none;
		margin: 0;
		padding: 28px clamp(40px, 6vw, 96px);
		display: grid;
		/* 3-column layout: intro (title + description) | TNP form |
		 * SSO buttons stacked. Min widths keep the form column wide
		 * enough for inputs while the SSO column hugs its 220-260px
		 * button width. */
		grid-template-columns: minmax(260px, 1fr) minmax(320px, 1fr) minmax(220px, 0.7fr);
		column-gap: clamp(24px, 3vw, 56px);
		row-gap: 16px;
		align-items: center;
		text-align: left;
	}

	/* Logo row — when present, spans both columns above the intro+form. */
	.newsletter-banner .newsletter-logo {
		grid-column: 1 / -1;
		text-align: left;
		margin-bottom: 4px;
	}

	/* Intro card — title + description in the LEFT column. */
	.newsletter-banner__intro {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.newsletter-banner__title {
		margin: 0;
		font-size: 28px;
		line-height: 1.2;
		font-weight: 700;
	}
	.newsletter-banner__description {
		margin: 0;
		font-size: 15px;
		line-height: 1.5;
		opacity: 0.85;
	}

	/* Newsletter form — MIDDLE column. Single-column flex stack so
	 * each TNP field (firstname / surname / email / privacy / submit)
	 * sits on its own row inside the column. The narrower form column
	 * + larger SSO column means email + submit no longer share a row
	 * (would be too cramped at typical breakpoints). */
	.newsletter-banner .newsletter-form .tnp-subscription {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.newsletter-banner .newsletter-form .tnp-field { margin: 0; }

	/* SSO column — RIGHT. Stack the buttons vertically regardless of
	 * the AIEO module's `--inline` layout class so they read as a
	 * proper third column (not a wrapped row). */
	.newsletter-banner__sso { align-self: stretch; }
	.newsletter-banner__sso .aieo-sso-buttons { margin: 0; }
	.newsletter-banner__sso .aieo-sso-buttons__intro {
		font-size: 12px;
		margin: 0 0 8px;
	}
	.newsletter-banner__sso .aieo-sso-buttons__row {
		flex-direction: column;
		gap: 8px;
	}
	.newsletter-banner__sso .aieo-sso-btn {
		width: 100%;
		min-width: 0;
		flex: 0 0 auto;
	}
	.newsletter-banner .newsletter-form label {
		font-size: 11px;
		line-height: 1.2;
		margin: 0 0 2px;
		display: block;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		opacity: 0.75;
	}
	.newsletter-banner .newsletter-form .tnp-email,
	.newsletter-banner .newsletter-form input[type="text"],
	.newsletter-banner .newsletter-form input[type="email"] {
		width: 100%;
		box-sizing: border-box;
		padding: 7px 10px;
		font-size: 13px;
		line-height: 1.3;
		height: 34px;
	}
	.newsletter-banner .newsletter-form .tnp-privacy-field { margin-top: 2px; }
	.newsletter-banner .newsletter-form .tnp-privacy-field label {
		text-transform: none;
		letter-spacing: 0;
		opacity: 1;
		font-size: 12px;
		display: inline-flex;
	}
	.newsletter-banner .newsletter-form .tnp-submit {
		width: auto;
		min-width: 180px;
		padding: 9px 22px;
		font-size: 13px;
	}

	/* Glass-effect-on-desktop modifier — bring the frosted card to
	 * desktop too, useful for brands whose hero image is busy enough
	 * to need the contrast layer. */
	.newsletter-banner--glass-desktop .newsletter-content {
		background: rgba(255, 255, 255, 0.4);
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		padding: 24px 28px;
		border-radius: 4px;
	}
}

/* ============================================================================
 * `.rx-quad-cards` — equal-height cards in a row.
 * ============================================================================
 *
 * Used by the `roosterx/section-benefits-quad` pattern (the 2×2 pastel
 * cards on the Επαγγελματίες & Σπουδαστές page). Without this rule the
 * `wp:cover` blocks inside each column only grow to their content height,
 * so a card with a long heading + paragraph stretches past a card with
 * short copy and the row reads as ragged. Making the column itself a
 * vertical flex container lets the inner cover claim 100% of the
 * column's height — and because `<wp:columns>` defaults to
 * `align-items: stretch`, every column in a row already matches the
 * tallest sibling's height. Result: all cards in the row sit flush
 * regardless of how long their copy is.
 */
.rx-quad-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
}
.rx-quad-cards > .wp-block-column > .wp-block-cover {
	flex: 1 1 auto;
}
/* Demo illustration wrapper — caps the SVG width and centres it
 * inside the 40% image column so the icon doesn't grow past the
 * card on wide viewports. The SVGs themselves use `currentColor`
 * for their stroke, so they pick up the surrounding text colour
 * (subtle line art on each pastel background). */
.rx-quad-illu {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 220px;
	margin-inline: auto;
}
.rx-quad-illu img {
	width: 100%;
	height: auto;
}

/* ============================================================================
 * `.rx-image-placeholder` — generic demo-image placeholder
 * ============================================================================
 *
 * Used on every `wp:image` block in the demo patterns that ships WITHOUT a
 * real photo. Editors see a clean empty image-block placeholder (no
 * "Block contains unexpected or invalid content" error, since the block
 * markup is the canonical empty state); on the front-end the figure
 * renders a soft grey gradient with a centred image-glyph, matching the
 * AIEO category-hero placeholder so the page never collapses to nothing.
 *
 * When the admin uploads a real photo via "Replace", Gutenberg adds the
 * `<img>` element back inside the figure — at which point the image
 * covers the gradient and the placeholder becomes invisible. The class
 * stays on the figure (harmless once the image is real). */
.rx-image-placeholder {
	display: block;
	width: 100%;
	margin: 0 auto;
	aspect-ratio: 4 / 3;
	min-height: 220px;
	overflow: hidden;
	position: relative;
	background-color: #f0f0f1;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='96' height='96' fill='none' stroke='%23bbbbbb' stroke-width='1.4'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='9' cy='10' r='1.5'/><path d='M3 18 l5-5 l4 4 l3-3 l6 6'/></svg>"),
		linear-gradient(135deg, #f5f5f7 0%, #e7e8ec 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: clamp(56px, 9vw, 110px), cover;
	border-radius: 4px;
}
/* Aspect-ratio modifiers — drop on the figure alongside `rx-image-placeholder`
 * to set the visual proportions of the placeholder box per usage context. */
.rx-image-placeholder.is-portrait     { aspect-ratio: 4 / 5; }
.rx-image-placeholder.is-square       { aspect-ratio: 1 / 1; }
.rx-image-placeholder.is-banner       { aspect-ratio: 5 / 3; }
.rx-image-placeholder.is-hero         { aspect-ratio: 1180 / 800; min-height: 220px; }
@media (min-width: 768px) {
	.rx-image-placeholder.is-hero { aspect-ratio: auto; height: 800px; min-height: 0; }
}
/* Once Gutenberg drops a real <img> inside the figure, the image covers
 * the placeholder background. Force the img to fill the figure so the
 * gradient/glyph never peeks through behind a small image. */
.rx-image-placeholder img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================================
 * `.rx-products-slider` — mobile-only horizontal scroll-snap behaviour
 * for the `wp:woocommerce/product-collection` block inside the
 * roosterx/section-products-grid pattern.
 *
 * Desktop keeps the native 4-column grid untouched. On phones the
 * inner `.wp-block-post-template` (the <ul> WC renders) becomes a
 * horizontal flex row with scroll-snap, so a tag-filtered row of
 * products behaves like the old om-fastslider `[om_static_slider]`
 * — swipeable, snap-to-card, no JS, no extra DOM.
 *
 * Activated by adding `rx-products-slider` to the wrapper group's
 * className (already baked into the section-products-grid pattern).
 * Operators get the slider behaviour for free; if they want a
 * non-slider grid they remove the class via the editor.
 * ============================================================================ */

@media (max-width: 767px) {
	.rx-products-slider .wp-block-woocommerce-product-collection > .wp-block-post-template,
	.rx-products-slider .wp-block-woocommerce-product-template {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 12px;
		gap: 12px;
		-webkit-overflow-scrolling: touch;
		padding: 4px 4px 12px;
		margin: 0 -4px;
		scrollbar-width: thin;
	}
	.rx-products-slider .wp-block-woocommerce-product-collection > .wp-block-post-template > li,
	.rx-products-slider .wp-block-woocommerce-product-template > li {
		flex: 0 0 75%;
		max-width: 75%;
		min-width: 0;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}
	/* Hide native scrollbar on iOS for cleaner look — replaced by the
	 * scroll-snap visual cue from the partial-next-card peek. */
	.rx-products-slider .wp-block-woocommerce-product-collection > .wp-block-post-template::-webkit-scrollbar,
	.rx-products-slider .wp-block-woocommerce-product-template::-webkit-scrollbar {
		height: 4px;
	}
}

/* ============================================================================
 * `.aieo-recommendations-grid` — mobile horizontal scroll-snap
 * carousel for product-page recommendation surfaces (related,
 * upsells, crosssells, recently_viewed, same_needs).
 *
 * The aieo/recos block server-renders ~6 product cards per section
 * at fixed widths; on phones that overflows the viewport (cards laid
 * out as desktop columns push the row to ~3000px wide). On mobile we
 * flip the grid into a swipeable horizontal scroll-snap row — same
 * scroll-snap UX the products-grid pattern uses, no JS, browser-
 * native momentum + snap.
 *
 * Each card claims 70% of the viewport so the next card peeks in to
 * cue swipability. Desktop layout (CSS Grid, 4–6 cols) is untouched.
 *
 * Pairs with template-defer's auto-deferral of recos: only 2 cards
 * are in the live DOM until the section nears the viewport, so the
 * scroll-snap container is initially short and the IO hydrator
 * appends the rest at the moment the user scrolls towards it.
 * ============================================================================ */

@media (max-width: 767px) {
	.aieo-recommendations-grid {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 12px;
		gap: 12px;
		-webkit-overflow-scrolling: touch;
		padding: 4px 4px 12px;
		margin: 0 -4px;
		max-width: 100vw;
		scrollbar-width: thin;
	}
	.aieo-recommendations-grid > .aieo-card {
		flex: 0 0 70%;
		max-width: 70%;
		min-width: 0;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}
	.aieo-recommendations-grid::-webkit-scrollbar {
		height: 4px;
	}
}

/* Belt-and-braces: ensure the recommendations section never
 * overflows its parent on any viewport. The scroll-snap row above
 * scrolls horizontally inside this clip. */
.aieo-recommendations {
	max-width: 100%;
	overflow-x: clip;
}

/* ============================================================================
 * `.rx-page-hero` — overlapping-title + image + crossing-divider hero.
 * ============================================================================
 *
 * Mirrors the AIEO category-hero's geometry so static pages (About, Loyalty,
 * Σχολή, etc.) can reuse the same striking visual treatment used on category
 * archives. Tuneable via the CSS variables below — change them once and the
 * whole hero re-flows. Token names match the category-hero's `--hero-*`
 * variables so a brand stylesheet can override both with one declaration.
 */
.rx-page-hero {
	--hero-image-max:        1180px;  /* fixed desktop hero box width */
	--hero-image-height:      800px;  /* fixed desktop hero box height */
	--hero-divider-bottom:    140px;  /* line sits ~18% up from image bottom */
	--rx-hero-title-overlap:   35px;  /* mobile: half of mobile line-height (~70px) */

	margin: 0 0 var(--wp--preset--spacing--6, 40px);
	font-family: var(--wp--preset--font-family--aeonik, "Aeonik Pro", system-ui, sans-serif);
	color: var(--wp--preset--color--fg, #1a1a1a);
}
/* `alignfull` pads the inner content so title / image stay clear of the
 * viewport edges, but the divider escapes that padding (rule below) so it
 * spans the entire viewport width. */
.rx-page-hero.alignfull {
	padding-inline: clamp(16px, 4vw, 80px);
}

/* ── Title — its vertical centre sits on the image's top edge. The
 *    negative margin-bottom is HALF the line-height so the lower half of
 *    the heading box visually overlaps the photo below.
 *    `z-index: 2` keeps the title above the image's stacking context. */
.rx-page-hero__title {
	text-align: center;
	margin: 0 0 calc(0px - var(--rx-hero-title-overlap));
	position: relative;
	z-index: 2;
}
.rx-page-hero__title.wp-block-heading {
	font-family: inherit;
	font-weight: 300;            /* Aeonik Light */
	letter-spacing: 0.038em;
	text-transform: uppercase;
	color: inherit;
	font-size: clamp(24px, 9vw, 50px);
	line-height: 1.4;
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: auto;
}

/* ── Image — fixed width/height on desktop so the overlap maths is
 *    deterministic. Mobile keeps an aspect-ratio so an empty
 *    placeholder still reserves visible space. */
.rx-page-hero__image {
	display: block;
	width: 100%;
	max-width: var(--hero-image-max, 1180px);
	margin: 0 auto;
	aspect-ratio: 1180 / 800;
	min-height: 220px;
	overflow: hidden;
	position: relative;
	z-index: 1;
	background-color: #f0f0f1;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='96' height='96' fill='none' stroke='%23bbbbbb' stroke-width='1.4'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='9' cy='10' r='1.5'/><path d='M3 18 l5-5 l4 4 l3-3 l6 6'/></svg>"),
		linear-gradient(135deg, #f5f5f7 0%, #e7e8ec 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: clamp(56px, 9vw, 110px), cover;
}
/* When the admin sets a real image, the figure's <img> covers the whole
 * box and hides the placeholder gradient/glyph. */
.rx-page-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Divider — full viewport width, 1px solid `--fg` (black on FF). On
 *    mobile it sits inline below the image; on desktop it absolute-
 *    positions inside the hero section, anchored above the image's
 *    bottom edge so it visually crosses the lower portion of the photo. */
.rx-page-hero__divider {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--fg, #000);
	margin: 0;
	height: 0;
	width: 100%;
}
.rx-page-hero.alignfull .rx-page-hero__divider {
	margin-inline: calc(0px - clamp(16px, 4vw, 80px));
}

@media (min-width: 768px) {
	.rx-page-hero {
		position: relative;
		--rx-hero-title-overlap: 85px;        /* desktop: half of ~171px line-height */
	}
	.rx-page-hero__title.wp-block-heading {
		font-size: clamp(64px, 9vw, 117px);
		line-height: 1.46;
	}
	.rx-page-hero__image {
		width: 100%;
		max-width: var(--hero-image-max, 1180px);
		height: var(--hero-image-height, 800px);
		aspect-ratio: auto;
		min-height: 0;
	}
	.rx-page-hero__divider {
		position: absolute;
		bottom: var(--hero-divider-bottom);
		z-index: 2;
	}
	/* On desktop the alignfull breakout uses left/right offsets (since
	 * the divider is absolute-positioned, margin-inline is inert). */
	.rx-page-hero.alignfull .rx-page-hero__divider {
		margin-inline: 0;
		left:  calc(0px - clamp(16px, 4vw, 80px));
		right: calc(0px - clamp(16px, 4vw, 80px));
		width: auto;
	}
}

/* ── `.rx-page-hero--no-image` — title + divider only (no photo) ──────
 * Used by the blog archive (home.html / archive.html) and any other
 * page that wants the iconic line treatment without an image. Strips
 * the desktop overlap maths since there's no image to overlap, and
 * pulls the divider tight under the title.
 */
.rx-page-hero--no-image {
	margin-top: var(--wp--preset--spacing--5, 24px);
}
/* The title selectors below intentionally do NOT require `.wp-block-heading`
 * — `core/query-title` renders as `<h1 class="wp-block-query-title">`
 * (no `.wp-block-heading`), so a `.wp-block-heading`-only rule misses
 * archive titles. Match every title carrying our `.rx-page-hero__title`
 * marker class regardless of the underlying core class. */
.rx-page-hero--no-image .rx-page-hero__title {
	margin: 0;
	font-size: clamp(28px, 7vw + 4px, 64px);
	line-height: 1.1;
	letter-spacing: 0.04em;
	font-weight: 300;
	text-transform: uppercase;
}
.rx-page-hero--no-image .rx-page-hero__divider {
	margin-top: 12px;
}
@media (min-width: 768px) {
	.rx-page-hero--no-image {
		position: static;
	}
	.rx-page-hero--no-image .rx-page-hero__title {
		font-size: clamp(48px, 6vw + 8px, 84px);
		line-height: 1.05;
	}
	.rx-page-hero--no-image .rx-page-hero__divider {
		position: static;
		bottom: auto;
		margin-top: 16px;
	}
}

/* ── Blog archive — 3-column post-card grid ──────────────────────────
 * Targets home.html (blog index) and archive.html (category, tag,
 * author, date archives of posts). Each card is a vertical stack:
 * featured image (4:3) → title → excerpt → publish date.
 */
.roosterx-blog-archive__query {
	margin-top: var(--wp--preset--spacing--6, 32px);
}
.roosterx-blog-archive__grid {
	gap: clamp(20px, 2vw + 12px, 36px) clamp(16px, 1.5vw + 8px, 28px);
}
.roosterx-blog-archive__card {
	gap: 12px !important;
	padding: 0;
}
.roosterx-blog-archive__card-image {
	margin: 0 !important;
}
.roosterx-blog-archive__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.roosterx-blog-archive__card-title {
	margin: 0 !important;
	font-size: clamp(1rem, 1vw + 0.7rem, 1.2rem);
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}
.roosterx-blog-archive__card-title a {
	color: inherit;
	text-decoration: none;
}
.roosterx-blog-archive__card-title a:hover {
	text-decoration: underline;
}
.roosterx-blog-archive__card-excerpt {
	margin: 0 !important;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2, #555);
}
.roosterx-blog-archive__card-excerpt .wp-block-post-excerpt__more-link {
	display: none;
}
.roosterx-blog-archive__card-date {
	margin: 0 !important;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast-2, #555);
}

/* Term description (when present on category/tag archives) — centered
 * paragraph between the hero header and the card grid. */
.roosterx-blog-archive__term-description {
	max-width: 70ch;
	margin: 0 auto;
	color: var(--wp--preset--color--contrast-2, #555);
}

.roosterx-blog-archive__pagination {
	margin-top: var(--wp--preset--spacing--6, 32px);
}
.roosterx-blog-archive__pagination--hidden {
	display: none !important;
}

/* Sentinel — invisible 1px row that the IntersectionObserver watches.
 * Sits below the grid so when it scrolls into view we trigger the
 * next-page fetch. */
.roosterx-blog-archive__sentinel {
	height: 1px;
	width: 100%;
	margin-top: var(--wp--preset--spacing--5, 24px);
	pointer-events: none;
}

/* Three-dot loader pinned at the bottom of the query while a next-page
 * fetch is in flight. Hidden by default; .is-active reveals + animates. */
.roosterx-blog-archive__loader {
	display: none;
	gap: 8px;
	justify-content: center;
	align-items: center;
	padding: var(--wp--preset--spacing--5, 24px) 0;
}
.roosterx-blog-archive__loader.is-active {
	display: flex;
}
.roosterx-blog-archive__loader-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast, #1a1a1a);
	opacity: 0.3;
	animation: rxLoaderPulse 1.2s ease-in-out infinite;
}
.roosterx-blog-archive__loader-dot:nth-child(2) { animation-delay: 0.15s; }
.roosterx-blog-archive__loader-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes rxLoaderPulse {
	0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); }
	40%           { opacity: 1;   transform: scale(1);    }
}

/* ── Mosaic archive layout ──────────────────────────────────────────
 * Anarchic magazine grid for the blog archive. Two column-count
 * variants (selectable from Settings → Rooster X → General):
 *
 * 3-col cycle (8 cards):
 *   ┌─────────────────────────┐    [    HERO — full row, tall    ]
 *   ├──────────────┬──────────┤    [   2/3 prominent  ][  1/3   ]
 *   ├────┬────┬────┤               [ 1/3 ][ 1/3 ][ 1/3 ]  uniform row
 *   ├────┼─────────┤               [ 1/3 ][   2/3 prominent     ]
 *
 * 4-col cycle (9 cards):
 *   ┌─────────────────────────────┐  [        HERO — full row        ]
 *   ├──────────────┬──────────────┤  [   1/2 wide  ][   1/2 wide   ]
 *   ├────┬────┬────┬────┤             [1/4][1/4][1/4][1/4]  uniform row
 *   ├──────────────────────┬─────┤   [    3/4 wide        ][ 1/4 ]
 *
 * Image dominates each tile; title sits at the bottom inside an Apple-
 * style backdrop-blur "glass" pill so it stays legible regardless of
 * the underlying photo. Excerpt is hidden in mosaic; date floats as a
 * small chip in the top-right corner.
 *
 * Activation: the PHP filter in functions.php injects
 *   .roosterx-blog-archive--mosaic
 *   .roosterx-blog-archive--mosaic-cols-{3|4}
 * onto the main archive wrapper at render time. Cards then pick up the
 * `nth-child` rules below based on their position in the cycle.
 */

/* Common mosaic chrome — applies regardless of column count. */
.roosterx-blog-archive--mosaic .roosterx-blog-archive__grid {
	display: grid;
	grid-auto-rows: minmax(220px, auto);
	grid-auto-flow: dense;
	gap: clamp(14px, 1.4vw + 4px, 24px);
}
.roosterx-blog-archive--mosaic .roosterx-blog-archive__card {
	overflow: hidden;
	border-radius: 14px;
	background: var(--wp--preset--color--subtle, #f6f6f7);
	gap: 0 !important;
	position: relative;
	min-height: 220px;
}
.roosterx-blog-archive--mosaic .roosterx-blog-archive__card-image {
	margin: 0 !important;
	height: 100%;
	width: 100%;
	position: absolute;
	inset: 0;
}
.roosterx-blog-archive--mosaic .roosterx-blog-archive__card-image img,
.roosterx-blog-archive--mosaic .roosterx-blog-archive__card-image a {
	width: 100%;
	height: 100%;
	display: block;
}
.roosterx-blog-archive--mosaic .roosterx-blog-archive__card-image img {
	object-fit: cover;
}

/* Subtle bottom-fade veil — supports the glass title's contrast on
 * very bright photos (white-on-white). */
.roosterx-blog-archive--mosaic .roosterx-blog-archive__card::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 50%;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
	z-index: 1;
	pointer-events: none;
}

.roosterx-blog-archive--mosaic .roosterx-blog-archive__card-excerpt {
	display: none;
}

/* Glass title pill — sits at the bottom, sized to fit its text up to
 * the card's inner edges. backdrop-filter blurs whatever's behind the
 * pill so the title reads cleanly across any image. */
.roosterx-blog-archive--mosaic .roosterx-blog-archive__card-title {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	margin: 0 !important;
	padding: 9px 14px;
	background: rgba(20, 20, 22, 0.42);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	color: #fff;
	font-size: 0.88rem;
	line-height: 1.3;
	font-weight: 700;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
	z-index: 2;
}
.roosterx-blog-archive--mosaic .roosterx-blog-archive__card-title a {
	color: inherit;
	text-decoration: none;
}
/* Soft glass border lift on hover. */
.roosterx-blog-archive--mosaic .roosterx-blog-archive__card:hover .roosterx-blog-archive__card-title {
	background: rgba(20, 20, 22, 0.55);
	border-color: rgba(255, 255, 255, 0.28);
}

/* Date — small chip at top-right, also glass. */
.roosterx-blog-archive--mosaic .roosterx-blog-archive__card-date {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0 !important;
	padding: 4px 10px;
	background: rgba(20, 20, 22, 0.42);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	color: #fff;
	font-size: 0.72rem;
	z-index: 2;
}

/* Browsers without backdrop-filter (old Firefox) fall back to a
 * heavier solid alpha so the title still reads. */
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
	.roosterx-blog-archive--mosaic .roosterx-blog-archive__card-title,
	.roosterx-blog-archive--mosaic .roosterx-blog-archive__card-date {
		background: rgba(0, 0, 0, 0.62);
	}
}

/* ── 3-col variant (8-card cycle) ────────────────────────────────── */
.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__grid {
	grid-template-columns: repeat(3, 1fr);
}
.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__card:nth-child(8n+1) {
	grid-column: span 3;
	grid-row: span 2;
	min-height: 380px;
}
.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__card:nth-child(8n+2) {
	grid-column: span 2;
}
.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__card:nth-child(8n+3) {
	grid-column: span 1;
}
.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__card:nth-child(8n+4),
.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__card:nth-child(8n+5),
.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__card:nth-child(8n+6) {
	grid-column: span 1;
}
.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__card:nth-child(8n+7) {
	grid-column: span 1;
}
.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__card:nth-child(8n+8) {
	grid-column: span 2;
}
/* Hero card — bump the title since it has the real estate. */
.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__card:nth-child(8n+1) .roosterx-blog-archive__card-title {
	font-size: 1.35rem;
	padding: 14px 20px;
}

/* ── 4-col variant (9-card cycle) ────────────────────────────────── */
.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__grid {
	grid-template-columns: repeat(4, 1fr);
}
.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__card:nth-child(9n+1) {
	grid-column: span 4;
	min-height: 360px;
}
.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__card:nth-child(9n+2),
.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__card:nth-child(9n+3) {
	grid-column: span 2;
}
.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__card:nth-child(9n+4),
.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__card:nth-child(9n+5),
.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__card:nth-child(9n+6),
.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__card:nth-child(9n+7) {
	grid-column: span 1;
}
.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__card:nth-child(9n+8) {
	grid-column: span 3;
}
.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__card:nth-child(9n+9) {
	grid-column: span 1;
}
.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__card:nth-child(9n+1) .roosterx-blog-archive__card-title {
	font-size: 1.35rem;
	padding: 14px 20px;
}

/* Tablet — collapse both variants to 2-col, hero stays full row. */
@media (max-width: 1024px) {
	.roosterx-blog-archive--mosaic .roosterx-blog-archive__grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__card:nth-child(8n+1),
	.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__card:nth-child(9n+1) {
		grid-column: span 2;
		grid-row: auto;
		min-height: 320px;
	}
	.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__card:nth-child(8n+2),
	.roosterx-blog-archive--mosaic-cols-3 .roosterx-blog-archive__card:nth-child(8n+8),
	.roosterx-blog-archive--mosaic-cols-4 .roosterx-blog-archive__card:nth-child(9n+8) {
		grid-column: span 2;
	}
	.roosterx-blog-archive--mosaic .roosterx-blog-archive__card {
		grid-column: span 1;
	}
}

/* Mobile — single column, no spans. */
@media (max-width: 600px) {
	.roosterx-blog-archive--mosaic .roosterx-blog-archive__grid {
		grid-template-columns: 1fr !important;
	}
	.roosterx-blog-archive--mosaic .roosterx-blog-archive__card {
		grid-column: auto !important;
		grid-row: auto !important;
		min-height: 260px;
	}
}

/* ── Footer top breathing room ─────────────────────────────────────────
 * Guarantee a clean visual gap between whatever the page's last block
 * is (often a full-width CTA card with a dark background) and the
 * footer's pale-subtle band. Targets the `<footer class="wp-block-
 * template-part">` wrapper that WP emits around the footer template
 * part — so this rule applies whether the footer source is the theme
 * file (parts/footer.html) or a Site-Editor DB override.
 *
 * 50px desktop · 30px mobile · smooth scaling between via clamp().
 */
footer.wp-block-template-part {
	margin-top: clamp(30px, 4vw + 10px, 50px);
}

/* ── Coloured paragraph breathing room ─────────────────────────────────
 * Migrated content from the Botiga era includes paragraphs with an
 * inline background-color but no padding, so the colour band hugs the
 * text uncomfortably. Auto-pad any wp:paragraph that carries an inline
 * background style so the layout reads cleanly without per-block edits.
 *
 * Targets BOTH `background-color:` and the `background:` shorthand,
 * including theme-class variants (.has-background) for completeness.
 */
.wp-block-paragraph[style*="background-color"],
.wp-block-paragraph[style*="background:"],
p.wp-block-paragraph.has-background {
	padding: var(--wp--preset--spacing--3, 0.75rem) var(--wp--preset--spacing--4, 1rem);
	border-radius: 6px;
}

/* ── Coloured-section group breathing room ─────────────────────────────
 * Same idea for the wp:group / wp:column wrappers that carry a
 * background colour from migration — applies a comfortable padding so
 * the colour band has 12-16px around the text/children.
 */
.wp-block-group[style*="background-color"]:not(.has-global-padding):not([style*="padding"]),
.wp-block-column[style*="background-color"]:not([style*="padding"]) {
	padding: var(--wp--preset--spacing--3, 0.75rem) var(--wp--preset--spacing--4, 1rem);
	border-radius: 6px;
}

/* ── Store photos: 1px black border ──────────────────────────────────
 * Both the archive cards (post-featured-image) and the in-body
 * photos / galleries on the single store template get a thin black
 * outline so they read as photographic content rather than blending
 * into the page background.
 */
.post-type-archive-store_location .wp-block-post-featured-image img,
.single-store_location .wp-block-image img,
.single-store_location .wp-block-gallery img,
.single-store_location .wp-block-post-featured-image img {
	border: 1px solid #000;
}