/* ==========================================================================
   RAGNARR — design tokens
   Monochrome heraldic palette. Brushed steel is the only "colour"; anything
   warm reads as gold and pulls the brand away from STEEL.
   ========================================================================== */

:root {
	/* Ink */
	--rg-black: #0a0a0a;
	--rg-ink: #141414;
	--rg-graphite: #2a2c2f;

	/* Steel */
	--rg-steel-dark: #5b5e63;
	--rg-steel: #8a8d91;
	--rg-silver: #c9ccd1;

	/* Paper */
	--rg-bone: #f4f2ee;
	--rg-white: #ffffff;

	/* Semantic */
	--rg-bg: var(--rg-white);
	--rg-fg: var(--rg-ink);
	--rg-muted: var(--rg-steel-dark);
	--rg-rule: rgba(10, 10, 10, 0.12);
	--rg-rule-strong: rgba(10, 10, 10, 0.28);

	/* Type */
	--rg-display: "Cormorant Garamond", "Times New Roman", serif;
	--rg-ui: "Jost", "Helvetica Neue", Arial, sans-serif;

	/* Tracking — the wordmark is widely tracked, the UI echoes it */
	--rg-track-display: 0.14em;
	--rg-track-label: 0.22em;

	/* Rhythm */
	--rg-gap: clamp(1rem, 2.5vw, 2rem);
	--rg-section: clamp(3.5rem, 9vw, 8rem);
	--rg-measure: 62ch;

	/* Motion */
	--rg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--rg-speed: 320ms;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
	background: var(--rg-bg);
	color: var(--rg-fg);
	font-family: var(--rg-ui);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.rg-display {
	font-family: var(--rg-display);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: var(--rg-track-display);
	text-transform: uppercase;
	color: var(--rg-black);
}

h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }

p { max-width: var(--rg-measure); }

a {
	color: inherit;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	transition: opacity var(--rg-speed) var(--rg-ease);
}

a:hover { opacity: 0.6; }

::selection {
	background: var(--rg-black);
	color: var(--rg-white);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.rg-label {
	font-family: var(--rg-ui);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--rg-track-label);
	text-transform: uppercase;
	color: var(--rg-muted);
}

/* The diamond separator lifted from the wordmark. */
.rg-diamond::before,
.rg-diamond::after {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 0.75em;
	background: currentColor;
	transform: rotate(45deg);
	vertical-align: 0.25em;
}

.rg-rule {
	border: 0;
	border-top: 1px solid var(--rg-rule);
	margin: var(--rg-gap) 0;
}

.rg-section { padding-block: var(--rg-section); }

.rg-invert {
	background: var(--rg-black);
	color: var(--rg-bone);
	--rg-fg: var(--rg-bone);
	--rg-muted: var(--rg-silver);
	--rg-rule: rgba(255, 255, 255, 0.16);
	--rg-rule-strong: rgba(255, 255, 255, 0.34);
}

.rg-invert h1, .rg-invert h2, .rg-invert h3, .rg-invert h4 { color: var(--rg-bone); }

/* --------------------------------------------------------------------------
   Buttons — squared, tracked, no radius. Jewellery, not SaaS.
   -------------------------------------------------------------------------- */

.rg-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 1.05em 2.4em;
	border: 1px solid var(--rg-black);
	border-radius: 0;
	background: var(--rg-black);
	color: var(--rg-white);
	font-family: var(--rg-ui);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--rg-track-label);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--rg-speed) var(--rg-ease),
	            color var(--rg-speed) var(--rg-ease);
}

.rg-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--rg-white);
	color: var(--rg-black);
	opacity: 1;
}

.rg-btn--ghost {
	background: transparent;
	color: var(--rg-black);
}

.rg-btn--ghost:hover {
	background: var(--rg-black);
	color: var(--rg-white);
}

.rg-invert .rg-btn--ghost {
	border-color: var(--rg-bone);
	color: var(--rg-bone);
}

