/* ============================================================
   WooElite Products v2 — Stylesheet
   Plantillas: elegant · bold · fresh · classic
   ============================================================ */

/* ─── Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,400&family=DM+Sans:wght@300;400;500;600&family=Syne:wght@400;600;700;800&family=Cormorant:ital,wght@0,300;0,500;0,600;1,300;1,400&display=swap');

/* ─── Reset / base ────────────────────────────────────────── */
.wep-wrapper *,
.wep-wrapper *::before,
.wep-wrapper *::after { box-sizing: border-box; }

.wep-wrapper { position: relative; width: 100%; }
.wep-empty   { text-align: center; padding: 40px; color: #999; font-style: italic; }

/* ─── Grid ────────────────────────────────────────────────── */
.wep-grid {
  display: grid;
  grid-template-columns: repeat(var(--wep-cols, 3), 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .wep-grid { grid-template-columns: repeat(var(--wep-cols-tab, 2), 1fr); }
}
@media (max-width: 767px) {
  .wep-grid { grid-template-columns: repeat(var(--wep-cols-mob, 1), 1fr); }
}

/* ─── Carrusel ────────────────────────────────────────────── */
.wep-carousel-outer {
  position: relative;
  padding: 0 52px;
}
.wep-carousel-outer .wep-swiper { overflow: hidden; }
.wep-carousel-outer .swiper-wrapper { align-items: stretch; }
.wep-carousel-outer .swiper-slide  { height: auto; }

.wep-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.12);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.09);
  padding: 0;
}
.wep-arrow svg { width: 18px; height: 18px; }
.wep-arrow:hover { background: #111; border-color: #111; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.wep-arrow:hover svg { stroke: #fff; }
.wep-prev { left: 0; }
.wep-next { right: 0; }

.wep-pagination { margin-top: 20px !important; position: relative !important; bottom: unset !important; }
.swiper-pagination-bullet { background: rgba(0,0,0,.2) !important; opacity: 1 !important; transition: transform .2s, background .2s; }
.swiper-pagination-bullet-active { transform: scale(1.35); }

@media (max-width: 767px) {
  .wep-carousel-outer { padding: 0 36px; }
  .wep-arrow { width: 34px; height: 34px; }
  .wep-arrow svg { width: 15px; height: 15px; }
}

/* ─── Card base ───────────────────────────────────────────── */
.wep-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform .32s cubic-bezier(.4,0,.2,1), box-shadow .32s cubic-bezier(.4,0,.2,1);
}

/* ─── Image ───────────────────────────────────────────────── */
.wep-img-wrap { position: relative; overflow: hidden; flex-shrink: 0; }
.wep-img {
  width: 100%;
  height: 260px;
  background-size: cover;
  background-position: center;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  display: block;
}
.wep-card:hover .wep-img { transform: scale(1.06); }

