/* ==========================================================================
   eclat-page-header.css — the unified page title band (Phase 2)
   --------------------------------------------------------------------------
   One band directly below the main navigation, on every page except the front
   page, the single product page, the cart and the checkout. It carries the
   title, an optional subtitle and the breadcrumb trail; on the Shop landing
   page it also carries the horizontal, icon-based category rail.

   The band is themed entirely through the custom properties declared on
   `.eclat-ph` below — change those four values and the whole band retextures
   without touching a rule. Typography is driven by the `eclat-ph--<kind>`
   modifier the PHP puts on the section, so a shop landing page and a blog post
   do not have to share one type scale.
   ========================================================================== */

.eclat-ph {
	/* ---- the customisable surface ---------------------------------- */
	--eclat-ph-bg:      var(--wd-alt);
	--eclat-ph-bg-2:    var(--wd-alt-2);
	--eclat-ph-ink:     var(--wd-dark);
	--eclat-ph-muted:   var(--wd-soft);
	--eclat-ph-line:    var(--wd-line);
	--eclat-ph-pad:     46px;
	--eclat-ph-size:    30px;

	position: relative;
	background: linear-gradient(180deg, var(--eclat-ph-bg) 0%, var(--eclat-ph-bg-2) 100%);
	border-bottom: 1px solid var(--eclat-ph-line);
	color: var(--eclat-ph-ink);
}

.eclat-ph__wrap {
	max-width: var(--wd-max);
	margin-inline: auto;
	padding-inline: var(--wd-gutter);
	padding-block: var(--eclat-ph-pad);
}

/* --------------------------------------------------------------------------
   Optional background image
   --------------------------------------------------------------------------
   Set from the page's (or the term's) featured image — see
   eclat_ph_background() in inc/page-header.php. A scrim keeps the title and the
   trail legible over any photograph, light or dark, without having to know
   which was uploaded.
   ----------------------------------------------------------------------- */
.eclat-ph--image {
	background-image: var(--eclat-ph-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-bottom-color: transparent;
}

.eclat-ph--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.86) 100%);
	pointer-events: none;
}

.eclat-ph--image .eclat-ph__wrap { position: relative; z-index: 2; }

.eclat-ph__head { text-align: center; }

.eclat-ph__title {
	margin: 0;
	font-family: var(--wd-font-head);
	font-size: var(--eclat-ph-size);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--eclat-ph-ink);
}

.eclat-ph__sub {
	max-width: 640px;
	margin: 10px auto 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--wd-text);
}

/* --------------------------------------------------------------------------
   BREADCRUMBS
   Rank Math's own markup and the fallback trail below share one look, so the
   band reads the same whichever produced it.
   ----------------------------------------------------------------------- */
.eclat-ph__crumbs {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--eclat-ph-muted);
}

.eclat-ph__crumbs a,
.eclat-ph__crumbs .last { color: var(--eclat-ph-muted); }
.eclat-ph__crumbs a:hover { color: var(--wd-accent); }

.eclat-ph__crumb,
.eclat-ph__sep {
	display: inline-block;
	vertical-align: baseline;
}

.eclat-ph__sep { margin-inline: 7px; opacity: 0.55; }

/* Rank Math prints its own separator element; give it the same rhythm */
.eclat-ph__crumbs .separator { margin-inline: 7px; opacity: 0.55; }

/* --------------------------------------------------------------------------
   TYPOGRAPHY PER PAGE KIND
   ----------------------------------------------------------------------- */
.eclat-ph--shop {
	--eclat-ph-size: 34px;
	--eclat-ph-pad: 52px;
}

.eclat-ph--shop .eclat-ph__title {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
}

.eclat-ph--archive { --eclat-ph-size: 30px; }
.eclat-ph--blog    { --eclat-ph-size: 34px; }
.eclat-ph--page    { --eclat-ph-size: 32px; }

.eclat-ph--post {
	--eclat-ph-size: 34px;
	--eclat-ph-pad: 54px;
}

.eclat-ph--post .eclat-ph__title {
	max-width: 880px;
	margin-inline: auto;
	line-height: 1.28;
}

.eclat-ph--compact {
	--eclat-ph-size: 24px;
	--eclat-ph-pad: 34px;
}

/* the rail needs less air under the title than beside it */
.eclat-ph--has-cats .eclat-ph__wrap { padding-bottom: 30px; }

/* ==========================================================================
   SHOP ONLY — horizontal icon category rail
   --------------------------------------------------------------------------
   A row of icon tiles under the title, each linking to that category's archive.
   The row is centred while it fits and becomes a snap-scrolling rail when it
   does not, so the same markup serves a three-category catalogue and a
   twelve-category one without a breakpoint deciding between them.
   ========================================================================== */
.eclat-ph__cats { margin-top: 30px; }

.eclat-ph__cats-list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.eclat-ph__cats-list li { list-style: none; margin: 0; }
.eclat-ph__cats-list li::marker { content: none; }

.eclat-ph__cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 118px;
	min-height: 108px;
	padding: 16px 10px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--eclat-ph-line);
	color: var(--wd-head);
	text-align: center;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease,
		transform 0.2s ease;
}

.eclat-ph__cat-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--wd-accent);
}

.eclat-ph__cat-ico svg { width: 26px; height: 26px; }

.eclat-ph__cat-name {
	font-family: var(--wd-font-head);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.02em;
}

.eclat-ph__cat-n {
	font-size: 11px;
	line-height: 1;
	color: var(--eclat-ph-muted);
}

@media (hover: hover) {
	.eclat-ph__cat:hover {
		border-color: var(--wd-accent);
		color: var(--wd-accent);
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
		transform: translateY(-2px);
	}
}

.eclat-ph__cat.is-current {
	border-color: var(--wd-accent);
	color: var(--wd-accent);
	box-shadow: inset 0 -2px 0 var(--wd-accent);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	.eclat-ph { --eclat-ph-pad: 36px; }
	.eclat-ph--shop { --eclat-ph-size: 28px; }
	.eclat-ph--post,
	.eclat-ph--blog { --eclat-ph-size: 28px; }
	.eclat-ph--page,
	.eclat-ph--archive { --eclat-ph-size: 26px; }
}

@media (max-width: 768px) {
	.eclat-ph {
		--eclat-ph-pad: 26px;
		--eclat-ph-size: 22px;
	}

	.eclat-ph--shop,
	.eclat-ph--blog,
	.eclat-ph--post { --eclat-ph-size: 23px; }

	.eclat-ph__sub { font-size: 14px; margin-top: 8px; }
	.eclat-ph__crumbs { margin-top: 9px; font-size: 12px; }

	/* the rail scrolls rather than wrapping into four ragged rows */
	.eclat-ph__cats { margin-top: 20px; }

	.eclat-ph__cats-list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin-inline: calc(var(--wd-gutter) * -1) !important;
		padding-inline: var(--wd-gutter) !important;
	}

	.eclat-ph__cats-list::-webkit-scrollbar { display: none; }

	.eclat-ph__cat {
		flex: 0 0 auto;
		width: 96px;
		min-height: 94px;
		padding: 13px 8px;
		gap: 6px;
		scroll-snap-align: start;
	}

	.eclat-ph__cat-ico,
	.eclat-ph__cat-ico svg { width: 22px; height: 22px; }
	.eclat-ph__cat-name { font-size: 11.5px; }
	.eclat-ph__cat-n { font-size: 10px; }
}