/*
 * JEX Design — grund
 *
 * Designen utgår från en juvelerarmonter: mörk, varm omgivning där
 * produkten ligger på en ljus platta. Bakgrunden är medvetet inte svart
 * (#000) utan en varm kolton — svart är hårt och får silver att se grått
 * ut, medan en varm mörk ton får metall att lysa.
 *
 * Alla färger och mått är variabler. Byter kunden profil ändras de här,
 * inte hundra ställen i koden.
 */

:root {
	/* Botten och ytor, mörkast först */
	--jex-bg:          #15130F;
	--jex-bg-soft:     #1C1915;
	--jex-bg-raised:   #242019;

	/* Produktplattan. Ljus, så vanliga vita produktfoton fungerar utan
	   omfotografering — bilden smälter in i plattan i stället för att
	   skära mot den mörka sidan. */
	--jex-plate:       #F4F1EA;
	--jex-plate-warm:  #EDE8DE;

	/* Text */
	--jex-text:        #F2EDE3;
	--jex-text-dim:    #A9A091;
	--jex-text-faint:  #6E675C;
	--jex-text-plate:  #1A1713;

	/* Accent: dämpad champagne. Lutar mot mässing snarare än guld, som
	   värmemotvikt till det kalla silvret i produktbilderna. Används
	   sparsamt — understrykning, aktiv variant, pris i kassan. */
	--jex-accent:      #C9A96A;
	--jex-accent-dim:  #9C8352;
	--jex-accent-veil: rgba(201, 169, 106, 0.14);

	/* Linjer */
	--jex-line:        #302A22;
	--jex-line-soft:   #241F19;
	--jex-line-plate:  #DCD5C8;

	/* Status */
	--jex-sale:        #C98A6A;
	--jex-ok:          #7E9A74;
	--jex-error:       #C86B5E;

	/* Typsnitt */
	--jex-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--jex-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Fluid typskala — clamp() gör att rubriker krymper mjukt ner till
	   mobil utan brytpunkter. Minvärdet är satt så att inget blir
	   oläsbart på 360px. */
	--jex-step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
	--jex-step-0:  clamp(0.94rem, 0.91rem + 0.14vw, 1.02rem);
	--jex-step-1:  clamp(1.12rem, 1.05rem + 0.34vw, 1.34rem);
	--jex-step-2:  clamp(1.40rem, 1.24rem + 0.78vw, 1.95rem);
	--jex-step-3:  clamp(1.85rem, 1.52rem + 1.62vw, 2.95rem);
	--jex-step-4:  clamp(2.35rem, 1.75rem + 2.95vw, 4.35rem);
	--jex-step-5:  clamp(2.90rem, 1.90rem + 4.90vw, 6.20rem);

	/* Avstånd */
	--jex-space-3xs: 0.25rem;
	--jex-space-2xs: 0.5rem;
	--jex-space-xs:  0.75rem;
	--jex-space-s:   1rem;
	--jex-space-m:   1.5rem;
	--jex-space-l:   2.25rem;
	--jex-space-xl:  3.5rem;
	--jex-space-2xl: clamp(3.5rem, 2.4rem + 5.4vw, 7rem);
	--jex-space-3xl: clamp(5rem, 3.2rem + 8.8vw, 11rem);

	/* Mått */
	--jex-max:        1440px;
	--jex-max-text:   68ch;
	--jex-gutter:     clamp(1.15rem, 0.6rem + 2.7vw, 3.5rem);
	/* Höjden rymmer logotyp plus slogan på två rader utan att kännas trång. */
	--jex-header-h:   clamp(72px, 6vw, 104px);

	/* Rörelse. Lyx rör sig långsamt och utan studs. */
	--jex-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
	--jex-fast:       180ms var(--jex-ease);
	--jex-slow:       520ms var(--jex-ease);

	/* Inga rundade hörn. Skarpa kanter läser som dyrare. */
	--jex-radius:     0px;

	--jex-z-header:   100;
	--jex-z-overlay:  200;
	--jex-z-drawer:   300;
}

/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--jex-bg);
	color: var(--jex-text);
	font-family: var(--jex-sans);
	font-size: var(--jex-step-0);
	font-weight: 400;
	line-height: 1.68;
	letter-spacing: 0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Låser rullningen när menyn eller varukorgen är öppen, utan att sidan
   hoppar till toppen. */
body.jex-locked {
	overflow: hidden;
}

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

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

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

/* --------------------------------------------------------------- rubriker */

h1, h2, h3, h4 {
	font-family: var(--jex-serif);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.012em;
	margin: 0 0 var(--jex-space-m);
	text-wrap: balance;
}

h1 { font-size: var(--jex-step-4); }
h2 { font-size: var(--jex-step-3); }
h3 { font-size: var(--jex-step-2); }
h4 { font-size: var(--jex-step-1); font-family: var(--jex-sans); font-weight: 500; letter-spacing: 0; }

p { margin: 0 0 var(--jex-space-m); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Spärrad versalsättning för etiketter, navigation och knappar. Det är
   detaljen som mer än något annat skiljer en exklusiv sajt från en
   vanlig webbutik. */
.jex-eyebrow,
.jex-label {
	font-family: var(--jex-sans);
	font-size: var(--jex-step--1);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	line-height: 1.4;
	color: var(--jex-text-dim);
	margin: 0 0 var(--jex-space-s);
}

.jex-eyebrow--accent { color: var(--jex-accent); }

/* Kursiv serif för korta, personliga rader — smedjan, signaturen. */
.jex-script {
	font-family: var(--jex-serif);
	font-style: italic;
	font-weight: 300;
	font-size: var(--jex-step-2);
	line-height: 1.3;
	color: var(--jex-text-dim);
}

/* -------------------------------------------------------------- struktur */

.jex-wrap {
	width: 100%;
	max-width: var(--jex-max);
	margin-inline: auto;
	padding-inline: var(--jex-gutter);
}

.jex-wrap--narrow { max-width: 900px; }
.jex-wrap--text   { max-width: var(--jex-max-text); }

.jex-section { padding-block: var(--jex-space-2xl); }
.jex-section--tight { padding-block: var(--jex-space-xl); }
.jex-section--soft  { background: var(--jex-bg-soft); }

/* Hårfin avdelare. 1px ren linje ser billig ut på mörk botten, så den
   tonar ut mot kanterna. */
.jex-rule {
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(90deg,
		transparent, var(--jex-line) 18%, var(--jex-line) 82%, transparent);
}

/* ---------------------------------------------------- tillgänglighet */

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.jex-skip {
	position: absolute;
	top: -100px;
	left: var(--jex-space-s);
	z-index: 999;
	background: var(--jex-accent);
	color: var(--jex-text-plate);
	padding: var(--jex-space-xs) var(--jex-space-m);
	font-size: var(--jex-step--1);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	transition: top var(--jex-fast);
}
.jex-skip:focus { top: var(--jex-space-s); }

/* Synlig fokusmarkering — krav för tangentbordsnavigering, och den ska
   synas mot både mörk botten och ljus produktplatta. */
:focus-visible {
	outline: 2px solid var(--jex-accent);
	outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Respekterar den som bett systemet om mindre rörelse. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Utskrift: mörk bakgrund slukar bläck. */
@media print {
	body { background: #fff; color: #000; }
	.jex-header, .jex-footer, .jex-drawer, .jex-overlay { display: none !important; }
}