/*
 * Base das seções de coleção, busca e páginas comuns (main-collection, main-search, main-page, rich-text,
 * contact-form, faq, main-404...): faixa da seção, largura da página, títulos, texto e botões.
 * Visual do tema publicado, com CSS próprio (tudo dentro de .rp-cl-section para não mexer no resto do tema).
 */

:root { --rp-cl-gutter: 20px; --rp-cl-pad-scale: .75; }
@media (min-width: 768px) { :root { --rp-cl-pad-scale: 1; } }
@media (min-width: 1280px) { :root { --rp-cl-gutter: 48px; } }

.rp-cl-section {
  position: relative;
  /* No celular o tema publicado usa 3/4 do espaço configurado. */
  padding-top: calc(var(--section-padding-top, 0px) * var(--rp-cl-pad-scale));
  padding-bottom: calc(var(--section-padding-bottom, 0px) * var(--rp-cl-pad-scale));
  background: var(--rp-cl-bg, #fff);
  color: var(--rp-cl-ink, rgb(23, 23, 23));
}
.rp-cl-section.section--rounded { border-radius: clamp(16px, 1.578vw, 24px) clamp(16px, 1.578vw, 24px) 0 0; }
.rp-cl-section.section--divider { border-top: 1px solid rgba(23, 23, 23, .1); }
.rp-cl-section .page-width { position: relative; width: 100%; margin: 0 auto; padding: 0 var(--rp-cl-gutter); }
.rp-cl-section .page-width--narrow { max-width: calc(1024px + var(--rp-cl-gutter) * 2); }
.rp-cl-section *, .rp-cl-section *::before, .rp-cl-section *::after { box-sizing: border-box; }

/* Títulos */
.rp-cl-section .heading { margin: 0; font-weight: 500; color: inherit; text-wrap: balance; }
/* title-xl do tema publicado: clamp(48px, 7.813vw, 80px) e, a partir de 1024px, clamp(80px, 6.737vw, 128px). */
.rp-cl-section .title-xl { font-size: clamp(48px, 7.813vw, 80px); line-height: .8; letter-spacing: -.04em; }
@media (min-width: 1024px) { .rp-cl-section .title-xl { font-size: clamp(80px, 6.737vw, 128px); } }
.rp-cl-section .title-lg { font-size: clamp(40px, 3.368vw, 64px); line-height: .9; letter-spacing: -.035em; }
.rp-cl-section .title-md { font-size: max(32px, 3.368vw); line-height: 1; letter-spacing: -.03em; }
/* title-lg e title-sm do tema publicado. */
@media (min-width: 1024px) { .rp-cl-section .title-lg { font-size: clamp(48px, 4.73vw, 92px); } }
.rp-cl-section .title-sm { font-size: clamp(24px, 2.526vw, 48px); line-height: 1.1; letter-spacing: -.025em; }
.rp-cl-section .title-wrapper { display: grid; gap: 32px; line-height: 1; }
.rp-cl-section .subtitle { display: block; margin: 0; font-size: 11px; line-height: 1.25; letter-spacing: .1em; text-transform: uppercase; color: rgba(23, 23, 23, .6); }

/* Link "reversed-link" do tema publicado: sublinhado de 1px que cresce da direita para a esquerda ao passar o mouse. */
.rp-cl-section .reversed-link {
  background: linear-gradient(to right, currentColor, currentColor) right min(100%, 1.35em) / 0 1px no-repeat;
  text-decoration: none;
  transition: background-size .5s cubic-bezier(.3, 1, .3, 1);
}
@media (hover: hover) { .rp-cl-section .reversed-link:not([aria-disabled]):hover { background-position-x: left; background-size: 100% 1px; text-decoration: none; } }

/* Texto do lojista */
.rp-cl-section .rte { line-height: 1.6; }
.rp-cl-section .rte > :first-child { margin-top: 0; }
.rp-cl-section .rte > :last-child { margin-bottom: 0; }
.rp-cl-section .rte a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rp-cl-section .rte img { max-width: 100%; height: auto; }
.rp-cl-section .text-base { font-size: 14px; }
.rp-cl-section .text-lg { font-size: 16px; }
.rp-cl-section .subtext-md { font-size: min(14px, 3vw); line-height: 1.6; }
.rp-cl-section .subtext-lg { font-size: min(16px, 3.34vw); line-height: 1.6; }
@media (min-width: 768px) {
  .rp-cl-section .md\:text-2xl { font-size: 24px; line-height: 1.4; }
}
.rp-cl-section .text-center { text-align: center; }
.rp-cl-section .text-left { text-align: left; }
.rp-cl-section .text-right { text-align: right; }
.rp-cl-section .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botões em pílula */
.rp-cl-section .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 18px 26px;
  border: 0;
  border-radius: 60px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #000;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.rp-cl-section .button .btn-text { display: inline-flex; align-items: center; gap: 10px; }
.rp-cl-section .button--primary { background: #000; color: #fff; }
.rp-cl-section .button--secondary { box-shadow: inset 0 0 0 2px #000; }
.rp-cl-section .button--fixed { min-width: 200px; }
@media (hover: hover) {
  .rp-cl-section .button--primary:hover { background: #2b2b2b; }
  .rp-cl-section .button--secondary:hover { background: #000; color: #fff; }
}
@media (min-width: 1024px) { .rp-cl-section .button { min-height: 56px; } }