/*
 * Sabag 3D Studio — front-end styles.
 *
 * Colours, fonts and sizes come from Sabag → Settings as --sb-* custom properties
 * (printed inline after this file by inc/Setup/GlobalStyles.php). The values below
 * are only fallbacks. Logical properties everywhere: RTL and LTR work unchanged.
 *
 * Shared design-system classes (stable contract — reused by the WooCommerce templates):
 *   Layout   .container(--narrow|--wide) .section(--alt|--dark|--bordered|--flush-top|--tight)
 *            .grid (+ .min-{px} .gap-{px} .ratio-{w}-{h}) .split(--top) .actions
 *   Type     .eyebrow(--sm|--on-dark) .h-display .h-section .h-sub .lede .entry-content .chip .link-arrow
 *   Buttons  .btn + .btn--primary (dark) .btn--accent (gold) .btn--ghost (light outline on dark)
 *            .btn--outline (dark outline on light) .btn--lg .btn--block
 *   Cards    .card .card--link (+ .card__link stretches over the card) .card__media .card__img
 *            .card__body .card__title .card__text .card__meta .card__more .card__note
 *   Badges   .badge .badge--sale .badge--free .badge--dark  (wrap several in .badges)
 *   Forms    .form-grid .field .field__label .field__error .input .checkbox .dropzone
 *            .form-status(--success|--error)  (role="status" / role="alert")
 *   A11y     .screen-reader-text .skip-link .hp-field
 *   Media    a[data-lightbox="group"] → lightbox; .gallery; .specs (dl table)
 */

/* ---------- Tokens (fallbacks) ---------- */
:root {
	--sb-bg: #faf8f5;
	--sb-surface: #fff;
	--sb-surface-alt: #f0ebe3;
	--sb-text: #1a1917;
	--sb-muted: #5f574d;
	--sb-border: #e6ded2;
	--sb-primary: #9a5418;
	--sb-on-primary: #fff;
	--sb-accent: #d9a45a;
	--sb-on-accent: #14130f;
	--sb-dark: #1a1917;
	--sb-on-dark: #faf8f5;
	--sb-dark-muted: #b3aa9d;
	--sb-success: #1f6b45;
	--sb-danger: #b0342a;
	--sb-font-heading: "Heebo", system-ui, sans-serif;
	--sb-font-body: "Assistant", system-ui, sans-serif;
	--sb-font-size: 17px;
	--sb-heading-weight: 800;
	--sb-line-height: 1.65;
	--sb-container: 1240px;
	--sb-radius: 16px;

	--gutter: clamp(16px, 4vw, 24px);
	--header-h: 84px;
	--radius-sm: calc(var(--sb-radius) * 0.65);
	--radius-lg: calc(var(--sb-radius) * 1.4);
	--shadow: 0 18px 40px rgb(26 25 23 / 0.13);
	--focus: 3px solid var(--sb-primary);
	--dock-offset: 0px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
	font-size: calc(var(--sb-font-size) * var(--a11y-scale, 1));
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 12px;
}

html,
body { overflow-x: clip; }

body {
	margin: 0;
	background: var(--sb-bg);
	color: var(--sb-text);
	font-family: var(--sb-font-body);
	font-size: 1rem;
	line-height: var(--sb-line-height);
	text-rendering: optimizeLegibility;
}

img,
video,
svg,
iframe { max-width: 100%; }

img,
video { height: auto; display: block; }

a { color: var(--sb-primary); text-underline-offset: 0.18em; }
a:hover { color: var(--sb-text); }

h1, h2, h3, h4 {
	font-family: var(--sb-font-heading);
	font-weight: var(--sb-heading-weight);
	line-height: 1.2;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-block-end: 0; }

/* :where() = zero specificity, so any class (e.g. .container on a list) still wins. */
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }

button { font: inherit; color: inherit; }

::selection { background: color-mix(in srgb, var(--sb-accent) 45%, transparent); }

:focus-visible {
	outline: var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.section--dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.cookies :focus-visible,
.cta-band--dark :focus-visible,
.form-card--dark :focus-visible,
.product-feature :focus-visible { outline-color: var(--sb-accent); }

.icon { flex-shrink: 0; vertical-align: middle; }
[dir="ltr"] .icon-arrow,
[dir="ltr"] .icon-chevron-left { transform: scaleX(-1); }

/* ---------- Accessibility helpers ---------- */
.site-main:focus { outline: none; }

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--sb-dark);
	color: var(--sb-on-dark);
	border-radius: 999px;
	font-weight: 700;
	transform: translateY(-200%);
	transition: transform .2s;
}
.skip-link:focus { transform: none; color: var(--sb-on-dark); }

.hp-field { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Accessibility toolbar modes (attributes on <html>, filters on #page so fixed UI keeps working). */
html[data-a11y-contrast="high"] #page { filter: contrast(1.45) saturate(1.3); }
html[data-a11y-contrast="dark"] #page { filter: invert(1) hue-rotate(180deg); }
html[data-a11y-contrast="dark"] #page :is(img, video, iframe, .hero__img) { filter: invert(1) hue-rotate(180deg); }
html[data-a11y-contrast="gray"] #page { filter: grayscale(1); }
html[data-a11y-underline="on"] a { text-decoration: underline !important; }
html[data-a11y-motion="off"] *,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-a11y-cursor="big"],
html[data-a11y-cursor="big"] * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1 3 7-3 1-3-7-5 4z' fill='%23000' stroke='%23fff'/%3E%3C/svg%3E") 4 2, auto !important;
}

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

