/*
 * SYS — Product description layout (NEW Journal3 site)
 * ----------------------------------------------------
 * Loaded only on product pages via catalog/controller/product/product.php
 */

/* ----------------------------------------------------------
 * 1) Show full description (no Journal3 expand cut-off)
 * ---------------------------------------------------------- */
#product-product .product-blocks .expand-content,
#product-product .tabs-container .expand-content,
#product-product .module-product_tabs .expand-content {
	max-height: none !important;
	overflow: visible !important;
}

#product-product .product-blocks .block-expand-overlay,
#product-product .tabs-container .block-expand-overlay,
#product-product .module-product_tabs .block-expand-overlay {
	display: none !important;
}

/* ----------------------------------------------------------
 * 2) Description content width + spacing
 * ---------------------------------------------------------- */
#product-product .product-blocks .block-content,
#product-product .tabs-container .block-content,
#product-product .module-product_tabs .block-content {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

#product-product .block-content section,
#product-product .block-content #descricao,
#product-product .block-content #caracteristicas,
#product-product .block-content #beneficios,
#product-product .block-content #conteudo,
#product-product .block-content #instrucoes,
#product-product .block-content #dicas,
#product-product .block-content #tabela-resistencias,
#product-product .block-content #estilos-resistencias,
#product-product .block-content #seguranca-cuidados {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	clear: both;
}

#product-product .block-content h1,
#product-product .block-content h2,
#product-product .block-content h3,
#product-product .tabs-container .block-content h1,
#product-product .tabs-container .block-content h2,
#product-product .tabs-container .block-content h3,
#product-product .module-product_tabs .block-content h1,
#product-product .module-product_tabs .block-content h2,
#product-product .module-product_tabs .block-content h3 {
	margin: 0 0 12px;
	line-height: 1.35;
}

/*
 * Green commitment text + section titles are <h2> with NO inline font-size.
 * Journal3 (and rem after Bootstrap html change) makes those h2s too large vs OLD Journal2.
 * Lock description heading sizes in px so NEW matches OLD (medium headings).
 */
#product-product .block-content h2,
#product-product .tabs-container .block-content h2,
#product-product .module-product_tabs .block-content h2,
#product-product .product-blocks .block-content h2 {
	font-size: 18px !important;
	font-weight: 600;
}

#product-product .block-content h3,
#product-product .tabs-container .block-content h3,
#product-product .module-product_tabs .block-content h3,
#product-product .product-blocks .block-content h3 {
	font-size: 16px !important;
	font-weight: 600;
}

#product-product .block-content footer h2,
#product-product .tabs-container .block-content footer h2,
#product-product .module-product_tabs .block-content footer h2 {
	font-size: 18px !important;
	font-weight: 600;
	margin: 0.25em 0;
}

#product-product .block-content footer h2 span,
#product-product .tabs-container .block-content footer h2 span,
#product-product .module-product_tabs .block-content footer h2 span {
	font-size: inherit !important;
}

/*
 * ROOT CAUSE (DevTools):
 * Description HTML: <header><h1><p><span>Title…</span></p></h1></header>
 * Journal3 site chrome uses:
 *   header::before { content:''; height:35px; background: brand-red }
 * Product <header> inherits that → red bar covers the title.
 * Products without <header> in HTML show the title normally.
 */
#product-product .block-content header,
#product-product .tabs-container .block-content header,
#product-product .module-product_tabs .block-content header,
#product-product .product-blocks .block-content header {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	background: transparent !important;
	background-image: none !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: normal !important;
	position: static !important;
	overflow: visible !important;
	box-shadow: none !important;
	border: 0 !important;
	transform: none !important;
}

#product-product .block-content header::before,
#product-product .block-content header::after,
#product-product .tabs-container .block-content header::before,
#product-product .tabs-container .block-content header::after,
#product-product .module-product_tabs .block-content header::before,
#product-product .module-product_tabs .block-content header::after,
#product-product .product-blocks .block-content header::before,
#product-product .product-blocks .block-content header::after {
	content: none !important;
	display: none !important;
	background: none !important;
	height: 0 !important;
	width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#product-product .block-content header h1,
#product-product .block-content header h2,
#product-product .block-content header p,
#product-product .block-content header span {
	color: #111111 !important;
	background: none !important;
	display: block;
	margin: 0 0 8px;
	line-height: 1.35;
	position: static !important;
	overflow: visible !important;
	height: auto !important;
	max-height: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/*
 * OLD site titles are large (often ~1.8em on h1).
 * NEW HTML is often <header><h1><p><span>…</span></p></h1></header>
 * with only color/font-family on the span → looks like body text.
 * Force a clear H1 size for that title block.
 */
#product-product .block-content header > h1,
#product-product .tabs-container .block-content header > h1,
#product-product .module-product_tabs .block-content header > h1,
#product-product .product-blocks .block-content header > h1 {
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 0 14px !important;
}

#product-product .block-content header > h1 p,
#product-product .block-content header > h1 span,
#product-product .tabs-container .block-content header > h1 p,
#product-product .tabs-container .block-content header > h1 span,
#product-product .module-product_tabs .block-content header > h1 p,
#product-product .module-product_tabs .block-content header > h1 span,
#product-product .product-blocks .block-content header > h1 p,
#product-product .product-blocks .block-content header > h1 span {
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	color: #111111 !important;
}

