:root {
	--bg: #faf6f1;
	--bg-alt: #f2ebe2;
	--surface: #fffdfa;
	--ink: #33291f;
	--ink: #3b3025;
	--ink-soft: #6b5c4d;
	--ink-soft: #36302a;
	--line: #e4d8c9;
	--brand: #8c6f52;
	--brand-soft: #c4a888;
	--olive: #7d8a6a;
	--nude: #e7d3c1;
	--positive: #376931;
	--warning: #a86a0b;
	--error: #921713;
	--shadow-color: rgba(70, 52, 34, 0.45);
	--shadow: 0 18px 50px -28px var(--shadow-color);
}

/* Firefox / padrão */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(107, 92, 77, 0.7) transparent;
}

/* Chrome, Safari, Edge */
*::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
*::-webkit-scrollbar-track {
	background: transparent;
}
*::-webkit-scrollbar-thumb {
	background: rgba(107, 92, 77, 0.7);
	border-radius: 3px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #191512;
		--bg-alt: #211b16;
		--surface: #241d18;
		--ink: #f3e9dd;
		--ink-soft: #c1ae9a;
		--line: #3a3028;
		--brand: #d9bb98;
		--brand-soft: #8c7256;
		--olive: #9fae8a;
		--nude: #3d3129;
		--positive: #376931;
		--warning: #c07b13;
		--error: #921713;
		--shadow-color: rgba(0, 0, 0, 0.8);
		--shadow: 0 18px 50px -28px var(--shadow-color);
	}
	* {
		scrollbar-color: rgba(58, 48, 40, 0.7) transparent;
	}
	*::-webkit-scrollbar-thumb {
		background: rgba(58, 48, 40, 0.7);
	}
}
html.light {
	--bg: #faf6f1;
	--bg-alt: #f2ebe2;
	--surface: #fffdfa;
	--ink: #33291f;
	--ink: #382d22;
	--ink-soft: #6b5c4d;
	--ink-soft: #514539;
	--line: #e4d8c9;
	--brand: #705132;
	--brand-soft: #c4a888;
	--olive: #7d8a6a;
	--nude: #e7d3c1;
	--positive: #376931;
	--warning: #a86a0b;
	--error: #921713;
	--shadow-color: rgba(70, 52, 34, 0.45);
	--shadow: 0 18px 50px -28px var(--shadow-color);
	* {
		scrollbar-color: rgba(107, 92, 77, 0.7) transparent;
	}
	*::-webkit-scrollbar-thumb {
		background: rgba(107, 92, 77, 0.7);
	}
}
html.dark {
	--bg: #191512;
	--bg-alt: #211b16;
	--surface: #241d18;
	--ink: #f3e9dd;
	--ink-soft: #c1ae9a;
	--line: #3a3028;
	--brand: #d9bb98;
	--brand-soft: #8c7256;
	--olive: #9fae8a;
	--nude: #3d3129;
	--positive: #376931;
	--warning: #c07b13;
	--error: #921713;
	--shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.8);
	--shadow-color: rgba(0, 0, 0, 0.8);
	--shadow: 0 18px 50px -28px var(--shadow-color);
	* {
		scrollbar-color: rgba(58, 48, 40, 0.7) transparent;
	}
	*::-webkit-scrollbar-thumb {
		background: rgba(58, 48, 40, 0.7);
	}
}
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Jost", system-ui, sans-serif;
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: -0.01em;
	-webkit-font-smoothing: antialiased;
}
.dark body {
	font-weight: 300;
	letter-spacing: normal;
}
h1,
h2,
h3 {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.15;
	margin: 0 0 0.5em;
}
h1 {
	font-size: clamp(2.3rem, 5.6vw, 4.1rem);
}
h2 {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
}
h3 {
	font-size: 1.25rem;
}
p {
	margin: 0 0 1rem;
}
a {
	color: inherit;
}
img {
	max-width: 100%;
	display: block;
}
.wrap {
	width: min(1140px, 92vw);
	margin: 0 auto;
}
.eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--brand);
	font-weight: 500;
	margin-bottom: 1rem;
}
section {
	padding: clamp(3.5rem, 8vw, 7rem) 0;
}
.alt {
	background: var(--bg-alt);
}
.lead {
	font-size: 1.08rem;
	color: var(--ink-soft);
	max-width: 62ch;
}
.btn-set {
	display: flex;
	gap: 10px;
}
.btn {
	display: inline-block;
	padding: 0.95rem 1.9rem;
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	font-weight: 500;
	border: 1px solid var(--brand);
	transition: 0.25s;
	cursor: pointer;
}
.btn-solid {
	background: var(--brand);
	color: var(--bg);
}
.btn-solid:hover {
	background: transparent;
	color: var(--brand);
}
.btn-ghost {
	color: var(--brand);
	background: transparent;
}
.btn-ghost:hover {
	background: var(--brand);
	color: var(--bg);
}
.btn-sm {
	padding: 0.65rem 1.25rem;
	font-size: 0.72rem;
}
header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in oklab, var(--bg) 90%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}
.nav {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex-wrap: wrap;
	padding: 0.9rem 0;
	justify-content: space-between;
}
#brand-logo-top {
	color: var(--brand);
}
#brand-logo-footer {
	color: var(--brand-soft);
	width: 32%;
	height: auto;
}
footer .company-name {
	color: var(--brand);
	font-size: 1.75rem;
	text-transform: uppercase;
}
.nav-links {
	display: flex;
	gap: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.nav-links a {
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: normal;
	letter-spacing: 0.104em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.dark .nav-links a {
	font-weight: 300;
	letter-spacing: 0.12em;
}
.nav-links a:hover {
	color: var(--brand);
}
/* Desktop submenu ("Estúdio" > Sobre/Contato): hidden until hover/focus on
   its <li>, positioned under the parent link. Mobile turns this back into a
   plain indented flow inside the 1100px breakpoint below. */
.nav-links li.has-submenu {
	position: relative;
}
.nav-links .submenu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0.6rem 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 9rem;
	background: var(--bg);
	border: 1px solid var(--line);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	z-index: 1;
}
.nav-links li.has-submenu:hover > .submenu,
.nav-links li.has-submenu:focus-within > .submenu {
	display: block;
}
.nav-links .submenu li {
	padding: 0 1rem;
}
.nav-links .submenu a {
	display: block;
	padding: 0.5rem 0;
}
.nav-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	/*margin-left: auto;*/
}
/* Header action buttons (theme, menu, WhatsApp): same pill and typography as
   .btn, icon + label. Each hides its own label below its own breakpoint
   (theme 700px, menu 600px, WhatsApp 520px) instead of all three at once,
   since the icon alone is enough once the row gets tight. */
