/* ==========================================================================
   Ojasvi Drapes — Core design system
   Deep aubergine + antique gold + marigold. No white backgrounds anywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
	/* Surfaces — layered from deepest to lifted */
	--od-bg: #140a12;
	--od-bg-alt: #1a0d17;
	--od-surface: #21121d;
	--od-surface-2: #2b1826;
	--od-surface-3: #3a2233;
	--od-overlay: rgba(20, 10, 18, 0.82);

	/* Metals & spice */
	--od-gold: #d9a441;
	--od-gold-light: #f0d08a;
	--od-gold-deep: #a97a26;
	--od-gold-grad: linear-gradient(135deg, #a97a26 0%, #f0d08a 45%, #d9a441 100%);
	--od-marigold: #e8952f;
	--od-maroon: #7b1e3b;
	--od-rose: #c25d7e;
	--od-emerald: #1f7a63;
	--od-peacock: #17565f;

	/* Type */
	--od-text: #f4eaee;
	--od-text-soft: #d8c6ce;
	--od-muted: #a8909c;
	--od-faint: #7d6773;

	/* Lines */
	--od-line: rgba(217, 164, 65, 0.18);
	--od-line-soft: rgba(244, 234, 238, 0.09);

	/* Status */
	--od-success: #3f9d7c;
	--od-error: #e0596b;
	--od-warn: #e8b23f;

	/* Fonts */
	--od-font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	--od-font-head: "Playfair Display", Georgia, "Times New Roman", serif;
	--od-font-body: "Jost", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Metrics */
	--od-container: 1320px;
	--od-container-wide: 1560px;
	--od-radius: 4px;
	--od-radius-lg: 10px;
	--od-radius-pill: 999px;
	--od-gutter: 24px;
	--od-header-h: 84px;

	/* Motion */
	--od-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--od-fast: 0.2s var(--od-ease);
	--od-slow: 0.55s var(--od-ease);

	/* Shadow */
	--od-shadow: 0 18px 48px -18px rgba(0, 0, 0, 0.85);
	--od-shadow-gold: 0 14px 40px -14px rgba(217, 164, 65, 0.35);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--od-bg);
	background-image:
		radial-gradient(1100px 620px at 82% -8%, rgba(123, 30, 59, 0.34), transparent 62%),
		radial-gradient(900px 520px at 6% 4%, rgba(23, 86, 95, 0.24), transparent 58%),
		radial-gradient(700px 700px at 50% 118%, rgba(169, 122, 38, 0.16), transparent 60%);
	background-attachment: fixed;
	color: var(--od-text);
	font-family: var(--od-font-body);
	font-size: 16px;
	line-height: 1.7;
	font-weight: 400;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.od-no-scroll {
	overflow: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--od-font-head);
	color: var(--od-text);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.6em;
	letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--od-gold);
	text-decoration: none;
	transition: color var(--od-fast), opacity var(--od-fast);
}

a:hover,
a:focus-visible {
	color: var(--od-gold-light);
}

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }

blockquote {
	margin: 1.6em 0;
	padding: 1.1em 1.6em;
	border-left: 3px solid var(--od-gold);
	background: var(--od-surface);
	border-radius: 0 var(--od-radius) var(--od-radius) 0;
	font-family: var(--od-font-display);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--od-text-soft);
}

hr {
	border: 0;
	height: 1px;
	background: var(--od-line);
	margin: 2.4em 0;
}

code, pre, kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	background: var(--od-surface-2);
	border-radius: var(--od-radius);
}

code { padding: 0.15em 0.45em; font-size: 0.9em; }
pre { padding: 1.1em; overflow-x: auto; border: 1px solid var(--od-line-soft); }

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.6em;
}

th, td {
	padding: 0.85em 1em;
	border-bottom: 1px solid var(--od-line-soft);
	text-align: left;
}

th {
	font-family: var(--od-font-body);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.78rem;
	color: var(--od-gold);
}

::selection {
	background: var(--od-gold);
	color: #1a0d17;
}

:focus-visible {
	outline: 2px solid var(--od-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--od-bg-alt); }
::-webkit-scrollbar-thumb {
	background: var(--od-surface-3);
	border-radius: 99px;
	border: 2px solid var(--od-bg-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--od-gold-deep); }

/* --------------------------------------------------------------------------
   3. Accessibility helpers
   -------------------------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--od-surface-2);
	border-radius: var(--od-radius);
	box-shadow: var(--od-shadow);
	clip: auto !important;
	clip-path: none;
	color: var(--od-gold);
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	height: auto;
	left: 12px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 12px;
	width: auto;
	z-index: 100000;
}

.od-skip-link:focus { outline-offset: 0; }

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

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.od-container {
	width: 100%;
	max-width: var(--od-container);
	margin-inline: auto;
	padding-inline: var(--od-gutter);
}

.od-container--wide { max-width: var(--od-container-wide); }
.od-container--narrow { max-width: 860px; }

.od-section { padding-block: clamp(48px, 7vw, 96px); }
.od-section--tight { padding-block: clamp(32px, 4vw, 56px); }

.od-grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.od-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.od-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.od-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.od-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.od-flex { display: flex; }
.od-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.od-center { display: flex; align-items: center; justify-content: center; }

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

.od-main { flex: 1 0 auto; }

.od-layout {
	display: grid;
	/* Templates vary the aside width through --od-aside rather than an inline
	   grid-template-columns, which would outrank the media query below and
	   keep the two-column layout on a phone. */
	grid-template-columns: minmax(0, 1fr) var(--od-aside, 300px);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.od-layout--full { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   5. Ornaments — paisley / temple-arch motifs
   -------------------------------------------------------------------------- */
.od-ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--od-gold);
	opacity: 0.85;
}

.od-ornament::before,
.od-ornament::after {
	content: "";
	height: 1px;
	width: clamp(38px, 9vw, 96px);
	background: linear-gradient(90deg, transparent, var(--od-gold));
}

.od-ornament::after { background: linear-gradient(270deg, transparent, var(--od-gold)); }

.od-ornament svg { width: 22px; height: 22px; }

.od-section-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(28px, 4vw, 52px);
}

.od-section-head .od-eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--od-gold);
	margin-bottom: 12px;
	font-weight: 500;
	padding-left: 0.42em;
}

.od-section-head h2 {
	margin-bottom: 12px;
	background: linear-gradient(180deg, var(--od-text) 30%, var(--od-gold-light));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.od-section-head p {
	color: var(--od-muted);
	font-size: 1.02rem;
}

.od-section-head--left { text-align: left; margin-inline: 0; }

/* Repeating temple-arch divider */
.od-arch-divider {
	height: 18px;
	width: 100%;
	background-repeat: repeat-x;
	background-size: 36px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0 18 C0 8 8 0 18 0 C28 0 36 8 36 18' fill='none' stroke='%23d9a441' stroke-opacity='.32' stroke-width='1'/%3E%3C/svg%3E");
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
/* Single-class selector on purpose: `a.od-btn` would out-specify the
   modifiers below and force every variant back to the gold fill. */
.od-btn {
	--btn-bg: var(--od-gold-grad);
	--btn-fg: #1a0d17;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 30px;
	border: 0;
	border-radius: var(--od-radius-pill);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--od-font-body);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform var(--od-fast), box-shadow var(--od-fast), color var(--od-fast);
	line-height: 1.2;
	text-align: center;
}

.od-btn:hover,
.od-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--od-shadow-gold);
	color: #1a0d17;
}

.od-btn:active { transform: translateY(0); }

.od-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--od-gold);
	border: 1px solid var(--od-gold);
}

.od-btn--ghost:hover,
.od-btn--ghost:focus-visible {
	background: var(--od-gold);
	color: #1a0d17;
}

.od-btn--outline-light {
	--btn-bg: transparent;
	--btn-fg: var(--od-text);
	border: 1px solid var(--od-line-soft);
}

.od-btn--outline-light:hover {
	border-color: var(--od-gold);
	color: var(--od-gold);
}

.od-btn--solid-dark {
	--btn-bg: var(--od-surface-2);
	--btn-fg: var(--od-text);
	border: 1px solid var(--od-line);
}

.od-btn--solid-dark:hover { color: var(--od-gold); }

.od-btn--maroon { --btn-bg: linear-gradient(135deg, #5f1630, #a82c4d); --btn-fg: #fff2f6; }

.od-btn--sm { padding: 10px 20px; font-size: 0.72rem; }
.od-btn--lg { padding: 17px 42px; font-size: 0.88rem; }
.od-btn--block { display: flex; width: 100%; }

.od-btn[disabled],
.od-btn.disabled {
	opacity: 0.5;
	pointer-events: none;
}

.od-btn.loading {
	pointer-events: none;
	color: transparent !important;
}

.od-btn.loading::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(26, 13, 23, 0.35);
	border-top-color: #1a0d17;
	border-radius: 50%;
	animation: od-spin 0.7s linear infinite;
}

@keyframes od-spin { to { transform: rotate(360deg); } }

/* Icon button */
.od-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--od-surface-2);
	border: 1px solid var(--od-line-soft);
	color: var(--od-text);
	cursor: pointer;
	position: relative;
	transition: all var(--od-fast);
	padding: 0;
	flex: none;
}

