/**
 * Passion theme — base design system.
 * Loaded after style.css; this is where real styling lives.
 */

:root {
	--passion-accent: #c19a53; /* warm gold — overridden by Customizer, see inc/customizer.php */
	--passion-ink: #1c1a17; /* deep charcoal, warmed slightly to pair with gold rather than a cold black */
	--passion-paper: #ffffff;
	--passion-muted: #6b6b6b;
	--passion-muted-inverse: #b3ada4; /* muted text on dark (charcoal) backgrounds */
	--passion-border: #e5e0d8;
	--passion-card-bg: #f6f3ee; /* warm neutral behind product images, shows only while an image loads */
	--passion-max-width: 1200px;
	--passion-gap: 1.5rem;
	--passion-font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--passion-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
	--passion-tracking: 0.08em;
	--passion-transition: 0.25s ease;
	--passion-radius: 6px;
}

/* Several sections intentionally break out to full viewport width via
 * `width: 100vw; margin-left: calc(50% - 50vw)` (see ul.products further
 * down, plus the home/cart edge-to-edge product grids) — the classic
 * "full-bleed inside a centered container" technique. `100vw` is defined
 * as the *initial containing block's* width, which on most browsers
 * includes the vertical scrollbar's track, while the page's actual visible
 * width (what everything else is laid out against) doesn't. Whenever the
 * page is tall enough to need a vertical scrollbar, that mismatch alone
 * (typically ~15-17px) pushes those full-bleed sections a few px past
 * both edges — enough to trigger an unwanted *horizontal* scrollbar too.
 * `overflow-x: clip` on html/body is the fix for this exact pattern: it
 * clips that incidental few-px overhang without affecting any real layout
 * (nothing on this site relies on horizontal scroll at the document level
 * — the few places that do, e.g. the mega menu's mobile submenu or a wide
 * table, scope their own scroll container instead, see `overflow-x: auto`
 * elsewhere in this file).
 *
 * NOTE: this must be `clip`, not `hidden`. Per the CSS Overflow spec, an
 * element with only one axis set to a non-visible value gets its other
 * (still-`visible`) axis computed to `auto` — so `overflow-x: hidden`
 * alone silently turns `body` into a real scroll container (implied
 * `overflow-y: auto`), which breaks `.site-header`'s `position: sticky`
 * (it stops being pinned to the viewport and scrolls away instead).
 * `clip` doesn't establish a scrollport, so it avoids that pairing quirk
 * and the header stays sticky. Found 2026-09-01 after the header stopped
 * staying fixed once the `hidden` version shipped. */
html,
body {
	overflow-x: clip;
}

body {
	font-family: var(--passion-font-body);
	font-size: 16px;
	color: var(--passion-ink);
	background: var(--passion-paper);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--passion-font-heading);
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.15;
}

a {
	color: var(--passion-ink);
}

a:hover {
	color: var(--passion-accent);
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--passion-ink);
	color: var(--passion-paper);
	padding: 0.75em 1em;
	z-index: 100;
}

.skip-link:focus {
	left: 0;
}

/* Announcement bar */
.announcement-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: var(--passion-ink);
	color: var(--passion-paper);
	padding: 0.6rem 1rem;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
}

.announcement-bar__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 1.2em;
	min-width: 200px;
	text-align: center;
}

.announcement-bar__item {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
	white-space: nowrap;
}

.announcement-bar__item.is-active {
	opacity: 1;
}

.announcement-bar__arrow {
	background: none;
	border: none;
	color: var(--passion-paper);
	cursor: pointer;
	font-size: 0.85rem;
	line-height: 1;
	padding: 0.25rem;
	opacity: 0.7;
}

.announcement-bar__arrow:hover {
	opacity: 1;
}

/* Header */
.site-header {
	border-bottom: 1px solid var(--passion-border);
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--passion-paper);
	transition: box-shadow var(--passion-transition);
}

.site-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--passion-gap);
	padding: 1.5rem 2rem;
	transition: padding var(--passion-transition);
}

.site-header-right {
	display: contents;
}

/* .shop-megamenu only ever renders inside the "Shop" <li>, alongside its
 * existing .sub-menu — hidden below the desktop breakpoint (the
 * `display: block` override further down only applies from 783px up),
 * since mobile already gets a working nested-list submenu from the plain
 * .sub-menu markup (see the @media (max-width: 782px) block above). */
.shop-megamenu {
	display: none;
}

/* Nav left / logo centred / search+account+cart right, By Charlotte-style —
 * desktop only. .site-header-right is `display:contents` below this
 * breakpoint so it stays invisible to the box tree and every existing
 * mobile flex/order rule below keeps targeting .header-search/.header-actions
 * as if they were still direct children of .site-header-inner. */
@media (min-width: 783px) {
	.site-header-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}

	.main-navigation {
		order: 1;
		justify-self: start;
	}

	.site-branding {
		order: 2;
		justify-self: center;
	}

	.site-header-right {
		display: flex;
		align-items: center;
		gap: 1.25rem;
		order: 3;
		justify-self: end;
	}

	/* The Shop item's normal small .sub-menu dropdown is redundant once it
	 * also has a .shop-megamenu sibling — only Shop's <li> ever has one. */
	.main-navigation li:has(> .shop-megamenu) > ul.sub-menu {
		display: none;
	}

	/* Removing position from just the Shop <li> (desktop only — its normal
	 * dropdown anchoring isn't needed since .shop-megamenu replaces it)
	 * makes .site-header (position: sticky) the nearest positioned
	 * ancestor instead, so top/left/right below resolve against the
	 * full-width header rather than the narrow nav item itself. */
	.main-navigation li.nav-item--shop {
		position: static;
	}

	.shop-megamenu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--passion-card-bg);
		border-top: 1px solid var(--passion-border);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
		z-index: 30;
	}

	/* Plain :hover is deliberately not used to reveal this panel — the
	 * cursor has to cross the header's own bottom padding (a real gap,
	 * see initShopMegaMenu() in main.js) to reach it, so JS keeps it open
	 * across that transit with a short close delay via .is-megamenu-open.
	 * :focus-within stays for keyboard users, who don't hit the gap. */
	.main-navigation li.is-megamenu-open > .shop-megamenu,
	.main-navigation li:focus-within > .shop-megamenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.shop-megamenu__inner {
		max-width: var(--passion-max-width);
		margin: 0 auto;
		display: flex;
		gap: 3rem;
		padding: 2.5rem 1rem;
	}

	.shop-megamenu__column {
		min-width: 160px;
	}

	.shop-megamenu__heading {
		display: block;
		font-size: 0.85rem;
		font-weight: 500;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--passion-ink);
		text-decoration: none;
		margin-bottom: 1rem;
	}

	.shop-megamenu__heading:hover {
		color: var(--passion-accent);
	}

	/* Higher-specificity resets: a <ul> nested inside #primary-menu's own
	 * <ul>, however many <div>s sit between them, also matches the plain
	 * dropdown rules above (.main-navigation ul ul / ul ul li / ul ul a) —
	 * those set position:absolute + opacity:0 (meant only for a simple
	 * one-level submenu), which would otherwise fully break this list. */
	.shop-megamenu .shop-megamenu__list {
		position: static;
		list-style: none;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}

	.shop-megamenu .shop-megamenu__list li {
		width: auto;
	}

	.shop-megamenu .shop-megamenu__list a {
		display: block;
		padding: 0;
		white-space: normal;
		font-size: 0.82rem;
		color: var(--passion-muted);
		text-decoration: none;
		transition: color var(--passion-transition);
	}

	.shop-megamenu .shop-megamenu__list a:hover {
		background: none;
		color: var(--passion-accent);
	}
}

