/*
Theme Name: Olympe
Theme URI: https://timotheacreations.com/
Author: Timothea Creations
Author URI: https://timotheacreations.com/
Description: The house of the Greek gods — a dark, gold-leafed storefront theme for selling WordPress block themes. Built for WooCommerce digital downloads, with every page composed in code and every texture drawn in CSS and SVG. No photographs, no external requests.
Requires at least: 6.8
Tested up to: 7.0
Requires PHP: 7.4
Version: 2.5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: olympe
Domain Path: /languages
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, e-commerce, editor-style, featured-images, full-site-editing, one-column, rtl-language-support, style-variations, template-editing, threaded-comments, translation-ready, wide-blocks, accessibility-ready
*/

/* =========================================================================
   1. FOUNDATION
   ========================================================================= */

/*
 * Every colour below falls back to the Midnight & Gold default but reads from
 * theme.json first, so a style variation can restyle the whole marble/gold
 * system — including the light variations — without touching this file.
 */
:root {
	--olympe-ease: 200ms cubic-bezier(0.4, 0, 0.2, 1);

	--olympe-gold: var(--wp--custom--accent--base, #c9a227);
	--olympe-gold-bright: var(--wp--custom--accent--bright, #f0dc91);
	--olympe-gold-deep: var(--wp--custom--accent--deep, #8c7020);
	--olympe-gold-hairline: var(--wp--custom--accent--hairline, rgba(201, 162, 39, 0.34));

	--olympe-hairline: var(--wp--custom--card--border, rgba(244, 241, 232, 0.09));
	--olympe-card-from: var(--wp--custom--card--from, #1c222e);
	--olympe-card-to: var(--wp--custom--card--to, #141922);

	--olympe-marble-a: var(--wp--custom--marble--a, #171d27);
	--olympe-marble-b: var(--wp--custom--marble--b, #0e1116);
	--olympe-marble-c: var(--wp--custom--marble--c, #121822);
	--olympe-marble-d: var(--wp--custom--marble--d, #0a0d12);
	--olympe-marble-glow: var(--wp--custom--marble--glow, rgba(201, 162, 39, 0.13));
	--olympe-marble-haze: var(--wp--custom--marble--haze, rgba(138, 147, 166, 0.10));
	--olympe-marble-grain: var(--wp--custom--marble--grain, 0.5);
	--olympe-flute: var(--wp--custom--marble--flute, rgba(244, 241, 232, 0.055));

	/* Faint washes over the ground. Mixed from the text colour, so they lighten
	   a dark ground and darken a light one — a fixed white tint vanishes on marble. */
	--olympe-tint-1: color-mix(in srgb, var(--wp--preset--color--contrast) 2%, transparent);
	--olympe-tint-2: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
	--olympe-tint-3: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	--olympe-shadow: var(--wp--custom--card--shadow, rgba(0, 0, 0, 0.9));

	/* WooCommerce's own form variables — the password eye icon and the required
	   asterisk otherwise stay black and dark red on any ground. */
	--wc-form-color-text: var(--wp--preset--color--contrast);
	--wc-red: var(--wp--custom--danger, #F0877A);

	/* Native controls and scrollbars follow the ground. */
	color-scheme: var(--wp--custom--scheme, dark);
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Visible, gold focus ring everywhere — accessibility-ready. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--olympe-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--olympe-gold);
	color: var(--wp--preset--color--base);
}

/* Skip link */
.skip-link:focus {
	position: fixed !important;
	top: 1rem;
	left: 1rem;
	z-index: 9999;
	padding: 0.75rem 1.25rem;
	background: var(--olympe-gold);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	border-radius: 4px;
}

/* =========================================================================
   2. THE MARBLE & GOLD SURFACE SYSTEM
   Every texture below is drawn with gradients or inline SVG — no image files.
   ========================================================================= */

/* Deep veined marble — the primary hero/section ground. */
.olympe-marble {
	position: relative;
	background-color: var(--olympe-marble-b);
	background-image:
		radial-gradient(ellipse 70% 55% at 18% -5%, var(--olympe-marble-glow), transparent 62%),
		radial-gradient(ellipse 55% 45% at 88% 12%, var(--olympe-marble-haze), transparent 66%),
		linear-gradient(
			158deg,
			var(--olympe-marble-a) 0%,
			var(--olympe-marble-b) 42%,
			var(--olympe-marble-c) 68%,
			var(--olympe-marble-d) 100%
		);
	isolation: isolate;
}

/* Fine stone grain, layered over marble via SVG turbulence. */
.olympe-marble::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: var(--olympe-marble-grain);
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E");
}

/* Fluted columns — the temple motif, pure repeating gradient. */
.olympe-flutes {
	position: relative;
}

.olympe-flutes::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		90deg,
		var(--olympe-flute) 0 1px,
		transparent 1px 16px
	);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
}

/* A single hairline of gold leaf. */
.olympe-gold-rule,
.wp-block-separator.is-style-gold-rule {
	border: 0 !important;
	height: 1px !important;
	width: 100%;
	max-width: none;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--olympe-gold-deep) 18%,
		var(--olympe-gold) 42%,
		var(--olympe-gold-bright) 50%,
		var(--olympe-gold) 58%,
		var(--olympe-gold-deep) 82%,
		transparent 100%
	);
	opacity: 0.85;
}

/* Short centred gold tick used under headings. */
.olympe-tick {
	display: block;
	width: 56px;
	height: 2px;
	margin: 0 auto;
	background: linear-gradient(90deg, var(--olympe-gold-deep), var(--olympe-gold-bright), var(--olympe-gold-deep));
	border-radius: 2px;
}

.olympe-tick.is-left {
	margin-left: 0;
}

/* Meander (Greek key) border — drawn as a repeating SVG tile. */
.olympe-meander {
	height: 18px;
	background-repeat: repeat-x;
	background-position: center;
	background-size: auto 18px;
	opacity: 0.55;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0 15h6V6h6v6h3V3H3v12H0V0h18v18H0z' fill='none' stroke='%23c9a227' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* Laurel / rays ornament for hero corners. */
.olympe-rays {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	opacity: 0.28;
	background-repeat: no-repeat;
	background-position: center 8%;
	background-size: min(680px, 90%) auto;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='340' viewBox='0 0 680 340'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='0.9' opacity='0.9'%3E%3Ccircle cx='340' cy='300' r='120'/%3E%3Ccircle cx='340' cy='300' r='180'/%3E%3Ccircle cx='340' cy='300' r='240'/%3E%3C/g%3E%3Cg stroke='%23c9a227' stroke-width='0.9' opacity='0.55'%3E%3Cpath d='M340 300 L340 40'/%3E%3Cpath d='M340 300 L160 90'/%3E%3Cpath d='M340 300 L520 90'/%3E%3Cpath d='M340 300 L60 200'/%3E%3Cpath d='M340 300 L620 200'/%3E%3C/g%3E%3C/svg%3E");
}

/* =========================================================================
   3. BLOCK STYLE VARIATIONS
   ========================================================================= */

/* --- Sections (family convention: section-1..3) --- */
.is-style-section-1 {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
}

.is-style-section-2 {
	background-color: var(--olympe-marble-b);
	background-image:
		radial-gradient(ellipse 70% 55% at 18% 0%, var(--olympe-marble-glow), transparent 62%),
		linear-gradient(158deg, var(--olympe-marble-a), var(--olympe-marble-b) 55%, var(--olympe-marble-d));
	color: var(--wp--preset--color--contrast);
}

.is-style-section-3 {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.is-style-section-3 :is(h1, h2, h3, h4, p, li, figcaption) {
	color: var(--wp--preset--color--base);
}

.is-style-section-3 a:not(.wp-element-button) {
	color: var(--olympe-gold-deep);
}

/* --- Cards --- */
.is-style-card {
	background: linear-gradient(180deg, var(--olympe-card-from) 0%, var(--olympe-card-to) 100%);
	border: 1px solid var(--olympe-hairline);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--50);
	box-shadow: 0 1px 0 0 rgba(244, 241, 232, 0.04) inset, 0 18px 40px -24px var(--olympe-shadow);
	transition: transform var(--olympe-ease), border-color var(--olympe-ease), box-shadow var(--olympe-ease);
}

.is-style-card:hover {
	transform: translateY(-3px);
	border-color: var(--olympe-gold-hairline);
	box-shadow: 0 1px 0 0 rgba(201, 162, 39, 0.22) inset, 0 28px 60px -28px var(--olympe-shadow);
}

.is-style-gold-frame {
	position: relative;
	border: 1px solid var(--olympe-gold-hairline);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--50);
	background: linear-gradient(180deg, rgba(201, 162, 39, 0.07), rgba(201, 162, 39, 0.02));
}

/* --- Typographic accents --- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--olympe-gold);
	margin-bottom: var(--wp--preset--spacing--20);
}

.is-style-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	font-weight: 300;
}

.is-style-gold {
	color: var(--olympe-gold);
}

/* Check list — SVG tick as the marker, no image file. */
.is-style-check {
	list-style: none;
	padding-left: 0;
}

.is-style-check li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.6rem;
}

.is-style-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 1.05rem;
	height: 1.05rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23c9a227' stroke-width='1.3'/%3E%3Cpath d='M6 10.4l2.6 2.6L14.2 7.4' fill='none' stroke='%23c9a227' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* =========================================================================
   4. HEADER & FOOTER
   ========================================================================= */

.olympe-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	background: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
	border-bottom: 1px solid var(--olympe-hairline);
}

.olympe-header .wp-block-navigation {
	gap: clamp(1rem, 2.2vw, 2rem);
}

/*
 * The global link :hover in theme.json adds text-decoration:underline, which
 * stacked a second (parchment) underline on top of the gold one below.
 * Nav items opt out — the gold ::after IS the underline.
 */
.olympe-header .wp-block-navigation-item__content,
.olympe-header .wp-block-navigation-item__content:hover,
.olympe-header .wp-block-navigation-item__content:focus,
.olympe-footer a:not(.wp-element-button):hover {
	text-decoration: none;
}

/* Underline that grows from the centre on hover. */
.olympe-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
}

.olympe-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--olympe-gold);
	transform: translateX(-50%);
	transition: width var(--olympe-ease);
}