.od-icon-btn:hover,
.od-icon-btn:focus-visible {
	background: var(--od-gold);
	border-color: var(--od-gold);
	color: #1a0d17;
	transform: translateY(-2px);
}

.od-icon-btn svg { width: 19px; height: 19px; }

.od-count-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 99px;
	background: var(--od-maroon);
	color: #fff;
	font-size: 0.66rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--od-bg);
	line-height: 1;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea,
.select2-container .select2-selection--single {
	width: 100%;
	padding: 13px 16px;
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius);
	color: var(--od-text);
	font-family: var(--od-font-body);
	font-size: 0.95rem;
	transition: border-color var(--od-fast), box-shadow var(--od-fast), background var(--od-fast);
	-webkit-appearance: none;
	appearance: none;
}

textarea { min-height: 140px; resize: vertical; }

input::placeholder,
textarea::placeholder { color: var(--od-faint); opacity: 1; }

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--od-gold);
	background: var(--od-surface-2);
	box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.14);
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d9a441' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
	cursor: pointer;
}

select option { background: var(--od-surface-2); color: var(--od-text); }

label {
	display: block;
	margin-bottom: 7px;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--od-muted);
	font-weight: 500;
}

.od-field { margin-bottom: 18px; }

.od-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9rem;
	color: var(--od-text-soft);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--od-gold);
	flex: none;
	cursor: pointer;
}

/* Autofill — keep the dark surface */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: var(--od-text);
	-webkit-box-shadow: 0 0 0 1000px var(--od-surface-2) inset;
	caret-color: var(--od-text);
	transition: background-color 5000s ease-in-out 0s;
}

/* --------------------------------------------------------------------------
   8. Top strip
   -------------------------------------------------------------------------- */
.od-topbar {
	background: linear-gradient(90deg, var(--od-maroon), #4b1024 45%, var(--od-maroon));
	color: #f6e3ea;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	border-bottom: 1px solid rgba(217, 164, 65, 0.22);
	position: relative;
	z-index: 60;
}

.od-topbar .od-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 38px;
}

.od-topbar a { color: #f6e3ea; }
.od-topbar a:hover { color: var(--od-gold-light); }

.od-ticker {
	flex: 1;
	overflow: hidden;
	position: relative;
	height: 38px;
}

.od-ticker__track {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 56px;
	white-space: nowrap;
	animation: od-ticker 26s linear infinite;
	will-change: transform;
}

.od-ticker:hover .od-ticker__track { animation-play-state: paused; }

.od-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.od-ticker__item svg { width: 14px; height: 14px; color: var(--od-gold); flex: none; }

@keyframes od-ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.od-topbar__links {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: none;
}

.od-topbar__links span { opacity: 0.45; }

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */
.od-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(26, 13, 23, 0.86);
	backdrop-filter: saturate(150%) blur(16px);
	-webkit-backdrop-filter: saturate(150%) blur(16px);
	border-bottom: 1px solid var(--od-line);
	transition: box-shadow var(--od-fast), background var(--od-fast);
}

.od-header.is-stuck {
	box-shadow: 0 12px 34px -20px rgba(0, 0, 0, 0.95);
	background: rgba(20, 10, 18, 0.96);
}

.od-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 22px;
	min-height: var(--od-header-h);
}

/* Brand */
.od-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.od-brand__mark {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: var(--od-gold-grad);
	display: grid;
	place-items: center;
	color: #1a0d17;
	font-family: var(--od-font-head);
	font-size: 1.28rem;
	font-weight: 700;
	box-shadow: 0 0 0 1px rgba(217, 164, 65, 0.4), 0 0 22px -6px rgba(217, 164, 65, 0.6);
	line-height: 1;
}

.od-brand__text { display: flex; flex-direction: column; line-height: 1.05; }

.od-brand__name {
	font-family: var(--od-font-head);
	font-size: 1.42rem;
	font-weight: 600;
	color: var(--od-text);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.od-brand__name em {
	font-style: normal;
	background: var(--od-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.od-brand__tag {
	font-size: 0.58rem;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: var(--od-muted);
	padding-left: 0.36em;
	white-space: nowrap;
}

.od-brand img { max-height: 54px; width: auto; }

/* Primary nav */
.od-nav { justify-self: center; }

.od-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.od-nav li { position: relative; }

.od-nav a {
	display: block;
	padding: 12px 15px;
	color: var(--od-text-soft);
	font-size: 0.79rem;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	white-space: nowrap;
	position: relative;
}

.od-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 6px;
	height: 1px;
	background: var(--od-gold-grad);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--od-ease);
}

.od-nav > ul > li:hover > a::after,
.od-nav > ul > li.current-menu-item > a::after,
.od-nav > ul > li.current-menu-ancestor > a::after { transform: scaleX(1); }

.od-nav a:hover,
.od-nav .current-menu-item > a,
.od-nav .current-menu-ancestor > a { color: var(--od-gold); }

/* Menu item flags */
.od-nav .menu-item--hot > a::before,
.od-nav .menu-item--new > a::before {
	content: "HOT";
	position: absolute;
	top: -1px;
	right: 0;
	font-size: 0.5rem;
	letter-spacing: 0.08em;
	padding: 1px 5px;
	border-radius: 3px;
	background: var(--od-maroon);
	color: #fff;
	line-height: 1.5;
}

.od-nav .menu-item--new > a::before { content: "NEW"; background: var(--od-emerald); }

/* Dropdowns */
.od-nav ul ul {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 236px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	background: var(--od-surface-2);
	border: 1px solid var(--od-line);
	border-radius: var(--od-radius-lg);
	padding: 10px;
	box-shadow: var(--od-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.28s var(--od-ease);
	z-index: 20;
}

.od-nav ul ul ul { top: -10px; left: 100%; }

.od-nav li:hover > ul,
.od-nav li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.od-nav ul ul a {
	padding: 10px 14px;
	border-radius: var(--od-radius);
	letter-spacing: 0.07em;
	font-size: 0.78rem;
	text-transform: none;
	color: var(--od-text-soft);
}

.od-nav ul ul a:hover {
	background: var(--od-surface-3);
	color: var(--od-gold);
	padding-left: 19px;
}

.od-nav .menu-item-has-children > a > .od-caret {
	display: inline-block;
	margin-left: 6px;
	width: 8px;
	height: 8px;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: 0.7;
}

/* Header actions */
.od-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-self: end;
}

.od-burger { display: none; }

/* --------------------------------------------------------------------------
   10. Mega menu
   -------------------------------------------------------------------------- */
.od-nav li.od-mega { position: static; }

.od-nav li.od-mega > ul {
	left: 50%;
	transform: translate(-50%, 10px);
	width: min(1180px, calc(100vw - 48px));
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px 26px;
	padding: 28px 30px;
}

.od-nav li.od-mega:hover > ul,
.od-nav li.od-mega:focus-within > ul { transform: translate(-50%, 0); }

.od-nav li.od-mega > ul > li > a {
	font-family: var(--od-font-head);
	font-size: 0.96rem;
	color: var(--od-gold);
	text-transform: none;
	letter-spacing: 0.02em;
	padding: 4px 0 8px;
	border-bottom: 1px solid var(--od-line);
	margin-bottom: 6px;
	pointer-events: none;
}

.od-nav li.od-mega > ul > li > a:hover { background: none; padding-left: 0; }

.od-nav li.od-mega ul ul {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	min-width: 0;
	display: flex;
}

/* --------------------------------------------------------------------------
   11. Mobile drawer nav
   -------------------------------------------------------------------------- */
.od-drawer {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(360px, 88vw);
	background: var(--od-bg-alt);
	border-right: 1px solid var(--od-line);
	transform: translateX(-102%);
	transition: transform 0.42s var(--od-ease);
	z-index: 120;
	display: flex;
	flex-direction: column;
	box-shadow: 22px 0 60px -30px #000;
}

.od-drawer.is-open { transform: translateX(0); }

.od-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--od-line);
	flex: none;
}

.od-drawer__body {
	overflow-y: auto;
	padding: 14px 12px 28px;
	flex: 1;
	-webkit-overflow-scrolling: touch;
}

.od-drawer__foot {
	padding: 16px 20px 22px;
	border-top: 1px solid var(--od-line);
	display: grid;
	gap: 10px;
	flex: none;
}

.od-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.od-drawer > .od-drawer__body > ul > li { border-bottom: 1px solid var(--od-line-soft); }