.site-header.is-scrolled .site-header-inner {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.main-navigation ul {
	list-style: none;
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	position: relative;
}

.main-navigation ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	gap: 0;
	min-width: 200px;
	background: var(--passion-paper);
	border: 1px solid var(--passion-border);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	padding: 0.5rem 0;
	margin-top: 0.5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 20;
}

.main-navigation li.menu-item-has-children:hover > ul,
.main-navigation li.menu-item-has-children:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation ul ul li {
	width: 100%;
}

.main-navigation ul ul a {
	display: block;
	padding: 0.5rem 1.25rem;
	white-space: nowrap;
}

.main-navigation ul ul a:hover {
	background: #faf9f6;
}

.main-navigation a {
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	transition: color var(--passion-transition);
}

.site-title {
	margin: 0;
	font-size: 1.6rem;
	transition: font-size var(--passion-transition);
}

.site-header.is-scrolled .site-title {
	font-size: 1.25rem;
}

.site-title a {
	font-family: var(--passion-font-heading);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.custom-logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	text-decoration: none;
}

.custom-logo {
	max-height: 40px;
	width: auto;
	display: block;
	transition: max-height var(--passion-transition);
}

.site-header.is-scrolled .custom-logo {
	max-height: 30px;
}

.site-branding__wordmark {
	font-family: var(--passion-font-heading);
	font-weight: 400;
	font-size: 1.3rem;
	letter-spacing: 0.02em;
	color: var(--passion-ink);
	white-space: nowrap;
	transition: font-size var(--passion-transition);
}

.site-header.is-scrolled .site-branding__wordmark {
	font-size: 1.05rem;
}

/* Mobile menu toggle (hidden on desktop) */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.menu-toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--passion-ink);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.is-active .menu-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-active .menu-toggle-bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle.is-active .menu-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Header cart + mini-cart dropdown */
.header-search .search-form {
	display: flex;
}

.header-search .search-field {
	width: 160px;
	padding: 0.55em 0.75em;
	border: 1px solid var(--passion-border);
	border-right: 0;
	border-radius: var(--passion-radius) 0 0 var(--passion-radius);
	font: inherit;
	font-size: 0.85rem;
	background: var(--passion-paper);
	transition: width 0.2s ease;
}

.header-search .search-field:focus {
	width: 220px;
	outline: 2px solid var(--passion-accent);
	outline-offset: -1px;
}

.header-search .search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--passion-ink);
	border-radius: 0 var(--passion-radius) var(--passion-radius) 0;
	background: var(--passion-ink);
	color: var(--passion-paper);
	padding: 0 0.75em;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}

.header-search .search-submit:hover {
	background: var(--passion-accent);
	border-color: var(--passion-accent);
}

.search-panel .search-submit:hover {
	background: var(--passion-accent);
	border-color: var(--passion-accent);
}

@media (max-width: 700px) {
	.search-panel {
		right: -1rem;
		min-width: calc(100vw - 2rem);
	}
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.1rem;
}

.header-account {
	display: inline-flex;
	align-items: center;
	padding: 0.5em;
	color: var(--passion-ink);
	transition: color var(--passion-transition);
}

.header-account:hover {
	color: var(--passion-accent);
}

.header-account svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.header-cart {
	position: relative;
}

.cart-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--passion-ink);
	cursor: pointer;
	padding: 0.5em;
}

.cart-toggle svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.mini-cart-panel {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 20;
	min-width: 600px;
	background: var(--passion-paper);
	border: 1px solid var(--passion-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	padding: 1rem;
}

.mini-cart-panel.is-open {
	display: block;
}

.widget_shopping_cart_content ul.cart_list,
.widget_shopping_cart_content ul.product_list_widget {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.widget_shopping_cart_content ul.cart_list li,
.widget_shopping_cart_content ul.product_list_widget li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--passion-border);
}