.olympe-header .wp-block-navigation-item__content:hover::after,
.olympe-header .current-menu-item .wp-block-navigation-item__content::after {
	width: 100%;
}

.olympe-footer {
	border-top: 1px solid var(--olympe-hairline);
}

.olympe-footer a:not(.wp-element-button) {
	color: var(--wp--preset--color--muted);
	transition: color var(--olympe-ease);
}

.olympe-footer a:not(.wp-element-button):hover {
	color: var(--olympe-gold);
	text-decoration: none;
}

/* =========================================================================
   5. BUTTONS
   ========================================================================= */

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--olympe-ease), color var(--olympe-ease),
		border-color var(--olympe-ease), transform var(--olympe-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Outline variant — gold hairline on transparent.
   The padding restates theme.json's button padding: core's block-library CSS
   gives outline buttons their own smaller em padding, which made every outline
   button ~10px shorter than the filled button beside it. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--olympe-gold-hairline);
	color: var(--wp--preset--color--contrast);
	padding: 0.85rem 1.6rem;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--olympe-gold);
	background: color-mix(in srgb, var(--olympe-gold) 10%, transparent);
	color: var(--wp--preset--color--contrast);
}

/* =========================================================================
   6. WOOCOMMERCE — sleek, modern, dark
   The purchase flow is stock WooCommerce; this only restyles it.
   ========================================================================= */

