/**
 * AWA Carousel UI v3 — Componentes de Carousel e Homepage
 * Rokanthemes section headers, product tabs, category tabs,
 * OWL global, brand carousel, benefits bar, hero slider,
 * featured/new products, testimonials, horizontal category carousel.
 *
 * Regras: sem !important salvo onde JS injeta inline styles,
 * rgb() moderno, media range notation, currentcolor minúsculo.
 * Carregado após awa-ux-components-v2.css (máxima precedência).
 */

/* =============================================================
   1. ROKANTHEMES SECTION HEADERS (.rokan-product-heading)
   Usado em: ProductTab, Categorytab, BestsellerProduct, Newproduct
   ============================================================= */

.rokan-product-heading {
  margin-bottom: var(--sp-6);
  text-align: left;
}

.rokan-product-heading h2,
.rokan-product-heading .section-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--awa-text);
  margin: 0;
}

.rokan-product-heading .sup-title,
.rokan-product-heading span.sup-title {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--awa-red);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-1);
}

.rokan-featured-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.rokan-featured-heading .viewall,
.rokan-product-heading .viewall {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--awa-red);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.rokan-featured-heading .viewall:hover,
.rokan-product-heading .viewall:hover {
  color: var(--awa-red-dark);
}

/* =============================================================
   2. PRODUCT TAB CAROUSEL (.list-tab-product)
   Tabs: Mais Vendidos, Lançamentos, Destaques, Promoções
   ============================================================= */

.list-tab-product .vc_tta-tabs-container {
  margin-bottom: var(--sp-5);
}

.list-tab-product ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: none;
}

.list-tab-product ul.tabs li {
  margin: 0;
  padding: 0;
}

.list-tab-product ul.tabs li a,
.list-tab-product .awa-tab-button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--awa-text-muted);
  background: var(--awa-bg-alt);
  border: 1.5px solid var(--awa-border);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
}

.list-tab-product ul.tabs li a:hover,
.list-tab-product .awa-tab-button:hover {
  color: var(--awa-red);
  background: rgb(183 51 55 / 6%);
  border-color: rgb(183 51 55 / 30%);
}

.list-tab-product ul.tabs li.active a,
.list-tab-product .awa-tab-button[aria-selected="true"] {
  color: #fff;
  background: var(--awa-red);
  border-color: var(--awa-red);
}

.list-tab-product ul.tabs li.active a:hover,
.list-tab-product .awa-tab-button[aria-selected="true"]:hover {
  background: var(--awa-red-dark);
  border-color: var(--awa-red-dark);
  color: #fff;
}

.list-tab-product .tab_container {
  min-height: 320px;
}

@media (width <= 575px) {
  .list-tab-product ul.tabs {
    gap: 4px;
  }

  .list-tab-product ul.tabs li a,
  .list-tab-product .awa-tab-button {
    height: 32px;
    padding: 0 12px;
    font-size: var(--text-xs);
  }
}

/* =============================================================
   3. CATEGORY TAB CAROUSEL (.categorytab-container)
   Carousels de categoria: Bauletos, Retrovisores, Bagageiros
   ============================================================= */

.categorytab-container {
  position: relative;
}

/* Left block: vertical tab list */

.categorytab-container .leftBlock {
  padding-right: var(--sp-3);
}

.categorytab-container .leftBlock ul.tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.categorytab-container .leftBlock ul.tabs li {
  margin: 0;
}

.categorytab-container .leftBlock ul.tabs li a {
  display: block;
  padding: 8px 14px;
  border-radius: var(--r-xs);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--awa-text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, font-weight 0.1s;
  border-left: 2px solid transparent;
}

.categorytab-container .leftBlock ul.tabs li a:hover {
  color: var(--awa-red);
  background: rgb(183 51 55 / 6%);
}

.categorytab-container .leftBlock ul.tabs li.active a {
  color: var(--awa-red);
  font-weight: 700;
  background: rgb(183 51 55 / 8%);
  border-left-color: var(--awa-red);
}

/* Category banner link */

.categorytab-container .link-banner-box {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: var(--sp-3);
  transition: box-shadow 0.22s;
}

.categorytab-container .link-banner-box:hover {
  box-shadow: var(--shadow-md);
}

.categorytab-container .link-banner-box img {
  display: block;
  width: 100%;
  height: auto;
}

/* Right block: carousel viewport */

.categorytab-container .cat_home2 {
  overflow: hidden;
}

.categorytab-container .rightBlock {
  padding-left: var(--sp-2);
}

@media (width <= 767px) {
  .categorytab-container .leftBlock {
    padding-right: 0;
    margin-bottom: var(--sp-4);
  }

  .categorytab-container .leftBlock ul.tabs {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .categorytab-container .leftBlock ul.tabs li a {
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--r-xs);
    padding: 6px 12px;
  }

  .categorytab-container .leftBlock ul.tabs li.active a {
    border-left: none;
    border-bottom-color: var(--awa-red);
  }

  .categorytab-container .rightBlock {
    padding-left: 0;
  }
}

