/**
 * DEYZA base layer. Consumes assets/css/tokens.css (generated).
 * Blocks carry their own styles; this file is only what every page shares.
 */

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

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

body {
	margin: 0;
	background: var(--dz-cream);
	color: var(--dz-ink);
	font-family: var(--dz-font-display);
	font-size: var(--dz-size-body-sm);
	line-height: 1.55;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
@media (min-width: 768px) { body { font-size: var(--dz-size-body); } }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote { margin: 0; }
/* :where() keeps this at zero specificity. As `ul[role="list"]` it scored (0,1,1) and
   silently beat every single-class rule such as `.dz-pdp__trust { padding: ... }`. */
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--dz-coral); color: var(--dz-ink); }

/* The block editor's flow spacing has no place between full-bleed sections. */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks { padding: 0; }

/* Headings inherit colour so they work on coral and emerald bands alike. */
h1, h2, h3, h4 {
	color: inherit;
	font-family: var(--dz-font-display);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
p { text-wrap: pretty; }
em, i { font-style: italic; }

/* ---- Layout ------------------------------------------------------------- */
/* Essenza: sections carry ZERO horizontal padding so colour reaches the edge;
   the inset lives on the inner container only. */
.dz-container {
	width: 100%;
	max-width: var(--dz-layout-max);
	margin-inline: auto;
	padding-inline: var(--dz-layout-gutter);
}
.dz-container--wide { max-width: var(--dz-layout-wide); }
.dz-measure { max-width: var(--dz-layout-measure); }

/* Essenza: vertical padding is top-heavy, roughly 2:1. */
.dz-section {
	position: relative;
	padding: var(--dz-layout-section-top) 0 var(--dz-layout-section-bottom);
}
.dz-band {
	position: relative;
	padding: var(--dz-layout-band-top) 0 var(--dz-layout-band-bottom);
}
.dz-band--coral   { background: var(--dz-coral);   color: var(--dz-ink); }
.dz-band--emerald { background: var(--dz-emerald); color: var(--dz-cream); }
.dz-band--blush   { background: var(--dz-blush);   color: var(--dz-ink); }

/* ---- Type helpers ------------------------------------------------------- */
.dz-eyebrow {
	font-family: var(--dz-font-ui);
	font-size: var(--dz-size-eyebrow);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--dz-emerald);
}
.dz-on-dark .dz-eyebrow, .dz-band--emerald .dz-eyebrow { color: var(--dz-marigold); }
.dz-band--coral .dz-eyebrow { color: var(--dz-ink); }

.dz-display { font-size: var(--dz-size-h2); }
@media (min-width: 768px) { .dz-display { font-size: var(--dz-size-display); } }
.dz-lead { font-size: var(--dz-size-body-sm); line-height: 1.5; }
@media (min-width: 768px) { .dz-lead { font-size: var(--dz-size-lead); } }
.dz-ui { font-family: var(--dz-font-ui); font-size: var(--dz-size-ui); line-height: 1.5; }
.dz-muted { color: var(--dz-ink-muted); }

/* ---- Buttons ------------------------------------------------------------ */
.dz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3.25rem;
	padding: 0.75rem 2rem;
	border: 1.5px solid transparent;
	border-radius: var(--dz-radius-pill);
	font-family: var(--dz-font-ui);
	font-size: var(--dz-size-button);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color var(--dz-motion-dur-2) var(--dz-motion-ease),
		color var(--dz-motion-dur-2) var(--dz-motion-ease),
		border-color var(--dz-motion-dur-2) var(--dz-motion-ease),
		transform var(--dz-motion-dur-2) var(--dz-motion-ease);
}
.dz-btn .dz-icon { width: 1.125rem; height: 1.125rem; transition: transform var(--dz-motion-dur-2) var(--dz-motion-ease); }
.dz-btn:hover .dz-icon { transform: translateX(3px); }


.dz-btn--primary { background: var(--dz-emerald); color: var(--dz-cream); }
.dz-btn--primary:hover { background: var(--dz-emerald-deep); }
.dz-btn--ghost { border-color: var(--dz-line-strong); color: var(--dz-ink); background: transparent; }
.dz-btn--ghost:hover { border-color: var(--dz-ink); background: var(--dz-ink); color: var(--dz-cream); }
.dz-btn--ink { background: var(--dz-ink); color: var(--dz-cream); }
.dz-btn--ink:hover { background: var(--dz-emerald-deep); }
.dz-btn--cream { background: var(--dz-cream); color: var(--dz-emerald); }
.dz-btn--cream:hover { background: var(--dz-marigold); color: var(--dz-ink); }

.dz-link {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: var(--dz-font-ui); font-size: var(--dz-size-button); font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
	padding-block: 0.375rem; border-bottom: 1.5px solid currentColor;
}
.dz-link .dz-icon { width: 1rem; height: 1rem; transition: transform var(--dz-motion-dur-2) var(--dz-motion-ease); }
.dz-link:hover .dz-icon { transform: translateX(4px); }

