/* ===========================================================
   product-single.css
   Single de Produtos — RT Brasil Festas
   =========================================================== */

.rtbf-product { background: var(--rt-paper); }

/* ============================================================
   Breadcrumbs
   ============================================================ */
.rtbf-product__crumbs {
  padding-block: 20px 0;
  font-family: var(--rt-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rt-ink-3);
}
.rtbf-product__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rtbf-product__crumbs a {
  color: var(--rt-azul);
  font-weight: 600;
  transition: color .15s;
}
.rtbf-product__crumbs a:hover { color: var(--rt-rosa); }
.rtbf-product__crumbs li[aria-current="page"] { color: var(--rt-ink); }
.rtbf-product__crumbs span[aria-hidden] { opacity: 0.45; }

/* ============================================================
   Hero
   ============================================================ */
.rtbf-product__hero {
  padding-block: 36px clamp(56px, 7vw, 96px);
}
.rtbf-product__hero-grid {
  display: grid;
  grid-template-columns: 52% 48%;
  gap: 56px;
  align-items: start;
}

/* ---- Galeria ---- */
.rtbf-product__gallery { position: sticky; top: 110px; }
.rtbf-product__gallery-main {
  background: white;
  border-radius: 20px;
  box-shadow: 0 18px 50px -28px rgba(0, 59, 102, 0.28), 0 2px 8px rgba(26, 20, 16, 0.05);
  overflow: hidden;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  padding: 32px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.rtbf-product__gallery-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 60px -28px rgba(0, 59, 102, 0.34), 0 4px 12px rgba(26, 20, 16, 0.06);
}
.rtbf-product__gallery-main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity .25s ease;
}

.rtbf-product__gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.rtbf-product__thumb {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 14px;
  background: white;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.rtbf-product__thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -8px rgba(0,59,102,0.2); }
.rtbf-product__thumb.is-active { border-color: var(--rt-azul); }
.rtbf-product__thumb img { width: 100%; height: 100%; object-fit: contain; }
.rtbf-product__thumb--swatch {
  padding: 0;
  cursor: default;
  border: 2px solid white;
  box-shadow: 0 0 0 1px var(--rt-line), 0 4px 10px -4px rgba(0,0,0,0.15);
}
.rtbf-product__thumb--swatch:hover { transform: none; }

/* ---- Info ---- */
.rtbf-product__info {
  padding-top: 8px;
}
.rtbf-product__badges {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.rtbf-product__badge {
  font-family: var(--rt-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.rtbf-product__badge--cat {
  background: var(--rt-bege);
  color: var(--rt-marrom);
}
.rtbf-product__badge--tag {
  background: var(--rt-azul);
  color: white;
}

.rtbf-product__title {
  font-family: var(--rt-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--rt-azul);
  text-transform: uppercase;
  margin: 0 0 18px;
  text-wrap: balance;
}

.rtbf-product__cores {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--rt-line);
}
.rtbf-product__cores-label {
  font-size: 12px;
  font-family: var(--rt-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-ink-3);
}
.rtbf-product__cores-list {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rtbf-product__cores-list strong {
  font-family: var(--rt-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--rt-azul);
}
.rtbf-product__cores-list .sep { color: var(--rt-rosa); font-weight: 700; }

.rtbf-product__intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--rt-ink-2);
  margin: 0 0 24px;
  max-width: 56ch;
}

/* Benefícios */
.rtbf-product__benefits {
  display: grid;
  gap: 10px;
  margin-bottom: 32px;
  padding: 20px 22px;
  background: white;
  border: 1px solid var(--rt-line);
  border-radius: 16px;
}
.rtbf-product__benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--rt-ink);
}
.rtbf-product__benefit-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--rt-rosa);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px -2px rgba(233,30,99,0.4);
}

/* CTAs */
.rtbf-product__ctas {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}
.rtbf-product__ctas .btn {
  justify-content: center;
  padding: 16px 22px;
  width: 100%;
}
.rtbf-product__cta-primary {
  font-size: 15px !important;
  letter-spacing: 0.05em !important;
  padding: 18px 22px !important;
}
.rtbf-product__cta-whats { border-color: var(--rt-whatsapp) !important; color: var(--rt-whatsapp) !important; }
.rtbf-product__cta-whats:hover { background: var(--rt-whatsapp) !important; color: white !important; }
.rtbf-product__cta-whats:hover svg path { fill: white !important; }