/* ─── Badges ──────────────────────────────────────────────── */
.wep-badges {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 5px;
  z-index: 3;
  pointer-events: none;
}
.wep-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 100px;
  line-height: 1.6;
}
.wep-badge--sale { background: #e63946; color: #fff; }
.wep-badge--new  { background: #2ec4b6; color: #fff; }

/* ─── Wishlist ────────────────────────────────────────────── */
.wep-wishlist {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
  backdrop-filter: blur(4px);
  padding: 0;
}
.wep-wishlist svg { width: 15px; height: 15px; transition: fill .2s, stroke .2s; }
.wep-wishlist:hover { background: #e63946; transform: scale(1.08); }
.wep-wishlist:hover svg { stroke: #fff; }
.wep-wishlist.is-active { background: #e63946; }
.wep-wishlist.is-active svg { fill: #fff; stroke: #fff; }

/* ─── Body ────────────────────────────────────────────────── */
.wep-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ─── Category ────────────────────────────────────────────── */
.wep-category {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ─── Title ───────────────────────────────────────────────── */
.wep-title {
  margin: 0 0 8px;
  line-height: 1.35;
}
.wep-title a { text-decoration: none; color: inherit; transition: color .2s; }

/* ─── Rating ──────────────────────────────────────────────── */
.wep-rating {
  display: flex; align-items: center; gap: 2px;
  margin-bottom: 8px;
}
.wep-star { width: 13px; height: 13px; flex-shrink: 0; }
.wep-star--on  polygon { fill: currentColor; }
.wep-star--off polygon { fill: none; stroke: currentColor; stroke-width: 1.5; }
.wep-rating-count { font-size: 11px; opacity: .6; margin-left: 4px; }

/* ─── Price ───────────────────────────────────────────────── */
.wep-price { margin-bottom: 14px; }
.wep-price del { opacity: .5; margin-right: 4px; }
.wep-price ins { text-decoration: none; font-weight: 700; }

/* ─── Button ──────────────────────────────────────────────── */
.wep-btn-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 8px;
  transition: background .25s, color .25s, transform .2s, box-shadow .25s;
  margin-top: auto;
}
.wep-btn-cart svg { width: 15px; height: 15px; flex-shrink: 0; }
.wep-btn-cart:hover { transform: translateY(-2px); }
.wep-btn-cart--outofstock { opacity: .5; cursor: not-allowed; }
.wep-btn-cart--outofstock:hover { transform: none; }

/* ──────────────────────────────────────────────────────────
   TEMPLATE: ELEGANT
   Luxury minimal — Playfair / DM Sans — Warm gold
────────────────────────────────────────────────────────── */
.wep-tpl-elegant .wep-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 18px rgba(0,0,0,.07);
}
.wep-tpl-elegant .wep-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 45px rgba(0,0,0,.13);
}
.wep-tpl-elegant .wep-img-wrap { border-radius: 16px 16px 0 0; }

.wep-tpl-elegant .wep-category {
  color: #a8895c;
  background: none;
  font-family: 'DM Sans', sans-serif;
}
.wep-tpl-elegant .wep-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e1610;
}
.wep-tpl-elegant .wep-title a:hover { color: #a8895c; }
.wep-tpl-elegant .wep-rating { color: #c4a96c; }
.wep-tpl-elegant .wep-price { font-family: 'DM Sans', sans-serif; font-size: .95rem; color: #a8895c; font-weight: 700; }
.wep-tpl-elegant .wep-body  { font-family: 'DM Sans', sans-serif; }
.wep-tpl-elegant .wep-btn-cart {
  background: linear-gradient(135deg,#a8895c,#d4af72);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(168,137,92,.25);
}
.wep-tpl-elegant .wep-btn-cart:hover {
  background: linear-gradient(135deg,#8b7248,#a8895c);
  box-shadow: 0 8px 22px rgba(168,137,92,.38);
}
.wep-tpl-elegant .swiper-pagination-bullet-active { background: #a8895c !important; }
.wep-tpl-elegant .wep-arrow:hover { background: #a8895c; border-color: #a8895c; }

/* ──────────────────────────────────────────────────────────
   TEMPLATE: BOLD
   Dark neon — Syne — Electric cyan
────────────────────────────────────────────────────────── */
.wep-tpl-bold .wep-card {
  background: #0f1923;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
}
.wep-tpl-bold .wep-card:hover {
  transform: translateY(-4px);
  border-color: #00e5ff;
  box-shadow: 0 0 0 1px #00e5ff, 0 16px 40px rgba(0,229,255,.15);
}
.wep-tpl-bold .wep-img-wrap { border-radius: 9px 9px 0 0; }

.wep-tpl-bold .wep-category {
  font-family: 'Syne', sans-serif;
  font-size: 9px;
  color: #00e5ff;
  background: rgba(0,229,255,.1);
  border-radius: 4px;
  padding: 2px 8px;
  letter-spacing: .15em;
}
.wep-tpl-bold .wep-title {
  font-family: 'Syne', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: #e8f4f8;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.wep-tpl-bold .wep-title a:hover { color: #00e5ff; }
.wep-tpl-bold .wep-rating { color: #00e5ff; }
.wep-tpl-bold .wep-price { color: #fff; font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 800; }
.wep-tpl-bold .wep-price ins { color: #00e5ff; }
.wep-tpl-bold .wep-price del { color: rgba(255,255,255,.3); }
.wep-tpl-bold .wep-body  { font-family: 'Syne', sans-serif; }
.wep-tpl-bold .wep-btn-cart {
  background: transparent;
  color: #00e5ff;
  border: 1.5px solid #00e5ff;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.wep-tpl-bold .wep-btn-cart::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #00e5ff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  z-index: -1;
}
.wep-tpl-bold .wep-btn-cart:hover { color: #0f1923; }
.wep-tpl-bold .wep-btn-cart:hover::after { transform: scaleX(1); }
.wep-tpl-bold .wep-wishlist { background: rgba(255,255,255,.08); }
.wep-tpl-bold .wep-wishlist svg { stroke: #00e5ff; }
.wep-tpl-bold .swiper-pagination-bullet { background: rgba(255,255,255,.25) !important; }
.wep-tpl-bold .swiper-pagination-bullet-active { background: #00e5ff !important; }
.wep-tpl-bold .wep-arrow { background: #0f1923; border-color: rgba(0,229,255,.25); }
.wep-tpl-bold .wep-arrow svg { stroke: #00e5ff; }
.wep-tpl-bold .wep-arrow:hover { background: #00e5ff; border-color: #00e5ff; }
.wep-tpl-bold .wep-arrow:hover svg { stroke: #0f1923; }

/* ──────────────────────────────────────────────────────────
   TEMPLATE: FRESH
   Organic modern — DM Sans — Sage green
────────────────────────────────────────────────────────── */
.wep-tpl-fresh .wep-card {
  background: #f7fdf9;
  border-radius: 20px;
  border: 1.5px solid #c8e8d4;
}
.wep-tpl-fresh .wep-card:hover {
  transform: translateY(-8px);
  border-color: #3b8068;
  box-shadow: 0 20px 44px rgba(59,128,104,.14);
}
.wep-tpl-fresh .wep-img-wrap { border-radius: 18px 18px 0 0; }

.wep-tpl-fresh .wep-category {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: #fff;
  background: #3b8068;
  border-radius: 100px;
  padding: 2px 10px;
}
.wep-tpl-fresh .wep-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .98rem;
  font-weight: 600;
  color: #162d24;
}
.wep-tpl-fresh .wep-title a:hover { color: #3b8068; }
.wep-tpl-fresh .wep-rating { color: #3b8068; }
.wep-tpl-fresh .wep-price { font-family: 'DM Sans', sans-serif; font-size: .95rem; color: #3b8068; font-weight: 700; }
.wep-tpl-fresh .wep-body  { font-family: 'DM Sans', sans-serif; }
.wep-tpl-fresh .wep-btn-cart {
  background: linear-gradient(135deg,#3b8068,#57b08c);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(59,128,104,.22);
}
.wep-tpl-fresh .wep-btn-cart:hover {
  background: linear-gradient(135deg,#2a6050,#3b8068);
  box-shadow: 0 8px 22px rgba(59,128,104,.35);
}
.wep-tpl-fresh .swiper-pagination-bullet-active { background: #3b8068 !important; }
.wep-tpl-fresh .wep-arrow:hover { background: #3b8068; border-color: #3b8068; }

/* ──────────────────────────────────────────────────────────
   TEMPLATE: CLASSIC
   Editorial refined — Cormorant — Crimson red
────────────────────────────────────────────────────────── */
.wep-tpl-classic .wep-card {
  background: #faf9f6;
  border-radius: 0;
  border: 1px solid #dbd8d0;
}
.wep-tpl-classic .wep-card:hover {
  transform: none;
  box-shadow: 5px 5px 0 #1a1612;
}
.wep-tpl-classic .wep-img-wrap { border-radius: 0; }
.wep-tpl-classic .wep-body { border-top: 2px solid #1a1612; }

.wep-tpl-classic .wep-category {
  font-family: 'Cormorant', serif;
  font-size: 11px;
  font-style: italic;
  color: #b5271e;
  background: none;
  letter-spacing: .04em;
}
.wep-tpl-classic .wep-title {
  font-family: 'Cormorant', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a1612;
}
.wep-tpl-classic .wep-title a { border-bottom: 1px solid transparent; }
.wep-tpl-classic .wep-title a:hover { color: #b5271e; border-color: #b5271e; }
.wep-tpl-classic .wep-rating { color: #b5271e; }
.wep-tpl-classic .wep-price { font-family: 'Cormorant', serif; font-size: 1.1rem; font-weight: 700; color: #1a1612; }
.wep-tpl-classic .wep-price ins { color: #b5271e; }
.wep-tpl-classic .wep-body  { font-family: 'Cormorant', serif; }
.wep-tpl-classic .wep-btn-cart {
  background: #1a1612;
  color: #faf9f6;
  border-radius: 0;
  font-family: 'Cormorant', serif;
  font-size: 11px;
  letter-spacing: .12em;
}
.wep-tpl-classic .wep-btn-cart:hover {
  background: #b5271e;
  transform: none;
  box-shadow: 3px 3px 0 rgba(0,0,0,.25);
}
.wep-tpl-classic .swiper-pagination-bullet-active { background: #b5271e !important; }
.wep-tpl-classic .wep-arrow { border-radius: 0; }
.wep-tpl-classic .wep-arrow:hover { background: #1a1612; border-color: #1a1612; }

/* ─── Responsive tweaks ───────────────────────────────────── */
@media (max-width: 767px) {
  .wep-img { height: 200px !important; }
  .wep-btn-cart span { display: none; }
  .wep-btn-cart svg { width: 18px; height: 18px; margin: 0; }
  .wep-btn-cart { padding: 13px; }
  .wep-body { padding: 14px 14px 16px; }
}