.woocommerce-page,
.woocommerce {
	color: var(--wp--preset--color--contrast);
}

/* --- Product grid --- */
.wc-block-product-template,
.wp-block-woocommerce-product-template {
	gap: var(--wp--preset--spacing--40);
}

.wc-block-product-template__responsive .wc-block-product,
li.wc-block-product,
ul.products li.product {
	background: linear-gradient(180deg, var(--olympe-card-from) 0%, var(--olympe-card-to) 100%);
	border: 1px solid var(--olympe-hairline);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--30);
	transition: transform var(--olympe-ease), border-color var(--olympe-ease), box-shadow var(--olympe-ease);
}

li.wc-block-product:hover,
ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: var(--olympe-gold-hairline);
	box-shadow: 0 28px 60px -30px var(--olympe-shadow);
}

li.wc-block-product img,
ul.products li.product img {
	border-radius: 9px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.wc-block-components-product-title,
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 400 !important;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

/* --- Price --- */
.wc-block-components-product-price,
.woocommerce-Price-amount,
ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--wp--preset--font-family--mono) !important;
	color: var(--olympe-gold) !important;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

.woocommerce div.product p.price {
	font-size: var(--wp--preset--font-size--x-large);
}

del,
del .woocommerce-Price-amount {
	opacity: 0.45;
	font-size: 0.85em;
	color: var(--wp--preset--color--muted) !important;
}

