/*
Theme Name: Cilve
Author: Equinode
Description: Modern design-led 925 sterling silver storefront for Cilve.
Version: 1.8.1
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cilve
*/

/* ==========================================================================
   Cilve theme styles
   Tokens (color, type, spacing) are defined in theme.json and exposed as
   --wp--preset--* custom properties. This file carries only the focused
   behaviour that theme.json cannot express: the product card hover-swap,
   grid polish, header/footer interaction hooks, and accessibility outlines.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Eyebrow utility
   Small uppercase, letter-spaced gold label. Reused across patterns.
   -------------------------------------------------------------------------- */
.cilve-eyebrow {
	display: inline-block;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

/* --------------------------------------------------------------------------
   2. Product card hover-swap (founder key feature)
   functions.php prints a second gallery image as <img class="cilve-card__alt">
   inside each loop item. The main thumbnail and the alt share one square box;
   the alt cross-fades in on hover. No second image means no element, so the
   swap simply does not fire.
   -------------------------------------------------------------------------- */
ul.products li.product {
	position: relative;
	margin-bottom: var(--wp--preset--spacing--50);
	text-align: left;
}

/* The square media frame. Both images fill it identically. */
ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 3px;
	background-color: var(--wp--preset--color--fog);
}

ul.products li.product a img,
ul.products li.product img.attachment-woocommerce_thumbnail,
ul.products li.product img.wp-post-image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	border-radius: 3px;
}

/* The lifestyle / model overlay, layered over the main image at rest. */
ul.products li.product .cilve-card__alt {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	border-radius: 3px;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
	z-index: 2;
}

ul.products li.product:hover .cilve-card__alt,
ul.products li.product:focus-within .cilve-card__alt {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Product grid polish
   Four columns on desktop, two on mobile. Calm whitespace, hairline divider
   under the media, gunmetal DM Sans titles, gold price.
   -------------------------------------------------------------------------- */
ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce adds clearfix ::before/::after to ul.products. On a grid those
   pseudo-elements become phantom grid items and push the first card out of
   cell one, breaking the column rhythm. Remove them. */
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

/* Neutralise WooCommerce float-based column widths inside the grid. */
ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0;
	/* card equal-height: titles wrap to 1-2 lines, so push the button to the
	   bottom to keep every "Add to cart" aligned across a row. */
	display: flex;
	flex-direction: column;
}

ul.products li.product .button,
ul.products li.product .added_to_cart {
	margin-top: auto;
	align-self: flex-start;
}

/* Hairline divider between the media and the meta block. */
ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product a.woocommerce-loop-product__link {
	margin-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--gunmetal);
	/* Reserve two lines so one- and two-line titles keep price + button aligned
	   across a row. */
	min-height: 2.8em;
}

ul.products li.product .price {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--gold);
}

ul.products li.product .price del {
	margin-right: 0.5rem;
	color: var(--wp--preset--color--stone);
	opacity: 0.7;
}

ul.products li.product .price ins {
	text-decoration: none;
}

/* Quiet the default WooCommerce add-to-cart button inside the loop;
   theme.json already styles the button element, so keep it understated. */
ul.products li.product .button,
ul.products li.product .added_to_cart {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.04em;
}

/* Sale flag, stripped of urgency styling: a small calm marker, not a shout. */
ul.products li.product .onsale {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 3;
	min-height: auto;
	min-width: auto;
	margin: 0;
	padding: 0.25rem 0.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--gunmetal);
	background-color: var(--wp--preset--color--gold-pale);
	border-radius: 3px;
}

/* Two columns on tablet and below. */
@media (max-width: 1023px) {
	ul.products {
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}
}

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

/* --------------------------------------------------------------------------
   4. Header hooks
   The header part carries .is-scrolled (added by a small inline listener) once
   the page scrolls, giving a quiet shadow and a solid white backing.
   -------------------------------------------------------------------------- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--white);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
	border-bottom: 1px solid transparent;
}

header.wp-block-template-part.is-scrolled {
	border-bottom-color: var(--wp--preset--color--border);
	box-shadow: 0 1px 16px rgba(42, 52, 57, 0.06);
}

/* --------------------------------------------------------------------------
   5. Mobile navigation drawer
   The navigation block's responsive overlay. .cilve-nav-open on <body> locks
   scroll while the drawer is open.
   -------------------------------------------------------------------------- */