/* =============================================================
   4. OWL CAROUSEL GLOBAL — Navegação e Dots
   Cobre todos os carousels Rokanthemes (owl v1 + v2 classes)
   ============================================================= */

/* Navigation buttons */

.owl-controls .owl-buttons div,
.owl-nav .owl-prev,
.owl-nav .owl-next,
.owl-carousel .owl-left,
.owl-carousel .owl-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--awa-border);
  background: var(--awa-bg);
  color: var(--awa-text-muted);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
  box-shadow: var(--shadow-sm);
}

.owl-controls .owl-buttons div:hover,
.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover,
.owl-carousel .owl-left:hover,
.owl-carousel .owl-right:hover {
  background: var(--awa-red);
  border-color: var(--awa-red);
  color: #fff;
  box-shadow: 0 4px 10px rgb(183 51 55 / 25%);
}

.owl-controls .owl-buttons div.disabled,
.owl-nav .owl-prev.disabled,
.owl-nav .owl-next.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Dots / Pagination */

.owl-controls .owl-page span,
.owl-dots .owl-dot span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--awa-border);
  transition: width 0.2s, background 0.2s;
}

.owl-controls .owl-page.active span,
.owl-dots .owl-dot.active span {
  width: 20px;
  background: var(--awa-red);
}

.owl-controls .owl-page:hover span,
.owl-dots .owl-dot:hover span {
  background: rgb(183 51 55 / 50%);
}

.owl-controls {
  margin-top: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

/* =============================================================
   5. BRAND CAROUSEL (.brand-widget)
   Logos de marcas: grayscale por padrão, colorido no hover
   ============================================================= */

.brand-widget .block-title strong {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--awa-text);
}

.brand-widget .brand-item {
  padding: 12px;
  border-radius: var(--r-sm);
  text-align: center;
  transition: box-shadow 0.22s, transform 0.22s;
}

.brand-widget .brand-item:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.brand-widget .brand-item img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  filter: grayscale(55%) opacity(0.75);
  transition: filter 0.28s, opacity 0.28s;
}

.brand-widget .brand-item:hover img {
  filter: grayscale(0%) opacity(1);
}

.brand-widget .brand-name a {
  font-size: var(--text-xs);
  color: var(--awa-text-muted);
  text-decoration: none;
  margin-top: var(--sp-1);
  display: block;
  transition: color 0.15s;
}

.brand-widget .brand-name a:hover {
  color: var(--awa-red);
}

@media (prefers-reduced-motion: reduce) {
  .brand-widget .brand-item,
  .brand-widget .brand-item img {
    transition: none;
  }

  .brand-widget .brand-item:hover {
    transform: none;
  }
}

/* =============================================================
   6. BENEFITS BAR (.awa-benefits-bar)
   Barra de benefícios: garantia, desconto, financiamento, PIX
   ============================================================= */

.awa-benefit-item {
  cursor: default;
  transition: transform 0.2s;
}

.awa-benefit-item:hover {
  transform: translateY(-2px);
}

.awa-benefit-icon {
  transition: transform 0.22s;
  flex-shrink: 0;
}

.awa-benefit-item:hover .awa-benefit-icon {
  transform: scale(1.1) rotate(-4deg);
}

.awa-benefit-text strong {
  font-weight: 700;
  color: var(--awa-text);
  font-size: var(--text-sm);
  display: block;
}

.awa-benefit-text span,
.awa-benefit-text p {
  font-size: var(--text-xs);
  color: var(--awa-text-muted);
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .awa-benefit-item,
  .awa-benefit-icon {
    transition: none;
  }

  .awa-benefit-item:hover {
    transform: none;
  }

  .awa-benefit-item:hover .awa-benefit-icon {
    transform: none;
  }
}

/* =============================================================
   7. HERO SLIDER CONTROLS (.wrapper_slider)
   Play/pause e barra de progresso do slider principal
   ============================================================= */

.wrapper_slider {
  position: relative;
}

.slide-controls {
  position: absolute;
  bottom: 14px;
  right: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.play-pause-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 20%);
  border: 1px solid rgb(255 255 255 / 35%);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}

.play-pause-button:hover {
  background: rgb(255 255 255 / 40%);
  border-color: rgb(255 255 255 / 60%);
}

.play-pause-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.icon-play--hidden {
  display: none;
}

.progress-bar-container {
  width: 80px;
  height: 3px;
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 30%);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: #fff;
  border-radius: var(--r-full);
  transform-origin: left center;
  transition: width 0.1s linear;
}

@media (width <= 767px) {
  .play-pause-button {
    width: 28px;
    height: 28px;
  }

  .progress-bar-container {
    width: 60px;
  }

  .slide-controls {
    bottom: 10px;
    right: 12px;
  }
}