.od-drawer li a {
	display: block;
	padding: 13px 12px;
	color: var(--od-text-soft);
	font-size: 0.88rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.od-drawer li a:hover { color: var(--od-gold); }

.od-drawer ul ul {
	display: none;
	padding-left: 14px;
	border-left: 1px solid var(--od-line);
	margin: 0 0 10px 12px;
}

.od-drawer li.is-open > ul { display: block; }

.od-drawer ul ul a {
	text-transform: none;
	font-size: 0.85rem;
	padding: 9px 12px;
	letter-spacing: 0.02em;
}

.od-drawer__toggle {
	position: absolute;
	right: 6px;
	top: 5px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: var(--od-gold);
	cursor: pointer;
	transition: transform var(--od-fast);
}

.od-drawer li.is-open > .od-drawer__toggle { transform: rotate(180deg); }

.od-drawer li { position: relative; }

.od-drawer__socials {
	display: flex;
	gap: 10px;
	justify-content: center;
	padding-top: 6px;
}

/* Shared scrim */
.od-scrim {
	position: fixed;
	inset: 0;
	background: rgba(9, 4, 8, 0.72);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.34s var(--od-ease), visibility 0.34s;
	z-index: 110;
}

.od-scrim.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   12. Search overlay
   -------------------------------------------------------------------------- */
.od-search-overlay {
	position: fixed;
	inset: 0;
	background: var(--od-overlay);
	backdrop-filter: blur(14px);
	z-index: 130;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(60px, 14vh, 160px) 24px 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.34s var(--od-ease), visibility 0.34s;
	overflow-y: auto;
}

.od-search-overlay.is-open { opacity: 1; visibility: visible; }

.od-search-overlay__inner {
	width: min(760px, 100%);
	transform: translateY(-16px);
	transition: transform 0.44s var(--od-ease);
}

.od-search-overlay.is-open .od-search-overlay__inner { transform: translateY(0); }

.od-search-overlay form {
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid var(--od-gold);
	padding-bottom: 10px;
}

.od-search-overlay input[type="search"] {
	background: none;
	border: 0;
	font-family: var(--od-font-head);
	font-size: clamp(1.3rem, 4vw, 2.2rem);
	padding: 8px 0;
	color: var(--od-text);
}

.od-search-overlay input[type="search"]:focus { box-shadow: none; background: none; }

.od-search-overlay__hint {
	margin-top: 20px;
	color: var(--od-muted);
	font-size: 0.85rem;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.od-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 15px;
	border-radius: var(--od-radius-pill);
	border: 1px solid var(--od-line);
	background: var(--od-surface);
	color: var(--od-text-soft);
	font-size: 0.78rem;
	transition: all var(--od-fast);
}

.od-chip:hover {
	border-color: var(--od-gold);
	color: var(--od-gold);
	transform: translateY(-2px);
}

.od-search-close {
	position: absolute;
	top: 24px;
	right: 24px;
}

/* Live results */
.od-live-results {
	margin-top: 22px;
	display: grid;
	gap: 8px;
	max-height: 52vh;
	overflow-y: auto;
}

.od-live-result {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px;
	border-radius: var(--od-radius);
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	transition: all var(--od-fast);
}

.od-live-result:hover { border-color: var(--od-gold); transform: translateX(4px); }

.od-live-result img {
	width: 56px;
	height: 70px;
	object-fit: cover;
	border-radius: 3px;
	flex: none;
}

.od-live-result__title {
	color: var(--od-text);
	font-family: var(--od-font-head);
	font-size: 1rem;
}

.od-live-result__price { color: var(--od-gold); font-size: 0.85rem; }

/* Standalone search form, used on the 404 and empty-results pages. */
.od-searchform {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius-pill);
	padding: 5px 5px 5px 8px;
	transition: border-color var(--od-fast);
}

.od-searchform:focus-within { border-color: var(--od-gold); }

.od-searchform input[type="search"] {
	flex: 1;
	background: none;
	border: 0;
	padding: 10px 12px;
}

.od-searchform input[type="search"]:focus { box-shadow: none; background: none; }
.od-searchform .od-icon-btn { flex: none; }

/* Inside the overlay the form is a bare underlined field instead. */
.od-search-overlay .od-searchform {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--od-gold);
	border-radius: 0;
	padding: 0 0 10px;
}

/* --------------------------------------------------------------------------
   13. Side panels (cart / wishlist / filters)
   -------------------------------------------------------------------------- */
.od-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 92vw);
	background: var(--od-bg-alt);
	border-left: 1px solid var(--od-line);
	z-index: 130;
	transform: translateX(102%);
	transition: transform 0.42s var(--od-ease);
	display: flex;
	flex-direction: column;
	box-shadow: -22px 0 60px -30px #000;
}

.od-panel.is-open { transform: translateX(0); }

.od-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px;
	border-bottom: 1px solid var(--od-line);
	flex: none;
}

.od-panel__head h3 {
	margin: 0;
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	gap: 10px;
}

.od-panel__body {
	flex: 1;
	overflow-y: auto;
	padding: 18px 22px;
	-webkit-overflow-scrolling: touch;
}

.od-panel__foot {
	flex: none;
	padding: 18px 22px 24px;
	border-top: 1px solid var(--od-line);
	background: var(--od-surface);
}

.od-panel__empty {
	text-align: center;
	padding: 50px 12px;
	color: var(--od-muted);
}

.od-panel__empty svg {
	width: 62px;
	height: 62px;
	margin: 0 auto 18px;
	color: var(--od-surface-3);
}

/* Free-shipping meter */
.od-ship-meter { margin-bottom: 18px; }

.od-ship-meter__bar {
	height: 6px;
	border-radius: 99px;
	background: var(--od-surface-2);
	overflow: hidden;
	margin-top: 8px;
}

.od-ship-meter__fill {
	height: 100%;
	border-radius: 99px;
	background: var(--od-gold-grad);
	transition: width 0.6s var(--od-ease);
}

.od-ship-meter p {
	font-size: 0.82rem;
	color: var(--od-muted);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.od-ship-meter p svg { flex: none; color: var(--od-gold); }
.od-ship-meter strong { color: var(--od-gold); }

/* On the cart and checkout it is a panel of its own rather than a line in a
   list, and it earns a little more room. */
.od-ship-meter--cart,
.od-ship-meter--checkout {
	margin: 0 0 20px;
	padding: 15px 20px;
	border: 1px solid var(--od-line);
	border-radius: var(--od-radius);
	background: var(--od-surface);
}

.od-ship-meter--cart p,
.od-ship-meter--checkout p { font-size: 0.9rem; }

.od-ship-meter.is-done .od-ship-meter__fill { background: var(--od-success); }
.od-ship-meter.is-done p svg,
.od-ship-meter.is-done strong { color: var(--od-success); }

/* --------------------------------------------------------------------------
   14. Hero slider
   -------------------------------------------------------------------------- */
.od-hero {
	position: relative;
	overflow: hidden;
	background: var(--od-bg-alt);
}

.od-hero__viewport { position: relative; }

.od-hero__slide {
	position: relative;
	min-height: clamp(480px, 78vh, 820px);
	display: none;
	align-items: center;
	isolation: isolate;
}

.od-hero__slide.is-active { display: flex; animation: od-fade-in 0.9s var(--od-ease); }

@keyframes od-fade-in { from { opacity: 0; } to { opacity: 1; } }

.od-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* Fallback for a slide with no image yet — the inline style the
	   Customizer writes overrides this the moment one is set. */
	background-color: var(--od-bg-alt);
	background-image:
		radial-gradient(760px 520px at 78% 22%, rgba(123, 30, 59, 0.72), transparent 66%),
		radial-gradient(620px 460px at 22% 78%, rgba(23, 86, 95, 0.55), transparent 62%),
		repeating-linear-gradient(115deg, rgba(217, 164, 65, 0.07) 0 2px, transparent 2px 9px),
		repeating-linear-gradient(-115deg, rgba(217, 164, 65, 0.05) 0 2px, transparent 2px 11px);
	background-size: cover;
	background-position: center;
	transform: scale(1.06);
	animation: od-kenburns 14s ease-out forwards;
}

@keyframes od-kenburns {
	from { transform: scale(1.12); }
	to { transform: scale(1); }
}

.od-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(20, 10, 18, 0.95) 0%, rgba(20, 10, 18, 0.72) 42%, rgba(20, 10, 18, 0.25) 78%),
		linear-gradient(0deg, rgba(20, 10, 18, 0.9), transparent 55%);
}

.od-hero__slide--right { justify-content: flex-end; text-align: right; }
.od-hero__slide--right::after {
	background:
		linear-gradient(270deg, rgba(20, 10, 18, 0.95) 0%, rgba(20, 10, 18, 0.72) 42%, rgba(20, 10, 18, 0.25) 78%),
		linear-gradient(0deg, rgba(20, 10, 18, 0.9), transparent 55%);
}

.od-hero__slide--center { justify-content: center; text-align: center; }
.od-hero__slide--center::after { background: linear-gradient(0deg, rgba(20, 10, 18, 0.94), rgba(20, 10, 18, 0.55)); }

.od-hero__content {
	max-width: 620px;
	padding-block: 60px;
	position: relative;
	z-index: 2;
}

.od-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 0.72rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--od-gold);
	margin-bottom: 18px;
	animation: od-rise 0.7s 0.1s var(--od-ease) both;
}

.od-hero__eyebrow::before {
	content: "";
	width: 42px;
	height: 1px;
	background: var(--od-gold);
}

