/* ══════════════════════════════════════════════════════════════
   MotoWorks product photo carousel — shared styles

   The same gallery used on the motorcycle cards, extracted so
   parts and apparel cards can show several photos each.
   Markup is produced by product-carousel.js.

   The host page controls the frame with custom properties:
     --pc-aspect      frame shape          (default 1/1)
     --pc-bg          tile behind the photo (default dark)
     --pc-ph-bg       placeholder backdrop
     --pc-ph-fg       placeholder text
     --pc-dot         inactive dot
     --pc-dot-active  current dot

   Supplier product shots almost always come on a white background, so the
   shop pages set a light tile: the photo's own white then blends into the
   frame instead of sitting in it as a bright rectangle. The defaults stay
   dark for a carousel used anywhere else on the site.
   ══════════════════════════════════════════════════════════════ */

.pc-carousel {
  position: relative;
  aspect-ratio: var(--pc-aspect, 1/1);
  overflow: hidden;
  background: var(--pc-bg, #141414);
  user-select: none;
  touch-action: pan-y;
}

.pc-track {
  display: flex; width: 100%; height: 100%;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.pc-slide {
  flex: 0 0 100%; max-width: 100%; height: 100%;
  position: relative; background: var(--pc-bg, #141414); overflow: hidden;
}
.pc-slide img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  display: block; padding: 12px;
  pointer-events: none; -webkit-user-drag: none;
  transition: transform .35s ease;
}
.prod-card:hover .pc-slide img { transform: scale(1.05); }

/* Fallback placeholder, revealed only when the <img> fails to load */
.pc-fallback {
  display: none; width: 100%; height: 100%;
  flex-direction: column; align-items: center; justify-content: center;
  background: var(--pc-ph-bg, linear-gradient(135deg, #141414 0%, #1c1c1c 100%));
  position: absolute; inset: 0;
}
.pc-slide img.pc-img-error { display: none; }
.pc-slide img.pc-img-error + .pc-fallback { display: flex; }

/* Placeholder when the product has no photos at all */
.pc-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--pc-ph-bg, linear-gradient(135deg, #141414 0%, #1c1c1c 100%));
  text-align: center; padding: 10px;
}
.pc-ph-icon  { font-size: 3rem; opacity: .22; margin-bottom: 8px; }
.pc-ph-title { font-family: 'Oswald', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ph-fg, #2e2e2e); }
.pc-ph-sub   { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-ph-fg, #262626); opacity: .75; margin-top: 3px; }

/* Nav arrows */
.pc-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.65); color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s, background .15s;
  z-index: 5; padding: 0; line-height: 1;
}
.pc-btn:hover { background: rgba(0,0,0,.88); }
.pc-prev { left: 6px; }
.pc-next { right: 6px; }
.pc-carousel:hover .pc-btn { opacity: 1; }
/* Always visible on touch screens — there is no hover to reveal them */
@media (hover: none) { .pc-btn { opacity: .8 !important; width: 27px; height: 27px; } }

/* Dots */
.pc-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 5;
}
.pc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pc-dot, rgba(255,255,255,.3)); cursor: pointer;
  transition: background .2s, transform .2s;
  border: none; padding: 0; flex-shrink: 0;
}
.pc-dot.active { background: var(--pc-dot-active, var(--red)); transform: scale(1.3); }

/* Photo count badge */
.pc-count {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.6); color: rgba(255,255,255,.7);
  font-size: .58rem; padding: 2px 6px; border-radius: 20px;
  letter-spacing: .05em; z-index: 5; pointer-events: none;
}