ins {
	text-decoration: none;
	background: transparent;
}

/* --- Sale badge --- */
.wc-block-components-product-sale-badge,
span.onsale {
	background: var(--olympe-gold) !important;
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-radius: 999px;
	padding: 0.35em 0.85em;
	border: 0;
	min-height: 0;
	min-width: 0;
	line-height: 1.6;
}

/* --- Buttons (add to cart, place order, etc.) --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--olympe-gold) !important;
	color: var(--wp--preset--color--base) !important;
	border: 1px solid var(--olympe-gold) !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	padding: 0.85rem 1.6rem !important;
	transition: all var(--olympe-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--contrast) !important;
	border-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
	transform: translateY(-1px);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--olympe-gold) !important;
}

/* --- Form fields --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container,
.wc-blocks-components-select__container {
	background: var(--olympe-tint-2) !important;
	border: 1px solid var(--olympe-hairline) !important;
	border-radius: 8px !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: 0.85rem 1rem !important;
	font-family: var(--wp--preset--font-family--body);
	transition: border-color var(--olympe-ease), background var(--olympe-ease);
}

.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus {
	border-color: var(--olympe-gold) !important;
	background: var(--olympe-tint-3) !important;
	outline: none;
}

.wc-blocks-components-select__select {
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label,
.woocommerce form .form-row label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* --- Tabs, panels, notices ---

   These were written as `.woocommerce div.product .woocommerce-tabs`, which
   NEVER MATCHED. In a block theme the wrapper carries both classes on the same
   element — `<div class="wp-block-group woocommerce product">` — so `.product`
   is not a descendant of `.woocommerce`, it IS it. Every rule below was dead,
   which is why the active tab showed WooCommerce's own white background on a
   near-black page. Selectors are now anchored on `.woocommerce-tabs` itself. */

.woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--olympe-hairline);
	padding-left: 0;
	margin-bottom: var(--wp--preset--spacing--50);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
	border: 0;
	content: none;
}

.woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0;
	padding: 0;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

/* The colours carry !important because WooCommerce's own
   `.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: #515151 }`
   is one class more specific than anything sensible written here, and it also
   forces `color: inherit` on the active tab. */
.woocommerce-tabs ul.tabs li a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--muted) !important;
	padding: 0.9rem 0;
	display: inline-block;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.tabs li a:focus-visible {
	color: var(--olympe-gold) !important;
	border-bottom-color: var(--olympe-gold);
}

/* One tab is not a choice. When Description is the only panel — reviews turned
   off, no attributes — the tab bar is a control that does nothing, so it goes
   and the panel heading stands on its own. */
.woocommerce-tabs ul.tabs:has(li:only-child) {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	background: rgba(201, 162, 39, 0.08) !important;
	border: 1px solid var(--olympe-gold-hairline) !important;
	border-top-width: 1px !important;
	border-radius: 10px !important;
	color: var(--wp--preset--color--contrast) !important;
}

.woocommerce-error {
	background: rgba(224, 92, 92, 0.10) !important;
	border-color: rgba(224, 92, 92, 0.45) !important;
}