/* ---- The arch: DEYZA's signature frame ---------------------------------- */
.dz-arch { border-radius: var(--dz-radius-arch); overflow: hidden; background: var(--dz-blush); }
.dz-arch img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Focus + a11y ------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--dz-emerald); outline-offset: 3px; border-radius: 2px; }
.dz-on-dark :focus-visible, .dz-band--emerald :focus-visible { outline-color: var(--dz-marigold); }
.dz-band--coral :focus-visible { outline-color: var(--dz-ink); }

.screen-reader-text, .dz-sr {
	/* Every property is !important: a component rule such as `select { width: 100% }`
	   must never be able to un-hide a visually hidden control. */
	position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
	padding: 0 !important; margin: -1px !important; overflow: hidden !important;
	clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
.dz-skip { position: absolute; left: 1rem; top: -4rem; z-index: 1000; }
.dz-skip:focus { top: 1rem; }

@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; }
}

/* ---- Commerce section heading: small, centred, one-line sub -------------- */
.dz-head { display: grid; gap: 0.375rem; justify-items: center; text-align: center; margin-bottom: var(--dz-space-lg); }
.dz-head__title { font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em; }
.dz-head__title em { color: var(--dz-coral-display); }
.dz-head__sub { font-family: var(--dz-font-ui); font-size: var(--dz-size-ui); color: var(--dz-ink-muted); }
@media (min-width: 768px) { .dz-head { margin-bottom: var(--dz-space-xl); } .dz-head__title { font-size: 2.25rem; } }

/* ==========================================================================
   Surfaces + the DEYZA pattern
   One flat cream sheet made the whole site read as empty. Sections now sit on
   distinct surfaces, and the octagon-and-star lattice is the brand texture.
   ========================================================================== */
.dz-surface--white   { background: var(--dz-white); }
.dz-surface--blush   { background: var(--dz-blush); }
.dz-surface--soft    { background: var(--dz-emerald-soft); }
.dz-surface--deep    { background: var(--dz-cream-deep); }

/* The lattice is drawn by a pseudo-element so its opacity is independent of the
   content, and masked so it fades out instead of ending on a hard edge. */
.dz-pattern { position: relative; isolation: isolate; }
.dz-pattern::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: url('../img/pattern/star-emerald.svg') 0 0 / 120px 120px;
	opacity: 0.09;
}
.dz-pattern--cream::before { background-image: url('../img/pattern/star-cream.svg'); opacity: 0.11; }
.dz-pattern--ink::before   { background-image: url('../img/pattern/star-ink.svg'); opacity: 0.10; }
.dz-pattern--fade-r::before { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.dz-pattern--fade-l::before { -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 55%); mask-image: linear-gradient(270deg, transparent 0%, #000 55%); }
.dz-pattern--fade-b::before { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.dz-pattern--edges::before  { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%); }

/* A slim band of the lattice, used as a section divider. */
.dz-rule { height: 1.75rem; background: url('../img/pattern/star-emerald.svg') center / 60px 60px repeat-x; opacity: 0.22; }

/* ---- Details from the design skills, with their exact values ------------- */
/* Image outline: pure black at 10%, never a tinted neutral, so mixed photographs
   share one consistent edge instead of bleeding into the page. */
.dz-card__media, .dz-mood__tile, .dz-mega__frame, .dz-cats__frame, .dz-pdp__shot, .dz-promo__strip img, .dz-mosaic__tile, .dz-recent img, .dz-arch {
	outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px;
}
/* Press feedback: exactly scale(0.96), 160ms, strong ease-out. */
.dz-btn, .dz-chip, .dz-sizes__chip, .dz-tabs__tab, .dz-header__trigger, button.single_add_to_cart_button {
	transition-property: background-color, color, border-color, transform;
	transition-duration: var(--dz-motion-dur-press);
	transition-timing-function: var(--dz-motion-ease-out);
}
.dz-btn:active, .dz-chip:active, .dz-sizes__chip:active, .dz-tabs__tab:active, button.single_add_to_cart_button:active { transform: scale(0.96); }
/* Icon stroke follows the weight of the text beside it: 1.5 by regular, 2 by semibold. */
.dz-icon { stroke-width: 1.5; }
.dz-btn .dz-icon, .dz-link .dz-icon, .dz-eyebrow .dz-icon, button .dz-icon { stroke-width: 2; }
/* Hover motion only where there is a real hover: touch fires :hover on tap. */
@media (hover: none), (pointer: coarse) {
	.dz-card__media img, .dz-mood__tile img, .dz-mega__frame img, .dz-cats__frame img, .dz-mosaic__tile img { transform: none !important; }
}