.widget_shopping_cart_content ul.cart_list li a:not(.remove_from_cart_button) {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.widget_shopping_cart_content ul.cart_list li img {
	width: 48px;
	height: 48px;
	object-fit: cover;
}

.widget_shopping_cart_content ul.cart_list li .quantity {
	margin-left: auto;
	padding-left: 0.75rem;
	text-align: right;
	white-space: nowrap;
}

.widget_shopping_cart_content .total {
	text-align: right;
	font-weight: 600;
	margin-bottom: 1rem;
}

.widget_shopping_cart_content .tax_label {
	display: none;
}

.widget_shopping_cart_content .buttons {
	display: flex;
	gap: 0.5rem;
}

.widget_shopping_cart_content .buttons a {
	flex: 1;
	text-align: center;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: var(--passion-tracking);
	padding: 0.75em 1em;
	border: 1px solid var(--passion-ink);
	border-radius: var(--passion-radius);
	text-decoration: none;
	transition: background-color var(--passion-transition), color var(--passion-transition);
}

.widget_shopping_cart_content .buttons a:hover {
	background: var(--passion-ink);
	color: var(--passion-paper);
}

.widget_shopping_cart_content .buttons a.checkout {
	background: var(--passion-ink);
	color: var(--passion-paper);
}

@media (max-width: 782px) {
	.menu-toggle {
		display: flex;
	}

	.main-navigation {
		display: none;
		width: 100%;
		order: 3;
	}

	.main-navigation.is-open {
		display: block;
	}

	.main-navigation ul {
		flex-direction: column;
		gap: 0;
	}

	.main-navigation ul li a {
		display: block;
		padding: 0.75em 0;
		border-bottom: 1px solid var(--passion-border);
	}

	.main-navigation ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: none;
		box-shadow: none;
		margin: 0 0 0 1rem;
		padding: 0;
	}

	.main-navigation ul ul a {
		padding: 0.6em 0;
	}

	.site-header-inner {
		flex-wrap: wrap;
	}

	.header-search {
		order: 4;
		width: 100%;
		margin-top: 0.75rem;
	}

	.header-search .search-form {
		width: 100%;
	}

	.header-search .search-field,
	.header-search .search-field:focus {
		width: 100%;
	}

	.mini-cart-panel {
		right: -1rem;
		min-width: calc(100vw - 2rem);
	}
}

/* Main content */
.site-main {
	flex: 1;
	max-width: var(--passion-max-width);
	width: 100%;
	margin: 0 auto;
	padding: 2rem 1rem;
}

/* WooCommerce's own default breadcrumb (Home / Rings / Engagement Rings),
 * rendered just above .shop-header — was previously completely unstyled. */
.woocommerce-breadcrumb {
	font-size: 0.8rem;
	color: var(--passion-muted);
	margin: 0 0 1.25rem;
}

.woocommerce-breadcrumb a {
	color: var(--passion-muted);
	text-decoration: none;
	transition: color var(--passion-transition);
}

.woocommerce-breadcrumb a:hover {
	color: var(--passion-accent);
}

/* Shop/category archive header (woocommerce/loop/header.php) */
.shop-header {
	margin: 0 0 1.5rem;
	text-align: left;
}

.shop-header__title {
	font-size: 1.5rem;
	font-weight: 400;
	margin: 0 0 0.5rem;
}

.shop-header .term-description {
	color: var(--passion-muted);
	max-width: 46em;
	margin: 0;
}

/* WooCommerce product grid */
.page-header {
	margin: 0 0 2rem;
}

/* Break the grid/toolbar/pagination out to full viewport width, edge to
 * edge — .site-main itself stays max-width for every other page (single
 * posts/pages, product page, cart/checkout); this only fires for the
 * direct-child elements that exist solely on shop/category/search
 * results pages, never on the homepage's nested [products] shortcode. */
#primary > .woocommerce-breadcrumb,
#primary > .shop-header,
#primary > ul.products,
#primary > .shop-toolbar,
#primary > .woocommerce-pagination {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
}

@media (max-width: 700px) {
	#primary > .woocommerce-breadcrumb,
	#primary > .shop-header,
	#primary > ul.products,
	#primary > .shop-toolbar,
	#primary > .woocommerce-pagination {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}


ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	row-gap: 3rem;
	column-gap: var(--passion-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 900px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	ul.products {
		grid-template-columns: 1fr;
	}

	.site-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Shop toolbar (result count + Filter trigger) */
.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--passion-border);
}

.shop-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--passion-muted);
	font-size: 0.85rem;
}

.filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: none;
	border: 0;
	font-family: var(--passion-font-body);
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: var(--passion-ink);
	cursor: pointer;
	padding: 0.25em 0;
}

.filter-toggle svg {
	width: 18px;
	height: 18px;
}

/* Filter slide-out panel */
.shop-filter-panel {
	position: fixed;
	inset: 0;
	z-index: 50;
	visibility: hidden;
	pointer-events: none;
}

.shop-filter-panel.is-open {
	visibility: visible;
	pointer-events: auto;
}

.shop-filter-panel__overlay {
	position: absolute;
	inset: 0;
	background: rgba(28, 26, 23, 0.45);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.shop-filter-panel.is-open .shop-filter-panel__overlay {
	opacity: 1;
}

.shop-filter-panel__drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 360px;
	max-width: 90vw;
	background: var(--passion-paper);
	padding: 1.5rem;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.35s ease;
}

.shop-filter-panel.is-open .shop-filter-panel__drawer {
	transform: translateX(0);
}

.shop-filter-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.shop-filter-panel__head h2 {
	margin: 0;
	font-size: 1.3rem;
}

.shop-filter-panel__close {
	background: none;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--passion-ink);
	padding: 0.25em;
}

.filter-section {
	border-bottom: 1px solid var(--passion-border);
}

.filter-section__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--passion-font-body);
	font-size: 0.9rem;
	font-weight: 500;
	padding: 1em 0;
	cursor: pointer;
	color: var(--passion-ink);
}

.filter-section__toggle::after {
	content: "+";
	font-size: 1.1rem;
	color: var(--passion-muted);
}

.filter-section.is-open .filter-section__toggle::after {
	content: "\2212";
}

.filter-section__body {
	display: none;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0 0 1.25rem;
}

.filter-section.is-open .filter-section__body {
	display: flex;
}

.filter-option {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.85rem;
	font-weight: 400;
	cursor: pointer;
}

.filter-option input {
	width: auto;
}

.filter-option--child {
	padding-left: 1.25rem;
}

.filter-option__count {
	color: var(--passion-muted);
}

.filter-price-inputs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.filter-price-inputs input {
	width: auto;
	flex: 1;
}

.filter-apply {
	width: 100%;
	margin-top: 1.5rem;
}

.filter-clear {
	display: block;
	text-align: center;
	margin-top: 0.75rem;
	font-size: 0.8rem;
	text-decoration: underline;
	color: var(--passion-muted);
}

.woocommerce-pagination {
	margin: 3rem 0;
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	height: 2.5em;
	padding: 0 0.5em;
	border: 1px solid var(--passion-border);
	border-radius: var(--passion-radius);
	text-decoration: none;
	font-size: 0.85rem;
	color: var(--passion-ink);
}

.woocommerce-pagination a.page-numbers {
	transition: background-color var(--passion-transition), color var(--passion-transition), border-color var(--passion-transition);
}