.od-hero__slide--right .od-hero__eyebrow { flex-direction: row-reverse; }
.od-hero__slide--right .od-hero__content { margin-left: auto; }
.od-hero__slide--center .od-hero__content { margin-inline: auto; }
.od-hero__slide--center .od-hero__eyebrow::after {
	content: "";
	width: 42px;
	height: 1px;
	background: var(--od-gold);
}

.od-hero__title {
	font-size: clamp(2.4rem, 6.4vw, 4.6rem);
	line-height: 1.04;
	margin-bottom: 18px;
	animation: od-rise 0.7s 0.22s var(--od-ease) both;
}

.od-hero__title em {
	font-style: italic;
	font-family: var(--od-font-display);
	background: var(--od-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.od-hero__text {
	font-size: 1.05rem;
	color: var(--od-text-soft);
	max-width: 480px;
	margin-bottom: 30px;
	animation: od-rise 0.7s 0.34s var(--od-ease) both;
}

.od-hero__slide--right .od-hero__text { margin-left: auto; }
.od-hero__slide--center .od-hero__text { margin-inline: auto; }

.od-hero__cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	animation: od-rise 0.7s 0.46s var(--od-ease) both;
}

.od-hero__slide--right .od-hero__cta { justify-content: flex-end; }
.od-hero__slide--center .od-hero__cta { justify-content: center; }

@keyframes od-rise {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: translateY(0); }
}

.od-hero__price {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 22px;
	font-family: var(--od-font-head);
	color: var(--od-text);
	animation: od-rise 0.7s 0.4s var(--od-ease) both;
}

.od-hero__price span { font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--od-muted); font-family: var(--od-font-body); }
.od-hero__price strong { font-size: 1.7rem; color: var(--od-gold); font-weight: 600; }

/* Hero controls */
.od-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	background: rgba(33, 18, 29, 0.6);
	backdrop-filter: blur(8px);
}

.od-hero__nav--prev { left: 20px; }
.od-hero__nav--next { right: 20px; }

.od-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 5;
}

.od-hero__dot {
	width: 34px;
	height: 3px;
	border-radius: 99px;
	background: rgba(244, 234, 238, 0.28);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background var(--od-fast), width var(--od-fast);
}

.od-hero__dot.is-active { background: var(--od-gold); width: 52px; }

/* --------------------------------------------------------------------------
   15. USP strip
   -------------------------------------------------------------------------- */
.od-usp {
	background: var(--od-surface);
	border-block: 1px solid var(--od-line);
}

.od-usp__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--od-line-soft);
}

.od-usp__item {
	background: var(--od-surface);
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 26px 22px;
	transition: background var(--od-fast);
	/* Long strings must wrap rather than push the row wider than the screen. */
	min-width: 0;
}

.od-usp__item > div { min-width: 0; }
.od-usp__item h4,
.od-usp__item p { overflow-wrap: anywhere; }

.od-usp__item:hover { background: var(--od-surface-2); }

.od-usp__icon {
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid var(--od-line);
	color: var(--od-gold);
	background: rgba(217, 164, 65, 0.07);
}

.od-usp__icon svg { width: 22px; height: 22px; }

.od-usp__item h4 { margin: 0 0 2px; font-size: 0.96rem; font-family: var(--od-font-body); font-weight: 600; letter-spacing: 0.02em; }
.od-usp__item p { margin: 0; font-size: 0.8rem; color: var(--od-muted); }

/* --------------------------------------------------------------------------
   16. Category tiles
   -------------------------------------------------------------------------- */
.od-cats {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 220px;
	gap: 16px;
}

.od-cat {
	position: relative;
	overflow: hidden;
	border-radius: var(--od-radius-lg);
	border: 1px solid var(--od-line-soft);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	background: var(--od-surface-2);
}

/* Width utilities so PHP can pick a tile pattern that fills every row
   exactly, whatever number of categories the shop has. */
.od-cat--w2 { grid-column: span 2; }
.od-cat--w3 { grid-column: span 3; }
.od-cat--w4 { grid-column: span 4; }
.od-cat--w6 { grid-column: span 6; }
.od-cat--h2 { grid-row: span 2; }

.od-cat__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	transition: transform 0.9s var(--od-ease);
}

.od-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(20, 10, 18, 0.94) 5%, rgba(20, 10, 18, 0.24) 62%, rgba(123, 30, 59, 0.18));
	transition: opacity var(--od-fast);
}

.od-cat:hover .od-cat__img { transform: scale(1.08); }

.od-cat__body { padding: 24px; width: 100%; position: relative; z-index: 2; }

.od-cat__count {
	font-size: 0.68rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--od-gold);
	display: block;
	margin-bottom: 6px;
}

.od-cat__title {
	font-family: var(--od-font-head);
	font-size: clamp(1.2rem, 2.2vw, 1.9rem);
	margin: 0 0 10px;
	color: var(--od-text);
}

.od-cat__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--od-text);
	opacity: 0;
	transform: translateY(8px);
	transition: all 0.34s var(--od-ease);
}

.od-cat:hover .od-cat__link,
.od-cat:focus-within .od-cat__link { opacity: 1; transform: translateY(0); color: var(--od-gold); }

.od-cat__stretch { position: absolute; inset: 0; z-index: 3; }

/* Circular category rail */
.od-catrail {
	display: flex;
	gap: clamp(14px, 2.4vw, 34px);
	overflow-x: auto;
	padding-bottom: 12px;
	scrollbar-width: thin;
	scroll-snap-type: x mandatory;
}

.od-catrail__item {
	flex: none;
	width: clamp(110px, 14vw, 158px);
	text-align: center;
	scroll-snap-align: center;
}

.od-catrail__ring {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	padding: 4px;
	background: var(--od-gold-grad);
	margin-bottom: 12px;
	transition: transform 0.45s var(--od-ease), box-shadow 0.45s var(--od-ease);
}

.od-catrail__item:hover .od-catrail__ring {
	transform: translateY(-6px) scale(1.03);
	box-shadow: var(--od-shadow-gold);
}

/* The ring clips its own content, so a portrait or oversized category
   thumbnail can never spill past the circle. */
.od-catrail__ring,
.od-catrail__ring img,
.od-catrail__ring span {
	overflow: hidden;
}

.od-catrail__ring img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	border: 3px solid var(--od-bg);
	background: var(--od-surface-2);
}

.od-catrail__ring span {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--od-surface-2);
	border: 3px solid var(--od-bg);
	color: var(--od-gold);
	font-family: var(--od-font-head);
	font-size: 1.6rem;
}

.od-catrail__name {
	font-size: 0.84rem;
	letter-spacing: 0.08em;
	color: var(--od-text-soft);
	display: block;
}

.od-catrail__item:hover .od-catrail__name { color: var(--od-gold); }

/* --------------------------------------------------------------------------
   17. Banners / promos
   -------------------------------------------------------------------------- */
.od-promo {
	position: relative;
	border-radius: var(--od-radius-lg);
	overflow: hidden;
	min-height: 340px;
	display: flex;
	align-items: center;
	padding: clamp(26px, 4vw, 54px);
	isolation: isolate;
	border: 1px solid var(--od-line);
}

.od-promo__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	transition: transform 0.9s var(--od-ease);
}

.od-promo:hover .od-promo__bg { transform: scale(1.05); }

.od-promo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(20, 10, 18, 0.93), rgba(20, 10, 18, 0.4));
}

.od-promo__content { max-width: 380px; }

.od-promo__off {
	font-family: var(--od-font-head);
	font-size: clamp(2.6rem, 6vw, 4rem);
	line-height: 1;
	background: var(--od-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: block;
	margin-bottom: 6px;
}

.od-promo h3 { font-size: clamp(1.3rem, 2.6vw, 2rem); margin-bottom: 10px; }
.od-promo p { color: var(--od-text-soft); margin-bottom: 22px; }

/* Countdown */
.od-countdown {
	display: flex;
	gap: 10px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.od-countdown__unit {
	min-width: 66px;
	padding: 10px 6px;
	border-radius: var(--od-radius);
	background: rgba(33, 18, 29, 0.82);
	border: 1px solid var(--od-line);
	text-align: center;
	backdrop-filter: blur(6px);
}

.od-countdown__num {
	display: block;
	font-family: var(--od-font-head);
	font-size: 1.6rem;
	color: var(--od-gold);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.od-countdown__lbl {
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--od-muted);
}

/* Full-bleed parallax band */
.od-band {
	position: relative;
	isolation: isolate;
	padding-block: clamp(70px, 12vw, 150px);
	text-align: center;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

.od-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(20, 10, 18, 0.94), rgba(20, 10, 18, 0.7));
}

/* --------------------------------------------------------------------------
   18. Editorial / lookbook
   -------------------------------------------------------------------------- */
.od-look {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.od-look__cell {
	position: relative;
	overflow: hidden;
	border-radius: var(--od-radius-lg);
	aspect-ratio: 3 / 4;
	border: 1px solid var(--od-line-soft);
}

/*
 * Five shots in a four-column grid: the first takes a two-by-two block and the
 * other four fill the rest, so both rows come out complete. The old rule made
 * the first cell one column tall and two rows deep, which left two empty
 * squares at the end of the second row on a laptop.
 */
.od-look__cell:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: auto;
}
.od-look__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--od-ease); }
.od-look__cell:hover img { transform: scale(1.07); }