.nav-action {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0.5rem;
	padding: 0.65rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink);
	text-decoration: none;
	font-family: inherit;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	transition: 0.25s;
	cursor: pointer;
}
.nav-action-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	color: currentColor;
	font-size: 1rem;
	line-height: 1;
}
.nav-action-icon .icon-path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Theme toggle shows two SVGs (sun/moon) instead of one, swapped in CSS by the
   `dark`/`light` class the inline script sets on <html>; the previous
   approach mutated the icon's textContent from JS, which — now that the icon
   is an <svg>, not a text span — wiped out its children instead of changing
   a glyph. */
#theme-toggle .icon-moon {
	display: none;
}
:root.dark #theme-toggle .icon-sun {
	display: none;
}
:root.dark #theme-toggle .icon-moon {
	display: block;
}
.nav-action-label {
	white-space: nowrap;
}
@media (max-width: 700px) {
	#theme-toggle .nav-action-label {
		display: none;
	}
}
@media (max-width: 600px) {
	#menu-toggle .nav-action-label {
		display: none;
	}
}
@media (max-width: 520px) {
	#whatsapp-action .nav-action-label {
		display: none;
	}
}
/* Solid variant keeps the .btn-solid colors instead of the outline above (was
   the WhatsApp button's own style before the icon-btn group existed) */