body.cilve-nav-open {
	overflow: hidden;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--gunmetal);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------------------------
   6. Footer
   Gunmetal-deep surface with hairline column rules and silver support text.
   -------------------------------------------------------------------------- */
footer.wp-block-template-part {
	background-color: var(--wp--preset--color--gunmetal-deep);
	color: var(--wp--preset--color--silver);
}

footer.wp-block-template-part :where(h2, h3, h4) {
	color: var(--wp--preset--color--white);
}

footer.wp-block-template-part a {
	color: var(--wp--preset--color--silver);
	transition: color 0.25s ease;
}

footer.wp-block-template-part a:hover,
footer.wp-block-template-part a:focus-visible {
	color: var(--wp--preset--color--gold-light);
}

footer.wp-block-template-part hr.wp-block-separator {
	border-color: rgba(168, 180, 188, 0.18);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   7. Accessibility: focus-visible
   Gold outline on keyboard focus across interactive elements.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Product card links get a tidier inset ring so the outline hugs the frame. */
ul.products li.product a.woocommerce-LoopProduct-link:focus-visible,
ul.products li.product a.woocommerce-loop-product__link:focus-visible {
	outline-offset: -2px;
}

/* Respect reduced-motion: drop the cross-fade and transitions. */
@media (prefers-reduced-motion: reduce) {
	ul.products li.product .cilve-card__alt,
	header.wp-block-template-part,
	footer.wp-block-template-part a {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   8. Newsletter form
   Editorial underline field on the gunmetal band: a transparent input, white
   text, a muted placeholder, and a gold text-button, sharing one hairline.
   -------------------------------------------------------------------------- */
.cilve-newsletter {
	display: flex;
	align-items: stretch;
	max-width: 420px;
	margin: var(--wp--preset--spacing--40) auto 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	transition: border-color 0.25s ease;
}

.cilve-newsletter:focus-within {
	border-bottom-color: rgba(255, 255, 255, 0.6);
}

.cilve-newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.01em;
	padding: 0.7rem 0.25rem;
}

.cilve-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.cilve-newsletter__input:focus,
.cilve-newsletter__input:focus-visible {
	outline: 0;
}

.cilve-newsletter__button {
	flex: 0 0 auto;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--gold-light);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 0.7rem 0.25rem 0.7rem 1.25rem;
	transition: color 0.2s ease;
}

.cilve-newsletter__button:hover,
.cilve-newsletter__button:focus-visible {
	color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------------------------
   9. Header logo
   The site logo replaces the text wordmark, sitting in the centre of the bar.
   -------------------------------------------------------------------------- */
.cilve-header__wordmark.wp-block-site-logo {
	margin: 0;
}

.cilve-header__wordmark img {
	display: block;
	height: auto;
}

/* --------------------------------------------------------------------------
   10. Header layout + scroll condense
   The bar is a 3-column grid so the logo stays centred regardless of side
   widths (minmax(0,1fr) keeps the sides equal). On scroll down the header
   shrinks to the logo alone; scrolling up restores it. cilve.js toggles
   .is-condensed. The live header part also carries the grid inline as a
   belt-and-braces fallback.
   -------------------------------------------------------------------------- */
header.wp-block-template-part .cilve-header {
	transition: padding 0.35s ease;
}

header.wp-block-template-part .cilve-header__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

header.wp-block-template-part .cilve-header__bar > .cilve-header__nav {
	justify-self: start;
}

header.wp-block-template-part .cilve-header__bar > .cilve-header__wordmark {
	justify-self: center;
}

header.wp-block-template-part .cilve-header__bar > .cilve-header__actions {
	justify-self: end;
}

header.wp-block-template-part .cilve-header__wordmark img {
	max-height: 52px;
	width: auto;
	transition: max-height 0.35s ease;
}

header.wp-block-template-part.is-condensed .cilve-header {
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

header.wp-block-template-part.is-condensed .cilve-header__wordmark img {
	max-height: 36px;
}

/* Mobile: the full lockup collides with the account link at 52px. */
@media (max-width: 781px) {
	header.wp-block-template-part .cilve-header__wordmark img {
		max-height: 34px;
		max-width: 42vw;
		object-fit: contain;
	}
	header.wp-block-template-part.is-condensed .cilve-header__wordmark img {
		max-height: 30px;
	}
}

@media (min-width: 782px) {
	header.wp-block-template-part .cilve-header__nav,
	header.wp-block-template-part .cilve-header__actions {
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	header.wp-block-template-part.is-condensed .cilve-header__nav,
	header.wp-block-template-part.is-condensed .cilve-header__actions {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part .cilve-header,
	header.wp-block-template-part .cilve-header__wordmark img,
	header.wp-block-template-part .cilve-header__nav,
	header.wp-block-template-part .cilve-header__actions {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   11. USP Strip
   4-column icon-card grid inside the deep gunmetal section band.
   On tablet it collapses to 2 cols, on mobile to 1.
   -------------------------------------------------------------------------- */
.cilve-usp-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.cilve-usp-item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.cilve-usp-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	color: var(--wp--preset--color--gold);
}

.cilve-usp-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--wp--preset--color--white);
}

.cilve-usp-body {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	color: var(--wp--preset--color--silver);
}

@media (max-width: 1023px) {
	.cilve-usp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.cilve-usp-grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}
}

/* --------------------------------------------------------------------------
   12. Cilver loyalty points — My Account dashboard
   -------------------------------------------------------------------------- */
.cilve-account-section {
	max-width: 720px;
}

/* Badge on the menu tab ("Cilver 0") */
.cilver-menu-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.35em;
	margin-left: 0.4em;
	font-size: 0.72em;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--gold);
	border-radius: 99px;
	vertical-align: middle;
}

/* Balance card */
.cilver-balance-card {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--gunmetal-deep);
	border-radius: 4px;
}