.woocommerce-pagination a.page-numbers:hover {
	background: var(--passion-ink);
	color: var(--passion-paper);
	border-color: var(--passion-ink);
}

.woocommerce-pagination .page-numbers.current {
	background: var(--passion-ink);
	color: var(--passion-paper);
	border-color: var(--passion-ink);
}

.infinite-scroll-sentinel {
	height: 1px;
}

.infinite-scroll-status {
	margin: 2rem 0 3rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--passion-muted);
}

.infinite-scroll-status.is-error {
	cursor: pointer;
	text-decoration: underline;
}

.woocommerce ul.products li.product .price {
	color: var(--passion-accent);
	font-weight: 600;
}

.woocommerce ul.products li.product.product-card {
	position: relative;
	margin: 0;
}

.product-card-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.product-card-inner > a {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.product-card-image-wrap {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--passion-card-bg);
	margin-bottom: 1rem;
}

.product-card-image-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

.product-card-image-wrap img.product-card-hover-image {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.product-card-inner > a:hover .product-card-hover-image {
	opacity: 1;
}

.product-card-inner .woocommerce-loop-product__title {
	font-family: var(--passion-font-heading);
	font-size: 1.05rem;
	font-weight: 400;
	margin: 0 0 0.25rem;
}

.product-card-inner .star-rating {
	margin-bottom: 0.25rem;
}

.product-card-inner .price {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--passion-muted);
}

.woocommerce .product-card-inner .button {
	margin-top: auto;
	display: inline-block;
	text-align: center;
	font-size: 0.72rem;
	padding: 0.75em 1.4em;
	background: transparent;
	border: 1px solid var(--passion-ink);
	text-decoration: none;
	color: var(--passion-ink);
}

.woocommerce .product-card-inner .button:hover {
	background: var(--passion-ink);
	color: var(--passion-paper);
}

.product-card-inner .onsale {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	background: var(--passion-paper);
	color: var(--passion-ink);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.4em 0.9em;
	border-radius: 999px;
}

/* Footer */
.site-footer {
	background: var(--passion-ink);
	color: var(--passion-muted-inverse);
	margin-top: 3rem;
	padding: 3rem 1rem 2rem;
}

.site-footer a {
	color: var(--passion-paper);
}

.site-footer a:hover {
	color: var(--passion-accent);
}

.newsletter-signup {
	max-width: var(--passion-max-width);
	margin: 0 auto 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
}

.newsletter-signup__title {
	color: var(--passion-paper);
	margin-bottom: 0.5rem;
}

.newsletter-signup__copy {
	max-width: 480px;
	margin: 0 auto 1.5rem;
	font-size: 0.9rem;
}

.newsletter-form {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	max-width: 420px;
	margin: 0 auto;
}

.newsletter-form input[type="email"] {
	flex: 1 1 auto;
}

.newsletter-form .button {
	flex: 0 0 auto;
}

.newsletter-form__status {
	margin: 0.85rem 0 0;
	font-size: 0.85rem;
	min-height: 1.2em;
}

.newsletter-form__status.is-error {
	color: #e08585;
}

.newsletter-form__status.is-success {
	color: var(--passion-accent);
}

.newsletter-signup__consent {
	margin: 0.85rem 0 0;
	font-size: 0.72rem;
	color: var(--passion-muted-inverse);
}

@media (max-width: 520px) {
	.newsletter-form {
		flex-direction: column;
	}
}

.footer-widgets {
	max-width: var(--passion-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--passion-gap);
}

.footer-widgets .widget-title {
	color: var(--passion-paper);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 0.85rem;
	text-align: left;
}

.footer-menu-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	text-align: left;
}

.footer-menu-list a {
	font-size: 0.82rem;
	line-height: 1.3;
	font-weight: 300;
	color: var(--passion-muted-inverse);
}

.footer-menu-list a:hover {
	color: var(--passion-accent);
}

.payment-badges {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
}

.payment-badge {
	display: flex;
	align-items: center;
	line-height: 1;
}

.payment-badge img {
	display: block;
	height: 32px;
	width: auto;
	border-radius: 5px;
}

/* Fallback for a badge whose icon file hasn't been added yet. */
.payment-badge:not(:has(img)) {
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--passion-ink);
	background: var(--passion-paper);
	border-radius: 4px;
	padding: 0.35em 0.6em;
}

@media (max-width: 700px) {
	.footer-widgets {
		grid-template-columns: 1fr 1fr;
	}
}

