/**
 * Product category archive — honey hero, sort toolbar, product grid, promo
 * banner, related categories, contact CTA intro.
 *
 * The product grid itself only sets columns/gap on WooCommerce's own
 * ul.products — card internals live in components/product-card.css.
 * .chip / .chip--stat / .btn / .tabs come from components/button.css and are
 * not redefined here. .contact-cta__card is the shared dark contact card
 * from components/contact-cta.css — only its section wrapper is page-owned.
 *
 * @package Geras_Custom
 */

/* ---------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------- */

.category-hero {
	position: relative;
	overflow: hidden;
	background: var( --surface-sand );
}

.category-hero__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient( 760px 460px at 88% 18%, var( --c-honey3-a42 ), transparent 62% ),
		radial-gradient( 520px 380px at -6% 100%, var( --c-honey3-a24 ), transparent 60% );
	pointer-events: none;
}

.category-hero__confetti {
	position: absolute;
	width: var( --space-16 );
	height: var( --space-5 );
	border-radius: var( --radius-4 );
}

.category-hero__confetti--1 { top: 18%; left: 5%;  background: var( --c-honey-500 ); opacity: .85; transform: rotate( 35deg ); }
.category-hero__confetti--2 { top: 70%; left: 11%; background: var( --c-red-500 );   opacity: .55; transform: rotate( -20deg ); }
.category-hero__confetti--3 { top: 34%; left: 47%; background: var( --c-green-500 ); opacity: .6;  transform: rotate( 70deg ); }
.category-hero__confetti--4 { top: 82%; left: 39%; background: var( --c-cocoa-700 ); opacity: .28; transform: rotate( -45deg ); }
.category-hero__confetti--5 { top: 14%; right: 9%; background: var( --c-honey-500 ); opacity: .85; transform: rotate( -30deg ); }
.category-hero__confetti--6 { top: 84%; right: 16%; background: var( --c-red-500 );  opacity: .55; transform: rotate( 15deg ); }

.category-hero__inner {
	position: relative;
	padding: var( --space-26 ) var( --container-px ) var( --space-58 );
}

.category-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	align-items: end;
	gap: var( --space-48 );
	margin-top: var( --space-22 );
}

.category-hero__content {
	max-width: 640px;
}

.category-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var( --space-10 );
	margin-bottom: var( --space-12 );
	font-size: var( --fs-12-5 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-widest );
	text-transform: uppercase;
	color: var( --color-heading );
	opacity: .85;
}

.category-hero__eyebrow-dash {
	width: var( --space-26 );
	height: var( --space-8 );
	border-radius: var( --radius-8 );
	background: linear-gradient( 90deg, var( --c-honey-500 ), var( --c-honey-300 ) );
	box-shadow: var( --ring-focus );
}

.category-hero__title {
	font-family: var( --font-display );
	font-size: var( --fs-d3 );
	font-weight: var( --fw-590 );
	line-height: var( --lh-display, 1.12 );
	letter-spacing: var( --ls-tight );
	color: var( --color-heading );
}

.category-hero__accent-wrap {
	position: relative;
	display: inline-block;
}

.category-hero__accent {
	font-style: italic;
	font-weight: var( --fw-540 );
	color: var( --color-accent-deep );
}

.category-hero__squiggle {
	position: absolute;
	inset: auto 0 -10px 0;
	width: 100%;
	height: 16px;
	overflow: visible;
}

.category-hero__squiggle path {
	fill: none;
	stroke: var( --c-honey-500 );
	stroke-width: 5;
	stroke-linecap: round;
}

.category-hero__desc,
.category-hero__content .term-description p {
	margin-top: var( --space-18 );
	max-width: 600px;
	font-size: var( --fs-18-5 );
}

.category-hero__aside {
	display: flex;
	flex-direction: column;
	gap: var( --space-14 );
}

.category-hero__stat {
	align-self: flex-start;
}

.category-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-10 );
}