/* ---------- Layout ---------- */
.container {
	inline-size: 100%;
	max-inline-size: var(--sb-container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-inline-size: 900px; }
.container--wide { max-inline-size: 1400px; }

.section { padding-block: clamp(56px, 8vw, 92px); }
.section--tight { padding-block: 20px clamp(56px, 7vw, 84px); }
.section--flush-top { padding-block-start: 0; }
.section--alt { background: var(--sb-surface-alt); }
.section--bordered { border-block-start: 1px solid var(--sb-border); }
.section--dark { background: var(--sb-dark); color: var(--sb-on-dark); }
.section--dark a:not(.btn) { color: var(--sb-accent); }

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 280px), 100%), 1fr));
	gap: var(--gap, 24px);
}

/* Column minimum (.grid, .gallery--grid) — auto-fill wraps by itself, no breakpoints needed. */
.min-190 { --min: 190px; }
.min-200 { --min: 200px; }
.min-240 { --min: 240px; }
.min-250 { --min: 250px; }
.min-260 { --min: 260px; }
.min-280 { --min: 280px; }
.min-300 { --min: 300px; }
.min-320 { --min: 320px; }
.gap-16 { --gap: 16px; }
.gap-26 { --gap: 26px; }
.ratio-1-1 { --ratio: 1; }
.ratio-4-3 { --ratio: 4 / 3; }
.ratio-3-2 { --ratio: 3 / 2; }
.ratio-16-9 { --ratio: 16 / 9; }