.od-look__tag {
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 8px 16px;
	border-radius: var(--od-radius-pill);
	background: rgba(20, 10, 18, 0.78);
	backdrop-filter: blur(8px);
	border: 1px solid var(--od-line);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--od-text);
}

/* --------------------------------------------------------------------------
   19. Testimonials
   -------------------------------------------------------------------------- */
.od-quotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.od-quote {
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius-lg);
	padding: 30px 26px;
	position: relative;
	transition: transform var(--od-fast), border-color var(--od-fast);
}

.od-quote:hover { transform: translateY(-5px); border-color: var(--od-line); }

.od-quote::before {
	content: "\201C";
	position: absolute;
	top: 6px;
	right: 22px;
	font-family: var(--od-font-head);
	font-size: 5rem;
	line-height: 1;
	color: var(--od-gold);
	opacity: 0.14;
}

.od-quote__stars { color: var(--od-marigold); letter-spacing: 3px; margin-bottom: 12px; font-size: 0.9rem; }

.od-quote__text {
	font-family: var(--od-font-display);
	font-size: 1.12rem;
	font-style: italic;
	color: var(--od-text-soft);
	line-height: 1.65;
	margin-bottom: 20px;
}

.od-quote__who { display: flex; align-items: center; gap: 12px; }

.od-quote__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--od-gold-grad);
	display: grid;
	place-items: center;
	color: #1a0d17;
	font-weight: 700;
	font-family: var(--od-font-head);
	flex: none;
	font-size: 1.05rem;
}

.od-quote__name { display: block; font-weight: 600; font-size: 0.94rem; }
.od-quote__city { font-size: 0.78rem; color: var(--od-muted); }

/* --------------------------------------------------------------------------
   20. Instagram / gram grid
   -------------------------------------------------------------------------- */
.od-gram {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
}

.od-gram__cell {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--od-radius);
}

.od-gram__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--od-ease); }

.od-gram__cell::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(123, 30, 59, 0.55);
	opacity: 0;
	transition: opacity var(--od-fast);
}

.od-gram__cell:hover img { transform: scale(1.12); }
.od-gram__cell:hover::after { opacity: 1; }

.od-gram__cell svg {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 26px;
	height: 26px;
	color: #fff;
	opacity: 0;
	transform: scale(0.7);
	transition: all var(--od-fast);
	z-index: 2;
}

.od-gram__cell:hover svg { opacity: 1; transform: scale(1); }

/* --------------------------------------------------------------------------
   21. Newsletter
   -------------------------------------------------------------------------- */
.od-newsletter {
	background:
		radial-gradient(700px 300px at 50% 0%, rgba(217, 164, 65, 0.14), transparent 70%),
		var(--od-surface);
	border-block: 1px solid var(--od-line);
	text-align: center;
}

.od-newsletter__form {
	display: flex;
	gap: 10px;
	max-width: 520px;
	margin: 24px auto 12px;
}

.od-newsletter__form input { border-radius: var(--od-radius-pill); padding-inline: 22px; }
.od-newsletter__note { font-size: 0.78rem; color: var(--od-faint); }

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */
.od-footer {
	background: linear-gradient(180deg, var(--od-bg-alt), #0e060c);
	border-top: 1px solid var(--od-line);
	margin-top: auto;
	position: relative;
}

.od-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 18px;
	background-repeat: repeat-x;
	background-size: 36px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0 0 C0 10 8 18 18 18 C28 18 36 10 36 0' fill='none' stroke='%23d9a441' stroke-opacity='.3' stroke-width='1'/%3E%3C/svg%3E");
}

.od-footer__top {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr) 1.3fr;
	gap: clamp(24px, 3vw, 46px);
	padding-block: clamp(48px, 6vw, 78px) 40px;
}

.od-footer h4 {
	font-family: var(--od-font-body);
	font-size: 0.8rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--od-gold);
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 12px;
}

.od-footer h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 1px;
	background: var(--od-gold);
}

.od-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.od-footer ul a { color: var(--od-muted); font-size: 0.9rem; }
.od-footer ul a:hover { color: var(--od-gold); padding-left: 5px; }
.od-footer ul a { transition: all var(--od-fast); display: inline-block; }
.od-footer p { color: var(--od-muted); font-size: 0.92rem; }

.od-footer__about .od-brand { margin-bottom: 18px; }

.od-socials { display: flex; gap: 10px; margin-top: 20px; }

.od-socials a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid var(--od-line);
	color: var(--od-text-soft);
	transition: all var(--od-fast);
}

.od-socials a:hover {
	background: var(--od-gold);
	border-color: var(--od-gold);
	color: #1a0d17;
	transform: translateY(-3px);
}

.od-socials svg { width: 17px; height: 17px; }

.od-contactlist { display: grid; gap: 14px; }

.od-contactlist li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--od-muted);
	font-size: 0.9rem;
}

.od-contactlist svg { width: 17px; height: 17px; color: var(--od-gold); flex: none; margin-top: 4px; }

.od-footer__bottom {
	border-top: 1px solid var(--od-line-soft);
	padding-block: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 0.84rem;
	color: var(--od-faint);
}

.od-payments { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.od-payments span {
	padding: 5px 11px;
	border: 1px solid var(--od-line-soft);
	border-radius: 4px;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	color: var(--od-muted);
	background: var(--od-surface);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   23. Page header / breadcrumb
   -------------------------------------------------------------------------- */
.od-pagehead {
	position: relative;
	padding-block: clamp(42px, 6vw, 78px);
	text-align: center;
	background: var(--od-bg-alt);
	border-bottom: 1px solid var(--od-line);
	isolation: isolate;
	overflow: hidden;
}

.od-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.16;
	background-size: 260px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d9a441' stroke-width='.8'%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3Ccircle cx='60' cy='60' r='40'/%3E%3Cpath d='M60 6v108M6 60h108M22 22l76 76M98 22l-76 76'/%3E%3C/g%3E%3C/svg%3E");
}

.od-pagehead h1 { margin-bottom: 8px; }

.od-crumbs {
	font-size: 0.8rem;
	color: var(--od-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
	letter-spacing: 0.06em;
}

.od-crumbs a { color: var(--od-text-soft); }
.od-crumbs a:hover { color: var(--od-gold); }
.od-crumbs .sep { color: var(--od-gold); opacity: 0.55; }

/* --------------------------------------------------------------------------
   24. Cards, posts, sidebar
   -------------------------------------------------------------------------- */
.od-card {
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius-lg);
	overflow: hidden;
	transition: transform var(--od-fast), border-color var(--od-fast), box-shadow var(--od-fast);
}

.od-card:hover {
	transform: translateY(-4px);
	border-color: var(--od-line);
	box-shadow: var(--od-shadow);
}

.od-post__thumb { aspect-ratio: 16 / 10; overflow: hidden; }
.od-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--od-ease); }
.od-card:hover .od-post__thumb img { transform: scale(1.06); }
.od-post__body { padding: 24px; }

.od-post__meta {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--od-gold);
	margin-bottom: 10px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.od-post__title { font-size: 1.25rem; margin-bottom: 10px; }
.od-post__title a { color: var(--od-text); }
.od-post__title a:hover { color: var(--od-gold); }
.od-post__excerpt { color: var(--od-muted); font-size: 0.93rem; margin-bottom: 16px; }

.od-readmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--od-gold);
}

.od-readmore svg { width: 15px; height: 15px; transition: transform var(--od-fast); }
.od-readmore:hover svg { transform: translateX(5px); }

/* Entry content */
.od-entry {
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius-lg);
	padding: clamp(22px, 4vw, 48px);
}

.od-entry img { border-radius: var(--od-radius); }

.od-entry > *:last-child { margin-bottom: 0; }

.od-entry h2, .od-entry h3 { margin-top: 1.6em; }
.od-entry h2:first-child, .od-entry h3:first-child { margin-top: 0; }

.od-entry ul, .od-entry ol { color: var(--od-text-soft); }
.od-entry li { margin-bottom: 8px; }

.wp-caption-text, .wp-element-caption {
	font-size: 0.82rem;
	color: var(--od-muted);
	text-align: center;
	margin-top: 8px;
}

.alignleft { float: left; margin: 0 1.6em 1.2em 0; }
.alignright { float: right; margin: 0 0 1.2em 1.6em; }
.aligncenter { margin-inline: auto; }
.alignwide { max-width: calc(100% + 60px); margin-inline: -30px; }
.alignfull { max-width: 100vw; margin-inline: calc(50% - 50vw); }

.sticky .od-post__title::before { content: "★ "; color: var(--od-gold); }

/* Sidebar widgets */
.od-sidebar { display: grid; gap: 22px; position: sticky; top: calc(var(--od-header-h) + 20px); }

.od-widget {
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius-lg);
	padding: 24px;
}