.cilver-balance-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--silver);
}

.cilver-balance-amount {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--gold);
}

.cilver-balance-value {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.55);
}

/* How Cilver works */
.cilver-explainer {
	margin-bottom: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--fog);
	border-radius: 4px;
}

.cilver-explainer h3 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gunmetal);
}

.cilver-explainer ul {
	margin: 0;
	padding-left: 1.25rem;
}

.cilver-explainer li {
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--stone);
}

/* History table */
.cilver-history-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gunmetal);
}

.cilver-history-table td,
.cilver-history-table th {
	font-size: var(--wp--preset--font-size--small);
}

.cilver-earn {
	font-weight: 600;
	color: #2a7a44;
}

.cilver-spend {
	color: var(--wp--preset--color--stone);
}

/* --------------------------------------------------------------------------
   13. Cilver checkout redemption widget
   -------------------------------------------------------------------------- */
.cilve-checkout-cilver {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--fog);
	border-left: 3px solid var(--wp--preset--color--gold);
	border-radius: 0 4px 4px 0;
}

.cilver-redeem-label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gunmetal);
	cursor: pointer;
}

.cilver-redeem-label input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	flex-shrink: 0;
	accent-color: var(--wp--preset--color--gold);
	cursor: pointer;
}

.cilver-checkout-note {
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--stone);
}

/* --------------------------------------------------------------------------
   14. Buyback tracker — My Account page
   -------------------------------------------------------------------------- */
.cilve-buyback-table td,
.cilve-buyback-table th {
	font-size: var(--wp--preset--font-size--small);
}

.cilve-buyback-form {
	margin-top: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.cilve-form-row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cilve-form-row label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--gunmetal);
}

.cilve-form-optional {
	font-weight: 400;
	color: var(--wp--preset--color--stone);
}

.cilve-form-row select,
.cilve-form-row textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gunmetal);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	appearance: auto;
}

.cilve-form-row select:focus,
.cilve-form-row textarea:focus {
	border-color: var(--wp--preset--color--gold);
	outline: none;
}

.cilve-buyback-notice {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--fog);
	border-radius: 3px;
}

.cilve-buyback-notice p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--stone);
}

/* --------------------------------------------------------------------------
   15. USP grid — constrain width inside the full-bleed section
   The wp:html block ignores the parent's constrained layout, so we apply
   max-width + auto margins here to keep the grid from bleeding into the
   scrollbar gutter on narrower viewports.
   -------------------------------------------------------------------------- */
