/**
 * Descrições de produto migradas do OpenCart.
 *
 * O HTML das descrições veio do tema vowt e depende de três coisas que o
 * Flatsome não fornece: as variáveis de cor da marca, um punhado de
 * utilitários de grid do Bootstrap 5 e as regras próprias da descrição.
 *
 * Tudo aqui está escopado em #description-customized. Isso resolve dois
 * problemas de uma vez: nada vaza para o resto do site, e as regras
 * ganham do Flatsome por especificidade (um ID vence qualquer classe),
 * então .row e .col do tema não brigam com os da descrição.
 */

/* -----------------------------------------------------------------
 * Variáveis da marca (originalmente em :root no vowt.css)
 * ----------------------------------------------------------------- */
#description-customized {
	--lb-primary: #e79eb1;
	--lb-text:    #60546a;
	--lb-green:   #92bc57;
	--lb-purple:  #b580ae;
	--lb-pink:    #e79eb1;
	--lb-blue:    #00b3c7;
	--lb-beige:   #f0aa88;
	--lb-red:     #ea5d5d;

	--lb-fonte-titulo: 'Lilita One', 'Trebuchet MS', sans-serif;
	--lb-fonte-texto:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* -----------------------------------------------------------------
 * Grid e utilitários (subconjunto do Bootstrap 5 usado pelos blocos)
 * ----------------------------------------------------------------- */
#description-customized {
	box-sizing: border-box;
	font-family: var(--lb-fonte-texto);
}
#description-customized *,
#description-customized *::before,
#description-customized *::after {
	box-sizing: inherit;
}

#description-customized.container,
#description-customized .container {
	width: 100%;
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: 12px;
}

#description-customized .row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -12px;
}
#description-customized .row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-inline: 12px;
}
#description-customized .col {
	flex: 1 0 0%;
}
#description-customized .row-cols-2 > * { width: 50%; }

#description-customized .d-flex                { display: flex; }
#description-customized .align-items-center    { align-items: center; }
#description-customized .justify-content-center{ justify-content: center; }
#description-customized .text-center           { text-align: center; }
#description-customized .mb-4                  { margin-bottom: 1.5rem; }
#description-customized .me-3                  { margin-right: 1rem; }

@media (min-width: 992px) {
	#description-customized .col-lg-6        { width: 50%; flex: 0 0 auto; }
	#description-customized .row-cols-lg-5 > * { width: 20%; }
	#description-customized .row-cols-lg-6 > * { width: 16.6666666667%; }
}

/* -----------------------------------------------------------------
 * Regras da descrição (portadas de vowt/stylesheet/modules/product.css)
 * ----------------------------------------------------------------- */
#description-customized {
	color: var(--lb-text);
	font-size: 20px;
}
#description-customized h2,
#description-customized h3,
#description-customized h4 {
	font-family: var(--lb-fonte-titulo);
	font-weight: 400;
	color: inherit;
}
#description-customized h2 { font-size: 56px; line-height: 75px; }
#description-customized h3 { font-size: 48px; line-height: normal; text-transform: uppercase; margin-top: 16px; }
#description-customized h4 { font-size: 32px; line-height: 175%; margin-top: 24px; }
#description-customized h5 { font-size: 15px; font-weight: 700; line-height: 175%; margin-top: 16px; }

#description-customized .title-description  { text-align: center; }
#description-customized .border-bottom-gray { border-bottom: 1px solid #ededed; }
#description-customized .text-description   { line-height: 175%; }
#description-customized .box-text {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: start;
}
#description-customized .golpes-phrase { font-size: 24px; line-height: 150%; font-weight: 400; margin-top: 24px; }
#description-customized .phrase-blue   { font-weight: 700; color: var(--lb-blue); }
#description-customized .phrase-red    { font-weight: 700; color: var(--lb-red); }

#description-customized .text-description > .row { row-gap: 80px; }
#description-customized .kit-container > .row    { row-gap: 40px; justify-content: center; }
#description-customized .kit-container img,
#description-customized .container-example-golpe img { border-radius: 100%; }
#description-customized .kit-container img { width: 100%; }
#description-customized .kit-container .phrase-kit { font-size: 20px; line-height: 175%; }

#description-customized .container-img-text { display: flex; gap: 24px; }
#description-customized .img-infos img      { width: 100%; }

#description-customized .pt-80 { padding-top: 80px; }
#description-customized .pb-80 { padding-bottom: 80px; }
#description-customized .pt-40 { padding-top: 40px; }
#description-customized .pb-40 { padding-bottom: 40px; }

/* Os ícones viraram SVG inline na migração; .true/.false davam a cor
   quando eram <i> da fonte Bootstrap Icons. */
#description-customized .true  .lb-icone { color: #25b700; }
#description-customized .false .lb-icone { color: #d81e1e; }
#description-customized .lb-icone {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	margin-right: 8px;
}

#description-customized .btn-whatsapp-description {
	font-family: var(--lb-fonte-titulo);
	font-size: 32px;
	padding: 0 32px;
	background: #25b700;
	border-radius: 24px;
	color: #fff;
	display: inline-flex;
	height: 64px;
	align-items: center;
	margin: 64px 0 16px;
	text-decoration: none;
}
#description-customized .btn-whatsapp-description .lb-icone {
	width: 1em;
	height: 1em;
}

/* O OpenCart servia o iframe com 560x315 fixos. */
#description-customized .lb-video {
	position: relative;
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
	aspect-ratio: 16 / 9;
}
#description-customized .lb-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

#description-customized img {
	max-width: 100%;
	height: auto;
}

/* -----------------------------------------------------------------
 * Mobile
 * ----------------------------------------------------------------- */
@media (max-width: 991px) {
	#description-customized                       { font-size: 16px; }
	#description-customized .svg-container svg    { width: 120px; height: 120px; }
	#description-customized iframe,
	#description-customized img                   { width: 100%; }
	#description-customized h2                    { font-size: 24px; line-height: 35px; }
	#description-customized h3                    { font-size: 22px; }
	#description-customized h4                    { font-size: 20px; line-height: normal; margin-top: 10px; text-align: center; }
	#description-customized h5                    { font-size: 14px; line-height: normal; }
	#description-customized .pt-80                { padding-top: 26px; }
	#description-customized .pb-80                { padding-bottom: 26px; }
	#description-customized .pt-40                { padding-top: 16px; }
	#description-customized .pb-40                { padding-bottom: 16px; }
	#description-customized .container-img-text   { flex-direction: column; }
	#description-customized .container-img-text .col-text { order: 1; }
	#description-customized .container-img-text .col-img  { order: 0; }
	#description-customized .icon-warning svg     { width: 248px; }
	#description-customized .kit-container .phrase-kit { font-size: 12px; line-height: normal; }
	#description-customized .true                 { margin-bottom: 16px; }
	#description-customized .btn-whatsapp-description { font-size: 13px; height: 42px; }
	#description-customized .golpes-phrase        { font-size: 20px; }
	#description-customized .lb-icone             { width: 24px; height: 24px; }
}