@media (max-width: 760px) {
	#product-product .block-content header > h1,
	#product-product .block-content header > h1 p,
	#product-product .block-content header > h1 span,
	#product-product .tabs-container .block-content header > h1,
	#product-product .tabs-container .block-content header > h1 p,
	#product-product .tabs-container .block-content header > h1 span,
	#product-product .module-product_tabs .block-content header > h1,
	#product-product .module-product_tabs .block-content header > h1 p,
	#product-product .module-product_tabs .block-content header > h1 span,
	#product-product .product-blocks .block-content header > h1,
	#product-product .product-blocks .block-content header > h1 p,
	#product-product .product-blocks .block-content header > h1 span {
		font-size: 22px !important;
	}
}

/*
 * Default body text in description = dark (readable on light yellow/blue/cream boxes).
 * Do NOT use !important on generic p/li — that hid OLD tip colors like orange #b36b00
 * (nicotine warning) and other inline colors. Inline style must win for tips.
 * Red banner H1–H3 still force white below.
 */
#product-product .block-content {
	color: #222222;
}

#product-product .block-content p,
#product-product .block-content li,
#product-product .block-content td,
#product-product .block-content th {
	color: #222222;
}

#product-product .block-content p {
	margin: 0 0 12px;
	line-height: 1.55;
}

/*
 * ONLY solid red banner H1–H3 titles get white text (not light pastel section boxes).
 */
#product-product .block-content h1[style*="da0a22"],
#product-product .block-content h2[style*="da0a22"],
#product-product .block-content h3[style*="da0a22"],
#product-product .block-content h1[style*="DA0A22"],
#product-product .block-content h2[style*="DA0A22"],
#product-product .block-content h3[style*="DA0A22"],
#product-product .block-content h1[style*="e30613"],
#product-product .block-content h2[style*="e30613"],
#product-product .block-content h3[style*="e30613"],
#product-product .block-content h1[style*="E30613"],
#product-product .block-content h2[style*="E30613"],
#product-product .block-content h3[style*="E30613"],
#product-product .block-content h1[style*="218, 10, 34"],
#product-product .block-content h2[style*="218, 10, 34"],
#product-product .block-content h3[style*="218, 10, 34"],
#product-product .block-content h1[style*="218,10,34"],
#product-product .block-content h2[style*="218,10,34"],
#product-product .block-content h3[style*="218,10,34"] {
	color: #ffffff !important;
}

#product-product .block-content h1[style*="da0a22"] *,
#product-product .block-content h2[style*="da0a22"] *,
#product-product .block-content h3[style*="da0a22"] *,
#product-product .block-content h1[style*="DA0A22"] *,
#product-product .block-content h2[style*="DA0A22"] *,
#product-product .block-content h3[style*="DA0A22"] *,
#product-product .block-content h1[style*="e30613"] *,
#product-product .block-content h2[style*="e30613"] *,
#product-product .block-content h3[style*="e30613"] *,
#product-product .block-content h1[style*="E30613"] *,
#product-product .block-content h2[style*="E30613"] *,
#product-product .block-content h3[style*="E30613"] *,
#product-product .block-content h1[style*="218, 10, 34"] *,
#product-product .block-content h2[style*="218, 10, 34"] *,
#product-product .block-content h3[style*="218, 10, 34"] *,
#product-product .block-content h1[style*="218,10,34"] *,
#product-product .block-content h2[style*="218,10,34"] *,
#product-product .block-content h3[style*="218,10,34"] * {
	color: #ffffff !important;
}

#product-product .block-content ul,
#product-product .block-content ol {
	margin: 0 0 16px;
	padding-left: 1.4em;
	width: auto;
	max-width: 100%;
}

#product-product .block-content li {
	margin: 0 0 6px;
	line-height: 1.5;
}

/*
 * Product description tables — match OLD full-grid look.
 * Journal3 often drops vertical borders / tightens cell padding.
 */
#product-product .block-content table {
	width: 100% !important;
	max-width: 100%;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	margin: 12px 0 16px !important;
	table-layout: auto;
	background: #fffef8;
	border: 1px solid #c9a227 !important;
}

#product-product .block-content table th,
#product-product .block-content table td {
	border: 1px solid #c9a227 !important;
	padding: 10px 12px !important;
	vertical-align: middle !important;
	color: #222222 !important;
	line-height: 1.45 !important;
	font-size: 14px !important;
	word-break: break-word;
}

#product-product .block-content table th {
	font-weight: 700 !important;
	text-align: center !important;
	background: #f0d78a !important;
	color: #222222 !important;
}

#product-product .block-content table td {
	background: #fffdf5 !important;
	text-align: left;
}

#product-product .block-content table td:first-child,
#product-product .block-content table td:nth-child(2) {
	text-align: center;
	white-space: nowrap;
}

#product-product .block-content table tr:nth-child(even) td {
	background: #fff8e4 !important;
}

#product-product .block-content table thead th {
	background: #e8c96a !important;
}

/* Scroll wrapper for wide tables on mobile */
#product-product .block-content [style*="overflow-x"],
#product-product .block-content .table-responsive {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
	#product-product .block-content table th,
	#product-product .block-content table td {
		padding: 8px 8px !important;
		font-size: 13px !important;
	}

	#product-product .block-content table td:first-child,
	#product-product .block-content table td:nth-child(2) {
		white-space: normal;
	}
}

#product-product .block-content img {
	max-width: 100%;
	height: auto;
}