/**
 * Woo Category Slider Shortcode – Estilos Dark / Streetwear Edition
 *
 * Diseño: fondo negro, tarjetas con borde rojo brillante,
 * botón rojo full-width en mayúsculas.
 *
 * @package WooCategorySliderShortcode
 */

/* ── Variables globales ───────────────────────────────────────────────────── */
:root {
  --wcss-accent:          #cc1939;
  --wcss-accent-hover:    #e8203f;
  --wcss-accent-glow:     rgba(204, 25, 57, 0.45);

  --wcss-card-bg:         #0f0f0f;
  --wcss-card-bg-hover:   #161616;
  --wcss-card-border:     #cc1939;
  --wcss-card-radius:     10px;
  --wcss-card-shadow:     0 0 0 1.5px var(--wcss-card-border),
                          0 0 18px rgba(204, 25, 57, 0.18);
  --wcss-card-shadow-h:   0 0 0 2px var(--wcss-accent),
                          0 0 32px rgba(204, 25, 57, 0.40);

  --wcss-img-ratio: 1 / 1;
  /* cuadrado, ajusta si quieres 4/3 */
  --wcss-img-bg: #1a1a1a;

  --wcss-title-color: #ffffff;
  --wcss-price-color: #dddddd;
  --wcss-price-del-color: #888888;

  --wcss-btn-bg:          #cc1939;
  --wcss-btn-bg-hover:    #e8203f;
  --wcss-btn-color:       #ffffff;
  --wcss-btn-radius:      4px;

  --wcss-arrow-size:      36px;
  --wcss-arrow-color:     #ffffff;
  --wcss-arrow-bg:        rgba(204, 25, 57, 0.85);
  --wcss-arrow-bg-h:      #cc1939;

  --wcss-transition: 0.26s ease;
}

/* ── Google Font (Inter) – carga ligera ──────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* ── Wrapper del slider ───────────────────────────────────────────────────── */
.wcss-slider-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 48px;
  /* espacio para dots */
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

.wcss-slider-wrapper .swiper {
  overflow: hidden;
  padding: 10px 6px 10px;
  /* margen para sombras de tarjetas */
}

/* ── Slide ────────────────────────────────────────────────────────────────── */
.wcss-slide {
  height: auto;
  /* todos los slides con la misma altura */
}

/* ── Tarjeta de producto ──────────────────────────────────────────────────── */
.wcss-card {
  display: flex;
  flex-direction: column;
  background: var(--wcss-card-bg);
  border-radius: var(--wcss-card-radius);
  box-shadow: var(--wcss-card-shadow);
  overflow: hidden;
  transition:
    background var(--wcss-transition),
    box-shadow var(--wcss-transition),
    transform var(--wcss-transition);
  height: 100%;
}

.wcss-card:hover {
  background: var(--wcss-card-bg-hover);
  box-shadow: var(--wcss-card-shadow-h);
  transform: translateY(-4px);
}

/* ── Imagen ───────────────────────────────────────────────────────────────── */
.wcss-card__image-link {
  display: block;
  text-decoration: none;
}

.wcss-card__image-wrap {
  aspect-ratio: var(--wcss-img-ratio);
  overflow: hidden;
  background: var(--wcss-img-bg);
  border-bottom: 1.5px solid var(--wcss-card-border);
}

.wcss-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* centra verticalmente desde arriba */
  display: block;
  transition: transform 0.45s ease, filter 0.45s ease;
  filter: brightness(0.95);
}

.wcss-card:hover .wcss-card__img {
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* ── Cuerpo de la tarjeta ────────────────────────────────────────────────── */
.wcss-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 16px;
  flex: 1;
}

/* Título */
.wcss-card__title {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  min-height: 2.6em;    /* reserva siempre espacio para 2 líneas */
  margin: 0;
  color: var(--wcss-title-color);
}

.wcss-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--wcss-transition);
}