.nav-action.btn-solid {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--bg);
}
.nav-action.btn-solid:hover {
	background: transparent;
	color: var(--brand);
}
#menu-toggle {
	display: none;
}
@media (max-width: 1100px) {
	.nav-actions {
		/*margin-left: 0;*/
	}
	.nav {
		justify-content: space-between;
	}
	#menu-toggle {
		display: inline-flex;
	}
	.nav-links {
		width: 100%;
		order: 5;
		gap: 0;
		flex-direction: column;
	}
	.nav-links li {
		border-top: 1px solid var(--line);
	}
	.nav-links a {
		display: block;
		padding: 0.7rem 0;
	}
	/* Submenu becomes a plain, always-visible indented block instead of a
	   hover dropdown (there's no hover on touch, and the list is short enough
	   that a toggle would be more friction than it saves). */
	.nav-links .submenu {
		display: block;
		position: static;
		border: none;
		box-shadow: none;
		padding: 0;
		background: transparent;
	}
	.nav-links .submenu li {
		border-top: none;
		padding-left: 1rem;
	}
	.nav-links .submenu a {
		padding: 0.5rem 0;
	}
	body.js .nav-links {
		display: none;
	}
	body.js .nav-links.open {
		display: flex;
	}
}
/* Below 400px there's no room for logo + full nav-actions row side by side,
   so nav-actions wraps under the logo, centered, and restarts its own
   contraction sequence (labels come back until each button's own breakpoint
   below squeezes it again). Placed after the 1100px block on purpose: both
   match below 400px and `.nav`'s justify-content has equal specificity in
   each, so source order decides — this one has to come last to win. */
@media (max-width: 400px) {
	.nav {
		justify-content: center;
	}
	.nav-actions {
		width: 100%;
		justify-content: center;
	}
	#theme-toggle .nav-action-label,
	#menu-toggle .nav-action-label,
	#whatsapp-action .nav-action-label {
		display: inline;
	}
}
@media (max-width: 395px) {
	#theme-toggle .nav-action-label {
		display: none;
	}
}
@media (max-width: 300px) {
	#menu-toggle .nav-action-label {
		display: none;
	}
}
@media (max-width: 250px) {
	#whatsapp-action .nav-action-label {
		display: none;
	}
}
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
@media (max-width: 800px) {
	.split {
		grid-template-columns: 1fr;
	}
}
.frame {
	border: 1px solid var(--line);
	padding: 12px;
	border-radius: 8px;
	background: var(--surface);
}
.frame img {
	border-radius: 4px;
	width: 100%;
	height: min(66vh, 520px);
	object-fit: cover;
}
#image-intro-integra-method img {
	object-position: center 25%;
}
blockquote {
	margin: 2rem 0 0;
	padding-left: 1.4rem;
	border-left: 2px solid var(--brand-soft);
	font-family: "Cormorant Garamond", serif;
	font-size: 1.35rem;
	font-style: italic;
	letter-spacing: normal;
}
.cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.4rem;
	margin-top: 3rem;
}
@media (max-width: 780px) {
	.cards {
		grid-template-columns: 1fr;
	}
}
.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: 0.3s;
}
.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}
.card img {
	height: 250px;
	width: 100%;
	object-fit: cover;
}












/*
 * Gallery: 12-column grid, so spans of 4 (thirds) and 6 (halves) combine
 * without holes. Default is 3 per row; the last row is completed by the
 * item count (even = 2 per row; odd = thirds, closed by a half pair or a
 * full-width item). Selectors use :has() on the last child, so they need no
 * markup classes (home and hair_solutions use a bare `.gallery`).
 * Source order matters: later rules of equal specificity win.
 */