.site-info {
	max-width: var(--passion-max-width);
	margin: 2rem auto 0;
	padding: 2rem 0 0;
	color: var(--passion-muted-inverse);
	font-size: 0.875rem;
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/**
 * Forms & buttons.
 * WooCommerce's bundled stylesheet is dequeued (see inc/woocommerce.php),
 * so every input/button/notice below is styled by the theme.
 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
	font: inherit;
	color: var(--passion-ink);
	background: var(--passion-paper);
	border: 1px solid var(--passion-border);
	padding: 0.65em 0.85em;
	width: 100%;
	transition: border-color var(--passion-transition);
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--passion-accent);
	outline-offset: 1px;
	border-color: var(--passion-accent);
}

.button,
button,
input[type="submit"],
input[type="button"],
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-block;
	font-family: var(--passion-font-body);
	font-size: 0.8rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: var(--passion-tracking);
	cursor: pointer;
	background: var(--passion-ink);
	color: var(--passion-paper);
	border: 1px solid var(--passion-ink);
	border-radius: var(--passion-radius);
	padding: 0.95em 2em;
	transition: background-color var(--passion-transition), color var(--passion-transition), border-color var(--passion-transition);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--passion-paper);
	color: var(--passion-ink);
}

.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt,
#place_order {
	background: var(--passion-accent);
	border-color: var(--passion-accent);
	color: var(--passion-paper);
}

.button.alt:hover,
.woocommerce a.button.alt:hover,
#place_order:hover {
	background: var(--passion-paper);
	color: var(--passion-accent);
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 1em 1.25em;
	border: 1px solid var(--passion-border);
	border-left: 3px solid var(--passion-accent);
	background: var(--passion-paper);
	/* These notices (e.g. "X has been added to your cart. View cart")
	 * render directly under the header, the same spot the Shop
	 * mega-menu overlays (position: absolute, z-index: 30) when open.
	 * That 30 is scoped inside .site-header's OWN stacking context
	 * though (.site-header is position:sticky with z-index:40) — so the
	 * whole header, megamenu included, paints as a block above any
	 * unpositioned sibling content no matter what z-index a plain
	 * in-flow notice gets. It has to out-rank .site-header's z-index
	 * itself (40), not just the megamenu's (30), to actually win.
	 * That priority is exactly why it needs its own close button
	 * (.woocommerce-notice-close, injected by initDismissibleNotices()
	 * in main.js): sitting above the header, it also sits above the
	 * mega-menu below it, and would otherwise block that menu with no
	 * way to get it out of the way short of leaving the page. */
	position: relative;
	z-index: 41;
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* The base .button padding (0.95em 2em) is a touch larger than the
 * single-product "Add to cart" button, which gets its own slightly
 * tighter padding via `.woocommerce div.product form.cart .button` —
 * match that here so "View cart" reads as the same size. Needs the
 * `.woocommerce` prefix to actually win: "View cart" is an `<a>`, so
 * without it this loses on specificity to the base block's own
 * `.woocommerce a.button` rule (one extra type selector) despite coming
 * later in the file. Also pins line-height to "normal" — a `<button>`
 * (Add to cart) gets that from the browser's UA stylesheet by default,
 * but an `<a>` (View cart) doesn't and was inheriting a taller line-height
 * from the surrounding notice text instead, adding a few extra px of
 * height even with matching padding. */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-error .button,
.woocommerce .woocommerce-info .button {
	padding: 0.85em 2em;
	line-height: normal;
}

.woocommerce-notice-close {
	background: none;
	border: 0;
	font-size: 2.25rem;
	line-height: 1;
	cursor: pointer;
	color: var(--passion-ink);
	padding: 0.25em;
	margin-left: auto;
	flex-shrink: 0;
}

.woocommerce-notice-close:hover {
	color: var(--passion-accent);
}

.woocommerce-error {
	border-left-color: #b3261e;
}

/* Star rating — drawn with Unicode stars instead of WooCommerce's bundled icon font */
.star-rating {
	position: relative;
	overflow: hidden;
	width: 5.4em;
	height: 1em;
	line-height: 1;
	font-size: 0.9rem;
	letter-spacing: 0.2em;
}

.star-rating::before {
	content: "\2606\2606\2606\2606\2606";
	color: var(--passion-border);
}

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	height: 100%;
}

.star-rating span::before {
	content: "\2605\2605\2605\2605\2605";
	color: var(--passion-accent);
}

/* Single product — .site-main's site-wide 1200px cap would otherwise
 * override div.product's own (wider) max-width below, since a child can
 * never render past its parent's constrained width. */
.single-product .site-main {
	max-width: none;
	padding-left: 2rem;
	padding-right: 2rem;
}

.woocommerce div.product {
	position: relative;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 3.5rem;
	max-width: 1680px;
	margin: 0 auto;
}

/* Video (if present) and the gallery both live in the left (image) column,
 * stacking in that order; the summary spans the full row height on the
 * right regardless of whether the left column has one row or two. */
.woocommerce div.product .product-video,
.woocommerce div.product div.images.woocommerce-product-gallery {
	grid-column: 1;
}

.woocommerce div.product div.summary {
	grid-column: 2;
	grid-row: 1 / -1;
}

/**
 * WooCommerce outputs the "Sale!" flash as a THIRD direct child of
 * div.product (alongside .images and .summary), which would otherwise
 * wrap the whole summary column onto a second grid row once a product
 * actually goes on sale. Taking it out of flow keeps the 2-column layout
 * intact and turns it into a ribbon over the gallery image instead.
 */
.woocommerce div.product > .onsale {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	background: var(--passion-accent);
	color: var(--passion-paper);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.4em 0.9em;
	border-radius: 2px;
}

.product-video {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin: 0 0 1.5rem;
	object-fit: cover;
}

.woocommerce div.product div.images img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: none;
}

/**
 * Product image gallery. WooCommerce's zoom/flexslider JS (still enqueued —
 * only its bundled CSS was dropped) rebuilds this into a proper slider at
 * runtime; these rules just cover its structure and the no-JS fallback.
 */
.woocommerce div.product div.images.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
}

.woocommerce-product-gallery__image--placeholder {
	border: 1px solid var(--passion-border);
}

.woocommerce-product-gallery__image:nth-child(n + 2) {
	width: 25%;
	display: inline-block;
}

.woocommerce-product-gallery__image a {
	display: block;
	outline-offset: -2px;
}

.woocommerce-product-gallery__trigger {
	background: var(--passion-paper);
	border: none;
	box-sizing: content-box;
	border-radius: 100%;
	cursor: pointer;
	height: 36px;
	width: 36px;
	padding: 0;
	position: absolute;
	right: 0.5em;
	top: 0.5em;
	text-indent: -9999px;
	z-index: 99;
}

.woocommerce-product-gallery__trigger::before {
	content: "";
	position: absolute;
	box-sizing: content-box;
	display: block;
	left: 9px;
	top: 9px;
	width: 10px;
	height: 10px;
	border: 2px solid var(--passion-ink);
	border-radius: 100%;
}

.woocommerce-product-gallery__trigger::after {
	content: "";
	position: absolute;
	box-sizing: content-box;
	display: block;
	left: 22px;
	top: 19px;
	width: 8px;
	height: 2px;
	background: var(--passion-ink);
	border-radius: 6px;
	transform: rotate(-45deg);
}

.flex-control-thumbs {
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.flex-control-thumbs li {
	width: 25%;
	float: left;
	margin: 0;
	list-style: none;
}

.flex-control-thumbs img {
	cursor: pointer;
	opacity: 0.5;
	margin: 0;
	transition: opacity 0.2s ease;
}

.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover {
	opacity: 1;
}

.woocommerce div.product div.summary .product_title {
	font-size: 2rem;
	margin: 0 0 0.5rem;
}

.woocommerce div.product div.summary p.price {
	font-size: 1.5rem;
	color: var(--passion-accent);
	font-weight: 600;
	margin: 0.5rem 0 1.25rem;
}

.woocommerce div.product div.summary p.price del {
	margin-right: 0.6em;
	font-size: 1rem;
	font-weight: 400;
	color: var(--passion-muted);
	opacity: 1;
}

.woocommerce div.product div.summary p.price ins {
	text-decoration: none;
}

.passion-sale-badge {
	display: inline-block;
	margin-left: 0.6em;
	padding: 0.2em 0.65em;
	vertical-align: middle;
	border: 1px solid var(--passion-accent);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	max-width: 46em;
	margin: 0 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--passion-ink);
}

