/*
 * DEV-638 - subconjunto CRITICO de soulrecurrence/style.css.
 *
 * Recorte: so a GEOMETRIA das classes que o grid.phtml pinta no card da
 * vitrine (createBlock('soulrecurrence/frontend_price')->setType('grid'), que
 * renderiza soulmkt/soulrecurrence/price.phtml com <div class="area-recurrence">).
 * Sem isto no primeiro paint o preco de recorrencia nasce sem display/float/
 * width e reposiciona quando o CSS chega - reflow na vitrine.
 *
 * Regra do recorte: entra o que afeta CAIXA (display, float, width, max-width,
 * flex, margin); cor, fonte e peso ficam no style.css, que e deferido.
 * Regenerar com o mesmo critério se as regras de .area-recurrence ou
 * .block-recurrence do style.css mudarem.
 *
 * Os px abaixo sao copia byte a byte do style.css de proposito - o preflight
 * marca C1 (preferir rem), mas converter aqui divergiria do arquivo deferido.
 * Se a convencao mudar, mude nos dois.
 */
.area-recurrence { display: block; float: left; margin-top: 10px; width: 100%; }
.area-recurrence .label-discount,
.area-recurrence .label-discount .label-discount,
.area-recurrence .price-recurrence { display: block; float: left; width: 100%; }
.area-recurrence .price-recurrence { margin-top: 5px; }
.area-recurrence span i { margin-right: 4px; }

@media screen and (max-width:1199px) {
    .block-recurrence { flex: 0 0 100%; max-width: 100%; }
    .three_columns .block-recurrence { max-width: 50%; }
}
@media screen and (max-width:767px) {
    .block-recurrence { flex: 0 0 50%; max-width: 50%; }
}
@media screen and (max-width:575px) {
    .block-recurrence { flex: 0 0 100%; max-width: 100%; }
    .three_columns .block-recurrence { max-width: 100%; }
}