.gallery {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1.1rem;
	margin-top: 2.6rem;
}
.gallery > * {
	grid-column: span 4;
}
/* 1 item: half width */
.gallery > :only-child {
	grid-column: span 6;
}
/* Even total: two per row */
.gallery:has(> :last-child:nth-child(even)) > * {
	grid-column: span 6;
}
/* Odd total, n = 5, 11, 17...: thirds plus a closing pair of halves */
.gallery:has(> :last-child:nth-child(6n + 5)) > :nth-last-child(-n + 2) {
	grid-column: span 6;
}
/* Odd total, n = 7, 13, 19...: thirds plus one full-width item */
.gallery:has(> :last-child:nth-child(6n + 1)) > :last-child:not(:only-child) {
	grid-column: span 12;
}
/* n = 3, 9, 15... (odd, multiple of 3) fills its rows with thirds: no rule */

@media (min-width: 551px) {
	/* 4 items: items 1 and 2 span 2 rows, items 3 and 4 share the 3rd column */
	.gallery:has(> :last-child:nth-child(4)) > * {
		grid-column: span 4;
	}
	.gallery:has(> :last-child:nth-child(4)) > :nth-child(-n + 2) {
		grid-row: span 2;
	}
	.gallery:has(> :last-child:nth-child(4)) > :nth-child(-n + 2) img,
	.gallery:has(> :last-child:nth-child(4)) > :nth-child(-n + 2) video {
		height: 100%;
	}
	.gallery:has(> :last-child:nth-child(4)) > :nth-last-child(-n + 2) img,
	.gallery:has(> :last-child:nth-child(4)) > :nth-last-child(-n + 2) video {
		height: 150px;
	}
}
@media (max-width: 450px) {
	/* Two per row; an odd last item takes the whole row */
	.gallery > * {
		grid-column: span 6;
	}
	.gallery:has(> :last-child:nth-child(odd)) > :last-child {
		grid-column: span 12;
	}
}
@media (max-width: 280px) {
	/* :has() raises specificity above the even/odd rules above */
	.gallery:has(> :last-child:nth-child(n)) > * {
		grid-column: span 12;
	}
}











