/* =====================================================
   Product Carousel Pro  v4.0
   ALL rules use !important to override any theme CSS
   Brand: Opal Mobiles — Black #111 + Yellow #F5C518
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Wrap ─────────────────────────────────────────── */
.pcp-wrap {
  font-family: 'Inter', sans-serif !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.pcp-wrap *, .pcp-wrap *::before, .pcp-wrap *::after {
  box-sizing: border-box !important;
}

/* ── Header ───────────────────────────────────────── */
.pcp-header {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 18px !important;
}
.pcp-title {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem) !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* ─────────────────────────────────────────────────────
   STAGE: [LEFT ARROW]  [SLIDES]  [RIGHT ARROW]
   ───────────────────────────────────────────────────── */
.pcp-stage {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  position: relative !important;
}

/* ─────────────────────────────────────────────────────
   ARROW BUTTONS
   Round · Transparent bg · Light border · Simple icon
   ───────────────────────────────────────────────────── */
.pcp-arrow {
  flex-shrink: 0 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid #cccccc !important;
  color: #555555 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease !important;
  z-index: 10 !important;
  text-decoration: none !important;
}
.pcp-arrow:hover {
  background: #F5C518 !important;
  background-color: #F5C518 !important;
  border-color: #F5C518 !important;
  color: #111111 !important;
  box-shadow: 0 4px 14px rgba(245,197,24,0.4) !important;
}
.pcp-arrow:disabled,
.pcp-arrow[disabled] {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  background: transparent !important;
  background-color: transparent !important;
}
.pcp-arrow svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* ── Viewport ─────────────────────────────────────── */
.pcp-outer {
  flex: 1 !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

/* ── Track ────────────────────────────────────────── */
.pcp-track {
  display: flex !important;
  gap: 14px !important;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1) !important;
  will-change: transform !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.pcp-track.dragging {
  cursor: grabbing !important;
  transition: none !important;
}

/* ── Slides ───────────────────────────────────────── */
.pcp-slide {
  flex: 0 0 calc(50% - 7px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (min-width: 640px) {
  .pcp-slide { flex: 0 0 calc(33.333% - 9.33px) !important; }
}
@media (min-width: 1024px) {
  .pcp-slide { flex: 0 0 calc(25% - 10.5px) !important; }
  .pcp-track { gap: 14px !important; }
}

/* ── Card ─────────────────────────────────────────── */
.pcp-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pcp-card:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,0.13) !important;
  transform: translateY(-3px) !important;
}

/* ── Badges ───────────────────────────────────────── */
.pcp-badges {
  position: absolute !important;
  top: 9px !important;
  left: 9px !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pcp-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  line-height: 1.5 !important;
  border: none !important;
}
.pcp-badge.sale { background: #F5C518 !important; color: #111111 !important; }
.pcp-badge.hot  { background: #ef4444 !important; color: #ffffff !important; }
.pcp-badge.out  { background: #f3f4f6 !important; color: #6b7280 !important; }

/* ── Image ────────────────────────────────────────── */
.pcp-img-box {
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #f8f9fa !important;
  background-color: #f8f9fa !important;
  text-decoration: none !important;
  border: none !important;
}
.pcp-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.45s ease !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pcp-card:hover .pcp-img-box img { transform: scale(1.05) !important; }

/* ── Body ─────────────────────────────────────────── */
.pcp-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 12px 13px 13px !important;
  flex: 1 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* ── Name ─────────────────────────────────────────── */
.pcp-name {
  font-size: 0.83rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.4 !important;
  transition: color 0.18s !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.pcp-name:hover { color: #d4a900 !important; }

/* ── Stars ────────────────────────────────────────── */
.pcp-stars-row { display: flex !important; align-items: center !important; gap: 4px !important; margin: 0 !important; }
.pcp-stars     { display: flex !important; gap: 1px !important; }
.pcp-stars .s  { font-size: 13px !important; color: #d1d5db !important; line-height: 1 !important; }
.pcp-stars .sf { color: #F5C518 !important; }
.pcp-stars .sh { color: #F5C518 !important; opacity: 0.6 !important; }
.pcp-rev       { font-size: 11px !important; color: #9ca3af !important; }

/* ── Stock ────────────────────────────────────────── */
.pcp-stock {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
.pcp-stock.in  { color: #16a34a !important; }
.pcp-stock.out { color: #9ca3af !important; }

/* ── Price ────────────────────────────────────────── */
.pcp-price { font-size: 0.95rem !important; font-weight: 700 !important; color: #111111 !important; line-height: 1 !important; margin: 0 !important; }
.pcp-price ins, .pcp-price .woocommerce-Price-amount { text-decoration: none !important; color: #111111 !important; }
.pcp-price del { font-size: 0.75rem !important; font-weight: 400 !important; color: #9ca3af !important; margin-right: 4px !important; }
.pcp-price del .woocommerce-Price-amount { color: #9ca3af !important; }

/* ── Button wrap ──────────────────────────────────── */
.pcp-btn-wrap { margin-top: auto !important; padding-top: 10px !important; }

/* ─────────────────────────────────────────────────────
   ADD TO CART BUTTON
   BLACK background · PILL shape · Yellow on hover
   ALL !important to override any theme button styles
   ───────────────────────────────────────────────────── */
.pcp-wrap .pcp-atc,
.pcp-wrap button.pcp-atc,
.pcp-wrap a.pcp-atc {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  background: #111111 !important;
  background-color: #111111 !important;
  color: #ffffff !important;
  border: 2px solid #111111 !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease !important;
  outline: none !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  margin: 0 !important;
  text-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.pcp-wrap .pcp-atc:hover,
.pcp-wrap button.pcp-atc:hover,
.pcp-wrap a.pcp-atc:hover {
  background: #F5C518 !important;
  background-color: #F5C518 !important;
  border-color: #F5C518 !important;
  color: #111111 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(245,197,24,0.4) !important;
  text-decoration: none !important;
}
.pcp-wrap .pcp-atc:active { transform: translateY(0) !important; box-shadow: none !important; }
.pcp-wrap .pcp-atc.pcp-atc-off {
  background: #f3f4f6 !important;
  background-color: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  color: #6b7280 !important;
  cursor: default !important;
}
.pcp-wrap .pcp-atc.loading { opacity: 0.65 !important; cursor: wait !important; }
.pcp-wrap .pcp-atc.added   {
  background: #16a34a !important;
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
}
.pcp-wrap .pcp-atc svg {
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* ── Dots ─────────────────────────────────────────── */
.pcp-dots-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 20px !important;
  min-height: 10px !important;
  padding: 0 !important;
}
.pcp-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: #e5e7eb !important;
  background-color: #e5e7eb !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s, width 0.25s cubic-bezier(0.4,0,0.2,1) !important;
  outline: none !important;
  box-shadow: none !important;
}
.pcp-dot.active {
  background: #F5C518 !important;
  background-color: #F5C518 !important;
  width: 22px !important;
  border-radius: 4px !important;
}

/* ── Toast ────────────────────────────────────────── */
#pcp-toast {
  position: fixed !important;
  bottom: 24px !important; right: 24px !important;
  z-index: 999999 !important;
  background: #111111 !important;
  background-color: #111111 !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  padding: 12px 18px 12px 14px !important;
  border-radius: 10px !important;
  border-left: 4px solid #F5C518 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22) !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity 0.25s, transform 0.25s ease !important;
  pointer-events: none !important;
  max-width: 260px !important;
}
#pcp-toast.show { opacity: 1 !important; transform: translateY(0) !important; }

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 480px) {
  .pcp-title  { font-size: 1rem !important; }
  .pcp-arrow  { width: 36px !important; height: 36px !important; min-width: 36px !important; }
  .pcp-wrap .pcp-atc { font-size: 0.72rem !important; padding: 9px 12px !important; }
}