/* --- My Account: the delivery hub for digital goods --- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.7rem 1rem;
	border-radius: 8px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	border: 1px solid transparent;
	transition: all var(--olympe-ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: rgba(201, 162, 39, 0.10);
	border-color: var(--olympe-gold-hairline);
	color: var(--olympe-gold);
	text-decoration: none;
}

/* Download rows — make the buyer's download obvious. */
.woocommerce table.shop_table,
.woocommerce-account table.shop_table {
	border: 1px solid var(--olympe-hairline);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--olympe-tint-1);
}

.woocommerce table.shop_table th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	border-bottom: 1px solid var(--olympe-hairline);
	padding: 1rem;
}

.woocommerce table.shop_table td {
	border-top: 1px solid var(--olympe-hairline);
	padding: 1rem;
	color: var(--wp--preset--color--contrast);
}

.woocommerce .woocommerce-order-downloads,
.woocommerce .digital-downloads {
	margin-block: var(--wp--preset--spacing--50);
}

/* Emphasise the actual download button. */
.woocommerce-MyAccount-downloads .download-product a,
.woocommerce table.shop_table .download-file a {
	font-weight: 600;
}

/* Cart & checkout blocks */
.wp-block-woocommerce-cart .wc-block-cart-items,
.wc-block-components-sidebar {
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-totals-item,
.wc-block-components-order-summary-item {
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	background: linear-gradient(180deg, var(--olympe-card-from) 0%, var(--olympe-card-to) 100%);
	border: 1px solid var(--olympe-hairline);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
}

/* Quantity selector */
.woocommerce .quantity .qty,
.wc-block-components-quantity-selector {
	background: var(--olympe-tint-2);
	border: 1px solid var(--olympe-hairline);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
}

/* Digital products have no shipping — tighten the layout when Woo hides it. */
.woocommerce-checkout .shipping_address {
	display: none;
}

/* =========================================================================
   6b. PRICING — cards + comparison matrix
   ========================================================================= */

.olympe-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1;
	color: var(--olympe-gold);
	margin: var(--wp--preset--spacing--40) 0 0;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.olympe-price--center {
	justify-content: center;
}

.olympe-price__note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--muted);
}

/* Matrix: scrolls sideways on small screens, first column stays put. */
.olympe-matrix {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--olympe-hairline);
	border-radius: 14px;
	background: var(--olympe-tint-1);
}

.olympe-matrix table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	min-width: 640px;
}

.olympe-matrix th,
.olympe-matrix td {
	padding: 0.95rem 1.1rem;
	text-align: center;
	border-bottom: 1px solid var(--olympe-hairline);
}

.olympe-matrix thead th {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

/* Row labels: left aligned and pinned while the rest scrolls. */
.olympe-matrix tbody th,
.olympe-matrix thead th:first-child {
	text-align: left;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	position: sticky;
	left: 0;
	background: var(--olympe-card-to);
	z-index: 1;
	min-width: 190px;
}

.olympe-matrix tbody tr:last-child th,
.olympe-matrix tbody tr:last-child td {
	border-bottom: 0;
}

.olympe-matrix tbody tr:hover td,
.olympe-matrix tbody tr:hover th {
	background: rgba(201, 162, 39, 0.05);
}

.olympe-yes {
	color: var(--olympe-gold);
	font-size: 1.1rem;
}

.olympe-no {
	color: color-mix(in srgb, var(--wp--preset--color--muted) 55%, var(--wp--preset--color--base));
}

.olympe-val {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
}

/* Price cards stack on small screens rather than squashing to 4 columns. */
@media (max-width: 899px) {
	.olympe-price-cards.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.olympe-price-cards.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--40)) !important;
		flex-grow: 0;
	}
}