.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

.woocommerce div.product form.cart {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart .quantity {
	display: none;
}

.woocommerce div.product form.cart .button {
	padding: 0.85em 2em;
}

.woocommerce div.product p.sku,
.woocommerce div.product span.posted_in,
.woocommerce div.product .passion-certificate-number {
	display: block;
	font-size: 0.875rem;
	color: var(--passion-muted);
}

/* Variable product options */
table.variations {
	width: 100%;
	margin-bottom: 1rem;
}

table.variations th.label {
	text-align: left;
	padding: 0.5em 1em 0.5em 0;
	font-weight: 600;
	white-space: nowrap;
	width: 1%;
}

table.variations td.value {
	padding: 0.5em 0;
}

table.variations select {
	width: 100%;
	max-width: 320px;
}

a.reset_variations {
	display: inline-block;
	margin-left: 1em;
	font-size: 0.8rem;
	color: var(--passion-muted);
}

.woocommerce-variation-price {
	font-size: 1.5rem;
	color: var(--passion-accent);
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.woocommerce-variation-availability {
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.woocommerce-variation-description p {
	color: var(--passion-muted);
}

/* Additional Information tab — attribute spec table */
table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

table.shop_attributes th,
table.shop_attributes td {
	padding: 0.75em;
	border-bottom: 1px solid var(--passion-border);
	text-align: left;
}

table.shop_attributes th {
	width: 30%;
	font-weight: 600;
}

table.shop_attributes td p {
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .upsells.products {
	grid-column: 1 / -1;
}

.woocommerce div.product .woocommerce-tabs {
	margin-top: 1.25rem;
	border-top: 1px solid var(--passion-border);
	padding-top: 1.25rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.1rem;
	margin: 0 0 1.25rem;
	padding: 0;
	border-bottom: 1px solid var(--passion-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0 0 0.6em;
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--passion-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--passion-ink);
	border-bottom: 2px solid var(--passion-accent);
}

/* Tab content is pulled from full standalone pages (Care/Shipping/Returns),
 * so it carries page-scale headings by default — rescale it down to a
 * smaller, narrower, more editorial column instead. */
.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 640px;
	font-size: 0.88rem;
	line-height: 1.65;
	color: var(--passion-muted);
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: 1rem;
	margin: 1.5rem 0 0.5rem;
}

.woocommerce div.product .woocommerce-tabs .panel h2:first-child {
	margin-top: 0;
}

.woocommerce div.product .woocommerce-tabs .panel h3 {
	font-size: 0.92rem;
	margin: 1.25rem 0 0.4rem;
}

.woocommerce div.product .woocommerce-tabs .panel p {
	margin: 0 0 0.85em;
}

.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol {
	margin: 0 0 0.85em;
	padding-left: 1.25em;
}

.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td {
	font-size: 0.85rem;
	padding: 0.6em;
}

.woocommerce div.product .related.products {
	grid-column: 1 / -1;
	margin-top: 2rem;
	border-top: 1px solid var(--passion-border);
	padding-top: 1.5rem;
}

@media (max-width: 700px) {
	.woocommerce div.product {
		grid-template-columns: 1fr;
	}

	.woocommerce div.product .product-video,
	.woocommerce div.product div.images.woocommerce-product-gallery,
	.woocommerce div.product div.summary {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Cart page */
table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}

table.shop_table th,
table.shop_table td {
	padding: 0.75em;
	border-bottom: 1px solid var(--passion-border);
	text-align: left;
}

table.shop_table td.product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	display: block;
}

table.shop_table td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border: 1px solid var(--passion-border);
	border-radius: 50%;
	text-decoration: none;
	color: var(--passion-ink);
}

table.shop_table td.product-quantity .quantity input.qty {
	width: 4em;
	text-align: center;
}

.cart-collaterals {
	display: flex;
	justify-content: flex-end;
}

.cart-collaterals .cart_totals {
	width: 100%;
	max-width: 400px;
}

.cart-collaterals .cart_totals table.shop_table th {
	width: 40%;
}

.wc-proceed-to-checkout {
	text-align: right;
}

.wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	display: block;
}

.cart .coupon {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.cart .coupon input#coupon_code {
	width: auto;
	flex: 1;
	max-width: 220px;
}

@media (max-width: 700px) {
	table.shop_table thead {
		display: none;
	}

	table.shop_table tr {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
		padding: 0.75em 0;
	}

	table.shop_table td {
		border: 0;
		padding: 0;
	}
}

/* Checkout page */
.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 3rem;
	max-width: var(--passion-max-width);
	margin: 0 auto;
}

.woocommerce-checkout .form-row {
	margin-bottom: 1rem;
}

.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
	display: inline-block;
	width: 48%;
}

.woocommerce-checkout .form-row-last {
	float: right;
}

.woocommerce-checkout #order_review {
	background: #faf9f6;
	padding: 1.5rem;
	border: 1px solid var(--passion-border);
}

.woocommerce-checkout ul.wc_payment_methods {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	border: 1px solid var(--passion-border);
}

.woocommerce-checkout ul.wc_payment_methods li {
	padding: 1em;
	border-bottom: 1px solid var(--passion-border);
}

.woocommerce-checkout ul.wc_payment_methods li:last-child {
	border-bottom: 0;
}

/**
 * Homepage (front-page.php).
 * Feature banners and category tiles use a CSS background-color fallback
 * so they still look intentional before real photography is dropped into
 * assets/images/ — see passion_background_image_style() in
 * inc/template-tags.php.
 */
.home-page.site-main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.feature-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 65vh;
	background-color: var(--passion-ink);
	background-size: cover;
	background-position: center;
	color: var(--passion-paper);
	padding: 3rem 2rem;
	overflow: hidden;
}

.feature-banner__video-stack {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.feature-banner__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.feature-banner__video.is-active {
	opacity: 1;
}

.feature-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(28, 26, 23, 0.8) 0%, rgba(28, 26, 23, 0.35) 55%, rgba(28, 26, 23, 0.1) 100%);
}

.feature-banner__content {
	position: relative;
	z-index: 2;
	max-width: 480px;
}

