/* ==========================================================================
   WC Related Products by Brand — Carrossel
   Segue o Design System Sol e Lua (DS v3 Commerce). Usa var(--token, fallback)
   para funcionar mesmo em sites onde os tokens ainda não estejam carregados.
   ========================================================================== */

.wcrbb-section {
  margin-top: var(--s16, 64px);
  padding: 0 var(--pad-x, clamp(12px, 3vw, 32px));
}

.wcrbb-title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: var(--fs-h2, 2rem);
  font-weight: var(--w-medium, 500);
  text-align: center;
  color: var(--cor-primaria, var(--azul, #0B1D51));
  margin-bottom: var(--s8, 32px);
}

.wcrbb-carousel {
  position: relative;
  max-width: var(--max-w, 1320px);
  margin: 0 auto;
  padding: 0 64px;
}

.wcrbb-track-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wcrbb-track-viewport::-webkit-scrollbar { display: none; }

.wcrbb-track {
  display: flex;
  gap: var(--s6, 24px);
  list-style: none;
  margin: 0;
  padding: 4px 4px 12px;
}

.wcrbb-slide {
  flex: 0 0 calc(33.333% - var(--s6, 24px) * 2 / 3);
  scroll-snap-align: start;
  min-width: 0;
}

@media (max-width: 1024px) {
  .wcrbb-carousel { padding: 0 48px; }
  .wcrbb-slide { flex-basis: calc(50% - var(--s6, 24px) / 2); }
}
@media (max-width: 640px) {
  .wcrbb-slide { flex-basis: 78%; }
}

.wcrbb-card {
  background: var(--branco, #fff);
  border-radius: var(--r-md, 10px);
  overflow: hidden;
  display: block;
  position: relative;
  border: 1px solid transparent;
  text-decoration: none;
  transition: var(--t-base, 0.25s ease);
  height: 100%;
}
.wcrbb-card:hover,
.wcrbb-card:focus-visible {
  border-color: var(--cinza-2, #D8D2C7);
  box-shadow: var(--sh-md, 0 6px 24px rgba(27,45,91,0.10));
  transform: translateY(-2px);
  color: inherit;
}
.wcrbb-card:focus-visible {
  outline: 2px solid var(--cor-primaria, var(--azul, #0B1D51));
  outline-offset: 2px;
}

.wcrbb-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cinza-bg, #F4F2EE);
  overflow: hidden;
}
.wcrbb-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: var(--t-slow, 0.4s ease);
}
.wcrbb-card:hover .wcrbb-card-image img { transform: scale(1.06); }

.wcrbb-card-body { padding: var(--s2, 8px) var(--s3, 12px) var(--s3, 12px); }

.wcrbb-card-name {
  font-family: var(--font-sans, sans-serif);
  font-size: var(--f-sm, 0.81rem);
  font-weight: var(--w-medium, 500);
  color: var(--preto, #18120E);
  line-height: 1.35;
  margin-bottom: var(--s2, 8px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.wcrbb-card-sku {
  font-size: var(--f-xs, 0.72rem);
  color: var(--cinza-3, #8A8378);
  margin-bottom: var(--s1, 4px);
}

.wcrbb-card-price {
  font-family: var(--font-sans, sans-serif);
  font-size: var(--f-lg, 1.19rem);
  font-weight: var(--w-black, 800);
  color: var(--preto, #18120E);
  letter-spacing: -0.01em;
}
.wcrbb-card-price del {
  font-size: var(--f-xs, 0.72rem);
  font-weight: var(--w-regular, 400);
  color: var(--cinza-3, #8A8378);
  text-decoration: line-through;
  margin-right: var(--s1, 4px);
}
.wcrbb-card-price ins {
  color: var(--cor-primaria, var(--azul, #0B1D51));
  text-decoration: none;
}

.wcrbb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill, 9999px);
  border: 1px solid var(--cinza-2, #D8D2C7);
  background: var(--branco, #fff);
  color: var(--cor-primaria, var(--azul, #0B1D51));
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--sh-sm, 0 2px 12px rgba(27,45,91,0.08));
  transition: var(--t-fast, 0.15s ease);
  z-index: 2;
}
.wcrbb-nav:hover { background: var(--cor-primaria, var(--azul, #0B1D51)); color: var(--branco, #fff); }
.wcrbb-nav:focus-visible { outline: 2px solid var(--cor-primaria, var(--azul, #0B1D51)); outline-offset: 2px; }
.wcrbb-nav:disabled { opacity: 0.35; cursor: default; }
.wcrbb-nav:disabled:hover { background: var(--branco, #fff); color: var(--cor-primaria, var(--azul, #0B1D51)); }

.wcrbb-nav--prev { left: 0; }
.wcrbb-nav--next { right: 0; }

@media (max-width: 640px) {
  .wcrbb-carousel { padding: 0; }
  .wcrbb-nav { display: none; }
}