/**
 * 777 Design System — foundations (V1B).
 *
 * Primitivos semânticos de tipografia e container. A Shop 2 é mapeada para
 * estes fundamentos sem alterar texto, níveis de heading ou estrutura HTML.
 */

.ts777-eyebrow {
	color: var(--777-color-text);
	font-family: var(--777-font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.ts777-display-heading,
.ts777-section-heading {
	color: var(--777-color-gold);
	font-family: var(--777-font-display);
	font-weight: var(--777-font-weight-display);
	letter-spacing: normal;
}

.ts777-body {
	color: var(--777-color-text);
	font-family: var(--777-font-body);
	font-size: var(--777-font-size-body);
	font-weight: var(--777-font-weight-body);
	line-height: var(--777-line-height-body);
}

.ts777-meta {
	color: var(--777-color-text-muted);
	font-family: var(--777-font-body);
	font-size: 12px;
	font-weight: var(--777-font-weight-body);
	line-height: 1.4;
}

.ts777-container {
	box-sizing: border-box;
	width: min(
		calc(100% - (2 * var(--777-container-gutter-mobile))),
		var(--777-container-max)
	);
	margin-inline: auto;
}

/*
 * O Customizer legado é emitido depois do child theme e contém declarações
 * !important para estas classes. As exceções abaixo ficam deliberadamente
 * limitadas à Shop 2 e serão removidas quando a origem legada for consolidada.
 */
html body.woocommerce-shop .ts-eyebrow {
	color: var(--777-color-text) !important;
	font-family: var(--777-font-body) !important;
	font-weight: 700 !important;
	letter-spacing: 4px !important;
}

html body.woocommerce-shop .ts-shop-title,
html body.woocommerce-shop .ts-section-title {
	color: var(--777-color-gold) !important;
	font-family: var(--777-font-display) !important;
	font-weight: var(--777-font-weight-display) !important;
	letter-spacing: normal !important;
}

html body.woocommerce-shop .ts-hero-copy,
html body.woocommerce-shop .ts-card-copy,
html body.woocommerce-shop .ts-collection-copy,
html body.woocommerce-shop .ts-art-body {
	color: var(--777-color-text) !important;
	font-family: var(--777-font-body) !important;
}

html body.woocommerce-shop .ts-mini-unit {
	color: var(--777-color-text-muted) !important;
	font-family: var(--777-font-body) !important;
}

/*
 * V1B.1 — a Shop 2 ainda tinha headings editoriais a herdar peso 800/900,
 * tracking negativo e branco do CSS legado. Estes elementos passam a usar o
 * mesmo papel de section heading de RV05, sem alterar níveis ou conteúdo.
 */
html body.woocommerce-shop .woocommerce-products-header .page-description .ts-feature-title,
html body.woocommerce-shop .woocommerce-products-header .page-description .ts-category-tile h4,
html body.woocommerce-shop .woocommerce-products-header .page-description .ts-mini-tile h4,
html body.woocommerce-shop .woocommerce-products-header .page-description .ts-collection-title,
html body.woocommerce-shop .woocommerce-products-header .page-description .ts-art-name {
	color: var(--777-color-gold) !important;
	font-family: var(--777-font-display) !important;
	font-weight: var(--777-font-weight-display) !important;
	letter-spacing: normal !important;
}

/*
 * Stats e newsletter são superfícies douradas e mantêm a inversão cromática
 * existente. Só a família, peso e tracking são normalizados para RV05.
 */
html body.woocommerce-shop .woocommerce-products-header .page-description .ts-stats h4,
html body.woocommerce-shop .woocommerce-products-header .page-description .ts-newsletter-title {
	font-family: var(--777-font-display) !important;
	font-weight: var(--777-font-weight-display) !important;
	letter-spacing: normal !important;
}

html body.woocommerce-shop .woocommerce-products-header .page-description .ts-stats p,
html body.woocommerce-shop .woocommerce-products-header .page-description .ts-newsletter-copy {
	font-family: var(--777-font-body) !important;
}

html body.woocommerce-shop .woocommerce-products-header .page-description .ts-trust h5 {
	color: var(--777-color-text) !important;
	font-family: var(--777-font-body) !important;
	font-weight: 700 !important;
	letter-spacing: 4px !important;
	text-transform: uppercase !important;
}

/*
 * A área de catálogo deixa de ocupar toda a largura em desktop. Elementos
 * full-bleed da Shop 2 mantêm a sua técnica existente; o conteúdo interno
 * continua a ser limitado pelo .ts-inner já validado a 1200px.
 */
html body.post-type-archive-product #content .site-main,
html body.tax-product_cat #content .site-main {
	box-sizing: border-box;
	width: min(
		calc(100% - (2 * var(--777-container-gutter-mobile))),
		var(--777-container-max)
	) !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
}

/*
 * Os blocos alignfull legados usam 100vw, que inclui a largura da scrollbar e
 * acrescenta 8px de scroll horizontal. O recorte fica apenas no conteúdo das
 * páginas abrangidas; header, menu móvel, carrinho lateral e footer não são
 * afetados. Scrolls internos, como os chips da loja, mantêm overflow próprio.
 */
html body.woocommerce-shop #content,
html body.page-id-1005 #content,
html body.page-id-1432 #content {
	overflow-x: clip !important;
}