.split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
	gap: clamp(32px, 5vw, 56px);
	align-items: center;
}
.split--top { align-items: start; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Typography ---------- */
.eyebrow {
	font-size: 0.78rem;
	letter-spacing: 0.2em;
	font-weight: 700;
	color: var(--sb-primary);
	margin: 0 0 12px;
}
.eyebrow--sm { font-size: 0.72rem; letter-spacing: 0.16em; margin-block-end: 8px; }
.eyebrow--on-dark,
.section--dark .eyebrow,
.page-header--dark .eyebrow { color: var(--sb-accent); }

.h-display {
	font-size: clamp(2rem, 5.2vw, 3.65rem);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.01em;
	max-inline-size: 20ch;
	margin: 0 0 18px;
}
.h-section {
	font-size: clamp(1.65rem, 3.6vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 16px;
	max-inline-size: 24ch;
}
.h-sub { font-size: clamp(1.3rem, 2.4vw, 1.55rem); margin: 0 0 14px; }

.lede {
	font-size: clamp(1.02rem, 1.6vw, 1.12rem);
	color: var(--sb-muted);
	line-height: 1.7;
	max-inline-size: 62ch;
}
.lede a { font-weight: 700; }
.section--dark .lede,
.page-header--dark .lede { color: var(--sb-dark-muted); }

.chip {
	display: inline-block;
	background: var(--sb-surface-alt);
	color: var(--sb-primary);
	font-weight: 700;
	font-size: 0.78rem;
	padding: 4px 12px;
	border-radius: 999px;
	text-decoration: none;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	text-decoration: none;
	min-block-size: 44px;
}
.link-arrow:hover { text-decoration: underline; }

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	min-block-size: 44px;
}
.back-link .icon { transform: scaleX(-1); }
[dir="ltr"] .back-link .icon { transform: none; }
.back-link--on-dark { color: var(--sb-accent); }
.back-link--on-dark:hover { color: var(--sb-on-dark); }

.required { color: var(--sb-danger); }

/* Editor content */
.entry-content > * + * { margin-block-start: 1em; }
.entry-content h2 { font-size: clamp(1.3rem, 2.6vw, 1.65rem); margin-block: 1.6em 0.5em; }
.entry-content h3 { font-size: 1.25rem; margin-block: 1.4em 0.4em; }
.entry-content ul,
.entry-content ol { padding-inline-start: 1.4em; }
.entry-content li + li { margin-block-start: 0.4em; }
.entry-content img { border-radius: var(--sb-radius); }
.entry-content blockquote,
.entry-content .wp-block-pullquote {
	margin-inline: 0;
	padding: 20px 24px;
	background: var(--sb-surface-alt);
	border-radius: var(--sb-radius);
	border: 0;
	font-family: var(--sb-font-heading);
	font-weight: 700;
	font-size: 1.12rem;
	line-height: 1.6;
	text-align: start;
}
.entry-content blockquote p { margin: 0; }
.entry-content table { border-collapse: collapse; inline-size: 100%; }
.entry-content th,
.entry-content td { border: 1px solid var(--sb-border); padding: 10px 12px; text-align: start; }
.entry-content--narrow { max-inline-size: 820px; }
.entry-content--article { max-inline-size: 780px; font-size: 1.06rem; line-height: 1.9; padding-block: 40px 20px; }
.entry-content--story { font-size: 1.06rem; line-height: 1.8; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 44px;
	padding: 11px 24px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var(--sb-font-body);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
	white-space: nowrap;
}
.btn--lg { padding: 15px 30px; font-size: 1rem; }
.btn--block { inline-size: 100%; }

.btn--primary { background: var(--sb-dark); color: var(--sb-on-dark); }
.btn--primary:hover { background: var(--sb-primary); color: var(--sb-on-primary); }

.btn--accent { background: var(--sb-accent); color: var(--sb-on-accent); }
.btn--accent:hover { background: color-mix(in srgb, var(--sb-accent) 70%, #fff); color: var(--sb-on-accent); }

.btn--ghost { border-color: color-mix(in srgb, var(--sb-on-dark) 45%, transparent); color: var(--sb-on-dark); background: transparent; }
.btn--ghost:hover { background: color-mix(in srgb, var(--sb-on-dark) 12%, transparent); color: var(--sb-on-dark); }

.btn--outline { border-color: color-mix(in srgb, var(--sb-text) 30%, transparent); color: var(--sb-text); background: transparent; }
.btn--outline:hover { border-color: var(--sb-primary); color: var(--sb-primary); }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ---------- Badges ---------- */
.badges { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.2;
	background: var(--sb-surface-alt);
	color: var(--sb-text);
	box-shadow: 0 2px 8px rgb(20 19 15 / 0.18);
}
.badge--sale { background: var(--sb-danger); color: #fff; border-radius: 6px; font-family: var(--sb-font-heading); font-weight: 900; letter-spacing: 0.1em; }
.badge--free { background: var(--sb-success); color: #fff; }
.badge--dark { background: var(--sb-dark); color: var(--sb-accent); }

/* ---------- Header ---------- */
/* Scrolls away with the page, as in the design (and nothing ever covers a focused element, WCAG 2.4.11). */
.site-header {
	position: relative;
	z-index: 50;
	background: var(--sb-bg);
	border-block-end: 1px solid var(--sb-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-block-size: var(--header-h);
}

.logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; color: inherit; min-block-size: 44px; }
.logo .logo__img { block-size: 58px; inline-size: auto; max-inline-size: 110px; object-fit: contain; } /* Scoped under .logo to beat WooCommerce's ".woocommerce img" reset. */
.logo__img--invert { filter: invert(1) brightness(1.7); }
.logo__text { font-family: var(--sb-font-heading); font-weight: 900; font-size: 1.25rem; }

.site-nav { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.site-nav__list { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.site-nav__list a {
	display: flex;
	align-items: center;
	min-block-size: 44px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--sb-text) 82%, var(--sb-bg));
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s;
}
.site-nav__list a:hover { background: var(--sb-surface-alt); color: var(--sb-text); }
.site-nav__list [aria-current="page"],
.site-nav__list .current-menu-item > a { color: var(--sb-primary); box-shadow: inset 0 -2px 0 var(--sb-primary); border-radius: 0; }
.site-nav__cta { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 10px; }
.site-header__toggle {
	display: none;
	inline-size: 44px;
	block-size: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sb-border);
	background: var(--sb-surface);
	border-radius: 12px;
	cursor: pointer;
}
.site-header__toggle:hover { border-color: var(--sb-primary); }
.site-header__toggle .site-header__toggle-open { display: inline-flex; }
.site-header__toggle .site-header__toggle-close { display: none; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-open { display: none; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-close { display: inline-flex; }

@media (max-width: 1119.98px) {
	.site-header__inner { flex-wrap: wrap; gap: 12px; }
	.site-header__actions { margin-inline-start: auto; }
	.site-header__cta { padding-inline: 16px; font-size: 0.88rem; }
	.js .site-header__toggle { display: inline-flex; }
	.site-nav { order: 3; flex-basis: 100%; margin: 0; flex-direction: column; align-items: stretch; }
	.js .site-nav:not(.is-open) { display: none; }
	.site-nav { padding-block: 4px 18px; border-block-start: 1px solid var(--sb-border); }
	.site-nav__list { flex-direction: column; align-items: stretch; }
	.site-nav__list a { font-size: 1.02rem; padding: 12px 4px; border-radius: 0; border-block-end: 1px solid var(--sb-border); }
	.site-nav__list [aria-current="page"] { box-shadow: none; }
	.site-nav__cta { display: inline-flex; margin-block-start: 12px; align-self: flex-start; }
}
@media (max-width: 420px) {
	.site-header__cta { display: none; }
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-block-size: 88svh; /* As in the design; svh = the visible height on phones with a browser bar. */
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #14130f;
	color: #fdfbf7;
	isolation: isolate;
}
.hero__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .86; z-index: -2; }
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(12 11 9 / .94) 0%, rgb(12 11 9 / .55) 45%, rgb(12 11 9 / .2) 100%);
}
.hero__content { padding-block: 64px 84px; animation: sb-rise .7s var(--ease) both; }
.hero__title {
	font-size: clamp(2.2rem, 6.4vw, 4.6rem);
	font-weight: 900;
	line-height: 1.03;
	color: #fdfbf7;
	max-inline-size: 15ch;
	margin: 0 0 22px;
	letter-spacing: -0.01em;
}
.hero__title--sm { font-size: clamp(1.8rem, 5vw, 3.3rem); max-inline-size: 20ch; margin-block: 14px 10px; }
.hero__text { font-size: clamp(1rem, 2vw, 1.24rem); line-height: 1.6; color: #e4dccf; font-weight: 300; max-inline-size: 52ch; margin: 0 0 34px; }
.hero--project { min-block-size: min(58vh, 620px); }
.hero--project .hero__content { padding-block: 100px 54px; }
.hero--project .hero__text { margin: 0; font-size: 1.06rem; }

@keyframes sb-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Stats ---------- */
.stats { background: var(--sb-dark); padding-block: 26px; }
.stats__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; text-align: center; }
.stats__item { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.stats__value { font-family: var(--sb-font-heading); font-weight: 900; font-size: 1.765rem; line-height: 1; color: var(--sb-accent); }
.stats__label { font-size: 0.824rem; color: var(--sb-dark-muted); font-weight: 500; }

/* ---------- Section heads ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-block-end: 34px; }
.section-head .h-section { margin: 0; }
.section-head__lede { color: var(--sb-muted); margin: 12px 0 0; max-inline-size: 60ch; }
.section-head--inline { align-items: baseline; justify-content: flex-start; margin-block-end: 16px; gap: 14px; }
.section-head--inline .h-sub { margin: 0; }
.section-head__hint { color: var(--sb-muted); font-size: 0.9rem; margin: 0; }

/* ---------- Cards ---------- */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	block-size: 100%;
	background: var(--sb-surface);
	border: 1px solid var(--sb-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: inherit;
}
.card--link { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.card--link:hover,
.card--link:focus-within { transform: translateY(-5px); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--sb-surface-alt); }
.card__media--wide { aspect-ratio: 16 / 10; }
.card__img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card--link:hover .card__img { transform: scale(1.04); }
.card__body { display: flex; flex-direction: column; gap: 8px; padding: 22px; flex: 1; }
.card__title { font-size: 1.2rem; line-height: 1.3; margin: 0; }
.card__title--lg { font-size: 1.4rem; }
.card__link { color: var(--sb-text); text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: var(--focus); outline-offset: -3px; border-radius: var(--radius-lg); }
.card__link:hover { color: var(--sb-primary); }
.card__text { color: var(--sb-muted); line-height: 1.6; margin: 0; flex: 1; }
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 6px; }
.card__meta-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; margin: 0; }
.card__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--sb-primary); font-size: 0.9rem; }
.card__note { font-size: 0.8rem; color: var(--sb-muted); }
.pillar .card__media { aspect-ratio: auto; block-size: 230px; }
.pillar .card__body { padding: 26px 26px 30px; }
.pillar .card__title { font-size: 1.412rem; line-height: 1.25; }
.pillar .card__text { font-size: 0.941rem; line-height: 1.65; }
/* Sizes below are design px ÷ 17 (the root size). The home "what we do" head is a little larger and sits further from its cards (design). */
.section--pillars .section-head { margin-block-end: 56px; }
.section--pillars .h-section { font-size: clamp(1.765rem, 4vw, 2.706rem); max-inline-size: 20ch; }
.post-card--compact .card__media { aspect-ratio: 16 / 9; }
.post-card--compact .card__title { font-size: 1.02rem; }