.od-widget__title,
.od-widget .widget-title,
.od-widget h2 {
	font-family: var(--od-font-head);
	font-size: 1.12rem;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--od-line);
	position: relative;
}

.od-widget__title::after,
.od-widget .widget-title::after,
.od-widget h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 46px;
	height: 1px;
	background: var(--od-gold);
}

.od-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.od-widget ul ul { margin-top: 10px; padding-left: 14px; border-left: 1px solid var(--od-line); }
.od-widget li a { color: var(--od-text-soft); font-size: 0.92rem; }
.od-widget li a:hover { color: var(--od-gold); }

.od-widget .tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.od-widget .tagcloud a {
	font-size: 0.76rem !important;
	padding: 6px 13px;
	border-radius: var(--od-radius-pill);
	border: 1px solid var(--od-line);
	background: var(--od-surface-2);
	color: var(--od-text-soft);
}
.od-widget .tagcloud a:hover { background: var(--od-gold); color: #1a0d17; border-color: var(--od-gold); }

/* --------------------------------------------------------------------------
   25. Pagination
   -------------------------------------------------------------------------- */
.od-pagination { margin-top: 44px; }

.od-pagination .page-numbers,
.od-pagination .nav-links > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: var(--od-radius);
	border: 1px solid var(--od-line-soft);
	background: var(--od-surface);
	color: var(--od-text-soft);
	font-size: 0.9rem;
	margin: 0 4px 8px 0;
	transition: all var(--od-fast);
}

.od-pagination .page-numbers:hover,
.od-pagination .page-numbers.current {
	background: var(--od-gold-grad);
	border-color: transparent;
	color: #1a0d17;
	font-weight: 600;
}

.od-pagination .page-numbers.dots { background: none; border-color: transparent; }

.od-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 34px;
}

.od-postnav a {
	display: block;
	padding: 20px 24px;
	border-radius: var(--od-radius-lg);
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	transition: all var(--od-fast);
}

.od-postnav a:hover { border-color: var(--od-gold); transform: translateY(-3px); }
.od-postnav small { display: block; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--od-gold); margin-bottom: 6px; }
.od-postnav strong { color: var(--od-text); font-family: var(--od-font-head); font-weight: 500; font-size: 1.05rem; }
.od-postnav .next { text-align: right; }

/* --------------------------------------------------------------------------
   26. Comments
   -------------------------------------------------------------------------- */
.od-comments { margin-top: 40px; }

.comment-list { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 18px; }
.comment-list .children { list-style: none; padding-left: clamp(16px, 4vw, 48px); margin-top: 18px; display: grid; gap: 18px; }

.comment-body {
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius-lg);
	padding: 22px 24px;
}

.comment-author { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.comment-author img { border-radius: 50%; }
.comment-author .fn { font-style: normal; font-weight: 600; color: var(--od-text); }
.comment-metadata { font-size: 0.76rem; color: var(--od-faint); margin-bottom: 10px; }
.comment-metadata a { color: var(--od-faint); }
.reply a {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--od-gold);
}

.comment-respond {
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius-lg);
	padding: clamp(22px, 4vw, 36px);
}

.comment-form { display: grid; gap: 16px; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.comment-form .comment-form-cookies-consent label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 0.86rem; }

.comment-reply-title { font-size: 1.4rem; }
.comment-reply-title small { font-size: 0.8rem; margin-left: 10px; }

/* --------------------------------------------------------------------------
   27. Auth pages (sign in / sign up)
   -------------------------------------------------------------------------- */
.od-auth {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	min-height: 78vh;
	align-items: stretch;
}

.od-auth__art {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	padding: clamp(28px, 4vw, 60px);
	overflow: hidden;
	border-radius: var(--od-radius-lg);
}

.od-auth__art-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	animation: od-kenburns 22s ease-out forwards;
}

.od-auth__art::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(20, 10, 18, 0.95), rgba(123, 30, 59, 0.35));
}

.od-auth__art-content { max-width: 420px; }
.od-auth__art-content h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.od-auth__art-content p { color: var(--od-text-soft); }

.od-auth__perks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.od-auth__perks li { display: flex; gap: 10px; align-items: center; color: var(--od-text-soft); font-size: 0.9rem; }
.od-auth__perks svg { width: 18px; height: 18px; color: var(--od-gold); flex: none; }

.od-auth__panel {
	padding: clamp(26px, 4vw, 58px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 560px;
	width: 100%;
	margin-inline: auto;
}

.od-auth__tabs {
	display: flex;
	gap: 6px;
	padding: 5px;
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius-pill);
	margin-bottom: 28px;
}

.od-auth__tab {
	flex: 1;
	padding: 12px;
	border: 0;
	border-radius: var(--od-radius-pill);
	background: none;
	color: var(--od-muted);
	font-family: var(--od-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--od-fast);
}

.od-auth__tab.is-active { background: var(--od-gold-grad); color: #1a0d17; }

.od-auth__pane { display: none; }
.od-auth__pane.is-active { display: block; animation: od-fade-in 0.4s var(--od-ease); }

.od-pw-wrap { position: relative; }

.od-pw-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: var(--od-muted);
	cursor: pointer;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
}

.od-pw-toggle:hover { color: var(--od-gold); }

.od-pw-strength { height: 4px; border-radius: 99px; background: var(--od-surface-2); margin-top: 8px; overflow: hidden; }
.od-pw-strength i { display: block; height: 100%; width: 0; border-radius: 99px; transition: all 0.35s var(--od-ease); }
.od-pw-strength[data-level="1"] i { width: 25%; background: var(--od-error); }
.od-pw-strength[data-level="2"] i { width: 50%; background: var(--od-warn); }
.od-pw-strength[data-level="3"] i { width: 75%; background: var(--od-marigold); }
.od-pw-strength[data-level="4"] i { width: 100%; background: var(--od-success); }

.od-divider-or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 24px 0;
	color: var(--od-faint);
	font-size: 0.74rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.od-divider-or::before,
.od-divider-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--od-line-soft);
}

/* --------------------------------------------------------------------------
   28. Toast notifications
   -------------------------------------------------------------------------- */
.od-toasts {
	position: fixed;
	bottom: 22px;
	right: 22px;
	z-index: 200;
	display: grid;
	gap: 10px;
	max-width: min(360px, calc(100vw - 32px));
	pointer-events: none;
}

.od-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: var(--od-radius);
	background: var(--od-surface-2);
	border: 1px solid var(--od-line);
	border-left: 3px solid var(--od-gold);
	box-shadow: var(--od-shadow);
	color: var(--od-text);
	font-size: 0.9rem;
	animation: od-toast-in 0.4s var(--od-ease);
	pointer-events: auto;
}

.od-toast--success { border-left-color: var(--od-success); }
.od-toast--error { border-left-color: var(--od-error); }
.od-toast svg { width: 20px; height: 20px; flex: none; color: var(--od-gold); }
.od-toast--success svg { color: var(--od-success); }
.od-toast--error svg { color: var(--od-error); }
.od-toast.is-out { animation: od-toast-out 0.34s var(--od-ease) forwards; }