@media (max-width: 599px) {
	.olympe-price-cards.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* =========================================================================
   7. BLOG
   ========================================================================= */

.olympe-post-card {
	border-bottom: 1px solid var(--olympe-hairline);
	padding-bottom: var(--wp--preset--spacing--50);
}

.olympe-prose > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.olympe-prose :is(h2, h3) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-post-featured-image img {
	border-radius: 14px;
}

/* Comments */
.wp-block-comment-author-name a {
	color: var(--wp--preset--color--contrast);
}

.wp-block-comments .wp-block-comment-template li {
	border-bottom: 1px solid var(--olympe-hairline);
	padding-bottom: var(--wp--preset--spacing--40);
}

/* =========================================================================
   8. UTILITIES
   ========================================================================= */

.olympe-center {
	text-align: center;
}

.olympe-muted {
	color: var(--wp--preset--color--muted);
}

.olympe-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.olympe-max-60 {
	max-width: 60ch;
}

.olympe-max-48 {
	max-width: 48ch;
}

.olympe-mx-auto {
	margin-inline: auto;
}

/* Equal-height cards inside a columns block. */
.olympe-equal .wp-block-column {
	display: flex;
	flex-direction: column;
}

.olympe-equal .wp-block-column > .wp-block-group {
	flex: 1;
}

/* Wide tables and code never break the page. */
.wp-block-table,
.wp-block-code,
pre {
	overflow-x: auto;
	max-width: 100%;
}

/* =========================================================================
   9. RESPONSIVE
   ========================================================================= */

@media (max-width: 781px) {
	.olympe-header {
		padding-block: 0.5rem;
	}

	.is-style-card,
	.is-style-gold-frame {
		padding: var(--wp--preset--spacing--40);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (max-width: 599px) {
	.olympe-rays {
		background-size: 140% auto;
		opacity: 0.2;
	}
}

/* =========================================================================
   10. PRINT — buyers print invoices
   ========================================================================= */

@media print {
	.olympe-header,
	.olympe-footer,
	.wp-block-navigation {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}
}

/* =========================================================================
   11. SINGLE PRODUCT — breathing room
   The buy column was cramped against the gallery, and the Woo blocks inside
   it sat flush against each other.
   ========================================================================= */

.wp-block-woocommerce-single-product .wp-block-columns {
	align-items: flex-start;
}

/* Space out the stack of Woo blocks in the buy column. */
.wp-block-woocommerce-single-product .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* The add-to-cart form is the focal point — give it room and separation. */
.wp-block-woocommerce-single-product .wp-block-add-to-cart-form,
.wp-block-woocommerce-single-product form.cart {
	margin-block: var(--wp--preset--spacing--40) !important;
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--olympe-hairline);
	border-bottom: 1px solid var(--olympe-hairline);
}

/* The buy row: gold button commits, outline button lets you look first.
   The Live demo link sits where the quantity field used to be. */
.wp-block-woocommerce-single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.woocommerce div.product form.cart .button {
	margin-inline-start: 0;
}

/* olympe_sell_one_at_a_time() caps every product at one, but WooCommerce 10
   still renders the field — it dropped the `hidden` branch its own template
   used to have, and now just sets min="1" max="1". So a spinner you cannot
   move is drawn next to the price. Hidden on the value, not blindly: if a
   product is ever purchasable in quantity, max stops being 1 and it returns.
   The input stays in the DOM and still posts, so the form is unaffected. */
.wp-block-woocommerce-single-product form.cart .quantity:has(input[max="1"]) {
	display: none;
}

.woocommerce a.button.olympe-demo-button,
.olympe-demo-button {
	background: transparent !important;
	color: var(--olympe-gold) !important;
	border: 1px solid var(--olympe-gold-hairline) !important;
	border-radius: 999px;
	padding: 0.75em 1.5em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.woocommerce a.button.olympe-demo-button:hover,
.woocommerce a.button.olympe-demo-button:focus-visible,
.olympe-demo-button:hover,
.olympe-demo-button:focus-visible {
	background: color-mix(in srgb, var(--olympe-gold) 10%, transparent) !important;
	border-color: var(--olympe-gold) !important;
	color: var(--olympe-gold) !important;
}

@media (prefers-reduced-motion: reduce) {
	.olympe-demo-button {
		transition: none;
	}
}

/* The buy column follows you down a long gallery rather than scrolling away. */
@media (min-width: 782px) {
	.olympe-buy-column {
		position: sticky;
		top: var(--wp--preset--spacing--40);
		align-self: flex-start;
	}
}

/* =========================================================================
   11b. PRODUCT GALLERY — a column of page captures, not a photo carousel
   functions.php drops wc-product-gallery-slider and -zoom, so WooCommerce
   stacks the images and wraps each in a link to its full-size file. What is
   left to do here is stop six full-page screenshots from becoming a 10,000px
   column: each is cropped to a window showing the top of the page, fading out
   at the bottom to signal there is more, and opening full size on click.
   ========================================================================= */

.woocommerce-product-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.woocommerce-product-gallery__wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	width: auto !important;
	transform: none !important;
}

/* The magnifier icon is gone: the image itself is the target now. */
.woocommerce-product-gallery__trigger {
	display: none !important;
}

.woocommerce-product-gallery__image {
	position: relative;
	overflow: hidden;
	/* WooCommerce ships a 4-column float grid for the thumbnails, which with the
	   slider gone would drop images 2-6 to a quarter width each. */
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	border: 1px solid var(--olympe-hairline);
	border-radius: var(--wp--custom--radius--md);
	background: var(--olympe-tint-1);
	/* Tall page captures are cropped to this; anything shorter keeps its own
	   height, so a wide screenshot is never stretched to fill the window. */
	max-height: 30rem;
}

.woocommerce-product-gallery__image > a {
	display: block;
	line-height: 0;
}

.woocommerce-product-gallery__image img {
	display: block;
	width: 100% !important;
	height: auto;
	border-radius: 0;
	transition: transform 0.5s ease;
}

/* The fade tells you the capture continues past the crop. */
.woocommerce-product-gallery__image::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 5rem;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--base));
	opacity: 0.9;
}

