@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Tenor+Sans&display=swap");

/* ════════════════════════════════════════════════════════
   ABHISHEK BANDHEJ — PREMIUM SLIDER  v2.1
   All rules scoped to .wc-slider-outer to prevent bleed
   from / into the Astra theme or other WP/WooCommerce CSS
   ════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
.wc-slider-outer {
  --ab-gold:       #b8924a;
  --ab-gold-deep:  #96722e;
  --ab-rust:       #c1440e;
  --ab-cream:      #fdf8f2;
  --ab-ink:        #1e1510;
  --ab-radius:     16px;
  --ab-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ab-transition: 0.72s var(--ab-ease);
  --ab-shadow:     0 4px 24px rgba(30,21,16,0.08), 0 1px 4px rgba(30,21,16,0.05);
  --ab-shadow-up:  0 24px 60px rgba(30,21,16,0.16), 0 6px 20px rgba(30,21,16,0.09);
}

/* ── Wrapper — reset all inherited theme spacing/typography ─ */
.wc-slider-outer {
  all: initial; /* nuclear reset — nothing leaks in or out */
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Tenor Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ab-ink);
  background: transparent;
  /* re-declare tokens after all: initial wipes them */
  --ab-gold:       #b8924a;
  --ab-gold-deep:  #96722e;
  --ab-rust:       #c1440e;
  --ab-cream:      #fdf8f2;
  --ab-ink:        #1e1510;
  --ab-radius:     16px;
  --ab-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ab-transition: 0.72s var(--ab-ease);
  --ab-shadow:     0 4px 24px rgba(30,21,16,0.08), 0 1px 4px rgba(30,21,16,0.05);
  --ab-shadow-up:  0 24px 60px rgba(30,21,16,0.16), 0 6px 20px rgba(30,21,16,0.09);
}

/* ── Box-sizing on everything inside ────────────────────── */
.wc-slider-outer *,
.wc-slider-outer *::before,
.wc-slider-outer *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Container ───────────────────────────────────────────── */
.wc-slider-outer .wc-slider-container {
  width: 100%;
  /* Fixed px height prevents vh from being tiny on mobile */
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

/* warm ambient glow */
.wc-slider-outer .wc-slider-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 40% at 50% 55%,
    rgba(184,146,74,0.055) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* ── Swiper track ────────────────────────────────────────── */
.wc-slider-outer .wc-slider-container .swiper {
  width: 100%;
  /* Fixed px padding so it doesn't collapse on narrow layouts.
     Top gives room for the active card scale-up shadow.
     Bottom must fit: card shadow (60px) + pagination (28px) + gap (20px) */
  padding-top: 48px;
  padding-bottom: 88px;
  position: relative;
  z-index: 1;
  /* Prevent Astra's overflow:hidden on section containers clipping arrows */
  overflow: visible !important;
}

/* ── Slide card ──────────────────────────────────────────── */
.wc-slider-outer .wc-slider-container .swiper-slide {
  /* Fixed px dimensions — never rely on % for a carousel card */
  position: relative;
  width: 260px;
  height: 380px;
  border-radius: var(--ab-radius);
  overflow: hidden;
  background: var(--ab-cream);

  filter: saturate(0.15) brightness(0.84);
  transform: scale(0.90);
  transition:
    filter     var(--ab-transition),
    transform  var(--ab-transition),
    box-shadow var(--ab-transition);

  outline: 1px solid rgba(30,21,16,0.07);
  box-shadow: var(--ab-shadow);
  will-change: transform, filter;

  /* Astra/WooCommerce sometimes adds float to li items */
  float: none !important;
  list-style: none !important;
}

/* ── Image link wrapper ──────────────────────────────────── */
.wc-slider-outer .wc-slider-container .wc-slide-img-wrap {
  display: block;
  width: 100%;
  height: 100%;
  /* kill any theme underline on links */
  text-decoration: none !important;
  border: none !important;
}

/* ── Product image ───────────────────────────────────────── */
.wc-slider-outer .wc-slider-container .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Astra adds max-width:100% globally — reinforce */
  max-width: 100%;
  transition: transform 0.88s var(--ab-ease);
  /* kill any theme border/padding on img */
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.wc-slider-outer .wc-slider-container .swiper-slide-active img {
  transform: scale(1.04);
}

/* ── Active card ─────────────────────────────────────────── */
.wc-slider-outer .wc-slider-container .swiper-slide-active {
  filter: saturate(1) brightness(1);
  transform: scale(1);
  box-shadow:
    var(--ab-shadow-up),
    0 0 0 1.5px rgba(184,146,74,0.36),
    0 0 28px  rgba(184,146,74,0.09);
  outline: 1.5px solid rgba(184,146,74,0.30);
  z-index: 10;
}

/* ── Sale / New badge ────────────────────────────────────── */
.wc-slider-outer .wc-slider-container .wc-slide-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  display: inline-block;
  background: var(--ab-rust);
  color: #fff;
  font-family: 'Tenor Sans', sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 2px;
  pointer-events: none;
  /* stop theme from applying link/button styles */
  border: none !important;
}