.feature-grid { counter-reset: feature; }
.feature { padding: 26px; gap: 8px; }
.feature__num { font-family: var(--sb-font-heading); font-weight: 900; color: var(--sb-accent); }
.feature__title { font-size: 1.08rem; margin: 0; }
.feature__text { color: var(--sb-muted); font-size: 0.93rem; line-height: 1.65; margin: 0; }

/* ---------- Gallery ---------- */
.gallery--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 240px), 100%), 1fr)); gap: 14px; }
.gallery--masonry { columns: 320px; column-gap: 16px; }
.gallery--masonry .gallery__item { break-inside: avoid; margin-block-end: 16px; }
.gallery__link {
	position: relative;
	display: block;
	border-radius: var(--sb-radius);
	overflow: hidden;
	background: var(--sb-surface-alt);
	cursor: zoom-in;
}
.gallery--grid .gallery__link { aspect-ratio: var(--ratio, 4 / 3); }
.gallery--grid .gallery__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.gallery__img { transition: transform .5s var(--ease); }
.gallery__link:hover .gallery__img { transform: scale(1.05); }
.gallery__caption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 34px 18px 14px;
	background: linear-gradient(to top, rgb(12 11 9 / .85), transparent);
	color: #fdfbf7;
	font-weight: 600;
	font-size: 0.9rem;
}

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: flex; flex-direction: column; }
.steps__item { counter-increment: step; position: relative; padding-block: 20px; padding-inline-start: 48px; border-block-end: 1px solid var(--sb-border); }
.steps__item::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 23px;
	font-family: var(--sb-font-heading);
	font-weight: 900;
	font-size: 0.882rem;
	color: var(--sb-primary); /* Design uses the light gold (#d9a45a): 2.1:1 on this background, below AA 4.5:1. */
}
.steps__title { font-size: 1.059rem; font-weight: 700; margin: 0 0 5px; }
.steps__text { color: var(--sb-muted); font-size: 0.912rem; line-height: 1.6; margin: 0; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; }
.faq__item { border-block-end: 1px solid color-mix(in srgb, var(--sb-border) 80%, var(--sb-text) 8%); }
.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-block: 20px;
	min-block-size: 44px;
	cursor: pointer;
	list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__title { font-size: 1.088rem; font-weight: 700; margin: 0; line-height: 1.4; }
.faq__sign { position: relative; inline-size: 18px; block-size: 18px; flex-shrink: 0; }
.faq__sign::before,
.faq__sign::after { content: ""; position: absolute; inset-inline-start: 1px; inset-block-start: 7.5px; inline-size: 16px; block-size: 3px; border-radius: 1px; background: var(--sb-primary); transition: transform .2s; }
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0); }
.faq__a { padding-block-end: 22px; color: var(--sb-muted); font-size: 0.97rem; line-height: 1.75; }

