/*
Theme Name: Atelie442
Theme URI: https://atelie442.com.br
Description: Child theme do Kadence para o Atelie442 — catálogo de violinos, arcos e acessórios. O instrumento é tratado como objeto medido: espectro, milímetros e procedência declarada.
Author: Atelie442
Template: kadence
Version: 1.0.0
Text Domain: atelie442
*/

/* =========================================================================
   1. Tokens
   Verde de forro de estojo como estrutura, papel frio, tinta quase preta.
   O único evento cromático é o verde-sinal, reservado para o dado sonoro
   e para o foco de teclado.
   ====================================================================== */

:root {
	--a442-paper: #f5f7f5;
	--a442-paper-deep: #ebefec;
	--a442-ink: #0e1c18;
	--a442-felt: #143a31;
	--a442-felt-deep: #0c231e;
	--a442-muted: #5c6b65;
	--a442-chalk: #dde3df;
	--a442-signal: #2fa98a;

	--a442-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--a442-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--a442-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--a442-measure: 68ch;
	--a442-gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* =========================================================================
   2. Base
   ====================================================================== */

body.a442 {
	background: var(--a442-paper);
	color: var(--a442-ink);
	font-family: var(--a442-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

body.a442 h1,
body.a442 h2,
body.a442 h3,
body.a442 .entry-title,
body.a442 .product_title {
	font-family: var(--a442-serif);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.08;
	color: var(--a442-ink);
}

body.a442 h1,
body.a442 .product_title.entry-title {
	font-size: clamp(2.1rem, 4.6vw, 3.4rem);
}

body.a442 h2 {
	font-size: clamp(1.6rem, 3vw, 2.3rem);
}

body.a442 a {
	color: var(--a442-felt);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

body.a442 a:hover {
	color: var(--a442-signal);
}

body.a442 :focus-visible {
	outline: 2px solid var(--a442-signal);
	outline-offset: 3px;
}

/* =========================================================================
   3. Botões
   ====================================================================== */

body.a442 .button,
body.a442 button,
body.a442 input[type="submit"],
body.a442 .wp-block-button__link,
body.a442 .woocommerce a.button,
body.a442 .woocommerce button.button.alt {
	font-family: var(--a442-sans);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	border-radius: 2px;
	padding: 0.85rem 1.5rem;
	background: var(--a442-felt);
	color: var(--a442-paper);
	border: 1px solid var(--a442-felt);
	transition: background-color 0.18s ease, color 0.18s ease;
}

body.a442 .button:hover,
body.a442 .woocommerce a.button:hover,
body.a442 .woocommerce button.button.alt:hover {
	background: var(--a442-felt-deep);
	border-color: var(--a442-felt-deep);
	color: var(--a442-paper);
}

body.a442 .a442-btn--solid {
	display: inline-block;
	padding: 0.9rem 1.6rem;
	background: var(--a442-felt);
	color: var(--a442-paper);
	border: 1px solid var(--a442-felt);
	border-radius: 2px;
	text-decoration: none;
	font-family: var(--a442-sans);
	font-weight: 500;
}

body.a442 .a442-btn--solid:hover {
	background: var(--a442-felt-deep);
	color: var(--a442-paper);
}

/* =========================================================================
   4. Abertura da home — a régua do 442
   A régua é uma escala, não um dado. Só o tique de referência é destacado,
   porque 442 Hz é a afinação que o ateliê padroniza.
   ====================================================================== */

.a442-hero {
	max-width: var(--a442-measure);
	margin: clamp(2.5rem, 7vw, 5.5rem) auto clamp(2rem, 5vw, 4rem);
	padding: 0 1.25rem;
}

.a442-hero__eyebrow {
	margin: 0 0 1.4rem;
	font-family: var(--a442-mono);
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--a442-muted);
}

.a442-hero__title {
	margin: 0;
	font-family: var(--a442-serif);
	font-size: clamp(2.4rem, 6.2vw, 4.4rem);
	line-height: 1.02;
	letter-spacing: -0.015em;
}

.a442-rule {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 34px;
	margin: 2.4rem 0 1rem;
	position: relative;
}

.a442-rule__tick {
	display: block;
	width: 1px;
	height: 9px;
	background: var(--a442-chalk);
}

.a442-rule__tick--ref {
	height: 30px;
	width: 2px;
	background: var(--a442-signal);
}

.a442-rule__label {
	margin-left: 0.9rem;
	font-family: var(--a442-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: var(--a442-signal);
	align-self: center;
}

.a442-hero__cta {
	margin: 1.6rem 0 0;
}

/* =========================================================================
   5. Catálogo
   ====================================================================== */

body.a442.woocommerce ul.products li.product,
body.a442 .woocommerce ul.products li.product {
	position: relative;
	background: transparent;
	border: 0;
	padding: 0 0 1.6rem;
}

body.a442 ul.products li.product .woocommerce-loop-product__title,
body.a442 ul.products li.product h2 {
	font-family: var(--a442-serif);
	font-size: 1.45rem;
	line-height: 1.15;
	margin: 0.7rem 0 0.15rem;
	padding: 0;
}

body.a442 ul.products li.product .price {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--a442-mono);
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	color: var(--a442-ink);
}

body.a442 ul.products li.product img {
	border-radius: 2px;
	background: var(--a442-paper-deep);
}

body.a442 ul.products li.product .a442-loop__link {
	display: inline-block;
	margin-top: 0.9rem;
	padding: 0.6rem 1.1rem;
	background: transparent;
	color: var(--a442-felt);
	border: 1px solid var(--a442-chalk);
	font-size: 0.88rem;
}

body.a442 ul.products li.product .a442-loop__link:hover {
	border-color: var(--a442-felt);
	background: transparent;
	color: var(--a442-felt);
}

body.a442 .woocommerce-result-count,
body.a442 .woocommerce-ordering select {
	font-family: var(--a442-mono);
	font-size: 0.8rem;
	color: var(--a442-muted);
}

/* =========================================================================
   6. Ficha do instrumento
   ====================================================================== */

body.a442.single-product .product_title {
	margin: 0 0 0.2rem;
}

body.a442.single-product .summary .price,
body.a442.single-product p.price {
	font-family: var(--a442-mono);
	font-size: 1.55rem;
	font-variant-numeric: tabular-nums;
	color: var(--a442-ink);
	margin: 1.2rem 0 0.4rem;
}

body.a442.single-product .summary .price del {
	color: var(--a442-muted);
	font-size: 1rem;
}

body.a442.single-product .woocommerce-product-details__short-description {
	max-width: 46ch;
	color: var(--a442-ink);
}

body.a442.single-product .woocommerce-product-gallery img {
	border-radius: 2px;
	background: var(--a442-paper-deep);
}

body.a442.single-product .quantity {
	display: inline-block;
}

body.a442-unique .quantity {
	display: none;
}

body.a442 .woocommerce-tabs ul.tabs li a {
	font-family: var(--a442-sans);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body.a442 .woocommerce-tabs .panel {
	max-width: var(--a442-measure);
	line-height: 1.75;
}

/* A ficha do plugin herda estes valores. */
body.a442 .a442-dossier {
	max-width: 100%;
}

body.a442 .a442-section--spec .a442-spec {
	max-width: 46rem;
}

body.a442 .a442-section--notes {
	max-width: var(--a442-measure);
}

/* =========================================================================
   7. Rodapé e blocos escuros
   ====================================================================== */

body.a442 .site-footer,
body.a442 .a442-dark {
	background: var(--a442-felt-deep);
	color: var(--a442-paper);
}

body.a442 .site-footer a,
body.a442 .a442-dark a {
	color: var(--a442-paper);
}

body.a442 .site-footer a:hover,
body.a442 .a442-dark a:hover {
	color: var(--a442-signal);
}

/* =========================================================================
   8. Responsivo
   ====================================================================== */

@media (max-width: 767px) {
	body.a442 {
		font-size: 1rem;
	}

	.a442-rule {
		gap: 4px;
		overflow: hidden;
	}

	body.a442 ul.products li.product .woocommerce-loop-product__title,
	body.a442 ul.products li.product h2 {
		font-size: 1.25rem;
	}

	body.a442 .a442-spec th {
		width: 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.a442 *,
	body.a442 *::before,
	body.a442 *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}


/* =========================================================================
   9. Integração com o grid do Kadence
   O bloco da ficha é injetado dentro do container do produto; sem isto ele
   entra como item do grid e sobe para a linha da galeria.
   ====================================================================== */

body.a442 .a442-dossier {
	grid-column: 1 / -1;
	width: 100%;
	clear: both;
	margin-top: 3.5rem;
}

body.a442 .a442-note-block__title {
	font-family: var(--a442-sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--a442-muted);
}

body.a442.single-product .product_title.entry-title {
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
}


/* =========================================================================
   9. Integração com o layout do Kadence
   A galeria do produto flutua à esquerda; sem o clear, o bloco da ficha
   sobe e se espreme ao lado dela.
   ====================================================================== */

body.a442 .a442-dossier {
	clear: both;
	width: 100%;
	margin-top: 3.5rem;
}

body.a442 .a442-section__title {
	font-family: var(--a442-sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body.a442 .a442-note-block__title {
	font-family: var(--a442-sans);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--a442-muted);
}

body.a442.single-product .product_title.entry-title {
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
}