.cilve-usp-grid {
	max-width: 1344px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   16. WooCommerce My Account — match theme aesthetic
   Strip the default box styling; use quiet underline inputs, gunmetal labels,
   and our existing button styles.
   -------------------------------------------------------------------------- */
.woocommerce-MyAccount-content,
.woocommerce-account .woocommerce {
	max-width: 960px;
}

/* Login / register form containers.
   WC core still applies float + width:48% to .col-1/.col-2, which shrinks each
   form to 48% of its grid track; pinning explicit grid areas and forcing
   width:100% neutralises that regardless of extra children in the wrapper. */
.woocommerce-page .woocommerce > .col2-set,
.woocommerce-page .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

.woocommerce-account #customer_login .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce-account #customer_login .col-2,
.woocommerce-page .col2-set .col-2 {
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.woocommerce-account #customer_login .col-1,
.woocommerce-page .col2-set .col-1 {
	grid-area: 1 / 1;
}

.woocommerce-account #customer_login .col-2,
.woocommerce-page .col2-set .col-2 {
	grid-area: 1 / 2;
	border-left: 1px solid var(--wp--preset--color--border);
	padding-left: var(--wp--preset--spacing--60);
}

@media (max-width: 699px) {
	.woocommerce-page .woocommerce > .col2-set,
	.woocommerce-page .col2-set {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
	.woocommerce-account #customer_login .col-1,
	.woocommerce-page .col2-set .col-1 {
		grid-area: 1 / 1;
	}
	.woocommerce-account #customer_login .col-2,
	.woocommerce-page .col2-set .col-2 {
		grid-area: 2 / 1;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--border);
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--50);
	}
}

/* Remove WC's default box border */
.woocommerce form.login,
.woocommerce form.register {
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
}

/* Input labels */
.woocommerce form .form-row label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--gunmetal);
	letter-spacing: 0.02em;
}

/* Inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gunmetal);
	background-color: var(--wp--preset--color--fog);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	transition: border-color 0.2s ease;
	box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus {
	border-color: var(--wp--preset--color--gunmetal);
	outline: none;
	box-shadow: none;
}

/* "Lost your password?" link */
.woocommerce form .lost_password a {
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--stone);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Section heading above each form */
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
	margin-bottom: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 400;
	color: var(--wp--preset--color--gunmetal);
}

/* My Account navigation sidebar */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	overflow: hidden;
}

.woocommerce-MyAccount-navigation ul li {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.woocommerce-MyAccount-navigation ul li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	padding: 0.75rem 1.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--stone);
	letter-spacing: 0.01em;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--wp--preset--color--gunmetal);
	background-color: var(--wp--preset--color--fog);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
	color: var(--wp--preset--color--gunmetal);
	font-weight: 500;
	background-color: var(--wp--preset--color--fog);
	border-left: 2px solid var(--wp--preset--color--gold);
	padding-left: calc(1.1rem - 2px);
}

/* Cilver badge in nav */
.cilver-menu-badge {
	margin-left: auto;
}

/* --------------------------------------------------------------------------
   17. Shop empty state
   Replace WooCommerce's info-icon notice with a calm centred prompt.
   -------------------------------------------------------------------------- */
.woocommerce-info {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--border);
	border-top: none;
	border-radius: 3px;
	background-color: var(--wp--preset--color--fog);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--stone);
}

.woocommerce-info::before {
	display: none;
}

/* --------------------------------------------------------------------------
   18. Footer list polish
   Quiet the bullet points in footer navigation columns.
   -------------------------------------------------------------------------- */
.cilve-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cilve-footer__list li {
	padding: 0;
}

.cilve-footer__list li + li {
	margin-top: 0.55rem;
}

.cilve-footer__list a {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--silver);
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.cilve-footer__list a:hover {
	opacity: 1;
	color: var(--wp--preset--color--silver);
}

