/* =========================================================
   POLAR BEAR — COLLECTIONS + PROMO BANNERS
   ========================================================= */

.pb-collections {
  position: relative;
}
.pb-collections__track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--pb-space-4);
}

.pb-collection-card {
  text-align: center;
  display: block;
}
.pb-collection-card__img {
  aspect-ratio: 1/1;
  border-radius: var(--pb-radius-md);
  overflow: hidden;
  background: var(--pb-bg-cream);
  box-shadow: var(--pb-shadow-sm);
  transition: box-shadow var(--pb-speed-med) var(--pb-ease);
}
.pb-collection-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--pb-speed-slow) var(--pb-ease);
}
.pb-collection-card:hover .pb-collection-card__img {
  box-shadow: var(--pb-shadow-hover);
}
.pb-collection-card:hover .pb-collection-card__img img {
  transform: scale(1.08);
}
.pb-collection-card__label {
  margin-top: var(--pb-space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--pb-ink);
}
.pb-collection-card__label svg {
  transition: transform var(--pb-speed-fast) var(--pb-ease);
  color: var(--pb-terracotta);
}
.pb-collection-card:hover .pb-collection-card__label svg {
  transform: translateX(4px);
}

.pb-scroll-nav {
  position: absolute;
  top: 42%;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--pb-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pb-shadow-sm);
  z-index: 5;
  transition: all var(--pb-speed-fast) var(--pb-ease);
}
.pb-scroll-nav:hover { box-shadow: var(--pb-shadow-md); transform: translateY(-50%) scale(1.06); }
.pb-scroll-nav:disabled { cursor: default; }
.pb-scroll-nav:disabled:hover { box-shadow: var(--pb-shadow-sm); transform: none; }
.pb-scroll-nav--prev { left: -10px; }
.pb-scroll-nav--next { right: -10px; }

/* Generic carousel wrapper: any section with prev/next arrows + a scrollable
   track uses this, so the arrow logic in main.js applies everywhere
   (Collections, Best Sellers, etc.) instead of one hard-coded section. */
.pb-carousel {
  position: relative;
}
.pb-carousel__track.pb-products-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  gap: var(--pb-space-4);
  scrollbar-width: none;
}
.pb-carousel__track.pb-products-grid::-webkit-scrollbar { display: none; }
.pb-carousel__track.pb-products-grid .pb-card {
  scroll-snap-align: start;
  flex: 0 0 260px;
}
@media (max-width: 640px) {
  .pb-carousel__track.pb-products-grid .pb-card { flex-basis: 210px; }
}

@media (max-width: 980px) {
  .pb-collections__track { grid-template-columns: repeat(6, 130px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
  .pb-collections__track::-webkit-scrollbar { display: none; }
  .pb-collections__track > * { scroll-snap-align: start; }
  .pb-scroll-nav { display: none; }
}
@media (max-width: 640px) {
  .pb-collections__track { grid-template-columns: repeat(6, 108px); gap: var(--pb-space-3); }
}

/* Promo banners row */
.pb-banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pb-space-4);
}
.pb-banner {
  position: relative;
  border-radius: var(--pb-radius-md);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--pb-shadow-sm);
  transition: box-shadow var(--pb-speed-med) var(--pb-ease);
}
.pb-banner:hover { box-shadow: var(--pb-shadow-hover); }
.pb-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--pb-speed-slow) var(--pb-ease);
}
.pb-banner:hover img { transform: scale(1.06); }
.pb-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(30,20,10,0.62) 0%, rgba(30,20,10,0.08) 60%, transparent 100%);
}
.pb-banner__content {
  position: relative;
  z-index: 2;
  padding: var(--pb-space-4) var(--pb-space-4) var(--pb-space-5);
  color: #fff;
}
.pb-banner__content h3 {
  color: #fff;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
}
.pb-banner__content .pb-banner__sub {
  font-size: 0.78rem;
  opacity: 0.92;
  margin-top: 4px;
  font-style: normal;
}
.pb-banner__content .pb-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: var(--pb-space-2);
  border-bottom: 1px solid rgba(255,255,255,0.6);
  padding-bottom: 2px;
  transition: gap var(--pb-speed-fast) var(--pb-ease);
}
.pb-banner:hover .pb-banner__content .pb-banner__link { gap: 10px; }

@media (max-width: 780px) {
  .pb-banners { grid-template-columns: 1fr; }
}