@media (min-width: 768px) {
	.ts777-container,
	html body.post-type-archive-product #content .site-main,
	html body.tax-product_cat #content .site-main {
		width: min(
			calc(100% - (2 * var(--777-container-gutter-desktop))),
			var(--777-container-max)
		) !important;
	}
}

/*
 * V1B.1 — ritmo responsivo exclusivo da composição editorial da Shop 2.
 * Os fundos full-bleed e o .ts-inner existente permanecem intactos.
 */
@media (max-width: 960px) {
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-shop-hero {
		min-height: 0 !important;
		padding: 72px 24px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-jewelry,
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-featured,
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-art {
		padding: 64px 24px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-category-tile {
		min-height: 190px !important;
		padding: 22px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-mini-tile {
		min-height: 170px !important;
		padding: 22px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-category-tile .ts-eyebrow,
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-mini-tile .ts-eyebrow {
		margin-bottom: 12px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-category-tile h4,
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-mini-tile .ts-mini-unit {
		margin-bottom: 0 !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-category-tile .wp-block-buttons,
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-mini-tile .wp-block-buttons {
		margin-top: 14px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-section-title {
		margin-bottom: 40px !important;
	}
}

@media (max-width: 600px) {
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-shop-hero {
		padding: 56px 16px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-stats {
		padding-block: 16px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-stats-grid .wp-block-column {
		padding: 12px 0 !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-jewelry,
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-featured,
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-art {
		padding: 48px 16px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-section-title {
		margin-bottom: 32px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-tile-row,
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-mini-grid {
		gap: 14px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-mini-grid {
		margin-top: 28px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-category-tile,
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-mini-tile {
		min-height: 0 !important;
		padding: 20px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-category-tile .ts-eyebrow,
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-mini-tile .ts-eyebrow {
		margin-bottom: 10px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-category-tile h4 {
		margin-bottom: 0 !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-mini-tile .ts-mini-unit {
		margin-bottom: 0 !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-category-tile .wp-block-buttons,
	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-mini-tile .wp-block-buttons {
		margin-top: 12px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-art-card {
		min-height: 360px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-art-card .wp-block-cover__inner-container {
		padding: 24px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-art-copy {
		padding-top: 36px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-trust {
		padding: 40px 16px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-trust-grid > .wp-block-column {
		margin-bottom: 16px !important;
	}

	html body.woocommerce-shop .woocommerce-products-header .page-description .ts-newsletter {
		min-height: 0 !important;
		padding: 48px 16px !important;
	}
}