/* ---------- CTA band ---------- */
.cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	border-radius: calc(var(--sb-radius) * 1.75);
	padding: clamp(28px, 5vw, 58px) clamp(24px, 4vw, 46px);
}
.cta-band--dark { background: var(--sb-dark); color: var(--sb-on-dark); text-align: center; justify-content: center; flex-direction: column; max-inline-size: 1100px; margin-inline: auto; padding: clamp(34px, 5vw, 62px) 30px; }
.cta-band--dark .cta-band__title { font-size: clamp(1.647rem, 4vw, 2.588rem); margin-block-end: 16px; }
.cta-band--dark .cta-band__text { font-size: 1.059rem; line-height: 1.65; }
.cta-band--dark .actions { justify-content: center; }
.cta-band--alt { background: var(--sb-surface-alt); border: 1px solid var(--sb-border); }
.cta-band__body { flex: 1; min-inline-size: min(250px, 100%); }
.cta-band__title { font-size: clamp(1.4rem, 3.4vw, 2.5rem); margin: 0 0 10px; line-height: 1.2; }
.cta-band--alt .cta-band__title { font-size: clamp(1.35rem, 2.8vw, 1.9rem); }
.cta-band__text { color: var(--sb-dark-muted); font-size: 1.04rem; margin: 0; }
.cta-band--alt .cta-band__text { color: var(--sb-muted); }

/* ---------- Page header ---------- */
.page-header { padding-block: clamp(48px, 7vw, 74px) clamp(36px, 5vw, 58px); }
.page-header--alt { background: var(--sb-surface-alt); border-block-end: 1px solid var(--sb-border); }
.page-header--dark { background: var(--sb-dark); color: var(--sb-on-dark); }
.page-header--plain { padding-block-end: 26px; }
.page-header .actions { margin-block-start: 26px; }
.page-header__aside { margin-block: 14px 0; color: var(--sb-muted); font-size: 0.93rem; }
.page-header__aside a { font-weight: 700; }

/* Breadcrumbs (markup by the SEO module: nav.breadcrumbs > ol > li) */
.crumbs-bar { padding-block: 20px; }
.crumbs-bar:has(.container:empty) { display: none; }
.breadcrumbs { font-size: 0.85rem; color: var(--sb-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-inline-end: 8px; opacity: .7; }
.breadcrumbs a { color: inherit; font-weight: 600; }

/* ---------- Specs ---------- */
.specs { background: var(--sb-surface-alt); border-radius: calc(var(--sb-radius) * 1.1); padding: 26px 28px; }
.specs__title { font-size: 1.06rem; margin: 0 0 10px; }
.specs__list { margin: 0; }
.specs__row { display: flex; justify-content: space-between; gap: 16px; padding-block: 11px; border-block-end: 1px solid color-mix(in srgb, var(--sb-border) 80%, var(--sb-text) 8%); }
.specs__row:last-child { border-block-end: 0; }
.specs dt { color: var(--sb-muted); }
.specs dd { margin: 0; font-weight: 700; text-align: end; }

/* ---------- 360 viewer ---------- */
.spin__stage {
	position: relative;
	background: var(--sb-surface-alt);
	border: 1px solid var(--sb-border);
	border-radius: calc(var(--sb-radius) * 1.25);
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}
.spin__stage.is-dragging { cursor: grabbing; }
.spin__img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; pointer-events: none; }
.spin__counter {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-start: 50%;
	translate: 50% 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgb(12 11 9 / .75);
	color: #fdfbf7;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	direction: ltr;
}
[dir="ltr"] .spin__counter { translate: -50% 0; }
.spin__thumbs { display: flex; gap: 9px; margin-block-start: 14px; overflow-x: auto; padding-block-end: 4px; }
.spin__thumb { display: block; border: 2px solid transparent; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.spin__thumb img { inline-size: 92px; block-size: 64px; object-fit: cover; }
.spin__thumb[aria-current="true"] { border-color: var(--sb-primary); }

/* ---------- Video ---------- */
.video { inline-size: 100%; border-radius: calc(var(--sb-radius) * 1.25); background: #14130f; overflow: hidden; }
.video--embed { aspect-ratio: 16 / 9; }
.video--embed iframe { inline-size: 100%; block-size: 100%; border: 0; }

/* ---------- Article ---------- */
.article__header { padding-block-start: 40px; }
.article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.85rem; color: var(--sb-muted); margin: 18px 0 14px; }
.article__title { max-inline-size: 26ch; font-size: clamp(1.8rem, 4.6vw, 3.05rem); }
.article__lede { font-size: 1.15rem; margin-block-end: 30px; }
.article__cover { margin: 0 auto; }
.article__cover-img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--sb-radius) * 1.4); background: var(--sb-surface-alt); }
.related { border-block-start: 1px solid var(--sb-border); padding-block-start: 34px; }
.related__title { font-size: 1.35rem; }