/* ===== Stats ===== */
.stats {
	display: grid;
	gap: 1.4rem;
/* 	flex-wrap: nowrap; */
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--line);
	padding-top: 1.6rem;
	margin-top: 2.4rem;
}
@media (max-width: 600px) {
	.stats {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 400px) {
	.stats {
		grid-template-columns: 1fr;
	}
}
.stats .stat:only-child {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 32px;
}
.stats:has(> .stat:nth-child(2):last-child) {
	grid-template-columns: repeat(2, 1fr);
}
.stats .value {
	font-family: "Cormorant Garamond", serif;
	font-size: 2rem;
	display: block;
	color: var(--brand);
	margin-inline-start: 0;
	line-height: normal;
}
.stats .label {
	font-size: 0.72rem;
	letter-spacing: 0.123em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.dark .stats .label {
	letter-spacing: 0.14em;
}





















/* ===== Store ===== */
.catalog-layout,
.catalog-layout section {
	padding: initial;
}
.catalog-layout.list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.catalog-layout .page-head {
	padding: clamp(1rem, 7vw, 1.5rem) 0 0;
}

/* ===== Sidebar =====
 * Checkbox hack (input + label) instead of <details>/<summary>: some engines
 * collapse a details' non-summary content through an internal pseudo-box
 * (::details-content) that a plain `display` override on a descendant can't
 * undo without the real `open` attribute — which made forcing it open on
 * desktop via CSS alone fail. A checkbox is a plain element with no such
 * special-cased collapsing, so `display` behaves normally at every
 * breakpoint. Below 768px the whole aside sticks right under the header
 * (top: var(--header-h), kept live by the ResizeObserver in
 * products-list.html.hbs) showing only the summary bar; checking the box
 * turns the aside itself into a full-screen overlay (position: fixed,
 * height = 100vh - header) instead of resizing in flow — the product grid
 * behind never needs a manual offset because it's simply covered, not
 * pushed. Desktop (>= 768px, below) always shows the body regardless of the
 * checkbox and restores the static sticky column. */
.catalog-filters {
	display: flex;
	flex-direction: column;
	background-image: radial-gradient(
		ellipse 7% 50% at 100% 50%,
		var(--shadow-color),
		transparent
	);
}
.catalog-filters-toggle-input {
	display: none;
}
.catalog-filters-summary {
	flex-shrink: 0;
	display: flex;
	align-items: stretch;
	margin: 0;
	border-bottom: 1px solid var(--line);
}
/* Split 50/50 with .clear-filters when it's present (both flex: 1); alone,
   the title just takes the full width. */
.catalog-filters-title-text {
	flex: 1;
	display: block;
	margin: 0;
	padding: 0.75rem 1rem 0.5rem;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
}
.catalog-filters-title-text h2 {
	margin: 0;
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
}
.catalog-filters a {
	text-decoration: none;
}

.catalog-filters-body {
	display: none;
	flex: 1;
	min-height: 0; /* flex items default to min-height: auto (content size),
	which stretches the parent instead of scrolling; this is what lets
	overflow-y actually kick in inside a fixed-height flex column. */
	overflow-y: auto;
	padding: 0;
}
.catalog-filters-toggle-input:checked ~ .catalog-filters-body {
	display: block;
}

.catalog-filter {
	border: none;
	border-radius: 0;
	padding: 0.75rem;
	margin: 0;
}

.catalog-filter:last-child {
	margin: 0;
}

.catalog-filter .catalog-filter-facet-label {
	margin: 0;
	padding: 0.15rem 1rem;
	font-size: 1.0rem;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.75;
	border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
	background: color-mix(in srgb, var(--line) 10%, transparent);
}

.catalog-filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.catalog-filter li + li {
	margin: 0;
}

.catalog-filter-value {
	display: block;
	padding: 0.15rem 1rem;
	padding-inline-start: 2rem;
	border-radius: 0;
	border: none;
	line-height: 1.75;
}

.catalog-filter-value:hover,
.catalog-filter-value.is-selected {
	background: var(--brand-soft);
	color: contrast-color(var(--brand-soft));
	font-weight: 500;
}

.clear-filters {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.5rem 1rem;
	border: none;
	border-inline-start: 1px solid var(--line);
	font-size: 0.85rem;
	text-transform: uppercase;
	text-align: center;
	background: color-mix(in srgb, var(--error) 26%, transparent);
	color: contrast-color(var(--error));
}

.clear-filters:hover {

}

/* ===== Coluna direita (breadcrumb + head + produtos) ===== */
.catalog-layout > div {
	flex: 1;
	min-width: 0; /* permite que o conteúdo encolha sem quebrar */
}

/* ===== Mobile: sticky summary bar, full-screen overlay when open ===== */
.catalog-filters {
	position: sticky;
	top: var(--header-h);
	z-index: 40; /* below header (z-index: 50), above the product grid */
}
.catalog-filters:has(.catalog-filters-toggle-input:checked) {
	position: fixed;
	inset: 0;
	top: var(--header-h);
	height: calc(100vh - var(--header-h));
	z-index: 40;
	background-color: var(--bg);
}
/* Only the open panel scrolls; everything behind it is locked. :has() reaches
   up to <html> the same way .gallery/.cards use it below to reach down into
   their own children — no JS needed for the lock either. */
html:has(.catalog-filters-toggle-input:checked) {
	overflow: hidden;
}

/* ===== Desktop ===== */
@media (min-width: 768px) {
	.catalog-layout.list {
		flex-direction: row;
		align-items: flex-start;
	}

	.catalog-filters,
	.catalog-filters:has(.catalog-filters-toggle-input:checked) {
		flex: 0 0 260px;
		position: -webkit-sticky;
		position: sticky;
		top: var(--header-h);
		height: calc(100vh - var(--header-h));
		inset: auto;
		z-index: auto;
		background-color: transparent;
	}
	/* Higher-specificity mobile rule above hides the body unless the
	   checkbox is checked; desktop always shows it, so this has to beat that
	   selector's specificity regardless of :checked. */
	.catalog-filters-toggle-input ~ .catalog-filters-body {
		display: block !important;
	}
	.catalog-filters-title-text {
		cursor: default;
	}
	html:has(.catalog-filters-toggle-input:checked) {
		overflow: visible;
	}
}




/* ===== Products List ===== */
.products-list {
	padding-bottom: 64px;
}

/* ===== Cards Grid =====
 * Same idea as .gallery above, simplified: max 3 per row (no 4+ special
 * case), 12-column track so the last row can close with half spans instead
 * of leaving a lone item stranded on the left. Source order matters: later
 * rules of equal specificity win.
 */
.products-list .cards {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 24px;
}
.products-list .card {
	grid-column: span 4;
}

/* ===== 1 item ===== */
.products-list .card:only-child {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 32px;
}

.products-list .card:only-child h2 {
  font-size: 1.25rem;
  margin: 0 0 8px;
  color: #1a1a2e;
}

.products-list .card:only-child p {
  color: #6b7280;
  margin: 0;
}

/* Inverted from .gallery on purpose: the leftover from dividing by 3 is
   spent on the FIRST row as a featured item/pair, not stranded alone on the
   last row (a single giant trailing card doesn't read as a highlight, it
   reads as a layout glitch). Remainder 2 (n = 2, 5, 8...): the first pair
   splits the row in half. Covers the old plain 2-item case too (n = 2 also
   matches 3n + 2 for n = 0). */
.products-list .cards:has(> .card:last-child:nth-child(3n + 2)) > .card:nth-child(-n + 2) {
	grid-column: span 6;
}
.products-list .cards:has(> .card:last-child:nth-child(3n + 2)) > .card:nth-child(-n + 2) .product-cover {
	aspect-ratio: 16 / 9;
}
@media (max-width: 1000px) {
	.products-list .cards:has(> .card:last-child:nth-child(3n + 2)) > .card:nth-child(-n + 2) .product-cover {
		aspect-ratio: 16 / 12;
	}
}
@media (max-width: 768px) {
	.products-list .cards:has(> .card:last-child:nth-child(3n + 2)) > .card:nth-child(-n + 2) .product-cover {
		aspect-ratio: 1 / 1;
	}
}
/* Remainder 1 (n = 4, 7, 10...): lone first item is the featured full-width
   row, rest fill in thirds below it. */
.products-list .cards:has(> .card:last-child:nth-child(3n + 1)) > .card:first-child:not(:only-child) {
	grid-column: span 12;
}
.products-list .cards:has(> .card:last-child:nth-child(3n + 1)) > .card:first-child:not(:only-child) .product-cover {
	aspect-ratio: 16 / 6;
}
/* n = 3, 6, 9... (multiple of 3) fills its rows with thirds: no rule */

/* ===== Card ===== */
.products-list .card {
	position: relative;
	overflow: visible;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	padding: 0;
}

.products-list .card:hover {
	transform: translateY(-2px);
}

.products-list .card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0;
	padding: 0;

	justify-content: flex-start;
}

/* ===== Product Cover ===== */
.products-list .product-cover {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 12px 12px 0 0;
	margin: 0;

}

.products-list .product-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.products-list .card:hover .product-cover img {
	transform: scale(1.04);
}

.products-list .product-facets .facet-color {
	position: absolute;
	width: 50px;
	height: 50px;
}

/* ===== Product Title ===== */
.products-list .product-title,
.products-list .product-price {
	position: relative;
	display: block;
	font-family: "Jost", system-ui, sans-serif;
	font-weight: 300;
	font-size: clamp(0.9rem, 4vw, 1.2rem);
	line-height: 1.1;
	margin: 0;

	align-self: flex-start;
	padding: 0.4rem 0.75rem;
	border-radius: 6px;
	font-size: 1rem;
	line-height: 1.3;
}
/* ===== Price ===== */
.products-list .product-price {
	font-size: clamp(1.1rem, 4vw, 1.3rem);
	border-top: 1px solid var(--line);
}

.products-list .product-title a {
	text-decoration: none;
}

/* ===== Description ===== */
.products-list .product-description {
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 4;
	line-clamp: 2;
}


/* ===== Button ===== */
.products-list .btn {

}

.btn:hover {

}

/* ===== Pagination ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}

.pagination p {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0;
}

.pagination .btn {
  margin-top: 0;
  padding: 8px 18px;
}



.catalog-layout.detail .split > div {
	align-self: self-start;
}
.catalog-layout.detail .split {
    gap: clamp(1.5rem, 3vw, 4.0rem);
}
.catalog-layout.detail .split .gallery {
    margin: 0;
}
.catalog-layout.detail .price {
    position: relative;
    background-color: var(--bg-alt);
	padding: 1.2rem;
	border-radius: 0.8rem;
}
.catalog-layout.detail .price .regular-value,
.catalog-layout.detail .price .new-value {
	position: relative;
	display: inline-block;
	font-family: "Jost", system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(1rem, 4vw, 1.5rem);
	margin: 0;

	align-self: flex-start;
	line-height: 1.3;
}
.catalog-layout.detail .price .new-value {
    display: block;
	font-size: clamp(2rem, 4vw, 2.5rem);
    text-decoration: none;
}
.catalog-layout.detail .price .discount-percentage {
	position: absolute;
	background-color: var(--positive);
	color: contrast-color(var(--positive));
	padding: 0.2rem 0.5rem;
	border-radius: 0.6rem;
	transform: rotate(4deg);
	margin: -5px 0 0 11px;
	display: inline-block;
}


















#service-megahair.card img {
	object-position: center 65%;
}
#service-scalp-baldness.card img {
	object-position: center 15%;
}
#service-hair.card img {
	object-position: center;
}
#service-hairpieces-wigs.card img {
	object-position: center;
}
.card-body {
	padding: 1.6rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.card .btn {
	align-self: flex-start;
	margin-top: 1rem;
}
.pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
	margin-top: 3rem;
}
@media (max-width: 780px) {
	.pillars {
		grid-template-columns: 1fr;
	}
}
.pillar {
	padding: 1.6rem;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
}
.pillar h3 {
	color: var(--brand);
}
.gallery-item {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: var(--shadow);
	line-height: 0;
}
.gallery-item img,
.gallery-item video {
	width: 100%;
	height: 300px;
	object-fit: cover;
	transition: transform 0.7s ease;
}
.gallery-item:hover img,
.gallery-item:hover video {
	transform: scale(1.06);
}
.gallery-item {
	position: relative;
}
/* Placeholder play icon (base64 SVG, swap freely): thumbnail overlay and the
   lightbox play button share it through --gallery-play-icon */
.gallery-item,
.gallery-lightbox-play {
	--gallery-play-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiMwYTA3MDUiIGZpbGwtb3BhY2l0eT0iLjU1IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1vcGFjaXR5PSIuOCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTI2IDIwbDE4IDEyLTE4IDEyeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}
.gallery-item:has(> video)::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--gallery-play-icon) center / 64px 64px no-repeat;
}