/* ── Info glass panel ────────────────────────────────────── */
.wc-slider-outer .wc-slider-container .wc-slide-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  /* top/bottom padding equal so glass panel height is predictable */
  padding: 14px 16px 14px;
  background: rgba(253,248,242,0.78);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-top: 1px solid rgba(184,146,74,0.18);
  transform: translateY(4px);
  opacity: 0.82;
  transition: transform var(--ab-transition), opacity var(--ab-transition);
}

/* gold hairline — active slide only */
.wc-slider-outer .wc-slider-container .wc-slide-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ab-gold), transparent);
  opacity: 0;
  transition: opacity var(--ab-transition);
}

.wc-slider-outer .wc-slider-container .swiper-slide-active .wc-slide-info {
  transform: translateY(0);
  opacity: 1;
}

.wc-slider-outer .wc-slider-container .swiper-slide-active .wc-slide-info::before {
  opacity: 1;
}

/* ── Product name ────────────────────────────────────────── */
.wc-slider-outer .wc-slider-container .wc-slide-name {
  /* Explicit reset — Astra h4 has margin-bottom and font-size that bleed in */
  display: block;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.38 !important;
  color: var(--ab-ink) !important;
  letter-spacing: 0.03em;
  text-transform: none !important;
  /* No border from WooCommerce h4 rules */
  border: none !important;
  background: none !important;
}

.wc-slider-outer .wc-slider-container .wc-slide-name a {
  color: var(--ab-ink) !important;
  text-decoration: none !important;
  border: none !important;
  /* Kill Astra link hover underline */
  background-image: none !important;
  box-shadow: none !important;
}

.wc-slider-outer .wc-slider-container .wc-slide-name a:hover {
  color: var(--ab-gold) !important;
}

/* ── Price ───────────────────────────────────────────────── */
.wc-slider-outer .wc-slider-container .wc-slide-price {
  display: block;
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.13em;
  color: var(--ab-gold-deep) !important;
  /* WooCommerce adds margin to .price spans */
  margin: 0 !important;
  padding: 0 !important;
}