.category-hero__scallop {
	display: block;
	width: 100%;
	height: 34px;
	margin-bottom: -1px;
	fill: var( --surface-page );
}

/* ---------------------------------------------------------------
 * Toolbar (result count + ordering)
 * ------------------------------------------------------------- */

.category-shop {
	padding: var( --space-44 ) 0 var( --space-96 );
	background: var( --surface-page );
}

.category-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-20 );
	padding-bottom: var( --space-26 );
	margin-bottom: var( --space-38 );
	border-bottom: 1px solid var( --color-border-strong );
}

.category-toolbar .woocommerce-result-count {
	font-size: var( --fs-14-5 );
	font-weight: var( --fw-bold );
	color: var( --color-muted );
}

.category-toolbar .woocommerce-result-count strong {
	color: var( --color-heading );
}

.category-toolbar__sort {
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------
 * Product grid — WooCommerce's own ul.products, columns owned here.
 * ------------------------------------------------------------- */

.category-grid .products {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	align-items: stretch;
	gap: var( --space-26 );
}

.category-grid .products > li {
	list-style: none;
}

.category-empty {
	padding: var( --space-48 ) 0;
}

/* ---------------------------------------------------------------
 * Promo banner
 * ------------------------------------------------------------- */

.category-promo {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.35fr .65fr;
	align-items: center;
	gap: var( --space-40 );
	margin-top: var( --space-38 );
	padding: var( --space-44 ) var( --space-48 );
	border-radius: var( --radius-28 );
	background: linear-gradient( 150deg, var( --c-honey-300 ), var( --c-honey-500 ) 72% );
	color: var( --color-heading-alt );
	box-shadow: var( --shadow-btn-hover );
}

.category-promo__blob {
	position: absolute;
	top: -110px;
	right: -90px;
	width: 300px;
	height: 300px;
	border-radius: var( --radius-circle );
	background: radial-gradient( circle, var( --c-white-a50 ), transparent 68% );
	pointer-events: none;
}

.category-promo__confetti {
	position: absolute;
	width: var( --space-16 );
	height: var( --space-5 );
	border-radius: var( --radius-4 );
}

.category-promo__confetti--1 { top: 22%; right: 26%; background: var( --c-cocoa-900 ); opacity: .18; transform: rotate( 35deg ); }
.category-promo__confetti--2 { top: 64%; right: 32%; background: var( --c-paper );      opacity: .7;  transform: rotate( -25deg ); }
.category-promo__confetti--3 { top: 80%; right: 19%; background: var( --c-red-500 );    opacity: .35; transform: rotate( 60deg ); }

.category-promo__content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var( --space-12 );
	max-width: 640px;
}

.category-promo__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var( --space-10 );
	font-size: var( --fs-12 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-widest );
	text-transform: uppercase;
	color: var( --color-heading-alt );
	opacity: .72;
}

.category-promo__eyebrow-dash {
	width: var( --space-26 );
	height: var( --space-8 );
	border-radius: var( --radius-8 );
	background: var( --c-cocoa-900 );
	opacity: .35;
}

.category-promo__title {
	font-family: var( --font-display );
	font-size: var( --fs-d6 );
	font-weight: var( --fw-560 );
	line-height: 1.18;
	color: var( --color-heading-alt );
}

.category-promo__title em {
	font-style: italic;
	font-weight: var( --fw-540 );
}

.category-promo__text {
	max-width: 600px;
	font-size: var( --fs-16 );
	font-weight: var( --fw-medium );
}

.category-promo__actions {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-14 );
}

.category-promo__note {
	font-size: var( --fs-13-5 );
	font-weight: var( --fw-bold );
	color: var( --color-heading-alt );
	opacity: .75;
}


.category-related {
	padding: var( --space-88 ) 0;
	background: var( --surface-sand );
}

.contact-cta {
	padding: var( --space-88 ) 0;
	background: var( --surface-page );
}

/* ---------------------------------------------------------------
 * Related categories
 * ------------------------------------------------------------- */