/* Cobertura de falhas (antes/durante/depois): two thumbnails on top, the third
   full width. Scoped by id, so it beats the count-based gallery rules. */
#servico-cobertura-de-falhas .gallery > * {
	grid-column: span 6;
}
#servico-cobertura-de-falhas .gallery > :nth-child(3) {
	grid-column: span 12;
}
@media (max-width: 280px) {
	#servico-cobertura-de-falhas .gallery > * {
		grid-column: span 12;
	}
}

.badge {
	display: inline-block;
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	background: var(--nude);
	color: var(--ink);
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	margin-bottom: 1rem;
}
form {
	display: grid;
	gap: 0.8rem;
	margin-top: 1.4rem;
}
input {
	padding: 0.85rem 1rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--bg);
	color: var(--ink);
	font-family: inherit;
	font-size: 0.95rem;
}
.course-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 1.6rem;
	margin-top: 3rem;
}
@media (max-width: 860px) {
	.course-grid {
		grid-template-columns: 1fr;
	}
}
.course {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 2.1rem;
}

footer {
	background: var(--bg-alt);
	border-top: 1px solid var(--line);
	padding: clamp(3rem, 7vw, 5rem) 0 2rem;
}
.foot-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2.4rem;
	text-align: center;
}
@media (max-width: 860px) {
	.foot-grid {
		grid-template-columns: 1fr;
	}
}
.foot-grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.foot-grid li {
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
	color: var(--ink-soft);
}
.map-link {
	display: block;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	background: var(--surface);
	text-decoration: none;
	padding: 7px;
}
.map-link svg {
	display: block;
}
.map-link svg .background {
	color: var(--bg-alt) !important;
}
.map-link svg .roads {
	color: var(--brand-soft) !important;
}
.map-link svg .structs {
	color: var(--nude) !important;
}
.map-link svg .main-structs {
	color: var(--nude) !important;
}
.map-link svg .text {
	color: var(--ink) !important;
}
.seo-text {
	margin-top: 2.6rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--line);
	font-size: 0.82rem;
	color: var(--ink-soft);
	line-height: 1.8;
}
.copy {
	margin-top: 1.4rem;
	font-size: 0.76rem;
	color: var(--ink-soft);
	letter-spacing: 0.08em;
}
/* touch-action none: gallery-lightbox.js handles swipe, pinch zoom and pan itself */
.gallery-lightbox-content {
	touch-action: none;
}
.gallery-lightbox-content img {
	-webkit-user-drag: none;
	user-select: none;
	transform-origin: center;
}
.gallery-lightbox-content img,
.gallery-lightbox-content video {
	max-width: 90vw;
	max-height: 90vh;
}
.gallery-video-wrap {
	position: relative;
	display: inline-block;
}
.gallery-lightbox-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	padding: 0;
	border: none;
	background: var(--gallery-play-icon) center / 64px 64px no-repeat;
	color: transparent;
	font-size: 0;
	cursor: pointer;
}