@keyframes od-toast-in {
	from { opacity: 0; transform: translateX(40px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes od-toast-out {
	to { opacity: 0; transform: translateX(40px); }
}

/* --------------------------------------------------------------------------
   29. Modal (quick view / size guide)
   -------------------------------------------------------------------------- */
.od-modal {
	position: fixed;
	inset: 0;
	z-index: 140;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--od-ease), visibility 0.3s;
}

.od-modal.is-open { opacity: 1; visibility: visible; }

.od-modal__box {
	position: relative;
	width: min(980px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--od-bg-alt);
	border: 1px solid var(--od-line);
	border-radius: var(--od-radius-lg);
	box-shadow: var(--od-shadow);
	transform: translateY(24px) scale(0.98);
	transition: transform 0.42s var(--od-ease);
	z-index: 2;
}

.od-modal.is-open .od-modal__box { transform: translateY(0) scale(1); }

.od-modal__close { position: absolute; top: 14px; right: 14px; z-index: 5; }

.od-modal__loading { padding: 80px; display: grid; place-items: center; }

.od-spinner {
	width: 34px;
	height: 34px;
	border: 2px solid var(--od-surface-3);
	border-top-color: var(--od-gold);
	border-radius: 50%;
	animation: od-spin 0.8s linear infinite;
}

/* --------------------------------------------------------------------------
   29b. Page-builder content
   -------------------------------------------------------------------------- */

/* Elementor manages its own section widths, so the theme adds no container
   and no card here — only a floor for the dark palette. */
.od-elementor-content {
	width: 100%;
	background-color: var(--od-bg);
}

.od-elementor-content > .elementor {
	color: var(--od-text);
}

/* --------------------------------------------------------------------------
   30. Misc utility
   -------------------------------------------------------------------------- */
.od-reveal { opacity: 0; transform: translateY(28px); }
.od-reveal.is-in { opacity: 1; transform: none; transition: opacity 0.75s var(--od-ease), transform 0.75s var(--od-ease); }

.od-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 90;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: all 0.34s var(--od-ease);
}

.od-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

.od-text-gold { color: var(--od-gold); }
.od-text-center { text-align: center; }
.od-mt-0 { margin-top: 0; }
.od-mb-0 { margin-bottom: 0; }
.od-hide { display: none !important; }

.od-scroll-x {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 10px;
}

.od-scroll-x > * { flex: none; scroll-snap-align: start; }

/* WP admin bar offset */
body.admin-bar .od-header { top: 32px; }
body.admin-bar .od-panel,
body.admin-bar .od-drawer { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .od-header { top: 46px; }
	body.admin-bar .od-panel,
	body.admin-bar .od-drawer { top: 46px; }
}

/* --------------------------------------------------------------------------
   31. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.od-footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
	.od-footer__col--contact { grid-column: span 2; }
	.od-gram { grid-template-columns: repeat(4, 1fr); }
	.od-nav a { padding: 12px 11px; font-size: 0.74rem; }
	.od-nav > ul > li > a::after { left: 11px; right: 11px; }
}

@media (max-width: 1024px) {
	:root { --od-header-h: 72px; }

	.od-nav { display: none; }
	.od-burger { display: inline-flex; }
	/* Two columns once the nav is gone, so the actions stay hard right. */
	.od-header__inner { grid-template-columns: minmax(0, 1fr) auto; }
	.od-header__actions { gap: 6px; }

	.od-layout { grid-template-columns: minmax(0, 1fr); }
	.od-sidebar { position: static; }

	.od-cats { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; }
	.od-cat--w2, .od-cat--w3 { grid-column: span 2; }
	.od-cat--w4, .od-cat--w6 { grid-column: span 4; }

	.od-usp__grid { grid-template-columns: repeat(2, 1fr); }
	.od-quotes { grid-template-columns: 1fr; }
	/*
	 * Below a laptop the two-by-two block plus four tiles is simply too tall —
	 * five portrait shots two-across ran to nearly two thousand pixels. Four
	 * equal tiles in a two-by-two fill the grid exactly and keep the section
	 * to about one screen.
	 */
	.od-look { grid-template-columns: repeat(4, 1fr); }
	.od-look__cell { aspect-ratio: 4 / 5; }

	.od-look__cell:nth-child(1) {
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 4 / 5;
	}

	.od-look__cell:nth-child(n + 5) { display: none; }
	.od-auth { grid-template-columns: 1fr; }
	.od-auth__art { min-height: 260px; border-radius: 0; }
	.od-band { background-attachment: scroll; }
}

@media (max-width: 782px) {
	.od-topbar__links { display: none; }
	.od-footer__top { grid-template-columns: 1fr 1fr; }
	.od-footer__col--about { grid-column: span 2; }
	.od-footer__col--contact { grid-column: span 2; }
	.od-postnav { grid-template-columns: 1fr; }
	.od-newsletter__form { flex-direction: column; }
	.od-grid--4, .od-grid--3, .od-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	:root { --od-gutter: 16px; }

	body { font-size: 15px; }

	/* Compare and wishlist move to the drawer at phone width — five icons
	   plus the brand do not fit, and the brand is what must stay legible. */
	.od-header__actions .od-header-action--secondary { display: none; }
	.od-header__actions { gap: 4px; }
	.od-header__left { gap: 4px !important; }

	.od-brand__mark { width: 38px; height: 38px; font-size: 1.1rem; }
	.od-brand__name { font-size: 1.16rem; }
	.od-brand__tag { font-size: 0.5rem; letter-spacing: 0.28em; }
	.od-icon-btn { width: 38px; height: 38px; }
	.od-icon-btn svg { width: 17px; height: 17px; }

	.od-hero__slide { min-height: 74vh; }
	.od-hero__nav { display: none; }
	.od-hero__content { padding-block: 44px; }
	.od-hero__slide,
	.od-hero__slide--right { text-align: center; justify-content: center; }
	.od-hero__slide--right .od-hero__cta,
	.od-hero__cta { justify-content: center; }
	.od-hero__eyebrow { justify-content: center; }
	.od-hero__text { margin-inline: auto; }
	.od-hero__slide::after,
	.od-hero__slide--right::after {
		background: linear-gradient(0deg, rgba(20, 10, 18, 0.96) 12%, rgba(20, 10, 18, 0.62) 70%);
	}

	.od-cats { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 168px; }
	.od-cat--w2, .od-cat--w3 { grid-column: span 1; }
	.od-cat--w4, .od-cat--w6 { grid-column: span 2; }

	.od-usp__grid { grid-template-columns: 1fr; }
	.od-gram { grid-template-columns: repeat(3, 1fr); }
	/* Two across on a phone — four across would be thumbnails. */
	.od-look { grid-template-columns: repeat(2, 1fr); gap: 10px; }

	.od-look__tag {
		left: 8px;
		bottom: 8px;
		padding: 5px 10px;
		font-size: 0.6rem;
		letter-spacing: 0.1em;
	}

	.od-footer__top { grid-template-columns: 1fr; }
	.od-footer__col--about,
	.od-footer__col--contact { grid-column: span 1; }
	.od-footer__bottom { justify-content: center; text-align: center; }

	.od-toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; }
	.od-btn { padding: 13px 24px; }
	.od-btn--lg { padding: 15px 30px; font-size: 0.8rem; }

	.od-grid--4, .od-grid--3, .od-grid--5, .od-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.od-quote { padding: 24px 20px; }
}

@media (max-width: 400px) {
	.od-brand__tag { display: none; }
}

/* --------------------------------------------------------------------------
   32. Form field hardening
   Elementor's Site Settings → Theme Style → Form Fields emits
   `.elementor-kit-N input:not([type="button"]):not([type="submit"])` — a
   0,3,1 selector loaded after the theme, so it beats the plain
   `input[type="text"]` rule in section 7 and repaints every field white.
   It sets only background and colour, which is why padding and labels still
   looked themed while the boxes went white.

   These declarations are marked important so the dark fields survive any
   builder or plugin "theme style" layer. Scope is deliberately limited to
   real form controls, and the focus and validation states below are marked
   the same way so they keep working.
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
	background-color: var(--od-surface) !important;
	color: var(--od-text) !important;
	border-color: var(--od-line-soft) !important;
	border-style: solid !important;
	border-width: 1px !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	background-color: var(--od-surface-2) !important;
	border-color: var(--od-gold) !important;
}

input::placeholder,
textarea::placeholder,
.woocommerce form .form-row input.input-text::placeholder {
	color: var(--od-faint) !important;
	opacity: 1;
}

/* Woo's own validation colours have to survive the important above. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection--single {
	border-color: var(--od-error) !important;
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated .select2-container .select2-selection--single {
	border-color: var(--od-success) !important;
}

/* The country / state pickers are select2, not native selects. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-search--dropdown .select2-search__field {
	background-color: var(--od-surface) !important;
	border-color: var(--od-line-soft) !important;
	color: var(--od-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--od-text) !important;
}

.select2-dropdown,
.select2-container--default .select2-results > .select2-results__options {
	background-color: var(--od-surface-2) !important;
	border-color: var(--od-line) !important;
	color: var(--od-text) !important;
}

.select2-container--default .select2-results__option {
	background-color: transparent !important;
	color: var(--od-text-soft) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: var(--od-gold) !important;
	color: #1a0d17 !important;
}

/* Buttons must not be caught by the input rule above. */
input[type="submit"],
input[type="button"],
input[type="reset"] {
	background-color: transparent;
	color: inherit;
}

/* --------------------------------------------------------------------------
   33. Policy / legal documents
   -------------------------------------------------------------------------- */
.od-legal-highlights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	margin-bottom: clamp(26px, 4vw, 42px);
}

.od-legal-highlight {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 22px;
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius-lg);
	min-width: 0;
}

.od-legal-highlight svg { color: var(--od-gold); flex: none; margin-top: 2px; }
.od-legal-highlight strong { display: block; font-size: 0.98rem; color: var(--od-text); margin-bottom: 2px; }
.od-legal-highlight span { font-size: 0.85rem; color: var(--od-muted); line-height: 1.5; }

.od-legal {
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius-lg);
	padding: clamp(24px, 4vw, 52px);
}

.od-legal__updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px;
	border-radius: var(--od-radius-pill);
	background: var(--od-surface-2);
	border: 1px solid var(--od-line);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--od-muted);
	margin-bottom: 28px;
}

.od-legal__updated svg { color: var(--od-gold); }

/* Long-form reading measure and rhythm. */
.od-legal__body {
	color: var(--od-text-soft);
	font-size: 1.005rem;
	line-height: 1.8;
	max-width: 72ch;
}

.od-legal__body > p:first-child {
	font-size: 1.09rem;
	color: var(--od-text);
	padding-bottom: 22px;
	border-bottom: 1px solid var(--od-line-soft);
}

.od-legal__body h2 {
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	margin: 2.1em 0 0.7em;
	padding-top: 0.4em;
	color: var(--od-text);
	scroll-margin-top: calc(var(--od-header-h) + 24px);
	position: relative;
}