.category-related__head {
	max-width: 760px;
	margin-bottom: var( --space-44 );
}

.category-related__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var( --space-10 );
	margin-bottom: var( --space-12 );
	font-size: var( --fs-12-5 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-widest );
	text-transform: uppercase;
	color: var( --color-heading );
	opacity: .85;
}

.category-related__eyebrow-dash {
	width: var( --space-26 );
	height: var( --space-8 );
	border-radius: var( --radius-8 );
	background: linear-gradient( 90deg, var( --c-honey-500 ), var( --c-honey-300 ) );
	box-shadow: var( --ring-focus );
}

.category-related__title {
	font-family: var( --font-display );
	font-size: var( --fs-d5 );
	font-weight: var( --fw-580 );
	line-height: var( --lh-tight );
	color: var( --color-heading );
}

.category-related__title em {
	font-style: italic;
	font-weight: var( --fw-540 );
	color: var( --color-accent-deep );
}

.category-related__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --space-26 );
}

.category-related__card {
	display: block;
	padding: var( --space-30 ) var( --space-28 );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-28 );
	background: var( --surface-page );
	box-shadow: var( --shadow-card );
	transition: transform var( --transition-slow ), box-shadow var( --transition-slow );
}

.category-related__card:hover {
	transform: translateY( -6px );
	box-shadow: var( --shadow-float );
}

.category-related__badge {
	display: inline-block;
	margin-bottom: var( --space-16 );
	padding: var( --space-5 ) var( --space-12 );
	border-radius: var( --radius-pill );
	background: var( --surface-cream );
	font-size: var( --fs-11 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-eyelet );
	text-transform: uppercase;
	color: var( --color-heading );
}

.category-related__card-title {
	margin-bottom: var( --space-6 );
	font-family: var( --font-display );
	font-size: var( --fs-22 );
	font-weight: var( --fw-560 );
	color: var( --color-heading );
}

.category-related__card-text {
	font-size: var( --fs-14-5 );
}

/* ---------------------------------------------------------------
 * Contact CTA — intro column is page-owned, .contact-cta__card is the
 * shared dark card (components/contact-cta.css, not redefined here).
 * ------------------------------------------------------------- */

.contact-cta__grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	align-items: center;
	gap: var( --space-56 );
}

.contact-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var( --space-10 );
	margin-bottom: var( --space-12 );
	font-size: var( --fs-12-5 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-widest );
	text-transform: uppercase;
	color: var( --color-heading );
	opacity: .85;
}

.contact-cta__eyebrow-dash {
	width: var( --space-26 );
	height: var( --space-8 );
	border-radius: var( --radius-8 );
	background: linear-gradient( 90deg, var( --c-honey-500 ), var( --c-honey-300 ) );
	box-shadow: var( --ring-focus );
}

.contact-cta__title {
	font-family: var( --font-display );
	font-size: var( --fs-d5 );
	font-weight: var( --fw-580 );
	line-height: var( --lh-tight );
	color: var( --color-heading );
}

.contact-cta__title em {
	font-style: italic;
	font-weight: var( --fw-540 );
	color: var( --color-accent-deep );
}

.contact-cta__text {
	margin-top: var( --space-20 );
	max-width: 560px;
	font-size: var( --fs-18-5 );
}

/* ---------------------------------------------------------------
 * Mobile — no @media in the mockup's own CSS (its breakpoints live in a
 * page-level demo <script>, not ported: real product sorting needs a
 * server round-trip, so it cannot drive live layout). Derived per
 * responsive.md mode 3.
 * ------------------------------------------------------------- */

@media ( max-width: 767px ) {

	.category-hero__grid {
		grid-template-columns: 1fr;
	}

	.category-grid .products {
		grid-template-columns: repeat( 2, 1fr );
	}

	.category-promo {
		grid-template-columns: 1fr;
	}

	.category-related__grid {
		grid-template-columns: 1fr;
	}

	.contact-cta__grid {
		grid-template-columns: 1fr;
	}
}