.feature-banner__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	color: var(--passion-accent);
	margin: 0 0 0.75rem;
}

.feature-banner__heading {
	font-size: 2.75rem;
	font-weight: 300;
	color: var(--passion-paper);
	margin: 0 0 1rem;
}

.feature-banner__text {
	margin: 0 0 1.5rem;
	color: var(--passion-muted-inverse);
}

.feature-banner--engagement {
	min-height: 50vh;
}

.home-categories__heading {
	text-align: center;
	margin: 3rem 1rem 1.5rem;
}

.home-categories {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.category-tile {
	position: relative;
	flex: 0 0 20%;
	aspect-ratio: 4 / 5;
	scroll-snap-align: start;
	background-color: var(--passion-ink);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	padding: 1.25rem;
	color: var(--passion-paper);
	text-decoration: none;
}

.category-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 26, 23, 0) 50%, rgba(28, 26, 23, 0.7) 100%);
	transition: background var(--passion-transition);
}

.category-tile:hover::before {
	background: linear-gradient(180deg, rgba(28, 26, 23, 0.05) 50%, rgba(28, 26, 23, 0.8) 100%);
}

.category-tile__label {
	position: relative;
	z-index: 1;
	font-family: var(--passion-font-heading);
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.01em;
}

.home-section {
	padding: 3rem 1rem;
}

.home-section__inner {
	max-width: var(--passion-max-width);
	margin: 0 auto;
}

.home-section__heading {
	margin: 0 0 2rem;
	text-align: center;
}

.home-new-arrivals,
.home-category-section {
	text-align: center;
}

.home-new-arrivals ul.products,
.home-category-section ul.products {
	/* Breaks the grid out to full viewport width, matching the hero
	   banner and category-tile row above (which are also edge-to-edge)
	   rather than staying boxed inside .home-section__inner's 1200px
	   column — same escape-the-container technique used for ul.products
	   on the shop/category pages further up this file. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
	text-align: left;
	margin-bottom: 2rem;
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
	.home-new-arrivals ul.products,
	.home-category-section ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	.home-new-arrivals ul.products,
	.home-category-section ul.products {
		grid-template-columns: 1fr;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

.home-trust-badges {
	background: #faf9f6;
}

.trust-badges {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--passion-gap);
}

.trust-badges__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: var(--passion-ink);
	text-align: center;
}

.trust-badges__item svg {
	color: var(--passion-accent);
}

.trust-badges__item p {
	font-size: 0.875rem;
	margin: 0;
}

/* Shop the Feed (Instagram-styled static grid) */
.instagram-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.5rem;
}

.instagram-grid__tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background-color: var(--passion-ink);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.instagram-grid__tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 26, 23, 0);
	transition: background 0.2s ease;
}

.instagram-grid__tile:hover::before {
	background: rgba(28, 26, 23, 0.35);
}

.instagram-grid__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--passion-paper);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.instagram-grid__tile:hover .instagram-grid__icon {
	opacity: 1;
}

.instagram-follow {
	text-align: center;
	margin: 2rem 0 0;
}

@media (max-width: 700px) {
	.instagram-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.category-tile {
		flex-basis: 45%;
	}
}

@media (max-width: 700px) {
	.feature-banner {
		min-height: 60vh;
		padding: 2rem 1.25rem;
	}

	.feature-banner__heading {
		font-size: 1.75rem;
	}

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

@media (max-width: 500px) {
	.category-tile {
		flex-basis: 70%;
	}
}

.woocommerce-checkout .payment_box {
	margin-top: 0.75em;
	font-size: 0.9rem;
	color: var(--passion-muted);
}

@media (max-width: 700px) {
	.woocommerce-checkout .col2-set {
		grid-template-columns: 1fr;
	}
}

/**
 * WooCommerce Cart & Checkout blocks.
 * WooCommerce defaults new Cart/Checkout pages to the block editor
 * (wp-admin > Pages > Cart/Checkout use `[woocommerce/cart]` /
 * `[woocommerce/checkout]` blocks, not the classic shortcodes above), so
 * this is what actually renders unless that's changed in wp-admin.
 */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--passion-ink);
	border-color: var(--passion-ink);
	color: var(--passion-paper);
	border-radius: 0;
	font-weight: 600;
}

.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--passion-accent);
	border-color: var(--passion-accent);
	color: var(--passion-paper);
}

.wc-block-components-totals-item__value,
.wc-block-components-product-price__value,
.wc-block-components-checkout-order-summary__title-price,
.wc-block-components-order-summary-item__total-price {
	color: var(--passion-accent);
	font-weight: 600;
}

.wc-block-components-panel__button {
	font-weight: 600;
}

.wc-block-checkout__sidebar,
.wc-block-cart__totals-title {
	background: #faf9f6;
}

/* WooCommerce's order-summary block draws its own border around just the
 * product-list section, inset from the sidebar's own left padding — that
 * reads as the content floating out of alignment with its background. The
 * sidebar background already provides the card treatment, so drop it. */
.wp-block-woocommerce-checkout-order-summary-block {
	border: none;
}

/* WooCommerce implements the gap between the checkout's two columns as
 * lopsided padding (padding-left only) on the sidebar itself — invisible
 * on a plain background, but once that sidebar has its own card
 * background (above), the content reads as floating off-centre instead of
 * flush against it. Give the sidebar even padding on all sides instead,
 * and widen it a little (main shrinks to match so the row doesn't wrap). */
@media (min-width: 700px) {
	.wc-block-components-sidebar-layout .wc-block-components-main.wc-block-checkout__main {
		width: 58%;
		padding-right: 3%;
	}

	.wc-block-components-sidebar-layout .wc-block-components-sidebar.wc-block-checkout__sidebar {
		width: 42%;
		padding: 0.5rem;
		box-sizing: border-box;
	}
}

/* The order-summary row lays out image / name+description / total-price as
 * three flex siblings side by side, so the name+description column is
 * squeezed to whatever's left over for its FULL height, even the lines
 * that never come near the price. total-price is the LAST of the three in
 * the markup, so a float on it can't wrap the earlier description text
 * around it (floats only affect content that follows them) — it just drops
 * below instead. Pinning it with absolute positioning sidesteps that: it's
 * removed from the flow entirely regardless of source order, so the
 * description is free to run full-width underneath/behind it rather than
 * reserving room for it down the whole column. WooCommerce's own rules for
 * these use a two-class selector (`.wc-block-components-order-summary
 * .wc-block-…`), so ours has to match that to actually win. */