.product-feature {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	background: #14130f;
	color: var(--sb-on-dark);
	border-radius: calc(var(--sb-radius) * 1.4);
	padding: 26px;
	margin-block: 34px;
}
.product-feature__media { inline-size: 118px; block-size: 118px; border-radius: var(--sb-radius); overflow: hidden; flex-shrink: 0; background: #2a2823; }
.product-feature__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.product-feature__body { flex: 1; min-inline-size: min(220px, 100%); }
.product-feature__title { font-size: 1.2rem; margin: 0 0 6px; }
.product-feature__text { color: var(--sb-dark-muted); font-size: 0.93rem; margin: 0; }
.product-feature__buy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.product-feature__price { font-family: var(--sb-font-heading); font-weight: 900; font-size: 1.5rem; }
.product-feature__price del { opacity: .65; font-size: .7em; }
.product-feature__price ins { text-decoration: none; }

/* ---------- Architecture extras ---------- */
.scales { margin-block: 28px; }
.scales__item { display: flex; flex-direction: column; gap: 7px; border: 1px solid color-mix(in srgb, var(--sb-on-dark) 18%, transparent); border-radius: var(--sb-radius); padding: 22px; }
.scales__value { font-family: var(--sb-font-heading); font-weight: 900; font-size: 1.55rem; color: var(--sb-accent); text-align: start; }
.scales__text { color: var(--sb-dark-muted); font-size: 0.9rem; line-height: 1.55; }
.scales__note { color: var(--sb-dark-muted); margin: 0; }
.scales__note a { font-weight: 700; text-decoration: underline; }

.values__item { border-block-start: 3px solid var(--sb-accent); padding-block-start: 18px; }
.values__title { font-size: 1.06rem; margin: 0 0 7px; }
.values__item p { color: var(--sb-muted); font-size: 0.93rem; }
.closing-line { margin-block-start: 46px; font-size: 1.12rem; line-height: 1.7; max-inline-size: 60ch; }
.closing-line a { font-weight: 700; }
.closing { margin: 46px auto 0; max-inline-size: 620px; text-align: center; border-block-start: 1px solid var(--sb-border); padding-block-start: 40px; }
.closing .lede { margin-inline: auto; }

.about-aside { display: flex; flex-direction: column; gap: 14px; }
.about-aside__img { inline-size: 100%; border-radius: var(--sb-radius); }
.business-card { background: var(--sb-surface-alt); border-radius: var(--sb-radius); padding: 24px; }
.business-card__name { font-family: var(--sb-font-heading); font-weight: 800; font-size: 1.06rem; margin: 0 0 10px; }
.business-card__body { display: flex; flex-direction: column; gap: 4px; font-style: normal; color: var(--sb-muted); font-size: 0.93rem; }
.business-card__body a { color: inherit; }

/* ---------- Contact ---------- */
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-cards { display: flex; flex-direction: column; gap: 14px; }
.contact-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--sb-surface);
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius);
	padding: 18px 22px;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s;
}
.contact-card:hover { border-color: var(--sb-primary); color: inherit; }
.contact-card__icon { display: inline-flex; inline-size: 44px; block-size: 44px; align-items: center; justify-content: center; border-radius: 12px; background: var(--sb-surface-alt); color: var(--sb-primary); flex-shrink: 0; }
.contact-card__body { display: flex; flex-direction: column; }
.contact-card__label { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--sb-muted); font-weight: 700; }
.contact-card__value { font-family: var(--sb-font-heading); font-weight: 700; font-size: 1.15rem; text-align: start; }
.hours { background: var(--sb-surface-alt); border-radius: var(--sb-radius); padding: 22px 24px; }
.hours__title { font-size: 0.78rem; letter-spacing: 0.16em; color: var(--sb-muted); font-weight: 700; font-family: var(--sb-font-body); margin: 0 0 8px; }
.hours__list { margin: 0; }
.hours__row { display: flex; justify-content: space-between; gap: 12px; padding-block: 4px; }
.hours__row dd { margin: 0; font-weight: 700; }
.hours__note { margin: 6px 0 0; color: var(--sb-muted); font-size: 0.9rem; }

/* ---------- Forms ---------- */
.form-card { border-radius: calc(var(--sb-radius) * 1.35); padding: clamp(24px, 4vw, 46px); }
.form-card--light { background: var(--sb-surface-alt); border: 1px solid var(--sb-border); }
.form-card--dark { background: var(--sb-dark); color: var(--sb-on-dark); }
.form-card__title { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 8px; }
.form-card__text { color: var(--sb-muted); margin: 0 0 24px; }
.form-card--dark .form-card__text { color: var(--sb-dark-muted); }
.form { display: flex; flex-direction: column; gap: 18px; }
.form > .btn { align-self: flex-start; } /* Natural width at the start edge, as in the design; .btn--block still fills. */
.form__note { font-size: 0.85rem; color: var(--sb-muted); margin: 0; }
.form-card--dark .form__note { color: var(--sb-dark-muted); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-weight: 700; font-size: 0.9rem; }
.field__optional { font-weight: 400; color: var(--sb-muted); }
.field__error { color: var(--sb-danger); font-size: 0.85rem; font-weight: 700; }
.form-card--dark .field__error { color: #f4a08f; }
.input {
	inline-size: 100%;
	min-block-size: 48px;
	border: 1px solid color-mix(in srgb, var(--sb-text) 28%, var(--sb-border));
	background: var(--sb-surface);
	border-radius: 10px;
	padding: 12px 15px;
	font: inherit;
	font-size: 1rem;
	color: var(--sb-text);
}
textarea.input { resize: vertical; min-block-size: 110px; }
.input:focus-visible { outline: var(--focus); outline-offset: 1px; border-color: var(--sb-primary); }
.input[aria-invalid="true"] { border-color: var(--sb-danger); box-shadow: 0 0 0 1px var(--sb-danger); }
.form-card--dark .input { background: color-mix(in srgb, var(--sb-on-dark) 7%, transparent); border-color: color-mix(in srgb, var(--sb-on-dark) 35%, transparent); color: var(--sb-on-dark); }
.form-card--dark .input::placeholder { color: var(--sb-dark-muted); }
.consents { display: flex; flex-direction: column; gap: 12px; }
.checkbox { display: flex; align-items: flex-start; gap: 11px; font-size: 0.93rem; line-height: 1.55; }
.checkbox input { inline-size: 22px; block-size: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--sb-primary); cursor: pointer; }
.form-card--dark .checkbox input { accent-color: var(--sb-accent); }
.form-card--dark .checkbox a { color: var(--sb-accent); }
.checkbox label { cursor: pointer; }

.dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	border: 2px dashed color-mix(in srgb, var(--sb-text) 30%, var(--sb-border));
	background: var(--sb-surface);
	border-radius: 14px;
	padding: 30px 20px;
	text-align: center;
	color: var(--sb-primary);
	transition: border-color .15s, background-color .15s;
}
.dropzone--small { padding-block: 22px; }
.dropzone:hover,
.dropzone.is-over { border-color: var(--sb-primary); background: color-mix(in srgb, var(--sb-primary) 5%, var(--sb-surface)); }
.dropzone:focus-within { outline: var(--focus); outline-offset: 2px; }
.dropzone__input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.dropzone__title { font-family: var(--sb-font-heading); font-weight: 700; font-size: 1.02rem; color: var(--sb-text); }
.dropzone__hint { color: var(--sb-muted); font-size: 0.85rem; }
.dropzone__files { color: var(--sb-primary); font-weight: 700; font-size: 0.9rem; }
.dropzone__files:empty { display: none; }

.form-status { border-radius: 12px; padding: 14px 18px; font-weight: 700; margin: 0 0 18px; }
.form-status--success { background: color-mix(in srgb, var(--sb-success) 12%, var(--sb-surface)); color: var(--sb-success); border: 1px solid var(--sb-success); }
.form-status--error { background: color-mix(in srgb, var(--sb-danger) 10%, var(--sb-surface)); color: var(--sb-danger); border: 1px solid var(--sb-danger); }

/* ---------- Filters, search, pagination ---------- */
.filters { margin-block-end: 28px; }
.filters__list { display: flex; flex-wrap: wrap; gap: 9px; }
.filters__item {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding: 8px 18px;
	border: 1px solid var(--sb-border);
	border-radius: 999px;
	background: var(--sb-surface);
	color: var(--sb-text);
	font-weight: 600;
	text-decoration: none;
}
.filters__item:hover { border-color: var(--sb-primary); color: var(--sb-text); }
.filters__item[aria-current="page"],
.filters__item[aria-pressed="true"] { background: var(--sb-dark); border-color: var(--sb-dark); color: var(--sb-on-dark); }

.search-form { display: flex; gap: 8px; max-inline-size: 520px; }
.search-form__btn { padding-inline: 16px; }
.search-bar { margin-block-end: 24px; }
.search-count { color: var(--sb-muted); }
.results { display: flex; flex-direction: column; gap: 22px; margin-block: 20px; }
.results__item { border-block-end: 1px solid var(--sb-border); padding-block-end: 20px; }
.results__title { font-size: 1.2rem; margin: 0 0 4px; }
.results__type { font-size: 0.8rem; color: var(--sb-muted); margin: 0 0 6px; }
.empty,
.notfound { display: flex; flex-direction: column; gap: 18px; }
.notfound .h-display { max-inline-size: 18ch; }

.pagination { margin-block-start: 40px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: 12px;
	border: 1px solid var(--sb-border);
	border-radius: 999px;
	text-decoration: none;
	color: var(--sb-text);
	font-weight: 600;
}
.pagination .page-numbers.current { background: var(--sb-dark); color: var(--sb-on-dark); border-color: var(--sb-dark); }

.comments { margin-block: 40px; }
.coordinator { background: var(--sb-surface-alt); border-radius: var(--sb-radius); padding: 22px 24px; margin-block-start: 30px; }
.coordinator h2 { margin-block-start: 0; }
.coordinator__list { display: flex; flex-direction: column; gap: 4px; }
.updated { color: var(--sb-muted); font-size: 0.9rem; }

/* ---------- Footer ---------- */
.site-footer { background: #14130f; color: var(--sb-dark-muted); padding-block: 58px 34px; }
.site-footer a { color: var(--sb-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--sb-accent); text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 36px; }
.site-footer__brand p { margin-block-start: 12px; font-size: 0.9rem; line-height: 1.7; }
.logo.site-footer__logo .logo__img { block-size: 62px; }
.site-footer__logo .logo__text { color: var(--sb-on-dark); }
.site-footer__title { color: var(--sb-on-dark); font-family: var(--sb-font-body); font-weight: 700; font-size: 1rem; margin: 0 0 12px; }
.site-footer__title:not(:first-child) { margin-block-start: 20px; }
.site-footer__list { display: flex; flex-direction: column; gap: 0; font-size: 0.9rem; }
.site-footer__list a { display: inline-flex; align-items: center; min-block-size: 28px; } /* ≥ 24px target (WCAG 2.5.8). */
.site-footer__legal { margin-block-start: 8px; }
.site-footer p { font-size: 0.9rem; }
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin-block-start: 34px;
	padding-block-start: 22px;
	border-block-start: 1px solid rgb(250 248 245 / .12);
	font-size: 0.85rem;
}
.site-footer__bottom a { color: var(--sb-accent); font-weight: 700; }

.social { display: flex; gap: 10px; }
.social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 12px;
	border: 1px solid rgb(250 248 245 / .2);
}
.site-footer .social__link:hover { background: color-mix(in srgb, var(--sb-accent) 15%, transparent); border-color: var(--sb-accent); text-decoration: none; }

.rating {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-block-start: 16px;
	background: rgb(250 248 245 / .06);
	border: 1px solid rgb(250 248 245 / .15);
	border-radius: 14px;
	padding: 12px 15px;
	max-inline-size: 300px;
}
.site-footer .rating:hover { border-color: var(--sb-accent); text-decoration: none; }
.rating__body { display: flex; flex-direction: column; line-height: 1.35; }
.rating__score { color: var(--sb-on-dark); font-weight: 700; }
.rating__stars { color: var(--sb-accent); letter-spacing: 0.06em; }
.rating__count { font-size: 0.82rem; }

