/* ODDAKL brand foundation: tokens, typography, small utilities, WhatsApp button.
   Black and white with a thin gold accent (about 10% of the page); one typeface, Jost.
   Approved in the six layout mockups, 20-22 Oct 2026.

   Gold has two shades: #C9A24B is decoration only (hairlines, the nav underline, stars, a label on
   black); on a white page, gold TEXT uses the deep shade #8A6A1F (5:1 contrast, passes WCAG AA).

   The --hj-* and --nl-* names are kept from the theme this one started from, so every component file
   and the plugin bridges below keep working; only the values are ODDAKL's. The "rose / wine /
   mulberry" names all resolve to black here, so older rules recolour without being rewritten. */

:root {
	/* brand colours */
	--nl-gold: #C9A24B;       /* decoration: hairline, underline, star, label on black */
	--nl-gold-deep: #8A6A1F;  /* gold text on white (5.0:1) */
	--nl-blush: #F3F1EC;      /* soft panels */
	--nl-rosegold: #C9A24B;
	--nl-rose: #111111;       /* buttons, links, prices */
	--nl-mulberry: #111111;
	--nl-wine: #111111;       /* announcement bar */
	--nl-listing: #FFFFFF;    /* page background behind product cards */

	/* surfaces */
	--hj-paper: #FFFFFF;
	--hj-ivory: #FAF9F6;
	--hj-sand: #F3F1EC;
	--hj-wash: #F3F1EC;
	--hj-mist: #F6F5F2;
	/* ink */
	--hj-ink: #111111;
	--hj-ink-2: #3A3A3A;
	--hj-muted: #666666;
	--hj-line: #E7E5E0;
	--hj-line-2: #D6D3CC;
	/* accent: gold for decoration, black for anything clickable */
	--hj-accent: #C9A24B;
	--hj-accent-deep: #111111;
	--hj-accent-hover: #2B2B2B;
	--hj-accent-soft: #E9DDBF;
	--hj-accent-light: #F6F0E0;
	--hj-gold: #C9A24B;
	--hj-gold-deep: #8A6A1F;
	/* semantic */
	--hj-sale: #111111;
	--hj-ok: #2F6B4F;
	--hj-flash: #8A6A1F;
	--hj-wa: #1FAF54;
	/* type: one family, with a metric-matched fallback so the text does not jump (assets/fonts.css) */
	--hj-sans: "Jost", "Jost Fallback", "Helvetica Neue", Arial, sans-serif;
	--hj-serif: "Jost", "Jost Fallback", "Helvetica Neue", Arial, sans-serif;
	/* layout */
	--hj-wrap: 1180px;
	--hj-gut: clamp(16px, 3.2vw, 44px);
	--ann-h: 38px;

	/* Elementor + plugin bridges: both read these, so the brand set once drives
	   the theme, Elementor global colours and the plugin chrome. */
	--e-global-color-primary: #111111;
	--e-global-color-secondary: #111111;
	--e-global-color-accent: #C9A24B;
	--e-global-color-text: #3A3A3A;
	--global-palette-btn-bg: #111111;
	--qav-brand-primary: #111111;
	--qav-brand-accent: #C9A24B;

	/* reward points text and accents: deep gold, readable on white */
	--nl-points: #8A6A1F;

	/* buttons: one standard look for the whole site (assets/buttons.css) */
	--nl-btn-bg: #111111;
	--nl-btn-bg-hover: #2B2B2B;
	--nl-btn-text: #FFFFFF;
	--nl-btn-radius: 0;
	--nl-btn-height: 48px;
	--nl-btn-size: 13px;
	--nl-btn-weight: 500;
	--nl-btn-spacing: .16em;
}

@media (max-width: 900px) {
	:root { --ann-h: 34px; }
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hj-sans);
	font-weight: 500;
	color: var(--hj-ink);
	text-wrap: balance;
}

/* Headline, small label and light sub-line from the mockups. */
.nl-h2 {
	margin: 0;
	font-weight: 600;
	font-size: clamp(24px, 2.5vw, 34px);
	line-height: 1.1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hj-ink);
}
.nl-eyebrow {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hj-gold-deep);
}
.nl-sub {
	font-weight: 300;
	font-size: 17px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hj-ink);
}
/* .nl-btn and .nl-btn--ghost: see assets/buttons.css (one button standard for the whole site). */

/* Text for screen readers only. Every size is !important: the parent theme gives form fields
   width:100%, which would otherwise stretch a hidden field across the page and add a sideways scroll. */
.nl-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

.hj-eyebrow {
	font-size: 11.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--hj-gold-deep);
	font-weight: 500;
}

/* Underlined text link used under hero/banner copy. */
.hj-link-u {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 1.5px solid currentColor;
}

a { color: var(--hj-ink); }
a:hover { color: var(--hj-ink); }

:focus-visible {
	outline: 2px solid var(--hj-accent-deep);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- WhatsApp float */
.hj-wa {
	position: fixed;
	right: 20px;
	bottom: 22px;
	z-index: 45;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--hj-wa);
	color: #fff;
	border-radius: 999px;
	padding: 11px 18px 11px 14px;
	font-size: 13.5px;
	font-weight: 500;
	box-shadow: 0 8px 24px rgba(31, 175, 84, .35);
}
.hj-wa:hover { color: #fff; }
.hj-wa svg { flex: none; }

@media (max-width: 900px) {
	/* clear of TSC's phone bottom bar */
	.hj-wa { padding: 0; width: 48px; height: 48px; justify-content: center; right: 14px; bottom: 78px; }
	.hj-wa span { display: none; }
	body.woocommerce-cart .hj-wa,
	body.woocommerce-checkout .hj-wa { bottom: 84px; }
}