/* WooCommerce wraps sale price in <ins> */
.wc-slider-outer .wc-slider-container .wc-slide-price ins {
  text-decoration: none !important;
  color: var(--ab-rust) !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

/* Strikethrough original price */
.wc-slider-outer .wc-slider-container .wc-slide-price del {
  opacity: 0.40;
  font-size: 10px !important;
  margin-right: 5px;
  /* Astra sometimes makes del display:none — force show */
  display: inline !important;
  text-decoration: line-through;
}

/* WooCommerce adds a .woocommerce-Price-amount span */
.wc-slider-outer .wc-slider-container .wc-slide-price .woocommerce-Price-amount {
  font-size: inherit !important;
  color: inherit !important;
}

.wc-slider-outer .wc-slider-container .wc-slide-price .woocommerce-Price-currencySymbol {
  font-size: inherit !important;
}

/* ── Pagination ──────────────────────────────────────────── */
.wc-slider-outer .wc-slider-container .swiper-pagination {
  /* Fixed px, not % — avoids miscalculation inside padded Elementor sections */
  bottom: 28px;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  z-index: 20;
}

.wc-slider-outer .wc-slider-container .swiper-pagination-bullet {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: rgba(30,21,16,0.18);
  border-radius: 50%;
  opacity: 1;
  transition: width 0.36s var(--ab-ease), border-radius 0.36s var(--ab-ease), background 0.36s ease;
  /* Swiper default margin is affected by theme reset — lock it */
  margin: 0 4px !important;
  padding: 0 !important;
  border: none !important;
  cursor: pointer;
  vertical-align: middle;
}

.wc-slider-outer .wc-slider-container .swiper-pagination-bullet-active {
  background: var(--ab-gold) !important;
  width: 20px !important;
  border-radius: 3px !important;
  box-shadow: 0 0 6px rgba(184,146,74,0.38);
}

/* ── Navigation arrows ───────────────────────────────────── */
.wc-slider-outer .wc-slider-container .swiper-button-prev,
.wc-slider-outer .wc-slider-container .swiper-button-next {
  /* Fixed positioning relative to the swiper track */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* margin-top: 0 important — Swiper default adds -12px */
  margin-top: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  outline: none !important;
  background: rgba(253,248,242,0.86) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(30,21,16,0.10) !important;
  color: rgba(30,21,16,0.45) !important;
  box-shadow: 0 2px 10px rgba(30,21,16,0.09);
  transition: background 0.26s, border-color 0.26s, color 0.26s, box-shadow 0.26s;
  /* prevent theme button styles */
  text-decoration: none !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.wc-slider-outer .wc-slider-container .swiper-button-prev:hover,
.wc-slider-outer .wc-slider-container .swiper-button-next:hover {
  background: #fff !important;
  border-color: rgba(184,146,74,0.48) !important;
  color: var(--ab-gold) !important;
  box-shadow: 0 4px 16px rgba(184,146,74,0.14);
}

/* Arrow icon size — Swiper default ::after is 44px, way too big */
.wc-slider-outer .wc-slider-container .swiper-button-prev::after,
.wc-slider-outer .wc-slider-container .swiper-button-next::after {
  font-size: 11px !important;
  font-weight: 700;
  color: inherit;
}

.wc-slider-outer .wc-slider-container .swiper-button-prev {
  left: 10px;
  right: auto;
}

.wc-slider-outer .wc-slider-container .swiper-button-next {
  right: 10px;
  left: auto;
}

.wc-slider-outer .wc-slider-container .swiper-button-prev.swiper-button-disabled,
.wc-slider-outer .wc-slider-container .swiper-button-next.swiper-button-disabled {
  opacity: 0 !important;
  pointer-events: none;
}

/* ── Mobile responsiveness ───────────────────────────────── */
@media (max-width: 600px) {
  .wc-slider-outer .wc-slider-container {
    min-height: 420px;
  }
  .wc-slider-outer .wc-slider-container .swiper-slide {
    width: 220px !important;
    height: 320px !important;
  }
  .wc-slider-outer .wc-slider-container .wc-slide-name {
    font-size: 13px !important;
  }
  /* Hide arrows on small screens — use swipe */
  .wc-slider-outer .wc-slider-container .swiper-button-prev,
  .wc-slider-outer .wc-slider-container .swiper-button-next {
    display: none !important;
  }
}

/* ── No products fallback ────────────────────────────────── */
.wc-slider-outer .wc-slider-container .wc-no-products {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ab-cream);
  color: var(--ab-gold-deep);
  font-family: 'Tenor Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 40px 20px;
}