.cilve-footer__policies {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.cilve-footer__policies li {
	padding: 0;
}

.cilve-footer__policies a {
	font-size: var(--wp--preset--font-size--meta);
	color: rgba(168, 180, 188, 0.55);
	transition: color 0.2s ease;
}

.cilve-footer__policies a:hover {
	color: var(--wp--preset--color--silver);
}

/* --------------------------------------------------------------------------
   19. Footer accordion
   On desktop the three link columns stay open. The click-to-reveal accordion
   (with the +/- affordance) applies only on mobile, where the columns stack
   and collapsing saves height. Without the media query the lists were hidden
   at every width, so the footer links never showed on desktop.
   -------------------------------------------------------------------------- */
.cilve-footer__nav-heading {
	margin-bottom: 0 !important;
}

.wp-block-column .cilve-footer__list {
	margin-top: var(--wp--preset--spacing--30);
}

@media (max-width: 781px) {
	.cilve-footer__nav-heading {
		cursor: pointer;
		user-select: none;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cilve-footer__nav-heading::after {
		content: '+';
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.85rem;
		font-weight: 300;
		letter-spacing: 0;
		text-transform: none;
		opacity: 0.45;
		flex-shrink: 0;
		margin-left: 0.5rem;
	}

	.cilve-footer__nav-heading.is-open::after {
		content: '\2212';
	}

	.wp-block-column .cilve-footer__list {
		display: none;
	}

	.wp-block-column .cilve-footer__list.is-open {
		display: block;
	}
}

.cilve-footer__wordmark img {
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
   20. Header nav — hover underline + active state
   -------------------------------------------------------------------------- */
.cilve-header__nav .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none !important;
	padding-bottom: 3px;
	transition: color 0.22s ease;
}

.cilve-header__nav .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: var(--wp--preset--color--gold);
	transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.cilve-header__nav .wp-block-navigation-item__content:hover::after {
	width: 100%;
}

.cilve-header__nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold) !important;
}

.cilve-header__nav .current-menu-item > .wp-block-navigation-item__content::after {
	width: 100%;
}

/* --------------------------------------------------------------------------
   21. Category showcase grid (home page)
   -------------------------------------------------------------------------- */
.cilve-category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.cilve-category-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cilve-category-card__img {
	aspect-ratio: 3/4;
	overflow: hidden;
	border-radius: 2px;
}

.cilve-category-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.cilve-category-card:hover .cilve-category-card__img img {
	transform: scale(1.04);
}

.cilve-category-card__label {
	display: block;
	text-align: center;
	padding: 1.1rem 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 300;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--gunmetal);
	transition: color 0.22s ease;
}

.cilve-category-card:hover .cilve-category-card__label {
	color: var(--wp--preset--color--gold);
}

@media (max-width: 600px) {
	.cilve-category-grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	.cilve-category-card__img {
		aspect-ratio: 4/3;
	}
}

@media (min-width: 601px) and (max-width: 781px) {
	.cilve-category-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.cilve-category-grid .cilve-category-card:last-child {
		grid-column: span 2;
	}
	.cilve-category-grid .cilve-category-card:last-child .cilve-category-card__img {
		aspect-ratio: 16/7;
	}
}

/* Hide the empty-state notice from product shortcodes before catalogue launch. */
.cilve-home-products .woocommerce-info,
.cilve-home-products .woocommerce-no-products-found {
	display: none;
}

/* --------------------------------------------------------------------------
   22. Placeholder product grid (pre-launch, via [cilve_pieces])
   -------------------------------------------------------------------------- */
.cilve-ph-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.cilve-ph-card {
	text-align: center;
}

.cilve-ph-card__img {
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: 2px;
	background-color: var(--wp--preset--color--fog);
}

.cilve-ph-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cilve-ph-card__name {
	display: block;
	margin-top: 0.9rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	color: var(--wp--preset--color--gunmetal);
}