.woocommerce-product-gallery__image:hover img {
	transform: scale(1.015);
}

/* A plain affordance in place of the old magnifier. The text is injected by
   olympe_gallery_hint() in functions.php so it can be translated — CSS
   generated content cannot be. */
.olympe-gallery-hint {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--20);
	inset-inline-end: var(--wp--preset--spacing--20);
	z-index: 2;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	background: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	border: 1px solid var(--olympe-gold-hairline);
	border-radius: 999px;
	padding: 0.35em 0.85em;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.woocommerce-product-gallery__image:hover .olympe-gallery-hint,
.woocommerce-product-gallery__image:focus-within .olympe-gallery-hint {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-product-gallery__image img,
	.olympe-gallery-hint {
		transition: none;
	}

	.woocommerce-product-gallery__image:hover img {
		transform: none;
	}
}

/* Product meta (SKU, category) reads as fine print, not body copy. */
.wp-block-woocommerce-product-meta,
.woocommerce div.product .product_meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--olympe-hairline);
}

@media (max-width: 781px) {
	.wp-block-woocommerce-single-product .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* =========================================================================
   12. RELATED PRODUCTS & UPSELLS
   Two separate things WooCommerce renders on a product page:
   - related-products : our block, in the dark band
   - upsells          : WooCommerce's own "You may also like…", from the
                        product's Linked Products, rendered by a core hook
                        and completely unstyled by default
   ========================================================================= */

/* Hide the whole dark band when WooCommerce finds nothing related, so the
   heading never sits alone above empty space. */
.olympe-related:not(:has(.wc-block-product, li.product)) {
	display: none;
}

/* WooCommerce's upsells arrive as a bare list — give them the same
   treatment as the shop grid so they stop reading as tiny rectangles. */
.woocommerce .upsells.products,
.woocommerce .related.products {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--olympe-hairline);
}

.woocommerce .upsells.products > h2,
.woocommerce .related.products > h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 400;
	margin-bottom: var(--wp--preset--spacing--50);
}

.woocommerce .upsells.products ul.products,
.woocommerce .related.products ul.products,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}

/* Neutralise WooCommerce's float/percentage-width grid, which is what makes
   a single upsell render as a narrow rectangle. */