.rg-invert .rg-btn--ghost:hover {
	background: var(--rg-bone);
	color: var(--rg-black);
}

/* --------------------------------------------------------------------------
   USP bar — the trust signals every competitor runs above the fold
   -------------------------------------------------------------------------- */

.rg-usp-bar {
	background: var(--rg-black);
	color: var(--rg-bone);
	padding-block: 0.85rem;
	overflow: hidden;
}

.rg-usp-bar__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 2.5rem;
	margin: 0;
	padding-inline: var(--rg-gap);
	list-style: none;
}

.rg-usp-bar__item {
	font-family: var(--rg-ui);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: var(--rg-track-label);
	text-transform: uppercase;
	white-space: nowrap;
}

.rg-usp-bar__item + .rg-usp-bar__item::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 2.5rem;
	background: var(--rg-steel);
	transform: rotate(45deg);
	vertical-align: 0.25em;
}

@media (max-width: 900px) {
	.rg-usp-bar__list { gap: 0.5rem 1.25rem; }
	.rg-usp-bar__item + .rg-usp-bar__item::before { margin-right: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem);
	margin: 0;
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	width: 100%;
	margin: 0;
	float: none;
	text-align: center;
}

.woocommerce ul.products li.product a img {
	margin-bottom: 1.25rem;
	background: var(--rg-bone);
	transition: transform 600ms var(--rg-ease);
}

.woocommerce ul.products li.product:hover a img { transform: scale(1.03); }

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	overflow: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-family: var(--rg-display);
	font-size: 1.0625rem !important;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin-top: 0.35rem;
	color: var(--rg-muted);
	font-family: var(--rg-ui);
	font-size: 0.875rem;
	font-weight: 300;
	letter-spacing: 0.04em;
}

.woocommerce ul.products li.product .price del { opacity: 0.5; }

.woocommerce ul.products li.product .price ins {
	font-weight: 500;
	text-decoration: none;
}

/* Badges */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	top: 0;
	right: auto;
	left: 0;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.5em 1em;
	border-radius: 0;
	background: var(--rg-black);
	color: var(--rg-white);
	font-family: var(--rg-ui);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: var(--rg-track-label);
	line-height: 1;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */

.woocommerce div.product .product_title {
	margin-bottom: 0.5rem;
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--rg-fg);
	font-family: var(--rg-ui);
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0.04em;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-block: 1.5rem;
	color: var(--rg-muted);
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: 1.5rem;
	border-collapse: collapse;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	padding: 0.5rem 0;
	border: 0;
	text-align: left;
	vertical-align: middle;
}

.woocommerce div.product form.cart .variations label {
	font-family: var(--rg-ui);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--rg-track-label);
	text-transform: uppercase;
}

.woocommerce div.product form.cart .variations select,
.woocommerce .quantity input.qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 0.85em 1em;
	border: 1px solid var(--rg-rule-strong);
	border-radius: 0;
	background: var(--rg-white);
	color: var(--rg-fg);
	font-family: var(--rg-ui);
	font-size: 0.9375rem;
	font-weight: 300;
}

.woocommerce div.product form.cart .variations select:focus-visible,
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible {
	outline: 2px solid var(--rg-black);
	outline-offset: 2px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	margin: 0 0 2rem;
	padding: 0;
	border-bottom: 1px solid var(--rg-rule);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 2.5rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0 0 1rem;
	border-bottom: 1px solid transparent;
	color: var(--rg-muted);
	font-family: var(--rg-ui);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--rg-track-label);
	text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--rg-black);
	color: var(--rg-black);
}

/* --------------------------------------------------------------------------
   Engraving field on the product page
   -------------------------------------------------------------------------- */

.rg-engraving {
	margin-block: 1.75rem;
	padding: 1.5rem;
	border: 1px solid var(--rg-rule-strong);
	background: var(--rg-bone);
}

