/* Atelie442 Core — estrutura dos componentes da ficha.
   As cores vêm de variáveis; o tema filho as redefine. Aqui só existem
   os valores de reserva, para o plugin não ficar cru se o tema mudar. */

:root {
	--a442-paper: #f5f7f5;
	--a442-ink: #0e1c18;
	--a442-felt: #143a31;
	--a442-muted: #5c6b65;
	--a442-chalk: #dde3df;
	--a442-signal: #2fa98a;
	--a442-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--a442-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--a442-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- linha de identidade ------------------------------------------- */

.a442-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 0 0.4rem;
	font-family: var(--a442-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--a442-muted);
}

.a442-code {
	padding: 0.18rem 0.45rem;
	border: 1px solid var(--a442-chalk);
	border-radius: 2px;
	color: var(--a442-felt);
	background: transparent;
}

.a442-subline {
	margin: 0 0 1rem;
	font-family: var(--a442-sans);
	font-size: 0.95rem;
	color: var(--a442-muted);
}

.a442-treatment {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.8rem 0;
	font-family: var(--a442-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--a442-felt);
}

.a442-treatment__mark {
	display: inline-block;
	width: 26px;
	height: 8px;
	background:
		linear-gradient(90deg, var(--a442-signal) 0 2px, transparent 2px 4px) repeat-x;
	background-size: 4px 8px;
	opacity: 0.9;
}

.a442-badge {
	position: absolute;
	z-index: 2;
	top: 0.6rem;
	left: 0.6rem;
	padding: 0.2rem 0.5rem;
	font-family: var(--a442-mono);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--a442-paper);
	background: var(--a442-felt);
	border-radius: 2px;
}

.a442-stock {
	font-family: var(--a442-mono);
	font-size: 0.8rem;
}

/* --- contato --------------------------------------------------------- */

.a442-contact {
	margin: 1.2rem 0 0;
}

.a442-btn--talk {
	display: inline-block;
	padding: 0.85rem 1.4rem;
	border: 1px solid var(--a442-felt);
	border-radius: 2px;
	font-family: var(--a442-sans);
	font-size: 0.95rem;
	color: var(--a442-felt);
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.a442-btn--talk:hover,
.a442-btn--talk:focus {
	background: var(--a442-felt);
	color: var(--a442-paper);
}

.a442-showroom {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	color: var(--a442-muted);
}

/* --- seções da ficha -------------------------------------------------- */

.a442-dossier {
	margin: 3.5rem 0 0;
}

.a442-section {
	margin: 0 0 3rem;
}

.a442-section__title {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 1.1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--a442-chalk);
	font-family: var(--a442-sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--a442-ink);
}

.a442-tick {
	font-family: var(--a442-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--a442-signal);
	padding-right: 0.8rem;
	border-right: 1px solid var(--a442-chalk);
}

/* --- impressão sonora -------------------------------------------------- */

.a442-soundprint {
	margin: 0;
}

.a442-soundprint__img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--a442-paper);
}

.a442-soundprint__caption {
	margin-top: 0.6rem;
	font-family: var(--a442-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--a442-muted);
}

/* --- vídeo -------------------------------------------------------------- */

.a442-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--a442-felt);
	overflow: hidden;
}

.a442-video__play {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.a442-video__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.a442-video__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 66px;
	height: 66px;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(245, 247, 245, 0.9);
	border-radius: 50%;
	background: rgba(20, 58, 49, 0.72);
	transition: background-color 0.18s ease;
}

.a442-video__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-left: 15px solid var(--a442-paper);
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}

.a442-video__play:hover .a442-video__icon,
.a442-video__play:focus-visible .a442-video__icon {
	background: var(--a442-felt);
}

.a442-video__frame {
	width: 100%;
	height: 100%;
	border: 0;
}

.a442-note {
	margin: 0.7rem 0 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--a442-muted);
}

/* --- ficha técnica ------------------------------------------------------ */

.a442-spec {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--a442-mono);
	font-size: 0.85rem;
}

.a442-spec th,
.a442-spec td {
	padding: 0.7rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--a442-chalk);
}

.a442-spec th {
	width: 42%;
	font-weight: 400;
	color: var(--a442-muted);
}

.a442-spec td {
	color: var(--a442-ink);
	font-variant-numeric: tabular-nums;
}

/* --- notas -------------------------------------------------------------- */

.a442-note-block {
	margin: 0 0 1.6rem;
}

.a442-note-block__title {
	margin: 0 0 0.35rem;
	font-family: var(--a442-sans);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--a442-ink);
}

.a442-note-block p {
	margin: 0;
	line-height: 1.7;
	color: var(--a442-ink);
}

/* --- laudo -------------------------------------------------------------- */

.a442-laudo {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--a442-chalk);
	border-left: 3px solid var(--a442-signal);
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.a442-laudo:hover,
.a442-laudo:focus-visible {
	background: rgba(47, 169, 138, 0.06);
}

.a442-laudo__label {
	font-family: var(--a442-sans);
	font-weight: 600;
	color: var(--a442-ink);
}

.a442-laudo__hint {
	font-family: var(--a442-mono);
	font-size: 0.72rem;
	color: var(--a442-muted);
}

/* --- catálogo ------------------------------------------------------------ */

.a442-loop__code {
	display: block;
	font-family: var(--a442-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--a442-signal);
}

.a442-loop__origin {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--a442-muted);
}

.a442-loop__sound {
	display: block;
	height: 26px;
	margin-top: 0.7rem;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 0.75;
	filter: grayscale(1);
	transition: opacity 0.2s ease, filter 0.2s ease;
}

li.product:hover .a442-loop__sound {
	opacity: 1;
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.a442-btn--talk,
	.a442-loop__sound,
	.a442-video__icon,
	.a442-laudo {
		transition: none;
	}
}