.wcss-card__title a:hover {
  color: var(--wcss-accent-hover);
}

/* Precio */
.wcss-card__price {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--wcss-price-color);
  line-height: 1;
  margin-top: 2px;
}

.wcss-card__price .woocommerce-Price-amount {
  color: inherit;
}

.wcss-card__price del {
  color: var(--wcss-price-del-color);
  font-weight: 400;
  font-size: 0.82em;
  margin-right: 4px;
}

.wcss-card__price ins {
  text-decoration: none;
  color: var(--wcss-accent-hover);
  font-weight: 700;
}

/* ── Botón ────────────────────────────────────────────────────────────────── */
.wcss-card__btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--wcss-btn-bg);
  color: var(--wcss-btn-color);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 11px 12px;
  border-radius: var(--wcss-btn-radius);
  text-decoration: none;
  cursor: pointer;
  border: none;
  margin-top: auto;
  padding-top: 14px;
  transition:
    background var(--wcss-transition),
    box-shadow var(--wcss-transition),
    transform var(--wcss-transition);
  box-sizing: border-box;
  line-height: 1.2;
  word-break: break-word;
}

.wcss-card__btn:hover,
.wcss-card__btn:focus-visible {
  background: var(--wcss-btn-bg-hover);
  box-shadow: 0 4px 20px rgba(204, 25, 57, 0.45);
  transform: translateY(-1px);
  color: #fff;
  outline: none;
}

.wcss-card__btn:active {
  transform: translateY(0);
}

/* ── Flechas de navegación ────────────────────────────────────────────────── */
.wcss-slider-wrapper .swiper-button-prev,
.wcss-slider-wrapper .swiper-button-next {
  width: var(--wcss-arrow-size);
  height: var(--wcss-arrow-size);
  background: var(--wcss-arrow-bg);
  border-radius: 50%;
  transition: background var(--wcss-transition), box-shadow var(--wcss-transition);
  box-shadow: 0 0 12px rgba(204, 25, 57, 0.4);
}

.wcss-slider-wrapper .swiper-button-prev:hover,
.wcss-slider-wrapper .swiper-button-next:hover {
  background: var(--wcss-arrow-bg-h);
  box-shadow: 0 0 22px rgba(204, 25, 57, 0.65);
}

.wcss-slider-wrapper .swiper-button-prev::after,
.wcss-slider-wrapper .swiper-button-next::after {
  font-size: 13px;
  color: var(--wcss-arrow-color);
  font-weight: 900;
}

/* ── Paginación (dots) ────────────────────────────────────────────────────── */
.wcss-slider-wrapper .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: #444;
  opacity: 1;
  transition: background var(--wcss-transition), transform var(--wcss-transition);
}

.wcss-slider-wrapper .swiper-pagination-bullet-active {
  background: var(--wcss-accent);
  transform: scale(1.4);
  box-shadow: 0 0 6px rgba(204, 25, 57, 0.45);
}

/* ── Mensaje sin productos ────────────────────────────────────────────────── */
.wcss-no-products {
  text-align: center;
  padding: 36px 16px;
  color: #888;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  background: #0f0f0f;
  border: 1.5px solid #cc1939;
  border-radius: 10px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 599px) {

  /* Flechas visibles en móvil, tamaño reducido */
  .wcss-slider-wrapper .swiper-button-prev,
  .wcss-slider-wrapper .swiper-button-next {
    width: 28px;
    height: 28px;
  }

  .wcss-slider-wrapper .swiper-button-prev::after,
  .wcss-slider-wrapper .swiper-button-next::after {
    font-size: 10px;
  }

  .wcss-card__title {
    font-size: 0.72rem;
    /* min-height sigue siendo 2.6em (relativo al font-size del elemento) */
  }

  .wcss-card__price {
    font-size: 0.80rem;
  }

  .wcss-card__btn {
    font-size: 0.68rem;
    padding: 9px 6px;
  }
}