/**
 * Divi WooCommerce Brands Slider Pro - Frontend Styles
 */

.dwcbs-wrapper {
  position: relative;
  width: 100%;
  margin: 20px 0;
  box-sizing: border-box;
}

/* Title Styling (Matches 'SHOP BY BRAND' design) */
.dwcbs-title {
  color: var(--title-color, #000000);
  font-size: var(--title-size, 28px);
  font-weight: var(--title-weight, 800);
  letter-spacing: var(--title-spacing, 2px);
  text-transform: var(--title-transform, uppercase);
  margin-bottom: var(--title-mb, 30px);
  margin-top: 0;
  font-family: inherit;
  line-height: 1.2;
}

/* Swiper Container Padding */
.dwcbs-swiper-container {
  padding: 10px 0 25px 0;
  overflow: hidden;
}

/* Brand Card Styling */
.dwcbs-brand-card {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
  background: var(--card-bg, transparent);
  border: var(--card-border, none);
  border-radius: var(--card-radius, 0px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dwcbs-brand-card:hover {
  background: var(--card-bg-hover, transparent);
}

.dwcbs-brand-link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 100%;
}

.dwcbs-brand-logo {
  max-height: var(--logo-height, 60px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

.dwcbs-brand-name {
  font-weight: 700;
  color: #333;
  font-size: 16px;
  text-decoration: none;
}

/* Hover Effects */
/* 1. Zoom (Default smooth scale) */
.dwcbs-hover-zoom .dwcbs-brand-logo:hover {
  transform: scale(1.08);
}

/* 2. Grayscale to Color */
.dwcbs-hover-grayscale .dwcbs-brand-logo {
  filter: grayscale(100%);
  opacity: 0.75;
}
.dwcbs-hover-grayscale .dwcbs-brand-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* 3. Opacity */
.dwcbs-hover-opacity .dwcbs-brand-logo {
  opacity: 0.65;
}
.dwcbs-hover-opacity .dwcbs-brand-logo:hover {
  opacity: 1;
}

/* 4. Grayscale + Zoom */
.dwcbs-hover-grayscale-zoom .dwcbs-brand-logo {
  filter: grayscale(100%);
  opacity: 0.8;
}
.dwcbs-hover-grayscale-zoom .dwcbs-brand-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.08);
}

/* Grid Layout Fallback */
.dwcbs-grid {
  display: grid;
  gap: 20px;
  align-items: center;
}

@media (max-width: 980px) {
  .dwcbs-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 479px) {
  .dwcbs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}