.rtbf-product__reassure {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--rt-bege);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--rt-marrom);
  font-weight: 500;
}

/* ============================================================
   Bloco de confiança
   ============================================================ */
.rtbf-product__trust {
  padding-block: 56px;
  background: linear-gradient(180deg, rgba(252, 232, 240, 0.45), rgba(252, 232, 240, 0.15));
  border-block: 1px solid rgba(233, 30, 99, 0.08);
}
.rtbf-product__trust-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.rtbf-product__trust-card {
  background: white;
  border: 1px solid rgba(233, 30, 99, 0.08);
  border-radius: 16px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rtbf-product__trust-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(233, 30, 99, 0.25);
  border-color: rgba(233, 30, 99, 0.18);
}
.rtbf-product__trust-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(233, 30, 99, 0.08);
  display: grid;
  place-items: center;
}
.rtbf-product__trust-title {
  font-family: var(--rt-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--rt-azul);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.rtbf-product__trust-sub {
  font-size: 12.5px;
  color: var(--rt-ink-3);
  margin-top: 4px;
  line-height: 1.45;
}

/* ============================================================
   Relacionados
   ============================================================ */
.rtbf-product__related { padding-block: clamp(56px, 8vw, 96px); }
.rtbf-product__related-head { text-align: center; margin-bottom: 40px; }
.rtbf-product__related-head .eyebrow { margin-bottom: 10px; }
.rtbf-product__related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.rtbf-product__related-card {
  background: white;
  border: 1px solid var(--rt-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--rt-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.rtbf-product__related-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -20px rgba(0,59,102,0.25);
}
.rtbf-product__related-img {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--rt-bege);
  position: relative;
}
.rtbf-product__related-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.rtbf-product__related-card:hover .rtbf-product__related-img img { transform: scale(1.04); }
.rtbf-product__related-img .imgph { width: 100%; height: 100%; }

.rtbf-product__related-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.rtbf-product__related-cat {
  font-family: var(--rt-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-rosa);
  font-weight: 600;
}
.rtbf-product__related-title {
  font-family: var(--rt-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--rt-azul);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}
.rtbf-product__related-cta {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rt-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-azul);
}

/* ============================================================
   Bloco final de CTA
   ============================================================ */
.rtbf-product__finalcta {
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--rt-cream);
  border-top: 1px solid var(--rt-line);
}
.rtbf-product__finalcta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.rtbf-product__finalcta-card {
  background: white;
  border: 1px solid var(--rt-line);
  border-radius: 18px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
button.rtbf-product__finalcta-card { font-family: inherit; }
.rtbf-product__finalcta-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -22px rgba(0,59,102,0.25);
}
.rtbf-product__finalcta-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--rt-bege);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.rtbf-product__finalcta-title {
  font-family: var(--rt-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--rt-azul);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.rtbf-product__finalcta-sub {
  font-size: 13px;
  color: var(--rt-ink-3);
  line-height: 1.5;
}
.rtbf-product__finalcta-link {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rt-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-rosa);
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 1080px) {
  .rtbf-product__hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .rtbf-product__gallery { position: static; }
  .rtbf-product__trust-grid { grid-template-columns: repeat(3, 1fr); }
  .rtbf-product__related-grid { grid-template-columns: repeat(2, 1fr); }
  .rtbf-product__finalcta-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .rtbf-product__trust-grid { grid-template-columns: repeat(2, 1fr); }
  .rtbf-product__gallery-thumbs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 70px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    margin-inline: calc(var(--rt-pad) * -0.25);
    padding-inline: calc(var(--rt-pad) * 0.25);
    scrollbar-width: none;
  }
  .rtbf-product__gallery-thumbs::-webkit-scrollbar { display: none; }
  .rtbf-product__thumb { scroll-snap-align: start; }
  .rtbf-product__ctas .btn { padding: 16px 18px; font-size: 13px; }
}
@media (max-width: 480px) {
  .rtbf-product__trust-grid { grid-template-columns: 1fr; }
  .rtbf-product__related-grid { grid-template-columns: 1fr; }
  .rtbf-product__finalcta-grid { grid-template-columns: 1fr; }
  .rtbf-product__hero { padding-block: 24px 56px; }
  .rtbf-product__gallery-main { padding: 18px; border-radius: 16px; }
}