.wc-block-components-order-summary .wc-block-components-order-summary-item {
	display: block;
	position: relative;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item::after {
	content: "";
	display: table;
	clear: both;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image {
	float: left;
	margin-right: 0.75rem;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
	position: absolute;
	top: 0;
	right: 0;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
	display: block;
	width: auto;
	padding-left: 0;
	padding-right: 0.5rem;
}

/* The description column already shows the unit price under the title —
 * redundant with the pinned total-price at the top right (same figure at
 * qty 1, and qty is shown via the badge on the thumbnail either way). */
.wc-block-components-order-summary .wc-block-components-order-summary-item__description .wc-block-cart-item__prices {
	display: none;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select select:focus {
	outline: 2px solid var(--passion-accent);
}

.wc-block-components-checkbox input:checked ~ .wc-block-components-checkbox__mark,
.wc-block-components-radio-control__input:checked {
	accent-color: var(--passion-accent);
}

/* ---------------------------------------------------------------------
 * Info pages (About, FAQ, Shipping, Returns, Size Guide, Product Care,
 * Our Promise) — a narrower reading column plus a few reusable content
 * components (callouts, tables, FAQ accordion, promise pillars).
 * --------------------------------------------------------------------- */

.page-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	color: var(--passion-accent);
	margin: 0 0 0.75rem;
}

.entry-lede {
	font-size: 1.125rem;
	color: var(--passion-muted);
	max-width: 640px;
	margin: 0.5rem 0 0;
}

.page .entry-content {
	max-width: 720px;
}

/* The cart/checkout blocks need real width for their two-column layout —
 * the 720px reading column above is meant for prose pages (FAQ, About Us,
 * etc.), not these. */
.woocommerce-cart .page .entry-content,
.woocommerce-checkout .page .entry-content {
	max-width: none;
}

/* The empty-cart "New in store" grid uses the same [products] shortcode
 * (and so the same real ul.products/.product-card-inner markup and
 * buttons) as the homepage's New Arrivals/category sections — breaking it
 * out to full viewport width edge-to-edge is the same technique used
 * there and on the shop/category archives (see ul.products and
 * .home-new-arrivals ul.products further up this file), so an empty cart
 * matches every other product grid on the site instead of sitting boxed
 * inside the narrow page-content column. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block ul.products {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
	text-align: left;
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
	.woocommerce-cart .wp-block-woocommerce-empty-cart-block ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	.woocommerce-cart .wp-block-woocommerce-empty-cart-block ul.products {
		grid-template-columns: 1fr;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

.page .entry-content h2 {
	font-size: 1.5rem;
	margin: 2.5rem 0 1rem;
}

.page .entry-content h2:first-child {
	margin-top: 0;
}

.page .entry-content h3 {
	font-size: 1.15rem;
	margin: 1.75rem 0 0.75rem;
}

/* The cart/checkout blocks render inside this same .entry-content column,
 * so the prose-heading rule above (meant for real page content — FAQ,
 * About Us, etc.) was winning on specificity over WooCommerce's own
 * `margin:0` reset for each line item's product-name heading, throwing the
 * product thumbnail out of alignment with the title next to it. */
.page .entry-content .wc-block-components-product-name {
	font-size: 0.875rem;
	margin: 0;
}

.page .entry-content p {
	margin: 0 0 1rem;
}

.page .entry-content ul,
.page .entry-content ol {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}

.page .entry-content li {
	margin-bottom: 0.4rem;
}

.page .entry-content a {
	color: var(--passion-accent);
	text-decoration: underline;
}

/* The empty-cart "New in store" grid's real product-card links (see
 * .product-card-inner > a above) get caught by the prose-link rule just
 * above — same .entry-content-nesting problem as the product-name
 * heading fix above it — turning the product title/image link gold and
 * underlined instead of the plain, un-underlined card link used
 * everywhere else the same markup renders (shop archive, homepage
 * sections). Needs one extra class of specificity to actually win. */
.page .entry-content .product-card-inner > a {
	color: inherit;
	text-decoration: none;
}

/* Callout box — used for warranty exclusions, shipping notes, etc. */
.callout {
	border-left: 3px solid var(--passion-accent);
	background: #faf9f6;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
}

.callout p:last-child {
	margin-bottom: 0;
}

/* Content table — used on the size guide */
.content-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: 0.9rem;
}

.content-table th,
.content-table td {
	border: 1px solid var(--passion-border);
	padding: 0.6rem 0.75rem;
	text-align: left;
}

.content-table th {
	background: var(--passion-ink);
	color: var(--passion-paper);
	font-family: var(--passion-font-heading);
	font-weight: normal;
}

.content-table tr:nth-child(even) td {
	background: #faf9f6;
}

.content-table-wrap {
	overflow-x: auto;
	margin: 0 0 1.5rem;
}

.content-table-wrap .content-table {
	margin-bottom: 0;
}

/* FAQ accordion */
.faq-list {
	margin: 1.5rem 0;
}

.faq-item {
	border-bottom: 1px solid var(--passion-border);
	padding: 1rem 0;
}

.faq-item summary {
	cursor: pointer;
	font-family: var(--passion-font-heading);
	font-size: 1.05rem;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: "+";
	font-size: 1.4rem;
	line-height: 1;
	color: var(--passion-accent);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
	transform: rotate(45deg);
}

.faq-item .faq-answer {
	margin-top: 0.75rem;
	color: var(--passion-muted);
}

.faq-item .faq-answer p:last-child {
	margin-bottom: 0;
}

/* Our Promise pillars */
.promise-pillars {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem 2.5rem;
	margin: 2rem 0 3rem;
	list-style: none;
	padding: 0;
}

.promise-pillars__item svg {
	color: var(--passion-accent);
	margin-bottom: 0.75rem;
}

.promise-pillars__item h3 {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
}

.promise-pillars__item p {
	margin: 0;
	color: var(--passion-muted);
	font-size: 0.95rem;
}

@media (max-width: 640px) {
	.promise-pillars {
		grid-template-columns: 1fr;
	}
}

/* Trust-badge links (homepage) now point to real pages */
.trust-badges__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
}