.rg-engraving__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.rg-engraving__title {
	font-family: var(--rg-ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--rg-track-label);
	text-transform: uppercase;
}

.rg-engraving__price {
	font-family: var(--rg-ui);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.rg-engraving__note {
	margin-bottom: 1rem;
	color: var(--rg-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
}

.rg-engraving__input {
	width: 100%;
	padding: 0.85em 1em;
	border: 1px solid var(--rg-rule-strong);
	border-radius: 0;
	background: var(--rg-white);
	font-family: var(--rg-display);
	font-size: 1.125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.rg-engraving__input:focus-visible {
	outline: 2px solid var(--rg-black);
	outline-offset: 2px;
}

.rg-engraving__counter {
	display: block;
	margin-top: 0.5rem;
	color: var(--rg-muted);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.rg-engraving__counter[data-over="true"] { color: #a11; }

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--rg-black);
	border-radius: 0;
	background: var(--rg-bone);
	color: var(--rg-fg);
	font-size: 0.875rem;
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--rg-black); }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--rg-black);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Content pages (service, legal, story) — plain WordPress content, no builder
   -------------------------------------------------------------------------- */

.page:not(.elementor-page) .site-main,
.single-post .site-main {
	max-width: 820px;
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 6rem) var(--rg-gap) var(--rg-section);
}

.page:not(.elementor-page) .entry-title,
.single-post .entry-title {
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--rg-rule);
	font-size: clamp(2rem, 5vw, 3.25rem);
	text-align: center;
}

.page-content h2 {
	margin-top: 3rem;
	margin-bottom: 0.75rem;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.page-content h3 {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	font-family: var(--rg-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--rg-track-label);
	text-transform: uppercase;
}

.page-content p,
.page-content li { margin-bottom: 1rem; }

.page-content ul,
.page-content ol { padding-left: 1.25rem; }

.page-content li { max-width: var(--rg-measure); }

.rg-lead {
	max-width: var(--rg-measure);
	margin-bottom: 2rem;
	color: var(--rg-graphite);
	font-family: var(--rg-display);
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	font-weight: 300;
	line-height: 1.5;
	text-transform: none;
}

.page-content table {
	width: 100%;
	margin-block: 1.5rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.page-content th,
.page-content td {
	padding: 0.85rem 1rem 0.85rem 0;
	border-bottom: 1px solid var(--rg-rule);
	text-align: left;
	vertical-align: top;
}

.page-content th {
	font-family: var(--rg-ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--rg-track-label);
	text-transform: uppercase;
}

.page-content code {
	padding: 0.15em 0.4em;
	background: var(--rg-bone);
	font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   Category tiles
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product-category a img {
	margin-bottom: 1rem;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
	font-family: var(--rg-display);
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.woocommerce ul.products li.product-category h2 .count {
	display: block;
	margin-top: 0.35rem;
	padding: 0;
	background: none;
	color: var(--rg-muted);
	font-family: var(--rg-ui);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.16em;
}

/* --------------------------------------------------------------------------
   Cart, checkout, account
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	font-size: 0.9375rem;
}

.woocommerce table.shop_table th {
	border-bottom: 1px solid var(--rg-rule-strong);
	font-family: var(--rg-ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--rg-track-label);
	text-transform: uppercase;
}

.woocommerce table.shop_table td { border-top: 1px solid var(--rg-rule); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2 {
	margin-bottom: 1.25rem;
	font-size: 1.25rem;
	letter-spacing: 0.12em;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-checkout #payment {
	border: 1px solid var(--rg-rule-strong);
	border-radius: 0;
	background: var(--rg-bone);
}

/* Engraving line under a cart item */
.woocommerce td.product-name dl.variation dt,
.woocommerce td.product-name dl.variation dd {
	font-family: var(--rg-ui);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Elementor header — keep the wordmark from wrapping on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.elementor-location-header .elementor-widget-theme-site-title { font-size: 0.85em; }
}