.gallery-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(10, 7, 5, 0.9);
	display: none;
	place-items: center;
	z-index: 100;
	padding: 4vw;
}
.gallery-lightbox.gallery-open {
	display: grid;
}
.gallery-lightbox img {
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 6px;
}
/* Gallery lightbox controls: the button characters are hidden and replaced by
   placeholder base64 SVG icons (swap freely). Close sits top-right; prev and
   next are vertically centered, one on each edge, on desktop and mobile. */
.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
	position: absolute;
	z-index: 1;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	background-color: rgba(10, 7, 5, 0.55);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	color: transparent;
	font-size: 0;
	cursor: pointer;
}
.gallery-lightbox-close {
	top: 18px;
	right: 20px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTYgNmwxMiAxMk0xOCA2TDYgMTgiLz48L3N2Zz4=");
}
.gallery-lightbox-prev,
.gallery-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
}
.gallery-lightbox-prev {
	left: 12px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE1IDVsLTcgNyA3IDciLz48L3N2Zz4=");
}
.gallery-lightbox-next {
	right: 12px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkgNWw3IDctNyA3Ii8+PC9zdmc+");
}
/* Scroll lock while the gallery lightbox is open (class toggled by assets/scripts/gallery-lightbox.js) */
html.gallery-scroll-lock,
html.gallery-scroll-lock body {
	overflow: hidden;
}
.gallery-lightbox {
	overscroll-behavior: contain;
}
.hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}
@media (max-width: 860px) {
	.hero {
		grid-template-columns: 1fr;
	}
}
.hero-img {
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--shadow);
}
.hero-img img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.page-head {
	padding: clamp(3rem, 7vw, 5.5rem) 0 0;
}
.crumbs {
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 1.4rem;
}
.crumbs a {
	text-decoration: none;
}
.crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.crumbs li + li::before {
	content: "·";
	margin: 0 0.5em;
	opacity: 0.5;
}

.list-check {
	list-style: none;
	padding: 0;
	margin: 1.4rem 0 0;
}
.list-check li {
	padding-left: 1.6rem;
	position: relative;
	margin-bottom: 0.7rem;
	color: var(--ink-soft);
}
.list-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--brand-soft);
}