/* =============================================================
   8. FEATURED / NEW PRODUCTS (.rokan-featuredproduct, .rokan-newproduct)
   Cards de produto nas seções de destaque e lançamentos
   ============================================================= */

.rokan-featuredproduct .product-item,
.rokan-newproduct .product-item,
.rokan-onsale .product-item {
  border-radius: var(--r-sm);
  border: 1px solid var(--awa-border);
  padding: var(--sp-3);
  background: var(--awa-bg);
  transition: box-shadow 0.22s, transform 0.22s;
}

.rokan-featuredproduct .product-item:hover,
.rokan-newproduct .product-item:hover,
.rokan-onsale .product-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.rokan-featuredproduct .product-item-photo img,
.rokan-newproduct .product-item-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--r-xs);
}

.rokan-featuredproduct .product-item-name a,
.rokan-newproduct .product-item-name a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--awa-text);
  text-decoration: none;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: color 0.15s;
}

.rokan-featuredproduct .product-item-name a:hover,
.rokan-newproduct .product-item-name a:hover {
  color: var(--awa-red);
}

.rokan-featuredproduct .product-price .price,
.rokan-newproduct .product-price .price {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--awa-red);
}

/* Icon sale / new badges */

.rokan-featuredproduct .icon-product,
.rokan-newproduct .icon-product {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 2;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--r-full);
}

.rokan-featuredproduct .icon-sale,
.rokan-newproduct .icon-sale {
  background: var(--awa-danger);
  color: #fff;
}

.rokan-featuredproduct .icon-new,
.rokan-newproduct .icon-new {
  background: var(--awa-success);
  color: #fff;
}

/* Position relative for badge anchor */

.rokan-featuredproduct .product-item,
.rokan-newproduct .product-item {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .rokan-featuredproduct .product-item,
  .rokan-newproduct .product-item {
    transition: none;
  }

  .rokan-featuredproduct .product-item:hover,
  .rokan-newproduct .product-item:hover {
    transform: none;
  }
}

/* =============================================================
   9. TESTIMONIALS (.box-testimo)
   Cards de depoimento de clientes
   ============================================================= */

.box-testimo {
  padding: var(--sp-12) 0;
}

.box-testimo h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--awa-text);
  margin-bottom: var(--sp-8);
  text-align: center;
}

.item-testimo {
  background: var(--awa-bg);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--awa-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.author-testimo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.author-testimo img {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 2px solid var(--awa-border);
  flex-shrink: 0;
}

.info-testimonial .desc {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--awa-text-muted);
  font-style: italic;
  position: relative;
  padding-left: var(--sp-5);
}

.info-testimonial .desc::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -4px;
  font-size: 2.5rem;
  color: var(--awa-red);
  line-height: 1;
  font-family: Georgia, serif;
  font-style: normal;
}

.author-test-info h3,
.author-test-info h3 a {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--awa-text);
  text-decoration: none;
  margin: 0;
}

.author-test-info span {
  display: block;
  font-size: var(--text-xs);
  color: var(--awa-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.box-testimo .viewall {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--awa-red);
  text-decoration: none;
  margin-top: var(--sp-6);
  transition: color 0.15s;
}

.box-testimo .viewall:hover {
  color: var(--awa-red-dark);
}

/* =============================================================
   10. HORIZONTAL CATEGORY CAROUSEL (.awa-category-carousel__)
   Seção "Busque por Categorias" no topo da homepage
   ============================================================= */

.awa-category-carousel__item {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.awa-category-carousel__item:hover {
  border-color: var(--awa-red);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.awa-category-carousel__item:focus-visible {
  outline: 2px solid var(--awa-red);
  outline-offset: 2px;
  border-color: var(--awa-red);
}

.awa-category-carousel__prev,
.awa-category-carousel__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--awa-border);
  background: var(--awa-bg);
  color: var(--awa-text-muted);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.awa-category-carousel__prev:hover,
.awa-category-carousel__next:hover {
  background: var(--awa-red);
  border-color: var(--awa-red);
  color: #fff;
}

.awa-category-carousel__prev:focus-visible,
.awa-category-carousel__next:focus-visible {
  outline: 2px solid var(--awa-red);
  outline-offset: 2px;
}

.awa-category-carousel__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--awa-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.2s, background 0.2s;
  flex-shrink: 0;
}

.awa-category-carousel__dot.active,
.awa-category-carousel__dot[aria-selected="true"] {
  width: 20px;
  background: var(--awa-red);
}

.awa-category-carousel__dot:hover {
  background: rgb(183 51 55 / 50%);
}

@media (prefers-reduced-motion: reduce) {
  .awa-category-carousel__item {
    transition: none;
  }

  .awa-category-carousel__item:hover {
    transform: none;
  }

  .awa-category-carousel__dot {
    transition: none;
  }
}