.cilve-ph-card__tag {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

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

@media (max-width: 520px) {
	.cilve-ph-grid {
		gap: 0.75rem;
	}
}

/* --------------------------------------------------------------------------
   24. Shop empty state
   Branded pre-launch message shown in place of WooCommerce's default
   "No products were found" notice while the catalogue is empty.
   -------------------------------------------------------------------------- */
.cilve-shop-empty {
	max-width: 40rem;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	text-align: center;
}

.cilve-shop-empty__lead {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 300;
	line-height: 1.3;
	color: var(--wp--preset--color--gunmetal);
}

.cilve-shop-empty__note {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	color: var(--wp--preset--color--stone);
}

.cilve-shop-empty__links {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}

.cilve-shop-empty__links a {
	color: var(--wp--preset--color--gunmetal);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: 2px;
	transition: border-color 0.2s ease;
}

.cilve-shop-empty__links a:hover {
	border-bottom-color: var(--wp--preset--color--gunmetal);
}

.cilve-shop-empty__links span {
	margin: 0 0.5rem;
	opacity: 0.5;
}

/* --------------------------------------------------------------------------
   23. Header nav dropdown (Shop > Women/Men > categories)
   The navigation block opens submenus on hover (desktop). These rules give the
   dropdown a brand look and keep the nested flyout tidy. Mobile keeps the
   block's built-in tap-to-expand overlay.
   -------------------------------------------------------------------------- */
@media (min-width: 782px) {
	/* the dropdown panel */
	.cilve-header__nav .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 3px;
		box-shadow: 0 10px 30px rgba(42, 52, 57, 0.12);
		padding: 0.35rem 0;
		min-width: 190px;
		top: 100%;
		margin-top: 0;
	}

	/* items inside the dropdown: calmer than the top-level uppercase links */
	.cilve-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 0.55rem 1.15rem;
		font-size: var(--wp--preset--font-size--meta);
		letter-spacing: 0.05em;
		text-transform: none;
		color: var(--wp--preset--color--gunmetal);
	}

	.cilve-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
	.cilve-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--gold);
		background-color: var(--wp--preset--color--fog);
	}

	/* no sliding underline inside the dropdown (that is a top-level treatment) */
	.cilve-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
		display: none;
	}

	/* nested flyout (Women / Men -> categories) opens to the right, top-aligned */
	.cilve-header__nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		top: -0.35rem;
		left: 100%;
		margin-left: 1px;
	}

	/* keep the caret icons subtle */
	.cilve-header__nav .wp-block-navigation__submenu-icon {
		opacity: 0.55;
	}
}


/* --------------------------------------------------------------------------
   24. Product page trust strip
   Three quiet reassurance lines under the add-to-cart form.
   -------------------------------------------------------------------------- */
.cilve-pdp-trust {
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--20);
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	background-color: var(--wp--preset--color--fog);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.cilve-pdp-trust span {
	position: relative;
	padding-left: 1.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.5;
	color: var(--wp--preset--color--stone);
}

/* small gold tick dot */
.cilve-pdp-trust span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--gold);
}

.cilve-pdp-trust a {
	color: var(--wp--preset--color--gunmetal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cilve-pdp-trust a:hover {
	color: var(--wp--preset--color--gold);
}


/* --------------------------------------------------------------------------
   25. Ring size guide (rings category only)
   Native <details> styled as a quiet expandable panel below the trust strip.
   -------------------------------------------------------------------------- */
.cilve-size-guide {
	margin: 0 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	background-color: var(--wp--preset--color--white);
}

.cilve-size-guide summary {
	padding: 0.8rem 1.1rem;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gunmetal);
}

.cilve-size-guide summary::-webkit-details-marker { display: none; }

.cilve-size-guide summary::after {
	content: "+";
	font-weight: 300;
	color: var(--wp--preset--color--gold);
}

.cilve-size-guide[open] summary::after { content: "‘2"; }

.cilve-size-guide__body {
	padding: 0 1.1rem 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--stone);
}

.cilve-size-guide__body > p { margin: 0 0 0.8rem; line-height: 1.55; }

.cilve-size-guide__scroll { overflow-x: auto; }

.cilve-size-guide table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	margin-bottom: 1rem;
}

.cilve-size-guide th,
.cilve-size-guide td {
	padding: 0.45rem 0.6rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--meta);
	white-space: nowrap;
}

.cilve-size-guide th {
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gunmetal);
	background-color: var(--wp--preset--color--fog);
}

.cilve-size-guide__how p { margin: 0 0 0.5rem; }
.cilve-size-guide__how strong { color: var(--wp--preset--color--gunmetal); font-weight: 500; }

.cilve-size-guide__how ol {
	margin: 0 0 0.8rem 1.1rem;
	padding: 0;
}

.cilve-size-guide__how li { margin-bottom: 0.35rem; line-height: 1.55; }

.cilve-size-guide__how a { color: var(--wp--preset--color--gunmetal); text-decoration: underline; text-underline-offset: 3px; }
.cilve-size-guide__how a:hover { color: var(--wp--preset--color--gold); }