/* ---------- Floating dock (a11y + WhatsApp), outside #page ---------- */
/* JS sets --dock-offset to the cookie banner height; :has() is the no-measure fallback. */
html:has(.cookies:not([hidden])) { --dock-offset: 140px; }
.dock {
	position: fixed;
	inset-inline: 18px;
	inset-block-end: calc(18px + var(--dock-offset));
	z-index: 150;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	pointer-events: none;
	transition: inset-block-end .25s;
	font-family: var(--sb-font-body);
}
.dock > * { pointer-events: auto; }

.a11y { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.a11y__open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #1a4f8a;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 22px rgb(20 19 15 / .3);
}
.a11y__open:hover { background: #123d6b; }
.a11y__open:focus-visible { outline: 3px solid #1a4f8a; outline-offset: 3px; }
.a11y__panel {
	inline-size: min(300px, calc(100vw - 36px));
	max-block-size: min(72vh, 560px);
	overflow-y: auto;
	background: #fff;
	color: #1a1917;
	border: 1px solid #ddd6cb;
	border-radius: 18px;
	box-shadow: 0 20px 50px rgb(20 19 15 / .22);
	padding: 20px;
}
.a11y__title { font-size: 1.06rem; margin: 0 0 14px; }
.a11y__size { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; }
.a11y__step {
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid #ddd6cb;
	background: #fff;
	border-radius: 12px;
	font-size: 1.2rem;
	font-weight: 700;
	cursor: pointer;
}
.a11y__size-value { flex: 1; text-align: center; font-weight: 700; }
.a11y__list { display: flex; flex-direction: column; gap: 8px; }
.a11y__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	inline-size: 100%;
	min-block-size: 44px;
	text-align: start;
	border: 1px solid #ddd6cb;
	background: #fff;
	color: #1a1917;
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}
.a11y__mark { visibility: hidden; display: inline-flex; }
.a11y__toggle[aria-pressed="true"] { background: #1a1917; color: #faf8f5; border-color: #1a1917; }
.a11y__toggle[aria-pressed="true"] .a11y__mark { visibility: visible; }
.a11y__reset {
	inline-size: 100%;
	min-block-size: 44px;
	margin-block-start: 12px;
	border: 0;
	background: #f0ebe3;
	border-radius: 12px;
	font-weight: 700;
	cursor: pointer;
}
.a11y__statement { display: block; margin-block-start: 12px; font-weight: 700; color: #7d4313; }
.a11y :focus-visible { outline: 3px solid #1a4f8a; outline-offset: 2px; }

.whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 60px;
	block-size: 60px;
	background: #157a46;
	color: #fff;
	border-radius: 50%;
	border: 2px solid #fff;
	text-decoration: none;
	box-shadow: 0 10px 26px rgb(20 19 15 / .28);
}
.whatsapp svg { inline-size: 30px; block-size: 30px; }
.whatsapp:hover { background: #106238; color: #fff; }
.whatsapp:focus-visible { outline: 3px solid #157a46; outline-offset: 3px; }
@media (max-width: 480px) {
	.whatsapp { inline-size: 52px; block-size: 52px; }
	.whatsapp svg { inline-size: 26px; block-size: 26px; }
}

/* ---------- Cookie banner ---------- */
.cookies {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 160;
	background: #14130f;
	color: #e4dccf;
	border-block-start: 1px solid rgb(217 164 90 / .35);
	padding-block: 18px;
}
.cookies__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cookies__text { margin: 0; flex: 1; min-inline-size: min(260px, 100%); font-size: 0.93rem; line-height: 1.6; }
.cookies__text a { color: var(--sb-accent); font-weight: 700; }
.cookies__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Lightbox ---------- */
.lightbox {
	inline-size: 100vw;
	max-inline-size: 100vw;
	block-size: 100dvh;
	max-block-size: 100dvh;
	margin: 0;
	padding: 34px;
	border: 0;
	background: rgb(10 9 8 / .95);
	color: #faf8f5;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgb(10 9 8 / .6); }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-block-size: 100%; }
.lightbox__img { max-inline-size: 100%; max-block-size: calc(100dvh - 120px); object-fit: contain; border-radius: 10px; }
.lightbox__caption { font-size: 0.93rem; text-align: center; }
.lightbox__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 50%;
	border: 1px solid rgb(250 248 245 / .35);
	background: rgb(250 248 245 / .1);
	color: #faf8f5;
	cursor: pointer;
}
.lightbox__btn:hover { background: rgb(250 248 245 / .22); }
.lightbox__btn:focus-visible { outline: 3px solid var(--sb-accent); }
.lightbox__close { inset-block-start: 18px; inset-inline-end: 22px; }
.lightbox__prev { inset-inline-start: 18px; inset-block-start: 50%; translate: 0 -50%; }
.lightbox__next { inset-inline-end: 18px; inset-block-start: 50%; translate: 0 -50%; }
.lightbox__count { position: absolute; inset-block-start: 28px; inset-inline-start: 26px; font-size: 0.85rem; direction: ltr; }

/* ---------- Print ---------- */
@media print {
	.site-header,
	.site-footer,
	.dock,
	.cookies,
	.skip-link { display: none !important; }
	.hero { min-block-size: 0; color: #000; background: none; }
	.hero__img,
	.hero::after { display: none; }
	.hero__title,
	.hero__text { color: #000; }
}