.od-legal__body h2::before {
	content: "";
	position: absolute;
	left: -18px;
	top: 1.15em;
	width: 8px;
	height: 1px;
	background: var(--od-gold);
}

.od-legal__body h3 { font-size: 1.1rem; margin: 1.6em 0 0.5em; }

.od-legal__body ul,
.od-legal__body ol { padding-left: 1.3em; margin-bottom: 1.3em; }
.od-legal__body li { margin-bottom: 0.55em; }
.od-legal__body li::marker { color: var(--od-gold); }
.od-legal__body strong { color: var(--od-text); }
.od-legal__body a { border-bottom: 1px solid rgba(217, 164, 65, 0.4); }
.od-legal__body a:hover { border-bottom-color: var(--od-gold); }

.od-legal__foot {
	margin-top: clamp(32px, 5vw, 52px);
	padding-top: 28px;
	border-top: 1px solid var(--od-line);
}

.od-legal__foot h3 { font-size: 1.2rem; margin-bottom: 8px; }
.od-legal__foot p { color: var(--od-muted); max-width: 60ch; }

.od-legal__foot-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 18px;
}

/* Contents rail */
.od-legal-toc ol {
	list-style: none;
	counter-reset: od-toc;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.od-legal-toc li { counter-increment: od-toc; }

.od-legal-toc a {
	display: flex;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--od-radius);
	color: var(--od-text-soft);
	font-size: 0.88rem;
	line-height: 1.45;
	border-left: 2px solid transparent;
	transition: background var(--od-fast), color var(--od-fast), border-color var(--od-fast);
}

.od-legal-toc a::before {
	content: counter(od-toc);
	color: var(--od-faint);
	font-size: 0.76rem;
	flex: none;
	padding-top: 2px;
	font-variant-numeric: tabular-nums;
}

.od-legal-toc a:hover,
.od-legal-toc a.is-current {
	background: var(--od-surface-2);
	color: var(--od-gold);
	border-left-color: var(--od-gold);
}

.od-legal-toc a.is-current::before { color: var(--od-gold); }

/* Footer policy row */
.od-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	padding-block: 18px;
	border-top: 1px solid var(--od-line-soft);
	font-size: 0.84rem;
}

.od-footer__legal a { color: var(--od-muted); }
.od-footer__legal a:hover { color: var(--od-gold); }

@media (max-width: 600px) {
	.od-legal__body h2::before { display: none; }
	.od-legal__foot-actions .od-btn { width: 100%; }
	.od-footer__legal { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   34. About / our story
   Every colour here comes from the palette tokens, so the page follows the
   Customizer instead of drifting from it the way inline styles did.
   -------------------------------------------------------------------------- */
.od-about__lede {
	max-width: 780px;
	margin: 0 auto clamp(40px, 6vw, 72px);
	text-align: center;
}

.od-about__lede p {
	font-family: var(--od-font-display);
	font-size: clamp(1.25rem, 2.6vw, 1.75rem);
	line-height: 1.6;
	color: var(--od-text);
	font-style: italic;
}

.od-about__lede p + p {
	font-family: var(--od-font-body);
	font-size: 1rem;
	font-style: normal;
	line-height: 1.8;
	color: var(--od-muted);
	margin-top: 20px;
}

/* -- Stats band -- */
.od-about__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--od-line-soft);
	border: 1px solid var(--od-line);
	border-radius: var(--od-radius-lg);
	overflow: hidden;
	margin-bottom: clamp(46px, 7vw, 88px);
}

.od-about__stat {
	background: var(--od-surface);
	padding: clamp(24px, 3vw, 34px) 20px;
	text-align: center;
	min-width: 0;
}

.od-about__stat b {
	display: block;
	font-family: var(--od-font-head);
	font-size: clamp(2rem, 4.4vw, 2.9rem);
	line-height: 1;
	font-weight: 500;
	background: var(--od-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.od-about__stat span {
	display: block;
	margin-top: 10px;
	font-size: 0.74rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--od-muted);
	line-height: 1.5;
}

/* -- Story split -- */
.od-about__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 68px);
	align-items: center;
	margin-bottom: clamp(46px, 7vw, 88px);
}

.od-about__split--flip .od-about__media { order: 2; }

.od-about__media {
	position: relative;
	border-radius: var(--od-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border: 1px solid var(--od-line);
	background:
		radial-gradient(600px 400px at 70% 20%, rgba(123, 30, 59, 0.5), transparent 65%),
		radial-gradient(500px 380px at 20% 80%, rgba(23, 86, 95, 0.42), transparent 62%),
		var(--od-surface-2);
}

.od-about__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A gold rule that sits behind the image, like a mount. */
.od-about__media::after {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(217, 164, 65, 0.28);
	border-radius: calc(var(--od-radius-lg) - 6px);
	pointer-events: none;
}

.od-about__text h2 {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	margin-bottom: 18px;
}

.od-about__text h2 em {
	font-style: italic;
	font-family: var(--od-font-display);
	background: var(--od-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.od-about__text p {
	color: var(--od-text-soft);
	line-height: 1.85;
}

.od-about__signature {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--od-line-soft);
	font-family: var(--od-font-display);
	font-size: 1.1rem;
	font-style: italic;
	color: var(--od-gold);
}

.od-about__signature span {
	display: block;
	font-family: var(--od-font-body);
	font-style: normal;
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--od-muted);
	margin-top: 6px;
}

/* -- Weaving clusters -- */
/* Fixed three across so six clusters make two clean rows rather than five
   and an orphan, which is what auto-fit produced at this container width. */
.od-about__clusters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.od-cluster {
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius-lg);
	padding: 26px 24px;
	transition: transform var(--od-fast), border-color var(--od-fast);
	min-width: 0;
}

.od-cluster:hover { transform: translateY(-4px); border-color: var(--od-line); }

.od-cluster__place {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--od-gold);
	margin-bottom: 10px;
}

.od-cluster__place svg { width: 15px; height: 15px; flex: none; }

.od-cluster h3 {
	font-size: 1.15rem;
	margin-bottom: 8px;
}

.od-cluster p {
	color: var(--od-muted);
	font-size: 0.92rem;
	margin: 0;
	line-height: 1.7;
}

/* -- Values -- */
.od-about__values {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.od-value {
	background: var(--od-surface);
	border: 1px solid var(--od-line-soft);
	border-radius: var(--od-radius-lg);
	padding: 30px 28px;
	min-width: 0;
}

.od-value__icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid var(--od-line);
	background: rgba(217, 164, 65, 0.08);
	color: var(--od-gold);
	margin-bottom: 18px;
}

.od-value h3 { font-size: 1.18rem; margin-bottom: 10px; }
.od-value p { color: var(--od-muted); margin: 0; line-height: 1.75; font-size: 0.95rem; }

/* -- How a piece reaches you -- */
.od-about__steps {
	counter-reset: od-step;
	display: grid;
	gap: 0;
	max-width: 780px;
	margin-inline: auto;
}

.od-step-row {
	counter-increment: od-step;
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 22px;
	padding-bottom: 34px;
	position: relative;
}

.od-step-row:last-child { padding-bottom: 0; }

/* The line joining the markers. */
.od-step-row:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 30px;
	top: 54px;
	bottom: 6px;
	width: 1px;
	background: linear-gradient(180deg, var(--od-line), transparent);
}

.od-step-row__num {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--od-surface);
	border: 1px solid var(--od-line);
	font-family: var(--od-font-head);
	font-size: 1.3rem;
	color: var(--od-gold);
	position: relative;
	z-index: 1;
}

.od-step-row__num::before { content: counter(od-step, decimal-leading-zero); }

.od-step-row h3 { font-size: 1.15rem; margin: 14px 0 8px; }
.od-step-row p { color: var(--od-muted); margin: 0; line-height: 1.75; }

/* -- Closing call to action -- */
.od-about__cta {
	text-align: center;
	background:
		radial-gradient(700px 320px at 50% 0%, rgba(217, 164, 65, 0.14), transparent 70%),
		var(--od-surface);
	border: 1px solid var(--od-line);
	border-radius: var(--od-radius-lg);
	padding: clamp(34px, 6vw, 62px) clamp(20px, 4vw, 48px);
}

.od-about__cta h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); margin-bottom: 12px; }
.od-about__cta p { color: var(--od-muted); max-width: 540px; margin: 0 auto 26px; }

.od-about__cta-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 1024px) {
	.od-about__values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.od-about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.od-about__clusters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	.od-about__split { grid-template-columns: minmax(0, 1fr); }
	.od-about__split--flip .od-about__media { order: 0; }
	.od-about__media { aspect-ratio: 3 / 2; }
}

@media (max-width: 600px) {
	.od-about__clusters,
	.od-about__values { grid-template-columns: minmax(0, 1fr); }
	.od-step-row { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; }
	.od-step-row__num { width: 44px; height: 44px; font-size: 1.05rem; }
	.od-step-row:not(:last-child)::before { left: 22px; top: 40px; }
	.od-about__cta-actions .od-btn { width: 100%; }
}