.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;

	/* The card had a border and no padding at all, so the image bled into the
	   corners, the title sat on the edge and the button pushed out of the
	   bottom. Make it an actual card: pad it, and lay the contents out as a
	   column so the button lands at the foot however long the title runs. */
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--30) !important;
	border: 1px solid var(--olympe-hairline);
	border-radius: var(--wp--custom--radius--md);
	background: var(--olympe-tint-1);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--olympe-gold-hairline);
	background: var(--olympe-tint-2);
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	margin-bottom: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--sm, 6px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--large) !important;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin-block: var(--wp--preset--spacing--20);
}

/* Pushes the button to the bottom edge of the card, so a row of cards with
   titles of different lengths still has its buttons on one line. */
.woocommerce ul.products li.product .button {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product {
		transition: none;
	}
}

/* =========================================================================
   13. CHANGELOG
   h2 = theme name · h3 = version number · ul = the changes
   Written as plain headings and lists so entries can be added in the editor
   without touching markup.
   ========================================================================= */

.olympe-changelog h2 {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	padding-block-end: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--olympe-hairline);
	margin-block-start: var(--wp--preset--spacing--70);
}

.olympe-changelog h2:first-child {
	margin-block-start: 0;
}

/* Version number reads as a label, not a heading. */
.olympe-changelog h3 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem !important;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--olympe-gold);
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
}

/* A release with no entries yet still needs to sit correctly. */
.olympe-changelog ul {
	margin-block-start: var(--wp--preset--spacing--20);
	padding-inline-start: 1.15rem;
}

.olympe-changelog li {
	margin-block-end: 0.4rem;
	font-size: 0.9375rem;
}

.olympe-changelog li::marker {
	color: var(--olympe-gold-deep);
}

/* "Added / Fixed / Changed" prefixes, if you use them. */
.olympe-changelog li strong {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}


/* =========================================================================
   TAP TARGETS
   ========================================================================= */

/* Core sizes the mobile menu toggle to its 24px icon and nothing more: the
   bare WCAG 2.5.8 floor, well under the 44px a thumb wants, on the single
   most-used control on a phone. An overlay pseudo-element grows the hit area
   to 44x44 without occupying any layout space, so no header shifts.

   It grows upward, downward and inward only. Padding the button, or growing
   this overlay outward, pushes past the viewport edge — Hermes' header is
   nowrap and sits flush right, and either approach put it 2px over a 360px
   screen and raised a horizontal scrollbar. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	position: relative;
}

.wp-block-navigation__responsive-container-open::after,
.wp-block-navigation__responsive-container-close::after {
	content: "";
	position: absolute;
	inset: -10px 0 -10px -20px;
}

/* The logos-only social style strips the anchor's padding, so the tap target
   collapses to the 24px glyph itself. Same overlay trick, but grown 4px
   sideways rather than 10px: the icons sit 8px apart, and a wider overlay
   would have neighbouring targets overlapping so a tap aimed at one link
   opened another. 32x44 is what fits without that. */
.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor {
	position: relative;
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor::after {
	content: "";
	position: absolute;
	inset: -10px -4px;
}

/* =========================================================================
   14. LIGHT / DARK SWITCH
   The button in the header. The colours it switches to are not here — they
   are compiled from styles/elysium.json by olympe_light_scheme_css().
   ========================================================================= */

.olympe-scheme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: border-color var(--olympe-ease), color var(--olympe-ease);
}

.olympe-scheme-toggle[hidden] {
	display: none;
}

.olympe-scheme-toggle:hover {
	border-color: var(--olympe-gold-hairline);
	color: var(--olympe-gold);
}

.olympe-scheme-toggle:focus-visible {
	outline: 2px solid var(--olympe-gold);
	outline-offset: 2px;
}

/* Dark shows the sun (what a click gives you); light shows the moon. */
.olympe-scheme-toggle__moon,
.olympe-scheme-toggle[aria-pressed="true"] .olympe-scheme-toggle__sun {
	display: none;
}

.olympe-scheme-toggle[aria-pressed="true"] .olympe-scheme-toggle__moon {
	display: block;
}